@openedx/paragon 22.13.0 → 22.14.0

package/src/Collapsible/Collapsible.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
 
@@ -75,17 +75,23 @@ describe('<Collapsible />', () => {
         <Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,
       );
     });
-    it('opens on .open()', () => {
+    it('opens on .open()', async () => {
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
       ref.current.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
     });
 
-    it('closes on .close()', () => {
+    it('closes on .close()', async () => {
       ref.current.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
       ref.current.close();
-      expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
+      });
     });
 
     it('correct behavior with unmountOnExit', () => {
@@ -127,7 +133,9 @@ describe('<Collapsible />', () => {
 
     it('closes on trigger click', async () => {
       collapsible.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
       await userEvent.click(screen.getAllByRole('button')[0]); // Close
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });

package/src/ColorPicker/ColorPicker.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import ColorPicker from '.';
 
@@ -29,33 +29,26 @@ describe('picker works as expected', () => {
   const color = 'wassap';
   const setColor = jest.fn();
   it('validates hex color', async () => {
+    const user = userEvent.setup();
     render(<ColorPicker color={color} setColor={setColor} />);
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button'));
-    });
+    await user.click(screen.getByRole('button'));
     expect(screen.queryByTestId('hex-input').value).toEqual('#wassap');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), '32116c');
-    });
+    await user.clear(screen.getByTestId('hex-input')); // clear() will keep focus on the element, so we can paste
+    await user.paste('32116c');
     expect(screen.queryByTestId('hex-input').value).toEqual('#32116c');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), 'yuk');
-    });
+    await user.clear(screen.getByTestId('hex-input'));
+    await user.paste('yuk');
 
     expect(screen.queryByTestId('hex-input').value).toEqual('#yuk');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), '#fad');
-    });
+    await user.clear(screen.getByTestId('hex-input'));
+    await user.paste('#fad');
 
     expect(screen.queryByTestId('hex-input').value).toEqual('#fad');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();

package/src/ColorPicker/index.jsx

@@ -8,7 +8,7 @@ import Form from '../Form';
 import ModalPopup from '../Modal/ModalPopup';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
