asma-ui-core 3.88.1 → 3.90.0

package/dist/src/components/utils/bottom-sheet/useDragToDismiss.hook.d.ts

@@ -0,0 +1,22 @@
+import { PointerEvent, RefObject } from 'react';
+interface DragHandleProps {
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+    onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+    onPointerCancel: (event: PointerEvent<HTMLElement>) => void;
+}
+interface DragToDismiss {
+    /** Spread on the drag zone — the 48px handle row. */
+    dragHandleProps: DragHandleProps;
+    /** How far the sheet is currently dragged down, in px. `0` when at rest. */
+    dragOffset: number;
+}
+/**
+ * Drag the sheet down past 30% of its height to dismiss it; release earlier and it snaps back.
+ *
+ * Deliberately never the only exit (WCAG 2.5.7): the close button, the scrim and Escape all do the
+ * same without a dragging movement. A press that starts on a button in the drag zone is left alone,
+ * so the close control keeps working as a plain click.
+ */
+export declare const useDragToDismiss: (sheetRef: RefObject<HTMLElement | null>, onDismiss: () => void) => DragToDismiss;
+export {};

package/dist/src/components/utils/popover/PopoverAnatomy.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/**
+ * The Figma "_Popover" surface chrome (node `44531:233781`): white, 1px `border/outline`, radius 8
+ * (`dialog` token) and the Dialogue-popup elevation — the same surface `StyledDialog` paints.
+ *
+ * `border-solid` and `box-border` are load-bearing, not noise: this package builds Tailwind with
+ * `preflight: false`, so without them `border` computes to `border-style: none` (no border paints at
+ * all) and `box-sizing` falls back to `content-box` (a 400px max-width renders 402).
+ *
+ * Positioning (`z-index`, the floating transform, the top-layer props) deliberately stays with the
+ * caller, so the Gallery story can render the same surface statically in a grid.
+ */
+export declare const POPOVER_SURFACE_CLASSNAME = "box-border flex flex-col overflow-hidden rounded-lg border border-solid border-delta-300 bg-white text-delta-700 outline-none shadow-[0px_4px_40px_0px_#22213366]";
+export interface PopoverAnatomyProps {
+    dataTest: string;
+    title?: ReactNode;
+    titleId?: string;
+    children: ReactNode;
+    /** Left slot of the Figma "Reset filter" row — the "View results (3)" affordance. */
+    viewResultsAction?: ReactNode;
+    /** Right slot of the Figma "Reset filter" row. */
+    resetAction?: ReactNode;
+    /** The Figma "Actions" row — a single right-aligned outlined button. */
+    footerActions?: ReactNode;
+    closeLabel: string;
+    onClose: () => void;
+}
+/**
+ * Everything inside the popover surface: the content row (title + body + close column) and the two
+ * optional footer rows. Split out of `PopoverSheet` so the Gallery story can render every
+ * Title × Reset filter × Actions combination side by side — a real popover is portalled, anchored
+ * and mutually exclusive, so the variants can never be seen together through the live component.
+ *
+ * Not exported from the package barrel: this is an implementation detail, not public API.
+ */
+export declare const PopoverAnatomy: ({ dataTest, title, titleId, children, viewResultsAction, resetAction, footerActions, closeLabel, onClose, }: PopoverAnatomyProps) => JSX.Element;

package/dist/src/components/utils/popover/PopoverSheet.d.ts

