@swisspost/design-system-components 10.7.0 → 10.8.0

package/dist/types/components.d.ts

@@ -579,21 +579,25 @@ export namespace Components {
     }
     interface PostPopovercontainer {
         /**
-          * Whether or not to display a little pointer arrow
+          * Show a little indicator arrow
           * @default false
          */
         "arrow"?: boolean;
         /**
-          * Whether to automatically hide the popover when the target moves outside the scrollport.  If the `post-header` can cover the target, the popover will also be hidden as soon as the target scrolls behind it.
+          * Whether to automatically hide the popover when the anchor moves outside the scrollport.  If the `post-header` can cover the anchor, the popover will also be hidden as soon as the anchor scrolls behind it.
          */
         "autoHide"?: boolean;
         /**
-          * Gap between the edge of the page and the popovercontainer
+          * Whether to keep resizing the popover while it is open.  Every popover is sized once when it opens: the space available around the anchor, minus the `edgeGap`, becomes the maximum width and height of the popover. The placement is then recalculated for that size.  With `autoResize`, the popover's size is recalculated on every position update, for example when the anchor moves while scrolling.
+         */
+        "autoResize"?: boolean;
+        /**
+          * Gap between the edge of the viewport and the popover.
           * @default 8
          */
         "edgeGap"?: number;
         /**
-          * Programmatically hide the popovercontainer
+          * Hides the popover.
          */
         "hide": () => Promise<void>;
         /**
@@ -601,25 +605,26 @@ export namespace Components {
          */
         "offset"?: number;
         /**
-          * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+          * Placement of the popover according to the floating-ui options.
           * @default 'top'
          */
         "placement"?: Placement1;
         /**
-          * Enables a safespace through which the cursor can be moved without the popover being disabled
+          * Whether to add a space through which the mouse can move without the popover being hidden.
          */
-        "safeSpace"?: 'triangle' | 'trapezoid';
+        "safeSpace"?: boolean;
         /**
-          * Programmatically display the popovercontainer
-          * @param target The element that invokes the popover and to which it is visually anchored.
+          * Shows the popover.
+          * @param anchor the element that the popover is visually anchored to.
          */
-        "show": (target: HTMLElement) => Promise<void>;
+        "show": (anchor: HTMLElement) => Promise<void>;
         /**
-          * Toggle popovercontainer display
-          * @param target The element that invokes the popover and to which it is visually anchored.
-          * @param force Pass true to always show or false to always hide
+          * Toggles the popover's state from hidden to showing and vice versa.  If `state` is specified, the popover is forced to be shown if the is set to `true`, or hidden if it is set to `false`.
+          * @param anchor the element that the popover is visually anchored to.
+          * @param force the next state of the popover.
+          * @returns the new state of the popover: `true` if it is shown, `false` if it is hidden.
          */
-        "toggle": (target: HTMLElement, force?: boolean) => Promise<boolean>;
+        "toggle": (anchor: HTMLElement, force?: boolean) => Promise<boolean>;
     }
     interface PostProgressbar {
         /**
@@ -1640,6 +1645,9 @@ declare namespace LocalJSX {
         "url"?: string;
     }
     interface PostLanguageMenu {
+        /**
+          * An event emitted when the active language changes. The payload is the ISO 639 code of the newly active language.
+         */
         "onPostChange"?: (event: PostLanguageMenuCustomEvent<string>) => void;
         /**
           * A title for the list of language options
@@ -1846,16 +1854,20 @@ declare namespace LocalJSX {
     }
     interface PostPopovercontainer {
         /**
-          * Whether or not to display a little pointer arrow
+          * Show a little indicator arrow
           * @default false
          */
         "arrow"?: boolean;
         /**
-          * Whether to automatically hide the popover when the target moves outside the scrollport.  If the `post-header` can cover the target, the popover will also be hidden as soon as the target scrolls behind it.
+          * Whether to automatically hide the popover when the anchor moves outside the scrollport.  If the `post-header` can cover the anchor, the popover will also be hidden as soon as the anchor scrolls behind it.
          */
         "autoHide"?: boolean;
         /**
-          * Gap between the edge of the page and the popovercontainer
+          * Whether to keep resizing the popover while it is open.  Every popover is sized once when it opens: the space available around the anchor, minus the `edgeGap`, becomes the maximum width and height of the popover. The placement is then recalculated for that size.  With `autoResize`, the popover's size is recalculated on every position update, for example when the anchor moves while scrolling.
+         */
+        "autoResize"?: boolean;
+        /**
+          * Gap between the edge of the viewport and the popover.
           * @default 8
          */
         "edgeGap"?: number;
@@ -1864,34 +1876,34 @@ declare namespace LocalJSX {
          */
         "offset"?: number;
         /**
-          * Fires whenever the popovercontainer is about to be shown, passing in event.detail a `first` boolean, which is true if it is to be shown for the first time.
+          * Emitted just before the popover is shown.  The payload contains a `first` boolean, that is set to `true` when the popover is about to be shown for the first time.
          */
         "onPostBeforeShow"?: (event: PostPopovercontainerCustomEvent<{ first?: boolean }>) => void;
         /**
-          * Fires whenever the popovercontainer is about to be shown or hidden, passing in event.detail a `willOpen` boolean, which is true if the popovercontainer is about to be opened and false if it is about to be closed.
+          * Emitted just before the popover's state changes.  The payload contains a `willOpen` boolean, that is set to `true` when the popover is about to be shown, `false` when it is about to be hidden.
          */
         "onPostBeforeToggle"?: (event: PostPopovercontainerCustomEvent<{ willOpen: boolean }>) => void;
         /**
-          * Fires whenever the popovercontainer is hidden.
+          * Emitted just after the popover is hidden.
          */
         "onPostHide"?: (event: PostPopovercontainerCustomEvent<any>) => void;
         /**
-          * Fires whenever the popovercontainer is shown, passing in event.detail a `first` boolean, which is true if it is shown for the first time.
+          * Emitted just after the popover is shown.  The payload contains a `first` boolean, that is set to `true` when the popover is shown for the first time.
          */
         "onPostShow"?: (event: PostPopovercontainerCustomEvent<{ first?: boolean }>) => void;
         /**
-          * Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing a `isOpen`boolean, which is true if the popovercontainer was opened and false if it was closed.
+          * Emitted just after the popover's state changes.  The payload contains a `isOpen` boolean, that is set to `true` when the popover is shown, `false` when it is hidden.
          */
         "onPostToggle"?: (event: PostPopovercontainerCustomEvent<{ isOpen: boolean }>) => void;
         /**
-          * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+          * Placement of the popover according to the floating-ui options.
           * @default 'top'
          */
         "placement"?: Placement1;
         /**
-          * Enables a safespace through which the cursor can be moved without the popover being disabled
+          * Whether to add a space through which the mouse can move without the popover being hidden.
          */
-        "safeSpace"?: 'triangle' | 'trapezoid';
+        "safeSpace"?: boolean;
     }
     interface PostProgressbar {
         /**
@@ -2212,8 +2224,9 @@ declare namespace LocalJSX {
         "edgeGap": number;
         "offset": number;
         "arrow": boolean;
-        "safeSpace": 'triangle' | 'trapezoid';
+        "safeSpace": boolean;
         "autoHide": boolean;
+        "autoResize": boolean;
     }
     interface PostProgressbarAttributes {
         "min": number;

package/dist/types/utils/floating-ui/middleware/flip.d.ts

@@ -0,0 +1,14 @@
+import { Derivable, DetectOverflowOptions, Middleware } from '@floating-ui/dom';
+import { Dimensions } from '@floating-ui/utils';
+export declare const FLIP_MIDDLEWARE = "post-flip";
+export type FlipOptions = Omit<DetectOverflowOptions, 'elementContext'> & {
+    minSize?: Partial<Dimensions>;
+};
+/**
+ * Changes the placement of the floating element to keep it in view.
+ *
+ * Unlike the Floating UI `flip` middleware, placements are measured against `minSize` rather than
+ * against the current size of the floating element, and the placement with the smallest deficit is
+ * used when none of them fits.
+ */
+export declare function flip(options?: FlipOptions | Derivable<FlipOptions>): Middleware;

package/dist/types/utils/floating-ui/middleware/safe-space.d.ts

@@ -0,0 +1,10 @@
+import { Middleware } from '@floating-ui/dom';
+export declare const SAFE_SPACE_MIDDLEWARE = "post-safe-space";
+export interface SafeSpaceData {
+    polygon: string;
+}
+/**
+ * Computes the safe space, the area the pointer can travel through to get from the reference to
+ * the floating element.
+ */
+export declare function safeSpace(): Middleware;

package/dist/types/utils/floating-ui/util.d.ts

@@ -0,0 +1,4 @@
+import { Side } from '@floating-ui/utils';
+export declare const getNextSide: (side: Side) => Side;
+export declare const getOppositeSide: (side: Side) => Side;
+export declare const getPreviousSide: (side: Side) => Side;

package/dist/types/utils/index.d.ts

@@ -8,6 +8,7 @@ export * from './event-from';
 export * from './get-focusable-children';
 export * from './get-root';
 export * from './get-slotted-element';
+export * from './is-focus-visible';
 export * from './is-iso-date';
 export * from './is-motion-reduced';
 export * from './is-value-empty';

package/dist/types/utils/is-focus-visible.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Checks whether an element currently matches `:focus-visible`, i.e. whether
+ * it was focused via keyboard rather than mouse/touch interaction.
+ */
+export declare function isFocusVisible(element: Element | null): boolean;

package/dist/vrt/helpers/header-test-config.js

@@ -113,5 +113,6 @@ export const TEST_MATRIX = {
     'jobs-loggedout': stateComposeHelper(SCROLLED_ONLY, BURGER_FLOW_NO_SECOND),
     'jobs-loggedin': stateComposeHelper(LOGGED_IN),
     'onepager': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
-    'application': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
+    'application-compact': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
+    'application-condensed': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
 };