@patternfly/react-core 4.272.0 → 4.273.0

package/next/components/Wizard/types.js

@@ -14,15 +14,12 @@ export function isCustomWizardFooter(footer) {
     return typeof footer === 'function' || React.isValidElement(footer);
 }
 export function isWizardBasicStep(step) {
-    var _a;
-    return ((_a = step) === null || _a === void 0 ? void 0 : _a.subStepIds) === undefined && !isWizardSubStep(step);
+    return (step === null || step === void 0 ? void 0 : step.subStepIds) === undefined && !isWizardSubStep(step);
 }
 export function isWizardSubStep(step) {
-    var _a;
-    return ((_a = step) === null || _a === void 0 ? void 0 : _a.parentId) !== undefined;
+    return (step === null || step === void 0 ? void 0 : step.parentId) !== undefined;
 }
 export function isWizardParentStep(step) {
-    var _a;
-    return ((_a = step) === null || _a === void 0 ? void 0 : _a.subStepIds) !== undefined;
+    return (step === null || step === void 0 ? void 0 : step.subStepIds) !== undefined;
 }
 //# sourceMappingURL=types.js.map

package/next/components/Wizard/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,0CAAmB,CAAA;IACnB,sCAAe,CAAA;AACjB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AA+DD,MAAM,UAAU,iBAAiB,CAAC,GAAkB;IAClD,OAAO,OAAO,GAAG,KAAK,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,OAA0B;IAE1B,OAAO,OAAO,OAAO,KAAK,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AACxE,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,MAAwB;IAExB,OAAO,OAAO,MAAM,KAAK,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAuB;;IACvD,OAAO,CAAA,MAAC,IAAyB,0CAAE,UAAU,MAAK,SAAS,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;AACxF,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAuB;;IACrD,OAAO,CAAA,MAAC,IAAsB,0CAAE,QAAQ,MAAK,SAAS,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAAuB;;IACxD,OAAO,CAAA,MAAC,IAAyB,0CAAE,UAAU,MAAK,SAAS,CAAC;AAC9D,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,0CAAmB,CAAA;IACnB,sCAAe,CAAA;AACjB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AA+DD,MAAM,UAAU,iBAAiB,CAAC,GAAkB;IAClD,OAAO,OAAO,GAAG,KAAK,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,OAA0B;IAE1B,OAAO,OAAO,OAAO,KAAK,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AACxE,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,MAAwB;IAExB,OAAO,OAAO,MAAM,KAAK,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAuB;IACvD,OAAO,CAAC,IAAyB,aAAzB,IAAI,uBAAJ,IAAI,CAAuB,UAAU,MAAK,SAAS,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;AACxF,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAuB;IACrD,OAAO,CAAC,IAAsB,aAAtB,IAAI,uBAAJ,IAAI,CAAoB,QAAQ,MAAK,SAAS,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAAuB;IACxD,OAAO,CAAC,IAAyB,aAAzB,IAAI,uBAAJ,IAAI,CAAuB,UAAU,MAAK,SAAS,CAAC;AAC9D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.272.0",
+  "version": "4.273.0",
   "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",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "98f8a725aca70798a70fa397ac93e3f870a32b29"
+  "gitHead": "f456ccbaa54574c5e7e52222a0f766d893a9c325"
 }

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -96,7 +96,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   const { isTree } = React.useContext(DualListSelectorContext);
 
   // only called when search input is dynamically built
-  const onChange = (newValue: string, e: React.FormEvent<HTMLInputElement>) => {
+  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
     let filtered: React.ReactNode[];
     if (isTree) {
       filtered = options
@@ -168,7 +168,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <SearchInput
                   onChange={isDisabled ? undefined : onChange}
                   onClear={
-                    onSearchInputClear ? onSearchInputClear : e => onChange('', e as React.FormEvent<HTMLInputElement>)
+                    onSearchInputClear ? onSearchInputClear : e => onChange(e as React.FormEvent<HTMLInputElement>, '')
                   }
                   isDisabled={isDisabled}
                   aria-label={searchInputAriaLabel}

package/src/components/DualListSelector/examples/DualListSelectorComposable.tsx

@@ -105,7 +105,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
   const buildSearchInput = (isAvailable: boolean) => (
     <SearchInput
       value={isAvailable ? availableFilter : chosenFilter}
-      onChange={value => onFilterChange(value, isAvailable)}
+      onChange={(_event, value) => onFilterChange(value, isAvailable)}
       onClear={() => onFilterChange('', isAvailable)}
     />
   );

package/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

@@ -169,7 +169,11 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     const onChange = value => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));
 
     return (
-      <SearchInput value={isChosen ? chosenFilter : availableFilter} onChange={onChange} onClear={() => onChange('')} />
+      <SearchInput
+        value={isChosen ? chosenFilter : availableFilter}
+        onChange={(_event, value) => onChange(value)}
+        onClear={() => onChange('')}
+      />
     );
   };
 

