@openedx/paragon 23.2.0 → 23.3.0

package/src/Pagination/Pagination.test.jsx

@@ -3,7 +3,6 @@ import { Context as ResponsiveContext } from 'react-responsive';
 import renderer from 'react-test-renderer';
 import {
   render,
-  act,
   screen,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -66,48 +65,53 @@ describe('<Pagination />', () => {
   });
 
   describe('handles controlled and uncontrolled behaviour properly', () => {
-    it('does not internally change page on page click if currentPage is provided', () => {
+    it('does not internally change page on page click if currentPage is provided', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
 
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
 
-      userEvent.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
+      await user.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
     });
 
-    it('controls page selection internally if currentPage is not provided', () => {
+    it('controls page selection internally if currentPage is not provided', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} currentPage={undefined} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
 
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('2');
 
-      userEvent.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
+      await user.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('3');
 
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('2');
     });
 
-    it('does not chang page if you click "next" button while on last page', () => {
+    it('does not chang page if you click "next" button while on last page', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} currentPage={undefined} initialPage={5} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('5');
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('5');
     });
 
-    it('does not chang page if you click "previous" button while on first page', () => {
+    it('does not chang page if you click "previous" button while on first page', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} currentPage={undefined} initialPage={1} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
     });
   });
 
   describe('handles focus properly', () => {
-    it('should change focus to next button if previous page is first page', () => {
+    it('should change focus to next button if previous page is first page', async () => {
+      const user = userEvent.setup();
       const props = {
         ...baseProps,
         currentPage: 2,
@@ -117,11 +121,12 @@ describe('<Pagination />', () => {
         },
       };
       render(<Pagination {...props} />);
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
       expect(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)).toHaveFocus();
     });
 
-    it('should change focus to previous button if next page is last page', () => {
+    it('should change focus to previous button if next page is last page', async () => {
+      const user = userEvent.setup();
       const props = {
         ...baseProps,
         currentPage: baseProps.pageCount - 1,
@@ -131,7 +136,7 @@ describe('<Pagination />', () => {
         },
       };
       render(<Pagination {...props} />);
-      userEvent.click(screen.getByText(props.buttonLabel.next));
+      await user.click(screen.getByText(props.buttonLabel.next));
       expect(screen.getByText(props.buttonLabel.previous)).toHaveFocus();
     });
   });
@@ -191,7 +196,8 @@ describe('<Pagination />', () => {
     });
 
     describe('should fire callbacks properly', () => {
-      it('should not fire onPageSelect when selecting current page', () => {
+      it('should not fire onPageSelect when selecting current page', async () => {
+        const user = userEvent.setup();
         const spy = jest.fn();
         const props = {
           ...baseProps,
@@ -203,11 +209,12 @@ describe('<Pagination />', () => {
           </ResponsiveContext.Provider>
         ));
 
-        userEvent.click(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false }));
+        await user.click(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false }));
         expect(spy).toHaveBeenCalledTimes(0);
       });
 
-      it('should fire onPageSelect callback when selecting new page', () => {
+      it('should fire onPageSelect callback when selecting new page', async () => {
+        const user = userEvent.setup();
         const spy = jest.fn();
         const props = {
           ...baseProps,
@@ -219,17 +226,18 @@ describe('<Pagination />', () => {
           </ResponsiveContext.Provider>
         ));
 
-        userEvent.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 2`));
+        await user.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 2`));
         expect(spy).toHaveBeenCalledTimes(1);
 
-        userEvent.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 3`));
+        await user.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 3`));
         expect(spy).toHaveBeenCalledTimes(2);
       });
     });
   });
 
   describe('fires previous and next button click handlers', () => {
-    it('previous button onClick', () => {
+    it('previous button onClick', async () => {
+      const user = userEvent.setup();
       const spy = jest.fn();
       const props = {
         ...baseProps,
@@ -238,11 +246,12 @@ describe('<Pagination />', () => {
       };
       render(<Pagination {...props} />);
       const expectedPrevButtonAriaLabel = `${PAGINATION_BUTTON_LABEL_PREV}, ${PAGINATION_BUTTON_LABEL_PAGE} 2`;
-      userEvent.click(screen.getByRole('button', { name: expectedPrevButtonAriaLabel }));
+      await user.click(screen.getByRole('button', { name: expectedPrevButtonAriaLabel }));
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
-    it('next button onClick', () => {
+    it('next button onClick', async () => {
+      const user = userEvent.setup();
       const spy = jest.fn();
       const props = {
         ...baseProps,
@@ -250,7 +259,7 @@ describe('<Pagination />', () => {
       };
       render(<Pagination {...props} />);
       const expectedNextButtonAriaLabel = `${PAGINATION_BUTTON_LABEL_NEXT}, ${PAGINATION_BUTTON_LABEL_PAGE} 2`;
-      userEvent.click(screen.getByRole('button', { name: expectedNextButtonAriaLabel }));
+      await user.click(screen.getByRole('button', { name: expectedNextButtonAriaLabel }));
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });
@@ -318,13 +327,12 @@ describe('<Pagination />', () => {
     });
 
     it('for the reduced variant shows dropdown button with the page count as label', async () => {
+      const user = userEvent.setup();
       render(<Pagination variant="reduced" {...props} />);
 
       const dropdownLabel = `${baseProps.currentPage} de ${baseProps.pageCount}`;
 
-      await act(async () => {
-        userEvent.click(screen.getByRole('button', { name: dropdownLabel }));
-      });
+      await user.click(screen.getByRole('button', { name: dropdownLabel }));
       expect(screen.queryAllByRole('button', { name: /^\d+$/ }).length).toEqual(baseProps.pageCount);
     });
 

package/src/ProductTour/Checkpoint.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .pgn__checkpoint {
   position: absolute;
   background: var(--pgn-color-product-tour-checkpoint-bg);
@@ -57,11 +59,11 @@
     }
 
     &:not(:first-child) {
-      margin-left: map_get($spacers, 1\.5);
+      margin-left: map.get($spacers, 1\.5);
     }
 
     [dir="rtl"] & {
-      margin-left: map_get($spacers, 1\.5);
+      margin-left: map.get($spacers, 1\.5);
       margin-right: 0;
 
       &:last-child {
@@ -77,19 +79,19 @@
 
   .pgn__checkpoint-body {
     color: var(--pgn-color-product-tour-checkpoint-body);
-    margin-bottom: map_get($spacers, 3\.5);
+    margin-bottom: map.get($spacers, 3\.5);
     text-align: start;
   }
 
   .pgn__checkpoint-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: map_get($spacers, 2\.5);
+    margin-bottom: map.get($spacers, 2\.5);
   }
 
   #pgn__checkpoint-title {
     font-size: var(--pgn-typography-font-size-h3-base);
-    margin-inline-end: map_get($spacers, 2\.5);
+    margin-inline-end: map.get($spacers, 2\.5);
     margin-bottom: 0;
   }
 }

package/src/ProductTour/Checkpoint.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 
 import * as popper from '@popperjs/core';
@@ -100,8 +100,9 @@ describe('Checkpoint', () => {
     });
 
     it('end button onClick calls handleEnd', async () => {
+      const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
       const endButton = screen.getByText('End', { selector: 'button' });
-      await userEvent.click(endButton, undefined, { skipPointerEventsCheck: true });
+      await user.click(endButton);
       expect(handleEnd).toHaveBeenCalledTimes(1);
     });
   });

package/src/ProductTour/ProductTour.test.jsx

@@ -144,6 +144,7 @@ describe('<ProductTour />', () => {
       });
 
       it('onClick of end button disables tour', async () => {
+        const user = userEvent.setup();
         const { rerender } = render(<ProductTourWrapper tours={[tourData]} />);
 
         // Verify a Checkpoint has rendered
@@ -151,29 +152,21 @@ describe('<ProductTour />', () => {
 
         // Advance the Tour to the last Checkpoint
         const advanceButton1 = screen.getByRole('button', { name: 'Next' });
-        await act(async () => {
-          await userEvent.click(advanceButton1);
-        });
+        await user.click(advanceButton1);
 
         const advanceButton2 = screen.getByRole('button', { name: 'Next' });
-        await act(async () => {
-          await userEvent.click(advanceButton2);
-        });
+        await user.click(advanceButton2);
 
         rerender(<ProductTourWrapper tours={[tourData]} />);
 
         const advanceButton3 = screen.getByRole('button', { name: 'Override advance' });
-        await act(async () => {
-          await userEvent.click(advanceButton3);
-        });
+        await user.click(advanceButton3);
 
         rerender(<ProductTourWrapper tours={[tourData]} />);
 
         // Click the end button
         const endButton = screen.getByRole('button', { name: 'End' });
-        await act(async () => {
-          await userEvent.click(endButton);
-        });
+        await user.click(endButton);
 
         // Verify no Checkpoints have rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -188,9 +181,7 @@ describe('<ProductTour />', () => {
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
 
         // Click Escape key
-        await act(async () => {
-          await userEvent.keyboard('{escape}');
-        });
+        await userEvent.keyboard('{Escape}');
 
         // Verify no Checkpoints have been rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -271,31 +262,27 @@ describe('<ProductTour />', () => {
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       });
       it('calls customHandleOnEnd onClick of end button', async () => {
+        const user = userEvent.setup();
         const { rerender } = render(<ProductTourWrapper tours={[overrideTourData]} />);
         const advanceButton = screen.getByRole('button', { name: 'Override advance' });
-        await act(async () => {
-          await userEvent.click(advanceButton);
-        });
+        await user.click(advanceButton);
 
         rerender(<ProductTourWrapper tours={[overrideTourData]} />);
 
         expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
         const endButton = screen.getByRole('button', { name: 'Override end' });
-        await act(async () => {
-          await userEvent.click(endButton);
-        });
+        await user.click(endButton);
         expect(handleEnd).toBeCalledTimes(1);
         expect(customOnEnd).toHaveBeenCalledTimes(1);
         expect(screen.queryByText('Checkpoint 4')).not.toBeInTheDocument();
       });
       it('calls onEscape on escape button key press', async () => {
+        const user = userEvent.setup();
         render(<ProductTourWrapper tours={[overrideTourData]} />);
         expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
         const container = screen.getByRole('dialog');
         container.focus();
-        await act(async () => {
-          await userEvent.keyboard('{escape}');
-        });
+        await user.keyboard('{Escape}');
         expect(handleEscape).toHaveBeenCalledTimes(1);
         expect(screen.queryByText('Checkpoint 3')).not.toBeInTheDocument();
       });

package/src/ProductTour/index.jsx

@@ -46,7 +46,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
 
   useEffect(() => {
     const handleEsc = (event) => {
-      if (event.keyCode === 27) {
+      if (event.key === 'Escape') {
         setIsTourEnabled(false);
         if (onEscape) {
           onEscape();

package/src/Scrollable/Scrollable.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react'; // (or /dom, /vue, ...)
-import useIsVisible from '../hooks/useIsVisible';
+import useIsVisible from '../hooks/useIsVisibleHook';
 
 import Scrollable, { CLASSNAME_SCROLL_BOTTOM, CLASSNAME_SCROLL_TOP } from '.';
 
-jest.mock('../hooks/useIsVisible');
+jest.mock('../hooks/useIsVisibleHook');
 
 function rangeOfNumbers() {
   return Array.from({ length: 50 }, (v, k) => k + 1);

package/src/Scrollable/index.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import useIsVisible from '../hooks/useIsVisible';
+import useIsVisible from '../hooks/useIsVisibleHook';
 
 export const CLASSNAME_SCROLL_TOP = 'pgn__scrollable-body-scroll-top';
 export const CLASSNAME_SCROLL_BOTTOM = 'pgn__scrollable-body-scroll-bottom';

package/src/SearchField/index.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .pgn__searchfield {
   transition: var(--pgn-transition-form-input);
   border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base);
@@ -127,5 +129,5 @@
 .pgn__searchfield__iconbutton-submit,
 .pgn__searchfield__iconbutton-reset {
   flex-shrink: 0;
-  margin-inline-end: map-get($spacers, 1);
+  margin-inline-end: map.get($spacers, 1);
 }

package/src/SelectableBox/tests/SelectableBox.test.jsx

@@ -123,12 +123,13 @@ describe('<SelectableBox />', () => {
       rerender(<SelectableRadio checked />);
       expect(radio.className).toContain('pgn__selectable_box-active');
     });
-    it('ref is passed to onClick function', () => {
+    it('ref is passed to onClick function', async () => {
+      const user = userEvent.setup();
       let inputRef;
       const onClick = (ref) => { inputRef = ref; };
       render(<SelectableRadio onClick={onClick} />);
       const radio = screen.getByRole('button');
-      userEvent.click(radio);
+      await user.click(radio);
       expect(inputRef).not.toBeFalsy();
     });
   });

package/src/Stepper/StepperHeader.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import StepperHeaderStep from './StepperHeaderStep';
 import { StepperContext } from './StepperContext';
-import useWindowSize from '../hooks/useWindowSize';
+import useWindowSize from '../hooks/useWindowSizeHook';
 import breakpoints, { Size } from '../utils/breakpoints';
 
 function StepListSeparator() {

package/src/Stepper/tests/Stepper.test.jsx

@@ -7,7 +7,7 @@ import { stepsReducer } from '../StepperContext';
 
 const mockWindowSize = { width: 1000, height: 1000 };
 
-jest.mock('../../hooks/useWindowSize', () => () => mockWindowSize);
+jest.mock('../../hooks/useWindowSizeHook', () => () => mockWindowSize);
 
 function Example({
   // eslint-disable-next-line react/prop-types

package/src/Tabs/Tabs.test.jsx

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import Tabs, { MORE_TAB_TEXT } from '.';
 import Tab from './Tab';
 
-jest.mock('../hooks/useIndexOfLastVisibleChild', () => ({
+jest.mock('../hooks/useIndexOfLastVisibleChildHook', () => ({
   __esModule: true,
   default: () => 0,
 }));

package/src/Tabs/index.jsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import BaseTabs from 'react-bootstrap/Tabs';
 import Bubble from '../Bubble';
 import Dropdown from '../Dropdown';
-import useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';
+import useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChildHook';
 import Tab from './Tab';
 
 export const MORE_TAB_TEXT = 'More...';

package/src/Truncate/index.jsx

@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { truncateLines } from './utils';
-import useWindowSize from '../hooks/useWindowSize';
+import useWindowSize from '../hooks/useWindowSizeHook';
 
 const DEFAULT_TRUNCATE_LINES = 1;
 const DEFAULT_TRUNCATE_ELLIPSIS = '...';

package/src/hooks/tests/useToggle.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { useToggle } from '../..';
-import { ToggleHandlers } from '../useToggle';
+import { ToggleHandlers } from '../useToggleHook';
 
 const TOGGLE_IS_ON = 'on';
 const TOGGLE_IS_OFF = 'off';

package/src/hooks/{useArrowKeyNavigation.tsx → useArrowKeyNavigationHook.tsx}

@@ -1,3 +1,7 @@
+// Note: this file was renamed from 'useArrowKeyNavigation.tsx' to 'useArrowKeyNavigationHook.tsx' to fix
+// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx
+// files confused. Renaming this file allows us to keep the URLs of the docs site
+// unchanged.
 import { useRef, useEffect } from 'react';
 
 interface HandleEnterArgs {

package/src/hooks/{useIndexOfLastVisibleChild.tsx → useIndexOfLastVisibleChildHook.tsx}

@@ -1,3 +1,7 @@
+// Note: this file was renamed from 'useIndexOfLastVisibleChild.tsx' to 'useIndexOfLastVisibleChildHook.tsx' to fix
+// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx
+// files confused. Renaming this file allows us to keep the URLs of the docs site
+// unchanged.
 import { useLayoutEffect, useState } from 'react';
 
 /**

package/src/hooks/{useToggle.tsx → useToggleHook.tsx}

@@ -1,3 +1,7 @@
+// Note: this file was renamed from 'useToggle.tsx' to 'useToggleHook.tsx' to fix
+// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx
+// files confused. Renaming this file allows us to keep the URLs of the docs site
+// unchanged.
 import { useState, useCallback } from 'react';
 
 export type Toggler = [

package/src/index.d.ts

@@ -18,11 +18,11 @@ export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
-export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSize';
-export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggle';
-export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigation';
-export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
-export { default as useIsVisible } from './hooks/useIsVisible';
+export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSizeHook';
+export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook';
+export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigationHook';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
+export { default as useIsVisible } from './hooks/useIsVisibleHook';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types

package/src/index.js

@@ -18,11 +18,11 @@ export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
-export { default as useWindowSize } from './hooks/useWindowSize';
-export { default as useToggle } from './hooks/useToggle';
-export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigation';
-export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
-export { default as useIsVisible } from './hooks/useIsVisible';
+export { default as useWindowSize } from './hooks/useWindowSizeHook';
+export { default as useToggle } from './hooks/useToggleHook';
+export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigationHook';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
+export { default as useIsVisible } from './hooks/useIsVisibleHook';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types

package/styles/scss/core/_exports.module.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
@@ -13,10 +14,10 @@ $grid-breakpoints: (
 ) !default;
 
 :export {
-  xs: map-get($grid-breakpoints, "xs");
-  sm: map-get($grid-breakpoints, "sm");
-  md: map-get($grid-breakpoints, "md");
-  lg: map-get($grid-breakpoints, "lg");
-  xl: map-get($grid-breakpoints, "xl");
-  xxl: map-get($grid-breakpoints, "xxl");
+  xs: map.get($grid-breakpoints, "xs");
+  sm: map.get($grid-breakpoints, "sm");
+  md: map.get($grid-breakpoints, "md");
+  lg: map.get($grid-breakpoints, "lg");
+  xl: map.get($grid-breakpoints, "xl");
+  xxl: map.get($grid-breakpoints, "xxl");
 }

package/styles/scss/core/_functions.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:meta";
 @import "./bootstrap-override/functions";
 
 //
@@ -15,20 +17,20 @@
   $base-color: #808080 !default;
   $color-level: 500 !default;
 
-  @if map-has-key($theme-colors, $color-name) {
-    $base-color: map-get($theme-colors, $color-name);
+  @if map.has-key($theme-colors, $color-name) {
+    $base-color: map.get($theme-colors, $color-name);
   }
 
-  @if type-of($variant) == "number" {
+  @if meta.type-of($variant) == "number" {
     $color-level: $variant;
   }
 
-  @else if map-has-key($element-color-levels, $variant) {
-    $color-level: map-get($element-color-levels, $variant);
+  @else if map.has-key($element-color-levels, $variant) {
+    $color-level: map.get($element-color-levels, $variant);
   }
 
-  @if map-has-key($theme-color-levels, "#{$color-name}-#{$color-level}") {
-    @return map-get($theme-color-levels, "#{$color-name}-#{$color-level}");
+  @if map.has-key($theme-color-levels, "#{$color-name}-#{$color-level}") {
+    @return map.get($theme-color-levels, "#{$color-name}-#{$color-level}");
   }
 
   @return $base-color;

package/styles/scss/core/_typography.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "~bootstrap/scss/type";
 
 @mixin mobile-type {
@@ -52,7 +53,7 @@
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, "sm")) {
+@media (max-width: map.get($grid-breakpoints, "sm")) {
   @include mobile-type;
 }
 

package/styles/scss/core/_utilities.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // explicitly import bootstrap's utility module to exclude some modules which do not work
 // with CSS variables, they are instead overriden by Paragon
 @import "~bootstrap/scss/utilities/align";
@@ -91,7 +92,7 @@ $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900;
 
 // Define classes for z-index
 $indexes: () !default;
-$indexes: map-merge(
+$indexes: map.merge(
   (
     0: 0,
     1: 200,