chore(rebase) merge main into v6

.github/ISSUE_TEMPLATE/PF6_alpha_bug_request.md

@@ -0,0 +1,17 @@
+---
+name: PF6 alpha bug
+about: Report a bug discovered while testing the PatternFly 6 alphas
+title: "[short description]"
+labels: 'v6 alpha bug'
+assignees: ''
+
+---
+
+**Please describe the issue**
+
+**Are there visuals for this issue? Please provide screenshots**
+Include screenshots or links to Marvel or other mockups.
+
+**Could you point to a branch or draft PR where this issue exists? Please provide a link to the code**
+
+**Any other information?**

.gitignore

@@ -31,3 +31,4 @@ lerna-debug.log
 .vscode
 # For vim
 *.swp
+.yarn

README.md

@@ -86,3 +86,4 @@ All React contributors must first be [PatternFly community contributors](https:/
 
 ### License
 PatternFly React is licensed under the [MIT License](https://github.com/patternfly/patternfly-react/tree/main/LICENSE).
+

babel.config.js

@@ -1,20 +1,4 @@
 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          esmodules: true
-        }
-      }
-    ],
-    '@babel/preset-typescript',
-    '@babel/preset-react'
-  ],
-  plugins: [
-    ['@babel/plugin-proposal-decorators', { legacy: true }],
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-object-rest-spread'
-  ]
+  presets: ['@babel/preset-typescript', '@babel/preset-react'],
+  plugins: ['@babel/plugin-transform-modules-commonjs']
 };

jest.config.js

@@ -14,13 +14,11 @@ module.exports = {
     '^.+\\.svg$': 'jest-transform-stub'
   },
   setupFilesAfterEnv: ['<rootDir>/packages/testSetup.ts'],
-  transformIgnorePatterns: [
-    'node_modules/(?!@patternfly|@novnc|@popperjs|lodash|monaco-editor|react-monaco-editor|case-anything)'
-  ],
   testPathIgnorePatterns: ['<rootDir>/packages/react-integration/'],
   coveragePathIgnorePatterns: ['/dist/'],
   moduleNameMapper: {
     '\\.(css|less)$': '<rootDir>/packages/react-styles/__mocks__/styleMock.js'
   },
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: ['/node_modules/(?!(case-anything)/)']
 };

package.json

@@ -24,16 +24,10 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.21.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/core": "^7.24.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@octokit/rest": "^20.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -43,8 +37,7 @@
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
-    "babel-jest": "^27.2.5",
-    "jest-transform-stub": "^2.0.0",
+    "babel-jest": "^29.7.0",
     "concurrently": "^7.6.0",
     "eslint": "^8.39.0",
     "eslint-plugin-markdown": "^3.0.0",
@@ -56,6 +49,7 @@
     "husky": "^4.3.0",
     "jest": "27.2.5",
     "jest-cli": "27.2.5",
+    "jest-transform-stub": "^2.0.0",
     "lerna": "^7.1.5",
     "lint-staged": "^14.0.0",
     "mutation-observer": "^1.0.3",
@@ -64,6 +58,7 @@
     "react": "^18",
     "react-dom": "^18",
     "surge": "^0.23.1",
+    "ts-node": "^10.9.1",
     "ts-patch": "^2.1.0",
     "typescript": "^4.7.4",
     "ts-node": "^10.9.1"

packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx

@@ -28,7 +28,7 @@ import { getTheme } from '../ChartUtils/chart-theme';
  *
  * See https://github.com/FormidableLabs/victory/blob/main/packages/victory-tooltip/src/index.d.ts
  */
