@frontify/fondue-components 4.0.1 → 4.0.2

package/dist/fondue-components9.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as I } from "react/jsx-runtime";
 import { IconCaretRight as h } from "@frontify/fondue-icons";
-import * as d from "@radix-ui/react-dropdown-menu";
+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";
@@ -9,30 +9,30 @@ 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 });
+  "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" }, n) => /* @__PURE__ */ e(d.Trigger, { asChild: o, "data-test-id": r, ref: n, children: t });
+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",
-  padding: n = "comfortable",
+  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(d.Portal, { children: /* @__PURE__ */ e(
-    d.Content,
+  return /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
+    n.Content,
     {
       align: p,
       collisionPadding: 8,
       sideOffset: 8,
       side: r,
       className: a.content,
-      "data-padding": n,
+      "data-padding": d,
       "data-test-id": c,
       ref: i,
       onCloseAutoFocus: () => {
@@ -46,31 +46,44 @@ const b = ({
   ) });
 };
 b.displayName = "Dropdown.Content";
-const N = ({ 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 });
+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 });
+}) => /* @__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(d.SubTrigger, { className: a.subTrigger, "data-test-id": t, ref: r, children: [
+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(h, { className: a.subMenuIndicator, size: 16 })
 ] });
 R.displayName = "Dropdown.SubTrigger";
-const C = ({ 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 }) });
+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,
+  onSelect: d,
   "data-test-id": p = "fondue-dropdown-subtrigger",
   ...u
 }, c) => /* @__PURE__ */ e(
-  d.Item,
+  n.Item,
   {
-    onSelect: n,
+    onSelect: d,
     className: a.item,
     textValue: r,
     "data-test-id": p,
@@ -81,7 +94,7 @@ const y = ({
   }
 );
 y.displayName = "Dropdown.Item";
-const T = ({ 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 });
+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,

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     * 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 = { 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","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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"}
+{"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

@@ -541,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;
 };
@@ -632,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"
@@ -652,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"