package/src/components/Label/Label.tsx

@@ -24,9 +24,9 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** @beta Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */
   editableProps?: any;
   /** @beta Callback when an editable label completes an edit. */
-  onEditComplete?: (newText: string) => void;
+  onEditComplete?: (event: MouseEvent | KeyboardEvent, newText: string) => void;
   /** @beta Callback when an editable label cancels an edit. */
-  onEditCancel?: (previousText: string) => void;
+  onEditCancel?: (event: KeyboardEvent, previousText: string) => void;
   /** Flag indicating the label text should be truncated. */
   isTruncated?: boolean;
   /** Position of the tooltip which is displayed if text is truncated */
@@ -126,7 +126,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       !editableInputRef.current.contains(event.target as Node)
     ) {
       if (editableInputRef.current.value) {
-        onEditComplete && onEditComplete(editableInputRef.current.value);
+        onEditComplete && onEditComplete(event, editableInputRef.current.value);
       }
       setIsEditableActive(false);
     }
@@ -148,7 +148,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       event.preventDefault();
       event.stopImmediatePropagation();
       if (editableInputRef.current.value) {
-        onEditComplete && onEditComplete(editableInputRef.current.value);
+        onEditComplete && onEditComplete(event, editableInputRef.current.value);
       }
       setIsEditableActive(false);
       editableButtonRef?.current?.focus();
@@ -159,7 +159,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       // Reset div text to initial children prop - pre-edit
       if (editableInputRef.current.value) {
         editableInputRef.current.value = children as string;
-        onEditCancel && onEditCancel(children as string);
+        onEditCancel && onEditCancel(event, children as string);
       }
       setIsEditableActive(false);
       editableButtonRef?.current?.focus();

package/src/components/Label/examples/LabelEditable.tsx

