@frontify/fondue-components 15.0.1 → 16.0.0

package/dist/fondue-components10.js

@@ -1,130 +1,137 @@
-import { jsx as d, jsxs as m } from "react/jsx-runtime";
-import { IconCaretRight as I } from "@frontify/fondue-icons";
-import * as n from "@radix-ui/react-dropdown-menu";
-import { forwardRef as i } from "react";
-import { useFondueTheme as w, ThemeProvider as f } from "./fondue-components28.js";
-import { useProcessedChildren as g } from "./fondue-components47.js";
-import a from "./fondue-components48.js";
-const D = ({
-  children: t,
-  open: o,
-  modal: e = !1,
-  onOpenChange: r,
-  "data-test-id": s = "fondue-dropdown"
-}) => /* @__PURE__ */ d(n.Root, { open: o, modal: e, onOpenChange: r, "data-test-id": s, children: t });
-D.displayName = "Dropdown.Root";
+import { jsx as n, jsxs as w } from "react/jsx-runtime";
+import { IconCaretRight as P } from "@frontify/fondue-icons";
+import * as d from "@radix-ui/react-dropdown-menu";
+import { forwardRef as i, useMemo as F, Children as G } from "react";
+import { useFondueTheme as f, ThemeProvider as g } from "./fondue-components28.js";
+import { useProcessedChildren as D } from "./fondue-components47.js";
+import s from "./fondue-components48.js";
 const b = ({
-  asChild: t = !0,
   children: o,
+  open: t,
+  modal: e = !1,
+  onOpenChange: r,
+  "data-test-id": a = "fondue-dropdown"
+}) => /* @__PURE__ */ n(d.Root, { open: t, modal: e, onOpenChange: r, "data-test-id": a, children: o });
+b.displayName = "Dropdown.Root";
+const N = ({
+  asChild: o = !0,
+  children: t,
   "data-test-id": e = "fondue-dropdown-trigger",
   ...r
-}, s) => /* @__PURE__ */ d(n.Trigger, { asChild: t, "data-test-id": e, ref: s, ...r, children: o });
-b.displayName = "Dropdown.Trigger";
-const P = {
+}, a) => /* @__PURE__ */ n(d.Trigger, { asChild: o, "data-test-id": e, ref: a, ...r, children: t });
+N.displayName = "Dropdown.Trigger";
+const M = {
   compact: 8,
   comfortable: 12,
   spacious: 16
+}, A = {
+  compact: 8,
+  spacious: 24
 }, S = ({
-  side: t = "bottom",
-  align: o = "start",
+  side: o = "bottom",
+  align: t = "start",
   triggerOffset: e = "compact",
   children: r,
-  preventTriggerFocusOnClose: s,
-  "data-test-id": p = "fondue-dropdown-content"
-}, u) => {
-  const c = w();
-  return /* @__PURE__ */ d(n.Portal, { children: /* @__PURE__ */ d(f, { theme: c, children: /* @__PURE__ */ d(
-    n.Content,
+  preventTriggerFocusOnClose: a,
+  viewportCollisionPadding: p = "compact",
+  "data-test-id": u = "fondue-dropdown-content"
+}, c) => {
+  const l = f();
+  return /* @__PURE__ */ n(d.Portal, { children: /* @__PURE__ */ n(g, { theme: l, children: /* @__PURE__ */ n(
+    d.Content,
     {
-      align: o,
-      collisionPadding: 8,
-      sideOffset: P[e],
-      side: t,
-      className: a.content,
-      "data-test-id": p,
-      ref: u,
-      onCloseAutoFocus: (l) => {
-        s && l.preventDefault();
+      align: t,
+      collisionPadding: A[p],
+      sideOffset: M[e],
+      side: o,
+      className: s.content,
+      "data-test-id": u,
+      ref: c,
+      onCloseAutoFocus: (m) => {
+        a && m.preventDefault();
       },
       children: r
     }
   ) }) });
 };
 S.displayName = "Dropdown.Content";
-const N = ({ children: t, heading: o, "data-test-id": e = "fondue-dropdown-group" }, r) => /* @__PURE__ */ m(n.Group, { className: a.group, "data-test-id": e, ref: r, children: [
-  o ? /* @__PURE__ */ d("div", { className: a.groupHeading, children: /* @__PURE__ */ d("span", { "aria-label": o, children: o }) }) : null,
-  t
-] });
-N.displayName = "Dropdown.Group";
-const C = ({
-  children: t,
-  "data-test-id": o = "fondue-dropdown-submenu"
-}) => /* @__PURE__ */ d(n.Sub, { "data-test-id": o, children: t });
-C.displayName = "Dropdown.SubMenu";
-const h = ({ children: t, "data-test-id": o = "fondue-dropdown-subtrigger" }, e) => {
-  const { content: r } = g(t);
-  return /* @__PURE__ */ m(n.SubTrigger, { className: a.subTrigger, "data-test-id": o, ref: e, children: [
+const C = ({ children: o, heading: t, "data-test-id": e = "fondue-dropdown-group" }, r) => F(
+  () => G.toArray(o).filter((p) => p !== null).length > 0,
+  [o]
+) ? /* @__PURE__ */ w(d.Group, { className: s.group, "data-test-id": e, ref: r, children: [
+  t ? /* @__PURE__ */ n("div", { className: s.groupHeading, children: /* @__PURE__ */ n("span", { "aria-label": t, children: t }) }) : null,
+  o
+] }) : null;
+C.displayName = "Dropdown.Group";
+const h = ({
+  children: o,
+  "data-test-id": t = "fondue-dropdown-submenu"
+}) => /* @__PURE__ */ n(d.Sub, { "data-test-id": t, children: o });
+h.displayName = "Dropdown.SubMenu";
+const R = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, e) => {
+  const { content: r } = D(o);
+  return /* @__PURE__ */ w(d.SubTrigger, { className: s.subTrigger, "data-test-id": t, ref: e, children: [
     r,
-    /* @__PURE__ */ d(I, { className: a.subMenuIndicator, size: 16 })
+    /* @__PURE__ */ n(P, { className: s.subMenuIndicator, size: 16 })
   ] });
 };
-h.displayName = "Dropdown.SubTrigger";
-const R = ({ children: t, "data-test-id": o = "fondue-dropdown-subcontent" }, e) => {
-  const r = w();
-  return /* @__PURE__ */ d(n.Portal, { children: /* @__PURE__ */ d(f, { theme: r, children: /* @__PURE__ */ d(n.SubContent, { className: a.subContent, "data-test-id": o, ref: e, children: t }) }) });
+R.displayName = "Dropdown.SubTrigger";
+const T = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, e) => {
+  const r = f();
+  return /* @__PURE__ */ n(d.Portal, { children: /* @__PURE__ */ n(g, { theme: r, children: /* @__PURE__ */ n(d.SubContent, { className: s.subContent, "data-test-id": t, ref: e, children: o }) }) });
 };
-R.displayName = "Dropdown.SubContent";
-const T = ({
-  children: t,
-  disabled: o,
+T.displayName = "Dropdown.SubContent";
+const I = ({
+  children: o,
+  disabled: t,
   textValue: e,
   onSelect: r,
-  emphasis: s = "default",
+  emphasis: a = "default",
   asChild: p = !1,
   "data-test-id": u = "fondue-dropdown-subtrigger",
   ...c
 }, l) => {
-  const { content: F } = g(t);
-  return /* @__PURE__ */ d(
-    n.Item,
+  const { content: m } = D(o);
+  return /* @__PURE__ */ n(
+    d.Item,
     {
       onSelect: r,
-      className: a.item,
+      className: s.item,
       textValue: e,
       "data-test-id": u,
-      "data-emphasis": s,
+      "data-emphasis": a,
       ref: l,
-      disabled: o,
+      disabled: t,
       asChild: p,
       ...c,
-      children: F
+      children: m
     }
   );
 };
-T.displayName = "Dropdown.Item";
-const y = ({ children: t, name: o, "data-test-id": e = "fondue-dropdown-slot" }, r) => /* @__PURE__ */ d("div", { "data-name": o, className: a.slot, "data-test-id": e, ref: r, children: t });
+I.displayName = "Dropdown.Item";
+const y = ({ children: o, name: t, "data-test-id": e = "fondue-dropdown-slot" }, r) => /* @__PURE__ */ n("div", { "data-name": t, className: s.slot, "data-test-id": e, ref: r, children: o });
 y.displayName = "Dropdown.Slot";
-const G = i(b), M = i(S), v = i(N), x = i(h), A = i(R), j = i(T), z = i(y), E = {
-  Root: D,
-  Trigger: G,
-  Content: M,
-  Group: v,
-  SubMenu: C,
-  SubTrigger: x,
-  SubContent: A,
-  Item: j,
+const v = i(N), x = i(S), O = i(C), _ = i(R), j = i(T), L = i(I), z = i(y), B = {
+  Root: b,
+  Trigger: v,
+  Content: x,
+  Group: O,
+  SubMenu: h,
+  SubTrigger: _,
+  SubContent: j,
+  Item: L,
   Slot: z
 };
 export {
-  E as Dropdown,
+  B as Dropdown,
   S as DropdownContent,
-  N as DropdownGroup,
-  T as DropdownItem,
-  D as DropdownRoot,
+  C as DropdownGroup,
+  I as DropdownItem,
+  b as DropdownRoot,
   y as DropdownSlot,
-  R as DropdownSubContent,
-  C as DropdownSubMenu,
-  h as DropdownSubTrigger,
-  b as DropdownTrigger
+  T as DropdownSubContent,
+  h as DropdownSubMenu,
+  R as DropdownSubTrigger,
+  N as DropdownTrigger
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.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, 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; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, '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            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\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    const theme = useFondueTheme();\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\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    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\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={asChild}\n            {...props}\n        >\n            {content}\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","heading","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}
+{"version":3,"file":"fondue-components10.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 { Children, forwardRef, useMemo, 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';\ntype DropdownViewportCollisionPadding = 'compact' | 'spacious';\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     * Define the minimum distance between the dropdown and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: DropdownViewportCollisionPadding;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<DropdownViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        viewportCollisionPadding = 'compact',\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={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\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; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const hasChildren = useMemo(\n        () => Children.toArray(children).filter((child) => child !== null).length > 0,\n        [children],\n    );\n\n    if (!hasChildren) {\n        return null;\n    }\n\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\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    const theme = useFondueTheme();\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\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    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\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={asChild}\n            {...props}\n        >\n            {content}\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","VIEWPORT_COLLISION_PADDING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","viewportCollisionPadding","theme","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","heading","useMemo","Children","child","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}

package/dist/fondue-components12.js

@@ -1,13 +1,13 @@
 import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import { IconCross as R } from "@frontify/fondue-icons";
+import { IconCross as b } from "@frontify/fondue-icons";
 import * as i from "@radix-ui/react-popover";
-import { forwardRef as s } from "react";
+import { forwardRef as r } from "react";
 import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components44.js";
-import { useFondueTheme as P, ThemeProvider as T } from "./fondue-components28.js";
-import r from "./fondue-components50.js";
-const n = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
-n.displayName = "Flyout.Root";
-const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, l) => /* @__PURE__ */ a(
+import { useFondueTheme as A, ThemeProvider as T } from "./fondue-components28.js";
+import s from "./fondue-components50.js";
+const c = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
+c.displayName = "Flyout.Root";
+const n = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, l) => /* @__PURE__ */ a(
   i.Trigger,
   {
     onMouseDown: w,
@@ -20,11 +20,14 @@ const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-tr
     children: o
   }
 );
-c.displayName = "Flyout.Trigger";
-const A = {
+n.displayName = "Flyout.Trigger";
+const I = {
   compact: 8,
   comfortable: 12,
   spacious: 16
+}, O = {
+  compact: 8,
+  spacious: 24
 }, m = ({
   align: t = "start",
   maxWidth: o = "360px",
@@ -33,13 +36,14 @@ const A = {
   width: l = "fit-content",
   shadow: F = "medium",
   triggerOffset: g = "compact",
+  viewportCollisionPadding: N = "compact",
   "data-test-id": h = "fondue-flyout-content",
-  children: N,
-  ...v
-}, b) => {
-  const C = P();
-  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ u(T, { theme: C, children: [
-    /* @__PURE__ */ a("div", { className: r.overlay }),
+  children: v,
+  ...P
+}, C) => {
+  const R = A();
+  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ u(T, { theme: R, children: [
+    /* @__PURE__ */ a("div", { className: s.overlay }),
     /* @__PURE__ */ a(
       i.Content,
       {
@@ -47,29 +51,29 @@ const A = {
           "--flyout-max-width": o,
           "--flyout-width": l
         },
-        ref: b,
+        ref: C,
         align: t,
-        collisionPadding: 8,
-        sideOffset: A[g],
-        className: r.root,
+        collisionPadding: O[N],
+        sideOffset: I[g],
+        className: s.root,
         "data-flyout-spacing": e,
         "data-rounded": d,
         "data-shadow": F,
         "data-test-id": h,
         onFocus: x,
-        ...v,
-        children: N
+        ...P,
+        children: v
       }
     )
   ] }) });
 };
 m.displayName = "Flyout.Content";
-const y = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, d) => /* @__PURE__ */ u("div", { "data-test-id": e, ref: d, className: r.header, children: [
+const y = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, d) => /* @__PURE__ */ u("div", { "data-test-id": e, ref: d, className: s.header, children: [
   /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: r.close, children: /* @__PURE__ */ a(R, { size: 20 }) })
+  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: s.close, children: /* @__PURE__ */ a(b, { size: 20 }) })
 ] });
 y.displayName = "Flyout.Header";
-const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.footer, children: t });
+const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: s.footer, children: t });
 f.displayName = "Flyout.Footer";
 const p = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable: e = !1 }, d) => /* @__PURE__ */ a(
   "div",
@@ -78,26 +82,26 @@ const p = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable:
     ref: d,
     "data-flyout-spacing": "compact",
     "data-scrollable": e,
-    className: r.body,
+    className: s.body,
     children: t
   }
 );
 p.displayName = "Flyout.Body";
-const D = {
-  Root: n,
-  Trigger: s(c),
-  Content: s(m),
-  Header: s(y),
-  Footer: s(f),
-  Body: s(p)
+const j = {
+  Root: c,
+  Trigger: r(n),
+  Content: r(m),
+  Header: r(y),
+  Footer: r(f),
+  Body: r(p)
 };
 export {
-  D as Flyout,
+  j as Flyout,
   p as FlyoutBody,
   m as FlyoutContent,
   f as FlyoutFooter,
   y as FlyoutHeader,
-  n as FlyoutRoot,
-  c as FlyoutTrigger
+  c as FlyoutRoot,
+  n as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components12.js.map

package/dist/fondue-components12.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components12.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\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 flyout\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 const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\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 FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.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            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\nexport type FlyoutContentProps = {\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 the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        triggerOffset = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <div className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","triggerOffset","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components12.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\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 flyout\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 const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\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 FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.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            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\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 the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <div className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","triggerOffset","viewportCollisionPadding","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}

package/dist/fondue-components21.js

@@ -1,15 +1,15 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { IconCaretDown as H, IconCheckMark as T, IconExclamationMarkTriangle as $ } from "@frontify/fondue-icons";
+import { IconCaretDown as T, IconCheckMark as $, IconExclamationMarkTriangle as A } from "@frontify/fondue-icons";
 import * as g from "@radix-ui/react-popover";
-import { Slot as A } from "@radix-ui/react-slot";
-import { useSelect as q } from "downshift";
-import { forwardRef as J, useRef as K, useState as L } from "react";
-import { ForwardedRefCombobox as Q } from "./fondue-components59.js";
-import { ForwardedRefSelectItem as U, ForwardedRefSelectItemGroup as W } from "./fondue-components60.js";
-import { SelectMenu as X } from "./fondue-components61.js";
-import { ForwardedRefSelectSlot as Y } from "./fondue-components62.js";
+import { Slot as q } from "@radix-ui/react-slot";
+import { useSelect as J } from "downshift";
+import { forwardRef as K, useRef as L, useState as Q } from "react";
+import { ForwardedRefCombobox as U } from "./fondue-components59.js";
+import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components60.js";
+import { SelectMenu as Y } from "./fondue-components61.js";
+import { ForwardedRefSelectSlot as Z } from "./fondue-components62.js";
 import o from "./fondue-components63.js";
-import { useSelectData as Z } from "./fondue-components64.js";
+import { useSelectData as _ } from "./fondue-components64.js";
 const S = ({
   children: h,
   onSelect: s,
@@ -22,39 +22,40 @@ const S = ({
   side: y = "bottom",
   id: C,
   showStringValue: R = !0,
-  "data-test-id": i = "fondue-select",
+  "data-test-id": c = "fondue-select",
+  viewportCollisionPadding: x = "compact",
   ...l
-}, x) => {
-  const { inputSlots: F, menuSlots: k, items: v, clearButton: u, getItemByValue: f } = Z(h), B = f(I), M = f(b), c = K(!1), [P, p] = L(!1), { getToggleButtonProps: G, getMenuProps: O, getItemProps: z, reset: D, selectedItem: r, isOpen: V, highlightedIndex: j } = q({
-    items: v,
-    defaultSelectedItem: B,
-    selectedItem: M,
+}, F) => {
+  const { inputSlots: k, menuSlots: v, items: B, clearButton: u, getItemByValue: p } = _(h), M = p(I), P = p(b), i = L(!1), [G, f] = Q(!1), { getToggleButtonProps: O, getMenuProps: z, getItemProps: D, reset: V, selectedItem: r, isOpen: j, highlightedIndex: E } = J({
+    items: B,
+    defaultSelectedItem: M,
+    selectedItem: P,
     toggleButtonId: C,
     labelId: "aria-labelledby" in l ? l["aria-labelledby"] : void 0,
     onIsOpenChange: () => {
-      p(!1);
+      f(!1);
     },
     onHighlightedIndexChange: () => {
-      p(!0);
+      f(!0);
     },
     onSelectedItemChange: ({ selectedItem: e }) => {
       s == null || s((e == null ? void 0 : e.value) ?? null);
     },
     itemToString: (e) => e ? e.label : ""
-  }), E = r ? !R && r.children || r.label : N;
-  return /* @__PURE__ */ d(g.Root, { open: V, children: [
+  }), H = r ? !R && r.children || r.label : N;
+  return /* @__PURE__ */ d(g.Root, { open: j, children: [
     /* @__PURE__ */ a(
       g.Anchor,
       {
         asChild: !0,
         onMouseDown: (e) => {
-          c.current = !0, e.currentTarget.dataset.showFocusRing = "false";
+          i.current = !0, e.currentTarget.dataset.showFocusRing = "false";
         },
         onFocus: (e) => {
-          c.current || (e.target.dataset.showFocusRing = "true");
+          i.current || (e.target.dataset.showFocusRing = "true");
         },
         onBlur: (e) => {
-          e.target.dataset.showFocusRing = "false", c.current = !1;
+          e.target.dataset.showFocusRing = "false", i.current = !1;
         },
         children: /* @__PURE__ */ d(
           "div",
@@ -63,40 +64,40 @@ const S = ({
             "data-status": n,
             "data-disabled": m,
             "data-empty": !r,
-            "data-test-id": i,
-            ...m ? {} : G({
+            "data-test-id": c,
+            ...m ? {} : O({
               "aria-label": "aria-label" in l ? l["aria-label"] : void 0,
-              ref: x
+              ref: F
             }),
             children: [
-              /* @__PURE__ */ a("span", { className: o.selectedValue, children: E }),
-              F,
+              /* @__PURE__ */ a("span", { className: o.selectedValue, children: H }),
+              k,
               u && /* @__PURE__ */ a(
-                A,
+                q,
                 {
                   onClick: (e) => {
-                    e.stopPropagation(), D();
+                    e.stopPropagation(), V();
                   },
                   className: o.clear,
                   children: u
                 }
               ),
               /* @__PURE__ */ d("div", { className: o.icons, children: [
-                /* @__PURE__ */ a(H, { size: 16, className: o.caret }),
+                /* @__PURE__ */ a(T, { size: 16, className: o.caret }),
                 n === "success" ? /* @__PURE__ */ a(
-                  T,
+                  $,
                   {
                     size: 16,
                     className: o.iconSuccess,
-                    "data-test-id": `${i}-success-icon`
+                    "data-test-id": `${c}-success-icon`
                   }
                 ) : null,
                 n === "error" ? /* @__PURE__ */ a(
-                  $,
+                  A,
                   {
                     size: 16,
                     className: o.iconError,
-                    "data-test-id": `${i}-error-icon`
+                    "data-test-id": `${c}-error-icon`
                   }
                 ) : null
               ] })
@@ -106,33 +107,34 @@ const S = ({
       }
     ),
     /* @__PURE__ */ a(
-      X,
+      Y,
       {
         align: w,
         side: y,
-        highlightedIndex: j,
-        getMenuProps: O,
-        getItemProps: z,
+        highlightedIndex: E,
+        getMenuProps: z,
+        getItemProps: D,
         selectedItem: r,
-        hasInteractedSinceOpening: P,
-        children: k
+        hasInteractedSinceOpening: G,
+        viewportCollisionPadding: x,
+        children: v
       }
     )
   ] });
 };
 S.displayName = "Select";
-const _ = J(S), t = _;
+const ee = K(S), t = ee;
 t.displayName = "Select";
-t.Combobox = Q;
+t.Combobox = U;
 t.Combobox.displayName = "Select.Combobox";
-t.Item = U;
+t.Item = W;
 t.Item.displayName = "Select.Item";
-t.Group = W;
+t.Group = X;
 t.Group.displayName = "Select.Group";
-t.Slot = Y;
+t.Slot = Z;
 t.Slot.displayName = "Select.Slot";
 export {
-  _ as ForwardedRefSelect,
+  ee as ForwardedRefSelect,
   t as Select,
   S as SelectInput
 };

package/dist/fondue-components21.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components21.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plan text when set to true, items child components are used if set to true\n     * @default true\n     */\n    showStringValue?: boolean;\n} & CommonAriaProps;\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        ...props\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            toggleButtonId: id,\n            labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect?.(selectedItem?.value ?? null);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    const displayedValue = selectedItem\n        ? (!showStringValue && selectedItem.children) || selectedItem.label\n        : placeholder;\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                              ref: forwardedRef,\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{displayedValue}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","side","id","showStringValue","dataTestId","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","displayedValue","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}
+{"version":3,"file":"fondue-components21.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plan text when set to true, items child components are used if set to true\n     * @default true\n     */\n    showStringValue?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        viewportCollisionPadding = 'compact',\n        ...props\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            toggleButtonId: id,\n            labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect?.(selectedItem?.value ?? null);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    const displayedValue = selectedItem\n        ? (!showStringValue && selectedItem.children) || selectedItem.label\n        : placeholder;\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                              ref: forwardedRef,\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{displayedValue}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","side","id","showStringValue","dataTestId","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","displayedValue","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}

package/dist/fondue-components59.js

@@ -1,12 +1,12 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { IconCaretDown as E, IconCheckMark as q, IconExclamationMarkTriangle as G } from "@frontify/fondue-icons";
+import { IconCaretDown as q, IconCheckMark as G, IconExclamationMarkTriangle as J } from "@frontify/fondue-icons";
 import * as w from "@radix-ui/react-popover";
-import { Slot as J } from "@radix-ui/react-slot";
-import { useCombobox as K } from "downshift";
-import { forwardRef as Q, useState as U, useRef as W, useMemo as X } from "react";
-import { SelectMenu as Y } from "./fondue-components61.js";
+import { Slot as K } from "@radix-ui/react-slot";
+import { useCombobox as Q } from "downshift";
+import { forwardRef as U, useState as W, useRef as X, useMemo as Y } from "react";
+import { SelectMenu as Z } from "./fondue-components61.js";
 import o from "./fondue-components63.js";
-import { useSelectData as Z } from "./fondue-components64.js";
+import { useSelectData as _ } from "./fondue-components64.js";
 const N = ({
   children: S,
   onSelect: l,
@@ -19,22 +19,23 @@ const N = ({
   alignMenu: M = "start",
   side: y = "bottom",
   id: F,
+  viewportCollisionPadding: L = "compact",
   ...a
-}, L) => {
-  const { inputSlots: P, menuSlots: k, items: c, filterText: v, clearButton: f, getItemByValue: h, setFilterText: D } = Z(S), [H, p] = U(!1), {
+}, P) => {
+  const { inputSlots: k, menuSlots: v, items: c, filterText: D, clearButton: f, getItemByValue: p, setFilterText: H } = _(S), [T, h] = W(!1), {
     getInputProps: u,
-    getToggleButtonProps: T,
-    getMenuProps: V,
-    getItemProps: z,
+    getToggleButtonProps: V,
+    getMenuProps: z,
+    getItemProps: j,
     reset: b,
     selectedItem: r,
-    isOpen: j,
-    highlightedIndex: $,
+    isOpen: $,
+    highlightedIndex: A,
     inputValue: d
-  } = K({
+  } = Q({
     items: c,
-    selectedItem: h(B),
-    defaultSelectedItem: h(O),
+    selectedItem: p(B),
+    defaultSelectedItem: p(O),
     defaultHighlightedIndex: 0,
     toggleButtonId: F,
     labelId: "aria-labelledby" in a ? a["aria-labelledby"] : void 0,
@@ -42,24 +43,24 @@ const N = ({
       l == null || l((e == null ? void 0 : e.value) ?? null);
     },
     onInputValueChange: ({ inputValue: e }) => {
-      D(e);
+      H(e);
     },
     onIsOpenChange: () => {
-      p(!1);
+      h(!1);
     },
     onHighlightedIndexChange: () => {
-      p(!0);
+      h(!0);
     },
     itemToString: (e) => e ? e.label : ""
-  }), n = W(!1), C = X(
+  }), n = X(!1), C = Y(
     () => !c.find((e) => e.label.toLowerCase().includes(d.toLowerCase())),
     [d, c]
-  ), A = (e) => {
+  ), E = (e) => {
     var x, I;
     e.target.dataset.showFocusRing = "false", n.current = !1, (r == null ? void 0 : r.label.toLocaleLowerCase()) !== d.toLocaleLowerCase() && b(), u().onBlur && ((I = (x = u()).onBlur) == null || I.call(x, e));
   };
-  return /* @__PURE__ */ m(w.Root, { open: j, children: [
-    /* @__PURE__ */ t(w.Anchor, { asChild: !0, children: /* @__PURE__ */ m("div", { ref: L, className: o.root, "data-status": C ? "error" : s, children: [
+  return /* @__PURE__ */ m(w.Root, { open: $, children: [
+    /* @__PURE__ */ t(w.Anchor, { asChild: !0, children: /* @__PURE__ */ m("div", { ref: P, className: o.root, "data-status": C ? "error" : s, children: [
       /* @__PURE__ */ t(
         "input",
         {
@@ -76,12 +77,12 @@ const N = ({
           onFocus: (e) => {
             n.current || (e.target.dataset.showFocusRing = "true");
           },
-          onBlur: A
+          onBlur: E
         }
       ),
-      P,
+      k,
       f && /* @__PURE__ */ t(
-        J,
+        K,
         {
           onClick: (e) => {
             e.stopPropagation(), b();
@@ -96,17 +97,17 @@ const N = ({
           "button",
           {
             "aria-label": "toggle menu",
-            ...T(),
+            ...V(),
             type: "button",
             disabled: g,
             onMouseDown: () => {
               n.current = !0;
             },
-            children: /* @__PURE__ */ t(E, { size: 16, className: o.caret })
+            children: /* @__PURE__ */ t(q, { size: 16, className: o.caret })
           }
         ),
         s === "success" ? /* @__PURE__ */ t(
-          q,
+          G,
           {
             size: 16,
             className: o.iconSuccess,
@@ -114,7 +115,7 @@ const N = ({
           }
         ) : null,
         C || s === "error" ? /* @__PURE__ */ t(
-          G,
+          J,
           {
             size: 16,
             className: o.iconError,
@@ -124,25 +125,26 @@ const N = ({
       ] })
     ] }) }),
     /* @__PURE__ */ t(
-      Y,
+      Z,
       {
         align: M,
         side: y,
-        highlightedIndex: $,
-        filterText: v,
-        getMenuProps: V,
-        getItemProps: z,
+        highlightedIndex: A,
+        filterText: D,
+        getMenuProps: z,
+        getItemProps: j,
         selectedItem: r,
-        hasInteractedSinceOpening: H,
-        children: k
+        hasInteractedSinceOpening: T,
+        viewportCollisionPadding: L,
+        children: v
       }
     )
   ] });
 };
 N.displayName = "Select.Combobox";
-const ie = Q(N);
+const ce = U(N);
 export {
-  ie as ForwardedRefCombobox,
+  ce as ForwardedRefCombobox,
   N as SelectCombobox
 };
 //# sourceMappingURL=fondue-components59.js.map

package/dist/fondue-components59.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components59.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end' /**\n     * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */;\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * Id of the combobox component\n     */\n    id?: string;\n    /**\n     * The data test id of the combobox component.\n     */\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect?.(selectedItem?.value ?? null);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label=\"toggle menu\"\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {valueInvalid || status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components59.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end' /**\n     * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */;\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * Id of the combobox component\n     */\n    id?: string;\n    /**\n     * The data test id of the combobox component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        viewportCollisionPadding = 'compact',\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect?.(selectedItem?.value ?? null);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label=\"toggle menu\"\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {valueInvalid || status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":";;;;;;;;;AAoEO,MAAMA,IAAiB,CAC1B;AAAA,EACI,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,IAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACP,GACAC,MACC;AACK,QAAA,EAAE,YAAAC,GAAY,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,EAAA,IAC3EC,EAAcrB,CAAQ,GAEpB,CAACsB,GAA2BC,CAA4B,IAAIC,EAAS,EAAK,GAE1E;AAAA,IACF,eAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,MACAC,EAAY;AAAA,IACZ,OAAAlB;AAAA,IACA,cAAcG,EAAejB,CAAK;AAAA,IAClC,qBAAqBiB,EAAehB,CAAY;AAAA,IAChD,yBAAyB;AAAA,IACzB,gBAAgBO;AAAA,IAChB,SAAS,qBAAqBE,IAAQA,EAAM,iBAAiB,IAAI;AAAA,IACjE,sBAAsB,CAAC,EAAE,cAAAkB,QAAmB;AAC7BA,MAAAA,KAAAA,QAAAA,GAAAA,KAAAA,gBAAAA,EAAc,UAAS;AAAA,IACtC;AAAA,IACA,oBAAoB,CAAC,EAAE,YAAAG,QAAiB;AACpC,MAAAb,EAAca,CAAU;AAAA,IAC5B;AAAA,IACA,gBAAgB,MAAM;AAClB,MAAAV,EAA6B,EAAK;AAAA,IACtC;AAAA,IACA,0BAA0B,MAAM;AAC5B,MAAAA,EAA6B,EAAI;AAAA,IACrC;AAAA,IACA,cAAc,CAACY,MAAUA,IAAOA,EAAK,QAAQ;AAAA,EAAA,CAChD,GAEKC,IAAaC,EAAO,EAAK,GAEzBC,IAAeC;AAAA,IACjB,MAAM,CAACvB,EAAM,KAAK,CAACmB,MAASA,EAAK,MAAM,YAAc,EAAA,SAASF,EAAW,YAAa,CAAA,CAAC;AAAA,IACvF,CAACA,GAAYjB,CAAK;AAAA,EACtB,GAEMwB,IAAgB,CAACC,MAAqD;;AAC9D,IAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCL,EAAW,UAAU,KAEcN,KAAA,gBAAAA,EAAc,MAAM,yBAAwBG,EAAW,kBAAkB,KAMlGJ,EAAA,GAGNJ,IAAgB,YACFiB,KAAAC,IAAAlB,EAAA,GAAE,WAAF,QAAAiB,EAAA,KAAAC,GAAWF;AAAA,EAEjC;AAEA,SACK,gBAAAG,EAAAC,EAAa,MAAb,EAAkB,MAAMd,GACrB,UAAA;AAAA,IAAA,gBAAAe,EAACD,EAAa,QAAb,EAAoB,SAAO,IACxB,UAAC,gBAAAD,EAAA,OAAA,EAAI,KAAK/B,GAAc,WAAWkC,EAAO,MAAM,eAAaT,IAAe,UAAUjC,GAClF,UAAA;AAAA,MAAA,gBAAAyC;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGrB,EAAc;AAAA,YACd,cAAc,gBAAgBb,IAAQA,EAAM,YAAY,IAAI;AAAA,UAAA,CAC/D;AAAA,UACD,gBAAcL;AAAA,UACd,aAAAH;AAAA,UACA,WAAW2C,EAAO;AAAA,UAClB,UAAAzC;AAAA,UACA,aAAa,CAAC0C,MAAe;AACzB,YAAAZ,EAAW,UAAU,IACVY,EAAA,cAAc,QAAQ,gBAAgB;AAAA,UACrD;AAAA,UACA,SAAS,CAACC,MAAe;AACjB,YAACb,EAAW,YACDa,EAAA,OAAO,QAAQ,gBAAgB;AAAA,UAElD;AAAA,UACA,QAAQT;AAAA,QAAA;AAAA,MACZ;AAAA,MACC1B;AAAA,MACAI,KACG,gBAAA4B;AAAA,QAACI;AAAAA,QAAA;AAAA,UACG,SAAS,CAACC,MAAU;AAChB,YAAAA,EAAM,gBAAgB,GAChBtB,EAAA;AAAA,UACV;AAAA,UACA,WAAWkB,EAAO;AAAA,UAClB,MAAK;AAAA,UAEJ,UAAA7B;AAAA,QAAA;AAAA,MACL;AAAA,MAEH,gBAAA0B,EAAA,OAAA,EAAI,WAAWG,EAAO,OACnB,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,cAAW;AAAA,YACV,GAAGpB,EAAqB;AAAA,YACzB,MAAK;AAAA,YACL,UAAApB;AAAA,YACA,aAAa,MAAM;AACf,cAAA8B,EAAW,UAAU;AAAA,YACzB;AAAA,YAEA,4BAACgB,GAAc,EAAA,MAAM,IAAI,WAAWL,EAAO,MAAO,CAAA;AAAA,UAAA;AAAA,QACtD;AAAA,QACC1C,MAAW,YACR,gBAAAyC;AAAA,UAACO;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWN,EAAO;AAAA,YAClB,gBAAc,GAAGxC,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,QACH+B,KAAgBjC,MAAW,UACxB,gBAAAyC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWP,EAAO;AAAA,YAClB,gBAAc,GAAGxC,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,MAAA,EACR,CAAA;AAAA,IAAA,EAAA,CACJ,EACJ,CAAA;AAAA,IAEA,gBAAAuC;AAAA,MAACS;AAAA,MAAA;AAAA,QACG,OAAO/C;AAAA,QACP,MAAAC;AAAA,QACA,kBAAAuB;AAAA,QACA,YAAAf;AAAA,QACA,cAAAU;AAAA,QACA,cAAAC;AAAA,QACA,cAAAE;AAAA,QACA,2BAAAR;AAAA,QACA,0BAAAX;AAAA,QAEC,UAAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AACAhB,EAAe,cAAc;AAEhB,MAAAyD,KAAuBC,EAA0C1D,CAAc;"}

package/dist/fondue-components61.js

@@ -1,57 +1,61 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as s from "@radix-ui/react-popover";
-import { Slot as g } from "@radix-ui/react-slot";
-import { isValidElement as C } from "react";
-import { useFondueTheme as N, ThemeProvider as O } from "./fondue-components28.js";
+import { jsx as r } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-popover";
+import { Slot as C } from "@radix-ui/react-slot";
+import { isValidElement as V } from "react";
+import { useFondueTheme as g, ThemeProvider as A } from "./fondue-components28.js";
 import n from "./fondue-components63.js";
-import { recursiveMap as V, getSelectOptionValue as F } from "./fondue-components78.js";
-const M = ({
-  highlightedIndex: l,
-  getMenuProps: p,
+import { recursiveMap as D, getSelectOptionValue as M } from "./fondue-components78.js";
+const T = ({
+  highlightedIndex: p,
+  getMenuProps: l,
   getItemProps: u,
   children: m,
-  filterText: f,
-  align: c,
+  filterText: c,
+  align: f,
   side: d,
   selectedItem: t,
-  hasInteractedSinceOpening: h
+  hasInteractedSinceOpening: h,
+  viewportCollisionPadding: P = "compact"
 }) => {
   const v = (e) => {
     e.preventDefault();
-  }, P = N();
-  return /* @__PURE__ */ o(s.Portal, { children: /* @__PURE__ */ o(O, { theme: P, children: /* @__PURE__ */ o(
-    s.Content,
+  }, O = {
+    compact: 8,
+    spacious: 24
+  }, N = g();
+  return /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ r(A, { theme: N, children: /* @__PURE__ */ r(
+    i.Content,
     {
-      align: c,
+      align: f,
       side: d,
-      collisionPadding: 16,
+      collisionPadding: O[P] + 8,
       onOpenAutoFocus: v,
       className: n.portal,
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ r(
         "ul",
         {
           className: n.menu,
-          ...p({}, { suppressRefError: !0 }),
+          ...l({}, { suppressRefError: !0 }),
           "data-has-interacted": h ? "true" : "false",
           "data-test-id": "fondue-select-menu",
-          children: V(
+          children: D(
             m,
-            (e, i) => {
-              if (((r) => (
+            (e, s) => {
+              if (((o) => (
                 // @ts-expect-error - We are explicitly checking for ref
-                C(r) && r.ref !== void 0
+                V(o) && o.ref !== void 0
               ))(e)) {
-                const r = F(e.props), a = u({
-                  item: r,
-                  index: i,
+                const o = M(e.props), a = u({
+                  item: o,
+                  index: s,
                   ...e.ref ? { ref: e.ref } : {}
                 });
-                return /* @__PURE__ */ o(
-                  g,
+                return /* @__PURE__ */ r(
+                  C,
                   {
                     className: n.item,
-                    "data-highlighted": l === i,
-                    "data-selected": (t == null ? void 0 : t.value) === r.value,
+                    "data-highlighted": p === s,
+                    "data-selected": (t == null ? void 0 : t.value) === o.value,
                     onTouchStart: (S) => {
                       a.onClick && a.onClick(S);
                     },
@@ -62,15 +66,15 @@ const M = ({
                 );
               }
             },
-            f
+            c
           ).parsedChildren
         }
       )
     }
   ) }) });
 };
-M.displayName = "Select.Menu";
+T.displayName = "Select.Menu";
 export {
-  M as SelectMenu
+  T as SelectMenu
 };
 //# sourceMappingURL=fondue-components61.js.map

package/dist/fondue-components61.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components61.js","sources":["../src/components/Select/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { type SelectItemProps } from './SelectItem';\nimport styles from './styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from './utils';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n    /**\n     * @internal\n     * The alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @internal\n     * The type of the menu.\n     */\n    selectedItem?: {\n        value: string;\n    } | null;\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItem,\n    hasInteractedSinceOpening,\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixPopover.Content\n                    align={align}\n                    side={side}\n                    collisionPadding={16}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\n                        data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                        data-test-id=\"fondue-select-menu\"\n                    >\n                        {\n                            recursiveMap(\n                                children,\n                                (child, index) => {\n                                    const isValid = <TProps,>(\n                                        child: ReactNode,\n                                    ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                        // @ts-expect-error - We are explicitly checking for ref\n                                        isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                    if (isValid<SelectItemProps>(child)) {\n                                        const optionData = getSelectOptionValue(child.props);\n                                        const itemProps = getItemProps({\n                                            item: optionData,\n                                            index,\n                                            ...(child.ref ? { ref: child.ref } : {}),\n                                        });\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={selectedItem?.value === optionData.value}\n                                                key={child.props.value}\n                                                // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                                onTouchStart={(event) => {\n                                                    if (itemProps.onClick) {\n                                                        itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                    }\n                                                }}\n                                                {...itemProps}\n                                            >\n                                                {child}\n                                            </RadixSlot>\n                                        );\n                                    }\n                                },\n                                filterText,\n                            ).parsedChildren\n                        }\n                    </ul>\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItem","hasInteractedSinceOpening","handleOnOpenAutoFocus","event","theme","useFondueTheme","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","RadixSlot"],"mappings":";;;;;;;AAiEO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,2BAAAC;AACJ,MAAuB;AACb,QAAAC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAe;AAAA,EACzB,GAEMC,IAAQC,EAAe;AAC7B,2BACKC,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,KAAc,OAAAJ,GACX,UAAA,gBAAAG;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,OAAAR;AAAA,MACA,MAAAC;AAAA,MACA,kBAAkB;AAAA,MAClB,iBAAiBG;AAAA,MACjB,WAAWO,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGf,EAAa,IAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAS;AAAA,YACId;AAAA,YACA,CAACe,GAAOC,MAAU;AAOV,mBANY,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AAC3B,sBAAAG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYrB,EAAa;AAAA,kBAC3B,MAAMmB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC;AAGG,uBAAA,gBAAAJ;AAAA,kBAACU;AAAAA,kBAAA;AAAA,oBACG,WAAWR,EAAO;AAAA,oBAClB,oBAAkBhB,MAAqBmB;AAAA,oBACvC,kBAAeZ,KAAA,gBAAAA,EAAc,WAAUc,EAAW;AAAA,oBAGlD,cAAc,CAACX,MAAU;AACrB,sBAAIa,EAAU,WACVA,EAAU,QAAQb,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGa;AAAA,oBAEH,UAAAL;AAAA,kBAAA;AAAA,kBATIA,EAAM,MAAM;AAAA,gBAUrB;AAAA,cAAA;AAAA,YAGZ;AAAA,YACAd;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,KAER,EACJ,CAAA;AAER;AACAL,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components61.js","sources":["../src/components/Select/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { type SelectItemProps } from './SelectItem';\nimport styles from './styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from './utils';\n\nexport type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n    /**\n     * @internal\n     * The alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @internal\n     * The type of the menu.\n     */\n    selectedItem?: {\n        value: string;\n    } | null;\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItem,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n        compact: 8,\n        spacious: 24,\n    };\n\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixPopover.Content\n                    align={align}\n                    side={side}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\n                        data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                        data-test-id=\"fondue-select-menu\"\n                    >\n                        {\n                            recursiveMap(\n                                children,\n                                (child, index) => {\n                                    const isValid = <TProps,>(\n                                        child: ReactNode,\n                                    ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                        // @ts-expect-error - We are explicitly checking for ref\n                                        isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                    if (isValid<SelectItemProps>(child)) {\n                                        const optionData = getSelectOptionValue(child.props);\n                                        const itemProps = getItemProps({\n                                            item: optionData,\n                                            index,\n                                            ...(child.ref ? { ref: child.ref } : {}),\n                                        });\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={selectedItem?.value === optionData.value}\n                                                key={child.props.value}\n                                                // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                                onTouchStart={(event) => {\n                                                    if (itemProps.onClick) {\n                                                        itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                    }\n                                                }}\n                                                {...itemProps}\n                                            >\n                                                {child}\n                                            </RadixSlot>\n                                        );\n                                    }\n                                },\n                                filterText,\n                            ).parsedChildren\n                        }\n                    </ul>\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItem","hasInteractedSinceOpening","viewportCollisionPadding","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","useFondueTheme","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","RadixSlot"],"mappings":";;;;;;;AAwEO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAC/B,MAAuB;AACb,QAAAC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAe;AAAA,EACzB,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EACd,GAEMC,IAAQC,EAAe;AAC7B,2BACKC,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,KAAc,OAAAJ,GACX,UAAA,gBAAAG;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,OAAAV;AAAA,MACA,MAAAC;AAAA,MACA,kBAAkBM,EAA+BH,CAAwB,IAAI;AAAA,MAC7E,iBAAiBC;AAAA,MACjB,WAAWQ,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGjB,EAAa,IAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAW;AAAA,YACIhB;AAAA,YACA,CAACiB,GAAOC,MAAU;AAOV,mBANY,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AAC3B,sBAAAG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYvB,EAAa;AAAA,kBAC3B,MAAMqB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC;AAGG,uBAAA,gBAAAJ;AAAA,kBAACU;AAAAA,kBAAA;AAAA,oBACG,WAAWR,EAAO;AAAA,oBAClB,oBAAkBlB,MAAqBqB;AAAA,oBACvC,kBAAed,KAAA,gBAAAA,EAAc,WAAUgB,EAAW;AAAA,oBAGlD,cAAc,CAACZ,MAAU;AACrB,sBAAIc,EAAU,WACVA,EAAU,QAAQd,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGc;AAAA,oBAEH,UAAAL;AAAA,kBAAA;AAAA,kBATIA,EAAM,MAAM;AAAA,gBAUrB;AAAA,cAAA;AAAA,YAGZ;AAAA,YACAhB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,KAER,EACJ,CAAA;AAER;AACAL,EAAW,cAAc;"}

package/dist/index.d.ts

@@ -620,6 +620,11 @@ declare type DropdownContentProps = {
      * Prevents the focus from being set on the trigger when the dropdown is closed.
      */
     preventTriggerFocusOnClose?: boolean;
+    /**
+     * Define the minimum distance between the dropdown and the viewport edge
+     * @default 'compact'
+     */
+    viewportCollisionPadding?: DropdownViewportCollisionPadding;
 };
 
 declare type DropdownGroupProps = {
@@ -706,6 +711,8 @@ declare type DropdownTriggerProps = {
     'data-test-id'?: string;
 };
 
+declare type DropdownViewportCollisionPadding = 'compact' | 'spacious';
+
 export declare const Flex: ForwardRefExoticComponent<LayoutComponentProps & {
 /**
 * The element to render the Flex component as.
@@ -813,6 +820,11 @@ declare type FlyoutContentProps = {
      * @default "360px"
      */
     maxWidth?: string;
+    /**
+     * Define the minimum distance between the flyout and the viewport edge
+     * @default 'compact'
+     */
+    viewportCollisionPadding?: FlyoutViewportCollisionPadding;
     children?: ReactNode;
     'data-test-id'?: string;
 };
@@ -862,6 +874,8 @@ declare type FlyoutTriggerProps = {
     'data-test-id'?: string;
 };
 
+declare type FlyoutViewportCollisionPadding = 'compact' | 'spacious';
+
 declare const ForwardedRefCombobox: ForwardRefExoticComponent<    {
 /**
 * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.
@@ -909,6 +923,11 @@ id?: string;
 * The data test id of the combobox component.
 */
 'data-test-id'?: string;
+/**
+* Define the minimum distance between the select menu and the viewport edge
+* @default 'compact'
+*/
+viewportCollisionPadding?: SelectMenuViewportCollisionPadding;
 } & CommonAriaProps & RefAttributes<HTMLDivElement>>;
 
 declare const ForwardedRefSelectItem: ForwardRefExoticComponent<SelectItemProps & RefAttributes<HTMLLIElement>>;
@@ -1380,10 +1399,15 @@ declare type SelectComponentProps = {
      * @default true
      */
     showStringValue?: boolean;
+    /**
+     * Define the minimum distance between the select menu and the viewport edge
+     * @default 'compact'
+     */
+    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;
 } & CommonAriaProps;
 
 declare const SelectInput: {
-    ({ children, onSelect, value, defaultValue, placeholder, status, disabled, alignMenu, side, id, showStringValue, "data-test-id": dataTestId, ...props }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
+    ({ children, onSelect, value, defaultValue, placeholder, status, disabled, alignMenu, side, id, showStringValue, "data-test-id": dataTestId, viewportCollisionPadding, ...props }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
     displayName: string;
 };
 
@@ -1425,6 +1449,8 @@ declare type SelectItemProps = {
     children: string;
 });
 
+declare type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';
+
 declare type SelectSlotProps = {
     /**
      * The children of the select slot. This can be a custom component.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontify/fondue-components",
   "type": "module",
-  "version": "15.0.1",
+  "version": "16.0.0",
   "homepage": "https://github.com/Frontify/fondue",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
-    "@frontify/fondue-icons": "^0.14.0",
+    "@frontify/fondue-icons": "^0.15.0",
     "@frontify/fondue-tokens": "^4.1.1"
   },
   "dependencies": {
@@ -104,8 +104,8 @@
     "vite-plugin-dts": "^4.5.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.4",
-    "@frontify/fondue-tokens": "^4.1.1",
-    "@frontify/fondue-icons": "^0.14.0"
+    "@frontify/fondue-icons": "^0.15.0",
+    "@frontify/fondue-tokens": "^4.1.1"
   },
   "scripts": {
     "build": "vite build",