@pexip/components 20.0.0 → 20.2.0

package/CHANGELOG.md

@@ -1,5 +1,209 @@
 # Changelog
 
+## 20.2.0
+
+### Minor Changes
+
+- bb40023: Add optional `hasDivider` prop to `ActionsRow` component. Defaults to
+  `true` to preserve existing behavior. Set to `false` to hide the divider.
+- 54883ee: Add `IconSupportAgent` and `IconTranslation`.
+- ca742b0: Fix shrinking icon in `ListLink`. Support `fontVariant` in
+  `PlainMenuEntry` in `Menu`.
+- 35a460a: Add `descriptionUrlLinks` prop to `ConfirmationModal` to control
+  whether URLs in the description are rendered as clickable links
+- db2c663: Add `presentationElementClassName` prop to `Modal`.
+- cbe8f20: Export `MultiselectCore` so apps can reuse the shared select trigger
+  with a custom menu.
+- 593d327: Add nested submenu support to `AriaMenu`, including:
+
+  - Item and custom-content submenus
+  - Configurable back navigation
+  - Accessible labelling and keyboard navigation
+  - Focus restoration and scrollable overflow
+  - Optional submenu indicators and trailing icons
+
+  Also expose scrollbar styling on `Panel` and keep portalled tooltips
+  interactive inside React Aria overlays.
+
+- 031693b: Export `buttonVariantsValues`.
+- 81f985c: Add `titleWordBreak` prop to `ConfirmationModal`
+- 27917fb: Add `ToggleSwitchDisplay` presentational component for rendering
+  toggle state without interactive elements. Refactor `ToggleSwitch` to compose
+  `ToggleSwitchDisplay` internally.
+- ee5a093: Hand tooltip positioning over to react-aria's `useOverlayPosition`.
+
+  - `Tooltip`, `CustomTooltip` and `NotificationTooltip` are now positioned,
+    flipped and kept inside the viewport by react-aria instead of hard-coded CSS
+    offsets. This fixes tooltips escaping the viewport, e.g. at 400% browser
+    zoom.
+  - The arrow is placed with react-aria's `arrowProps` and oriented with the
+    resolved `data-placement`, so it stays attached to and pointing at the
+    trigger.
+  - The CSS placement classes on the tooltip content were removed in favour of
+    `data-placement`.
+  - The in-meeting control tooltips now hide with the rest of the UI when it
+    auto-hides, which they no longer inherited once portalled.
+  - **Breaking:** the `usePortal` prop was removed from `NotificationTooltip`;
+    the tooltip is always rendered in a portal.
+
+- e4a320d: Add renderText prop to PreferenceInput to allow replacing the value's
+  Text element
+
+### Patch Changes
+
+- 8ef9f04: `AriaMenu` items accept an `isChecked` prop, which renders the item
+  as a `menuitemcheckbox` and reports its state. Use it for items that toggle
+  something, so the state is announced on the focusable item rather than on a
+  presentational control inside it.
+- b1f3f9e: Improve accessible danger styling for shared menu and select
+  components. AriaMenu now supports a danger state for menu items, and Select
+  updates its danger tokens to use higher-contrast colors.
+- 3e652a1: Update Captions header layout to show speakers on the left with
+  ellipsis truncation and timestamp on the right. Add `timestamp` prop for
+  `Captions` component.
+- 8ef9f04: `CondensedTabs` now exposes its selected state to assistive
+  technology. Tabs carry `aria-selected`, the tablist is a single tab stop with
+  a roving `tabindex`, and arrow/Home/End keys move between tabs.
+- 380b19c: Draggable: added support for [data-drag-handle] and [data-no-drag]
+  regions — pointer-down inside a no-drag region is ignored unless it originates
+  from a drag handle, with matching grab/grabbing cursor styling.
+
+  AriaMenu: menu items now support an optional description rendered below the
+  label; preventFocusOnPress is stripped from the DOM button props.
+
+  Modal: added withAlternativeMaskColor prop and a new
+  alternative-modal-mask-color token.
+
+  Sheet: added withMask, withShadow, innerFullHeight, and custom
+  heightPortrait/heightLandscape (dvh) props with orientation-based media
+  queries.
+
+  Added a new md (36px) avatar/circle size (Avatar, RoundIndicator, sizes,
+  design tokens) and an $alpha-70 token.
+
+  Added and exported a new useBoundingRect hook (observes an element's bounding
+  rect via ResizeObserver, polls ref.current, with optional
+  window-resize/orientation updates); also exported the KEYBOARD_EVENT_KEY
+  constant.
+
+  Scrollbars: removed the redundant children prop from its type.
+
+- 1c01e62: Add `language` icon
+- 8f2380a: Default button type "button" for `ListBoxLink` to prevent it being a
+  submit type.
+- 3dba14c: Fix horizontal scroll on multiselect dropdown
+- 542adab: Fix crash in `AriaMenu` when items are hidden via branding
+  `hiddenFunctionality`. Items whose `data-testid` is overridden to a Fragment
+  are now filtered out before entering the react-aria collection, preventing a
+  null ref focus crash on keyboard navigation.
+- 33cba9e: Fix copyStyles test to use a lightweight DOM mock that avoids
+  triggering happy-dom resource loading.
+- f378928: Stop `aria-label` from overriding visible text in
+  `MultistepIndicator`:
+
+  - Steps no longer carry a 0-based `step N` label that hides the visible step
+    name. A label is only set when the step name is not rendered, and it uses
+    the same 1-based number as the visible step.
+  - The wrapping list is no longer named after the current step; an `aria-label`
+    can be supplied by the consumer instead.
+
+- 571f17c: Fix CSP style-src-elem violation in PopOutWindow when rendering into
+  an about:blank window by inlining stylesheet rules instead of using link
+  elements.
+- d066ed1: Restore borders and selection states in forced colors (high contrast)
+  mode for `Box` (and so `Panel`/`Modal`), `Button`, `Tabs`, `CondensedTabs`,
+  `ToggleSwitch`, `Pill` (and so `Toast`/`NotificationToast`) and `InfoCard`
+- a84b03f: Adds top and bottom margin to `Divider` inside `InnerAriaMenuItem`.
+- 265c898: Migrate test runner from Jest to Vitest.
+- 55018dc: Fix `Modal` becoming non-interactive when opened over a react-aria
+  modal overlay (e.g. the mobile participants panel). The modal portal is now
+  flagged as a react-aria top layer so it is no longer marked `inert`, which
+  previously made its buttons unresponsive and, on touch, caused taps to fall
+  through and close the modal without running the action.
+- 3dba14c: Fix clicking an option label in `Multiselect` and
+  `ConfirmableMultiselect` not toggling the checkbox. The label was passed to
+  `Checkbox` as an inline component, which made React remount it on every render
+  and prevented the browser from firing a `click` event on it.
+
+  `DropContent` now keeps `onContentVisibilityChange` in a ref, so passing an
+  inline callback no longer re-runs the effect on every render.
+
+- 8b420de: allow for containerRef on Input, setting a ref on the container for
+  the input element
+- 5650609: Remove the unused `@types/prettier` dev dependency. It shadowed the
+  optional `@types/prettier` peer of `storybook`, which made Yarn resolve a
+  second virtual instance of `storybook` for this package and duplicated
+  `storybook/theming` in Storybook production builds.
+- e0979b2: Fixed `Draggable` cancelling the first drag. The drag effect tracked
+  the element through `ref.current`, which is `null` on the initial render and
+  only populated on the next render, causing the effect to tear down and re-arm
+  mid-drag. The element is now held in state via a merged callback ref, so the
+  first drag completes reliably.
+- 1d41a9d: - CondensedTabs: updated active tab contrast to meet WCAG non-text
+  contrast requirements
+  - AriaMenu: active/highlighted item now uses accent background with white text
+    for contrast; disabled items are excluded from keyboard focus navigation;
+    focus indicator uses configurable box-shadow mixin with suppress-on-hover to
+    avoid conflicts with hover state
+  - Button: translucent button active state uses accent surface background and
+    white text
+  - Input: focus outline added via the configurable focus mixin; light and dark
+    focused stories added
+  - ToggleSwitch: focus styling migrated to the configurable box-shadow mixin
+    with reduced shadow widths; light/dark checked/unchecked focus stories added
+  - Select: focus styling consolidated into the configurable box-shadow mixin,
+    removing hardcoded box-shadow overrides
+  - Focus mixin (\_focus.scss): refactored to accept `$border-width`,
+    `$shadow-width-inset`, `$shadow-width`, `suppress-on-hover`, and
+    `color-scheme` parameters for per-component customization
+- b3eedbb: Migrate stories to Storybook 10: import `action` from
+  `storybook/actions`, testing helpers from `storybook/test` and doc blocks from
+  `@storybook/addon-docs/blocks`, replace the per-story `backgrounds` parameter
+  with the `backgrounds` global, and drop the removed
+  `@storybook/addon-actions`, `@storybook/blocks` and `@storybook/test` dev
+  dependencies.
+- 8f82582: Change colors of the `MultiStepIndicator` steps to be white
+- 62e149e: Checkbox now correctly applies visible focus styling by importing
+  Checkbox token definitions into the module stylesheet.
+
+  Added a dedicated test id on the Checkbox checkmark container span to make
+  focus-state assertions more stable in end-to-end tests.
+
+  New Checkbox Storybook stories for focus verification in both light and dark
+
+- Updated dependencies [5a17991]
+- Updated dependencies [380b19c]
+- Updated dependencies [265c898]
+  - @pexip/utils@17.4.1
+  - @pexip/hooks@21.0.9
+  - @pexip/signal@16.9.6
+
+## 20.1.0
+
+### Minor Changes
+
+- d7432f8: Add `variant` prop to `CondensedTabs` with `underline` style support.
+  Add `isFullWidth` and `noMargin` props to `Sheet`.
+- 300946c: Adds `className` optional prop to `withTransition`
+- c064e2d: - Add `withTopDivider` / `withBottomDivider` props to `AriaMenuItem`
+  for rendering dividers around menu items
+  - Move Menu section divider inside `<List>` for consistent padding with menu
+    items
+  - Add `role="separator"` to dividers for accessibility
+  - Update divider color tokens (`neutral-30` / `neutral-80`), preserve old
+    values in `variables.legacy.scss`
+  - Add `WithDividers` story for AriaMenu
+- fe02b23: Adds 'right' and 'left' position to `NotificationTooltip`
+
+### Patch Changes
+
+- 15954c9: Lint
+- 6732861: Fix issue with the css overrides.
+- Updated dependencies [44ad859]
+- Updated dependencies [514c523]
+  - @pexip/utils@17.4.0
+  - @pexip/hooks@21.0.8
+
 ## 20.0.0
 
 ### Major Changes

