asma-ui-core 3.89.0 → 3.90.0

package/dist/components/utils/bottom-sheet/StyledBottomSheet.js

@@ -0,0 +1,137 @@
+import { cn as n } from "../../../helpers/cn.js";
+import { CloseIcon as A } from "../../icons/close-icon/CloseIcon.js";
+import { IndeterminateIcon as H } from "../../icons/indeterminate-icon/IndeterminateIcon.js";
+import { registerOpenModalDialog as q } from "../../../hooks/useTopLayer.hook.js";
+import { StyledButton as I } from "../../inputs/button/StyledButton.js";
+import { useShortViewportMediaQuery as G } from "../../../hooks/useMediaQuery.hook.js";
+import { useDebouncedValue as P } from "../../../hooks/useDebouncedValue.hook.js";
+import { useFocusTrap as Q } from "../../../hooks/useFocusTrap.hook.js";
+import { formatResultsLabel as Y } from "./formatResultsLabel.js";
+import { useBodyScrollLock as z } from "../../../hooks/useBodyScrollLock.hook.js";
+import J from "./StyledBottomSheet.module.js";
+import { useDragToDismiss as K } from "./useDragToDismiss.hook.js";
+import { useEffect as W, useId as X, useLayoutEffect as Z, useRef as d, useState as ee } from "react";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+var te = 500, xe = ({ dataTest: r, id: D, open: a, onClose: o, title: s, ariaLabel: L, children: j, viewResultsAction: p, resetAction: F, footerActions: M, resultCount: h, closeLabel: _ = "Lukk", className: C }) => {
+  const b = X(), m = d(null), x = d(null), v = d(null), [u, y] = ee(!1), O = G(), g = d(o);
+  W(() => {
+    g.current = o;
+  }, [o]);
+  const { dragHandleProps: $, dragOffset: w } = K(x, () => {
+    g.current("drag");
+  });
+  z(a), Q(a, m), Z(() => {
+    const e = m.current;
+    if (!a || !e) return;
+    v.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.open || e.showModal(), e.focus({ preventScroll: !0 });
+    const U = requestAnimationFrame(() => {
+      y(!0);
+    }), V = q(e);
+    return () => {
+      cancelAnimationFrame(U), V(), y(!1), e.open && e.close();
+      const E = v.current;
+      E?.isConnected && E.focus({ preventScroll: !0 });
+    };
+  }, [a]);
+  const S = Y(P(h, te));
+  if (!a) return null;
+  const T = { close: () => {
+    o("action");
+  } }, l = (e) => typeof e == "function" ? e(T) : e, N = h !== void 0, f = p !== void 0 ? l(p) : N ? /* @__PURE__ */ t(I, {
+    dataTest: `${r}-view-results`,
+    type: "button",
+    variant: "text",
+    onClick: () => {
+      o("viewResults");
+    },
+    children: S
+  }) : void 0, k = l(F), c = l(M), R = !!(f ?? k), B = w > 0;
+  return /* @__PURE__ */ i("dialog", {
+    ref: m,
+    id: D,
+    tabIndex: -1,
+    "aria-modal": "true",
+    "aria-labelledby": s ? b : void 0,
+    "aria-label": s ? void 0 : L,
+    "data-test": r,
+    "data-testid": r,
+    onCancel: (e) => {
+      e.preventDefault(), o("escape");
+    },
+    className: n(J.StyledBottomSheet, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none flex-col items-center justify-end overflow-hidden border-0 bg-transparent p-0 outline-none open:flex"),
+    children: [/* @__PURE__ */ t("div", {
+      "aria-hidden": "true",
+      "data-testid": `${r}-scrim`,
+      onClick: () => {
+        o("scrim");
+      },
+      className: n("absolute inset-0 bg-[#626e7eb2] transition-opacity duration-[250ms] ease-out motion-reduce:duration-150", u ? "opacity-100" : "opacity-0")
+    }), /* @__PURE__ */ i("div", {
+      ref: x,
+      "data-state": u ? "open" : "closed",
+      style: B ? { transform: `translateY(${w}px)` } : void 0,
+      className: n("relative box-border flex w-full max-w-[640px] flex-col border border-solid border-delta-300 bg-white text-delta-700 outline-none", O ? "h-full max-h-none rounded-none" : "max-h-[90dvh] rounded-t-[28px]", !B && ["ease-out motion-safe:transition-transform motion-safe:duration-[250ms] motion-reduce:transition-opacity motion-reduce:duration-150", u ? "translate-y-0 opacity-100" : "motion-safe:translate-y-full motion-reduce:opacity-0"], C),
+      children: [
+        /* @__PURE__ */ i("div", {
+          className: "border-b-solid shrink-0 border-b border-delta-200 pb-2",
+          children: [/* @__PURE__ */ i("div", {
+            ...$,
+            className: "relative flex h-12 touch-none items-center gap-2 px-2",
+            children: [
+              /* @__PURE__ */ t("div", { className: "min-w-0 flex-1" }),
+              /* @__PURE__ */ t(I, {
+                dataTest: `${r}-close`,
+                variant: "textGray",
+                type: "button",
+                "aria-label": _,
+                onClick: () => {
+                  o("closeButton");
+                },
+                startIcon: /* @__PURE__ */ t(A, {
+                  width: 24,
+                  height: 24
+                })
+              }),
+              /* @__PURE__ */ t(H, {
+                "aria-hidden": "true",
+                focusable: "false",
+                width: 24,
+                height: 24,
+                className: "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-delta-800"
+              })
+            ]
+          }), s && /* @__PURE__ */ t("div", {
+            id: b,
+            className: "truncate px-4 text-lg font-semibold leading-7 text-delta-800",
+            children: s
+          })]
+        }),
+        /* @__PURE__ */ t("div", {
+          className: n("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain pl-4 pr-2 pt-2", R || c ? "pb-2" : "pb-[max(0.5rem,env(safe-area-inset-bottom))]"),
+          children: l(j)
+        }),
+        R && /* @__PURE__ */ i("div", {
+          className: n("border-t-solid flex shrink-0 items-start border-t border-delta-200 bg-white p-1", f ? "justify-between" : "justify-end", !c && "pb-[max(0.25rem,env(safe-area-inset-bottom))]"),
+          children: [
+            f,
+            k,
+            N && /* @__PURE__ */ t("span", {
+              className: "sr-only",
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: S
+            })
+          ]
+        }),
+        c && /* @__PURE__ */ t("div", {
+          className: "flex shrink-0 flex-col items-end bg-white p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+          children: c
+        })
+      ]
+    })]
+  });
+};
+export {
+  xe as StyledBottomSheet
+};

package/dist/components/utils/bottom-sheet/StyledBottomSheet.module.js

@@ -0,0 +1,4 @@
+var t = "_StyledBottomSheet_11e4g_1", e = { StyledBottomSheet: t };
+export {
+  e as default
+};

package/dist/components/utils/bottom-sheet/formatResultsLabel.js

@@ -0,0 +1,4 @@
+var e = 9999, t = (r) => r == null ? "Vis resultater" : r === 0 ? "Ingen treff" : r > e ? `Vis resultater (${e}+)` : `Vis resultater (${r})`;
+export {
+  t as formatResultsLabel
+};

package/dist/components/utils/bottom-sheet/useDragToDismiss.hook.js

@@ -0,0 +1,40 @@
+import { useRef as c, useState as l } from "react";
+var p = 0.3, f = (i, u) => {
+  const [a, n] = l(0), e = c(null), o = (r, t) => {
+    e.current?.pointerId === r.pointerId && (e.current = null, r.currentTarget.hasPointerCapture(r.pointerId) && r.currentTarget.releasePointerCapture(r.pointerId), n(0), t && u());
+  };
+  return {
+    dragOffset: a,
+    dragHandleProps: {
+      onPointerDown: (r) => {
+        if (r.pointerType === "mouse" && r.button !== 0 || r.target instanceof Element && r.target.closest("button")) return;
+        const t = i.current;
+        if (t) {
+          e.current = {
+            pointerId: r.pointerId,
+            startY: r.clientY,
+            height: t.getBoundingClientRect().height
+          };
+          try {
+            r.currentTarget.setPointerCapture(r.pointerId);
+          } catch {
+          }
+        }
+      },
+      onPointerMove: (r) => {
+        const t = e.current;
+        t?.pointerId === r.pointerId && n(Math.max(0, r.clientY - t.startY));
+      },
+      onPointerUp: (r) => {
+        const t = e.current, s = t ? r.clientY - t.startY : 0;
+        o(r, t !== null && s > t.height * p);
+      },
+      onPointerCancel: (r) => {
+        o(r, !1);
+      }
+    }
+  };
+};
+export {
+  f as useDragToDismiss
+};

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

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

package/dist/hooks/useBodyScrollLock.hook.js

@@ -0,0 +1,13 @@
+import { useEffect as n } from "react";
+var c = (l) => {
+  n(() => {
+    if (!l) return;
+    const { body: o, documentElement: e } = document, r = window.scrollY, t = o.style.overflow, s = e.style.overflow;
+    return o.style.overflow = "hidden", e.style.overflow = "hidden", () => {
+      o.style.overflow = t, e.style.overflow = s, window.scrollTo(window.scrollX, r);
+    };
+  }, [l]);
+};
+export {
+  c as useBodyScrollLock
+};

package/dist/hooks/useDebouncedValue.hook.js

@@ -0,0 +1,15 @@
+import { useEffect as u, useState as c } from "react";
+var s = (e, t) => {
+  const [o, r] = c(e);
+  return u(() => {
+    const n = window.setTimeout(() => {
+      r(e);
+    }, t);
+    return () => {
+      window.clearTimeout(n);
+    };
+  }, [e, t]), o;
+};
+export {
+  s as useDebouncedValue
+};

package/dist/hooks/useMediaQuery.hook.js

@@ -1,19 +1,20 @@
 import { useSyncExternalStore as o } from "react";
-function u(t) {
-  function r() {
+function n(t) {
+  function i() {
     return window.matchMedia(t).matches;
   }
-  function i(e) {
-    const n = window.matchMedia(t);
-    return n.addEventListener("change", e), () => {
-      n.removeEventListener("change", e);
+  function a(e) {
+    const r = window.matchMedia(t);
+    return r.addEventListener("change", e), () => {
+      r.removeEventListener("change", e);
     };
   }
   return function() {
-    return o(i, r);
+    return o(a, i);
   };
 }
-var s = u("(max-width: 743px)");
+var s = n("(max-width: 743px)"), d = n("(max-height: 480px)");
 export {
-  s as useMobileMediaQuery
+  s as useMobileMediaQuery,
+  d as useShortViewportMediaQuery
 };