@patternfly/react-core 6.3.0-prerelease.2 → 6.3.0-prerelease.20

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.3.0-prerelease.1","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.3.0-prerelease.19","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.3.0-prerelease.1","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.3.0-prerelease.19","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.3.0-prerelease.1","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.3.0-prerelease.19","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.2",
+  "version": "6.3.0-prerelease.20",
   "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,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.3.0-prerelease.1",
-    "@patternfly/react-styles": "^6.3.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.1",
+    "@patternfly/react-icons": "^6.3.0-prerelease.5",
+    "@patternfly/react-styles": "^6.3.0-prerelease.5",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.5",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.6",
+    "@patternfly/patternfly": "6.3.0-prerelease.26",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "b9a84887122c428ff6d9d6dd8246a5f2b34e18a7"
+  "gitHead": "9e7c8ba6afb5ad01cbac427089f8f9032e523628"
 }

package/src/components/Button/Button.tsx

@@ -4,6 +4,8 @@ import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
 import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
+import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
+import OutlinedStarIcon from '@patternfly/react-icons/dist/esm/icons/outlined-star-icon';
 
 export enum ButtonVariant {
   primary = 'primary',
@@ -71,6 +73,10 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   inoperableEvents?: string[];
   /** Adds inline styling to a link button */
   isInline?: boolean;
+  /** Adds favorite styling to a button */
+  isFavorite?: boolean;
+  /** Flag indicating whether the button is favorited or not, only when isFavorite is true. */
+  isFavorited?: boolean;
   /** Adds styling which affects the size of the button */
   size?: 'default' | 'sm' | 'lg';
   /** Sets button type */
@@ -117,6 +123,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   size = ButtonSize.default,
   inoperableEvents = ['onClick', 'onKeyPress'],
   isInline = false,
+  isFavorite = false,
+  isFavorited = false,
   type = ButtonType.button,
   variant = ButtonVariant.primary,
   state = ButtonState.unread,
@@ -132,11 +140,19 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   countOptions,
   ...props
 }: ButtonProps) => {
+  if (isFavorite && !ariaLabel && !props['aria-labelledby']) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Button: Each favorite button must have a unique accessible name provided via aria-label or aria-labelledby'
+    );
+  }
+
   const ouiaProps = useOUIAProps(Button.displayName, ouiaId, ouiaSafe, variant);
   const Component = component as any;
   const isButtonElement = Component === 'button';
   const isInlineSpan = isInline && Component === 'span';
   const isIconAlignedAtEnd = iconPosition === 'end' || iconPosition === 'right';