package/api-docs/README.mdx

@@ -73,12 +73,15 @@ import '@pexip/components/dist/index.css';
 | [TextProps](type-aliases/TextProps.mdx) | - |
 | [TextLinkProps](type-aliases/TextLinkProps.mdx) | - |
 | [NotificationTooltipPosition](type-aliases/NotificationTooltipPosition.mdx) | - |
+| [NotificationTooltipProps](type-aliases/NotificationTooltipProps.mdx) | - |
 | [OverlayOpacity](type-aliases/OverlayOpacity.mdx) | - |
 | [FullSizeWindowColorBackgroundProps](type-aliases/FullSizeWindowColorBackgroundProps.mdx) | - |
 | [FullSizeWindowImageBackgroundProps](type-aliases/FullSizeWindowImageBackgroundProps.mdx) | - |
 | [StatusItem](type-aliases/StatusItem.mdx) | - |
 | [ActivityCardAction](type-aliases/ActivityCardAction.mdx) | - |
 | [AriaMenuProps](type-aliases/AriaMenuProps.mdx) | - |
+| [AriaSubMenuContentHelpers](type-aliases/AriaSubMenuContentHelpers.mdx) | Helpers passed to a submenu's `content` render function, allowing the content to close the whole menu or navigate back to the previous level. |
+| [AriaSubMenu](type-aliases/AriaSubMenu.mdx) | A submenu that opens in place inside an [AriaMenu](variables/AriaMenu.mdx) when its parent item is clicked. A submenu can either render a nested list of [AriaMenuItem](type-aliases/AriaMenuItem.mdx) (which can themselves open further submenus) or arbitrary React content. When a submenu is open, a back button is rendered at the top of the menu to return to the previous level. |
 | [AriaMenuItem](type-aliases/AriaMenuItem.mdx) | The structure of a menu item that can be used to create a dropdown menu. |
 | [BreadcrumbItem](type-aliases/BreadcrumbItem.mdx) | - |
 | [DropContentPosition](type-aliases/DropContentPosition.mdx) | - |
