@patternfly/react-core 4.232.9 → 4.232.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.232.9",
+  "version": "4.232.12",
   "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",
@@ -50,9 +50,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.83.9",
-    "@patternfly/react-styles": "^4.82.9",
-    "@patternfly/react-tokens": "^4.84.9",
+    "@patternfly/react-icons": "^4.83.12",
+    "@patternfly/react-styles": "^4.82.12",
+    "@patternfly/react-tokens": "^4.84.12",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,21 +60,21 @@
   },
   "devDependencies": {
     "@patternfly/patternfly": "4.208.1",
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.58.0",
+    "rollup": "^2.78.0",
     "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "5dcbfc431138fdca38af2734e31d759b3719dc32"
+  "gitHead": "f78c7a0fe58401bb6a9e3b380067a98af76cf523"
 }

package/src/components/Label/Label.tsx

@@ -104,7 +104,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   render,
   ...props
 }: LabelProps) => {
-  const [isEditableActive, setIsEditableActive] = useState(false);
+  const [isEditableActive, setIsEditableActive] = useState<boolean>(false);
   const [currValue, setCurrValue] = useState(children);
   const editableButtonRef = React.useRef<HTMLButtonElement>();
   const editableInputRef = React.useRef<HTMLInputElement>();
@@ -151,6 +151,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         onEditComplete && onEditComplete(editableInputRef.current.value);
       }
       setIsEditableActive(false);
+      editableButtonRef?.current?.focus();
     }
     if (isEditableActive && key === 'Escape') {
       event.preventDefault();
@@ -161,6 +162,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         onEditCancel && onEditCancel(children as string);
       }
       setIsEditableActive(false);
