@purpur/library 9.10.0 → 10.0.0

package/dist/popover-B6ntmuEK.mjs

@@ -0,0 +1,614 @@
+import { jsx as c, Fragment as ae, jsxs as P } from "react/jsx-runtime";
+import { b as H } from "./button-mHw_J7JU.mjs";
+import { createContext as X, useContext as W, useState as R, useCallback as b, useMemo as ke, useEffect as j, forwardRef as U, useRef as M } from "react";
+import { a as Ne } from "./variables-DkCN2x27.mjs";
+import { C as ue, P as je, a as Me, A as De, R as de, T as Ee } from "./index-Fewa56cA.mjs";
+import { r as Ae } from "./close.es-BPmk2wkU.mjs";
+import { P as _e } from "./paragraph-CwAdFoIm.mjs";
+import "./ThemeProvider-BJ25_asg.mjs";
+import { u as Re } from "./useThemePortalContainer-D13Xx24N.mjs";
+import { c as z } from "./bind-CU-R61T-.mjs";
+import { H as Ie } from "./heading-BG7JTFO1.mjs";
+const V = X(null), Q = () => {
+  const t = W(V);
+  if (!t)
+    throw new Error("usePopoverFlow must be used within a PopoverFlow provider");
+  return t;
+}, K = () => W(V), Be = ({
+  children: t,
+  initialStep: e = 1,
+  onComplete: o,
+  onDismiss: r,
+  separatorText: s,
+  stepText: p,
+  backLabel: i,
+  nextLabel: a,
+  finishLabel: d,
+  openDelay: _ = 0
+}) => {
+  const [g, u] = R(e), [h, C] = R(/* @__PURE__ */ new Set()), v = b((f) => {
+    C((x) => {
+      const O = new Set(x);
+      return O.add(f), O;
+    });
+  }, []), D = b((f) => {
+    C((x) => {
+      const O = new Set(x);
+      return O.delete(f), O;
+    });
+  }, []), l = b(() => {
+    u((f) => {
+      const x = f + 1;
+      return x > h.size ? (o?.(), f) : x;
+    });
+  }, [h.size, o]), F = b(() => {
+    u((f) => Math.max(1, f - 1));
+  }, []), k = b(() => {
+    u(0), r?.();
+  }, [r]), y = ke(
+    () => ({
+      currentStep: g,
+      totalSteps: h.size,
+      next: l,
+      back: F,
+      dismiss: k,
+      registerStep: v,
+      unregisterStep: D,
+      separatorText: s,
+      stepText: p,
+      backLabel: i,
+      nextLabel: a,
+      finishLabel: d,
+      openDelay: _
+    }),
+    [
+      g,
+      h.size,
+      l,
+      F,
+      k,
+      v,
+      D,
+      s,
+      p,
+      i,
+      a,
+      d,
+      _
+    ]
+  );
+  return /* @__PURE__ */ c(V.Provider, { value: y, children: t });
+}, G = X(null), Y = () => W(G), he = X({ negative: !1 }), J = () => W(he), ze = 150, ce = {
+  MAX_MD: `(max-width: ${Ne})`
+}, Z = () => {
+  const t = window.matchMedia(ce.MAX_MD);
+  function e() {
+    r(t.matches);
+  }
+  const [o, r] = R(() => typeof window > "u" ? !1 : window.matchMedia(ce.MAX_MD).matches), s = b(() => {
+    let p;
+    return () => {
+      clearTimeout(p), p = setTimeout(() => e(), ze);
+    };
+  }, [e]);
+  return j(() => {
+    if (!(typeof window > "u"))
+      return window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
+  }, [s]), { isMdOrSmaller: o };
+}, ee = ({
+  children: t,
+  onClick: e
+}) => {
+  const { back: o } = Q(), { negative: r } = J(), { isMdOrSmaller: s } = Z();
+  return /* @__PURE__ */ c(
+    H,
+    {
+      size: "sm",
+      variant: "secondary",
+      onClick: () => {
+        e?.(), o();
+      },
+      negative: !r,
+      fullWidth: s,
+      children: t
+    }
+  );
+};
+ee.displayName = "PopoverBack";
+const te = ({
+  children: t,
+  asChild: e,
+  onClick: o,
+  variant: r = "primary",
+  dismiss: s = !0,
+  fullWidth: p
+}) => {
+  const i = K(), { isMdOrSmaller: a } = Z(), { negative: d } = J(), h = e ? t : /* @__PURE__ */ c(
+    H,
+    {
+      variant: r,
+      size: "sm",
+      fullWidth: p ?? a,
+      negative: !d,
+      onClick: () => {
+        o?.(), s && i?.dismiss();
+      },
+      children: t
+    }
+  );
+  return s ? /* @__PURE__ */ c(ue, { asChild: !0, children: h }) : h;
+};
+te.displayName = "PopoverButton";
+const Ke = "_highlightState1_1w9je_1", Le = "_fadeIn_1w9je_1", He = "_slideFromTop_1w9je_1", We = "_slideFromBottom_1w9je_1", Ye = "_slideFromLeft_1w9je_1", $e = "_slideFromRight_1w9je_1", qe = "_fadeOut_1w9je_1", Xe = "_slideToTop_1w9je_1", Ue = "_slideToBottom_1w9je_1", Ve = "_slideToLeft_1w9je_1", Qe = "_slideToRight_1w9je_1", L = {
+  "purpur-popover__trigger": "_purpur-popover__trigger_1w9je_1",
+  "purpur-popover__trigger-highlight": "_purpur-popover__trigger-highlight_1w9je_5",
+  "purpur-popover__trigger-highlight--state1": "_purpur-popover__trigger-highlight--state1_1w9je_14",
+  highlightState1: Ke,
+  "purpur-popover__trigger-highlight--negative": "_purpur-popover__trigger-highlight--negative_1w9je_29",
+  "purpur-popover__trigger-highlight--state2": "_purpur-popover__trigger-highlight--state2_1w9je_33",
+  "purpur-popover__inner": "_purpur-popover__inner_1w9je_45",
+  "purpur-popover__content": "_purpur-popover__content_1w9je_52",
+  fadeIn: Le,
+  slideFromTop: He,
+  slideFromBottom: We,
+  slideFromLeft: Ye,
+  slideFromRight: $e,
+  fadeOut: qe,
+  slideToTop: Xe,
+  slideToBottom: Ue,
+  slideToLeft: Ve,
+  slideToRight: Qe,
+  "purpur-popover__arrow": "_purpur-popover__arrow_1w9je_103",
+  "purpur-popover__body": "_purpur-popover__body_1w9je_106",
+  "purpur-popover__icon": "_purpur-popover__icon_1w9je_107",
+  "purpur-popover__steps": "_purpur-popover__steps_1w9je_108",
+  "purpur-popover__title": "_purpur-popover__title_1w9je_109",
+  "purpur-popover__content--negative": "_purpur-popover__content--negative_1w9je_112",
+  "purpur-popover__header-content": "_purpur-popover__header-content_1w9je_124",
+  "purpur-popover__close": "_purpur-popover__close_1w9je_137",
+  "purpur-popover__footer": "_purpur-popover__footer_1w9je_142",
+  "purpur-popover__footer-button-group": "_purpur-popover__footer-button-group_1w9je_155"
+}, Ge = z.bind(L), ge = () => {
+  const t = Q(), o = Y()?.walkthroughStep || t.currentStep, { totalSteps: r, separatorText: s, stepText: p } = t;
+  return /* @__PURE__ */ c(ae, { children: /* @__PURE__ */ P(
+    _e,
+    {
+      className: Ge("purpur-popover__steps"),
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: [
+        p,
+        " ",
+        o,
+        " ",
+        s,
+        " ",
+        r
+      ]
+    }
+  ) });
+};
+ge.displayName = "PopoverSteps";
+const le = z.bind(L), oe = ({ children: t, className: e }) => {
+  const o = K(), r = Y(), s = o && r && r.walkthroughStep > 0;
+  return /* @__PURE__ */ P("div", { className: le("purpur-popover__footer", e), children: [
+    s && /* @__PURE__ */ c(ge, {}),
+    /* @__PURE__ */ c("div", { className: le("purpur-popover__footer-button-group"), children: t })
+  ] });
+};
+oe.displayName = "PopoverFooter";
+const $ = z.bind(L), fe = U(
+  ({ title: t, icon: e }, o) => /* @__PURE__ */ P("div", { ref: o, className: $("purpur-popover__header-content"), children: [
+    e && /* @__PURE__ */ c("span", { className: $("purpur-popover__icon"), children: e }),
+    /* @__PURE__ */ c(
+      Ie,
+      {
+        tag: "h2",
+        variant: "title-100",
+        className: $("purpur-popover__title"),
+        id: "popover-heading",
+        children: t
+      }
+    )
+  ] })
+);
+fe.displayName = "PopoverHeader";
+const re = ({
+  children: t,
+  onClick: e
+}) => {
+  const { next: o } = Q(), { negative: r } = J(), { isMdOrSmaller: s } = Z();
+  return /* @__PURE__ */ c(
+    H,
+    {
+      size: "sm",
+      variant: "primary",
+      onClick: () => {
+        e?.(), o();
+      },
+      negative: !r,
+      fullWidth: s,
+      children: t
+    }
+  );
+};
+re.displayName = "PopoverNext";
+const A = z.bind(L), me = U(
+  ({
+    children: t,
+    className: e,
+    beakPosition: o = "down",
+    align: r = "center",
+    alignOffset: s = 0,
+    sideOffset: p = 5,
+    // How close or far the popover is from the trigger
+    negative: i = !1,
+    closeIconAriaLabel: a,
+    title: d,
+    icon: _,
+    body: g,
+    onAction: u,
+    zIndex: h = 210,
+    container: C,
+    ...v
+  }, D) => {
+    const l = K(), F = Y(), k = M(null), y = M(!1), f = Re(), x = C === void 0 ? f : C ?? void 0, be = {
+      up: "bottom",
+      right: "left",
+      down: "top",
+      left: "right",
+      none: "bottom"
+      // Default position when no arrow
+    }[o], xe = o !== "none", ne = (n) => Array.from(n.querySelectorAll("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])")).filter(
+      (w) => !w.hasAttribute("aria-hidden")
+    ), se = (n, m, w) => {
+      const E = ne(document.body), I = E.indexOf(m);
+      if (I === -1)
+        return;
+      const S = w === "next" ? 1 : -1;
+      for (let N = I + S; N >= 0 && N < E.length; N += S) {
+        const B = E[N];
+        if (!n.contains(B)) {
+          B.focus();
+          return;
+        }
+      }
+    };
+    let ie = t;
+    if (l && !t) {
+      const n = F?.walkthroughStep || l.currentStep, m = n === 1, w = n === l.totalSteps;
+      ie = /* @__PURE__ */ P(oe, { children: [
+        !m && /* @__PURE__ */ c(ee, { onClick: () => u?.({ type: "back", step: n }), children: l.backLabel }),
+        w ? /* @__PURE__ */ c(
+          te,
+          {
+            onClick: () => u?.({ type: "finish", step: n }),
+            dismiss: !0,
+            children: l.finishLabel
+          }
+        ) : /* @__PURE__ */ c(re, { onClick: () => u?.({ type: "next", step: n }), children: l.nextLabel })
+      ] });
+    }
+    const Ce = (n) => {
+      n.preventDefault();
+      const m = n.currentTarget, w = k.current?.querySelector(
+        "#popover-heading"
+      );
+      setTimeout(() => {
+        if (l && w) {
+          w.setAttribute("tabindex", "-1"), w.focus();
+          return;
+        }
+        m.setAttribute("tabindex", "-1"), m.focus();
+      }, 0), v.onOpenAutoFocus?.(n);
+    }, ye = (n) => {
+      if (n.key !== "Tab") {
+        v.onKeyDown?.(n);
+        return;
+      }
+      const m = n.currentTarget, w = ne(m);
+      if (w.length === 0) {
+        v.onKeyDown?.(n);
+        return;
+      }
+      const E = w[0], I = w[w.length - 1], S = document.activeElement, N = S === E, B = S === I, pe = S !== null && m.contains(S) && S.tabIndex === -1;
+      if (!l) {
+        S !== null && (n.shiftKey && N ? (n.preventDefault(), se(m, S, "previous")) : !n.shiftKey && B && (n.preventDefault(), se(m, S, "next"))), v.onKeyDown?.(n);
+        return;
+      }
+      n.shiftKey && (N || pe) ? (n.preventDefault(), I.focus()) : !n.shiftKey && (B || pe) && (n.preventDefault(), E.focus()), v.onKeyDown?.(n);
+    }, Pe = (n) => {
+      l && !y.current && n.preventDefault(), y.current && (y.current = !1), v.onCloseAutoFocus?.(n);
+    }, Fe = (n) => {
+      l && (y.current = !0, n.preventDefault()), u?.({ type: "dismiss", step: l?.currentStep }), l?.dismiss();
+    }, Oe = (n) => {
+      l && (y.current = !0, n.preventDefault()), u?.({ type: "dismiss", step: l?.currentStep }), l?.dismiss();
+    }, Te = (n) => {
+      if (F?.disableClickOutside) {
+        n.preventDefault();
+        return;
+      }
+      if (l) {
+        const m = n.target;
+        m.closest("[role='dialog']") || m.closest(".purpur-popover__trigger") || m.closest("button[aria-haspopup='dialog']") || (u?.({ type: "dismiss", step: l.currentStep }), setTimeout(() => {
+          l.dismiss();
+        }, 0));
+      }
+    };
+    return /* @__PURE__ */ c(je, { container: x, children: /* @__PURE__ */ P(
+      Me,
+      {
+        "data-testid": "popover-content",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": v["aria-label"] ? void 0 : "popover-heading",
+        ref: D,
+        side: be,
+        sideOffset: p,
+        align: r,
+        alignOffset: s,
+        style: {
+          "--popover-z-index": h
+        },
+        className: A(
+          "purpur-popover__content",
+          { "purpur-popover__content--negative": i },
+          e
+        ),
+        onOpenAutoFocus: Ce,
+        onCloseAutoFocus: Pe,
+        onKeyDown: ye,
+        onEscapeKeyDown: Oe,
+        onInteractOutside: Te,
+        ...v,
+        children: [
+          /* @__PURE__ */ P(he.Provider, { value: { negative: i }, children: [
+            /* @__PURE__ */ P("div", { className: A("purpur-popover__inner"), children: [
+              /* @__PURE__ */ c(fe, { ref: k, title: d, icon: _ }),
+              /* @__PURE__ */ c(_e, { className: A("purpur-popover__body"), children: g })
+            ] }),
+            ie,
+            /* @__PURE__ */ c(ue, { asChild: !0, onClick: Fe, children: /* @__PURE__ */ c(
+              H,
+              {
+                variant: "text",
+                size: "sm",
+                "aria-label": a,
+                className: A("purpur-popover__close"),
+                negative: !i,
+                iconOnly: !0,
+                children: /* @__PURE__ */ c(Ae, { size: "xs", className: A("purpur-popover__icon") })
+              }
+            ) })
+          ] }),
+          xe && /* @__PURE__ */ c(
+            De,
+            {
+              className: A("purpur-popover__arrow"),
+              "aria-hidden": "true",
+              tabIndex: -1
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+me.displayName = "PopoverContent";
+const ve = ({
+  children: t,
+  open: e,
+  defaultOpen: o = !1,
+  onOpenChange: r,
+  disableClickOutside: s,
+  ...p
+}) => {
+  const [i, a] = R(o), d = e !== void 0, _ = d ? e : i;
+  return /* @__PURE__ */ c(de, { open: _, onOpenChange: (u) => {
+    d || a(u), r?.(u);
+  }, ...p, children: /* @__PURE__ */ c(
+    G.Provider,
+    {
+      value: {
+        isOpen: _,
+        walkthroughStep: 0,
+        disableClickOutside: s
+      },
+      children: t
+    }
+  ) });
+};
+ve.displayName = "PopoverStandalone";
+const Je = (t) => {
+  const e = M(null), o = b(() => {
+    e.current && (cancelAnimationFrame(e.current), e.current = null);
+  }, []);
+  return { scrollToElement: b(
+    (s, p = 600) => {
+      const i = window.matchMedia("(prefers-reduced-motion: reduce)").matches, a = s.getBoundingClientRect(), d = a.top + window.pageYOffset, _ = a.height, g = window.innerHeight;
+      let u = d - g / 2 + _ / 2;
+      const h = document.documentElement.scrollHeight, C = Math.max(0, h - g);
+      if (u = Math.max(0, Math.min(u, C)), i) {
+        window.scrollTo(0, u), t?.();
+        return;
+      }
+      const v = window.pageYOffset, D = u - v, l = performance.now(), F = (k) => {
+        const y = k - l, f = Math.min(y / p, 1), x = f < 0.5 ? 2 * f * f : 1 - Math.pow(-2 * f + 2, 2) / 2, O = v + D * x;
+        window.scrollTo(0, O), f < 1 ? e.current = requestAnimationFrame(F) : (e.current = null, t?.());
+      };
+      o(), e.current = requestAnimationFrame(F);
+    },
+    [t, o]
+  ), cancelScroll: o };
+};
+function Ze(t) {
+  const e = M(null), o = Y(), r = K(), s = M(!1), { scrollToElement: p, cancelScroll: i } = Je(o?.onScrollComplete);
+  return j(() => {
+    typeof t == "function" ? t(e.current) : t && (t.current = e.current);
+  }, [t]), j(() => {
+    if (r && o?.walkthroughStep !== void 0 && r.currentStep === o.walkthroughStep && e.current && !s.current) {
+      const d = e.current, _ = d.getBoundingClientRect(), g = 100;
+      _.top >= -g && _.bottom <= window.innerHeight + g && _.left >= -g && _.right <= window.innerWidth + g ? o?.onScrollComplete?.() : (o?.onScrollStart?.(), p(d)), s.current = !0;
+    } else r?.currentStep !== o?.walkthroughStep && (s.current = !1, i());
+  }, [r?.currentStep, o?.walkthroughStep, r, p, i, o]), j(() => {
+    e.current && e.current.removeAttribute("aria-expanded");
+  }, [o?.isOpen]), j(() => i, [i]), { triggerRef: e, context: o };
+}
+const q = z.bind(L), we = U(
+  ({ children: t, className: e, highlight: o = !0, negative: r = !1, ...s }, p) => {
+    const { triggerRef: i, context: a } = Ze(p);
+    return /* @__PURE__ */ P(
+      "div",
+      {
+        className: q(
+          "purpur-popover__trigger",
+          { "purpur-popover__trigger--highlight": a?.isOpen && o },
+          e
+        ),
+        children: [
+          a?.isOpen && o && /* @__PURE__ */ P(ae, { children: [
+            /* @__PURE__ */ c(
+              "div",
+              {
+                className: q(
+                  "purpur-popover__trigger-highlight",
+                  "purpur-popover__trigger-highlight--state1",
+                  { "purpur-popover__trigger-highlight--negative": r }
+                ),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "div",
+              {
+                className: q(
+                  "purpur-popover__trigger-highlight",
+                  "purpur-popover__trigger-highlight--state2",
+                  { "purpur-popover__trigger-highlight--negative": r }
+                ),
+                "aria-hidden": "true"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ c(
+            Ee,
+            {
+              ref: i,
+              asChild: !0,
+              "aria-haspopup": "dialog",
+              ...s,
+              children: t
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+we.displayName = "PopoverTrigger";
+function et(t) {
+  const e = K(), [o, r] = R(!1), [s, p] = R(!1), i = M(null), a = M(0);
+  j(() => e ? (e.registerStep(t), () => e.unregisterStep(t)) : () => {
+  }, [e, t]);
+  const d = e?.currentStep === t, _ = b(() => {
+    p(!0);
+  }, []), g = b(() => {
+    if (p(!1), d) {
+      const h = e.openDelay;
+      i.current = window.setTimeout(() => {
+        r(!0), a.current = Date.now();
+      }, h);
+    }
+  }, [d, e]);
+  j(() => {
+    if (i.current && (clearTimeout(i.current), i.current = null), d) {
+      if (!s) {
+        const h = e.openDelay;
+        i.current = window.setTimeout(() => {
+          r(!0), a.current = Date.now();
+        }, h);
+      }
+    } else
+      r(!1), p(!1), a.current = 0;
+    return () => {
+      i.current && (clearTimeout(i.current), i.current = null);
+    };
+  }, [d, s, e]);
+  const u = b(
+    (h, C) => {
+      if (C?.(h), !h && o && e && e.currentStep === t) {
+        if (Date.now() - a.current < 10 || i.current !== null)
+          return;
+        e.dismiss();
+      }
+    },
+    [o, e, t]
+  );
+  return {
+    actuallyOpen: o,
+    onScrollStart: _,
+    onScrollComplete: g,
+    handleOpenChange: u
+  };
+}
+const Se = ({
+  children: t,
+  step: e,
+  onOpenChange: o,
+  disableClickOutside: r = !0,
+  ...s
+}) => {
+  const { actuallyOpen: p, onScrollStart: i, onScrollComplete: a, handleOpenChange: d } = et(e);
+  return /* @__PURE__ */ c(
+    de,
+    {
+      modal: !0,
+      open: p,
+      onOpenChange: (_) => d(_, o),
+      ...s,
+      children: /* @__PURE__ */ c(
+        G.Provider,
+        {
+          value: {
+            isOpen: p,
+            walkthroughStep: e,
+            onScrollStart: i,
+            onScrollComplete: a,
+            disableClickOutside: r
+          },
+          children: t
+        }
+      )
+    }
+  );
+};
+Se.displayName = "PopoverWalkthrough";
+const T = (t) => {
+  const { multistep: e = !1, disableClickOutside: o, ...r } = t;
+  return e ? /* @__PURE__ */ c(
+    Se,
+    {
+      ...r,
+      disableClickOutside: o ?? !0
+    }
+  ) : /* @__PURE__ */ c(
+    ve,
+    {
+      ...r,
+      disableClickOutside: o
+    }
+  );
+};
+T.Back = ee;
+T.Button = te;
+T.Content = me;
+T.Flow = Be;
+T.Footer = oe;
+T.Next = re;
+T.Trigger = we;
+T.displayName = "Popover";
+export {
+  T as P
+};
+//# sourceMappingURL=popover-B6ntmuEK.mjs.map