@@ -88,6 +91,7 @@ import '@pexip/components/dist/index.css';
 | [MenuAction](type-aliases/MenuAction.mdx) | - |
 | [MenuContent](type-aliases/MenuContent.mdx) | - |
 | [ModalProps](type-aliases/ModalProps.mdx) | - |
+| [MultiselectCoreProps](type-aliases/MultiselectCoreProps.mdx) | - |
 | [MultistepIndicatorProps](type-aliases/MultistepIndicatorProps.mdx) | - |
 | [NotificationToastMessage](type-aliases/NotificationToastMessage.mdx) | - |
 | [NotificationToastSignal](type-aliases/NotificationToastSignal.mdx) | - |
@@ -151,7 +155,7 @@ import '@pexip/components/dist/index.css';
 | [CoreHeader](variables/CoreHeader.mdx) | - |
 | [Divider](variables/Divider.mdx) | - |
 | [DragAndDrop](variables/DragAndDrop.mdx) | - |
-| [Draggable](variables/Draggable.mdx) | - |
+| [Draggable](variables/Draggable.mdx) | A wrapper that makes its children draggable via pointer (and, when `isMoveableWithArrowKeys` is set, the keyboard). |
 | [FileUpload](variables/FileUpload.mdx) | - |
 | [Heading](variables/Heading.mdx) | - |
 | [Icon](variables/Icon.mdx) | - |
