@patternfly/react-core 5.4.0-prerelease.3 → 5.4.0-prerelease.31

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -29,10 +29,11 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
   const [filterValue, setFilterValue] = React.useState<string>('');
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItem, setActiveItem] = React.useState<string | null>(null);
-  const [onCreation, setOnCreation] = React.useState<boolean>(false); // Boolean to refresh filter state after new option is created
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
   const textInputRef = React.useRef<HTMLInputElement>();
 
+  const CREATE_NEW = 'create';
+
   React.useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
@@ -42,9 +43,9 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
         String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase())
       );
 
-      // When no options are found after filtering, display creation option
-      if (!newSelectOptions.length) {
-        newSelectOptions = [{ isDisabled: false, children: `Create new option "${filterValue}"`, value: 'create' }];
+      // If no option matches the filter exactly, display creation option
+      if (!initialSelectOptions.some((option) => option.value === filterValue)) {
+        newSelectOptions = [...newSelectOptions, { children: `Create new option "${filterValue}"`, value: CREATE_NEW }];
       }
 
       // Open the menu when the input value changes and the new value is not empty
@@ -54,96 +55,133 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
     }
 
     setSelectOptions(newSelectOptions);
-    setActiveItem(null);
+  }, [filterValue]);
+
+  const createItemId = (value: any) => `select-typeahead-${value.replace(' ', '-')}`;
+
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value));
+  };
+
+  const resetActiveAndFocusedItem = () => {
     setFocusedItemIndex(null);
-  }, [filterValue, onCreation]);
+    setActiveItemId(null);
+  };
 
-  const onToggleClick = () => {
-    setIsOpen(!isOpen);
+  const closeMenu = () => {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!inputValue) {
+      closeMenu();
+    }
+  };
+
+  const selectOption = (value: string | number, content: string | number) => {
     // eslint-disable-next-line no-console
+    console.log('selected', content);
+
+    setInputValue(String(content));
+    setFilterValue('');
+    setSelected(String(value));
+
+    closeMenu();
+  };
 
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     if (value) {
-      if (value === 'create') {
-        if (!initialSelectOptions.some((item) => item.value === filterValue)) {
+      if (value === CREATE_NEW) {
+        if (!initialSelectOptions.some((item) => item.children === filterValue)) {
           initialSelectOptions = [...initialSelectOptions, { value: filterValue, children: filterValue }];
         }
         setSelected(filterValue);
-        setOnCreation(!onCreation);
         setFilterValue('');
+        closeMenu();
       } else {
-        // eslint-disable-next-line no-console
-        console.log('selected', value);
-        setInputValue(value as string);
-        setFilterValue('');
-        setSelected(value as string);
+        const optionText = selectOptions.find((option) => option.value === value)?.children;
+        selectOption(value, optionText as string);
       }
     }
-
-    setIsOpen(false);
-    setFocusedItemIndex(null);
-    setActiveItem(null);
   };
 
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
     setFilterValue(value);
+
+    resetActiveAndFocusedItem();
+
+    if (value !== selected) {
+      setSelected('');
+    }
   };
 
   const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus;
+    let indexToFocus = 0;
+
+    if (!isOpen) {
+      setIsOpen(true);
+    }
 