-export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
+export interface ChartLegendTooltipProps extends Omit<ChartCursorTooltipProps, 'title'> {
   /**
    * The active prop specifies whether the tooltip component should be displayed.
    */
@@ -295,8 +295,11 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
   themeColor?: string;
   /**
    * The title prop specifies a title to render with the legend.
+   *
+   * @propType number | string | Function | string[]
+   * @example title={(datum) => datum.x}
    */
-  title?: string;
+  title?: string[] | StringOrNumberOrCallback;
   /**
    * This prop refers to the width of the svg that ChartLegendTooltip is rendered within. This prop is passed from
    * parents of ChartLegendTooltip, and should not be set manually. In versions before ^33.0.0 this prop referred to the

packages/react-code-editor/README.md

@@ -26,7 +26,19 @@ yarn add @patternfly/react-code-editor
 or
 
 ```
-npm install @patternfly/react-code-editor --save
+npm install @patternfly/react-code-editor
+```
+
+[!NOTE] For TypeScript type definitions, this package uses the `monaco-editor` package as a peer dependency. So, if you need types and don't already have the `monaco-editor package` installed, you will need to do so:
+
+```
+yarn add --dev monaco-editor
+```
+
+or
+
+```
+npm install --dev monaco-editor
 ```
 
 ### Usage
@@ -43,14 +55,6 @@ import '@patternfly/react-core/dist/styles/base.css';
 import { CodeEditor } from '@patternfly/react-code-editor';
 ```
 
-Install peer deps
-
-```json
-"monaco-editor": "^0.21.3",
-"react": "^17 || ^18",
-"react-dom": "^17 || ^18"
-```
-
 #### With create-react-app Projects
 
 If you created your project with `create-react-app` you'll have some extra work to do, or you wont have syntax highlighting. Using the webpack plugin requires updating your webpack config, which `create-react-app` abstracts away. You can `npm eject` your project, but you may not want to do that. To keep your app set up in the `create-react-app` style but to get access to your webpack config you can use `react-app-rewired`.

packages/react-code-editor/package.json

@@ -42,6 +42,7 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
+    "monaco-editor": "^0.47.0",
     "rimraf": "^2.6.2",
     "typescript": "^4.7.4"
   }

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -16,7 +16,7 @@ import {
   TooltipPosition
 } from '@patternfly/react-core';
 import Editor, { EditorProps, Monaco } from '@monaco-editor/react';
-import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import type { editor } from 'monaco-editor';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';

packages/react-core/README.md

@@ -53,3 +53,4 @@ All React contributors must first be [PatternFly community contributors](https:/
 
 ### License
 PatternFly React is licensed under the [MIT License](https://github.com/patternfly/patternfly-react/tree/main/LICENSE).
+

packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -211,6 +211,34 @@ test('Renders toggle icon before toggle text when togglePosition from context =
   expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
 });
 
+test('Renders toggle text before toggle icon by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleText);
+});
+
+test('Renders toggle icon before toggle text when togglePosition from context = "start"', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3', togglePosition: 'start' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>

packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

@@ -83,9 +83,6 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   validators?: ((date: Date) => boolean)[];
 }
 
-// Must be numeric given current header design
-const yearFormat = (date: Date) => date.getFullYear();
-
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
   const defaultDate = new Date(year, month);
 
@@ -164,6 +161,13 @@ export const CalendarMonth = ({
   };
   const initialDate = getInitialDate();
   const [focusedDate, setFocusedDate] = React.useState(initialDate);
+
+  // Must be numeric given current header design
+  const yearFormat = (date: Date) => date.getFullYear();
+  //
+  const yearFormatted = yearFormat(focusedDate);
+  const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
+
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
@@ -191,6 +195,7 @@ export const CalendarMonth = ({
     setHoveredDate(newDate);
     setShouldFocus(false);
     onMonthChange(ev, newDate);
+    setYearInput(yearFormat(newDate).toString());
   };
 
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -217,6 +222,34 @@ export const CalendarMonth = ({
   const changeMonth = (newMonth: number, newYear?: number) =>
     new Date(newYear ?? focusedDate.getFullYear(), newMonth, 1);
 
+  const MIN_YEAR = 1900;
+  const MAX_YEAR = 2100;
+
+  const handleYearInputChange = (event: React.FormEvent<HTMLInputElement>, yearStr: string) => {
+    if (!/^\d{0,4}$/.test(yearStr)) {
+      return;
+    }
+
+    setYearInput(yearStr);
+
+    if (yearStr.length === 4) {
+      const yearNum = Number(yearStr);
+
+      if (yearNum >= MIN_YEAR && yearNum <= MAX_YEAR) {
+        const newDate = changeYear(yearNum);
+        setFocusedDate(newDate);
+        setHoveredDate(newDate);
+        setShouldFocus(false);
+
+        // We need to manually focus the year input in FireFox when the scroll buttons are clicked, as FireFox doesn't place focus automatically
+        (event.target as HTMLElement).focus();
+        onMonthChange(event, newDate);
+      } else {
+        setYearInput(yearFormatted.toString());
+      }
+    }
+  };
+
   const addMonth = (toAdd: -1 | 1) => {
     let newMonth = focusedDate.getMonth() + toAdd;
     let newYear = focusedDate.getFullYear();
@@ -254,7 +287,6 @@ export const CalendarMonth = ({
   }
   const isHoveredDateValid = isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
-  const yearFormatted = yearFormat(focusedDate);
 
   const calendarToRender = (
     <div className={css(styles.calendarMonth, className)} {...props}>
@@ -321,15 +353,8 @@ export const CalendarMonth = ({
               <TextInput
                 aria-label={yearInputAriaLabel}
                 type="number"
-                value={yearFormatted}
-                onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                  const newDate = changeYear(Number(year));
-                  setFocusedDate(newDate);
-                  setHoveredDate(newDate);
-                  setShouldFocus(false);
-                  focusRef.current?.blur(); // will unfocus a date when changing year via up/down arrows
-                  onMonthChange(ev, newDate);
-                }}
+                value={yearInput}
+                onChange={handleYearInputChange}
               />
             </div>
           </InputGroupItem>

packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -10,8 +10,22 @@ import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 
-export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => {
-  navigator.clipboard.writeText(text.toString());
+export const clipboardCopyFunc = (_event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
+  try {
+    navigator.clipboard.writeText(text.toString());
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "Clipboard API not found, this copy function will not work. This is likely because you're using an",
+      "unsupported browser or you're not using HTTPS. \n\nIf you're a developer building an application which needs",
+      "to support copying to the clipboard without the clipboard API, you'll have to create your own copy",
+      'function and pass it to the ClipboardCopy component as the onCopy prop. For more information see',
+      'https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard'
+    );
+
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
 };
 
 export enum ClipboardCopyVariant {
@@ -70,8 +84,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   exitDelay?: number;
   /** Delay in ms before the tooltip appears. */
   entryDelay?: number;
-  /** A function that is triggered on clicking the copy button. */
-  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => void;
+  /** A function that is triggered on clicking the copy button. This will replace the existing clipboard copy functionality entirely. */
+  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */

packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx

@@ -4,6 +4,8 @@ import { ClipboardCopy } from '../ClipboardCopy';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import userEvent from '@testing-library/user-event';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 jest.mock('../ClipboardCopyButton', () => ({
   ClipboardCopyButton: ({ 'aria-label': ariaLabel, children, entryDelay, exitDelay, maxWidth, position, onClick }) => (
     <div data-testid="clipboardCopyButton-mock">

packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`Matches snapshot 1`] = `
           data-ouia-component-id="OUIA-Generated-TextInputBase-26"
           data-ouia-component-type="PF5/TextInput"
           data-ouia-safe="true"
-          id="text-input-34"
+          id="text-input-generated-id"
           type="text"
           value="Copyable text"
         />

packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx

@@ -14,6 +14,8 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { KeyTypes } from '../../../helpers';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 Object.values([
   { isExpanded: true, isInline: false, isStatic: false },
   { isExpanded: false, isInline: false, isStatic: false },

packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -34,6 +34,8 @@ test(`Renders with class ${styles.modifiers.secondary} when colorVariant="second
   expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.secondary);
 });
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('Does not render with aria-labelledby by default', () => {
   render(
     <Drawer isExpanded>