@@ -181,6 +185,7 @@ import '@pexip/components/dist/index.css';
 | [TextHeading](variables/TextHeading.mdx) | - |
 | [TextLink](variables/TextLink.mdx) | - |
 | [ToggleSwitch](variables/ToggleSwitch.mdx) | - |
+| [ToggleSwitchDisplay](variables/ToggleSwitchDisplay.mdx) | Presentational version of ToggleSwitch that renders only the visual toggle indicator and label text — it does not render an `<input>` or manage any interaction/state itself. |
 | [CustomTooltip](variables/CustomTooltip.mdx) | - |
 | [NotificationTooltip](variables/NotificationTooltip.mdx) | - |
 | [Tooltip](variables/Tooltip.mdx) | Tooltips need to be accessible to keyboard and screen reader users, so we ensure that they are only placed on focusable and hoverable elements. For example, plain text and disabled buttons aren't focusable, meaning keyboard and screen reader users would be unable to access the information in that tooltip. |
@@ -201,7 +206,7 @@ import '@pexip/components/dist/index.css';
 | [Accordion](variables/Accordion.mdx) | - |
 | [ActivityCard](variables/ActivityCard.mdx) | - |
 | [ariaMenuOpenStateSignal](variables/ariaMenuOpenStateSignal.mdx) | - |
-| [AriaMenu](variables/AriaMenu.mdx) | AriaMenu component represents a dropdown menu. |
+| [AriaMenu](variables/AriaMenu.mdx) | AriaMenu component represents a dropdown menu. Menu items can open submenus in place, rendering either a nested list of items or arbitrary React content, with a back button to return to the previous level. |
 | [AspectRatio](variables/AspectRatio.mdx) | A wrapper that makes its children element bound to an aspect ratio. Default ration is 16:9, `{width: 16, height: 9}` |
 | [ColorPickerPreviewButton](variables/ColorPickerPreviewButton.mdx) | - |
 | [ImagePreviewButton](variables/ImagePreviewButton.mdx) | - |
@@ -235,6 +240,7 @@ import '@pexip/components/dist/index.css';
 | [HotKey](variables/HotKey.mdx) | - |
 | [ConfirmableMultiselect](variables/ConfirmableMultiselect.mdx) | - |
 | [Multiselect](variables/Multiselect.mdx) | - |
+| [MultiselectCore](variables/MultiselectCore.mdx) | - |
 | [MultistepIndicator](variables/MultistepIndicator.mdx) | - |
 | [NotificationToast](variables/NotificationToast.mdx) | The NotificationToast component works like a normal toast, except it displays data received via a signal, and it stores the messages as an array, displaying one at a time. |
 | [notificationToastSignal](variables/notificationToastSignal.mdx) | - |
@@ -276,11 +282,13 @@ import '@pexip/components/dist/index.css';
 | [UserMenuButton](variables/UserMenuButton.mdx) | - |
 | [UserMenuDropContent](variables/UserMenuDropContent.mdx) | - |
 | [VideoWrapper](variables/VideoWrapper.mdx) | - |
