@alixpartners/ui-components 2.6.0 → 2.6.2

package/dist/components/Dialog/Dialog.js

@@ -1,283 +1,315 @@
-import { jsx as r, Fragment as De, jsxs as m } from "react/jsx-runtime";
-import * as s from "react";
-import { useState as me } from "react";
-import S from "../Button/Button.js";
-import ve from "../Icon/Icon.js";
-import { u as he, a as C, P as h, c as v, b as Re, e as ye } from "../../index-B4szHVNJ.js";
-import { u as E } from "../../index-6DGSlWJb.js";
-import { P as Pe, u as Oe, D as Ne } from "../../index-kgC_DL6e.js";
-import { R as be, h as Ie, u as Ee, F as Ce } from "../../index-BVZdJVFB.js";
-import { P as x } from "../../index-Bq1FiX6B.js";
-import '../../assets/Dialog.css';var P = "Dialog", [k] = Re(P), [xe, d] = k(P), L = (e) => {
+import { jsx as n, jsxs as _, Fragment as W } from "react/jsx-runtime";
+import * as l from "react";
+import { useState as Ne } from "react";
+import { u as be, d as O, P as h, c as v, b as Ee, e as Ie, f as Pe } from "../../index-z_kiwVc3.js";
+import { u as C } from "../../index-C2s_VtSb.js";
+import { P as Ce, D as Oe } from "../../index-CmGGeUr0.js";
+import { R as xe, h as Ae, u as Te, F as Me } from "../../index-CFqDEbIR.js";
+import { P as x } from "../../index-CfIcUHKK.js";
+import { c as we } from "../../clsx-OuTLNxxd.js";
+import k from "../Button/Button.js";
+import Fe from "../Icon/Icon.js";
+import '../../assets/Dialog.css';var N = "Dialog", [G] = Ee(N), [Se, u] = G(N), L = (e) => {
   const {
-    __scopeDialog: n,
-    children: i,
-    open: o,
-    defaultOpen: a,
-    onOpenChange: t,
-    modal: l = !0
-  } = e, c = s.useRef(null), g = s.useRef(null), [p, D] = he({
-    prop: o,
-    defaultProp: a ?? !1,
-    onChange: t,
-    caller: P
+    __scopeDialog: a,
+    children: r,
+    open: t,
+    defaultOpen: i,
+    onOpenChange: o,
+    modal: s = !0
+  } = e, c = l.useRef(null), g = l.useRef(null), [f, D] = be({
+    prop: t,
+    defaultProp: i ?? !1,
+    onChange: o,
+    caller: N
   });
-  return /* @__PURE__ */ r(
-    xe,
+  return /* @__PURE__ */ n(
+    Se,
     {
-      scope: n,
+      scope: a,
       triggerRef: c,
       contentRef: g,
-      contentId: E(),
-      titleId: E(),
-      descriptionId: E(),
-      open: p,
+      contentId: C(),
+      titleId: C(),
+      descriptionId: C(),
+      open: f,
       onOpenChange: D,
-      onOpenToggle: s.useCallback(() => D((O) => !O), [D]),
-      modal: l,
-      children: i
+      onOpenToggle: l.useCallback(() => D((b) => !b), [D]),
+      modal: s,
+      children: r
     }
   );
 };
-L.displayName = P;
-var G = "DialogTrigger", z = s.forwardRef(
-  (e, n) => {
-    const { __scopeDialog: i, ...o } = e, a = d(G, i), t = C(n, a.triggerRef);
-    return /* @__PURE__ */ r(
+L.displayName = N;
+var $ = "DialogTrigger", j = l.forwardRef(
+  (e, a) => {
+    const { __scopeDialog: r, ...t } = e, i = u($, r), o = O(a, i.triggerRef);
+    return /* @__PURE__ */ n(
       h.button,
       {
         type: "button",
         "aria-haspopup": "dialog",
-        "aria-expanded": a.open,
-        "aria-controls": a.open ? a.contentId : void 0,
-        "data-state": M(a.open),
-        ...o,
-        ref: t,
-        onClick: v(e.onClick, a.onOpenToggle)
+        "aria-expanded": i.open,
+        "aria-controls": i.contentId,
+        "data-state": M(i.open),
+        ...t,
+        ref: o,
+        onClick: v(e.onClick, i.onOpenToggle)
       }
     );
   }
 );
-z.displayName = G;
-var A = "DialogPortal", [Ae, K] = k(A, {
+j.displayName = $;
+var A = "DialogPortal", [We, z] = G(A, {
   forceMount: void 0
-}), j = (e) => {
-  const { __scopeDialog: n, forceMount: i, children: o, container: a } = e, t = d(A, n);
-  return /* @__PURE__ */ r(Ae, { scope: n, forceMount: i, children: s.Children.map(o, (l) => /* @__PURE__ */ r(x, { present: i || t.open, children: /* @__PURE__ */ r(Pe, { asChild: !0, container: a, children: l }) })) });
+}), B = (e) => {
+  const { __scopeDialog: a, forceMount: r, children: t, container: i } = e, o = u(A, a);
+  return /* @__PURE__ */ n(We, { scope: a, forceMount: r, children: l.Children.map(t, (s) => /* @__PURE__ */ n(x, { present: r || o.open, children: /* @__PURE__ */ n(Ce, { asChild: !0, container: i, children: s }) })) });
 };
-j.displayName = A;
-var y = "DialogOverlay", H = s.forwardRef(
-  (e, n) => {
-    const i = K(y, e.__scopeDialog), { forceMount: o = i.forceMount, ...a } = e, t = d(y, e.__scopeDialog);
-    return t.modal ? /* @__PURE__ */ r(x, { present: o || t.open, children: /* @__PURE__ */ r(Fe, { ...a, ref: n }) }) : null;
+B.displayName = A;
+var y = "DialogOverlay", K = l.forwardRef(
+  (e, a) => {
+    const r = z(y, e.__scopeDialog), { forceMount: t = r.forceMount, ...i } = e, o = u(y, e.__scopeDialog);
+    return o.modal ? /* @__PURE__ */ n(x, { present: t || o.open, children: /* @__PURE__ */ n(Ge, { ...i, ref: a }) }) : null;
   }
 );
-H.displayName = y;
-var Me = ye("DialogOverlay.RemoveScroll"), Fe = s.forwardRef(
-  (e, n) => {
-    const { __scopeDialog: i, ...o } = e, a = d(y, i), t = Oe(), l = C(n, t);
+K.displayName = y;
+var ke = Ie("DialogOverlay.RemoveScroll"), Ge = l.forwardRef(
+  (e, a) => {
+    const { __scopeDialog: r, ...t } = e, i = u(y, r);
     return (
       // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
       // ie. when `Overlay` and `Content` are siblings
-      /* @__PURE__ */ r(be, { as: Me, allowPinchZoom: !0, shards: [a.contentRef], children: /* @__PURE__ */ r(
+      /* @__PURE__ */ n(xe, { as: ke, allowPinchZoom: !0, shards: [i.contentRef], children: /* @__PURE__ */ n(
         h.div,
         {
-          "data-state": M(a.open),
-          ...o,
-          ref: l,
-          style: { pointerEvents: "auto", ...o.style }
+          "data-state": M(i.open),
+          ...t,
+          ref: a,
+          style: { pointerEvents: "auto", ...t.style }
         }
       ) })
     );
   }
-), _ = "DialogContent", B = s.forwardRef(
-  (e, n) => {
-    const i = K(_, e.__scopeDialog), { forceMount: o = i.forceMount, ...a } = e, t = d(_, e.__scopeDialog);
-    return /* @__PURE__ */ r(x, { present: o || t.open, children: t.modal ? /* @__PURE__ */ r(we, { ...a, ref: n }) : /* @__PURE__ */ r(Te, { ...a, ref: n }) });
+), m = "DialogContent", H = l.forwardRef(
+  (e, a) => {
+    const r = z(m, e.__scopeDialog), { forceMount: t = r.forceMount, ...i } = e, o = u(m, e.__scopeDialog);
+    return /* @__PURE__ */ n(x, { present: t || o.open, children: o.modal ? /* @__PURE__ */ n(Le, { ...i, ref: a }) : /* @__PURE__ */ n($e, { ...i, ref: a }) });
   }
 );
-B.displayName = _;
-var we = s.forwardRef(
-  (e, n) => {
-    const i = d(_, e.__scopeDialog), o = s.useRef(null), a = C(n, i.contentRef, o);
-    return s.useEffect(() => {
-      const t = o.current;
-      if (t) return Ie(t);
-    }, []), /* @__PURE__ */ r(
+H.displayName = m;
+var Le = l.forwardRef(
+  (e, a) => {
+    const r = u(m, e.__scopeDialog), t = l.useRef(null), i = O(a, r.contentRef, t);
+    return l.useEffect(() => {
+      const o = t.current;
+      if (o) return Ae(o);
+    }, []), /* @__PURE__ */ n(
       J,
       {
         ...e,
-        ref: a,
-        trapFocus: i.open,
-        disableOutsidePointerEvents: i.open,
-        onCloseAutoFocus: v(e.onCloseAutoFocus, (t) => {
-          var l;
-          t.preventDefault(), (l = i.triggerRef.current) == null || l.focus();
+        ref: i,
+        trapFocus: r.open,
+        disableOutsidePointerEvents: !0,
+        onCloseAutoFocus: v(e.onCloseAutoFocus, (o) => {
+          var s;
+          o.preventDefault(), (s = r.triggerRef.current) == null || s.focus();
         }),
-        onPointerDownOutside: v(e.onPointerDownOutside, (t) => {
-          const l = t.detail.originalEvent, c = l.button === 0 && l.ctrlKey === !0;
-          (l.button === 2 || c) && t.preventDefault();
+        onPointerDownOutside: v(e.onPointerDownOutside, (o) => {
+          const s = o.detail.originalEvent, c = s.button === 0 && s.ctrlKey === !0;
+          (s.button === 2 || c) && o.preventDefault();
         }),
         onFocusOutside: v(
           e.onFocusOutside,
-          (t) => t.preventDefault()
+          (o) => o.preventDefault()
         )
       }
     );
   }
-), Te = s.forwardRef(
-  (e, n) => {
-    const i = d(_, e.__scopeDialog), o = s.useRef(!1), a = s.useRef(!1);
-    return /* @__PURE__ */ r(
+), $e = l.forwardRef(
+  (e, a) => {
+    const r = u(m, e.__scopeDialog), t = l.useRef(!1), i = l.useRef(!1);
+    return /* @__PURE__ */ n(
       J,
       {
         ...e,
-        ref: n,
+        ref: a,
         trapFocus: !1,
         disableOutsidePointerEvents: !1,
-        onCloseAutoFocus: (t) => {
-          var l, c;
-          (l = e.onCloseAutoFocus) == null || l.call(e, t), t.defaultPrevented || (o.current || (c = i.triggerRef.current) == null || c.focus(), t.preventDefault()), o.current = !1, a.current = !1;
+        onCloseAutoFocus: (o) => {
+          var s, c;
+          (s = e.onCloseAutoFocus) == null || s.call(e, o), o.defaultPrevented || (t.current || (c = r.triggerRef.current) == null || c.focus(), o.preventDefault()), t.current = !1, i.current = !1;
         },
-        onInteractOutside: (t) => {
-          var g, p;
-          (g = e.onInteractOutside) == null || g.call(e, t), t.defaultPrevented || (o.current = !0, t.detail.originalEvent.type === "pointerdown" && (a.current = !0));
-          const l = t.target;
-          ((p = i.triggerRef.current) == null ? void 0 : p.contains(l)) && t.preventDefault(), t.detail.originalEvent.type === "focusin" && a.current && t.preventDefault();
+        onInteractOutside: (o) => {
+          var g, f;
+          (g = e.onInteractOutside) == null || g.call(e, o), o.defaultPrevented || (t.current = !0, o.detail.originalEvent.type === "pointerdown" && (i.current = !0));
+          const s = o.target;
+          ((f = r.triggerRef.current) == null ? void 0 : f.contains(s)) && o.preventDefault(), o.detail.originalEvent.type === "focusin" && i.current && o.preventDefault();
         }
       }
     );
   }
-), J = s.forwardRef(
-  (e, n) => {
-    const { __scopeDialog: i, trapFocus: o, onOpenAutoFocus: a, onCloseAutoFocus: t, ...l } = e, c = d(_, i);
-    return Ee(), /* @__PURE__ */ r(De, { children: /* @__PURE__ */ r(
-      Ce,
-      {
-        asChild: !0,
-        loop: !0,
-        trapped: o,
-        onMountAutoFocus: a,
-        onUnmountAutoFocus: t,
-        children: /* @__PURE__ */ r(
-          Ne,
-          {
-            role: "dialog",
-            id: c.contentId,
-            "aria-describedby": c.descriptionId,
-            "aria-labelledby": c.titleId,
-            "data-state": M(c.open),
-            ...l,
-            ref: n,
-            deferPointerDownOutside: !0,
-            onDismiss: () => c.onOpenChange(!1)
-          }
-        )
-      }
-    ) });
+), J = l.forwardRef(
+  (e, a) => {
+    const { __scopeDialog: r, trapFocus: t, onOpenAutoFocus: i, onCloseAutoFocus: o, ...s } = e, c = u(m, r), g = l.useRef(null), f = O(a, g);
+    return Te(), /* @__PURE__ */ _(W, { children: [
+      /* @__PURE__ */ n(
+        Me,
+        {
+          asChild: !0,
+          loop: !0,
+          trapped: t,
+          onMountAutoFocus: i,
+          onUnmountAutoFocus: o,
+          children: /* @__PURE__ */ n(
+            Oe,
+            {
+              role: "dialog",
+              id: c.contentId,
+              "aria-describedby": c.descriptionId,
+              "aria-labelledby": c.titleId,
+              "data-state": M(c.open),
+              ...s,
+              ref: f,
+              onDismiss: () => c.onOpenChange(!1)
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ _(W, { children: [
+        /* @__PURE__ */ n(je, { titleId: c.titleId }),
+        /* @__PURE__ */ n(Be, { contentRef: g, descriptionId: c.descriptionId })
+      ] })
+    ] });
   }
-), Q = "DialogTitle", U = s.forwardRef(
-  (e, n) => {
-    const { __scopeDialog: i, ...o } = e, a = d(Q, i);
-    return /* @__PURE__ */ r(h.h2, { id: a.titleId, ...o, ref: n });
+), T = "DialogTitle", V = l.forwardRef(
+  (e, a) => {
+    const { __scopeDialog: r, ...t } = e, i = u(T, r);
+    return /* @__PURE__ */ n(h.h2, { id: i.titleId, ...t, ref: a });
   }
 );
-U.displayName = Q;
-var V = "DialogDescription", Y = s.forwardRef(
-  (e, n) => {
-    const { __scopeDialog: i, ...o } = e, a = d(V, i);
-    return /* @__PURE__ */ r(h.p, { id: a.descriptionId, ...o, ref: n });
+V.displayName = T;
+var q = "DialogDescription", Q = l.forwardRef(
+  (e, a) => {
+    const { __scopeDialog: r, ...t } = e, i = u(q, r);
+    return /* @__PURE__ */ n(h.p, { id: i.descriptionId, ...t, ref: a });
   }
 );
-Y.displayName = V;
-var Z = "DialogClose", $ = s.forwardRef(
-  (e, n) => {
-    const { __scopeDialog: i, ...o } = e, a = d(Z, i);
-    return /* @__PURE__ */ r(
+Q.displayName = q;
+var U = "DialogClose", Y = l.forwardRef(
+  (e, a) => {
+    const { __scopeDialog: r, ...t } = e, i = u(U, r);
+    return /* @__PURE__ */ n(
       h.button,
       {
         type: "button",
-        ...o,
-        ref: n,
-        onClick: v(e.onClick, () => a.onOpenChange(!1))
+        ...t,
+        ref: a,
+        onClick: v(e.onClick, () => i.onOpenChange(!1))
       }
     );
   }
 );
-$.displayName = Z;
+Y.displayName = U;
 function M(e) {
   return e ? "open" : "closed";
 }
-const Se = "Dialog-module__dialog___r4ljx", u = {
+var Z = "DialogTitleWarning", [ct, X] = Pe(Z, {
+  contentName: m,
+  titleName: T,
+  docsSlug: "dialog"
+}), je = ({ titleId: e }) => {
+  const a = X(Z), r = `\`${a.contentName}\` requires a \`${a.titleName}\` for the component to be accessible for screen reader users.
+
+If you want to hide the \`${a.titleName}\`, you can wrap it with our VisuallyHidden component.
+
+For more information, see https://radix-ui.com/primitives/docs/components/${a.docsSlug}`;
+  return l.useEffect(() => {
+    e && (document.getElementById(e) || console.error(r));
+  }, [r, e]), null;
+}, ze = "DialogDescriptionWarning", Be = ({ contentRef: e, descriptionId: a }) => {
+  const t = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${X(ze).contentName}}.`;
+  return l.useEffect(() => {
+    var o;
+    const i = (o = e.current) == null ? void 0 : o.getAttribute("aria-describedby");
+    a && i && (document.getElementById(a) || console.warn(t));
+  }, [t, e, a]), null;
+}, Ke = L, He = j, Je = B, Ve = K, qe = H, Qe = V, Ue = Q, Ye = Y;
+const Ze = "Dialog-module__dialog___r4ljx", d = {
   "dialog-overlay": "Dialog-module__dialog-overlay___mgT2B",
-  dialog: Se,
+  dialog: Ze,
+  "dialog-width-auto": "Dialog-module__dialog-width-auto___96jJl",
+  "dialog-scrollable": "Dialog-module__dialog-scrollable___1ch32",
   "dialog-illustration": "Dialog-module__dialog-illustration___IHiQl",
+  "dialog-buttons": "Dialog-module__dialog-buttons___x-v2M",
   "dialog-content": "Dialog-module__dialog-content___3hOGc",
-  "dialog-title": "Dialog-module__dialog-title___KACAJ",
   "dialog-description": "Dialog-module__dialog-description___hL8fm",
-  "dialog-buttons": "Dialog-module__dialog-buttons___x-v2M",
+  "dialog-title": "Dialog-module__dialog-title___KACAJ",
   "dialog-close-button": "Dialog-module__dialog-close-button___-PzEz",
   "dialog-close-button-icon": "Dialog-module__dialog-close-button-icon___BeGg2"
 };
-function Qe({
+function dt({
   children: e,
-  isOpen: n,
-  defaultOpen: i = !1,
-  onClose: o,
-  onOpenChange: a,
-  showCloseButton: t,
-  closeOnOverlayClick: l = !0,
+  isOpen: a,
+  defaultOpen: r = !1,
+  onClose: t,
+  onOpenChange: i,
+  showCloseButton: o,
+  closeOnOverlayClick: s = !0,
   closeOnEscape: c = !0,
   modal: g = !0,
-  container: p,
+  container: f,
   title: D,
-  description: O,
-  illustrationSrc: F,
-  confirmButtonText: w,
-  cancelButtonText: T,
-  confirmButtonType: q = "primary",
-  cancelButtonType: W = "primary",
-  confirmButtonVariant: X = "default",
-  cancelButtonVariant: ee = "cancel",
-  confirmButtonSize: te = "md",
-  cancelButtonSize: oe = "md",
-  confirmButtonIcon: ae,
-  cancelButtonIcon: re,
-  onConfirm: N,
-  onCancel: b,
-  className: ie,
-  ...ne
+  description: b,
+  descriptionScrollable: ee,
+  widthAuto: te,
+  illustrationSrc: w,
+  confirmButtonText: F,
+  confirmButtonDisabled: oe,
+  cancelButtonText: S,
+  confirmButtonType: ae = "primary",
+  cancelButtonType: ie = "primary",
+  confirmButtonVariant: ne = "default",
+  cancelButtonVariant: re = "cancel",
+  confirmButtonSize: le = "md",
+  cancelButtonSize: se = "md",
+  confirmButtonIcon: ce,
+  cancelButtonIcon: de,
+  onConfirm: E,
+  onCancel: I,
+  className: ue,
+  ...ge
 }) {
-  const [le, I] = me(i), R = n !== void 0, se = R ? n : le, ce = t !== void 0 ? t : o !== void 0, de = (f) => {
-    R || I(f), a == null || a(f), f || o == null || o();
-  }, ue = (f) => {
-    c || f.preventDefault();
-  }, ge = (f) => {
-    l || f.preventDefault();
-  }, fe = () => {
-    N == null || N(), R || I(!1), o == null || o();
-  }, pe = () => {
-    b == null || b(), R || I(!1), o == null || o();
-  }, _e = /* @__PURE__ */ m(L, { open: se, onOpenChange: de, modal: g, children: [
-    e && /* @__PURE__ */ r(z, { asChild: !0, children: /* @__PURE__ */ r("div", { children: e }) }),
-    /* @__PURE__ */ m(j, { container: p, children: [
-      /* @__PURE__ */ r(H, { className: u["dialog-overlay"] }),
-      /* @__PURE__ */ m(B, { className: u.dialog, onEscapeKeyDown: ue, onInteractOutside: ge, children: [
-        ce && /* @__PURE__ */ r($, { className: u["dialog-close-button"], "aria-label": "Close dialog", children: /* @__PURE__ */ r(ve, { className: u["dialog-close-button-icon"], icon: "ap-icon-close" }) }),
-        F && /* @__PURE__ */ r("div", { className: u["dialog-illustration"], children: /* @__PURE__ */ r("img", { src: F, alt: "Dialog illustration" }) }),
-        /* @__PURE__ */ m("div", { className: u["dialog-content"], children: [
-          /* @__PURE__ */ r(U, { className: u["dialog-title"], children: D }),
-          /* @__PURE__ */ r(Y, { asChild: !0, children: /* @__PURE__ */ r("div", { className: u["dialog-description"], children: O }) })
+  const [fe, P] = Ne(r), R = a !== void 0, pe = R ? a : fe, _e = o !== void 0 ? o : t !== void 0, me = (p) => {
+    R || P(p), i == null || i(p), p || t == null || t();
+  }, De = (p) => {
+    c || p.preventDefault();
+  }, ve = (p) => {
+    s || p.preventDefault();
+  }, he = () => {
+    E == null || E(), R || P(!1), t == null || t();
+  }, Re = () => {
+    I == null || I(), R || P(!1), t == null || t();
+  }, ye = /* @__PURE__ */ _(Ke, { open: pe, onOpenChange: me, modal: g, children: [
+    e && /* @__PURE__ */ n(He, { asChild: !0, children: /* @__PURE__ */ n("div", { children: e }) }),
+    /* @__PURE__ */ _(Je, { container: f, children: [
+      /* @__PURE__ */ n(Ve, { className: d["dialog-overlay"] }),
+      /* @__PURE__ */ _(qe, { className: we(d.dialog, ee && d["dialog-scrollable"], te && d["dialog-width-auto"]), onEscapeKeyDown: De, onInteractOutside: ve, children: [
+        _e && /* @__PURE__ */ n(Ye, { className: d["dialog-close-button"], "aria-label": "Close dialog", children: /* @__PURE__ */ n(Fe, { className: d["dialog-close-button-icon"], icon: "ap-icon-close" }) }),
+        w && /* @__PURE__ */ n("div", { className: d["dialog-illustration"], children: /* @__PURE__ */ n("img", { src: w, alt: "Dialog illustration" }) }),
+        /* @__PURE__ */ _("div", { className: d["dialog-content"], children: [
+          /* @__PURE__ */ n(Qe, { className: d["dialog-title"], children: D }),
+          /* @__PURE__ */ n(Ue, { asChild: !0, children: /* @__PURE__ */ n("div", { className: d["dialog-description"], children: b }) })
         ] }),
-        /* @__PURE__ */ m("div", { className: u["dialog-buttons"], children: [
-          T && /* @__PURE__ */ r(S, { type: W, variant: ee, size: oe, onClick: pe, icon: re, children: T }),
-          w && /* @__PURE__ */ r(S, { type: q, variant: X, size: te, onClick: fe, icon: ae, children: w })
+        /* @__PURE__ */ _("div", { className: d["dialog-buttons"], children: [
+          S && /* @__PURE__ */ n(k, { type: ie, variant: re, size: se, onClick: Re, icon: de, children: S }),
+          F && /* @__PURE__ */ n(k, { type: ae, variant: ne, size: le, onClick: he, icon: ce, disabled: oe, children: F })
         ] })
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ r("div", { className: ie, ...ne, children: _e });
+  return /* @__PURE__ */ n("div", { className: ue, ...ge, children: ye });
 }
 export {
-  Qe as default
+  dt as default
 };