+  const shouldOverrideIcon = isFavorite;
 
   const preventedEvents = inoperableEvents.reduce(
     (handlers, eventToPrevent) => ({
@@ -158,11 +174,36 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     }
   };
 
-  const _icon = icon && (
-    <span className={css(styles.buttonIcon, children && styles.modifiers[isIconAlignedAtEnd ? 'end' : 'start'])}>
-      {icon}
-    </span>
-  );
+  const renderIcon = () => {
+    let iconContent;
+
+    if (isFavorite) {
+      iconContent = (
+        <>
+          <span className={css('pf-v6-c-button__icon-favorite')}>
+            <OutlinedStarIcon />
+          </span>
+          <span className={css('pf-v6-c-button__icon-favorited')}>
+            <StarIcon />
+          </span>
+        </>
+      );
+    }
+
+    if (icon && !shouldOverrideIcon) {
+      iconContent = icon;
+    }
+
+    return (
+      iconContent && (
+        <span className={css(styles.buttonIcon, children && styles.modifiers[isIconAlignedAtEnd ? 'end' : 'start'])}>
+          {iconContent}
+        </span>
+      )
+    );
+  };
+
+  const _icon = renderIcon();
   const _children = children && <span className={css('pf-v6-c-button__text')}>{children}</span>;
   // We only want to render the aria-disabled attribute when true, similar to the disabled attribute natively.
   const shouldRenderAriaDisabled = isAriaDisabled || (!isButtonElement && isDisabled);
@@ -181,6 +222,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isAriaDisabled && styles.modifiers.ariaDisabled,
         isClicked && styles.modifiers.clicked,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
+        isFavorite && styles.modifiers.favorite,
+        isFavorite && isFavorited && styles.modifiers.favorited,
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,

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

@@ -248,3 +248,28 @@ test(`Renders basic button`, () => {
   const { asFragment } = render(<Button aria-label="basic button">Basic Button</Button>);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test(`Renders with class ${styles.modifiers.favorite} when isFavorite is true`, () => {
+  render(<Button isFavorite />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.favorite);
+});
+
+test(`Renders with class ${styles.modifiers.favorited} when isFavorite is true and isFavorited is true`, () => {
+  render(<Button isFavorite isFavorited />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.favorited);
+});
+
+test(`Does not render with class ${styles.modifiers.favorite} when isFavorite is false`, () => {
+  render(<Button />);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.favorite);
+});
+
+test(`Does not render with class ${styles.modifiers.favorited} when isFavorite is true and isFavorited is false`, () => {
+  render(<Button isFavorite />);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.favorited);
+});
+
+test('Overrides icon prop when isFavorite is true', () => {
+  render(<Button isFavorite icon={<div>Icon content</div>} />);
+  expect(screen.queryByText('Icon content')).not.toBeInTheDocument();
+});

package/src/components/Button/examples/Button.md

@@ -125,6 +125,13 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 ```ts file="./ButtonStateful.tsx"
 ```
 
+### Favorite
+
+You can pass both the `isFavorite` and `variant="plain"` properties into the `<Button>` to create a favorite button. Passing the `isFavorited` property will determine the current favorited state and update styling accordingly.
+
+```ts file = "./ButtonFavorite.tsx"
+```
+
 ## Using router links
 
 Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our [custom component example](#custom-component) and pass a callback to the `component` property of the `Button`:
@@ -133,4 +140,4 @@ Router links can be used for in-app linking in React environments to prevent pag
 <Button variant="link" component={(props: any) => <Link {...props} to="#" />}>
   Router link
 </Button>
-```
+```

package/src/components/Button/examples/ButtonFavorite.tsx

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { Button } from '@patternfly/react-core';
+
+export const ButtonFavorite: React.FunctionComponent = () => {
+  const [isFavorited, setIsFavorited] = useState(false);
+  const toggleFavorite = () => {
+    setIsFavorited(!isFavorited);
+  };
+  return (
+    <Button
+      variant="plain"
+      aria-label={isFavorited ? 'Favorite example favorited' : 'Favorite example not favorited'}
+      isFavorite
+      isFavorited={isFavorited}
+      onClick={toggleFavorite}
+    />
+  );
+};

package/src/components/Card/examples/Card.md

@@ -131,7 +131,7 @@ You must avoid rendering any other interactive content within the `<Card>` when
 
 ### Single selectable
 
-When a group of single selectable cards are related, you must pass the same `name` property to each card's `selectableActions` property.
+When a group of single selectable cards are related, you must pass the same `name` property to each card's `selectableActions` property. For more guidance on selectable cards with hidden input, see our [cards as tiles examples](#cards-as-tiles).
 
 ```ts file='./CardSingleSelectable.tsx'
 

package/src/components/Card/examples/CardSelectable.tsx

@@ -5,7 +5,8 @@ export const SelectableCard: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = useState(false);
   const [isChecked2, setIsChecked2] = useState(false);
   const [isChecked3, setIsChecked3] = useState(false);
-  const [isSecondary, setIsSecondary] = useState<boolean>(false);
+  const [isSecondary, setIsSecondary] = useState(false);
+  const [displayCheckbox, setDisplayCheckbox] = useState(false);
 
   const id1 = 'selectable-card-input-1';
   const id2 = 'selectable-card-input-2';
@@ -31,6 +32,10 @@ export const SelectableCard: React.FunctionComponent = () => {
     setIsSecondary(checked);
   };
 
+  const toggleHide = (checked: boolean) => {
+    setDisplayCheckbox(checked);
+  };
+
   return (
     <>
       <Checkbox
@@ -40,68 +45,76 @@ export const SelectableCard: React.FunctionComponent = () => {
         id="toggle-variant-selectable"
         name="toggle-variant"
       />
-      <div style={{ marginTop: '15px' }}>
-        <Gallery hasGutter>
-          <Card
-            id="selectable-card-example-1"
-            isSelectable
-            isSelected={isChecked1}
-            variant={isSecondary ? 'secondary' : 'default'}
+      <Checkbox
+        label="Hide checkbox"
+        isChecked={displayCheckbox}
+        onChange={(_event, checked) => toggleHide(checked)}
+        id="selectable-toggle-hide-checkbox"
+        name="toggle-hide"
+      />
+      <Gallery hasGutter style={{ marginTop: '15px' }}>
+        <Card
+          id="selectable-card-example-1"
+          isSelectable
+          isSelected={isChecked1}
+          variant={isSecondary ? 'secondary' : 'default'}
+        >
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id1,
+              selectableActionAriaLabelledby: 'selectable-card-example-1',
+              name: id1,
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayCheckbox
+            }}
           >
-            <CardHeader
-              selectableActions={{
-                selectableActionId: id1,
-                selectableActionAriaLabelledby: 'selectable-card-example-1',
-                name: id1,
-                onChange,
-                hasNoOffset: true
-              }}
-            >
-              <CardTitle>First card</CardTitle>
-            </CardHeader>
-            <CardBody>This card is selectable.</CardBody>
-          </Card>
-          <Card
-            id="selectable-card-example-2"
-            isSelectable
-            isSelected={isChecked2}
-            variant={isSecondary ? 'secondary' : 'default'}
+            <CardTitle>First card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is selectable.</CardBody>
+        </Card>
+        <Card
+          id="selectable-card-example-2"
+          isSelectable
+          isSelected={isChecked2}
+          variant={isSecondary ? 'secondary' : 'default'}
+        >
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id2,
+              selectableActionAriaLabelledby: 'selectable-card-example-2',
+              name: id2,
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayCheckbox
+            }}
           >
-            <CardHeader
-              selectableActions={{
-                selectableActionId: id2,
-                selectableActionAriaLabelledby: 'selectable-card-example-2',
-                name: id2,
-                onChange,
-                hasNoOffset: true
-              }}
-            >
-              <CardTitle>Second card</CardTitle>
-            </CardHeader>
-            <CardBody>This card is selectable.</CardBody>
-          </Card>
-          <Card
-            id="selectable-card-example-3"
-            isSelectable
-            isDisabled
-            isSelected={isChecked3}
-            variant={isSecondary ? 'secondary' : 'default'}
+            <CardTitle>Second card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is selectable.</CardBody>
+        </Card>
+        <Card
+          id="selectable-card-example-3"
+          isSelectable
+          isDisabled
+          isSelected={isChecked3}
+          variant={isSecondary ? 'secondary' : 'default'}
+        >
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id3,
+              selectableActionAriaLabelledby: 'selectable-card-example-3',
+              name: id3,
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayCheckbox
+            }}
           >
-            <CardHeader
-              selectableActions={{
-                selectableActionId: id3,
-                selectableActionAriaLabelledby: 'selectable-card-example-3',
-                name: id3,
-                onChange,
-                hasNoOffset: true
-              }}
-            >
-              <CardTitle>Third card</CardTitle>
-            </CardHeader>
-            <CardBody>This card is selectable but disabled.</CardBody>
-          </Card>
-        </Gallery>
-      </div>
+            <CardTitle>Third card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is selectable but disabled.</CardBody>
+        </Card>
+      </Gallery>
     </>
   );
 };

package/src/components/Card/examples/CardSingleSelectable.tsx

@@ -1,63 +1,80 @@
 import { useState } from 'react';
-import { Card, CardHeader, CardTitle, CardBody, Gallery } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Gallery, Checkbox } from '@patternfly/react-core';
 
 export const SingleSelectableCard: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = useState('');
   const id1 = 'single-selectable-card-input-1';
   const id2 = 'single-selectable-card-input-2';
   const id3 = 'single-selectable-card-input-3';
+  const [displayRadioButton, setDisplayRadioButton] = useState(false);
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
     setIsChecked(event.currentTarget.id);
   };
 
+  const toggleHide = (checked: boolean) => {
+    setDisplayRadioButton(checked);
+  };
+
   return (
-    <Gallery hasGutter>
-      <Card id="single-selectable-card-example-1" isSelectable isSelected={isChecked === id1}>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id1,
-            selectableActionAriaLabelledby: 'single-selectable-card-example-1',
-            name: 'single-selectable-card-example',
-            variant: 'single',
-            onChange,
-            hasNoOffset: true
-          }}
-        >
-          <CardTitle>First card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is single selectable.</CardBody>
-      </Card>
-      <Card id="single-selectable-card-example-2" isSelectable isSelected={isChecked === id2}>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id2,
-            selectableActionAriaLabelledby: 'single-selectable-card-example-2',
-            name: 'single-selectable-card-example',
-            variant: 'single',
-            onChange,
-            hasNoOffset: true
-          }}
-        >
-          <CardTitle>Second card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is single selectable.</CardBody>
-      </Card>
-      <Card id="single-selectable-card-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id3,
-            selectableActionAriaLabelledby: 'single-selectable-card-example-3',
-            name: 'single-selectable-card-example',
-            variant: 'single',
-            onChange,
-            hasNoOffset: true
-          }}
-        >
-          <CardTitle>Third card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is single selectable but disabled.</CardBody>
-      </Card>
-    </Gallery>
+    <>
+      <Checkbox
+        label="Hide radio button"
+        isChecked={displayRadioButton}
+        onChange={(_event, checked) => toggleHide(checked)}
+        id="single-select-toggle-hide-radio-button"
+        name="toggle-hide"
+      />
+      <Gallery hasGutter style={{ marginTop: '15px' }}>
+        <Card id="single-selectable-card-example-1" isSelectable isSelected={isChecked === id1}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id1,
+              selectableActionAriaLabelledby: 'single-selectable-card-example-1',
+              name: 'single-selectable-card-example',
+              variant: 'single',
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayRadioButton
+            }}
+          >
+            <CardTitle>First card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is single selectable.</CardBody>
+        </Card>
+        <Card id="single-selectable-card-example-2" isSelectable isSelected={isChecked === id2}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id2,
+              selectableActionAriaLabelledby: 'single-selectable-card-example-2',
+              name: 'single-selectable-card-example',
+              variant: 'single',
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayRadioButton
+            }}
+          >
+            <CardTitle>Second card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is single selectable.</CardBody>
+        </Card>
+        <Card id="single-selectable-card-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id3,
+              selectableActionAriaLabelledby: 'single-selectable-card-example-3',
+              name: 'single-selectable-card-example',
+              variant: 'single',
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayRadioButton
+            }}
+          >
+            <CardTitle>Third card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is single selectable but disabled.</CardBody>
+        </Card>
+      </Gallery>
+    </>
   );
 };

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -204,7 +204,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
     const shouldTruncate = variant === ClipboardCopyVariant.inlineCompact && truncation;
     const inlineCompactContent = shouldTruncate ? (
       <Truncate
-        refToGetParent={this.clipboardRef}
+        tooltipProps={{ triggerRef: this.clipboardRef }}
         content={copyableText}
         {...(typeof truncation === 'object' && truncation)}
       />
@@ -223,6 +223,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
           className
         )}
         ref={this.clipboardRef}
+        {...(shouldTruncate && { tabIndex: 0 })}
         {...divProps}
         {...getOUIAProps(ClipboardCopy.displayName, ouiaId, ouiaSafe)}
       >

package/src/components/DualListSelector/DualListSelector.tsx

@@ -17,13 +17,19 @@ export interface DualListSelectorProps {
   isTree?: boolean;
   /** Content to be rendered in the dual list selector. */
   children?: React.ReactNode;
+  /** Flag indicating whether a tree dual list selector has animations. This will always render
+   * nested dual list selector items rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 class DualListSelector extends Component<DualListSelectorProps> {
   static displayName = 'DualListSelector';
   static defaultProps: PickOptional<DualListSelectorProps> = {
     children: '',
-    isTree: false
+    isTree: false,
+    hasAnimations: false
   };
 
   constructor(props: DualListSelectorProps) {
@@ -31,13 +37,21 @@ class DualListSelector extends Component<DualListSelectorProps> {
   }
 
   render() {
-    const { className, children, id, isTree, ...props } = this.props;
+    const { className, children, id, isTree, hasAnimations, ...props } = this.props;
 
     return (
-      <DualListSelectorContext.Provider value={{ isTree }}>
+      <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
         <GenerateId>
           {(randomId) => (
-            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+            <div
+              className={css(
+                styles.dualListSelector,
+                hasAnimations && isTree && styles.modifiers.animateExpand,
+                className
+              )}
+              id={id || randomId}
+              {...props}
+            >
               {children}
             </div>
           )}

package/src/components/DualListSelector/DualListSelectorContext.ts

@@ -1,7 +1,8 @@
 import { createContext } from 'react';
 export const DualListSelectorContext = createContext<{
   isTree?: boolean;
-}>({ isTree: false });
+  hasAnimations?: boolean;
+}>({ isTree: false, hasAnimations: false });
 
 export const DualListSelectorListContext = createContext<{
   setFocusedOption?: (id: string) => void;

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -56,14 +56,17 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     }
     event.stopImmediatePropagation();
     const validOptions = isTree
-      ? (Array.from(
-          menuRef.current.querySelectorAll(
-            `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
-          )
-        ) as Element[])
+      ? (
+          Array.from(
+            menuRef.current.querySelectorAll(
+              `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
+            )
+          ) as Element[]
+        ).filter((item) => !item.closest(`.${styles.dualListSelectorList}[inert]`))
       : (Array.from(menuRef.current.getElementsByTagName('LI')) as Element[]).filter(
           (el) => !el.classList.contains('pf-m-disabled')
         );
+
     const activeElement = document.activeElement;
     handleArrows(
       event,

package/src/components/DualListSelector/DualListSelectorTree.tsx

@@ -1,5 +1,7 @@
+import { useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorContext } from './DualListSelectorContext';
 import { DualListSelectorTreeItem } from './DualListSelectorTreeItem';
 
 export interface DualListSelectorTreeItemData {
@@ -68,11 +70,13 @@ export const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeP
   isDisabled = false,
   ...props
 }: DualListSelectorTreeProps) => {
+  const { hasAnimations } = useContext(DualListSelectorContext);
   const dataToRender = typeof data === 'function' ? data() : data;
   const tree = dataToRender.map((item) => (
     <DualListSelectorTreeItem
       key={item.id}
       text={item.text}
+      hasAnimations={hasAnimations}
       id={item.id}
       defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
       onOptionCheck={onOptionCheck}