@@ -5,19 +5,19 @@ export const LabelEditable: React.FunctionComponent = () => {
   const [labelText, setLabelText] = React.useState('Editable label');
   const [compactLabelText, setCompactLabelText] = React.useState('Compact editable label');
 
-  const onEditCancel = (prevText: string) => {
+  const onEditCancel = (_event: KeyboardEvent, prevText: string) => {
     setLabelText(prevText);
   };
 
-  const onEditComplete = (text: string) => {
+  const onEditComplete = (_event: MouseEvent | KeyboardEvent, text: string) => {
     setLabelText(text);
   };
 
-  const onCompactEditCancel = (prevText: string) => {
+  const onCompactEditCancel = (_event: KeyboardEvent, prevText: string) => {
     setCompactLabelText(prevText);
   };
 
-  const onCompactEditComplete = (text: string) => {
+  const onCompactEditComplete = (_event: MouseEvent | KeyboardEvent, text: string) => {
     setCompactLabelText(text);
   };
 

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

@@ -67,8 +67,8 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
           id={label.id}
           color="blue"
           onClose={() => onClose(label.id)}
-          onEditCancel={prevText => onEdit(prevText, index)}
-          onEditComplete={newText => onEdit(newText, index)}
+          onEditCancel={(_event, prevText) => onEdit(prevText, index)}
+          onEditComplete={(_event, newText) => onEdit(newText, index)}
           {...label.props}
         >
           {label.name}

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

@@ -130,8 +130,8 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
             id={label.id}
             color="blue"
             onClose={() => onClose(label.id)}
-            onEditCancel={prevText => onEdit(prevText, index)}
-            onEditComplete={newText => onEdit(newText, index)}
+            onEditCancel={(_event, prevText) => onEdit(prevText, index)}
+            onEditComplete={(_event, newText) => onEdit(newText, index)}
             {...label.props}
           >
             {label.name}

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

@@ -247,8 +247,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
             id={label.id}
             color="blue"
             onClose={() => onClose(label.id)}
-            onEditCancel={prevText => onEdit(prevText, index)}
-            onEditComplete={newText => onEdit(newText, index)}
+            onEditCancel={(_event, prevText) => onEdit(prevText, index)}
+            onEditComplete={(_event, newText) => onEdit(newText, index)}
             {...label.props}
           >
             {label.name}

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

@@ -11,8 +11,8 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
       <Label
         color="blue"
         onClose={() => Function.prototype}
-        onEditCancel={prevText => setLabel1(prevText)}
-        onEditComplete={newText => setLabel1(newText)}
+        onEditCancel={(_event, prevText) => setLabel1(prevText)}
+        onEditComplete={(_event, newText) => setLabel1(newText)}
         isEditable
         editableProps={{
           'aria-label': `Editable label with text ${label1}`,
@@ -25,8 +25,8 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
       <Label
         color="blue"
         onClose={() => Function.prototype}
-        onEditCancel={prevText => setLabel2(prevText)}
-        onEditComplete={newText => setLabel2(newText)}
+        onEditCancel={(_event, prevText) => setLabel2(prevText)}
+        onEditComplete={(_event, newText) => setLabel2(newText)}
         isEditable
         editableProps={{
           'aria-label': `Editable label with text ${label2}`,
@@ -38,8 +38,8 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
       <Label
         color="blue"
         onClose={() => Function.prototype}
-        onEditCancel={prevText => setLabel3(prevText)}
-        onEditComplete={newText => setLabel3(newText)}
+        onEditCancel={(_event, prevText) => setLabel3(prevText)}
+        onEditComplete={(_event, newText) => setLabel3(newText)}
         isEditable
         editableProps={{
           'aria-label': `Editable label with text ${label3}`,

package/src/components/Menu/examples/MenuFilterDrilldown.tsx

@@ -103,7 +103,7 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
                     value={startInput}
                     aria-label="Filter menu items"
                     type="search"
-                    onChange={value => handleStartTextInputChange(value)}
+                    onChange={(_event, value) => handleStartTextInputChange(value)}
                   />
                 </MenuInput>
                 <Divider component="li" />

package/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx

@@ -39,7 +39,7 @@ export const MenuFilteringWithSearchInput: React.FunctionComponent = () => {
           value={input}
           aria-label="Filter menu items"
           type="search"
-          onChange={value => handleTextInputChange(value)}
+          onChange={(_event, value) => handleTextInputChange(value)}
         />
       </MenuInput>
       <Divider />

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -26,13 +26,13 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Flag for toggling the open/close state of the advanced search menu. */
   isSearchMenuOpen?: boolean;
   /** A callback for when the input value changes. */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** A callback for when the user clicks the clear button. */
   onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the search button is clicked. */
   onSearch?: (
-    value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
+    value: string,
     attrValueMap: { [key: string]: string }
   ) => void;
   /** A callback for when the open advanced search button is clicked. */
@@ -124,7 +124,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (onSearch) {
-      onSearch(value, event, getAttrValueMap());
+      onSearch(event, value, getAttrValueMap());
     }
     if (isSearchMenuOpen) {
       onToggleAdvancedMenu(event as any);
@@ -150,7 +150,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
     });
 
     if (onChange) {
-      onChange(updatedValue.replace(/^\s+/g, ''), event);
+      onChange(event, updatedValue.replace(/^\s+/g, ''));
     }
   };
 

package/src/components/SearchInput/SearchInput.tsx

@@ -96,7 +96,7 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** Accessible label for the button to navigate to next result. */
   nextNavigationButtonAriaLabel?: string;
   /** A callback for when the input value changes. */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** A callback for when the user clicks the clear button. */
   onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the user clicks to navigate to next result. */
@@ -105,8 +105,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the search button is clicked. */
   onSearch?: (
-    value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
+    value: string,
     attrValueMap: { [key: string]: string }
   ) => void;
   /** A callback for when the open advanced search button is clicked. */
@@ -211,7 +211,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const onChangeHandler = (event: React.FormEvent<HTMLInputElement>, value: string) => {
     if (onChange) {
-      onChange(value, event);
+      onChange(event, value);
     }
     setSearchValue(value);
   };
@@ -227,7 +227,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (onSearch) {
-      onSearch(value, event, getAttrValueMap());
+      onSearch(event, value, getAttrValueMap());
     }
     setIsSearchMenuOpen(false);
   };

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

@@ -38,8 +38,8 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
         ]}
         advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}
         value={value}
-        onChange={setValue}
-        onSearch={setValue}
+        onChange={(_event, value) => setValue(value)}
+        onSearch={(_event, value) => setValue(value)}
         onClear={() => setValue('')}
         formAdditionalItems={
           useCustomFooter ? (

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

@@ -8,5 +8,12 @@ export const SearchInputBasic: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  return <SearchInput placeholder="Find by name" value={value} onChange={onChange} onClear={() => onChange('')} />;
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={(_event, value) => onChange(value)}
+      onClear={() => onChange('')}
+    />
+  );
 };

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

@@ -7,7 +7,7 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => {
 
   return (
     <>
-      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
+      <SearchInput ref={ref} value={value} onChange={(_event, value) => setValue(value)} onClear={() => setValue('')} />
       <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
     </>
   );

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

@@ -17,7 +17,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={() => onChange('')}
       expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
     />

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

@@ -31,7 +31,7 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={onClear}
       isNextNavigationButtonDisabled={currentResult === 3}
       isPreviousNavigationButtonDisabled={currentResult === 1}

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

@@ -19,7 +19,7 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={onClear}
       resultsCount={resultsCount}
     />

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

@@ -8,8 +8,8 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={setValue}
-      onSearch={setValue}
+      onChange={(_event, value) => setValue(value)}
+      onSearch={(_event, value) => setValue(value)}
       onClear={() => setValue('')}
     />
   );