@patternfly/react-core 4.245.0 → 4.247.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.245.0",
+  "version": "4.247.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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "36df59ed72c668ee3f4c43a7b3d87b7375266f3c"
+  "gitHead": "064d341a881a7ab291add565ed1929cf915ab049"
 }

package/src/components/Dropdown/examples/Dropdown.md

@@ -18,133 +18,157 @@ import avatarImg from '../../Avatar/examples/avatarImg.svg';
 
 ## Examples
 
-### Basic
+### Basic dropdowns
+
+Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. The `isOpen` property is used to determine whether the menu is opened or not.
+
+All of the items in a dropdown list are created as `<DropdownItem>` components. The following example shows a few different states of dropdown items. As shown in this example, dropdown items may: 
+- Use the `tooltip` property to enable tooltip support. 
+- Use the `isDisabled` property to disable an item.
+- Use the `isAriaDisabled` property to style an item as disabled, while still allowing the item to receive keyboard focus and display a tooltip.
+
+This example also uses a `<DropdownSeparator>`, which adds a horizontal line that splits the menu into 2 sections.
 
 ```ts file='./DropdownBasic.tsx'
 ```
 
-### With initial selection
+### Autofocus on dropdown expansion
+
+A `<DropdownItem>` may use the  `autoFocus` property so that it automatically receives focus when the menu is expanded. `autoFocus` cannot be applied to disabled dropdown items.
 
 ```ts file="./DropdownInitialSelection.tsx"
 ```
 
-### With groups
+### With groups of items
+
+Use the `<DropdownGroup>` component to group sets of related dropdown items together. Use the `isGrouped` property on the `Dropdown` component to indicate that a dropdown contains grouped items.
 
 ```ts file="./DropdownGroups.tsx"
 ```
 
-### Disabled
+### With item descriptions
 
-```ts file="./DropdownDisabled.tsx"
+A `<DropdownItem>` may use the `description` property to provide users with more context. This description will appear in the menu below the dropdown item it corresponds to.
+
+```ts file="./DropdownDescriptions.tsx"
 ```
 
-### Primary toggle
+### With custom content
 
-```ts file="./DropdownPrimaryToggle.tsx"
+You may replace standard dropdown items with custom content. If so, you must style the menu contents and manage focus within your custom implementation.
+
+```ts file="./DropdownBasicPanel.tsx"
 ```
 
-### Secondary toggle
+### With router link items
 
-```ts file="./DropdownSecondaryToggle.tsx"
+`<DropdownItem>` may use the `component` property to include router links.
+
+```ts file="./DropdownRouterLink.tsx"
 ```
 
-### Plain with text toggle
+### Toggle styling
 
-```ts file="./DropdownPlainTextToggle.tsx"
+You can adjust the styling of a `<DropdownToggle>` using the `toggleVariant` property. `toggleVariant` may be set to 'primary', 'secondary', or 'default'.
+
+```ts file="./DropdownPrimaryToggle.tsx"
 ```
 
-### Position right
+### Plain text toggle
 
-```ts file="./DropdownPositionRight.tsx"
+A toggle may be styled as plain text using the `isText` and `isPlain`properties. The following example applies these properties to a `<Dropdown>` component.
+
+```ts file="./DropdownPlainTextToggle.tsx"
 ```
 
-### Alignments on different breakpoints
+### Disabled toggles
 
-```ts file="./DropdownAlignmentOnBreakpoints.tsx"
+A `<DropdownToggle>` may use the `isDisabled` property to disable the expansion of the dropdown menu.
+
+```ts file="./DropdownDisabled.tsx"
 ```
 
-### Direction up
+### Icon toggle
 
-```ts file="./DropdownDirectionUp.tsx"
+`<DropdownToggle>` may use a recognizable icon instead of a text label if text would take up too much room. Set the `toggleIndicator` property to `{null}` to remove the default dropdown toggle caret.
+
+```ts file="./DropdownIconOnly.tsx"
 ```
 
-### With kebab
+### Kebab toggle
+
+Use `<KebabToggle>` to replace the default text label and caret with a kebab icon. A kebab toggle can be used to indicate that a dropdown connects to a menu.
 
 ```ts file="./DropdownKebab.tsx"
 ```
 
-### With badge
+### Toggle with image
 
-```ts file="./DropdownBadge.tsx"
+The `icon` property can be used to display an image in the `DropdownToggle` and can be used alongside a text label.
+
+```ts file="./DropdownImageAndText.tsx"
 ```
 
-### Icon only
+### Toggle with badge
 
