@frontify/fondue-components 12.0.0 → 12.0.1

package/dist/fondue-components9.js

@@ -3,68 +3,73 @@ import { IconCaretRight as F } from "@frontify/fondue-icons";
 import * as n from "@radix-ui/react-dropdown-menu";
 import { Slot as I } from "@radix-ui/react-slot";
 import { forwardRef as i } from "react";
-import { useFondueTheme as G, ThemeProvider as P } from "./fondue-components25.js";
-import { useProcessedChildren as c } from "./fondue-components41.js";
+import { useFondueTheme as P, ThemeProvider as G } from "./fondue-components25.js";
+import { useProcessedChildren as w } from "./fondue-components41.js";
 import s from "./fondue-components42.js";
-const w = ({
+const l = ({
   children: o,
   open: t,
   modal: e = !1,
   onOpenChange: d,
   "data-test-id": a = "fondue-dropdown"
 }) => /* @__PURE__ */ r(n.Root, { open: t, modal: e, onOpenChange: d, "data-test-id": a, children: o });
-w.displayName = "Dropdown.Root";
-const l = ({
+l.displayName = "Dropdown.Root";
+const f = ({
   asChild: o = !0,
   children: t,
   "data-test-id": e = "fondue-dropdown-trigger",
   ...d
 }, a) => /* @__PURE__ */ r(n.Trigger, { asChild: o, "data-test-id": e, ref: a, ...d, children: t });
-l.displayName = "Dropdown.Trigger";
-const f = ({
+f.displayName = "Dropdown.Trigger";
+const M = {
+  compact: 8,
+  comfortable: 12,
+  spacious: 16
+}, g = ({
   side: o = "bottom",
   align: t = "start",
-  children: e,
-  preventTriggerFocusOnClose: d,
-  "data-test-id": a = "fondue-dropdown-content"
-}, p) => {
-  const u = G();
-  return /* @__PURE__ */ r(n.Portal, { children: /* @__PURE__ */ r(P, { theme: u, children: /* @__PURE__ */ r(
+  triggerOffset: e = "compact",
+  children: d,
+  preventTriggerFocusOnClose: a,
+  "data-test-id": p = "fondue-dropdown-content"
+}, u) => {
+  const c = P();
+  return /* @__PURE__ */ r(n.Portal, { children: /* @__PURE__ */ r(G, { theme: c, children: /* @__PURE__ */ r(
     n.Content,
     {
       align: t,
       collisionPadding: 8,
-      sideOffset: 8,
+      sideOffset: M[e],
       side: o,
       className: s.content,
-      "data-test-id": a,
-      ref: p,
+      "data-test-id": p,
+      ref: u,
       onCloseAutoFocus: (m) => {
-        d && m.preventDefault();
+        a && m.preventDefault();
       },
-      children: e
+      children: d
     }
   ) }) });
 };
-f.displayName = "Dropdown.Content";
-const g = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, e) => /* @__PURE__ */ r(n.Group, { className: s.group, "data-test-id": t, ref: e, children: o });
-g.displayName = "Dropdown.Group";
-const D = ({
+g.displayName = "Dropdown.Content";
+const D = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, e) => /* @__PURE__ */ r(n.Group, { className: s.group, "data-test-id": t, ref: e, children: o });
+D.displayName = "Dropdown.Group";
+const b = ({
   children: o,
   "data-test-id": t = "fondue-dropdown-submenu"
 }) => /* @__PURE__ */ r(n.Sub, { "data-test-id": t, children: o });
-D.displayName = "Dropdown.SubMenu";
-const b = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, e) => {
-  const { content: d } = c(o);
+b.displayName = "Dropdown.SubMenu";
+const S = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, e) => {
+  const { content: d } = w(o);
   return /* @__PURE__ */ y(n.SubTrigger, { className: s.subTrigger, "data-test-id": t, ref: e, children: [
     d,
     /* @__PURE__ */ r(F, { className: s.subMenuIndicator, size: 16 })
   ] });
 };
-b.displayName = "Dropdown.SubTrigger";
-const S = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, e) => /* @__PURE__ */ r(n.Portal, { children: /* @__PURE__ */ r(n.SubContent, { className: s.subContent, "data-test-id": t, ref: e, children: o }) });
-S.displayName = "Dropdown.SubContent";
-const N = ({
+S.displayName = "Dropdown.SubTrigger";
+const N = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, e) => /* @__PURE__ */ r(n.Portal, { children: /* @__PURE__ */ r(n.SubContent, { className: s.subContent, "data-test-id": t, ref: e, children: o }) });
+N.displayName = "Dropdown.SubContent";
+const C = ({
   children: o,
   disabled: t,
   textValue: e,
@@ -72,8 +77,8 @@ const N = ({
   emphasis: a = "default",
   "data-test-id": p = "fondue-dropdown-subtrigger",
   ...u
-}, m) => {
-  const { content: R, isLink: h } = c(o), T = h ? I : "div";
+}, c) => {
+  const { content: m, isLink: h } = w(o), T = h ? I : "div";
   return /* @__PURE__ */ r(
     n.Item,
     {
@@ -82,38 +87,38 @@ const N = ({
       textValue: e,
       "data-test-id": p,
       "data-emphasis": a,
-      ref: m,
+      ref: c,
       disabled: t,
       asChild: !0,
       ...u,
-      children: /* @__PURE__ */ r(T, { children: R })
+      children: /* @__PURE__ */ r(T, { children: m })
     }
   );
 };
-N.displayName = "Dropdown.Item";
-const C = ({ children: o, name: t, "data-test-id": e = "fondue-dropdown-slot" }, d) => /* @__PURE__ */ r("div", { "data-name": t, className: s.slot, "data-test-id": e, ref: d, children: o });
-C.displayName = "Dropdown.Slot";
-const v = i(l), x = i(f), M = i(g), j = i(b), k = i(S), z = i(N), A = i(C), J = {
-  Root: w,
+C.displayName = "Dropdown.Item";
+const R = ({ children: o, name: t, "data-test-id": e = "fondue-dropdown-slot" }, d) => /* @__PURE__ */ r("div", { "data-name": t, className: s.slot, "data-test-id": e, ref: d, children: o });
+R.displayName = "Dropdown.Slot";
+const v = i(f), x = i(g), A = i(D), j = i(S), k = i(N), z = i(C), L = i(R), J = {
+  Root: l,
   Trigger: v,
   Content: x,
-  Group: M,
-  SubMenu: D,
+  Group: A,
+  SubMenu: b,
   SubTrigger: j,
   SubContent: k,
   Item: z,
-  Slot: A
+  Slot: L
 };
 export {
   J as Dropdown,
-  f as DropdownContent,
-  g as DropdownGroup,
-  N as DropdownItem,
-  w as DropdownRoot,
-  C as DropdownSlot,
-  S as DropdownSubContent,
-  D as DropdownSubMenu,
-  b as DropdownSubTrigger,
-  l as DropdownTrigger
+  g as DropdownContent,
+  D as DropdownGroup,
+  C as DropdownItem,
+  l as DropdownRoot,
+  R as DropdownSlot,
+  N as DropdownSubContent,
+  b as DropdownSubMenu,
+  S as DropdownSubTrigger,
+  f 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 { Slot } from '@radix-ui/react-slot';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n     * @default false\n     */\n    modal?: boolean;\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\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    modal = false,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} modal={modal} 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    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\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     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        children,\n        preventTriggerFocusOnClose,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.Content\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={8}\n                    side={side}\n                    className={styles.content}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                >\n                    {children}\n                </RadixDropdown.Content>\n            </ThemeProvider>\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    const { content } = useProcessedChildren(children);\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            {content}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    children: ReactNode;\n    'data-test-id'?: string;\n};\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     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\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        emphasis = 'default',\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content, isLink } = useProcessedChildren(children);\n\n    const Wrapper = isLink ? Slot : 'div';\n\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            asChild\n            {...props}\n        >\n            <Wrapper>{content}</Wrapper>\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","modal","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","DropdownContent","side","align","preventTriggerFocusOnClose","theme","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","isLink","Wrapper","Slot","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 { Slot } from '@radix-ui/react-slot';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n     * @default false\n     */\n    modal?: boolean;\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\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    modal = false,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} modal={modal} 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    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\ntype DropdownSpacing = 'compact' | 'comfortable' | 'spacious';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\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     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: DropdownSpacing;\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.Content\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={side}\n                    className={styles.content}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                >\n                    {children}\n                </RadixDropdown.Content>\n            </ThemeProvider>\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    const { content } = useProcessedChildren(children);\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            {content}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    children: ReactNode;\n    'data-test-id'?: string;\n};\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     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\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        emphasis = 'default',\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content, isLink } = useProcessedChildren(children);\n\n    const Wrapper = isLink ? Slot : 'div';\n\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            asChild\n            {...props}\n        >\n            <Wrapper>{content}</Wrapper>\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","modal","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","SPACING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","theme","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","isLink","Wrapper","Slot","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}

package/dist/index.d.ts

@@ -542,6 +542,11 @@ declare type DropdownContentProps = {
      * @default "bottom"
      */
     side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Defines the spacing between the dropdown and its trigger.
+     * @default 'compact'
+     */
+    triggerOffset?: DropdownSpacing;
     /**
      * Prevents the focus from being set on the trigger when the dropdown is closed.
      */
@@ -599,6 +604,8 @@ declare type DropdownSlotProps = {
     'data-test-id'?: string;
 };
 
+declare type DropdownSpacing = 'compact' | 'comfortable' | 'spacious';
+
 declare type DropdownSubContentProps = {
     children: ReactNode;
     'data-test-id'?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontify/fondue-components",
   "type": "module",
-  "version": "12.0.0",
+  "version": "12.0.1",
   "homepage": "https://github.com/Frontify/fondue",
   "repository": {
     "type": "git",
@@ -102,8 +102,8 @@
     "vite-plugin-dts": "^4.5.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.4",
-    "@frontify/fondue-tokens": "^3.7.0",
-    "@frontify/fondue-icons": "^0.12.0"
+    "@frontify/fondue-icons": "^0.12.0",
+    "@frontify/fondue-tokens": "^3.7.0"
   },
   "scripts": {
     "build": "vite build",