@frontify/fondue-components 8.0.2 → 10.0.0

package/dist/fondue-components9.js

@@ -1,129 +1,143 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { IconCaretRight as F } from "@frontify/fondue-icons";
+import { jsx as e, jsxs as F } from "react/jsx-runtime";
+import { IconCaretRight as x } 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 s } from "react";
-import { useProcessedChildren as w } from "./fondue-components40.js";
-import a from "./fondue-components41.js";
-const m = ({
+import { forwardRef as i } from "react";
+import { useProcessedChildren as g } from "./fondue-components40.js";
+import s from "./fondue-components41.js";
+const f = ({
   children: o,
   open: t,
-  onOpenChange: r,
-  "data-test-id": d = "fondue-dropdown"
-}) => /* @__PURE__ */ e(n.Root, { open: t, onOpenChange: r, "data-test-id": d, children: o });
-m.displayName = "Dropdown.Root";
-const l = ({
+  onOpenChange: d,
+  "data-test-id": r = "fondue-dropdown"
+}) => /* @__PURE__ */ e(n.Root, { open: t, onOpenChange: d, "data-test-id": r, children: o });
+f.displayName = "Dropdown.Root";
+const D = ({
   asChild: o = !0,
   children: t,
-  "data-test-id": r = "fondue-dropdown-trigger",
-  ...d
-}, i) => /* @__PURE__ */ e(n.Trigger, { asChild: o, "data-test-id": r, ref: i, ...d, children: t });
-l.displayName = "Dropdown.Trigger";
-const g = ({
+  "data-test-id": d = "fondue-dropdown-trigger",
+  ...r
+}, a) => /* @__PURE__ */ e(n.Trigger, { asChild: o, "data-test-id": d, ref: a, ...r, children: t });
+D.displayName = "Dropdown.Trigger";
+const b = ({
   side: o = "bottom",
   padding: t = "comfortable",
-  align: r = "start",
-  children: d,
-  preventTriggerFocusOnClose: i,
-  "data-test-id": p = "fondue-dropdown-content"
-}, u) => /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
+  align: d = "start",
+  rounded: r = "medium",
+  shadow: a = "medium",
+  minWidth: p = "250px",
+  maxWidth: u = "350px",
+  children: m,
+  preventTriggerFocusOnClose: w,
+  "data-test-id": c = "fondue-dropdown-content"
+}, l) => /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
   n.Content,
   {
-    align: r,
+    style: {
+      "--dropdown-max-width": u,
+      "--dropdown-min-width": p
+    },
+    align: d,
     collisionPadding: 8,
     sideOffset: 8,
     side: o,
-    className: a.content,
+    className: s.content,
     "data-padding": t,
-    "data-test-id": p,
-    ref: u,
-    onCloseAutoFocus: (c) => {
-      i && c.preventDefault();
+    "data-test-id": c,
+    "data-rounded": r,
+    "data-shadow": a,
+    ref: l,
+    onCloseAutoFocus: (T) => {
+      w && T.preventDefault();
     },
-    children: d
+    children: m
   }
 ) });
-g.displayName = "Dropdown.Content";
-const f = ({ 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 });
-f.displayName = "Dropdown.Group";
-const D = ({
+b.displayName = "Dropdown.Content";
+const S = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, d) => /* @__PURE__ */ e(n.Group, { className: s.group, "data-test-id": t, ref: d, children: o });
+S.displayName = "Dropdown.Group";
+const N = ({
   children: o,
   "data-test-id": t = "fondue-dropdown-submenu"
 }) => /* @__PURE__ */ e(n.Sub, { "data-test-id": t, children: o });
-D.displayName = "Dropdown.SubMenu";
-const b = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, r) => {
-  const { content: d } = w(o);
-  return /* @__PURE__ */ h(n.SubTrigger, { className: a.subTrigger, "data-test-id": t, ref: r, children: [
-    d,
-    /* @__PURE__ */ e(F, { className: a.subMenuIndicator, size: 16 })
+N.displayName = "Dropdown.SubMenu";
+const C = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, d) => {
+  const { content: r } = g(o);
+  return /* @__PURE__ */ F(n.SubTrigger, { className: s.subTrigger, "data-test-id": t, ref: d, children: [
+    r,
+    /* @__PURE__ */ e(x, { className: s.subMenuIndicator, size: 16 })
   ] });
 };
-b.displayName = "Dropdown.SubTrigger";
-const S = ({
+C.displayName = "Dropdown.SubTrigger";
+const R = ({
   padding: o = "comfortable",
-  children: t,
-  "data-test-id": r = "fondue-dropdown-subcontent"
-}, d) => /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
+  rounded: t = "medium",
+  shadow: d = "medium",
+  children: r,
+  "data-test-id": a = "fondue-dropdown-subcontent"
+}, p) => /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
   n.SubContent,
   {
-    className: a.subContent,
+    className: s.subContent,
     "data-padding": o,
-    "data-test-id": r,
-    ref: d,
-    children: t
+    "data-rounded": t,
+    "data-shadow": d,
+    "data-test-id": a,
+    ref: p,
+    children: r
   }
 ) });