-```ts file="./DropdownIconOnly.tsx"
+You may use a `<BadgeToggle>` to display the number of dropdown menu items.
+
+```ts file="./DropdownBadge.tsx"
 ```
 
 ### Split button
 
-```ts file="./DropdownSplitButton.tsx"
-```
+To combine an action button or other control with a dropdown menu, use a split button. A `<DropdownToggle>` can be rendered as a split button by using the `splitButtonItems` property. Elements to be displayed before the toggle button must be included in `splitButtonItems`.
 
-### Split button (with text)
+The following example shows a split button with a `<DropdownToggleCheckbox>`, which is primarily used for bulk select operations on large data sets. 
 
-```ts file="./DropdownSplitButtonText.tsx"
+```ts file="./DropdownSplitButton.tsx"
 ```
 
-### Split button (indeterminate state)
-
-```ts file="./DropdownSplitButtonIndeterminate.tsx"
-```
+### Split button text label
 
-### Split button (disabled)
+Text labels may optionally be used alongside actions within split buttons.
 
-```ts file="./DropdownSplitButtonDisabled.tsx"
+```ts file="./DropdownSplitButtonText.tsx"
 ```
 
-### Split button action
+### Split button toggle variants
 
-```ts file="./DropdownSplitButtonAction.tsx"
-```
+Use the `toggleVariant` and `splitButtonVariant` properties to adjust the styling of split button toggles. 
 
-### Split button primary action
+The following example uses `toggleVariant="primary"` to apply primary visual styling and `splitButtonVariant="action"` to include an action.
 
 ```ts file="./DropdownSplitButtonActionPrimary.tsx"
 ```
 
-### Split button secondary action
+### Dropdown alignment
 
-```ts file="./DropdownSplitButtonActionSecondary.tsx"
-```
+The alignment of a dropdown menu may be changed to better fit the size of a user's browser window. A `<Dropdown>` may use the `alignments` property to indicate how the menu will align at different screen sizes.
 
-### Basic panel
-
-```ts file="./DropdownBasicPanel.tsx"
+```ts file="./DropdownAlignmentOnBreakpoints.tsx"
 ```
 
-### Router link
+### Right-positioned menu
 
-```ts file="./DropdownRouterLink.tsx"
+The following example demonstrates a `<Dropdown>` with a `position` equal to 'right'. By default, a dropdown menu is left-positioned, but a right-positioned menu may work better depending on where your dropdown is placed on a page.
+
+```ts file="./DropdownPositionRight.tsx"
 ```
 
-### Dropdown with image and text
+### Upwards directional menu
 
-```ts file="./DropdownImageAndText.tsx"
+The following example demonstrates a `<Dropdown>` with a  `direction` equal to 'up'. This will alter the default menu behavior so that the dropdown menu is displayed above the dropdown toggle.
+
+```ts file="./DropdownDirectionUp.tsx"
 ```
 
-### Appending document body vs parent
+### Using document parent element
 
-Avoid passing in `document.body` when passing a value to the `menuAppendTo` prop on the Dropdown component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Dropdown options via assistive technologies (like keyboards or screen readers).
+Avoid passing in `document.body` to a `<Dropdown>` `menuAppendTo` property. Doing so can cause accessibility issues, such as being unable to navigate `<Dropdown>` options using keyboards or screen readers. 
 
-Instead append to `"parent"` to achieve the same result without sacrificing accessibility.
+Instead, append to ‘parent’ to avoid sacrificing accessibility.
 
-In this example, while, after making a selection, both variants retain focus on their respective Dropdown component, the options for the `document.body` variant cannot be navigated to via Voice Over.
+The following example demonstrates both methods of appending. After making a selection, both dropdowns retain focus on their respective `<Dropdown>`, but the options for the `document.body` variant cannot be navigated via Voice Over.
 
 ```ts file="./DropdownAppendBodyVsParent.tsx"
 ```
-
-### Dropdown with descriptions
-
-```ts file="./DropdownDescriptions.tsx"
-```

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import { DualListSelectorTree, DualListSelectorTreeItemData } from './DualListSelectorTree';
 import { getUniqueId } from '../../helpers';
 import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
 import { DualListSelectorList } from './DualListSelectorList';
+import { SearchInput } from '../SearchInput';
 
 /** Acts as the container for a list of options that are either available or chosen,
  * depending on the pane type (available or chosen). A search input and other actions,
@@ -57,6 +57,8 @@ export interface DualListSelectorPaneProps {
   onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   /** @hide A callback for when the search input value for changes.  To be used when isSearchable is true. */
   onSearchInputChanged?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  /** @hide Callback for search input clear button */
+  onSearchInputClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** @hide Filter function for custom filtering based on search string. To be used when isSearchable is true. */
   filterOption?: (option: React.ReactNode, input: string) => boolean;
   /** @hide Accessible label for the search input. To be used when isSearchable is true. */
