@frontify/fondue-components 4.0.0 → 4.0.2

package/dist/fondue-components62.js

@@ -0,0 +1,14 @@
+const o = "_root_18q6l_5", c = "_colorName_18q6l_60", t = "_colorIndicator_18q6l_64", r = "_caret_18q6l_70", l = {
+  root: o,
+  colorName: c,
+  colorIndicator: t,
+  caret: r
+};
+export {
+  r as caret,
+  t as colorIndicator,
+  c as colorName,
+  l as default,
+  o as root
+};
+//# sourceMappingURL=fondue-components62.js.map

package/dist/fondue-components62.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components62.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/fondue-components63.js

@@ -0,0 +1,42 @@
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components50.js";
+const g = ({
+  children: r,
+  value: o,
+  label: s
+}) => r && typeof r == "string" ? {
+  value: o || r,
+  label: s || r
+} : {
+  value: o || "",
+  label: s || o || ""
+}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(r, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(o(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        o,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
+};
+export {
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
+};
+//# sourceMappingURL=fondue-components63.js.map

package/dist/fondue-components63.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components63.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAIQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAC3B,IAGG;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AACpC,GAkBSE,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAC;AACxC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAChB;AACA,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EACrB;AACJ;"}

package/dist/fondue-components7.js

@@ -2,8 +2,8 @@ import { jsx as a, jsxs as T } from "react/jsx-runtime";
 import { IconCross as F } from "@frontify/fondue-icons";
 import * as i from "@radix-ui/react-dialog";
 import { createContext as M, forwardRef as l, useContext as S } from "react";
-import { addAutoFocusAttribute as B, addShowFocusRing as H } from "./fondue-components35.js";
-import r from "./fondue-components36.js";
+import { addAutoFocusAttribute as B, addShowFocusRing as H } from "./fondue-components36.js";
+import r from "./fondue-components37.js";
 const n = M({ isModal: !1 }), g = ({ children: t, ...o }) => /* @__PURE__ */ a(n.Provider, { value: { isModal: o.modal ?? !1 }, children: /* @__PURE__ */ a(i.Root, { ...o, children: t }) });
 g.displayName = "Dialog.Root";
 const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-dialog-trigger" }, d) => /* @__PURE__ */ a(

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.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 { createContext, forwardRef, useContext, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\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    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     * 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    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\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 = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return (\n        <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n            <RadixDialog.Root {...props}>{children}</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        children,\n        rounded = true,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDialog.Portal>\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={ref}\n                    className={styles.content}\n                    onFocus={addShowFocusRing}\n                    data-dialog-rounded={rounded}\n                    data-dialog-spacing={padding}\n                    data-test-id={dataTestId}\n                    data-dialog-vertical-align={verticalAlign}\n                    {...props}\n                >\n                    {children}\n                </RadixDialog.Content>\n            </DialogUnderlay>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        children,\n        showBorder = true,\n        showCloseButton = true,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { 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-show-border={showBorder}\n            data-dialog-layout-component\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.body} data-dialog-layout-component>\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 }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\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","props","RadixDialog","DialogTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","addShowFocusRing","DialogHeader","showBorder","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components7.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 { createContext, forwardRef, useContext, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\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    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     * 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    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\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 = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return (\n        <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n            <RadixDialog.Root {...props}>{children}</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        children,\n        rounded = true,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDialog.Portal>\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={ref}\n                    className={styles.content}\n                    onFocus={addShowFocusRing}\n                    data-dialog-rounded={rounded}\n                    data-dialog-spacing={padding}\n                    data-test-id={dataTestId}\n                    data-dialog-vertical-align={verticalAlign}\n                    {...props}\n                >\n                    {children}\n                </RadixDialog.Content>\n            </DialogUnderlay>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        children,\n        showBorder = true,\n        showCloseButton = true,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { 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-show-border={showBorder}\n            data-dialog-layout-component\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.body} data-dialog-layout-component>\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 }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\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","props","RadixDialog","DialogTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","addShowFocusRing","DialogHeader","showBorder","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}

package/dist/fondue-components8.js

@@ -1,8 +1,8 @@
 import { jsx as m } from "react/jsx-runtime";
 import * as s from "@radix-ui/react-separator";
 import { forwardRef as p } from "react";
-import { cn as f } from "./fondue-components25.js";
-import { dividerStyles as n } from "./fondue-components37.js";
+import { cn as f } from "./fondue-components26.js";
+import { dividerStyles as n } from "./fondue-components38.js";
 const r = ({
   "data-test-id": o = "fondue-divider",
   direction: t = "horizontal",

package/dist/fondue-components8.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components8.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const DividerComponent = (\n    {\n        'data-test-id': dataTestId = 'fondue-divider',\n        direction = 'horizontal',\n        className,\n        variant,\n        ...props\n    }: DividerProps,\n    ref: ForwardedRef<HTMLDivElement | null>,\n): ReactElement => {\n    return (\n        <Separator.Root\n            ref={ref}\n            className={cn(\n                dividerStyles({\n                    direction,\n                    variant,\n                    ...props,\n                }),\n                className,\n            )}\n            data-test-id={dataTestId}\n        />\n    );\n};\n\nDividerComponent.displayName = 'Divider';\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(DividerComponent);\n"],"names":["DividerComponent","dataTestId","direction","className","variant","props","ref","jsx","Separator","cn","dividerStyles","Divider","forwardRef"],"mappings":";;;;;AAuCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,gBAAgBC,IAAa;AAAA,EAC7B,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAU;AAAA,EAAV;AAAA,IACG,KAAAF;AAAA,IACA,WAAWG;AAAA,MACPC,EAAc;AAAA,QACV,WAAAR;AAAA,QACA,SAAAE;AAAA,QACA,GAAGC;AAAA,MAAA,CACN;AAAA,MACDF;AAAA,IACJ;AAAA,IACA,gBAAcF;AAAA,EAAA;AAAA;AAK1BD,EAAiB,cAAc;AAElB,MAAAW,IAAUC,EAAyCZ,CAAgB;"}
+{"version":3,"file":"fondue-components8.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const DividerComponent = (\n    {\n        'data-test-id': dataTestId = 'fondue-divider',\n        direction = 'horizontal',\n        className,\n        variant,\n        ...props\n    }: DividerProps,\n    ref: ForwardedRef<HTMLDivElement | null>,\n): ReactElement => {\n    return (\n        <Separator.Root\n            ref={ref}\n            className={cn(\n                dividerStyles({\n                    direction,\n                    variant,\n                    ...props,\n                }),\n                className,\n            )}\n            data-test-id={dataTestId}\n        />\n    );\n};\n\nDividerComponent.displayName = 'Divider';\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(DividerComponent);\n"],"names":["DividerComponent","dataTestId","direction","className","variant","props","ref","jsx","Separator","cn","dividerStyles","Divider","forwardRef"],"mappings":";;;;;AAuCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,gBAAgBC,IAAa;AAAA,EAC7B,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAU;AAAA,EAAV;AAAA,IACG,KAAAF;AAAA,IACA,WAAWG;AAAA,MACPC,EAAc;AAAA,QACV,WAAAR;AAAA,QACA,SAAAE;AAAA,QACA,GAAGC;AAAA,MAAA,CACN;AAAA,MACDF;AAAA,IACJ;AAAA,IACA,gBAAcF;AAAA,EAAA;AAClB;AAIRD,EAAiB,cAAc;AAElB,MAAAW,IAAUC,EAAyCZ,CAAgB;"}

package/dist/fondue-components9.js

@@ -1,106 +1,122 @@
-import { jsx as e, jsxs as T } from "react/jsx-runtime";
-import { IconCaretRight as F } from "@frontify/fondue-icons";
-import * as d from "@radix-ui/react-dropdown-menu";
-import { forwardRef as s, useRef as c } from "react";
-import { usePreventDropdownOverflow as I } from "./fondue-components38.js";
-import { syncRefs as m } from "./fondue-components35.js";
-import a from "./fondue-components39.js";
-const l = ({
+import { jsx as e, jsxs as I } from "react/jsx-runtime";
+import { IconCaretRight as h } from "@frontify/fondue-icons";
+import * as n from "@radix-ui/react-dropdown-menu";
+import { forwardRef as s, useRef as l } from "react";
+import { usePreventDropdownOverflow as v } from "./fondue-components39.js";
+import { syncRefs as f } from "./fondue-components36.js";
+import a from "./fondue-components40.js";
+const g = ({
   children: o,
   open: t,
   onOpenChange: r,
-  "data-test-id": n = "fondue-dropdown"
-}) => /* @__PURE__ */ e(d.Root, { open: t, onOpenChange: r, "data-test-id": n, children: o });
-l.displayName = "Dropdown.Root";
-const f = ({ asChild: o = !0, children: t, "data-test-id": r = "fondue-dropdown-trigger" }, n) => /* @__PURE__ */ e(d.Trigger, { asChild: o, "data-test-id": r, ref: n, children: t });
-f.displayName = "Dropdown.Trigger";
-const g = ({
+  "data-test-id": d = "fondue-dropdown"
+}) => /* @__PURE__ */ e(n.Root, { open: t, onOpenChange: r, "data-test-id": d, children: o });
+g.displayName = "Dropdown.Root";
+const D = ({ asChild: o = !0, children: t, "data-test-id": r = "fondue-dropdown-trigger" }, d) => /* @__PURE__ */ e(n.Trigger, { asChild: o, "data-test-id": r, ref: d, children: t });
+D.displayName = "Dropdown.Trigger";
+const b = ({
   onOpen: o,
   onClose: t,
   side: r = "bottom",
-  children: n,
-  "data-test-id": u = "fondue-dropdown-content"
-}, p) => {
-  const i = c(null), w = c(!1), { setMaxHeight: y } = I(i);
-  return /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(
-    d.Content,
+  padding: d = "comfortable",
+  align: p = "start",
+  children: u,
+  "data-test-id": c = "fondue-dropdown-content"
+}, m) => {
+  const i = l(null), w = l(!1), { setMaxHeight: F } = v(i);
+  return /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
+    n.Content,
     {
-      align: "start",
+      align: p,
       collisionPadding: 8,
       sideOffset: 8,
       side: r,
       className: a.content,
-      "data-test-id": u,
+      "data-padding": d,
+      "data-test-id": c,
       ref: i,
       onCloseAutoFocus: () => {
-        m(i, p), t && t(), w.current = !1;
+        f(i, m), t && t(), w.current = !1;
       },
       onFocus: () => {
-        w.current || (y(), m(i, p), o && o(), w.current = !0);
+        w.current || (F(), f(i, m), o && o(), w.current = !0);
       },
-      children: n
+      children: u
     }
   ) });
 };
-g.displayName = "Dropdown.Content";
-const D = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, r) => /* @__PURE__ */ e(d.Group, { className: a.group, "data-test-id": t, ref: r, children: o });
-D.displayName = "Dropdown.Group";
-const b = ({
+b.displayName = "Dropdown.Content";
+const N = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, r) => /* @__PURE__ */ e(n.Group, { className: a.group, "data-test-id": t, ref: r, children: o });
+N.displayName = "Dropdown.Group";
+const S = ({
   children: o,
   "data-test-id": t = "fondue-dropdown-submenu"
-}) => /* @__PURE__ */ e(d.Sub, { "data-test-id": t, children: o });
-b.displayName = "Dropdown.SubMenu";
-const N = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, r) => /* @__PURE__ */ T(d.SubTrigger, { className: a.subTrigger, "data-test-id": t, ref: r, children: [
+}) => /* @__PURE__ */ e(n.Sub, { "data-test-id": t, children: o });
+S.displayName = "Dropdown.SubMenu";
+const R = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, r) => /* @__PURE__ */ I(n.SubTrigger, { className: a.subTrigger, "data-test-id": t, ref: r, children: [
   /* @__PURE__ */ e("div", { className: a.itemContent, children: o }),
-  /* @__PURE__ */ e(F, { className: a.subMenuIndicator, size: 16 })
+  /* @__PURE__ */ e(h, { className: a.subMenuIndicator, size: 16 })
 ] });
-N.displayName = "Dropdown.SubTrigger";
-const S = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, r) => /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(d.SubContent, { className: a.subContent, "data-test-id": t, ref: r, children: o }) });
-S.displayName = "Dropdown.SubContent";
-const R = ({
+R.displayName = "Dropdown.SubTrigger";
+const C = ({
+  padding: o = "comfortable",
+  children: t,
+  "data-test-id": r = "fondue-dropdown-subcontent"
+}, d) => /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
+  n.SubContent,
+  {
+    className: a.subContent,
+    "data-padding": o,
+    "data-test-id": r,
+    ref: d,
+    children: t
+  }
+) });
+C.displayName = "Dropdown.SubContent";
+const y = ({
   children: o,
   disabled: t,
   textValue: r,
-  onSelect: n,
-  "data-test-id": u = "fondue-dropdown-subtrigger",
-  ...p
-}, i) => /* @__PURE__ */ e(
-  d.Item,
+  onSelect: d,
+  "data-test-id": p = "fondue-dropdown-subtrigger",
+  ...u
+}, c) => /* @__PURE__ */ e(
+  n.Item,
   {
-    onSelect: n,
+    onSelect: d,
     className: a.item,
     textValue: r,
-    "data-test-id": u,
-    ref: i,
+    "data-test-id": p,
+    ref: c,
     disabled: t,
-    ...p,
+    ...u,
     children: /* @__PURE__ */ e("div", { className: a.itemContent, children: o })
   }
 );
