@patternfly/react-core 5.2.0-prerelease.16 → 5.2.0-prerelease.18

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":"5.2.0-prerelease.15","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":"5.2.0-prerelease.17","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":"5.2.0-prerelease.15","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":"5.2.0-prerelease.17","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":"5.2.0-prerelease.15","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":"5.2.0-prerelease.17","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.16",
+  "version": "5.2.0-prerelease.18",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "bbd82ab078a6512692d8f6253a80cf87242f775a"
+  "gitHead": "044826a3f3ee454f616c35c0cfd5652d6baa9614"
 }

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

@@ -6,91 +6,245 @@ import userEvent from '@testing-library/user-event';
 import { Checkbox } from '../Checkbox';
 import styles from '@patternfly/react-styles/css/components/Check/check';
 
-describe('Checkbox', () => {
-  test('controlled', () => {
-    const { asFragment } = render(<Checkbox isChecked id="check" aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with only the class ${styles.checkInput} on the check by default`, () => {
+  render(<Checkbox id="test-id" />);
 
-  test('controlled - 3rd state', () => {
-    const { asFragment } = render(<Checkbox isChecked={null} id="check" aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('checkbox')).toHaveClass(styles.checkInput, { exact: true });
+});
 
-  test('uncontrolled', () => {
-    const { asFragment } = render(<Checkbox id="check" aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with only the classes ${styles.check} and ${styles.modifiers.standalone} on the check wrapper by default`, () => {
+  render(<Checkbox id="test-id" />);
 
-  test('isDisabled', () => {
-    const { asFragment } = render(<Checkbox id="check" isDisabled aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
+  expect(screen.getByRole('checkbox').parentElement).toHaveClass(`${styles.check} ${styles.modifiers.standalone}`, {
+    exact: true
   });
+});
 
-  test('label is string', () => {
-    const { asFragment } = render(<Checkbox label="Label" id="check" isChecked aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with additional classes passed via className', () => {
+  render(<Checkbox id="test-id" className="test-class" />);
 
-  test('label is function', () => {
-    const functionLabel = () => <h1>Header</h1>;
-    const { asFragment } = render(<Checkbox label={functionLabel()} id="check" isChecked aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('checkbox').parentElement).toHaveClass('test-class');
+});
 
-  test('label is node', () => {
-    const { asFragment } = render(<Checkbox label={<h1>Header</h1>} id="check" isChecked aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with additional classes passed via inputClassName', () => {
+  render(<Checkbox id="test-id" inputClassName="test-class" />);
 
-  test('passing class', () => {
-    const { asFragment } = render(
-      <Checkbox label="label" className="class-123" id="check" isChecked aria-label="check" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('checkbox')).toHaveClass('test-class');
+});
 
-  test('passing HTML attribute', () => {
-    const { asFragment } = render(
-      <Checkbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Does not set the checkbox as invalid by default', () => {
+  render(<Checkbox id="test-id" />);
 
-  test('passing description', () => {
-    render(<Checkbox id="check" label="checkbox" description="Text description..." />);
-    expect(screen.getByText('Text description...')).toBeInTheDocument();
-  });
+  expect(screen.getByRole('checkbox')).toBeValid();
+});
 
-  test('passing body', () => {
-    render(<Checkbox id="check" label="checkbox" body="This is where custom content goes." />);
+test('Sets the checkbox as invalid when isValid is false', () => {
+  render(<Checkbox id="test-id" isValid={false} />);
 
-    expect(screen.getByText('This is where custom content goes.')).toBeInTheDocument();
-  });
+  expect(screen.getByRole('checkbox')).toBeInvalid();
+});
 
-  test('checkbox onChange handler called when component is clicked', async () => {
-    const onChangeHandler = jest.fn();
-    const user = userEvent.setup();
+test('Does not set the checkbox as disabled by default', () => {
+  render(<Checkbox id="test-id" />);
 
-    render(<Checkbox id="check" onChange={onChangeHandler} aria-label="check" isChecked={false} />);
+  expect(screen.getByRole('checkbox')).not.toBeDisabled();
+});
 
-    await user.click(screen.getByLabelText('check'));
-    expect(onChangeHandler).toHaveBeenCalled();
-  });
+test(`Sets the checkbox as disabled when isDisabled is passed`, () => {
+  render(<Checkbox id="test-id" isDisabled />);
 
-  test('should throw console error when no id is given', () => {
-    const myMock = jest.fn();
-    global.console = { ...global.console, error: myMock };
+  expect(screen.getByRole('checkbox')).toBeDisabled();
+});
 
-    render(<Checkbox id={undefined} />);
-    expect(myMock).toHaveBeenCalled();
-  });
+test('Sets the label as disabled when isDisabled and label are passed', () => {
+  render(<Checkbox id="test-id" isDisabled label="test label" />);
 
-  test('renders component wrapper as span', () => {
-    const { container } = render(
-      <Checkbox component="span" label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
-    );
-    const span = container.querySelector('span');
-    expect(span).toHaveClass(styles.check);
-  });
+  expect(screen.getByLabelText('test label')).toBeDisabled();
+});
+
+test('Does not set the checkbox as required by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox')).not.toBeRequired();
+});
+
+test(`Sets the checkbox as required when isRequired is passed`, () => {
+  render(<Checkbox id="test-id" isRequired />);
+
+  expect(screen.getByRole('checkbox')).toBeRequired();
+});
+
+test('Does not set the checkbox as checked by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox')).not.toBeChecked();
+});
+
+test(`Sets the checkbox as checked when isChecked is passed`, () => {
+  render(<Checkbox id="test-id" isChecked />);
+
+  expect(screen.getByRole('checkbox')).toBeChecked();
+});
+
+test(`Sets the checkbox as checked when checked is passed`, () => {
+  render(<Checkbox id="test-id" checked />);
+
+  expect(screen.getByRole('checkbox')).toBeChecked();
+});
+
+test(`Calls onChange when the checkbox is clicked`, async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+  render(<Checkbox id="test-id" onChange={onChange} />);
+
+  await user.click(screen.getByRole('checkbox'));
+
+  expect(onChange).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onChange when the checkbox is not clicked', () => {
+  const onChange = jest.fn();
+  render(<Checkbox id="test-id" onChange={onChange} />);
+
+  expect(onChange).not.toHaveBeenCalled();
+});
+
+test(`Calls onChange with the event and the checked value when the checkbox is clicked`, async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+  render(<Checkbox id="test-id" onChange={onChange} />);
+
+  await user.click(screen.getByRole('checkbox'));
+
+  expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ type: 'change' }), true);
+});
+
+test(`Calls onChange with the event and the checked value when the checkbox is clicked and isChecked is passed`, async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+  render(<Checkbox id="test-id" isChecked onChange={onChange} />);
+
+  await user.click(screen.getByRole('checkbox'));
+
+  expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ type: 'change' }), false);
+});
+
+test('Does not render a label by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.queryByLabelText(/\w+/)).not.toBeInTheDocument();
+});
+
+test('Renders a label when label is passed', () => {
+  render(<Checkbox id="test-id" label="test label" />);
+
+  expect(screen.getByLabelText('test label')).toBeVisible();
+});
+
+test('Associates the label with the checkbox', () => {
+  render(<Checkbox id="test-id" label="test label" />);
+
+  expect(screen.getByRole('checkbox')).toHaveAccessibleName('test label');
+});
+
+test('Does not render an asterisk when a label is passed but isRequired is not', () => {
+  render(<Checkbox id="test-id" label="test label" />);
+
+  expect(screen.queryByText('*')).not.toBeInTheDocument();
+});
+
+test('Renders an asterisk when isRequired and a label are passed', () => {
+  render(<Checkbox id="test-id" isRequired label="test label" />);
+
+  expect(screen.getByText('*')).toBeVisible();
+});
+
+test(`Wraps the required asterisk in the ${styles.checkLabelRequired} className`, () => {
+  render(<Checkbox id="test-id" isRequired label="test label" />);
+
+  expect(screen.getByText('*')).toHaveClass(styles.checkLabelRequired, { exact: true });
+});
+
+test('Renders with the provided id', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox')).toHaveAttribute('id', 'test-id');
+});
+
+test('Does not render an aria-label by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox')).not.toHaveAttribute('aria-label');
+});
+
+test('Sets the name to the passed aria-label', () => {
+  render(<Checkbox id="test-id" aria-label="test aria-label" />);
+
+  expect(screen.getByRole('checkbox')).toHaveAccessibleName('test aria-label');
+});
+
+test('Does not render a description by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.queryByText(/\w+/)).not.toBeInTheDocument();
+});
+
+test('Renders a description when description is passed', () => {
+  render(<Checkbox id="test-id" description="test description" />);
+
+  expect(screen.getByText('test description')).toBeVisible();
+});
+
+test(`Renders the passed description with the ${styles.checkDescription} className`, () => {
+  render(<Checkbox id="test-id" description="test description" />);
+
+  expect(screen.getByText('test description')).toHaveClass(styles.checkDescription, { exact: true });
+});
+
+test('Does not render a body by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.queryByText(/\w+/)).not.toBeInTheDocument();
+});
+
+test('Renders a body when body is passed', () => {
+  render(<Checkbox id="test-id" body="test body" />);
+
+  expect(screen.getByText('test body')).toBeVisible();
+});
+
+test(`Renders the passed body with the ${styles.checkBody} className`, () => {
+  render(<Checkbox id="test-id" body="test body" />);
+
+  expect(screen.getByText('test body')).toHaveClass(styles.checkBody, { exact: true });
+});
+
+test('Renders the check wrapper as a div by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('DIV');
+});
+
+test('Renders with the provided component', () => {
+  render(<Checkbox id="test-id" component="span" />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('SPAN');
+});
+
+test(`Spreads additional props`, () => {
+  render(<Checkbox id="test-id" data-testid="test-id" />);
+
+  expect(screen.getByTestId('test-id')).toBeInTheDocument();
+});
+
+test(`Sets the checkbox as checked by default when defaultChecked is passed`, () => {
+  render(<Checkbox id="test-id" defaultChecked />);
+
+  expect(screen.getByRole('checkbox')).toBeChecked();
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<Checkbox id="test-id" ouiaId="ouia-id" />);
+
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,212 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Checkbox controlled - 3rd state 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-check pf-m-standalone"
   >
     <input
       aria-invalid="false"
-      aria-label="check"
       class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-2"
+      data-ouia-component-id="ouia-id"
       data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Checkbox controlled 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-1"
-      data-ouia-component-type="PF5/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Checkbox isDisabled 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-4"
-      data-ouia-component-type="PF5/Checkbox"
-      data-ouia-safe="true"
-      disabled=""
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Checkbox label is function 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-6"
-      data-ouia-component-type="PF5/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-v5-c-check__label"
-      for="check"
-    >
-      <h1>
-        Header
-      </h1>
-    </label>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Checkbox label is node 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-7"
-      data-ouia-component-type="PF5/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-v5-c-check__label"
-      for="check"
-    >
-      <h1>
-        Header
-      </h1>
-    </label>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Checkbox label is string 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-5"
-      data-ouia-component-type="PF5/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-v5-c-check__label"
-      for="check"
-    >
-      Label
-    </label>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Checkbox passing HTML attribute 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      aria-labelledby="labelId"
-      checked=""
-      class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-9"
-      data-ouia-component-type="PF5/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-v5-c-check__label"
-      for="check"
-    >
-      label
-    </label>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Checkbox passing class 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-check class-123"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-8"
-      data-ouia-component-type="PF5/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-v5-c-check__label"
-      for="check"
-    >
-      label
-    </label>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Checkbox uncontrolled 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-3"
-      data-ouia-component-type="PF5/Checkbox"
-      data-ouia-safe="true"
-      id="check"
+      id="test-id"
       type="checkbox"
     />
   </div>

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant, DrawerContext } from './Drawer';
-import { formatBreakpointMods } from '../../helpers/util';
+import { formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
 import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
@@ -111,7 +111,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     if (isInline && (position === 'end' || position === 'right')) {
       if (isRTL) {
@@ -198,7 +198,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   };
 
   const handleControlMove = (e: MouseEvent | TouchEvent, controlPosition: number) => {
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     e.stopPropagation();
     if (!isResizing) {
@@ -264,7 +264,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const callbackMouseUp = React.useCallback(handleMouseup, []);
 
   const handleKeys = (e: React.KeyboardEvent) => {
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     const key = e.key;
     if (

package/src/components/Dropdown/Dropdown.tsx

@@ -19,6 +19,8 @@ export interface DropdownPopperProps {
   enableFlip?: boolean;
   /** The container to append the popper to. Defaults to 'inline'. */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export interface DropdownToggleProps {

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -143,7 +143,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   componentDidUpdate(prevProps: ExpandableSectionProps) {
     if (
       this.props.variant === ExpandableSectionVariant.truncate &&
-      prevProps.truncateMaxLines !== this.props.truncateMaxLines
+      (prevProps.truncateMaxLines !== this.props.truncateMaxLines || prevProps.children !== this.props.children)
     ) {
       const expandableContent = this.expandableContentRef.current;
       setLineClamp(this.props.truncateMaxLines, expandableContent);

package/src/components/Menu/Menu.tsx

@@ -311,7 +311,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             noHorizontalArrowHandling={
               document.activeElement &&
               (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-                document.activeElement.classList.contains(dropdownStyles.dropdownToggle))
+                document.activeElement.classList.contains(dropdownStyles.dropdownToggle) ||
+                document.activeElement.tagName === 'INPUT')
             }
             noEnterHandling
             noSpaceHandling

package/src/components/Menu/MenuContainer.tsx

@@ -14,6 +14,8 @@ export interface MenuPopperProps {
   maxWidth?: string | 'trigger';
   /** Enable to flip the popper when it reaches the boundary */
   enableFlip?: boolean;
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 export interface MenuContainerProps {
   /** Menu to be rendered */

package/src/components/Nav/NavList.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { isElementInView } from '../../helpers/util';
+import { getLanguageDirection, isElementInView } from '../../helpers/util';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { getResizeObserver } from '../../helpers/resizeObserver';
@@ -112,7 +112,7 @@ class NavList extends React.Component<NavListProps> {
 
   componentDidMount() {
     this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true);
-    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.navList.current);
     this.handleScrollButtons();
   }
 
@@ -121,7 +121,7 @@ class NavList extends React.Component<NavListProps> {
   }
 
   componentDidUpdate() {
-    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.navList.current);
   }
 
   render() {