@pexip/components 19.2.0 → 20.0.0

package/@types/assets.d.ts

@@ -0,0 +1,13 @@
+declare module '*.png' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.jpg' {
+    const src: string;
+    export default src;
+}
+declare module '*.gif' {
+    const src: string;
+    export default src;
+}

package/@types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+    const src: string;
+    export default src;
+}

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # Changelog
 
+## 20.0.0
+
+### Major Changes
+
+- 628319f: Stops publishing unused private `design-tokens` files.
+
+### Minor Changes
+
+- 5f24d86: Remove redundant buttonType from DropContent
+- 5f24d86: Add buttonType to DropContent, ConfirmableMultiselect and
+  MultiselectCore
+
+### Patch Changes
+
+- ebc96d5: Make generateURLsFromText return linkType = 'text' for decimal
+  numbers in text and pattern that may look like a hyperlink e.g. meeting.when
+  but is just missing a space at the beginning of the sentence 'meeting. when'
+
+  The following have previously been returned as link type but now become text
+  type: 'dd.dd', '1.50'
+
+- e745bca: Add optional floatRootInset prop to Draggable for per-edge boundary
+  insets
+- 1ea5c1d: `Draggable.tsx` removes `translate` property when taking over the
+  element.
+- fe0a0a4: Give Button a backgroundTransparency prop, this takes a decimal
+  number <= 1, if below 1 the Button has transparency.
+
+  FileUpload is modified to pass rest props to label, this has been done so that
+  FileUpload can be used as the trigger element of Tooltip, before this change a
+  tooltip would not display when FileUpload was used as child of Tooltip
+
+- fb41d4d: Changes related to Typescript V6 Upgrade
+- 44e4302: Adds more clear `biome-ignore lint/a11y/useAriaPropsSupportedByRole`
+  comment.
+- 6c2e607: Adds useModalWithoutPreventScroll hook. This hook provides modal
+  behavior like focus trapping, outside interaction blocking and dismiss
+  handling. Unlike the useModal hook that provides this behavior as well, this
+  hook does not prevent scroll, which makes it work well for modals that have
+  input fields, preventing scroll on iOS Safari causes the virtual keyboard to
+  cover part of the UI, possibly hiding the input field when typing on the
+  virtual keyboard.
+- 0b0bab3: Position Modal close button correctly
+- Updated dependencies [498ff3b]
+- Updated dependencies [fb41d4d]
+- Updated dependencies [b99c070]
+  - @pexip/utils@17.3.0
+  - @pexip/signal@16.9.5
+  - @pexip/hooks@21.0.7
+
+## 19.3.0
+
+### Minor Changes
+
+- 4940c23: Support showing `speakers` in the `Captions`
+- a728249: Add `Details` component.
+- a02f422: Support custom MenuEntry in Menu Component
+- a02f422: Add and export PlainMenuEntry component
+- 4940c23: Change `default` dark background in `FullSizeWindow` from `dark-blue`
+  to `gray` and make a fallback for legacy theme
+
+### Patch Changes
+
+- 18ff23c: Make cursor default on Button
+
+  Add data-dragging attribute to Draggable
+
+- d42aaa6: Extra small border radius for Menu.
+- ea290e6: Update background-blur and background-replace icons
+
+  Update icons build script to allow fetching only icon with --icon-name arg
+
+- 64f614b: `ConfirmationModal`'s `onConfirm` and `onCancel` take in non-optional
+  Event arg.
+- Updated dependencies [1fff975]
+- Updated dependencies [3963c2e]
+- Updated dependencies [762ebd2]
+- Updated dependencies [4d2da34]
+  - @pexip/utils@17.2.0
+  - @pexip/signal@16.9.4
+  - @pexip/hooks@21.0.6
+
 ## 19.2.0
 
 ### Minor Changes

package/api-docs/README.mdx

@@ -217,6 +217,7 @@ import '@pexip/components/dist/index.css';
 | [CondensedTabs](variables/CondensedTabs.mdx) | - |
 | [ConfirmationModal](variables/ConfirmationModal.mdx) | - |
 | [ContextMenu](variables/ContextMenu.mdx) | ContextMenu will the show the "menu" component as a context menu when the user right clicks on the given child element. |
+| [Details](variables/Details.mdx) | - |
 | [DragAndUploadFiles](variables/DragAndUploadFiles.mdx) | - |
 | [DropContent](variables/DropContent.mdx) | - |
 | [Form](variables/Form.mdx) | - |
@@ -225,6 +226,7 @@ import '@pexip/components/dist/index.css';
 | [KebabMenuButton](variables/KebabMenuButton.mdx) | - |
 | [List](variables/List.mdx) | - |
 | [Row](variables/Row.mdx) | - |
+| [PlainMenuEntry](variables/PlainMenuEntry.mdx) | - |
 | [MenuEntry](variables/MenuEntry.mdx) | - |
 | [Menu](variables/Menu.mdx) | - |
 | [Modal](variables/Modal.mdx) | - |