-R.displayName = "Dropdown.Item";
-const C = ({ children: o, name: t, "data-test-id": r = "fondue-dropdown-slot" }, n) => /* @__PURE__ */ e("div", { "data-name": t, className: a.slot, "data-test-id": r, ref: n, children: o });
-C.displayName = "Dropdown.Slot";
-const h = s(f), v = s(g), x = s(D), G = s(N), M = s(S), P = s(R), j = s(C), B = {
-  Root: l,
-  Trigger: h,
-  Content: v,
-  Group: x,
-  SubMenu: b,
-  SubTrigger: G,
-  SubContent: M,
-  Item: P,
-  Slot: j
+y.displayName = "Dropdown.Item";
+const T = ({ children: o, name: t, "data-test-id": r = "fondue-dropdown-slot" }, d) => /* @__PURE__ */ e("div", { "data-name": t, className: a.slot, "data-test-id": r, ref: d, children: o });
+T.displayName = "Dropdown.Slot";
+const x = s(D), G = s(b), M = s(N), P = s(R), j = s(C), O = s(y), z = s(T), J = {
+  Root: g,
+  Trigger: x,
+  Content: G,
+  Group: M,
+  SubMenu: S,
+  SubTrigger: P,
+  SubContent: j,
+  Item: O,
+  Slot: z
 };
 export {
-  B as Dropdown,
-  g as DropdownContent,
-  D as DropdownGroup,
-  R as DropdownItem,
-  l as DropdownRoot,
-  C as DropdownSlot,
-  S as DropdownSubContent,
-  b as DropdownSubMenu,
-  N as DropdownSubTrigger,
-  f as DropdownTrigger
+  J as Dropdown,
+  b as DropdownContent,
+  N as DropdownGroup,
+  y as DropdownItem,
+  g as DropdownRoot,
+  T as DropdownSlot,
+  C as DropdownSubContent,
+  S as DropdownSubMenu,
+  R as DropdownSubTrigger,
+  D as DropdownTrigger
 };
 //# sourceMappingURL=fondue-components9.js.map

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\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 const DropdownTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dropdown-trigger' }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    onOpen?: () => void;\n    onClose?: () => void;\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const DropdownContent = (\n    {\n        onOpen,\n        onClose,\n        side = 'bottom',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n    const dropdownIsOpen = useRef(false);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.Content\n                align=\"start\"\n                collisionPadding={8}\n                sideOffset={8}\n                side={side}\n                className={styles.content}\n                data-test-id={dataTestId}\n                ref={localRef}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                    onClose && onClose();\n                    dropdownIsOpen.current = false;\n                }}\n                onFocus={() => {\n                    if (!dropdownIsOpen.current) {\n                        setMaxHeight();\n                        syncRefs(localRef, ref);\n                        onOpen && onOpen();\n                        dropdownIsOpen.current = true;\n                    }\n                }}\n            >\n                {children}\n            </RadixDropdown.Content>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            <div className={styles.itemContent}>{children}</div>\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                {children}\n            </RadixDropdown.SubContent>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            ref={ref}\n            disabled={disabled}\n            {...props}\n        >\n            <div className={styles.itemContent}>{children}</div>\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","ref","DropdownContent","onOpen","onClose","side","localRef","useRef","dropdownIsOpen","setMaxHeight","usePreventDropdownOverflow","styles","syncRefs","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","props","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\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 const DropdownTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dropdown-trigger' }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    onOpen?: () => void;\n    onClose?: () => void;\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const DropdownContent = (\n    {\n        onOpen,\n        onClose,\n        side = 'bottom',\n        padding = 'comfortable',\n        align = 'start',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n    const dropdownIsOpen = useRef(false);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.Content\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                side={side}\n                className={styles.content}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={localRef}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                    onClose && onClose();\n                    dropdownIsOpen.current = false;\n                }}\n                onFocus={() => {\n                    if (!dropdownIsOpen.current) {\n                        setMaxHeight();\n                        syncRefs(localRef, ref);\n                        onOpen && onOpen();\n                        dropdownIsOpen.current = true;\n                    }\n                }}\n            >\n                {children}\n            </RadixDropdown.Content>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            <div className={styles.itemContent}>{children}</div>\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    {\n        padding = 'comfortable',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-subcontent',\n    }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent\n                className={styles.subContent}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={ref}\n            >\n                {children}\n            </RadixDropdown.SubContent>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            ref={ref}\n            disabled={disabled}\n            {...props}\n        >\n            <div className={styles.itemContent}>{children}</div>\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","ref","DropdownContent","onOpen","onClose","side","padding","align","localRef","useRef","dropdownIsOpen","setMaxHeight","usePreventDropdownOverflow","styles","syncRefs","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","props","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}

package/dist/index.d.ts

@@ -482,6 +482,16 @@ declare type DropdownContentProps = {
     'data-test-id'?: string;
     onOpen?: () => void;
     onClose?: () => void;
+    /**
+     * The vertical padding around each dropdown item.
+     * @default "comfortable"
+     */
+    padding?: 'comfortable' | 'compact';
+    /**
+     * Defines the alignment of the dropdown.
+     * @default "start"
+     */
+    align?: 'start' | 'center' | 'end';
     /**
      * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.
      * @default "bottom"
@@ -531,6 +541,11 @@ declare type DropdownSlotProps = {
 };
 
 declare type DropdownSubContentProps = {
+    /**
+     * The vertical padding around each dropdown item.
+     * @default "comfortable"
+     */
+    padding?: 'comfortable' | 'compact';
     children: ReactNode;
     'data-test-id'?: string;
 };
@@ -622,11 +637,16 @@ declare type FlyoutBodyProps = {
 };
 
 declare type FlyoutContentProps = {
+    /**
+     * Add a shadow to the flyout
+     * @default "medium"
+     */
+    shadow?: 'none' | 'medium' | 'large';
     /**
      * Add rounded corners to the flyout
-     * @default true
+     * @default "medium"
      */
-    rounded?: boolean;
+    rounded?: 'none' | 'medium' | 'large';
     /**
      * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.
      * @default "bottom"
@@ -642,6 +662,11 @@ declare type FlyoutContentProps = {
      * @default "compact"
      */
     padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
+    /**
+     * Define the fixed width of the flyout
+     * @default "fit-content"
+     */
+    width?: string;
     /**
      * Define the maximum width of the flyout
      * @default "360px"
@@ -1241,6 +1266,50 @@ declare type SwitchProps = {
     'data-test-id'?: string;
 } & CommonAriaAttrs;
 
+export declare const Tabs: {
+    Root: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;
+    Tab: ForwardRefExoticComponent<TabsTabProps & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<TabsTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<TabsContentProps & RefAttributes<HTMLDivElement>>;
+};
+
+declare type TabsContentProps = {
+    children: ReactNode;
+};
+
+declare type TabsRootProps = {
+    id?: string;
+    children: ReactNode;
+    /**
+     * The default active tab
+     * Used for uncontrolled components
+     */
+    defaultActiveTab?: string;
+    /**
+     * The controlled value of the active tab
+     */
+    activeTab?: string;
+    /**
+     * The height of the tabs
+     * @default 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Event handler called when the active tab changes
+     */
+    onActiveTabChange?: (value: string) => void;
+};
+
+declare type TabsTabProps = {
+    children: ReactNode;
+    value: string;
+    disabled?: boolean;
+};
+
+declare type TabsTriggerProps = {
+    children: ReactNode;
+};
+
 declare const TextFieldRoot: {
     ({ children, className, status, "data-test-id": dataTestId, ...inputProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>): JSX_2.Element;
     displayName: string;