-    if (isOpen) {
-      if (key === 'ArrowUp') {
-        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
-        if (focusedItemIndex === null || focusedItemIndex === 0) {
+    if (selectOptions.every((option) => option.isDisabled)) {
+      return;
+    }
+
+    if (key === 'ArrowUp') {
+      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = selectOptions.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
           indexToFocus = selectOptions.length - 1;
-        } else {
-          indexToFocus = focusedItemIndex - 1;
         }
       }
+    }
+
+    if (key === 'ArrowDown') {
+      // When no index is set or at the last index, focus to the first, otherwise increment focus index
+      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
 
-      if (key === 'ArrowDown') {
-        // When no index is set or at the last index, focus to the first, otherwise increment focus index
-        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === selectOptions.length) {
           indexToFocus = 0;
-        } else {
-          indexToFocus = focusedItemIndex + 1;
         }
       }
-
-      setFocusedItemIndex(indexToFocus);
-      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-create-typeahead-${focusedItem.value.replace(' ', '-')}`);
     }
+
+    setActiveAndFocusedItem(indexToFocus);
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
-    const [firstMenuItem] = enabledMenuItems;
-    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
-      // Select the first available option
       case 'Enter':
-        if (isOpen) {
+        if (isOpen && focusedItem && !focusedItem.isAriaDisabled) {
           onSelect(undefined, focusedItem.value as string);
-          setIsOpen((prevIsOpen) => !prevIsOpen);
-          setFocusedItemIndex(null);
-          setActiveItem(null);
         }
 
-        setIsOpen((prevIsOpen) => !prevIsOpen);
-        setFocusedItemIndex(null);
-        setActiveItem(null);
+        if (!isOpen) {
+          setIsOpen(true);
+        }
 
-        break;
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
         break;
       case 'ArrowUp':
       case 'ArrowDown':
@@ -153,6 +191,19 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
     }
   };
 
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+    textInputRef?.current?.focus();
+  };
+
+  const onClearButtonClick = () => {
+    setSelected('');
+    setInputValue('');
+    setFilterValue('');
+    resetActiveAndFocusedItem();
+    textInputRef?.current?.focus();
+  };
+
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
@@ -165,34 +216,23 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}
-          onClick={onToggleClick}
+          onClick={onInputClick}
           onChange={onTextInputChange}
           onKeyDown={onInputKeyDown}
           id="create-typeahead-select-input"
           autoComplete="off"
           innerRef={textInputRef}
           placeholder="Select a state"
-          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
           role="combobox"
           isExpanded={isOpen}
           aria-controls="select-create-typeahead-listbox"
         />
 
-        <TextInputGroupUtilities>
-          {!!inputValue && (
-            <Button
-              variant="plain"
-              onClick={() => {
-                setSelected('');
-                setInputValue('');
-                setFilterValue('');
-                textInputRef?.current?.focus();
-              }}
-              aria-label="Clear input value"
-            >
-              <TimesIcon aria-hidden />
-            </Button>
-          )}
+        <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
+            <TimesIcon aria-hidden />
+          </Button>
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>
@@ -204,10 +244,11 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
       isOpen={isOpen}
       selected={selected}
       onSelect={onSelect}
-      onOpenChange={() => {
-        setIsOpen(false);
+      onOpenChange={(isOpen) => {
+        !isOpen && closeMenu();
       }}
       toggle={toggle}
+      shouldFocusFirstItemOnOpen={false}
     >
       <SelectList id="select-create-typeahead-listbox">
         {selectOptions.map((option, index) => (
@@ -215,8 +256,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
             key={option.value || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
-            onClick={() => setSelected(option.value)}
-            id={`select-typeahead-${option.value.replace(' ', '-')}`}
+            id={createItemId(option.value)}
             {...option}
             ref={null}
           />

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

@@ -14,13 +14,13 @@ const items = [
 ];
 
 const anchors = [
-  <SimpleListItem key="i1" component="a">
+  <SimpleListItem key="i1" component="a" href="#foo">
     Item 1
   </SimpleListItem>,
-  <SimpleListItem key="i2" component="a">
+  <SimpleListItem key="i2" component="a" href="#bar">
     Item 2
   </SimpleListItem>,
-  <SimpleListItem key="i3" component="a">
+  <SimpleListItem key="i3" component="a" href="#baz">
     Item 3
   </SimpleListItem>
 ];

package/src/components/Tabs/Tabs.tsx

@@ -384,6 +384,27 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     this.direction = getLanguageDirection(this.tabList.current);
   }
 
+  static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) {
+    if (prevState.uncontrolledActiveKey === undefined) {
+      return null;
+    }
+
+    const childrenHasTabWithActiveEventKey = React.Children.toArray(nextProps.children)
+      .filter((child): child is TabElement => React.isValidElement(child))
+      .some(({ props }) => props.eventKey === prevState.uncontrolledActiveKey);
+
+    // if uncontrolledActiveKey is an existing eventKey of any Tab of nextProps.children --> don't update uncontrolledActiveKey
+    if (childrenHasTabWithActiveEventKey) {
+      return null;
+    }
+
+    // otherwise update state derived from nextProps.defaultActiveKey
+    return {
+      uncontrolledActiveKey: nextProps.defaultActiveKey,
+      shownKeys: nextProps.defaultActiveKey !== undefined ? [nextProps.defaultActiveKey] : [nextProps.activeKey] // only for mountOnEnter case
+    };
+  }
+
   render() {
     const {
       className,

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

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { TextInput, TextInputBase } from '../TextInput';
 import { ValidatedOptions } from '../../../helpers/constants';
-import * as ReactCoreUtils from '@patternfly/react-core/src/helpers/util';
+import * as ReactCoreUtils from '../../../helpers/util';
 
 const props = {
   onChange: jest.fn(),

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -13,22 +13,47 @@ import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square
 
 ## Examples
 
-### Default with multiple selectable
-```ts file="./ToggleGroupDefaultMultiple.tsx"
-```
+### Single select toggle group
+
+A single select toggle group allows users to toggle between multiple items.
+
+To indicate whether a `<ToggleGroupItem>` is selected or not, use the `isSelected` property.
 
-### Default with single selectable
 ```ts file="./ToggleGroupDefaultSingle.tsx"
 ```
 
-### Icons
+### Multi select toggle group
+
+A multi select toggle group allows users to select multiple items at once.
+
+When a toggle item is disabled it cannot be selected. Click the "Disable all" button in the following example to see this in action.
+
+```ts file="./ToggleGroupDefaultMultiple.tsx"
+```
+
+### With icons
+
+You can use a recognizable icon as a toggle item label.
+
+To do this, pass an imported icon to the `icon` property of a `<ToggleGroupItem>`.
+
 ```ts file="./ToggleGroupIcon.tsx"
 ```
 
-### Text and icons
+### With text and icons
+
+Adding text to a toggle item with an icon helps clarify the button's function.
+
+To do this, pass a descriptive label to the `text` property of a `<ToggleGroupItem>`.
+
 ```ts file="./ToggleGroupTextIcon.tsx"
 ```
 
-### Compact variant
+### Compact toggle group
+
+When space in a UI is limited, you can use a compact toggle group. 
+
+To apply compact styling to a `<ToggleGroup>`, use `isCompact`.
+
 ```ts file="./ToggleGroupCompact.tsx"
-```
+```

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

@@ -55,6 +55,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 +76,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 +91,18 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
+  // When the number of steps changes and pushes activeStepIndex out of bounds, reset back to startIndex
+  React.useEffect(() => {
+    if (activeStepIndex > initialSteps.length) {
+      setActiveStepIndex(startIndex);
+    }
+  }, [initialSteps, activeStepIndex, 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 +112,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 +122,7 @@ export const Wizard = ({
 
     setActiveStepIndex(newStep?.index);
     onStepChange?.(event, newStep, steps[activeStepIndex - 1], WizardStepChangeScope.Back);
+    shouldFocusContent && focusMainContentElement();
   };
 
   const goToStepByIndex = (
@@ -157,6 +177,8 @@ export const Wizard = ({
       goToStepById={goToStepById}
       goToStepByName={goToStepByName}
       goToStepByIndex={goToStepByIndex}
+      shouldFocusContent={shouldFocusContent}
+      mainWrapperRef={wrapperRef}
     >
       <div
         className={css(styles.wizard, className)}

package/src/components/Wizard/WizardBody.tsx

@@ -10,9 +10,11 @@ import { getResizeObserver } from '../../helpers/resizeObserver';
  * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
  */
 
-export interface WizardBodyProps {
+export interface WizardBodyProps extends React.HTMLProps<HTMLElement> {
   /** Anything that can be rendered in the Wizard body */
   children: React.ReactNode;
+  /** Additional classes spread to the wizard body */
+  className?: string;
   /** Flag to remove the default body padding */
   hasNoPadding?: boolean;
   /** Adds an accessible name to the wrapper element when the content overflows and renders
@@ -29,22 +31,23 @@ export interface WizardBodyProps {
 
 export const WizardBody = ({
   children,
+  className,
   hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  component = 'div'
+  component = 'div',
+  ...props
 }: 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 +59,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,10 +74,12 @@ 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)}
+      className={css(styles.wizardMain, className)}
+      {...props}
     >
       <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
     </WrapperComponent>