@frontify/fondue-components 29.2.0 → 30.0.0

package/dist/fondue-components10.js

@@ -1,23 +1,23 @@
-import { jsx as o, jsxs as E } from "react/jsx-runtime";
-import { IconCross as L } from "@frontify/fondue-icons";
+import { jsx as o, jsxs as G } from "react/jsx-runtime";
+import { IconCross as J } from "@frontify/fondue-icons";
 import * as r from "@radix-ui/react-dialog";
-import { createContext as _, forwardRef as d, useRef as k, useContext as G, useMemo as I } from "react";
-import { useSyncRefs as J } from "./fondue-components59.js";
-import { useTranslation as K } from "./fondue-components43.js";
-import { addShowFocusRing as Q, addAutoFocusAttribute as U } from "./fondue-components60.js";
-import { useFondueTheme as V, ThemeProvider as W } from "./fondue-components40.js";
+import { createContext as Q, forwardRef as u, useRef as U, useContext as S, useMemo as V } from "react";
+import { useSyncRefs as W } from "./fondue-components59.js";
+import { useTranslation as X } from "./fondue-components43.js";
+import { addShowFocusRing as Y, addAutoFocusAttribute as Z } from "./fondue-components60.js";
+import { useFondueTheme as E, ThemeProvider as K } from "./fondue-components40.js";
 import s from "./fondue-components61.js";
-const D = _({ isModal: !1 });
-D.displayName = "DialogContext";
-const T = ({ children: t, modal: e, onOpenChange: a, open: i }) => {
-  const n = I(() => ({ isModal: e ?? !1 }), [e]);
-  return /* @__PURE__ */ o(D.Provider, { value: n, children: /* @__PURE__ */ o(r.Root, { open: i, onOpenChange: a, modal: e, children: t }) });
+const p = Q({ isModal: !1, dismissable: !0 });
+p.displayName = "DialogContext";
+const F = ({ children: t, modal: e, onOpenChange: a, open: i, dismissable: n = !0 }) => {
+  const d = V(() => ({ isModal: e ?? !1, dismissable: n }), [e, n]);
+  return /* @__PURE__ */ o(p.Provider, { value: d, children: /* @__PURE__ */ o(r.Root, { open: i, onOpenChange: a, modal: e, children: t }) });
 };
-T.displayName = "Dialog.Root";
-const R = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-trigger" }, i) => /* @__PURE__ */ o(
+F.displayName = "Dialog.Root";
+const O = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-trigger" }, i) => /* @__PURE__ */ o(
   r.Trigger,
   {
-    onMouseDown: U,
+    onMouseDown: Z,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
     "data-test-id": a,
@@ -26,31 +26,35 @@ const R = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-tr
     children: e
   }
 );
