@patternfly/react-core 6.2.0-prerelease.1 → 6.2.0-prerelease.11

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.10","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.10","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.10","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.1",
+  "version": "6.2.0-prerelease.11",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,22 +46,22 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.2.0-prerelease.0",
-    "@patternfly/react-styles": "^6.2.0-prerelease.0",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.0",
-    "focus-trap": "7.6.2",
+    "@patternfly/react-icons": "^6.2.0-prerelease.2",
+    "@patternfly/react-styles": "^6.2.0-prerelease.2",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.2",
+    "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.1.0-prerelease.11",
+    "@patternfly/patternfly": "6.1.0",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
-    "fs-extra": "^11.2.0"
+    "fs-extra": "^11.3.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "99e344c2f5d577d518bcae57d13b7ab5fa191c03"
+  "gitHead": "d6ab1b6db6cdfb7464de2ce020acbd0192e287d9"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -89,7 +89,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */
-  children: string;
+  children: string | string[];
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -103,7 +103,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   timer = null as number;
   constructor(props: ClipboardCopyProps) {
     super(props);
-    const text = Array.isArray(this.props.children) ? this.props.children.join('') : (this.props.children as string);
+    const text = Array.isArray(this.props.children) ? this.props.children.join(' ') : (this.props.children as string);
     this.state = {
       text,
       expanded: this.props.isExpanded,
@@ -134,7 +134,9 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   componentDidUpdate = (prevProps: ClipboardCopyProps, prevState: ClipboardCopyState) => {
     if (prevProps.children !== this.props.children) {
-      const newText = this.props.children as string;
+      const newText = Array.isArray(this.props.children)
+        ? this.props.children.join(' ')
+        : (this.props.children as string);
       this.setState({ text: newText, textWhenExpanded: newText });
     }
   };

package/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx

@@ -336,6 +336,21 @@ test('Does not call onCopy when ClipboardCopyButton is not clicked', async () =>
   expect(onCopyMock).not.toHaveBeenCalled();
 });
 
+test('Can take array of strings as children', async () => {
+  const onCopyMock = jest.fn();
+  const user = userEvent.setup();
+  const childrenArray = children.split(' ');
+
+  // sanity check to ensure we are checking an array with at least 2 elements
+  expect(childrenArray.length).toBeGreaterThan(1);
+
+  render(<ClipboardCopy onCopy={onCopyMock}>{childrenArray}</ClipboardCopy>);
+
+  await user.click(screen.getByRole('button', { name: 'Test CCB clicker' }));
+
+  expect(onCopyMock).toHaveBeenCalledWith(expect.any(Object), children);
+});
+
 test('Matches snapshot', () => {
   const { asFragment } = render(
     <ClipboardCopy id="snapshot" ouiaId="snapshot">

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-26"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-27"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

package/src/components/FileUpload/FileUploadField.tsx

@@ -43,6 +43,8 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   id: string;
   /** Name property for the text input. */
   name?: string;
+  /** Flag to disable the browse button. */
+  isBrowseButtonDisabled?: boolean;
   /** Flag to disable the clear button. */
   isClearButtonDisabled?: boolean;
   /** Flag to show if the field is disabled. */
@@ -114,6 +116,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   browseButtonText = 'Browse...',
   browseButtonAriaDescribedby,
   clearButtonText = 'Clear',
+  isBrowseButtonDisabled = false,
   isClearButtonDisabled = !filename && !value,
   containerRef = null as React.Ref<HTMLDivElement>,
   allowEditingUploadedText = false,
@@ -153,7 +156,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             <Button
               variant={ButtonVariant.control}
               onClick={onBrowseButtonClick}
-              isDisabled={isDisabled}
+              isDisabled={isDisabled || isBrowseButtonDisabled}
               aria-describedby={browseButtonAriaDescribedby}
             >
               {browseButtonText}

package/src/components/FileUpload/__tests__/FileUploadField.test.tsx

@@ -1,6 +1,7 @@
 import { FileUploadField } from '../FileUploadField';
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
@@ -15,6 +16,7 @@ test('simple fileuploadfield', () => {
       filenamePlaceholder="Do something custom with this!"
       onBrowseButtonClick={browserBtnClickHandler}
       onClearButtonClick={clearBtnClickHandler}
+      isBrowseButtonDisabled={false}
       isClearButtonDisabled={false}
       isLoading={false}
       isDragActive={false}
@@ -32,7 +34,7 @@ test('Renders without aria-describedby on browse button by default', () => {
   expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAccessibleDescription();
 });
 
-test('Renders without aria-describedby on browse button by default', () => {
+test('Renders with aria-describedby on browse button', () => {
   render(
     <FileUploadField id="file-upload-field" browseButtonText="Upload" browseButtonAriaDescribedby="helper-text">
       <div id="helper-text">Helper text</div>
@@ -41,3 +43,15 @@ test('Renders without aria-describedby on browse button by default', () => {
 
   expect(screen.getByRole('button', { name: 'Upload' })).toHaveAccessibleDescription('Helper text');
 });
+
+test('Browse button is enabled by default', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" />);
+
+  expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAttribute('disabled');
+});
+
+test('Browse button is disabled with isBrowseButtonDisabled prop', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" isBrowseButtonDisabled={true} />);
+
+  expect(screen.getByRole('button', { name: 'Upload' })).toHaveAttribute('disabled');
+});

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -4,6 +4,7 @@ import { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Chec
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const properties = [
     'filename',
+    'isBrowseButtonDisabled',
     'isClearButtonDisabled',
     'isDragActive',
     'isLoading',
@@ -15,6 +16,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
 
   const [value, setValue] = React.useState('');
   const [filename, setFilename] = React.useState(false);
+  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = React.useState(true);
   const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true);
   const [isLoading, setIsLoading] = React.useState(false);
   const [isDragActive, setIsDragActive] = React.useState(false);
@@ -24,6 +26,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
   const [checkedState, setCheckedState] = React.useState([
     filename,
+    isBrowseButtonDisabled,
     isClearButtonDisabled,
     isLoading,
     isDragActive,
@@ -44,6 +47,10 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         checked ? setFilename(true) : setFilename(false);
         break;
 
+      case 'isBrowseButtonDisabled':
+        checked ? setIsBrowseButtonDisabled(true) : setIsBrowseButtonDisabled(false);
+        break;
+
       case 'isClearButtonDisabled':
         checked ? setIsClearButtonDisabled(true) : setIsClearButtonDisabled(false);
         break;
@@ -109,6 +116,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         filenamePlaceholder="Do something custom with this!"
         onBrowseButtonClick={() => alert('Browse button clicked!')}
         onClearButtonClick={() => alert('Clear button clicked!')}
+        isBrowseButtonDisabled={isBrowseButtonDisabled}
         isClearButtonDisabled={isClearButtonDisabled}
         isLoading={isLoading}
         isDragActive={isDragActive}

package/src/components/TextArea/TextArea.tsx

@@ -8,7 +8,8 @@ import { FormControlIcon } from '../FormControl/FormControlIcon';
 export enum TextAreResizeOrientation {
   horizontal = 'horizontal',
   vertical = 'vertical',
-  both = 'both'
+  both = 'both',
+  none = 'none'
 }
 
 export enum TextAreaReadOnlyVariant {
@@ -37,7 +38,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   /** A callback for when the text area value changes. */
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
   /** Sets the orientation to limit the resize to */
-  resizeOrientation?: 'horizontal' | 'vertical' | 'both';
+  resizeOrientation?: 'horizontal' | 'vertical' | 'both' | 'none';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
   'aria-label'?: string;
   /** @hide A reference object to attach to the text area. */
@@ -118,10 +119,10 @@ class TextAreaBase extends React.Component<TextAreaProps> {
       onFocus,
       ...props
     } = this.props;
-    const orientation = `resize${capitalize(resizeOrientation)}` as
-      | 'resizeVertical'
-      | 'resizeHorizontal'
-      | 'resizeBoth';
+    const orientation =
+      resizeOrientation !== 'none'
+        ? (`resize${capitalize(resizeOrientation)}` as 'resizeVertical' | 'resizeHorizontal' | 'resizeBoth')
+        : undefined;
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
@@ -130,7 +131,7 @@ class TextAreaBase extends React.Component<TextAreaProps> {
           styles.formControl,
           readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
-          resizeOrientation && styles.modifiers[orientation],
+          resizeOrientation !== 'none' && styles.modifiers[orientation],
           isDisabled && styles.modifiers.disabled,
           hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className

package/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@testing-library/jest-dom';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -93,6 +94,16 @@ test('Text area is not invalid by default', () => {
   expect(screen.getByRole('textbox')).not.toBeInvalid();
 });
 
+test('Renders vertically & resizable text area by default', () => {
+  render(<TextArea aria-label="vertical resize textarea" />);
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-both');
+});
+
+test('Renders vertically & resizable text area when resizeOrientation is set to both', () => {
+  render(<TextArea aria-label="vertical resize textarea" resizeOrientation="both" />);
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-both');
+});
+
 test('Renders vertically resizable text area', () => {
   render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
   expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-vertical');
@@ -103,6 +114,13 @@ test('Renders horizontally resizable text area', () => {
   expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-horizontal');
 });
 
+test('Disables resizable text area', () => {
+  render(<TextArea aria-label="disabled resize textarea" resizeOrientation="none" />);
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-vertical');
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-horizontal');
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-both');
+});
+
 test('Throws console error when no aria-label or id is given', () => {
   jest.spyOn(global.console, 'error');
 

package/src/components/TextArea/examples/TextArea.md

@@ -38,6 +38,12 @@ propComponents: ['TextArea']
 
 ```
 
+### Not resizable
+
+```ts file="./TextAreaResizableNone.tsx"
+
+```
+
 ### Uncontrolled
 
 ```ts file="./TextAreaUncontrolled.tsx"

package/src/components/TextArea/examples/TextAreaResizableNone.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaResizeNone: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={(_event, value) => setValue(value)}
+      resizeOrientation="none"
+      aria-label="text area resize none example"
+    />
+  );
+};

package/src/components/Toolbar/examples/Toolbar.md

@@ -62,6 +62,14 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 ```
 
+### Background color variants
+
+To change the background color of a toolbar, use the `colorVariant` property on the `<Toolbar>`.
+
+```ts file="./ToolbarColorVariant.tsx"
+
+```
+
 ## Examples with toggle groups and filters
 
 The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.
@@ -112,11 +120,3 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 ```ts file="./ToolbarStacked.tsx"
 
 ```
-
-## Background color variants
-
-To change the background color of a toolbar, use the `colorVariant` property on the `<Toolbar>`.
-
-```ts file="./ToolbarColorVariant.tsx"
-
-```

package/src/components/TreeView/examples/TreeView.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
-import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons';
+import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons';
 
 ## Examples
 
@@ -51,6 +51,12 @@ A search input can be used to filter tree view items. It is recommended that a t
 
 ```
 
+### With unique icon per item
+
+```ts file='./TreeViewWithIconPerItem.tsx'
+
+```
+
 ### With badges
 
 ```ts file='./TreeViewWithBadges.tsx'

package/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
+
+export const TreeViewWithIconPerItem: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems([treeViewItem]);
+    }
+  };
+  const options: TreeViewDataItem[] = [
+    {
+      name: 'Github accounts',
+      id: 'iconPerItem-Github',
+      icon: <GithubIcon />,
+      children: [
+        {
+          name: 'Account 1',
+          id: 'iconPerItem-Acc1'
+        },
+        {
+          name: 'Account 2',
+          id: 'iconPerItem-Acc2'
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Gitlab accounts',
+      id: 'iconPerItem-Gitlab',
+      icon: <GitlabIcon />,
+      children: [
+        {
+          name: 'Account 3',
+          id: 'iconPerItem-Acc3'
+        }
+      ]
+    },
+    {
+      name: 'Google accounts',
+      id: 'iconPerItem-Google',
+      icon: <GoogleIcon />,
+      children: [
+        {
+          name: 'Account 4',
+          id: 'iconPerItem-Acc4'
+        }
+      ]
+    }
+  ];
+  return (
+    <TreeView
+      aria-label="Tree View with unique icon per item example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
+};

package/src/components/Truncate/Truncate.tsx

@@ -88,7 +88,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     if (subParentRef && subParentRef.current.parentElement.parentElement && !parentElement) {
       setParentElement(subParentRef.current.parentElement.parentElement);
     }
-  }, [textRef, subParentRef]);
+  }, [textRef, subParentRef, textElement, parentElement]);
 
   React.useEffect(() => {
     if (textElement && parentElement && !observer.current) {
@@ -106,7 +106,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         observer();
       };
     }
-  }, [textElement, parentElement]);
+  }, [textElement, parentElement, trailingNumChars, content, position]);
 
   const truncateBody = (
     <span ref={subParentRef} className={css(styles.truncate, className)} {...props}>
@@ -116,18 +116,21 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
           {position === TruncatePosition.start && <React.Fragment>&lrm;</React.Fragment>}
         </span>
       )}
-      {position === TruncatePosition.middle &&
-        content.slice(0, content.length - trailingNumChars).length > minWidthCharacters && (
-          <React.Fragment>
-            <span ref={textRef} className={styles.truncateStart}>
-              {sliceContent(content, trailingNumChars)[0]}
-            </span>
-            <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
-          </React.Fragment>
-        )}
-      {position === TruncatePosition.middle &&
-        content.slice(0, content.length - trailingNumChars).length <= minWidthCharacters &&
-        content}
+      {position === TruncatePosition.middle && content.length - trailingNumChars > minWidthCharacters && (
+        <React.Fragment>
+          <span ref={textRef} className={styles.truncateStart}>
+            {sliceContent(content, trailingNumChars)[0]}
+          </span>
+          <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
+        </React.Fragment>
+      )}
+      {position === TruncatePosition.middle && content.length - trailingNumChars <= minWidthCharacters && (
+        <React.Fragment>
+          <span ref={textRef} className={styles.truncateStart}>
+            {content}
+          </span>
+        </React.Fragment>
+      )}
     </span>
   );
 

package/src/components/Truncate/__tests__/Truncate.test.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
+import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, position, children, ...props }) => (
@@ -112,6 +113,21 @@ test('renders different content when trailingNumChars is passed with middle trun
   expect(end).toHaveClass(styles.truncateEnd);
 });
 
+test('renders full content when trailingNumChars exceeds the length of the original string using middle truncate', () => {
+  render(
+    <Truncate
+      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'} // 75 chars
+      trailingNumChars={80}
+      position="middle"
+    />
+  );
+
+  const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.');
+
+  expect(start).toHaveClass(styles.truncateStart);
+  expect(start).not.toHaveClass(styles.truncateEnd);
+});
+
 test('renders tooltip position', () => {
   render(<Truncate content={''} tooltipPosition="top" />);