@patternfly/react-core 4.271.0 → 4.271.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.271.0",
+  "version": "4.271.2",
   "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": "25c2750b4d7f220fe08d5cfa5ffacd06102d63fe"
+  "gitHead": "27ec34e45b7fb806e04e402be185ff819b1bb781"
 }

package/src/components/Alert/examples/Alert.md

@@ -360,4 +360,4 @@ Alerts that are asynchronously appended into dynamic [alert groups](/components/
 
 This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the [https://www.patternfly.org/v4/components/alert/accessibility](alert accessibility) for more information.
 ```ts file="AlertAsyncLiveRegion.tsx"
-```
+```

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -13,7 +13,7 @@ import { SearchInput } from '../SearchInput';
  * such as sorting, can also be passed into this sub-component.
  */
 
-export interface DualListSelectorPaneProps {
+export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
   /** Additional classes applied to the dual list selector pane. */
   className?: string;
   /** A dual list selector list or dual list selector tree to be rendered in the pane. */
@@ -65,6 +65,8 @@ export interface DualListSelectorPaneProps {
   searchInputAriaLabel?: string;
   /** @hide Callback for updating the filtered options in DualListSelector. To be used when isSearchable is true. */
   onFilterUpdate?: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
+  /** Minimum height of the list of options rendered in the pane. **/
+  listMinHeight?: string;
 }
 
 export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps> = ({
@@ -87,6 +89,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   filterOption,
   id = getUniqueId('dual-list-selector-pane'),
   isDisabled = false,
+  listMinHeight,
   ...props
 }: DualListSelectorPaneProps) => {
   const [input, setInput] = React.useState('');
@@ -198,12 +201,21 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             displayOption={displayOption}
             id={`${id}-list`}
             isDisabled={isDisabled}
+            {...(listMinHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+            })}
           >
             {children}
           </DualListSelectorListWrapper>
         )}
         {isTree && (
-          <DualListSelectorListWrapper aria-labelledby={`${id}-status`} id={`${id}-list`}>
+          <DualListSelectorListWrapper
+            aria-labelledby={`${id}-status`}
+            id={`${id}-list`}
+            {...(listMinHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+            })}
+          >
             {options.length > 0 ? (
               <DualListSelectorList>
                 <DualListSelectorTree

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -20,6 +20,7 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
 

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

@@ -8,13 +8,20 @@ import {
   DualListSelectorListItem,
   DualListSelectorControlsWrapper,
   DualListSelectorControl,
-  SearchInput
+  SearchInput,
+  Title,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStatePrimary
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Option {
   text: string;
@@ -86,25 +93,23 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     }
   };
 
-  // builds a search input - used in each dual list selector pane
-  const buildSearchInput = (isAvailable: boolean) => {
-    const onChange = (value: string) => {
-      isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
-      const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
-      toFilter.forEach(option => {
-        option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
-      });
-    };
-
-    return (
-      <SearchInput
-        value={isAvailable ? availableFilter : chosenFilter}
-        onChange={onChange}
-        onClear={() => onChange('')}
-      />
-    );
+  const onFilterChange = (value: string, isAvailable: boolean) => {
+    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+    toFilter.forEach(option => {
+      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+    });
   };
 
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => (
+    <SearchInput
+      value={isAvailable ? availableFilter : chosenFilter}
+      onChange={value => onFilterChange(value, isAvailable)}
+      onClear={() => onFilterChange('', isAvailable)}
+    />
+  );
+
   // builds a sort control - passed to both dual list selector panes
   const buildSort = (isAvailable: boolean) => {
     const onSort = () => {
@@ -132,6 +137,21 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     );
   };
 
+  const buildEmptyState = (isAvailable: boolean) => (
+    <EmptyState variant={EmptyStateVariant.small}>
+      <EmptyStateIcon icon={SearchIcon} />
+      <Title headingLevel="h4" size="md">
+        No results found
+      </Title>
+      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+      <EmptyStatePrimary>
+        <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+          Clear all filters
+        </Button>
+      </EmptyStatePrimary>
+    </EmptyState>
+  );
+
   return (
     <DualListSelector>
       <DualListSelectorPane
@@ -141,21 +161,27 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         } options selected`}
         searchInput={buildSearchInput(true)}
         actions={[buildSort(true)]}
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          {availableOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-available-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {availableFilter !== '' &&
+          availableOptions.filter(option => option.isVisible).length === 0 &&
+          buildEmptyState(true)}
+        {availableOptions.filter(option => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {availableOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-available-option-${index}`}
+                  onOptionSelect={e => onOptionSelect(e, index, false)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl
@@ -199,21 +225,25 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         searchInput={buildSearchInput(false)}
         actions={[buildSort(false)]}
         isChosen
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          {chosenOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-chosen-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, true)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {chosenFilter !== '' && chosenOptions.filter(option => option.isVisible).length === 0 && buildEmptyState(false)}
+        {chosenOptions.filter(option => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {chosenOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-chosen-option-${index}`}
+                  onOptionSelect={e => onOptionSelect(e, index, true)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     </DualListSelector>
   );

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

@@ -7,12 +7,20 @@ import {
   DualListSelectorControl,
   DualListSelectorTree,
   DualListSelectorTreeItemData,
-  SearchInput
+  SearchInput,
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStatePrimary
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface FoodNode {
   id: string;
@@ -235,19 +243,37 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)
     ).length;
     const status = `${numSelected} of ${numOptions} options selected`;
+    const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';
     return (
       <DualListSelectorPane
         title={isChosen ? 'Chosen' : 'Available'}
         status={status}
         searchInput={buildSearchInput(isChosen)}
         isChosen={isChosen}
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          <DualListSelectorTree
-            data={options}
-            onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
-          />
-        </DualListSelectorList>
+        {filterApplied && options.length === 0 && (
+          <EmptyState variant={EmptyStateVariant.small}>
+            <EmptyStateIcon icon={SearchIcon} />
+            <Title headingLevel="h4" size="md">
+              No results found
+            </Title>
+            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+            <EmptyStatePrimary>
+              <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
+                Clear all filters
+              </Button>
+            </EmptyStatePrimary>
+          </EmptyState>
+        )}
+        {options.length > 0 && (
+          <DualListSelectorList>
+            <DualListSelectorTree
+              data={options}
+              onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
+            />
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     );
   };

package/src/components/LoginPage/LoginPage.tsx

@@ -35,7 +35,7 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   loginTitle: string;
   /** Subtitle for the login main body header of the login page */
   loginSubtitle?: string;
-  /** @beta Header utilities for the login main body header of the login page */
+  /** Header utilities for the login main body header of the login page */
   headerUtilities?: React.ReactNode;
   /** Content rendered inside of login main footer band to display a sign up for account message */
   signUpForAccountMessage?: React.ReactNode;

package/src/components/Menu/MenuItem.tsx

@@ -24,7 +24,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
-  /** @beta Flag indicating the item has a checkbox */
+  /** Flag indicating the item has a checkbox */
   hasCheck?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;

package/src/components/SearchInput/SearchInput.tsx

@@ -130,6 +130,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   submitSearchButtonLabel?: string;
   /** Value of the search input. */
   value?: string;
+  /** Name attribue for the search input */
+  name?: string;
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
@@ -164,6 +166,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   removeFindDomNode = false,
   zIndex = 9999,
   type = 'text',
+  name,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -304,6 +307,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onKeyDown={onEnter}
         onChange={onChangeHandler}
         type={type}
+        name={name}
       />
       {renderUtilities && (
         <TextInputGroupUtilities>

package/src/components/Select/Select.tsx

@@ -73,7 +73,7 @@ export interface SelectProps
   isCreateOptionOnTop?: boolean;
   /** Flag indicating if placeholder styles should be applied */
   hasPlaceholderStyle?: boolean;
-  /** @beta Flag indicating if the creatable option should set its value as a SelectOptionObject */
+  /** Flag indicating if the creatable option should set its value as a SelectOptionObject */
   isCreateSelectOptionObject?: boolean;
   /** Value to indicate if the select is modified to show that validation state.
    * If set to success, select will be modified to indicate valid state.
@@ -81,7 +81,7 @@ export interface SelectProps
    * If set to warning, select will be modified to indicate warning state.
    */
   validated?: 'success' | 'warning' | 'error' | 'default';
-  /** @beta Loading variant to display either the spinner or the view more text button */
+  /** Loading variant to display either the spinner or the view more text button */
   loadingVariant?: 'spinner' | SelectViewMoreObject;
   /** Text displayed in typeahead select to prompt the user to create an item */
   createText?: string;
@@ -165,7 +165,7 @@ export interface SelectProps
   chipGroupComponent?: React.ReactNode;
   /** Flag for retaining keyboard-entered value in typeahead text field when focus leaves input away */
   isInputValuePersisted?: boolean;
-  /** @beta Flag for retaining filter results on blur from keyboard-entered typeahead text */
+  /** Flag for retaining filter results on blur from keyboard-entered typeahead text */
   isInputFilterPersisted?: boolean;
   /** Flag indicating the typeahead input value should reset upon selection */
   shouldResetOnSelect?: boolean;

package/src/components/Tabs/Tabs.tsx

@@ -42,11 +42,11 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   defaultActiveKey?: number | string;
   /** Callback to handle tab selection */
   onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
-  /** @beta Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
+  /** Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
   onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
-  /** @beta Callback for the add button. Passing this property inserts the add button */
+  /** Callback for the add button. Passing this property inserts the add button */
   onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  /** @beta Aria-label for the add button */
+  /** Aria-label for the add button */
   addButtonAriaLabel?: string;
   /** Uniquely identifies the tabs */
   id?: string;

package/src/components/Tabs/examples/Tabs.md

@@ -141,15 +141,15 @@ The tooltip should also have the `id` prop passed in. The value given to this pr
 
 To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable the add button, pass the `onAdd` property to `Tabs`. Aria labels may be controlled manually by passing `closeButtonAriaLabel` to `Tab` and `addButtonAriaLabel` to `Tabs`.
 
-```ts file="./TabsDynamic.tsx" isBeta
+```ts file="./TabsDynamic.tsx" 
 ```
 
 ### Help action
 
-```ts file="./TabsHelp.tsx" isBeta
+```ts file="./TabsHelp.tsx"
 ```
 
 ### Help and close actions
 
-```ts file="./TabsHelpAndClose.tsx" isBeta
+```ts file="./TabsHelpAndClose.tsx"
 ```

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

@@ -56,5 +56,5 @@ propComponents: ['TextArea']
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```ts isBeta file="./TextAreaIconSprite.tsx"
+```ts file="./TextAreaIconSprite.tsx"
 ```

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -39,6 +39,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   placeholder?: string;
   /** A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
+  /** Name for the input */
+  name?: string;
 }
 
 export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -54,6 +56,7 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
   value: inputValue,
   placeholder: inputPlaceHolder,
   innerRef,
+  name,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
@@ -89,6 +92,7 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
           onBlur={onBlur}
           value={inputValue || ''}
           placeholder={inputPlaceHolder}
+          name={name}
         />
       </span>
     </div>