-R.displayName = "Dialog.Trigger";
-const X = ({ children: t, showUnderlay: e }) => {
-  const { isModal: a } = G(D);
+O.displayName = "Dialog.Trigger";
+const tt = ({ children: t, showUnderlay: e }) => {
+  const { isModal: a } = S(p);
   return a ? /* @__PURE__ */ o(r.Overlay, { "data-visible": e, className: s.underlay, children: t }) : /* @__PURE__ */ o("div", { className: s.underlay, "data-visible": e, children: t });
-}, S = ({
+}, q = ({
   maxWidth: t = "800px",
   minWidth: e = "400px",
   minHeight: a = "200px",
   padding: i = "compact",
   verticalAlign: n = "center",
-  "data-test-id": u = "fondue-dialog-content",
-  showUnderlay: c = !1,
-  rounded: p = !0,
-  onEscapeKeyDown: j,
-  children: A
-}, H) => {
-  const { theme: P, dir: N } = V(), l = k(null);
-  J(l, H);
-  const B = (z) => {
-    var C, v, x;
-    z.preventDefault();
-    const g = 'button:not([data-tooltip-trigger="true"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', m = (C = l.current) == null ? void 0 : C.querySelector('[data-dialog-layout-component="body"]'), f = (v = l.current) == null ? void 0 : v.querySelector('[data-dialog-layout-component="footer"]'), y = (x = l.current) == null ? void 0 : x.querySelector('[data-dialog-layout-component="header"]'), b = (m == null ? void 0 : m.querySelector(g)) || (f == null ? void 0 : f.querySelector(g)) || (y == null ? void 0 : y.querySelector(g));
-    b instanceof HTMLElement && b.focus();
+  "data-test-id": d = "fondue-dialog-content",
+  showUnderlay: g = !1,
+  rounded: m = !0,
+  onEscapeKeyDown: f,
+  children: B
+}, I) => {
+  const { theme: z, dir: C } = E(), c = U(null), { dismissable: v } = S(p);
+  W(c, I);
+  const L = (l) => {
+    v || l.preventDefault(), f == null || f(l);
+  }, _ = (l) => {
+    v || l.preventDefault();
+  }, k = (l) => {
+    var T, h, R;
+    l.preventDefault();
+    const y = 'button:not([data-tooltip-trigger="true"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', D = (T = c.current) == null ? void 0 : T.querySelector('[data-dialog-layout-component="body"]'), N = (h = c.current) == null ? void 0 : h.querySelector('[data-dialog-layout-component="footer"]'), b = (R = c.current) == null ? void 0 : R.querySelector('[data-dialog-layout-component="header"]'), x = (D == null ? void 0 : D.querySelector(y)) || (N == null ? void 0 : N.querySelector(y)) || (b == null ? void 0 : b.querySelector(y));
+    x instanceof HTMLElement && x.focus();
   };
-  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(W, { theme: P, dir: N, children: /* @__PURE__ */ o(X, { showUnderlay: c, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(K, { theme: z, dir: C, children: /* @__PURE__ */ o(tt, { showUnderlay: g, children: /* @__PURE__ */ o(
     r.Content,
     {
       style: {
@@ -58,35 +62,36 @@ const X = ({ children: t, showUnderlay: e }) => {
         "--dialog-min-width": e,
         "--dialog-min-height": a
       },
-      ref: l,
+      ref: c,
       className: s.content,
-      onFocus: Q,
-      onOpenAutoFocus: B,
-      onEscapeKeyDown: j,
+      onFocus: Y,
+      onOpenAutoFocus: k,
+      onEscapeKeyDown: L,
+      onInteractOutside: _,
       "data-dialog-padding": i,
-      "data-dialog-rounded": p,
-      "data-test-id": u,
+      "data-dialog-rounded": m,
+      "data-test-id": d,
       "data-dialog-vertical-align": n,
-      dir: N,
-      children: A
+      dir: C,
+      children: B
     }
   ) }) }) });
 };
-S.displayName = "Dialog.Content";
-const h = ({
+q.displayName = "Dialog.Content";
+const M = ({
   padding: t,
   showBorder: e = !0,
   showCloseButton: a = !0,
   closeProps: i,
   children: n,
-  "data-test-id": u = "fondue-dialog-header"
-}, c) => {
-  const { t: p } = K();
-  return /* @__PURE__ */ E(
+  "data-test-id": d = "fondue-dialog-header"
+}, g) => {
+  const { t: m } = X();
+  return /* @__PURE__ */ G(
     "div",
     {
-      "data-test-id": u,
-      ref: c,
+      "data-test-id": d,
+      ref: g,
       className: s.header,
       "data-dialog-header-padding": t,
       "data-show-border": e,
@@ -97,18 +102,18 @@ const h = ({
           r.Close,
           {
             role: "button",
-            "data-test-id": `${u}-close`,
-            "aria-label": p("Dialog_close"),
+            "data-test-id": `${d}-close`,
+            "aria-label": m("Dialog_close"),
             ...i,
-            children: /* @__PURE__ */ o(L, { size: 20 })
+            children: /* @__PURE__ */ o(J, { size: 20 })
           }
         )
       ]
     }
   );
 };
-h.displayName = "Dialog.Header";
-const F = ({ padding: t, showBorder: e = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, n) => /* @__PURE__ */ o(
+M.displayName = "Dialog.Header";
+const $ = ({ padding: t, showBorder: e = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, n) => /* @__PURE__ */ o(
   "div",
   {
     "data-test-id": i,
@@ -120,8 +125,8 @@ const F = ({ padding: t, showBorder: e = !0, children: a, "data-test-id": i = "f
     children: a
   }
 );
-F.displayName = "Dialog.Footer";
-const q = ({ padding: t, children: e, "data-test-id": a = "fondue-dialog-body" }, i) => /* @__PURE__ */ o(
+$.displayName = "Dialog.Footer";
+const j = ({ padding: t, children: e, "data-test-id": a = "fondue-dialog-body" }, i) => /* @__PURE__ */ o(
   "div",
   {
     "data-test-id": a,
@@ -132,50 +137,50 @@ const q = ({ padding: t, children: e, "data-test-id": a = "fondue-dialog-body" }
     children: e
   }
 );
-q.displayName = "Dialog.Body";
+j.displayName = "Dialog.Body";
 const w = ({ children: t, "data-test-id": e = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ o("div", { "data-test-id": e, ref: a, className: s.sideContent, "data-dialog-layout-component": !0, children: t });
 w.displayName = "Dialog.SideContent";
-const M = ({ children: t }) => /* @__PURE__ */ o(r.Close, { asChild: !0, children: t });
-M.displayName = "Dialog.Close";
-const O = ({ children: t, asChild: e, screenReaderOnly: a = !1 }) => a && !e ? /* @__PURE__ */ o(r.Title, { asChild: !0, children: /* @__PURE__ */ o("span", { className: s.screenReaderOnly, children: t }) }) : a && e ? /* @__PURE__ */ o(r.Title, { asChild: !0, children: typeof t == "object" && t && "props" in t ? {
+const A = ({ children: t }) => /* @__PURE__ */ o(r.Close, { asChild: !0, children: t });
+A.displayName = "Dialog.Close";
+const H = ({ children: t, asChild: e, screenReaderOnly: a = !1 }) => a && !e ? /* @__PURE__ */ o(r.Title, { asChild: !0, children: /* @__PURE__ */ o("span", { className: s.screenReaderOnly, children: t }) }) : a && e ? /* @__PURE__ */ o(r.Title, { asChild: !0, children: typeof t == "object" && t && "props" in t ? {
   ...t,
   props: {
     ...t.props,
     className: `${t.props.className || ""} ${s.screenReaderOnly}`.trim()
   }
 } : t }) : /* @__PURE__ */ o(r.Title, { asChild: e, children: t });
-O.displayName = "Dialog.Title";
-const $ = ({ children: t, asChild: e, screenReaderOnly: a = !1 }) => a && !e ? /* @__PURE__ */ o(r.Description, { asChild: !0, children: /* @__PURE__ */ o("span", { className: s.screenReaderOnly, children: t }) }) : a && e ? /* @__PURE__ */ o(r.Description, { asChild: !0, children: typeof t == "object" && t && "props" in t ? {
+H.displayName = "Dialog.Title";
+const P = ({ children: t, asChild: e, screenReaderOnly: a = !1 }) => a && !e ? /* @__PURE__ */ o(r.Description, { asChild: !0, children: /* @__PURE__ */ o("span", { className: s.screenReaderOnly, children: t }) }) : a && e ? /* @__PURE__ */ o(r.Description, { asChild: !0, children: typeof t == "object" && t && "props" in t ? {
   ...t,
   props: {
     ...t.props,
     className: `${t.props.className || ""} ${s.screenReaderOnly}`.trim()
   }
 } : t }) : /* @__PURE__ */ o(r.Description, { asChild: e, children: t });
-$.displayName = "Dialog.Description";
-const st = {
-  Root: T,
-  Title: O,
-  Description: $,
-  Close: M,
-  Trigger: d(R),
-  Content: d(S),
-  Header: d(h),
-  Footer: d(F),
-  Body: d(q),
-  SideContent: d(w)
+P.displayName = "Dialog.Description";
+const lt = {
+  Root: F,
+  Title: H,
+  Description: P,
+  Close: A,
+  Trigger: u(O),
+  Content: u(q),
+  Header: u(M),
+  Footer: u($),
+  Body: u(j),
+  SideContent: u(w)
 };
 export {
-  st as Dialog,
-  q as DialogBody,
-  M as DialogClose,
-  S as DialogContent,
-  $ as DialogDescription,
-  F as DialogFooter,
-  h as DialogHeader,
-  T as DialogRoot,
+  lt as Dialog,
+  j as DialogBody,
+  A as DialogClose,
+  q as DialogContent,
+  P as DialogDescription,
+  $ as DialogFooter,
+  M as DialogHeader,
+  F as DialogRoot,
   w as DialogSideContent,
-  O as DialogTitle,
-  R as DialogTrigger
+  H as DialogTitle,
+  O as DialogTrigger
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    closeProps?: CommonAriaProps;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = {\n    children?: ReactNode;\n    asChild?: boolean;\n    /**\n     * Visually hide the element while keeping it accessible to screen readers\n     * @default false\n     */\n    screenReaderOnly?: boolean;\n};\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, modal, onOpenChange, open }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: modal ?? false }), [modal]);\n\n    return (\n        <DialogContext.Provider value={value}>\n            <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n                {children}\n            </RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        onEscapeKeyDown,\n        children,\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const focusableSelector =\n            'button:not([data-tooltip-trigger=\"true\"]), [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n        // Try to find focusable element in order: body -> footer -> header\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n        const dialogFooter = contentRef.current?.querySelector('[data-dialog-layout-component=\"footer\"]');\n        const dialogHeader = contentRef.current?.querySelector('[data-dialog-layout-component=\"header\"]');\n\n        const firstFocusable =\n            dialogBody?.querySelector(focusableSelector) ||\n            dialogFooter?.querySelector(focusableSelector) ||\n            dialogHeader?.querySelector(focusableSelector);\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        onEscapeKeyDown={onEscapeKeyDown}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        dir={dir}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        closeProps,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    aria-label={t('Dialog_close')}\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild, screenReaderOnly = false }: DialogAnnouncementProps) => {\n    if (screenReaderOnly && !asChild) {\n        return (\n            <RadixDialog.Title asChild>\n                <span className={styles.screenReaderOnly}>{children}</span>\n            </RadixDialog.Title>\n        );\n    }\n\n    if (screenReaderOnly && asChild) {\n        // When using asChild with screenReaderOnly, apply className to the child\n        return (\n            <RadixDialog.Title asChild>\n                {typeof children === 'object' && children && 'props' in children\n                    ? {\n                          ...children,\n                          props: {\n                              ...children.props,\n                              className: `${children.props.className || ''} ${styles.screenReaderOnly}`.trim(),\n                          },\n                      }\n                    : children}\n            </RadixDialog.Title>\n        );\n    }\n\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild, screenReaderOnly = false }: DialogAnnouncementProps) => {\n    if (screenReaderOnly && !asChild) {\n        return (\n            <RadixDialog.Description asChild>\n                <span className={styles.screenReaderOnly}>{children}</span>\n            </RadixDialog.Description>\n        );\n    }\n\n    if (screenReaderOnly && asChild) {\n        // When using asChild with screenReaderOnly, apply className to the child\n        return (\n            <RadixDialog.Description asChild>\n                {typeof children === 'object' && children && 'props' in children\n                    ? {\n                          ...children,\n                          props: {\n                              ...children.props,\n                              className: `${children.props.className || ''} ${styles.screenReaderOnly}`.trim(),\n                          },\n                      }\n                    : children}\n            </RadixDialog.Description>\n        );\n    }\n\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","modal","onOpenChange","open","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","onEscapeKeyDown","theme","dir","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","focusableSelector","dialogBody","_a","dialogFooter","_b","dialogHeader","_c","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","t","useTranslation","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","screenReaderOnly","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Whether the dialog can be closed by clicking the underlay or pressing Escape.\n     * When set to `false`, the dialog can only be closed programmatically or via `Dialog.Close`.\n     * @default true\n     */\n    dismissable?: boolean;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    closeProps?: CommonAriaProps;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = {\n    children?: ReactNode;\n    asChild?: boolean;\n    /**\n     * Visually hide the element while keeping it accessible to screen readers\n     * @default false\n     */\n    screenReaderOnly?: boolean;\n};\n\ntype DialogContextType = {\n    isModal: boolean;\n    dismissable: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false, dismissable: true });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, modal, onOpenChange, open, dismissable = true }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: modal ?? false, dismissable }), [modal, dismissable]);\n\n    return (\n        <DialogContext.Provider value={value}>\n            <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n                {children}\n            </RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        onEscapeKeyDown,\n        children,\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { dismissable } = useContext(DialogContext);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        if (!dismissable) {\n            event.preventDefault();\n        }\n        onEscapeKeyDown?.(event);\n    };\n\n    const handleInteractOutside = (event: Event) => {\n        if (!dismissable) {\n            event.preventDefault();\n        }\n    };\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const focusableSelector =\n            'button:not([data-tooltip-trigger=\"true\"]), [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n        // Try to find focusable element in order: body -> footer -> header\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n        const dialogFooter = contentRef.current?.querySelector('[data-dialog-layout-component=\"footer\"]');\n        const dialogHeader = contentRef.current?.querySelector('[data-dialog-layout-component=\"header\"]');\n\n        const firstFocusable =\n            dialogBody?.querySelector(focusableSelector) ||\n            dialogFooter?.querySelector(focusableSelector) ||\n            dialogHeader?.querySelector(focusableSelector);\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        onEscapeKeyDown={handleEscapeKeyDown}\n                        onInteractOutside={handleInteractOutside}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        dir={dir}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        closeProps,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    aria-label={t('Dialog_close')}\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild, screenReaderOnly = false }: DialogAnnouncementProps) => {\n    if (screenReaderOnly && !asChild) {\n        return (\n            <RadixDialog.Title asChild>\n                <span className={styles.screenReaderOnly}>{children}</span>\n            </RadixDialog.Title>\n        );\n    }\n\n    if (screenReaderOnly && asChild) {\n        // When using asChild with screenReaderOnly, apply className to the child\n        return (\n            <RadixDialog.Title asChild>\n                {typeof children === 'object' && children && 'props' in children\n                    ? {\n                          ...children,\n                          props: {\n                              ...children.props,\n                              className: `${children.props.className || ''} ${styles.screenReaderOnly}`.trim(),\n                          },\n                      }\n                    : children}\n            </RadixDialog.Title>\n        );\n    }\n\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild, screenReaderOnly = false }: DialogAnnouncementProps) => {\n    if (screenReaderOnly && !asChild) {\n        return (\n            <RadixDialog.Description asChild>\n                <span className={styles.screenReaderOnly}>{children}</span>\n            </RadixDialog.Description>\n        );\n    }\n\n    if (screenReaderOnly && asChild) {\n        // When using asChild with screenReaderOnly, apply className to the child\n        return (\n            <RadixDialog.Description asChild>\n                {typeof children === 'object' && children && 'props' in children\n                    ? {\n                          ...children,\n                          props: {\n                              ...children.props,\n                              className: `${children.props.className || ''} ${styles.screenReaderOnly}`.trim(),\n                          },\n                      }\n                    : children}\n            </RadixDialog.Description>\n        );\n    }\n\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","modal","onOpenChange","open","dismissable","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","onEscapeKeyDown","theme","dir","useFondueTheme","contentRef","useRef","useSyncRefs","handleEscapeKeyDown","event","handleInteractOutside","handleOpenAutoFocus","focusableSelector","dialogBody","_a","dialogFooter","_b","dialogHeader","_c","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","t","useTranslation","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","screenReaderOnly","DialogDescription","Dialog","forwardRef"],"mappings":"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"}

package/dist/fondue-components100.js

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import m from "./fondue-components134.js";
+import m from "./fondue-components122.js";
 const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
 t.displayName = "Select.Slot";
 const S = d(t);

package/dist/fondue-components112.js

@@ -1,28 +1,28 @@
-const t = "_root_3dhca_5", o = "_textareaWrapper_3dhca_62", s = "_textarea_3dhca_62", a = "_slot_3dhca_120", _ = "_decorator_3dhca_145", c = "_tools_3dhca_158", r = "_toolsButton_3dhca_190", e = "_success_3dhca_222", n = "_error_3dhca_226", d = "_loadingStatus_3dhca_230", l = "_spin_3dhca_1", h = {
+const t = "_root_1bxvz_5", o = "_textareaWrapper_1bxvz_62", s = "_textarea_1bxvz_62", _ = "_slot_1bxvz_120", r = "_decorator_1bxvz_145", e = "_tools_1bxvz_158", a = "_toolsButton_1bxvz_190", c = "_success_1bxvz_222", n = "_error_1bxvz_226", x = "_loadingStatus_1bxvz_230", l = "_spin_1bxvz_1", b = {
   root: t,
   textareaWrapper: o,
   textarea: s,
-  slot: a,
-  decorator: _,
-  tools: c,
-  toolsButton: r,
-  success: e,
+  slot: _,
+  decorator: r,
+  tools: e,
+  toolsButton: a,
+  success: c,
   error: n,
-  loadingStatus: d,
+  loadingStatus: x,
   spin: l
 };
 export {
-  _ as decorator,
-  h as default,
+  r as decorator,
+  b as default,
   n as error,
-  d as loadingStatus,
+  x as loadingStatus,
   t as root,
-  a as slot,
+  _ as slot,
   l as spin,
-  e as success,
+  c as success,
   s as textarea,
   o as textareaWrapper,
-  c as tools,
-  r as toolsButton
+  e as tools,
+  a as toolsButton
 };
 //# sourceMappingURL=fondue-components112.js.map

package/dist/fondue-components114.js

@@ -1,4 +1,4 @@
-import { enUS as e } from "./fondue-components150.js";
+import { enUS as e } from "./fondue-components147.js";
 const l = {
   Badge_dismiss: "Dismiss ${label}",
   Card_deselect: "Deselect",