@@ -320,6 +322,8 @@ import '@pexip/components/dist/index.css';
 | [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. |
 | [useModal](functions/useModal.mdx) | - |
 | [useModalHandle](functions/useModalHandle.mdx) | - |
+| [useModalWithoutPreventScroll](functions/useModalWithoutPreventScroll.mdx) | Alternative to `useModal` that does not use `useModalOverlay`. |
+| [useOutOfViewNavigation](functions/useOutOfViewNavigation.mdx) | - |
 | [useScrollIntoView](functions/useScrollIntoView.mdx) | - |
 | [withColorScheme](functions/withColorScheme.mdx) | - |
 | [sizeToPadding](functions/sizeToPadding.mdx) | - |

package/api-docs/functions/useModalWithoutPreventScroll.mdx

@@ -0,0 +1,24 @@
+```ts
+function useModalWithoutPreventScroll(isOpen): object;
+```
+
+Alternative to `useModal` that does not use `useModalOverlay`.
+
+Provides modal behavior (focus trapping, outside interaction blocking, dismiss handling)
+without preventing scroll. This is useful on mobile Safari where `usePreventScroll` (used in implementation of useModalOverlay)
+causes the virtual keyboard to cover focused inputs.
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `isOpen` | `boolean` |
+
+## Returns
+
+`object`
+
+| Name | Type | Default value |
+| ------ | ------ | ------ |
+| `ref` | `RefObject`\<`HTMLDivElement` \| `null`\> | - |
+| `modalProps` | `DOMAttributes`\<`FocusableElement`\> | `overlayProps` |

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/interfaces/IconCollection.mdx

@@ -21,6 +21,7 @@
 | <a id="iconaudiotransmission"></a> `IconAudioTransmission` | [`IconSource`](IconSource.mdx) |
 | <a id="iconauthenticated"></a> `IconAuthenticated` | [`IconSource`](IconSource.mdx) |
 | <a id="iconbackgroundblur"></a> `IconBackgroundBlur` | [`IconSource`](IconSource.mdx) |
+| <a id="iconbackgroundreplace"></a> `IconBackgroundReplace` | [`IconSource`](IconSource.mdx) |
 | <a id="iconbackspace"></a> `IconBackspace` | [`IconSource`](IconSource.mdx) |
 | <a id="iconbacktotop"></a> `IconBackToTop` | [`IconSource`](IconSource.mdx) |
 | <a id="iconbandwidth"></a> `IconBandwidth` | [`IconSource`](IconSource.mdx) |

package/api-docs/type-aliases/MenuItem.mdx

@@ -1,7 +1,13 @@
 ```ts
-type MenuItem = object;
+type MenuItem<T> = object;
 ```
 
+## Type Parameters
+
+| Type Parameter | Default type |
+| ------ | ------ |
+| `T` *extends* `string` | `string` |
+
 ## Properties
 
 | Property | Type |
@@ -21,4 +27,5 @@ type MenuItem = object;
 | <a id="target"></a> `target?` | [`LinkTarget`](LinkTarget.mdx) |
 | <a id="testid"></a> `testId?` | `string` |
 | <a id="url"></a> `url?` | `string` |
+| <a id="value"></a> `value?` | `T` |
 | <a id="variant"></a> `variant?` | [`TextVariant`](TextVariant.mdx) |

package/api-docs/variables/Captions.mdx

@@ -1,3 +1,3 @@
 ```ts
-const Captions: ForwardRefExoticComponent<object & RefAttributes<HTMLSpanElement>>;
+const Captions: React.FC<CaptionsProps & TextProps>;
 ```

package/api-docs/variables/Details.mdx

@@ -0,0 +1,3 @@
+```ts
+const Details: React.FC<Omit<React.ComponentProps<typeof Summary>, "content" | "isOpen" | "onToggle"> & object>;
+```

package/api-docs/variables/FileUpload.mdx

@@ -1,3 +1,3 @@
 ```ts
-const FileUpload: ForwardRefExoticComponent<object & RefAttributes<HTMLInputElement>>;
+const FileUpload: ForwardRefExoticComponent<object & Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "onChange"> & RefAttributes<HTMLInputElement>>;
 ```

package/api-docs/variables/Menu.mdx

@@ -1,10 +1,11 @@
 ```ts
 const Menu: React.FC<{
-  onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement>;
   className?: string;
   colorScheme?: ColorScheme;
   isAriaMultiSelectable?: boolean;
   menuContent: MenuContent | TitledMenuContent;
+  menuEntryComponent?: typeof MenuEntry;
+  onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement>;
   role?: React.AriaRole;
   tabIndex?: number;
   testId?: string;

package/api-docs/variables/PlainMenuEntry.mdx

@@ -0,0 +1,3 @@
+```ts
+const PlainMenuEntry: React.FC<React.ComponentProps<typeof Row> & object>;
+```

package/design-tokens/mixins/media-queries.scss

@@ -212,7 +212,7 @@
 
 @mixin mobile-portrait() {
     @include portrait {
-        @include md-down {
+        @include lg-down {
             @include touch {
                 @content;
             }