-S.displayName = "Dropdown.SubContent";
-const N = ({
+R.displayName = "Dropdown.SubContent";
+const h = ({
   children: o,
   disabled: t,
-  textValue: r,
-  onSelect: d,
-  emphasis: i = "default",
+  textValue: d,
+  onSelect: r,
+  emphasis: a = "default",
   "data-test-id": p = "fondue-dropdown-subtrigger",
   ...u
-}, c) => {
-  const { content: R, isLink: T } = w(o), y = T ? I : "div";
+}, m) => {
+  const { content: w, isLink: c } = g(o), l = c ? I : "div";
   return /* @__PURE__ */ e(
     n.Item,
     {
-      onSelect: d,
-      className: a.item,
-      textValue: r,
+      onSelect: r,
+      className: s.item,
+      textValue: d,
       "data-test-id": p,
-      "data-emphasis": i,
-      ref: c,
+      "data-emphasis": a,
+      ref: m,
       disabled: t,
       asChild: !0,
       ...u,
-      children: /* @__PURE__ */ e(y, { children: R })
+      children: /* @__PURE__ */ e(l, { children: w })
     }
   );
 };
-N.displayName = "Dropdown.Item";
-const C = ({ 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 });
-C.displayName = "Dropdown.Slot";
-const G = s(l), x = s(g), M = s(f), P = s(b), v = s(S), j = s(N), k = s(C), B = {
-  Root: m,
+h.displayName = "Dropdown.Item";
+const y = ({ children: o, name: t, "data-test-id": d = "fondue-dropdown-slot" }, r) => /* @__PURE__ */ e("div", { "data-name": t, className: s.slot, "data-test-id": d, ref: r, children: o });
+y.displayName = "Dropdown.Slot";
+const G = i(D), M = i(b), P = i(S), v = i(C), j = i(R), k = i(h), z = i(y), E = {
+  Root: f,
   Trigger: G,
-  Content: x,
-  Group: M,
-  SubMenu: D,
-  SubTrigger: P,
-  SubContent: v,
-  Item: j,
-  Slot: k
+  Content: M,
+  Group: P,
+  SubMenu: N,
+  SubTrigger: v,
+  SubContent: j,
+  Item: k,
+  Slot: z
 };
 export {
-  B as Dropdown,
-  g as DropdownContent,
-  f as DropdownGroup,
-  N as DropdownItem,
-  m as DropdownRoot,
-  C as DropdownSlot,
-  S as DropdownSubContent,
-  D as DropdownSubMenu,
-  b as DropdownSubTrigger,
-  l as DropdownTrigger
+  E as Dropdown,
+  b as DropdownContent,
+  S as DropdownGroup,
+  h as DropdownItem,
+  f as DropdownRoot,
+  y as DropdownSlot,
+  R as DropdownSubContent,
+  N as DropdownSubMenu,
+  C 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 { Slot } from '@radix-ui/react-slot';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\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\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n\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    {\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     * 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     * 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        padding = 'comfortable',\n        align = 'start',\n        children,\n        preventTriggerFocusOnClose,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\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={ref}\n                onCloseAutoFocus={(event) => {\n                    if (preventTriggerFocusOnClose) {\n                        event.preventDefault();\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    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    /**\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     * 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","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","DropdownContent","side","padding","align","preventTriggerFocusOnClose","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 { type CSSProperties, forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\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\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n\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    {\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    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define a minimum width for the dropdown\n     * @default \"250px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a maximum width for the dropdown\n     * @default \"350px\"\n     */\n    maxWidth?: string;\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     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        padding = 'comfortable',\n        align = 'start',\n        rounded = 'medium',\n        shadow = 'medium',\n        minWidth = '250px',\n        maxWidth = '350px',\n        children,\n        preventTriggerFocusOnClose,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.Content\n                style={\n                    {\n                        '--dropdown-max-width': maxWidth,\n                        '--dropdown-min-width': minWidth,\n                    } as CSSProperties\n                }\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                data-rounded={rounded}\n                data-shadow={shadow}\n                ref={ref}\n                onCloseAutoFocus={(event) => {\n                    if (preventTriggerFocusOnClose) {\n                        event.preventDefault();\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    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    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\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        rounded = 'medium',\n        shadow = 'medium',\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-rounded={rounded}\n                data-shadow={shadow}\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     * 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","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","DropdownContent","side","padding","align","rounded","shadow","minWidth","maxWidth","preventTriggerFocusOnClose","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

@@ -349,6 +349,10 @@ declare type DialogAnnouncementProps = {
 };
 
 declare type DialogBodyProps = {
+    /**
+     * Define the padding for the dialog body
+     */
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     children?: ReactNode;
     'data-test-id'?: string;
 };
@@ -398,6 +402,10 @@ declare type DialogContentProps = {
 };
 
 declare type DialogFooterProps = {
+    /**
+     * Define the padding for the dialog footer
+     */
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * Show a border at the top of the footer
      * @default true
@@ -408,6 +416,10 @@ declare type DialogFooterProps = {
 };
 
 declare type DialogHeaderProps = {
+    /**
+     * Define the padding for the dialog header
+     */
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * Show a border at the bottom of the header
      * @default true
@@ -509,8 +521,26 @@ export declare const Dropdown: {
 };
 
 declare type DropdownContentProps = {
-    children?: ReactNode;
-    'data-test-id'?: string;
+    /**
+     * Add a shadow to the flyout
+     * @default "medium"
+     */
+    shadow?: 'none' | 'medium' | 'large';
+    /**
+     * Add rounded corners to the flyout
+     * @default "medium"
+     */
+    rounded?: 'none' | 'medium' | 'large';
+    /**
+     * Define a minimum width for the dropdown
+     * @default "250px"
+     */
+    minWidth?: string;
+    /**
+     * Define a maximum width for the dropdown
+     * @default "350px"
+     */
+    maxWidth?: string;
     /**
      * The vertical padding around each dropdown item.
      * @default "comfortable"
@@ -530,6 +560,8 @@ declare type DropdownContentProps = {
      * Prevents the focus from being set on the trigger when the dropdown is closed.
      */
     preventTriggerFocusOnClose?: boolean;
+    children?: ReactNode;
+    'data-test-id'?: string;
 };
 
 declare type DropdownGroupProps = {
@@ -579,6 +611,16 @@ declare type DropdownSlotProps = {
 };
 
 declare type DropdownSubContentProps = {
+    /**
+     * Add a shadow to the flyout
+     * @default "medium"
+     */
+    shadow?: 'none' | 'medium' | 'large';
+    /**
+     * Add rounded corners to the flyout
+     * @default "medium"
+     */
+    rounded?: 'none' | 'medium' | 'large';
     /**
      * The vertical padding around each dropdown item.
      * @default "comfortable"
@@ -1395,6 +1437,11 @@ declare type TableRootProps = {
      * @default 'auto'
      */
     layout?: 'auto' | 'fixed';
+    /**
+     * Font size of the table content
+     * @default 'small'
+     */
+    fontSize?: 'small' | 'medium';
     /**
      * Whether header should stick to the top when scrolling
      */
@@ -1437,6 +1484,11 @@ declare type TabsContentProps = {
 declare type TabsRootProps = {
     id?: string;
     children: ReactNode;
+    /**
+     * Define the padding of the dialog
+     * @default "compact"
+     */
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * The default active tab
      * Used for uncontrolled components