@alixpartners/ui-components 2.5.7 → 2.6.1

package/dist/components/Dialog/Dialog.js

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