@pexip/components 19.1.3 → 19.3.0

package/api-docs/functions/announce.mdx

@@ -0,0 +1,21 @@
+```ts
+function announce(
+   message, 
+   politeness, 
+   timeout): void;
+```
+
+Announce a message to screen readers.
+Announcer needs to be mounted in the application for this to work.
+
+## Parameters
+
+| Parameter | Type | Default value | Description |
+| ------ | ------ | ------ | ------ |
+| `message` | `ReactNode` | `undefined` | The message to announce. |
+| `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
+
+`void`

package/api-docs/functions/isBackgroundImageSrcEmpty.mdx

@@ -0,0 +1,13 @@
+```ts
+function isBackgroundImageSrcEmpty(backgroundImageSrc): boolean;
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `backgroundImageSrc` | \| [`BackgroundImageSrc`](../type-aliases/BackgroundImageSrc.mdx) \| `undefined` |
+
+## Returns
+
+`boolean`

package/api-docs/functions/isImageSrcEmpty.mdx

@@ -0,0 +1,13 @@
+```ts
+function isImageSrcEmpty(imageSrc): boolean;
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `imageSrc` | [`ImageSrc`](../type-aliases/ImageSrc.mdx) \| `undefined` |
+
+## Returns
+
+`boolean`

package/api-docs/functions/isImageSrcString.mdx

@@ -0,0 +1,13 @@
+```ts
+function isImageSrcString(imageSrc): imageSrc is string;
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `imageSrc` | [`ImageSrc`](../type-aliases/ImageSrc.mdx) \| `undefined` |
+
+## Returns
+
+`imageSrc is string`

package/api-docs/functions/isValidIconName.mdx