+| [KEYBOARD\_EVENT\_KEY](variables/KEYBOARD_EVENT_KEY.mdx) | - |
 | [themeValues](variables/themeValues.mdx) | - |
 | [ThemeContext](variables/ThemeContext.mdx) | - |
 | [ThemeConsumer](variables/ThemeConsumer.mdx) | - |
 | [ThemeProvider](variables/ThemeProvider.mdx) | - |
 | [TooltipPositionValue](variables/TooltipPositionValue.mdx) | - |
+| [buttonVariantsValues](variables/buttonVariantsValues.mdx) | - |
 
 ## Functions
 
@@ -317,6 +325,7 @@ import '@pexip/components/dist/index.css';
 | [useXlDown](functions/useXlDown.mdx) | - |
 | [useXlUp](functions/useXlUp.mdx) | - |
 | [useXs](functions/useXs.mdx) | - |
+| [useBoundingRect](functions/useBoundingRect.mdx) | Observes a HTMLElement and returns its bounding rect. Updates when the element's size changes. |
 | [useBreakpointChange](functions/useBreakpointChange.mdx) | - |
 | [useFocusFrom](functions/useFocusFrom.mdx) | This hook gives the ability to set the focus on an element which is then blurred right away, thereby effectively resetting the focus order. The next focusable element that comes after this element will be focused on the next tab. |
 | [useFocusFromOpened](functions/useFocusFromOpened.mdx) | Use this hook to set the focus point on an element when something becomes opened, e.g. set focus on a panel container or menu container when it becomes visible so that the next time the user hits on the tab key the element that becomes focused on is potentially a tabbable element inside the container element. |

package/api-docs/enumerations/TestId.mdx

@@ -7,6 +7,7 @@
 | <a id="buttonthreecolumnselector"></a> `ButtonThreeColumnSelector` | `"button-three-column-selector"` |
 | <a id="buttoncollapsablecontainertoggle"></a> `ButtonCollapsableContainerToggle` | `"button-collapsable-container-toggle"` |
 | <a id="checkboxcheck"></a> `CheckboxCheck` | `"checkbox-check"` |
+| <a id="checkboxcheckcontainer"></a> `CheckboxCheckContainer` | `"checkbox-check-container"` |
 | <a id="confirmablemultiselectconfirm"></a> `ConfirmableMultiselectConfirm` | `"confirmable-multiselect-confirm"` |
 | <a id="headercore"></a> `HeaderCore` | `"header-core"` |
 | <a id="headercoreenhancers"></a> `HeaderCoreEnhancers` | `"header-core-enhancers"` |

package/api-docs/functions/announce.mdx

@@ -13,7 +13,7 @@ Announcer needs to be mounted in the application for this to work.
 | Parameter | Type | Default value | Description |
 | ------ | ------ | ------ | ------ |
 | `message` | `ReactNode` | `undefined` | The message to announce. |
-| `politeness` | `"assertive"` \| `"polite"` | `'polite'` | The politeness level of the announcement. |
+| `politeness` | `"assertive" \| "polite"` | `'polite'` | The politeness level of the announcement. |
 | `timeout` | `number` | `5000` | The time in milliseconds util the message is removed from area-live region. |
 
 ## Returns

package/api-docs/functions/onEnter.mdx

@@ -6,8 +6,8 @@ function onEnter<E, T>(callback): (e) => void;
 
 | Type Parameter |
 | ------ |
-| `E` *extends* `HTMLElement` |
-| `T` *extends* (`e`) => `void` |
+| `E extends HTMLElement` |
+| `T extends (e) => void` |
 
 ## Parameters
 
@@ -25,7 +25,7 @@ function onEnter<E, T>(callback): (e) => void;
 
 | Parameter | Type |
 | ------ | ------ |
-| `e` | `KeyboardEvent`\<`E`\> |
+| `e` | `KeyboardEvent<E>` |
 
 ### Returns
 

package/api-docs/functions/sizeToPadding.mdx

@@ -11,12 +11,22 @@ function sizeToPadding(t):
 
 | Parameter | Type |
 | ------ | ------ |
-| `t` | `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` |
+| `t` | `"small" \| "medium" \| "compact" \| "large" \| "none"` |
 
 ## Returns
 
-  \| `"compactPadding"`
-  \| `"largePadding"`
-  \| `"mediumPadding"`
-  \| `"nonePadding"`
-  \| `"smallPadding"`
+```ts
+| "compactPadding"
+```
+```ts
+| "largePadding"
+```
+```ts
+| "mediumPadding"
+```
+```ts
+| "nonePadding"
+```
+```ts
+| "smallPadding"
+```

