@patternfly/react-core 6.0.0-alpha.60 → 6.0.0-alpha.62

package/src/components/TreeView/TreeViewListItem.tsx

@@ -143,6 +143,8 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       </span>
     </ToggleComponent>
   );
+
+  const isCheckboxChecked = checkProps.checked === null ? false : checkProps.checked;
   const renderCheck = (randomId: string) => (
     <span className={css(styles.treeViewNodeCheck)}>
       <input
@@ -151,7 +153,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         onClick={(evt) => evt.stopPropagation()}
         ref={(elem) => elem && (elem.indeterminate = checkProps.checked === null)}
         {...checkProps}
-        checked={checkProps.checked === null ? false : checkProps.checked}
+        checked={isCheckboxChecked}
         id={randomId}
         tabIndex={-1}
       />
@@ -194,6 +196,13 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       )}
     </>
   );
+
+  const isSelected =
+    (!children || isSelectable) &&
+    activeItems &&
+    activeItems.length > 0 &&
+    activeItems.some((item) => compareItems && item && compareItems(item, itemData));
+
   return (
     <li
       id={id}
@@ -201,20 +210,14 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       aria-expanded={internalIsExpanded}
       role="treeitem"
       tabIndex={-1}
+      {...(hasCheckbox && { 'aria-checked': isCheckboxChecked })}
+      {...(!hasCheckbox && { 'aria-selected': isSelected })}
     >
       <div className={css(styles.treeViewContent)}>
         <GenerateId prefix={isSelectable ? 'selectable-id' : 'checkbox-id'}>
           {(randomId) => (
             <Component
-              className={css(
-                styles.treeViewNode,
-                (!children || isSelectable) &&
-                  activeItems &&
-                  activeItems.length > 0 &&
-                  activeItems.some((item) => compareItems && item && compareItems(item, itemData))
-                  ? styles.modifiers.current
-                  : ''
-              )}
+              className={css(styles.treeViewNode, isSelected && styles.modifiers.current)}
               onClick={(evt: React.MouseEvent) => {
                 if (!hasCheckbox) {
                   onSelect && onSelect(evt, itemData, parentItem);

package/src/components/TreeView/__tests__/__snapshots__/TreeViewList.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Matches snapshot by default 1`] = `
 <DocumentFragment>
   <ul
+    aria-multiselectable="false"
     class="pf-v6-c-tree-view__list"
     role="tree"
   >
@@ -20,6 +21,7 @@ exports[`Matches snapshot when toolbar is passed 1`] = `
     class="pf-v6-c-divider"
   />
   <ul
+    aria-multiselectable="false"
     class="pf-v6-c-tree-view__list"
     role="tree"
   >

package/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Matches snapshot with children 1`] = `
 <DocumentFragment>
   <li
     aria-expanded="false"
+    aria-selected="false"
     class="pf-v6-c-tree-view__list-item"
     role="treeitem"
     tabindex="-1"
@@ -56,6 +57,7 @@ exports[`Matches snapshot without children 1`] = `
 <DocumentFragment>
   <li
     aria-expanded="false"
+    aria-selected="false"
     class="pf-v6-c-tree-view__list-item"
     role="treeitem"
     tabindex="-1"

package/src/components/TreeView/examples/TreeView.md

@@ -9,9 +9,17 @@ import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon
 
 ## Examples
 
-### Default
+### Single selectable
 
-```ts file='./TreeViewDefault.tsx'
+```ts file='./TreeViewSingleSelectable.tsx'
+
+```
+
+### Multiselectable
+
+A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, the `isMultiSelectable` property must be passed.
+
+```ts file='./TreeViewMultiselectable.tsx'
 
 ```
 
@@ -25,6 +33,8 @@ The `hasSelectableNodes` modifier will separate the expansion and selection beha
 
 ### With search
 
+A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.
+
 ```ts file='./TreeViewWithSearch.tsx'
 
 ```

package/src/components/TreeView/examples/TreeViewCompact.tsx

@@ -55,5 +55,5 @@ export const TreeViewCompact: React.FunctionComponent = () => {
       ]
     }
   ];
-  return <TreeView data={options} variant="compact" />;
+  return <TreeView aria-label="Tree View compact example" data={options} variant="compact" />;
 };

package/src/components/TreeView/examples/TreeViewCompactNoBackground.tsx

@@ -55,5 +55,5 @@ export const TreeViewCompactNoBackground: React.FunctionComponent = () => {
       ]
     }
   ];
-  return <TreeView data={options} variant="compactNoBackground" />;
+  return <TreeView aria-label="Tree View compact no background example" data={options} variant="compactNoBackground" />;
 };

package/src/components/TreeView/examples/TreeViewGuides.tsx

@@ -61,5 +61,5 @@ export const GuidesTreeView: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'example8-App5' }]
     }
   ];
-  return <TreeView data={options} hasGuides={true} />;
+  return <TreeView aria-label="Tree View guides example" data={options} hasGuides={true} />;
 };

package/src/components/TreeView/examples/TreeViewMultiselectable.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewMultiselectable: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>([]);
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems((prevActiveItems) => [...prevActiveItems, treeViewItem]);
+    }
+  };
+
+  const options = [
+    {
+      name: 'Application launcher',
+      id: 'multiselectExample-AppLaunch',
+      children: [
+        {
+          name: 'Application 1',
+          id: 'multiselectExample-App1',
+          children: [
+            { name: 'Settings', id: 'multiselectExample-App1Settings' },
+            { name: 'Current', id: 'multiselectExample-App1Current' }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'multiselectExample-App2',
+          children: [
+            { name: 'Settings', id: 'multiselectExample-App2Settings' },
+            {
+              name: 'Loader',
+              id: 'multiselectExample-App2Loader',
+              children: [
+                { name: 'Loading App 1', id: 'multiselectExample-LoadApp1' },
+                { name: 'Loading App 2', id: 'multiselectExample-LoadApp2' },
+                { name: 'Loading App 3', id: 'multiselectExample-LoadApp3' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'multiselectExample-Cost',
+      children: [
+        {
+          name: 'Application 3',
+          id: 'multiselectExample-App3',
+          children: [
+            { name: 'Settings', id: 'multiselectExample-App3Settings' },
+            { name: 'Current', id: 'multiselectExample-App3Current' }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'multiselectExample-Sources',
+      children: [
+        {
+          name: 'Application 4',
+          id: 'multiselectExample-App4',
+          children: [{ name: 'Settings', id: 'multiselectExample-App4Settings' }]
+        }
+      ]
+    },
+    {
+      name: 'Really really really long folder name that overflows the container it is in',
+      id: 'multiselectExample-Long',
+      children: [{ name: 'Application 5', id: 'multiselectExample-App5' }]
+    }
+  ];
+  return (
+    <TreeView
+      aria-label="Tree View multiselectable example"
+      isMultiSelectable
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
+};

package/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx

@@ -71,5 +71,13 @@ export const TreeViewSelectableNodes: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'SelNodesTreeView-App5' }]
     }
   ];
-  return <TreeView hasSelectableNodes data={options} activeItems={activeItems} onSelect={onSelect} />;
+  return (
+    <TreeView
+      aria-label="Tree View separate selection and expansion example"
+      hasSelectableNodes
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
 };

package/src/components/TreeView/examples/{TreeViewDefault.tsx → TreeViewSingleSelectable.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
 
-export const TreeViewDefault: React.FunctionComponent = () => {
+export const TreeViewSingleSelectable: React.FunctionComponent = () => {
   const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
   const [allExpanded, setAllExpanded] = React.useState<boolean>();
 
@@ -81,7 +81,13 @@ export const TreeViewDefault: React.FunctionComponent = () => {
         {allExpanded && 'Collapse all'}
         {!allExpanded && 'Expand all'}
       </Button>
-      <TreeView data={options} activeItems={activeItems} onSelect={onSelect} allExpanded={allExpanded} />
+      <TreeView
+        aria-label="Tree View single selectable example"
+        data={options}
+        activeItems={activeItems}
+        onSelect={onSelect}
+        allExpanded={allExpanded}
+      />
     </React.Fragment>
   );
 };

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -136,5 +136,12 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'example7-App5' }]
     }
   ];
-  return <TreeView data={options} activeItems={activeItems} onSelect={onSelect} />;
+  return (
+    <TreeView
+      aria-label="Tree View with actions example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
 };

package/src/components/TreeView/examples/TreeViewWithBadges.tsx

@@ -75,5 +75,13 @@ export const TreeViewBadges: React.FunctionComponent = () => {
     }
   ];
 
-  return <TreeView data={options} activeItems={activeItems} onSelect={onSelect} hasBadges />;
+  return (
+    <TreeView
+      aria-label="Tree View with badges example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+      hasBadges
+    />
+  );
 };

package/src/components/TreeView/examples/TreeViewWithCheckboxes.tsx

@@ -194,5 +194,5 @@ export const TreeViewWithCheckboxes: React.FunctionComponent = () => {
     }
   };
   const mapped = options.map((item) => mapTree(item));
-  return <TreeView data={mapped} onCheck={onCheck} hasCheckboxes />;
+  return <TreeView aria-label="Tree View with checkboxes example" data={mapped} onCheck={onCheck} hasCheckboxes />;
 };

package/src/components/TreeView/examples/TreeViewWithCustomBadges.tsx

@@ -82,5 +82,13 @@ export const TreeViewCustomBadges: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'example6-App5' }]
     }
   ];
-  return <TreeView data={options} activeItems={activeItems} onSelect={onSelect} hasBadges />;
+  return (
+    <TreeView
+      aria-label="Tree View with custom badges example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+      hasBadges
+    />
+  );
 };

package/src/components/TreeView/examples/TreeViewWithIcons.tsx

@@ -73,6 +73,7 @@ export const TreeViewWithIcons: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      aria-label="Tree View with icons example"
       data={options}
       activeItems={activeItems}
       onSelect={onSelect}

package/src/components/TreeView/examples/TreeViewWithMemoization.tsx

@@ -50,7 +50,14 @@ export const TreeViewWithMemoization: React.FunctionComponent = () => {
     options.push({ name: 'Option ' + i, id: i.toString(), children: childOptions });
   }
   const tree = (
-    <TreeView data={options} activeItems={activeItems} onSelect={onSelect} allExpanded={allExpanded} useMemo />
+    <TreeView
+      aria-label="Tree View with memoization example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+      allExpanded={allExpanded}
+      useMemo
+    />
   );
 
   return (

package/src/components/TreeView/examples/TreeViewWithSearch.tsx

@@ -118,6 +118,7 @@ export const TreeViewWithSearch: React.FunctionComponent = () => {
 
   return (
     <TreeView
+      aria-label="Tree View with search example"
       data={filteredItems}
       activeItems={activeItems}
       onSelect={onSelect}

package/src/components/Truncate/Truncate.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '../Tooltip';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum TruncatePosition {
   start = 'start',
@@ -52,11 +53,65 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   trailingNumChars = 7,
   content,
   ...props
-}: TruncateProps) => (
-  <Tooltip position={tooltipPosition} content={content}>
-    <span className={css(styles.truncate, className)} {...props}>
+}: TruncateProps) => {
+  const [isTruncated, setIsTruncated] = React.useState(true);
+  const [parentElement, setParentElement] = React.useState<HTMLElement>(null);
+  const [textElement, setTextElement] = React.useState<HTMLElement>(null);
+
+  const textRef = React.useRef<HTMLElement>(null);
+  const subParentRef = React.useRef<HTMLDivElement>(null);
+  const observer = React.useRef(null);
+
+  const getActualWidth = (element: Element) => {
+    const computedStyle = getComputedStyle(element);
+
+    return (
+      parseFloat(computedStyle.width) -
+      parseFloat(computedStyle.paddingLeft) -
+      parseFloat(computedStyle.paddingRight) -
+      parseFloat(computedStyle.borderRight) -
+      parseFloat(computedStyle.borderLeft)
+    );
+  };
+
+  const calculateTotalTextWidth = (element: Element, trailingNumChars: number, content: string) => {
+    const firstTextWidth = element.scrollWidth;
+    const firstTextLength = content.length;
+    return (firstTextWidth / firstTextLength) * trailingNumChars + firstTextWidth;
+  };
+
+  React.useEffect(() => {
+    if (textRef && textRef.current && !textElement) {
+      setTextElement(textRef.current);
+    }
+
+    if (subParentRef && subParentRef.current.parentElement.parentElement && !parentElement) {
+      setParentElement(subParentRef.current.parentElement.parentElement);
+    }
+  }, [textRef, subParentRef]);
+
+  React.useEffect(() => {
+    if (textElement && parentElement && !observer.current) {
+      const totalTextWidth = calculateTotalTextWidth(textElement, trailingNumChars, content);
+      const textWidth = position === 'middle' ? totalTextWidth : textElement.scrollWidth;
+
+      const handleResize = () => {
+        const parentWidth = getActualWidth(parentElement);
+        setIsTruncated(textWidth >= parentWidth);
+      };
+
+      const observer = getResizeObserver(parentElement, handleResize);
+
+      return () => {
+        observer();
+      };
+    }
+  }, [textElement, parentElement]);
+
+  const truncateBody = (
+    <span ref={subParentRef} className={css(styles.truncate, className)} {...props}>
       {(position === TruncatePosition.end || position === TruncatePosition.start) && (
-        <span className={truncateStyles[position]}>
+        <span ref={textRef} className={truncateStyles[position]}>
           {content}
           {position === TruncatePosition.start && <React.Fragment>&lrm;</React.Fragment>}
         </span>
@@ -64,7 +119,9 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
       {position === TruncatePosition.middle &&
         content.slice(0, content.length - trailingNumChars).length > minWidthCharacters && (
           <React.Fragment>
-            <span className={styles.truncateStart}>{sliceContent(content, trailingNumChars)[0]}</span>
+            <span ref={textRef} className={styles.truncateStart}>
+              {sliceContent(content, trailingNumChars)[0]}
+            </span>
             <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
           </React.Fragment>
         )}
@@ -72,6 +129,15 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         content.slice(0, content.length - trailingNumChars).length <= minWidthCharacters &&
         content}
     </span>
-  </Tooltip>
-);
+  );
+
+  return isTruncated ? (
+    <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content}>
+      {truncateBody}
+    </Tooltip>
+  ) : (
+    truncateBody
+  );
+};
+
 Truncate.displayName = 'Truncate';

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

@@ -13,6 +13,12 @@ jest.mock('../../Tooltip', () => ({
   )
 }));
 
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn()
+}));
+
 test(`renders with class ${styles.truncate}`, () => {
   render(<Truncate content={''} aria-label="test-id" />);
 

package/src/components/Wizard/Wizard.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import wizardHeightToken from '@patternfly/react-tokens/dist/esm/c_wizard_Height';
 
 import {
   isWizardParentStep,
@@ -55,6 +56,10 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   onSave?: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
   /** Callback function to close the wizard */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** @beta Flag indicating whether the wizard content should be focused after the onNext or onBack callbacks
+   * are called.
+   */
+  shouldFocusContent?: boolean;
 }
 
 export const Wizard = ({
@@ -72,11 +77,13 @@ export const Wizard = ({
   onStepChange,
   onSave,
   onClose,
+  shouldFocusContent = false,
   ...wrapperProps
 }: WizardProps) => {
   const [activeStepIndex, setActiveStepIndex] = React.useState(startIndex);
   const initialSteps = buildSteps(children);
   const firstStepRef = React.useRef(initialSteps[startIndex - 1]);
+  const wrapperRef = React.useRef(null);
 
   // When the startIndex maps to a parent step, focus on the first sub-step
   React.useEffect(() => {
@@ -85,6 +92,11 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
+  const focusMainContentElement = () =>
+    setTimeout(() => {
+      wrapperRef?.current?.focus && wrapperRef.current.focus();
+    }, 0);
+
   const goToNextStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
     const newStep = steps.find((step) => step.index > activeStepIndex && isStepEnabled(steps, step));
 
@@ -94,6 +106,7 @@ export const Wizard = ({
 
     setActiveStepIndex(newStep?.index);
     onStepChange?.(event, newStep, steps[activeStepIndex - 1], WizardStepChangeScope.Next);
+    shouldFocusContent && focusMainContentElement();
   };
 
   const goToPrevStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
@@ -103,6 +116,7 @@ export const Wizard = ({
 
     setActiveStepIndex(newStep?.index);
     onStepChange?.(event, newStep, steps[activeStepIndex - 1], WizardStepChangeScope.Back);
+    shouldFocusContent && focusMainContentElement();
   };
 
   const goToStepByIndex = (
@@ -157,11 +171,13 @@ export const Wizard = ({
       goToStepById={goToStepById}
       goToStepByName={goToStepByName}
       goToStepByIndex={goToStepByIndex}
+      shouldFocusContent={shouldFocusContent}
+      mainWrapperRef={wrapperRef}
     >
       <div
         className={css(styles.wizard, className)}
         style={{
-          ...(height ? { height } : {}),
+          ...(height ? { [wizardHeightToken.name]: typeof height === 'number' ? `${height}px` : height } : {}),
           ...(width ? { width } : {})
         }}
         {...wrapperProps}

package/src/components/Wizard/WizardBody.tsx

@@ -36,15 +36,14 @@ export const WizardBody = ({
 }: WizardBodyProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
-  const wrapperRef = React.useRef(null);
   const WrapperComponent = component;
-  const { activeStep } = React.useContext(WizardContext);
+  const { activeStep, shouldFocusContent, mainWrapperRef } = React.useContext(WizardContext);
   const defaultAriaLabel = ariaLabel || `${activeStep?.name} content`;
 
   React.useEffect(() => {
     const resize = () => {
-      if (wrapperRef?.current) {
-        const { offsetWidth, offsetHeight, scrollHeight } = wrapperRef.current;
+      if (mainWrapperRef?.current) {
+        const { offsetWidth, offsetHeight, scrollHeight } = mainWrapperRef.current;
 
         if (previousWidth !== offsetWidth) {
           setPreviousWidth(offsetWidth);
@@ -56,12 +55,12 @@ export const WizardBody = ({
     const handleResizeWithDelay = debounce(resize, 250);
     let observer = () => {};
 
-    if (wrapperRef?.current) {
-      observer = getResizeObserver(wrapperRef.current, handleResizeWithDelay);
-      const { offsetHeight, scrollHeight } = wrapperRef.current;
+    if (mainWrapperRef?.current) {
+      observer = getResizeObserver(mainWrapperRef.current, handleResizeWithDelay);
+      const { offsetHeight, scrollHeight } = mainWrapperRef.current;
 
       setHasScrollbar(offsetHeight < scrollHeight);
-      setPreviousWidth((wrapperRef.current as HTMLElement).offsetWidth);
+      setPreviousWidth((mainWrapperRef.current as HTMLElement).offsetWidth);
     }
 
     return () => {
@@ -71,7 +70,8 @@ export const WizardBody = ({
 
   return (
     <WrapperComponent
-      ref={wrapperRef}
+      ref={mainWrapperRef}
+      {...(shouldFocusContent && { tabIndex: -1 })}
       {...(component === 'div' && hasScrollbar && { role: 'region' })}
       {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
       className={css(styles.wizardMain)}

package/src/components/Wizard/WizardContext.tsx

@@ -28,6 +28,12 @@ export interface WizardContextProps {
   getStep: (stepId: number | string) => WizardStepType;
   /** Set step by ID */
   setStep: (step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) => void;
+  /** Flag indicating whether the wizard content should be focused after the onNext or onBack callbacks
+   * are called.
+   */
+  shouldFocusContent: boolean;
+  /** Ref for main wizard content element. */
+  mainWrapperRef: React.RefObject<HTMLElement>;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
@@ -47,6 +53,8 @@ export interface WizardContextProviderProps {
     steps: WizardStepType[],
     index: number
   ): void;
+  shouldFocusContent: boolean;
+  mainWrapperRef: React.RefObject<HTMLElement>;
 }
 
 export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
@@ -59,7 +67,9 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   onClose,
   goToStepById,
   goToStepByName,
-  goToStepByIndex
+  goToStepByIndex,
+  shouldFocusContent,
+  mainWrapperRef
 }) => {
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
@@ -139,7 +149,9 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         goToStepByIndex: React.useCallback(
           (index: number) => goToStepByIndex(null, steps, index),
           [goToStepByIndex, steps]
-        )
+        ),
+        shouldFocusContent,
+        mainWrapperRef
       }}
     >
       {children}