asma-ui-core 3.89.0 → 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

@@ -27,7 +27,7 @@ export interface PopoverAnatomyProps {
 }
 /**
  * Everything inside the popover surface: the content row (title + body + close column) and the two
- * optional footer rows. Split out of `StyledPopoverV2` so the Gallery story can render every
+ * 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.
  *

package/dist/src/components/utils/popover/{StyledPopoverV2.d.ts → PopoverSheet.d.ts}

@@ -20,7 +20,7 @@ export interface PopoverContentApi {
 /** 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 StyledPopoverV2Props {
+export interface PopoverSheetProps {
     /** @figmaProp none — test hook */
     dataTest: string;
     /** @figmaProp none — behavioral: the consumer owns the trigger element, this wires its aria + click */
@@ -45,6 +45,13 @@ export interface StyledPopoverV2Props {
     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 */
@@ -70,7 +77,10 @@ export interface StyledPopoverV2Props {
  * 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 StyledPopoverV2: ({ dataTest, renderTrigger, variant, title, children, viewResultsAction, resetAction, footerActions, closeLabel, ariaLabel, onOpenChange, className, }: StyledPopoverV2Props) => JSX.Element;
+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,2 +1,2 @@
 export * from './StyledPopover';
-export * from './StyledPopoverV2';
+export * from './PopoverSheet';

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.89.0",
+    "version": "3.90.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",

package/dist/components/utils/popover/StyledPopoverV2.js

@@ -1,140 +0,0 @@
-import { cn as K } from "../../../helpers/cn.js";
-import { firstTabbable as Q } from "../../../helpers/focusable.js";
-import { TOP_LAYER_PROPS as J, TOP_LAYER_RESET_STYLE as Z, getOpenModalDialogAncestor as ee, shouldUsePopoverTopLayer as te, useTopLayerRef as re } from "../../../hooks/useTopLayer.hook.js";
-import { useMobileMediaQuery as oe } from "../../../hooks/useMediaQuery.hook.js";
-import { useFocusTrap as ne } from "../../../hooks/useFocusTrap.hook.js";
-import { PopoverAnatomy as ie } from "./PopoverAnatomy.js";
-import { useCallback as d, useEffect as P, useId as se, useRef as b, useState as u } from "react";
-import { Fragment as ae, jsx as _, jsxs as ce } from "react/jsx-runtime";
-import { FloatingPortal as le, autoUpdate as de, flip as ue, offset as fe, shift as pe, size as ge, useDismiss as me, useFloating as ve, useInteractions as he, useMergeRefs as xe } from "@floating-ui/react";
-var Pe = 240, be = {
-  info: 360,
-  action: 400
-}, _e = 0.6, M = "calc(100vw - 32px)", Se = ({ dataTest: f, renderTrigger: F, variant: A = "info", title: p, children: I, viewResultsAction: O, resetAction: w, footerActions: L, closeLabel: S = "Lukk", ariaLabel: H, onOpenChange: R, className: k }) => {
-  const s = se(), T = `${s}-title`, [r, C] = u(!1), [y, N] = u(), [D, W] = u(), g = oe(), t = A === "action", X = g && !t, a = d((e) => {
-    C(e), R?.(e);
-  }, [R]), { refs: m, floatingStyles: U, context: Y } = ve({
-    open: r,
-    onOpenChange: a,
-    placement: "bottom-start",
-    strategy: "fixed",
-    whileElementsMounted: de,
-    middleware: [
-      fe(8),
-      ...X ? [] : [ue({ padding: 8 })],
-      pe({ padding: 8 }),
-      ge({
-        padding: 8,
-        apply({ availableHeight: e }) {
-          W(Math.min(e, Math.round(window.innerHeight * _e)));
-        }
-      })
-    ]
-  }), { getFloatingProps: j } = he([me(Y, {
-    escapeKey: !0,
-    outsidePress: (e) => {
-      const n = c.current;
-      return !(n && e.target instanceof Node && n.contains(e.target));
-    }
-  })]), v = te(y), E = b(null), [o, q] = u(null), z = d((e) => {
-    E.current = e, q(e);
-  }, []), B = xe([re(m.setFloating, v), z]), c = b(null), V = d((e) => {
-    c.current = e, m.setReference(e);
-  }, [m]), i = d(() => {
-    a(!1);
-  }, [a]);
-  ne(r && t && o !== null, E), P(() => {
-    if (!o) return;
-    const e = requestAnimationFrame(() => {
-      (t ? Q(o) : o)?.focus({ preventScroll: !0 });
-    });
-    return () => {
-      cancelAnimationFrame(e);
-    };
-  }, [o, t]), P(() => {
-    if (!o || t) return;
-    const e = (n) => {
-      const x = n.relatedTarget;
-      x instanceof Node && (o.contains(x) || c.current?.contains(x)) || i();
-    };
-    return o.addEventListener("focusout", e), () => {
-      o.removeEventListener("focusout", e);
-    };
-  }, [
-    o,
-    t,
-    i
-  ]);
-  const h = b(!1);
-  P(() => {
-    if (r) {
-      h.current = !0;
-      return;
-    }
-    if (!h.current) return;
-    h.current = !1;
-    const e = c.current;
-    if (!e) return;
-    const n = requestAnimationFrame(() => {
-      document.activeElement === document.body && e.focus();
-    });
-    return () => {
-      cancelAnimationFrame(n);
-    };
-  }, [r]);
-  const $ = {
-    ref: V,
-    isOpen: r,
-    triggerProps: {
-      onClick: (e) => {
-        if (r) {
-          i();
-          return;
-        }
-        N(ee(e.currentTarget)), a(!0);
-      },
-      "aria-expanded": r,
-      "aria-controls": r ? s : void 0,
-      "aria-haspopup": t ? "dialog" : void 0,
-      "aria-describedby": !t && r ? s : void 0
-    }
-  }, l = (e) => typeof e == "function" ? e({ close: i }) : e, G = g ? M : be[A];
-  return /* @__PURE__ */ ce(ae, { children: [F($), r && /* @__PURE__ */ _(le, {
-    root: y,
-    children: /* @__PURE__ */ _("div", {
-      ...j(),
-      ref: B,
-      id: s,
-      "data-test": f,
-      "data-testid": f,
-      role: t ? "dialog" : void 0,
-      "aria-labelledby": t && p ? T : void 0,
-      "aria-label": t && !p ? H : void 0,
-      tabIndex: t ? void 0 : -1,
-      ...v ? J : {},
-      style: {
-        ...v ? Z : {},
-        ...U,
-        minWidth: Pe,
-        width: g ? M : void 0,
-        maxWidth: G,
-        maxHeight: D
-      },
-      className: K("z-[1300]", "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]", k),
-      children: /* @__PURE__ */ _(ie, {
-        dataTest: f,
-        title: p,
-        titleId: T,
-        viewResultsAction: l(O),
-        resetAction: l(w),
-        footerActions: l(L),
-        closeLabel: S,
-        onClose: i,
-        children: l(I)
-      })
-    })
-  })] });
-};
-export {
-  Se as StyledPopoverV2
-};