package/api-docs/functions/useBoundingRect.mdx

@@ -0,0 +1,42 @@
+```ts
+function useBoundingRect(
+   element, 
+   updateOnWindowResize, 
+   windowResizeThrottle): DOMRect | undefined;
+```
+
+Observes a HTMLElement and returns its bounding rect.
+Updates when the element's size changes.
+
+If a ref to a HTMLElement is passed and ref.current is null it polls the ref to detect when
+the HTMLElement value gets assigned to ref.current, this is useful in case the Component
+using this hook does not rerender when ref.current changes.
+
+## Parameters
+
+| Parameter | Type | Default value | Description |
+| ------ | ------ | ------ | ------ |
+| `element` | `HTMLElement \| RefObject<HTMLElement` | null\>` \\| `null` \| `undefined` | The HTMLElement, null, or a ref to an HTMLElement to observe |
+| `updateOnWindowResize` | `boolean` | `false` | Whether to update the rect on window resize (default: false) |
+| `windowResizeThrottle` | `number` | `0` | Throttle interval in ms for window resize updates (default: 0) |
+
+## Returns
+
+```ts
+DOMRect | undefined
+```
+
+The DOMRect of the element, or undefined if element is not available
+
+## Example
+
+```ts
+const ref = useRef<HTMLDivElement>(null);
+const rect = useBoundingRect(ref);
+
+const [element, setElement] = useState<HTMLDivElement | null>(null);
+const rect2 = useBoundingRect(element);
+
+// Update on window resize with 150ms throttle
+const rect3 = useBoundingRect(ref, true, 150);
+```

package/api-docs/functions/useBreakpointChange.mdx

@@ -4,4 +4,4 @@ function useBreakpointChange(): Signal<undefined, undefined>;
 
 ## Returns
 
-`Signal`\<`undefined`, `undefined`\>
+`Signal<undefined, undefined>`

package/api-docs/functions/useFocusFrom.mdx

@@ -11,7 +11,7 @@ will be focused on the next tab.
 
 | Parameter | Type | Description |
 | ------ | ------ | ------ |
-| `element` | `HTMLElement` \| `null` | element which focus point should start from |
+| `element` | `HTMLElement \| null` | element which focus point should start from |
 
 ## Returns
 
@@ -21,4 +21,4 @@ focusFrom function, when called sets the focus point to the given element
 
 | Name | Type |
 | ------ | ------ |
-| `focusFrom()` | () => `void` |
+| `focusFrom()` | `() => void` |

package/api-docs/functions/useFocusFromOpened.mdx

@@ -12,7 +12,7 @@ element inside the container element.
 
 | Parameter | Type | Description |
 | ------ | ------ | ------ |
-| `element` | `HTMLElement` \| `null` | element which focus point should start from |
+| `element` | `HTMLElement \| null` | element which focus point should start from |
 | `isOpen` | `boolean` | when isOpen is true the element will get the focus point |
 
 ## Returns

package/api-docs/functions/useGroupedPagesNav.mdx

@@ -6,11 +6,11 @@ function useGroupedPagesNav(__namedParameters): GroupedPageNav[];
 
 | Parameter | Type |
 | ------ | ------ |
-| `__namedParameters` | \{ `groupChunkSize?`: `number`; `pageIndex`: `number`; `totalPagesCount`: `number`; \} |
+| `__namedParameters` | `{ groupChunkSize?: number; pageIndex: number; totalPagesCount: number; }` |
 | `__namedParameters.groupChunkSize?` | `number` |
 | `__namedParameters.pageIndex` | `number` |
 | `__namedParameters.totalPagesCount` | `number` |
 
 ## Returns
 
-`GroupedPageNav`[]
+`GroupedPageNav[]`

package/api-docs/functions/useInput.mdx

@@ -6,8 +6,10 @@ function useInput(props): [string, Omit<Omit<DetailedHTMLProps<InputHTMLAttribut
 
 | Parameter | Type |
 | ------ | ------ |
-| `props` | `Omit`\<`Omit`\<`DetailedHTMLProps`\<`InputHTMLAttributes`\<`HTMLInputElement`\>, `HTMLInputElement`\>, `"disabled"`\> & `object`, `"ref"`\> & `RefAttributes`\<`Pick`\<`HTMLInputElement`, `"focus"`\>\> |
+| `props` | `Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "disabled"> & object, "ref"> & RefAttributes<Pick<HTMLInputElement, "focus">>` |
 
 ## Returns
 
-\[`string`, `Omit`\<`Omit`\<`DetailedHTMLProps`\<`InputHTMLAttributes`\<`HTMLInputElement`\>, `HTMLInputElement`\>, `"disabled"`\> & `object`, `"ref"`\> & `RefAttributes`\<`Pick`\<`HTMLInputElement`, `"focus"`\>\>\]
+```ts
+[string, Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "disabled"> & object, "ref"> & RefAttributes<Pick<HTMLInputElement, "focus">>]
+```

package/api-docs/functions/useModal.mdx

@@ -14,5 +14,5 @@ function useModal(isOpen): object;
 
 | Name | Type |
 | ------ | ------ |
-| `ref` | `RefObject`\<`HTMLDivElement` \| `null`\> |
-| `modalProps` | `DOMAttributes`\<`FocusableElement`\> |
+| `ref` | `RefObject<HTMLDivElement \| null>` |
+| `modalProps` | `DOMAttributes<FocusableElement>` |

package/api-docs/functions/useModalHandle.mdx

@@ -9,4 +9,4 @@ function useModalHandle(): object;
 | Name | Type |
 | ------ | ------ |
 | `modalHandleRef` | `RefObject`\<[`ModalHandle`](../interfaces/ModalHandle.mdx) \| `null`\> |
-| `focusModal()` | () => `void` |
+| `focusModal()` | `() => void` |

package/api-docs/functions/useModalWithoutPreventScroll.mdx

@@ -20,5 +20,5 @@ causes the virtual keyboard to cover focused inputs.
 
 | Name | Type | Default value |
 | ------ | ------ | ------ |
-| `ref` | `RefObject`\<`HTMLDivElement` \| `null`\> | - |
-| `modalProps` | `DOMAttributes`\<`FocusableElement`\> | `overlayProps` |
+| `ref` | `RefObject<HTMLDivElement \| null>` | - |
+| `modalProps` | `DOMAttributes<FocusableElement>` | `overlayProps` |

package/api-docs/functions/useMultistepIndicator.mdx

@@ -34,12 +34,28 @@ readonly \[\{
   `prevStepsCompleted`: `boolean`;
   `steps`: [`MultistepItem`](../interfaces/MultistepItem.mdx)[];
 \}, \{
-  `moveToStep`: (`stepIndex`, `__namedParameters`) => `void`;
-  `resetAllSteps`: () => `void`;
-  `resetStep`: (`stepIndex`) => `void`;
-  `updateStepActive`: (`stepIndex`, `isActive`) => `void`;
-  `updateStepCompleted`: (`stepIndex`, `__namedParameters`) => `void`;
-  `updateStepFailed`: (`stepIndex`, `__namedParameters`) => `void`;
-  `updateStepDisabled`: (`stepIndex`, `isDisabled`) => `void`;
-  `updateStepLeave`: (`stepIndex`, `__namedParameters`) => `void`;
+```ts
+moveToStep: (stepIndex, __namedParameters) => void;
+```
+```ts
+resetAllSteps: () => void;
+```
+```ts
+resetStep: (stepIndex) => void;
+```
+```ts
+updateStepActive: (stepIndex, isActive) => void;
+```
+```ts
+updateStepCompleted: (stepIndex, __namedParameters) => void;
+```
+```ts
+updateStepFailed: (stepIndex, __namedParameters) => void;
+```
+```ts
+updateStepDisabled: (stepIndex, isDisabled) => void;
+```
+```ts
+updateStepLeave: (stepIndex, __namedParameters) => void;
+```
 \}\]

package/api-docs/functions/useOutOfViewNavigation.mdx

@@ -6,10 +6,10 @@ function useOutOfViewNavigation(__namedParameters): object;
 
 | Parameter | Type |
 | ------ | ------ |
-| `__namedParameters` | \{ `isDisabled?`: `boolean`; `content`: `ReactElement`; `root`: `HTMLElement` \| `null`; `moveBy?`: `number`; `containerClassName?`: `string`; \} |
+| `__namedParameters` | `{ isDisabled?: boolean; content: ReactElement; root: HTMLElement \| null; moveBy?: number; containerClassName?: string; }` |
 | `__namedParameters.isDisabled?` | `boolean` |
 | `__namedParameters.content` | `ReactElement` |
-| `__namedParameters.root` | `HTMLElement` \| `null` |
+| `__namedParameters.root` | `HTMLElement \| null` |
 | `__namedParameters.moveBy?` | `number` |
 | `__namedParameters.containerClassName?` | `string` |
 
@@ -20,6 +20,6 @@ function useOutOfViewNavigation(__namedParameters): object;
 | Name | Type |
 | ------ | ------ |
 | `navigationView` | `Element` |
-| `moveLeft` | () => `void` \| `undefined` |
-| `moveRight` | () => `void` \| `undefined` |
+| `moveLeft` | `() => void \| undefined` |
+| `moveRight` | `() => void \| undefined` |
 | `hasOverflowingContent` | `boolean` |

package/api-docs/functions/useScrollIntoView.mdx

@@ -6,10 +6,10 @@ function useScrollIntoView(element, options): () => void;
 
 | Parameter | Type |
 | ------ | ------ |
-| `element` | `RefObject`\<`HTMLElement` \| `null`\> |
-| `options` | \{ `delay?`: `number`; `scrollIntoViewOptions?`: `Partial`\<`ScrollIntoViewOptions`\>; \} |
+| `element` | `RefObject<HTMLElement \| null>` |
+| `options` | `{ delay?: number; scrollIntoViewOptions?: Partial<ScrollIntoViewOptions>; }` |
 | `options.delay?` | `number` |
-| `options.scrollIntoViewOptions?` | `Partial`\<`ScrollIntoViewOptions`\> |
+| `options.scrollIntoViewOptions?` | `Partial<ScrollIntoViewOptions>` |
 
 ## Returns
 

package/api-docs/functions/useTabs.mdx

@@ -15,4 +15,4 @@ function useTabs(activeTabIndex): object;
 | Name | Type |
 | ------ | ------ |
 | `activeTab` | `number` |
-| `setActiveTab` | `Dispatch`\<`SetStateAction`\<`number`\>\> |
+| `setActiveTab` | `Dispatch<SetStateAction<number>>` |

package/api-docs/functions/withColorScheme.mdx

@@ -6,14 +6,14 @@ function withColorScheme<P>(Component, colorScheme): (props) => Element;
 
 | Type Parameter |
 | ------ |
-| `P` *extends* `object` |
+| `P extends object` |
 
 ## Parameters
 
 | Parameter | Type |
 | ------ | ------ |
-| `Component` | `ComponentType`\<`P`\> |
-| `colorScheme` | `"dark"` \| `"light"` |
+| `Component` | `ComponentType<P>` |
+| `colorScheme` | `"dark" \| "light"` |
 
 ## Returns
 

package/api-docs/functions/withTabName.mdx

@@ -12,7 +12,7 @@ function withTabName<P>(Component, componentProps?): (props) => Element;
 
 | Parameter | Type |
 | ------ | ------ |
-| `Component` | `ComponentType`\<`P`\> |
+| `Component` | `ComponentType<P>` |
 | `componentProps?` | `P` |
 
 ## Returns
@@ -25,7 +25,7 @@ function withTabName<P>(Component, componentProps?): (props) => Element;
 
 | Parameter | Type |
 | ------ | ------ |
-| `props` | `P` & `ClassAttributes`\<`HTMLButtonElement`\> & `ButtonHTMLAttributes`\<`HTMLButtonElement`\> |
+| `props` | `P` & `ClassAttributes<HTMLButtonElement>` & `ButtonHTMLAttributes<HTMLButtonElement>` |
 
 ### Returns
 

package/api-docs/functions/withTransition.mdx

@@ -9,15 +9,15 @@ function withTransition<P>(
 
 | Type Parameter |
 | ------ |
-| `P` *extends* `object` |
+| `P extends object` |
 
 ## Parameters
 
 | Parameter | Type | Default value |
 | ------ | ------ | ------ |
-| `Component` | `ComponentType`\<`P`\> | `undefined` |
+| `Component` | `ComponentType<P>` | `undefined` |
 | `timeout` | `number` | `undefined` |
-| `stateAfterTransition` | `"hide"` \| `"unmount"` | `'unmount'` |
+| `stateAfterTransition` | `"hide" \| "unmount"` | `'unmount'` |
 
 ## Returns
 
@@ -33,4 +33,6 @@ function withTransition<P>(
 
 ### Returns
 
-`Element` \| `null`
+```ts
+Element | null
+```