@@ -81,6 +83,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   searchInputAriaLabel = '',
   onFilterUpdate,
   onSearchInputChanged,
+  onSearchInputClear,
   filterOption,
   id = getUniqueId('dual-list-selector-pane'),
   isDisabled = false,
@@ -90,8 +93,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   const { isTree } = React.useContext(DualListSelectorContext);
 
   // only called when search input is dynamically built
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
+  const onChange = (newValue: string, e: React.FormEvent<HTMLInputElement>) => {
     let filtered: React.ReactNode[];
     if (isTree) {
       filtered = options
@@ -160,12 +162,14 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
               {searchInput ? (
                 searchInput
               ) : (
-                <input
-                  className={css(formStyles.formControl, formStyles.modifiers.search)}
-                  type="search"
+                <SearchInput
                   onChange={isDisabled ? undefined : onChange}
+                  onClear={
+                    onSearchInputClear ? onSearchInputClear : e => onChange('', e as React.FormEvent<HTMLInputElement>)
+                  }
+                  isDisabled={isDisabled}
                   aria-label={searchInputAriaLabel}
-                  disabled={isDisabled}
+                  type="search"
                 />
               )}
             </div>

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

@@ -1135,11 +1135,41 @@ exports[`DualListSelector with search inputs 1`] = `
         <div
           class="pf-c-dual-list-selector__tools-filter"
         >
-          <input
-            aria-label="Available search input"
-            class="pf-c-form-control pf-m-search"
-            type="search"
-          />
+          <div
+            class="pf-c-text-input-group"
+          >
+            <div
+              class="pf-c-text-input-group__main pf-m-icon"
+            >
+              <span
+                class="pf-c-text-input-group__text"
+              >
+                <span
+                  class="pf-c-text-input-group__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                    />
+                  </svg>
+                </span>
+                <input
+                  aria-label="Available search input"
+                  class="pf-c-text-input-group__text-input"
+                  type="search"
+                  value=""
+                />
+              </span>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -1360,11 +1390,41 @@ exports[`DualListSelector with search inputs 1`] = `
         <div
           class="pf-c-dual-list-selector__tools-filter"
         >
-          <input
-            aria-label="Chosen search input"
-            class="pf-c-form-control pf-m-search"
-            type="search"
-          />
+          <div
+            class="pf-c-text-input-group"
+          >
+            <div
+              class="pf-c-text-input-group__main pf-m-icon"
+            >
+              <span
+                class="pf-c-text-input-group__text"
+              >
+                <span
+                  class="pf-c-text-input-group__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                    />
+                  </svg>
+                </span>
+                <input
+                  aria-label="Chosen search input"
+                  class="pf-c-text-input-group__text-input"
+                  type="search"
+                  value=""
+                />
+              </span>
+            </div>
+          </div>
         </div>
       </div>
       <div

package/src/components/SearchInput/SearchInput.tsx

@@ -70,6 +70,19 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   hasWordsAttrLabel?: React.ReactNode;
   /** A suggestion for autocompleting. */
   hint?: string;
+  /** Type of the input */
+  type?:
+    | 'text'
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'time'
+    | 'url';
   /** @hide A reference object to attach to the input box. */
   innerRef?: React.RefObject<any>;
   /** A flag for controlling the open state of a custom advanced search implementation. */
@@ -147,6 +160,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   isDisabled = false,
   appendTo,
   removeFindDomNode = false,
+  type = 'text',
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -263,6 +277,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         aria-label={ariaLabel}
         onKeyDown={onEnter}
         onChange={onChangeHandler}
+        type={type}
       />
       {renderUtilities && (
         <TextInputGroupUtilities>

package/src/components/TreeView/TreeView.tsx

@@ -168,7 +168,14 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
       {parentItem ? (
         treeViewList
       ) : (
-        <TreeViewRoot hasChecks={hasChecks} hasGuides={hasGuides} variant={variant} className={className} {...props}>
+        <TreeViewRoot
+          hasSelectableNodes={hasSelectableNodes}
+          hasChecks={hasChecks}
+          hasGuides={hasGuides}
+          variant={variant}
+          className={className}
+          {...props}
+        >
           {treeViewList}
         </TreeViewRoot>
       )}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -155,8 +155,10 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     const content = (
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
-        {hasCheck ? (
-          <span className={css(styles.treeViewNodeText)}>{name}</span>
+        {isSelectable ? (
+          <button tabIndex={-1} className={css(styles.treeViewNodeText)}>
+            {name}
+          </button>
         ) : (
           <span className={css(styles.treeViewNodeText)}>{name}</span>
         )}
@@ -210,7 +212,6 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
                   }
                 }
               }}
-              tabIndex={isSelectable ? 0 : -1}
               {...(hasCheck && { htmlFor: randomId })}
               {...((hasCheck || (isSelectable && children)) && { id: `label-${randomId}` })}
             >

package/src/components/TreeView/TreeViewRoot.tsx

@@ -3,18 +3,21 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import { canUseDOM } from '../../helpers/util';
 import { handleArrows } from '../../helpers';
+import { KeyTypes } from '../../helpers/constants';
 
 export interface TreeViewRootProps {
-  /** Child nodes of the tree view. */
+  /** Child nodes of the tree view */
   children: React.ReactNode;
-  /** Class to add to add if not passed a parentItem property. */
-  className?: string;
   /** Flag indicating if the tree view has checkboxes. */
   hasChecks?: boolean;
   /** Flag indicating if tree view has guide lines. */
   hasGuides?: boolean;
   /** Variant presentation styles for the tree view. */
   variant?: 'default' | 'compact' | 'compactNoBackground';
+  /** Class to add to add if not passed a parentItem */
+  className?: string;
+  /** Flag indicating that tree nodes should be independently selectable, even when having children */
+  hasSelectableNodes?: boolean;
 }
 
 export class TreeViewRoot extends React.Component<TreeViewRootProps> {
@@ -23,16 +26,29 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
   componentDidMount() {
     if (canUseDOM) {
-      window.addEventListener('keydown', this.props.hasChecks ? this.handleKeysCheckbox : this.handleKeys);
+      window.addEventListener(
+        'keydown',
+        this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
+      );
     }
-    if (this.props.hasChecks) {
-      const firstToggle = this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement;
+    if (this.props.hasChecks || this.props.hasSelectableNodes) {
+      const firstToggle = this.treeRef.current.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement;
       if (firstToggle) {
         firstToggle.tabIndex = 0;
       }
-      const firstInput = this.treeRef.current?.getElementsByTagName('INPUT')[0] as HTMLElement;
-      if (firstInput) {
-        firstInput.tabIndex = 0;
+      if (this.props.hasChecks) {
+        const firstInput = this.treeRef.current.getElementsByTagName('INPUT')[0] as HTMLElement;
+        if (firstInput) {
+          firstInput.tabIndex = 0;
+        }
+      }
+      if (this.props.hasSelectableNodes) {
+        const firstTextButton = this.treeRef.current.getElementsByClassName(
+          'pf-c-tree-view__node-text'
+        )[0] as HTMLElement;
+        if (firstTextButton) {
+          firstTextButton.tabIndex = 0;
+        }
       }
     } else {
       (this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node')[0] as HTMLElement).tabIndex = 0;
@@ -41,12 +57,15 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
   componentWillUnmount() {
     if (canUseDOM) {
-      window.removeEventListener('keydown', this.props.hasChecks ? this.handleKeysCheckbox : this.handleKeys);
+      window.removeEventListener(
+        'keydown',
+        this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
+      );
     }
   }
 
   handleKeys = (event: KeyboardEvent) => {
-    if (this.treeRef.current !== (event.target as HTMLElement).closest('.pf-c-tree-view')) {
+    if (!this.treeRef.current.contains(event.target as HTMLElement)) {
       return;
     }
     const activeElement = document.activeElement;
@@ -55,8 +74,8 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
       el => !el.classList.contains('pf-m-disabled')
     );
 
-    if (key === 'Space') {
-      (document.activeElement as HTMLElement).click();
+    if (key === KeyTypes.Space) {
+      (activeElement as HTMLElement).click();
       event.preventDefault();
     }
 
@@ -109,14 +128,15 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
   };
 
   handleKeysCheckbox = (event: KeyboardEvent) => {
-    if (this.treeRef.current !== (event.target as HTMLElement).closest('.pf-c-tree-view')) {
+    if (!this.treeRef.current.contains(event.target as HTMLElement)) {
       return;
     }
+
     const activeElement = document.activeElement;
     const key = event.key;
 
-    if (key === 'Space') {
-      (document.activeElement as HTMLElement).click();
+    if (key === KeyTypes.Space) {
+      (activeElement as HTMLElement).click();
       event.preventDefault();
     }
 
@@ -126,7 +146,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
       event,
       treeNodes as HTMLElement[],
       (element: Element) => element.contains(activeElement),
-      (element: Element) => element.querySelector('BUTTON,INPUT'),
+      (element: Element) => element.querySelector('button,input'),
       [],
       undefined,
       true,
@@ -168,7 +188,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, hasChecks, hasGuides, variant, className, ...props } = this.props;
+    const { children, hasChecks, hasGuides, variant, className, hasSelectableNodes, ...props } = this.props;
     return (
       <div
         className={css(