@@ -0,0 +1,13 @@
+```ts
+function isValidIconName(iconName): iconName is keyof IconCollection;
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `iconName` | `string` |
+
+## Returns
+
+`iconName is keyof IconCollection`

package/api-docs/functions/onEnter.mdx

@@ -0,0 +1,32 @@
+```ts
+function onEnter<E, T>(callback): (e) => void;
+```
+
+## Type Parameters
+
+| Type Parameter |
+| ------ |
+| `E` *extends* `HTMLElement` |
+| `T` *extends* (`e`) => `void` |
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `callback` | `T` |
+
+## Returns
+
+```ts
+(e): void;
+```
+
+### Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `e` | `KeyboardEvent`\<`E`\> |
+
+### Returns
+
+`void`

package/api-docs/functions/sizeToPadding.mdx

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

package/api-docs/functions/useBelow360.mdx

@@ -0,0 +1,7 @@
+```ts
+function useBelow360(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useBreakpointChange.mdx

@@ -0,0 +1,7 @@
+```ts
+function useBreakpointChange(): Signal<undefined, undefined>;
+```
+
+## Returns
+
+`Signal`\<`undefined`, `undefined`\>

package/api-docs/functions/useFocusFrom.mdx

@@ -0,0 +1,24 @@
+```ts
+function useFocusFrom(element): object;
+```
+
+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.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------ | ------ | ------ |
+| `element` | `HTMLElement` \| `null` | element which focus point should start from |
+
+## Returns
+
+`object`
+
+focusFrom function, when called sets the focus point to the given element
+
+| Name | Type |
+| ------ | ------ |
+| `focusFrom()` | () => `void` |

package/api-docs/functions/useFocusFromOpened.mdx

@@ -0,0 +1,20 @@
+```ts
+function useFocusFromOpened(element, isOpen): void;
+```
+
+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.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------ | ------ | ------ |
+| `element` | `HTMLElement` \| `null` | element which focus point should start from |
+| `isOpen` | `boolean` | when isOpen is true the element will get the focus point |
+
+## Returns
+
+`void`

package/api-docs/functions/useGroupedPagesNav.mdx

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

package/api-docs/functions/useInput.mdx

@@ -0,0 +1,13 @@
+```ts
+function useInput(props): [string, Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "disabled"> & object, "ref"> & RefAttributes<Pick<HTMLInputElement, "focus">>];
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `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"`\>\>\]

package/api-docs/functions/useLandscape.mdx

@@ -0,0 +1,7 @@
+```ts
+function useLandscape(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useLg.mdx

@@ -0,0 +1,7 @@
+```ts
+function useLg(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useLgDown.mdx

@@ -0,0 +1,7 @@
+```ts
+function useLgDown(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useLgUp.mdx

@@ -0,0 +1,7 @@
+```ts
+function useLgUp(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useMd.mdx

@@ -0,0 +1,7 @@
+```ts
+function useMd(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useMdDown.mdx

@@ -0,0 +1,7 @@
+```ts
+function useMdDown(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useMdToXl.mdx

@@ -0,0 +1,7 @@
+```ts
+function useMdToXl(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useMdUp.mdx

@@ -0,0 +1,7 @@
+```ts
+function useMdUp(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useMobileDevice.mdx

@@ -0,0 +1,7 @@
+```ts
+function useMobileDevice(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useMobileDeviceLandscape.mdx

@@ -0,0 +1,7 @@
+```ts
+function useMobileDeviceLandscape(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useMobileDevicePortrait.mdx

@@ -0,0 +1,7 @@
+```ts
+function useMobileDevicePortrait(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useModal.mdx

@@ -0,0 +1,18 @@
+```ts
+function useModal(isOpen): object;
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `isOpen` | `boolean` |
+
+## Returns
+
+`object`
+
+| Name | Type |
+| ------ | ------ |
+| `ref` | `RefObject`\<`HTMLDivElement` \| `null`\> |
+| `modalProps` | `DOMAttributes`\<`FocusableElement`\> |

package/api-docs/functions/useModalHandle.mdx

@@ -0,0 +1,12 @@
+```ts
+function useModalHandle(): object;
+```
+
+## Returns
+
+`object`
+
+| Name | Type |
+| ------ | ------ |
+| `modalHandleRef` | `RefObject`\<[`ModalHandle`](../interfaces/ModalHandle.mdx) \| `null`\> |
+| `focusModal()` | () => `void` |

package/api-docs/functions/useMultistepIndicator.mdx

@@ -0,0 +1,45 @@
+```ts
+function useMultistepIndicator(__namedParameters): readonly [{
+  allStepsCompleted: boolean;
+  currentStepIndex: number;
+  prevStepsCompleted: boolean;
+  steps: MultistepItem[];
+}, {
+  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;
+}];
+```
+
+Convenience hook for using steps in MultistepIndicator
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `__namedParameters` | \{ `initialSteps`: [`MultistepItem`](../interfaces/MultistepItem.mdx)[]; `currentStepIndex?`: `number`; \} |
+| `__namedParameters.initialSteps` | [`MultistepItem`](../interfaces/MultistepItem.mdx)[] |
+| `__namedParameters.currentStepIndex?` | `number` |
+
+## Returns
+
+readonly \[\{
+  `allStepsCompleted`: `boolean`;
+  `currentStepIndex`: `number`;
+  `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`;
+\}\]

package/api-docs/functions/useOutOfViewNavigation.mdx

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

package/api-docs/functions/usePortrait.mdx

@@ -0,0 +1,7 @@
+```ts
+function usePortrait(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useScrollIntoView.mdx

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

package/api-docs/functions/useSm.mdx

@@ -0,0 +1,7 @@
+```ts
+function useSm(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useSmDown.mdx

@@ -0,0 +1,7 @@
+```ts
+function useSmDown(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useSmToLg.mdx

@@ -0,0 +1,7 @@
+```ts
+function useSmToLg(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useSmToXl.mdx

@@ -0,0 +1,7 @@
+```ts
+function useSmToXl(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useSmUp.mdx

@@ -0,0 +1,7 @@
+```ts
+function useSmUp(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useTabletDevice.mdx

@@ -0,0 +1,7 @@
+```ts
+function useTabletDevice(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useTabs.mdx

@@ -0,0 +1,18 @@
+```ts
+function useTabs(activeTabIndex): object;
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `activeTabIndex` | `number` |
+
+## Returns
+
+`object`
+
+| Name | Type |
+| ------ | ------ |
+| `activeTab` | `number` |
+| `setActiveTab` | `Dispatch`\<`SetStateAction`\<`number`\>\> |

package/api-docs/functions/useTouchDevice.mdx

@@ -0,0 +1,7 @@
+```ts
+function useTouchDevice(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useXl.mdx

@@ -0,0 +1,7 @@
+```ts
+function useXl(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useXlDown.mdx

@@ -0,0 +1,7 @@
+```ts
+function useXlDown(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useXlUp.mdx

@@ -0,0 +1,7 @@
+```ts
+function useXlUp(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/useXs.mdx

@@ -0,0 +1,7 @@
+```ts
+function useXs(): boolean;
+```
+
+## Returns
+
+`boolean`

package/api-docs/functions/withColorScheme.mdx

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

package/api-docs/functions/withTabName.mdx

@@ -0,0 +1,32 @@
+```ts
+function withTabName<P>(Component, componentProps?): (props) => Element;
+```
+
+## Type Parameters
+
+| Type Parameter |
+| ------ |
+| `P` |
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `Component` | `ComponentType`\<`P`\> |
+| `componentProps?` | `P` |
+
+## Returns
+
+```ts
+(props): Element;
+```
+
+### Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `props` | `P` & `ClassAttributes`\<`HTMLButtonElement`\> & `ButtonHTMLAttributes`\<`HTMLButtonElement`\> |
+
+### Returns
+
+`Element`