@@ -0,0 +1,86 @@
+import { MouseEvent, ReactNode } from 'react';
+/** Spread on the trigger element. The ref is handed over separately — `StyledButton` takes `refLink`. */
+export interface PopoverTriggerProps {
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    'aria-expanded': boolean;
+    'aria-controls': string | undefined;
+    'aria-haspopup': 'dialog' | undefined;
+    'aria-describedby': string | undefined;
+}
+export interface PopoverTrigger {
+    /** Pass to `ref` on a native element, or to `refLink` on `StyledButton`. */
+    ref: (node: HTMLElement | null) => void;
+    triggerProps: PopoverTriggerProps;
+    isOpen: boolean;
+}
+/** Content API handed to every slot that can be a render-prop. */
+export interface PopoverContentApi {
+    close: () => void;
+}
+/** A slot that may need to close the surface — e.g. "View results (3)" or an Actions button. */
+export type PopoverSlot = ReactNode | ((api: PopoverContentApi) => ReactNode);
+/** @figmaNode wXrXt5uKNNzV2DnQCgyYZH#44531-233781 (Design-System · "_Popover") */
+export interface PopoverSheetProps {
+    /** @figmaProp none — test hook */
+    dataTest: string;
+    /** @figmaProp none — behavioral: the consumer owns the trigger element, this wires its aria + click */
+    renderTrigger: (trigger: PopoverTrigger) => ReactNode;
+    /**
+     * Chosen by content, not by breakpoint.
+     * @figmaProp none — `info` is a read-only container referenced by `aria-describedby`;
+     * `action` is a `role="dialog"` with a focus trap.
+     */
+    variant?: 'info' | 'action';
+    /** @figmaProp Title = ReactNode→true | undefined→false */
+    title?: ReactNode;
+    /** @figmaProp Slot — the body. The render-prop form receives `close()` for the Actions pattern. */
+    children: PopoverSlot;
+    /**
+     * Left slot of the Figma "Reset filter" row — the "View results (3)" affordance, which reports
+     * the live match count and closes the surface (the filter itself already applied).
+     * @figmaProp Reset filter = ReactNode→true | undefined→false — the 4px footer row, left slot
+     */
+    viewResultsAction?: PopoverSlot;
+    /** @figmaProp Reset filter = ReactNode→true | undefined→false — the 4px footer row, right slot */
+    resetAction?: PopoverSlot;
+    /** @figmaProp Actions = ReactNode→true | undefined→false — the 12px footer row, right-aligned */
+    footerActions?: PopoverSlot;
+    /**
+     * Result total for the standard "Vis resultater (N)" control, rendered when no `viewResultsAction`
+     * is given (see `formatResultsLabel`). On mobile the sheet also announces it from its own live
+     * region, because the list behind is inert. `null` = total unavailable.
+     * @figmaProp none — behavioral
+     */
+    resultCount?: number | null;
+    /** @figmaProp none — a11y: accessible name of the close control */
+    closeLabel?: string;
+    /** @figmaProp none — a11y: required when `variant='action'` and no `title` is given, so the dialog has a name */
+    ariaLabel?: string;
+    /** @figmaProp none — behavioral */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** @figmaProp none — style escape hatch, applied to the surface */
+    className?: string;
+}
+/**
+ * ASMA Design System **Popover** (ASMA-8183) — an anchored overlay with the DS surface, an optional
+ * title, a required close control and two optional footer rows.
+ *
+ * Two variants, chosen by content:
+ * - **info** — read-only. Plain container referenced by `aria-describedby`, focus moves to the
+ *   container on open, `Tab` leaves and closes.
+ * - **action** — interactive. `role="dialog"`, focus trapped, focus moves to the first control.
+ *   Covers both the Filter pattern (changes apply immediately, `Nullstill` clears) and the Actions
+ *   pattern (a list of buttons; activation closes via the `close()` render-prop argument).
+ *
+ * There is deliberately **no `role="menu"` and no arrow-key navigation** — everything inside is
+ * navigated with `Tab`, and menu semantics cannot coexist with the dialog model used by Filter.
+ * There is also **no arrow/anchor pointer**: the surface is edge-aligned at an 8px offset and
+ * proximity carries the relationship.
+ *
+ * Below 744px `action` renders as a {@link StyledBottomSheet} (ASMA-8184) — same props, same content;
+ * `info` stays anchored at every size, because for an explanation the link to its term is the point.
+ *
+ * Separate from {@link StyledPopover}, which stays as the MUI-parity positioning primitive its eight
+ * internal consumers still depend on; those migrate here gradually.
+ */
+export declare const PopoverSheet: ({ dataTest, renderTrigger, variant, title, children, viewResultsAction, resetAction, footerActions, resultCount, closeLabel, ariaLabel, onOpenChange, className, }: PopoverSheetProps) => JSX.Element;

package/dist/src/components/utils/popover/index.d.ts

@@ -1 +1,2 @@
 export * from './StyledPopover';
+export * from './PopoverSheet';

package/dist/src/components/utils/popover/story/PopoverCases.d.ts

@@ -0,0 +1 @@
+export declare const PopoverCases: () => JSX.Element;

package/dist/src/components/utils/popover/story/PopoverGallery.d.ts

@@ -0,0 +1 @@
+export declare const PopoverGallery: () => JSX.Element;

package/dist/src/components/utils/popover/story/popoverStoryFixtures.d.ts

@@ -0,0 +1,21 @@
+/** Sample data lifted from the Figma "Popover" frames so the stories read like the design. */
+export declare const KARTLEGGING: string[];
+export declare const EGENRAPPORTERING: string[];
+export interface FilterState {
+    kartlegging: string[];
+    egenrapportering: string | undefined;
+}
+export declare const EMPTY_FILTER: FilterState;
+export declare const noop: () => void;
+/** How many results the mock list reports for a given number of active criteria. */
+export declare const matchCountFor: (activeCount: number) => number;
+export declare const countActive: (filter: FilterState) => number;
+export declare const toggleInList: (list: string[], option: string) => string[];
+/** The Figma "Chips select" group — a heading plus a wrapping row of checkbox/radio chips. */
+export declare const ChipGroup: ({ heading, options, isSelected, onToggle, type, }: {
+    heading: string;
+    options: string[];
+    isSelected: (option: string) => boolean;
+    onToggle: (option: string) => void;
+    type: "checkbox" | "radio";
+}) => JSX.Element;

package/dist/src/hooks/useBodyScrollLock.hook.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Locks page scroll while `active` and puts the page back exactly where it was afterwards.
+ *
+ * `overflow: hidden` on both roots stops wheel and touch scrolling; the saved offset is restored on
+ * release because some mobile engines jump to the top when overflow is toggled back.
+ */
+export declare const useBodyScrollLock: (active: boolean) => void;

package/dist/src/hooks/useDebouncedValue.hook.d.ts

@@ -0,0 +1,2 @@
+/** `value`, but only once it has stopped changing for `delayMs`. The first value is returned at once. */
+export declare const useDebouncedValue: <T>(value: T, delayMs: number) => T;

package/dist/src/hooks/useMediaQuery.hook.d.ts

@@ -1,2 +1,4 @@
 export declare function makeMediaQueryStore(mediaQuery: string): () => boolean;
 export declare const useMobileMediaQuery: () => boolean;
+/** A phone in landscape: too short for a sheet capped at 90vh to leave a usable body. */
+export declare const useShortViewportMediaQuery: () => boolean;

package/dist/src/index.d.ts

@@ -44,6 +44,7 @@ export * from './components/navigation/listbox';
 export * from './components/utils/accordion';
 export * from './table';
 export * from './components/utils/popover';
+export * from './components/utils/bottom-sheet';
 export * from './components/utils/filter-menu';
 export * from './components/utils/copy-wrapper';
 export * from './components/utils/virtual-list';

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.88.1",
+    "version": "3.90.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",