+      editableButtonRef?.current?.focus();
     }
     if (!isEditableActive && key === 'Enter') {
       event.preventDefault();

package/src/components/LabelGroup/LabelGroup.tsx

@@ -52,13 +52,13 @@ export interface LabelGroupProps extends React.HTMLProps<HTMLUListElement> {
     | 'right-end';
   /** Flag to implement a vertical layout */
   isVertical?: boolean;
-  /** @beta Flag indicating contained labels are editable. Allows spacing for a text input after the labels. */
+  /** Flag indicating contained labels are editable. Allows spacing for a text input after the labels. */
   isEditable?: boolean;
-  /** @beta Flag indicating the editable label group should be appended with a textarea. */
+  /** Flag indicating the editable label group should be appended with a textarea. */
   hasEditableTextArea?: boolean;
-  /** @beta Additional props passed to the editable textarea. */
+  /** Additional props passed to the editable textarea. */
   editableTextAreaProps?: any;
-  /** @beta Control for adding new labels */
+  /** Control for adding new labels */
   addLabelControl?: React.ReactNode;
 }
 

package/src/components/LabelGroup/examples/LabelGroup.md

@@ -38,7 +38,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ### Editable labels
 
-```ts file="LabelGroupEditableLabels.tsx" isBeta
+```ts file="LabelGroupEditableLabels.tsx"
 ```
 
 ### Editable labels with add button

package/src/components/LabelGroup/examples/LabelGroupEditableAdd.tsx

@@ -58,7 +58,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
     >
       {labels.map((label, index) => (
         <Label
-          key={`${label.name}-${index}`}
+          key={label.id}
           id={`${label.name}-${index}`}
           color="blue"
           onClose={() => onClose(label.id)}

package/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -121,7 +121,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
       >
         {labels.map((label, index) => (
           <Label
-            key={`${label.name}-${index}`}
+            key={label.id}
             id={`${label.name}-${index}`}
             color="blue"
             onClose={() => onClose(label.id)}

package/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -27,17 +27,17 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   const [labelType, setLabelType] = React.useState<string>('filled');
   const [isClosable, setIsCloseable] = React.useState<boolean>(false);
   const [isEditable, setIsEditable] = React.useState<boolean>(false);
-  const labelInputRef = React.useRef();
+  const labelInputRef = React.useRef(null);
 
   const [isColorOpen, setIsColorOpen] = React.useState<boolean>(false);
-  const colorMenuRef = React.useRef<HTMLDivElement>();
-  const colorContainerRef = React.useRef<HTMLDivElement>();
-  const colorToggleRef = React.useRef<HTMLButtonElement>();
+  const colorMenuRef = React.useRef<HTMLDivElement>(null);
+  const colorContainerRef = React.useRef<HTMLDivElement>(null);
+  const colorToggleRef = React.useRef<HTMLButtonElement>(null);
 
   const [isIconOpen, setIsIconOpen] = React.useState<boolean>(false);
-  const iconMenuRef = React.useRef<HTMLDivElement>();
-  const iconContainerRef = React.useRef<HTMLDivElement>();
-  const iconToggleRef = React.useRef<HTMLButtonElement>();
+  const iconMenuRef = React.useRef<HTMLDivElement>(null);
+  const iconContainerRef = React.useRef<HTMLDivElement>(null);
+  const iconToggleRef = React.useRef<HTMLButtonElement>(null);
 
   const [labels, setLabels] = React.useState<any>([
     { name: 'Label 1', id: 0 },
@@ -65,7 +65,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   };
 
   const onAdd = () => {
-    let labelIcon = null;
+    let labelIcon: any;
     if (icon === 'Info circle icon') {
       labelIcon = <InfoCircleIcon />;
     }
@@ -92,7 +92,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
     setModalOpen(!isModalOpen);
     setIdIndex(idIndex + 1);
     setLabelText('');
-    setColor(null);
+    setColor('');
     setIcon(null);
     setLabelType('filled');
     setIsCloseable(false);
@@ -110,25 +110,25 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   }, [isModalOpen]);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isColorOpen && colorMenuRef.current.contains(event.target as Node)) {
+    if (isColorOpen && colorMenuRef?.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsColorOpen(!isColorOpen);
-        colorToggleRef.current.focus();
+        colorToggleRef?.current?.focus();
       }
     }
-    if (isIconOpen && iconMenuRef.current.contains(event.target as Node)) {
+    if (isIconOpen && iconMenuRef?.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsIconOpen(!isIconOpen);
-        iconToggleRef.current.focus();
+        iconToggleRef?.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isColorOpen && !colorMenuRef.current.contains(event.target as Node)) {
+    if (isColorOpen && !colorMenuRef?.current?.contains(event.target as Node)) {
       setIsColorOpen(false);
     }
-    if (isIconOpen && !iconMenuRef.current.contains(event.target as Node)) {
+    if (isIconOpen && !iconMenuRef?.current?.contains(event.target as Node)) {
       setIsIconOpen(false);
     }
   };
@@ -164,7 +164,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
       ref={colorMenuRef}
       activeItemId={color}
       onSelect={(_ev, itemId) => {
-        setColor(itemId.toString());
+        setColor(itemId?.toString());
+        colorToggleRef?.current?.focus();
         setIsColorOpen(false);
       }}
       selected={color}
@@ -205,7 +206,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
       ref={iconMenuRef}
       activeItemId={icon}
       onSelect={(_ev, itemId) => {
-        setIcon(itemId.toString());
+        setIcon(itemId?.toString());
+        iconToggleRef?.current?.focus();
         setIsIconOpen(false);
       }}
       selected={icon}
@@ -234,9 +236,9 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           </Label>
         }
       >
-        {labels.map((label, index) => (
+        {labels.map((label: { name: string; id: string; props: any }, index: number) => (
           <Label
-            key={`${label.name}-${index}`}
+            key={label.id}
             id={`${label.name}-${index}`}
             color="blue"
             onClose={() => onClose(label.id)}
@@ -278,7 +280,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
               <Popper
                 trigger={colorToggle}
                 popper={colorMenu}
-                appendTo={colorContainerRef.current}
+                appendTo={colorContainerRef.current as HTMLElement}
                 isVisible={isColorOpen}
                 popperMatchesTriggerWidth={false}
               />
@@ -289,7 +291,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
               <Popper
                 trigger={iconToggle}
                 popper={iconMenu}
-                appendTo={iconContainerRef.current}
+                appendTo={iconContainerRef.current as HTMLElement}
                 isVisible={isIconOpen}
                 popperMatchesTriggerWidth={false}
               />

package/src/components/SearchInput/examples/SearchInput.md

@@ -6,193 +6,33 @@ propComponents: ['SearchInput', 'SearchAttribute']
 beta: true
 ---
 
-import { SearchInput } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 ## Examples
 
 ### Basic
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-class BasicSearchInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.onChange = (value, event) => {
-      this.setState({
-        value: value
-      });
-    };
-  }
-
-  render() {
-    return (
-      <SearchInput
-        placeholder="Find by name"
-        value={this.state.value}
-        onChange={this.onChange}
-        onClear={evt => this.onChange('', evt)}
-      />
-    );
-  }
-}
+```ts file='./SearchInputBasic.tsx'
 ```
 
 ### Match with result count
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-class SearchInputWithResultCount extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      resultsCount: 0
-    };
-
-    this.onChange = (value, event) => {
-      this.setState({
-        value: value,
-        resultsCount: 3
-      });
-    };
-
-    this.onClear = event => {
-      this.setState({
-        value: '',
-        resultsCount: 0
-      });
-    };
-  }
-
-  render() {
-    return (
-      <SearchInput
-        placeholder="Find by name"
-        value={this.state.value}
-        onChange={this.onChange}
-        onClear={this.onClear}
-        resultsCount={this.state.resultsCount}
-      />
-    );
-  }
-}
+```ts file='./SearchInputWithResultCount.tsx'
 ```
 
 ### Match with navigable options
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-class SearchInputWithNavigableOptions extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      resultsCount: 0,
-      currentResult: 1,
-      isPreviousNavigationButtonDisabled: false,
-      isNextNavigationButtonDisabled: false
-    };
-
-    this.onChange = (value, event) => {
-      this.setState({
-        value: value,
-        resultsCount: 3
-      });
-    };
-
-    this.onClear = event => {
-      this.setState({
-        value: '',
-        resultsCount: 0,
-        currentResult: 1
-      });
-    };
-
-    this.onNext = event => {
-      this.setState(prevState => {
-        const newCurrentResult = prevState.currentResult + 1;
-        return {
-          currentResult: newCurrentResult <= prevState.resultsCount ? newCurrentResult : prevState.resultsCount
-        };
-      });
-    };
-
-    this.onPrevious = event => {
-      this.setState(prevState => {
-        const newCurrentResult = prevState.currentResult - 1;
-        return {
-          currentResult: newCurrentResult > 0 ? newCurrentResult : 1
-        };
-      });
-    };
-  }
-  render() {
-    return (
-      <SearchInput
-        placeholder="Find by name"
-        value={this.state.value}
-        onChange={this.onChange}
-        onClear={this.onClear}
-        isNextNavigationButtonDisabled={this.state.currentResult === 3}
-        isPreviousNavigationButtonDisabled={this.state.currentResult === 1}
-        resultsCount={`${this.state.currentResult} / ${this.state.resultsCount}`}
-        onNextClick={this.onNext}
-        onPreviousClick={this.onPrevious}
-      />
-    );
-  }
-}
+```ts file='./SearchInputWithNavigableOptions.tsx'
 ```
 
 ### With submit button
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-SubmitButtonSearchInput = () => {
-  const [value, setValue] = React.useState('');
-
-  return (
-    <SearchInput
-      placeholder='Find by name'
-      value={value}
-      onChange={setValue}
-      onSearch={setValue}
-      onClear={() => setValue('')}
-    />
-  );
-}
-
+```ts file='./SearchInputWithSubmitButton.tsx'
 ```
 
 ### Focus search input using ref
 
-```js
-import React from 'react';
-import { SearchInput, Button } from '@patternfly/react-core';
-
-TextInputSelectAll = () => {
-  const [value, setValue] = React.useState('');
-  const ref = React.useRef(null);
-  return (
-    <React.Fragment>
-      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
-      <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
-    </React.Fragment>
-  );
-};
+```ts file='./SearchInputFocusSearch.tsx'
 ```
 
 ### Advanced
@@ -203,62 +43,5 @@ the following example. The search input component can also be used as a composab
 or other elements to build a completely custom advanced search form. This feature is demonstrated 
 in the search input's <a href="/components/search-input/react-demos">react demos</a>.
 
-```js
-import React from 'react';
-import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
-
-AdvancedSearchInput = () => {
-  const [value, setValue] = React.useState('username:player firstname:john');
-  const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = React.useState(false);
-  const [useCustomFooter, setUseCustomFooter] = React.useState(false);
-
-  const toggleDelimiter = checked => {
-    const newValue = value.replace(/:|=/g, checked ? '=' : ':');
-    setUseEqualsAsDelimiter(checked);
-    setValue(newValue);
-  };
-
-  return (
-    <>
-      <Checkbox
-        label="Use equal sign as search attribute delimiter"
-        isChecked={useEqualsAsDelimiter}
-        onChange={toggleDelimiter}
-        aria-label="change delimiter checkbox"
-        id="toggle-delimiter"
-        name="toggle-delimiter"
-      />
-      <Checkbox
-        label="Add custom footer element after the attributes in the menu"
-        isChecked={useCustomFooter}
-        onChange={value => setUseCustomFooter(value)}
-        aria-label="change use custom footer checkbox"
-        id="toggle-custom-footer"
-        name="toggle-custom-footer"
-      />
-      <br />
-      <SearchInput
-        attributes={[
-          { attr: 'username', display: 'Username' },
-          { attr: 'firstname', display: 'First name' }
-        ]}
-        advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}
-        value={value}
-        onChange={setValue}
-        onSearch={setValue}
-        onClear={() => setValue('')}
-        formAdditionalItems={
-          useCustomFooter ? (
-            <FormGroup>
-              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
-                Link
-              </Button>
-            </FormGroup>
-          ) : null
-        }
-      />
-    </>
-  );
-};
+```ts file='./SearchInputAdvanced.tsx'
 ```

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
+import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+
+export const SearchInputAdvanced: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('username:player firstname:john');
+  const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = React.useState(false);
+  const [useCustomFooter, setUseCustomFooter] = React.useState(false);
+
+  const toggleDelimiter = (checked: boolean) => {
+    setValue(value.replace(/:|=/g, checked ? '=' : ':'));
+    setUseEqualsAsDelimiter(checked);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Use equal sign as search attribute delimiter"
+        isChecked={useEqualsAsDelimiter}
+        onChange={toggleDelimiter}
+        aria-label="change delimiter checkbox"
+        id="toggle-delimiter"
+        name="toggle-delimiter"
+      />
+      <Checkbox
+        label="Add custom footer element after the attributes in the menu"
+        isChecked={useCustomFooter}
+        onChange={value => setUseCustomFooter(value)}
+        aria-label="change use custom footer checkbox"
+        id="toggle-custom-footer"
+        name="toggle-custom-footer"
+      />
+      <br />
+      <SearchInput
+        attributes={[
+          { attr: 'username', display: 'Username' },
+          { attr: 'firstname', display: 'First name' }
+        ]}
+        advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}
+        value={value}
+        onChange={setValue}
+        onSearch={setValue}
+        onClear={() => setValue('')}
+        formAdditionalItems={
+          useCustomFooter ? (
+            <FormGroup>
+              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+                Link
+              </Button>
+            </FormGroup>
+          ) : null
+        }
+      />
+    </>
+  );
+};

package/src/components/SearchInput/examples/SearchInputBasic.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  const onChange = (value: string) => {
+    setValue(value);
+  };
+
+  return <SearchInput placeholder="Find by name" value={value} onChange={onChange} onClear={() => onChange('')} />;
+};

package/src/components/SearchInput/examples/SearchInputFocusSearch.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SearchInput, Button } from '@patternfly/react-core';
+
+export const SearchInputFocusSearch: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const ref: React.MutableRefObject<HTMLInputElement | null> = React.useRef(null);
+
+  return (
+    <>
+      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
+      <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
+    </>
+  );
+};

package/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [resultsCount, setResultsCount] = React.useState(0);
+  const [currentResult, setCurrentResult] = React.useState(1);
+
+  const onChange = (value: string) => {
+    setValue(value);
+    setResultsCount(3);
+  };
+
+  const onClear = () => {
+    setValue('');
+    setResultsCount(0);
+    setCurrentResult(1);
+  };
+
+  const onNext = () => {
+    const newCurrentResult = currentResult + 1;
+    setCurrentResult(newCurrentResult > resultsCount ? resultsCount : newCurrentResult);
+  };
+
+  const onPrevious = () => {
+    const newCurrentResult = currentResult - 1;
+    setCurrentResult(newCurrentResult > 0 ? newCurrentResult : 1);
+  };
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={onChange}
+      onClear={onClear}
+      isNextNavigationButtonDisabled={currentResult === 3}
+      isPreviousNavigationButtonDisabled={currentResult === 1}
+      resultsCount={`${currentResult} / ${resultsCount}`}
+      onNextClick={onNext}
+      onPreviousClick={onPrevious}
+    />
+  );
+};

package/src/components/SearchInput/examples/SearchInputWithResultCount.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithResultCount: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [resultsCount, setResultsCount] = React.useState(0);
+
+  const onChange = (value: string) => {
+    setValue(value);
+    setResultsCount(3);
+  };
+
+  const onClear = () => {
+    setValue('');
+    setResultsCount(0);
+  };
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={onChange}
+      onClear={onClear}
+      resultsCount={resultsCount}
+    />
+  );
+};

package/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={setValue}
+      onSearch={setValue}
+      onClear={() => setValue('')}
+    />
+  );
+};