-import useToggle from '../hooks/useToggle';
+import useToggle from '../hooks/useToggleHook';
 
 function ColorPicker({
   color, setColor, className, size,

package/src/ColorPicker/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 
 .pgn__color-picker {
@@ -55,7 +56,7 @@
   }
 
   .pgn__hex-field {
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (min-width: map.get($grid-breakpoints, "sm")) {
       margin-inline-end: 0;
     }
   }

package/src/DataTable/CollapsibleButtonGroup.jsx

@@ -2,8 +2,8 @@ import React, { useContext, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { MoreVert } from '../../icons';
-import useToggle from '../hooks/useToggle';
-import useWindowSize from '../hooks/useWindowSize';
+import useToggle from '../hooks/useToggleHook';
+import useWindowSize from '../hooks/useWindowSizeHook';
 import DataTableContext from './DataTableContext';
 import Icon from '../Icon';
 import IconButton from '../IconButton';

package/src/DataTable/DropdownFilters.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import DataTableContext from './DataTableContext';
 import { DropdownButton } from '../Dropdown';
-import useWindowSize from '../hooks/useWindowSize';
+import useWindowSize from '../hooks/useWindowSizeHook';
 import breakpoints from '../utils/breakpoints';
 
 /** The first filter will be as an input, additional filters will be available in a dropdown.  */

package/src/DataTable/dataviews.mdx

@@ -110,16 +110,11 @@ It displays the data provided by the `DataTableContext` as an html table.
 </DataTable>
 ```
 
-<PropsTable displayName="Table" content='The DataTable.Table component expects to receive a react-table instance from the DataTableContext.' />
-
 ## Table Subcomponents
 
 Subcomponents of `DataTable.Table` can be used independently of the main component. They are designed for use with a `react-table` instance.
 
-<PropsTable displayName="TableRow" />
-<PropsTable displayName="TableCell" />
-<PropsTable displayName="TableHeaderCell" />
-<PropsTable displayName="TableHeaderRow" />
+See the available props of `<TableRow>`, `<TableCell>`, `<TableHeaderCell>`, and `<TableHeaderRow>` below.
 
 ## CardView and alternate table components
 
@@ -337,8 +332,6 @@ a responsive grid of cards.
 The `CardComponent` prop on `CardView` represents a table row, and will receive the row that `react-table`
 provides as props.
 
-<PropsTable displayName="CardView" />
-
 ```jsx
 const MiyazakiCard = ({ className, original  }) => {
   const { title, director, release_date } = original;

package/src/DataTable/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 
 .pgn__data-table-wrapper {
@@ -26,10 +27,10 @@
   display: flex;
 
   .pgn__datatable__visible-actions {
-    margin-inline-start: map_get($spacers, 2);
+    margin-inline-start: map.get($spacers, 2);
 
     .btn {
-      margin-inline-start: map_get($spacers, 2);
+      margin-inline-start: map.get($spacers, 2);
 
       &:first-child {
         margin-inline-start: 0;
@@ -57,7 +58,7 @@
     width: 100%;
     display: flex;
     align-items: center;
-    margin-top: map_get($spacers, 4);
+    margin-top: map.get($spacers, 4);
   }
 
   .pgn__icon-button-toggle__container {
@@ -97,18 +98,18 @@
     border-radius: $border-radius;
     box-shadow: $data-table-box-shadow;
     padding: $data-table-padding-small;
-    margin-right: map_get($spacers, 4);
+    margin-right: map.get($spacers, 4);
     flex: 0 0 $data-table-layout-sidebar-width;
   }
 
   .pgn__data-table-side-filters {
     .pgn__data-table-side-filters-title {
-      margin-bottom: map_get($spacers, 3);
+      margin-bottom: map.get($spacers, 3);
       text-align: start;
     }
 
     .pgn__data-table-side-filters-status {
-      margin-bottom: map_get($spacers, 2);
+      margin-bottom: map.get($spacers, 2);
       display: flex;
       justify-content: flex-end;
     }
@@ -175,7 +176,7 @@
 }
 
 .pgn__data-table-filters-breakout-filter {
-  margin-inline-end: map_get($spacers, 2);
+  margin-inline-end: map.get($spacers, 2);
 }
 
 .pgn__data-table-filters-dropdown-item {
@@ -264,12 +265,12 @@
   padding: 0 $data-table-padding-x;
 
   .pgn__data-table-card-view-default-skeleton-card-section {
-    margin-top: map_get($spacers, 2);
+    margin-top: map.get($spacers, 2);
   }
 }
 
 .pgn__data-table__action-btn {
-  margin-left: map_get($spacers, 2);
+  margin-left: map.get($spacers, 2);
 
   &:first-child {
     margin-left: 0;
@@ -287,7 +288,7 @@
 
 .pgn__datatable__overflow-actions-menu {
   background: #FFFFFF;
-  padding: map_get($spacers, 2);
+  padding: map.get($spacers, 2);
   box-shadow: $level-1-box-shadow;
   border-radius: 4px;
 }
@@ -309,10 +310,10 @@
 
   &.selection-right {
     > :first-child {
-      margin-right: map_get($spacers, 2);
+      margin-right: map.get($spacers, 2);
 
       [dir="rtl"] & {
-        margin-left: map_get($spacers, 2);
+        margin-left: map.get($spacers, 2);
         margin-right: 0;
       }
     }
@@ -326,5 +327,5 @@
 .pgn__data-table__controlled-select {
   display: flex;
   align-content: center;
-  padding: map_get($spacers, 1);
+  padding: map.get($spacers, 1);
 }

package/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx

@@ -42,7 +42,8 @@ describe('<ControlledSelectHeader />', () => {
     jest.resetAllMocks();
   });
 
-  it('correctly selects all page rows', () => {
+  it('correctly selects all page rows', async () => {
+    const user = userEvent.setup();
     const isChecked = true;
     mockToggleAllPageRowsSelectedProps.mockReturnValue({
       checked: isChecked,
@@ -53,13 +54,14 @@ describe('<ControlledSelectHeader />', () => {
     render(<ControlledSelectHeaderWrapper tableProps={tableProps} selectProps={selectProps} />);
 
     const checkbox = screen.getByRole('checkbox');
-    userEvent.click(checkbox);
+    await user.click(checkbox);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(rows, tableProps.itemCount);
   });
 
-  it('correctly unselects all page rows', () => {
+  it('correctly unselects all page rows', async () => {
+    const user = userEvent.setup();
     const spy = jest.spyOn(selectActions, 'clearPageSelectionAction');
     mockToggleAllPageRowsSelectedProps.mockReturnValue({
       checked: false,
@@ -78,7 +80,7 @@ describe('<ControlledSelectHeader />', () => {
     render(<ControlledSelectHeaderWrapper tableProps={newTableProps} selectProps={selectProps} />);
 
     const checkbox = screen.getByRole('checkbox');
-    userEvent.click(checkbox);
+    await user.click(checkbox);
 
     expect(spy).toHaveBeenCalledTimes(1);
     const rowIds = getRowIds(rows).map(id => id.toString());

package/src/DataTable/tests/BulkActions.test.jsx

@@ -10,9 +10,8 @@ import {
 } from '../CollapsibleButtonGroup';
 import { useWindowSize, Button } from '../..';
 import DataTableContext from '../DataTableContext';
-import { waitForComponentToPaint } from './utils';
 
-jest.mock('../../hooks/useWindowSize');
+jest.mock('../../hooks/useWindowSizeHook');
 useWindowSize.mockReturnValue({ width: 800 });
 
 const FIRST_ACTION = 'First Action';
@@ -199,8 +198,7 @@ describe('<BulkActions />', () => {
     });
 
     it('displays the user\'s second button as an outline button', () => {
-      const { container } = render(<BulkActionsWrapper />);
-      waitForComponentToPaint(container);
+      render(<BulkActionsWrapper />);
       const buttons = screen.getAllByTestId('action');
       expect(buttons[0].textContent).toBe(SECOND_ACTION);
     });

package/src/DataTable/tests/DataViewToggle.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 
 import userEvent from '@testing-library/user-event';
 import DataTableContext from '../DataTableContext';
@@ -78,6 +77,7 @@ describe('data view toggle behavior', () => {
   });
 
   test('onDataViewToggle is invoked when clicking on buttons', async () => {
+    const user = userEvent.setup();
     const onDataViewToggle = jest.fn();
     render(
       <DataTableContext.Provider
@@ -95,15 +95,11 @@ describe('data view toggle behavior', () => {
     );
     expect(screen.queryByRole('group')).toBeInTheDocument();
     const cardButton = screen.getByLabelText(DATA_VIEW_TOGGLE_VALUES.card.alt);
-    await act(async () => {
-      userEvent.click(cardButton);
-    });
+    await user.click(cardButton);
     expect(onDataViewToggle).toHaveBeenCalledWith(DATA_VIEW_TOGGLE_VALUES.card.value);
 
     const listButton = screen.getByLabelText(DATA_VIEW_TOGGLE_VALUES.list.alt);
-    await act(async () => {
-      userEvent.click(listButton);
-    });
+    await user.click(listButton);
     expect(onDataViewToggle).toHaveBeenCalledWith(DATA_VIEW_TOGGLE_VALUES.list.value);
   });
 });

package/src/DataTable/tests/DropdownFilters.test.jsx

@@ -6,7 +6,7 @@ import DropdownFilters from '../DropdownFilters';
 import { useWindowSize } from '../..';
 import DataTableContext from '../DataTableContext';
 
-jest.mock('../../hooks/useWindowSize');
+jest.mock('../../hooks/useWindowSizeHook');
 
 const instance = {
   columns: [

package/src/DataTable/tests/TableActions.test.jsx

@@ -12,7 +12,7 @@ import {
 } from '../..';
 import DataTableContext from '../DataTableContext';
 
-jest.mock('../../hooks/useWindowSize');
+jest.mock('../../hooks/useWindowSizeHook');
 useWindowSize.mockReturnValue({ width: 800 });
 
 function FirstAction({

package/src/Dropdown/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Dropdowns
 //
 // Dropdown menu container and contents.
@@ -18,7 +19,7 @@ $dropdown-divider-margin-y:         calc($spacer / 2) !default;
 $dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
 
 $dropdown-link-color:               theme-color("gray", "dark-text") !default;
-$dropdown-link-hover-color:         darken(theme-color("gray", "dark-text"), 5%) !default;
+$dropdown-link-hover-color:         color.adjust(theme-color("gray", "dark-text"), $lightness: -5%) !default;
 $dropdown-link-hover-bg:            $light-300 !default;
 
 $dropdown-link-active-color:        $component-active-color !default;

package/src/Dropdown/deprecated/Dropdown.test.jsx

@@ -62,37 +62,43 @@ describe('<Dropdown />', () => {
     });
 
     it('opens on trigger click', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
       menuOpen(true, wrapper);
     });
 
     it('should focus on the first item after opening', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
       expect(wrapper.getByText('Google')).toHaveFocus();
     });
 
     it('does not close on click inside the menu', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      await userEvent.click(wrapper.getByText('Google')); // Do nothing
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      await user.click(wrapper.getByText('Google')); // Do nothing
       menuOpen(true, wrapper);
     });
 
     it('closes on trigger click', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
       menuOpen(false, wrapper);
     });
 
     it('should focus on the trigger button after closing', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
       expect(wrapper.getByRole('button', { name: 'Search Engines' })).toHaveFocus();
     });
 
     it('closes on document click when open', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
       menuOpen(true, wrapper);
-      document.dispatchEvent(new MouseEvent('click'));
+      await user.click(document.body);
       menuOpen(false, wrapper);
     });
   });
@@ -105,72 +111,82 @@ describe('<Dropdown />', () => {
     });
 
     it('opens on Enter keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       menuOpen(true, wrapper);
     });
 
     it('opens on Space keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{space}');
+      await user.keyboard(' ');
       menuOpen(true, wrapper);
     });
 
     it('should focus on the first item after opening', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       expect(wrapper.getByText('Google')).toHaveFocus();
     });
 
     it('should focus the next item after ArrowDown keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{arrowdown}');
+      await user.keyboard('{Enter}');
+      await user.keyboard('{arrowdown}');
       expect(wrapper.getByText('DuckDuckGo')).toHaveFocus();
     });
 
     it('should focus the next item after Tab keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.tab();
+      await user.keyboard('{Enter}');
+      await user.tab();
       expect(wrapper.getByText('DuckDuckGo')).toHaveFocus();
     });
 
     it('should loop focus to the first item after Tab keyDown on last item', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       wrapper.getByRole('link', { name: 'Yahoo' }).focus();
-      await userEvent.tab();
+      await user.tab();
       expect(wrapper.getByText('Google')).toHaveFocus();
     });
 
     it('should loop focus to the last item after ArrowUp keyDown on first item', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       wrapper.getByRole('link', { name: 'Google' }).focus();
-      await userEvent.keyboard('{arrowup}');
+      await user.keyboard('{arrowup}');
       expect(wrapper.getByText('Yahoo')).toHaveFocus();
     });
 
     it('should focus the previous item after Shift + Tab keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       wrapper.getByRole('link', { name: 'Yahoo' }).focus();
-      await userEvent.keyboard('{Shift>}{Tab}');
+      await user.keyboard('{Shift>}{Tab}');
       expect(wrapper.getByText('DuckDuckGo')).toHaveFocus();
     });
 
     it('should close the menu on Escape keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{escape}');
+      await user.keyboard('{Enter}');
+      await user.keyboard('{escape}');
       menuOpen(false, wrapper);
     });
 
     it('should focus on the trigger button after closing', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{escape}');
+      await user.keyboard('{Enter}');
+      await user.keyboard('{escape}');
       expect(wrapper.getByRole('button', { name: 'Search Engines' })).toHaveFocus();
     });
   });

package/src/Dropzone/README.md

@@ -15,9 +15,9 @@ The `Dropzone` allows users to upload files via drag and drop, or by clicking th
 
 You will also need to provide upload logic yourself via `onProcessUpload` prop which accepts function that should take care of uploading the file to the backend (i.e. send HTTP request). 
 This function accepts an object with following content as its only argument:
-- {object} fileData - Metadata about the uploaded file.
-- {object} requestConfig - Config to pass to `axios` call (this is required to display progress bar and hande cancel action).
-- {function} handleError - Function to communicate to `Dropzone` that file upload resulted in failure, expects `Error` object as its only argument.
+- \{object\} fileData - Metadata about the uploaded file.
+- \{object\} requestConfig - Config to pass to `axios` call (this is required to display progress bar and hande cancel action).
+- \{function\} handleError - Function to communicate to `Dropzone` that file upload resulted in failure, expects `Error` object as its only argument.
 
 Each example below implements such a function.
 

package/src/Dropzone/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 
 .pgn__dropzone {
@@ -41,7 +42,7 @@
 
 .pgn__dropzone-generic-alert {
   width: 100%;
-  margin-bottom: map_get($spacers, 4);
+  margin-bottom: map.get($spacers, 4);
 
   .pgn__alert-message-wrapper .alert-message-content {
     > span {
@@ -56,7 +57,7 @@
   background: $light-300;
   border-radius: 50%;
   position: relative;
-  margin-bottom: map-get($spacers, 4);
+  margin-bottom: map.get($spacers, 4);
 }
 
 .pgn__dropzone__upload-icon {

package/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap

@@ -21,7 +21,16 @@ exports[`<Dropzone /> successfully renders 1`] = `
     onClick={[Function]}
     style={
       {
-        "display": "none",
+        "border": 0,
+        "clip": "rect(0, 0, 0, 0)",
+        "clipPath": "inset(50%)",
+        "height": "1px",
+        "margin": "0 -1px -1px 0",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
       }
     }
     tabIndex={-1}

package/src/Form/FormAutosuggest.jsx

@@ -12,7 +12,7 @@ import FormControl from './FormControl';
 import FormControlFeedback from './FormControlFeedback';
 import IconButton from '../IconButton';
 import Spinner from '../Spinner';
-import useArrowKeyNavigation from '../hooks/useArrowKeyNavigation';
+import useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook';
 import messages from './messages';
 
 const FormAutosuggest = forwardRef(

package/src/Form/FormGroupContext.tsx

@@ -60,7 +60,7 @@ function FormGroupContextProvider({
   const [labelledByIds, registerLabelerId] = useIdList(controlId);
   const [isControlGroup, useSetIsControlGroupEffect] = useStateEffect(false);
 
-  const getControlProps = useCallback((controlProps) => {
+  const getControlProps = useCallback((controlProps: Record<string, any>) => {
     // labelledByIds from the list above should only be added to a control
     // if it the control is a group. We prefer adding a condition here because:
     //    - Hooks cannot be called inside conditionals