@alixpartners/ui-components 2.1.0 → 2.2.0

package/dist/components/Dialog/Dialog.d.ts

@@ -1,28 +1,42 @@
 import { DataAttributes } from '../../types/data-attributes';
 import { ApIcon } from '../../assets/ap-icons-types';
-export declare const DialogContext: import('react').Context<HTMLElement | null>;
 /**
  * Dialog component that displays modal content with customizable actions and optional illustration.
- * Provides a native HTML dialog element with backdrop support, confirmation/cancellation actions, and accessibility features.
+ * Provides a Radix UI dialog with backdrop support, confirmation/cancellation actions, and accessibility features.
+ * Supports both controlled (via isOpen) and uncontrolled (via children trigger) modes.
  *
  * @param {object} props - Dialog component props
  * @param {React.ReactNode} [props.children] - The trigger element that opens the dialog when clicked (optional when using isOpen prop)
- * @param {boolean} [props.isOpen] - Controls whether the dialog is displayed. When provided, the dialog becomes controlled and children trigger is optional
- * @param {() => void} [props.onClose] - Callback fired when the dialog is closed (shows close button when provided)
+ * @param {boolean} [props.isOpen] - Controls whether the dialog is displayed. When provided, the dialog becomes controlled
+ * @param {boolean} [props.defaultOpen] - Initial open state for uncontrolled mode (default: false)
+ * @param {() => void} [props.onClose] - Callback fired when the dialog is closed via close button, overlay click, or escape key
+ * @param {(open: boolean) => void} [props.onOpenChange] - Callback fired when the open state changes (for more granular control)
+ * @param {boolean} [props.showCloseButton] - Whether to show the close button. Defaults to true if onClose is provided
+ * @param {boolean} [props.closeOnOverlayClick] - Whether clicking the overlay closes the dialog (default: true)
+ * @param {boolean} [props.closeOnEscape] - Whether pressing Escape closes the dialog (default: true)
+ * @param {boolean} [props.modal] - Whether the dialog is modal (default: true)
+ * @param {HTMLElement} [props.container] - Custom container element for the Portal
  * @param {string} props.title - The title text displayed at the top of the dialog
  * @param {string} props.description - The description text displayed below the title
  * @param {string} [props.illustrationSrc] - Optional source URL for an illustration image displayed above the content
  * @param {string} [props.confirmButtonText] - Text for the confirm button (button appears when provided)
  * @param {string} [props.cancelButtonText] - Text for the cancel button (button appears when provided)
- * @param {() => void} [props.onConfirm] - Callback fired when the confirm button is clicked (closes dialog automatically)
- * @param {() => void} [props.onCancel] - Callback fired when the cancel button is clicked (closes dialog automatically)
+ * @param {() => void} [props.onConfirm] - Callback fired when the confirm button is clicked
+ * @param {() => void} [props.onCancel] - Callback fired when the cancel button is clicked
  * @returns {JSX.Element} The rendered Dialog component
  */
 type DialogProps = {
     className?: string;
     children?: React.ReactNode;
     isOpen?: boolean;
+    defaultOpen?: boolean;
     onClose?: () => void;
+    onOpenChange?: (open: boolean) => void;
+    showCloseButton?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    modal?: boolean;
+    container?: HTMLElement;
     title: string;
     description: React.ReactNode;
     illustrationSrc?: string;
@@ -39,5 +53,5 @@ type DialogProps = {
     onConfirm?: () => void;
     onCancel?: () => void;
 } & DataAttributes;
-export default function Dialog({ children, isOpen, onClose, title, description, illustrationSrc, confirmButtonText, cancelButtonText, confirmButtonType, cancelButtonType, confirmButtonVariant, cancelButtonVariant, confirmButtonSize, cancelButtonSize, confirmButtonIcon, cancelButtonIcon, onConfirm, onCancel, className, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export default function Dialog({ children, isOpen, defaultOpen, onClose, onOpenChange, showCloseButton, closeOnOverlayClick, closeOnEscape, modal, container, title, description, illustrationSrc, confirmButtonText, cancelButtonText, confirmButtonType, cancelButtonType, confirmButtonVariant, cancelButtonVariant, confirmButtonSize, cancelButtonSize, confirmButtonIcon, cancelButtonIcon, onConfirm, onCancel, className, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog/Dialog.js

@@ -1,9 +1,242 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { createContext as I, useRef as h, useEffect as P } from "react";
-import f from "../Button/Button.js";
-import H from "../Icon/Icon.js";
-import '../../assets/Dialog.css';const J = "Dialog-module__dialog___r4ljx", a = {
-  dialog: J,
+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, f as Ee, g as Ie } from "../../index-DM51yNMI.js";
+import { u as C } from "../../index-7CBv-Jx6.js";
+import { P as Pe, D as be } from "../../index-DrR82jOT.js";
+import { R as Ce, h as Oe, u as Ae, F as xe } from "../../index-Chv2KjIL.js";
+import { P as A } from "../../index-BymOxiM6.js";
+import '../../assets/Dialog.css';var N = "Dialog", [G] = Ne(N), [Te, d] = G(N), L = (e) => {
+  const {
+    __scopeDialog: a,
+    children: i,
+    open: t,
+    defaultOpen: n,
+    onOpenChange: o,
+    modal: s = !0
+  } = e, c = l.useRef(null), u = l.useRef(null), [f, D] = ye({
+    prop: t,
+    defaultProp: n ?? !1,
+    onChange: o,
+    caller: N
+  });
+  return /* @__PURE__ */ r(
+    Te,
+    {
+      scope: a,
+      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
+    }
+  );
+};
+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(
+      h.button,
+      {
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": n.open,
+        "aria-controls": n.contentId,
+        "data-state": M(n.open),
+        ...t,
+        ref: o,
+        onClick: v(e.onClick, n.onOpenToggle)
+      }
+    );
+  }
+);
+z.displayName = $;
+var x = "DialogPortal", [Me, B] = G(x, {
+  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 }) })) });
+};
+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;
+  }
+);
+j.displayName = y;
+var we = Ee("DialogOverlay.RemoveScroll"), Fe = l.forwardRef(
+  (e, a) => {
+    const { __scopeDialog: i, ...t } = e, n = d(y, i);
+    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(
+        h.div,
+        {
+          "data-state": M(n.open),
+          ...t,
+          ref: a,
+          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 }) });
+  }
+);
+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(() => {
+      const o = t.current;
+      if (o) return Oe(o);
+    }, []), /* @__PURE__ */ r(
+      V,
+      {
+        ...e,
+        ref: n,
+        trapFocus: i.open,
+        disableOutsidePointerEvents: !0,
+        onCloseAutoFocus: v(e.onCloseAutoFocus, (o) => {
+          var s;
+          o.preventDefault(), (s = i.triggerRef.current) == null || s.focus();
+        }),
+        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,
+          (o) => o.preventDefault()
+        )
+      }
+    );
+  }
+), We = l.forwardRef(
+  (e, a) => {
+    const i = d(_, e.__scopeDialog), t = l.useRef(!1), n = l.useRef(!1);
+    return /* @__PURE__ */ r(
+      V,
+      {
+        ...e,
+        ref: a,
+        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;
+        },
+        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();
+        }
+      }
+    );
+  }
+), 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 })
+      ] })
+    ] });
+  }
+), 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.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 });
+  }
+);
+Q.displayName = J;
+var U = "DialogClose", Y = l.forwardRef(
+  (e, a) => {
+    const { __scopeDialog: i, ...t } = e, n = d(U, i);
+    return /* @__PURE__ */ r(
+      h.button,
+      {
+        type: "button",
+        ...t,
+        ref: a,
+        onClick: v(e.onClick, () => n.onOpenChange(!1))
+      }
+    );
+  }
+);
+Y.displayName = U;
+function M(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 = {
+  "dialog-overlay": "Dialog-module__dialog-overlay___mgT2B",
+  dialog: Je,
   "dialog-illustration": "Dialog-module__dialog-illustration___IHiQl",
   "dialog-content": "Dialog-module__dialog-content___3hOGc",
   "dialog-title": "Dialog-module__dialog-title___KACAJ",
@@ -11,64 +244,66 @@ import '../../assets/Dialog.css';const J = "Dialog-module__dialog___r4ljx", a =
   "dialog-buttons": "Dialog-module__dialog-buttons___x-v2M",
   "dialog-close-button": "Dialog-module__dialog-close-button___-PzEz",
   "dialog-close-button-icon": "Dialog-module__dialog-close-button-icon___BeGg2"
-}, K = I(null);
-function F({
-  children: g,
-  isOpen: d,
-  onClose: l,
-  title: v,
-  description: D,
-  illustrationSrc: s,
-  confirmButtonText: _,
-  cancelButtonText: n,
-  confirmButtonType: b = "primary",
-  cancelButtonType: p = "primary",
-  confirmButtonVariant: N = "default",
-  cancelButtonVariant: k = "cancel",
-  confirmButtonSize: x = "md",
-  cancelButtonSize: y = "md",
-  confirmButtonIcon: z,
-  cancelButtonIcon: j,
-  onConfirm: e,
-  onCancel: r,
-  className: M,
-  ...R
+};
+function rt({
+  children: e,
+  isOpen: a,
+  defaultOpen: i = !1,
+  onClose: t,
+  onOpenChange: n,
+  showCloseButton: o,
+  closeOnOverlayClick: s = !0,
+  closeOnEscape: c = !0,
+  modal: u = !0,
+  container: f,
+  title: D,
+  description: E,
+  illustrationSrc: w,
+  confirmButtonText: F,
+  cancelButtonText: S,
+  confirmButtonType: ee = "primary",
+  cancelButtonType: te = "primary",
+  confirmButtonVariant: oe = "default",
+  cancelButtonVariant: ae = "cancel",
+  confirmButtonSize: ne = "md",
+  cancelButtonSize: re = "md",
+  confirmButtonIcon: ie,
+  cancelButtonIcon: le,
+  onConfirm: I,
+  onCancel: P,
+  className: se,
+  ...ce
 }) {
-  const w = h(null), t = h(null);
-  P(() => {
-    var i, m;
-    d !== void 0 && (d ? (i = t.current) == null || i.showModal() : (m = t.current) == null || m.close());
-  }, [d]);
-  const A = () => {
-    var i;
-    (i = t.current) == null || i.showModal();
-  }, u = () => {
-    var i;
-    l == null || l(), d === void 0 && ((i = t.current) == null || i.close());
-  }, E = () => {
-    var i;
-    e == null || e(), d === void 0 && ((i = t.current) == null || i.close(), l == null || l());
-  }, G = () => {
-    var i;
-    r == null || r(), d === void 0 && ((i = t.current) == null || i.close(), l == null || l());
-  };
-  return /* @__PURE__ */ c("div", { className: M, ...R, children: [
-    g && /* @__PURE__ */ o("div", { ref: w, onClick: A, children: g }),
-    /* @__PURE__ */ o("dialog", { className: a.dialog, ref: t, onClose: u, children: /* @__PURE__ */ c(K.Provider, { value: t.current, children: [
-      l && /* @__PURE__ */ o("button", { className: a["dialog-close-button"], onClick: u, children: /* @__PURE__ */ o(H, { className: a["dialog-close-button-icon"], icon: "ap-icon-close" }) }),
-      s && /* @__PURE__ */ o("div", { className: a["dialog-illustration"], children: /* @__PURE__ */ o("img", { src: s, alt: "Dialog illustration" }) }),
-      /* @__PURE__ */ c("div", { className: a["dialog-content"], children: [
-        /* @__PURE__ */ o("h2", { className: a["dialog-title"], children: v }),
-        /* @__PURE__ */ o("div", { className: a["dialog-description"], children: D })
-      ] }),
-      /* @__PURE__ */ c("div", { className: a["dialog-buttons"], children: [
-        n && /* @__PURE__ */ o(f, { type: p, variant: k, size: y, onClick: G, icon: j, children: n }),
-        _ && /* @__PURE__ */ o(f, { type: b, variant: N, size: x, onClick: E, icon: z, children: _ })
+  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();
+  }, 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 }) })
+        ] }),
+        /* @__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 })
+        ] })
       ] })
-    ] }) })
+    ] })
   ] });
+  return /* @__PURE__ */ r("div", { className: se, ...ce, children: ve });
 }
 export {
-  K as DialogContext,
-  F as default
+  rt as default
 };

package/dist/components/Dialog/Dialog.test.d.ts

@@ -0,0 +1 @@
+export {};