@frontify/fondue-components 3.0.2 → 3.1.0

package/dist/fondue-components34.js

@@ -1,18 +1,59 @@
-import { sv as t } from "./fondue-components15.js";
-const o = t({
-  base: "tw-bg-box-neutral-mighty tw-text-box-neutral-mighty-inverse tw-rounded tw-max-w-48 tw-text-sm tw-overflow-hidden",
-  variants: {
-    padding: {
-      spacious: "tw-px-3 tw-py-2",
-      compact: "tw-px-2 tw-py-1"
+import { jsx as g } from "react/jsx-runtime";
+import { IconCross as w } from "@frontify/fondue-icons";
+import { useState as x, useMemo as S, Children as f, isValidElement as u, cloneElement as B, useCallback as E } from "react";
+import { ForwardedRefSelectItem as I } from "./fondue-components30.js";
+import { ForwardedRefSelectSlot as c } from "./fondue-components32.js";
+import { getSelectOptionValue as v } from "./fondue-components38.js";
+const i = (s) => {
+  const t = [];
+  return f.forEach(s, (o) => {
+    if (u(o) && o.type === I)
+      t.push(v(o.props));
+    else if (u(o) && o.props.children) {
+      const l = i(o.props.children);
+      for (const a of l)
+        t.push(a);
     }
-  },
-  defaultVariants: {
-    padding: "spacious"
-  }
-}), e = "tw-w-2 tw-h-2 tw-bg-box-neutral-mighty tw-border-r tw-border-b tw-border-r-line-mighty tw-border-b-line-mighty tw-rotate-45 -tw-translate-y-1 tw-rounded-br-small";
+  }), t;
+}, k = (s) => {
+  const [t, o] = x(""), { inputSlots: l, menuSlots: a, itemValues: p, clearButton: V } = S(() => {
+    const r = [], n = [];
+    let m;
+    return f.toArray(s).some(
+      (e) => u(e) && e.type === c
+    ) ? (f.forEach(s, (e) => {
+      u(e) && e.type === c && (e.props.name === "menu" ? n.push(e.props.children) : e.props.name === "left" || e.props.name === "right" ? r.push(e) : e.props.name === "clear" && (e.props.children ? m = e : m = B(e, { children: /* @__PURE__ */ g(w, { size: 16 }) })));
+    }), {
+      inputSlots: r,
+      menuSlots: n,
+      clearButton: m,
+      itemValues: i(n)
+    }) : {
+      menuSlots: s,
+      inputSlots: [],
+      itemValues: i(s)
+    };
+  }, [s]), y = S(
+    () => p.filter(
+      (r) => t === "" || r.label.toLowerCase().includes(t.toLowerCase())
+    ),
+    [p, t]
+  ), C = E(
+    (r) => r ? p.find((n) => n.value === r) : void 0,
+    [p]
+  );
+  return {
+    inputSlots: l,
+    menuSlots: a,
+    clearButton: V,
+    setFilterText: o,
+    filterText: t,
+    items: y,
+    getItemByValue: C
+  };
+};
 export {
-  e as tooltipArrowStyles,
-  o as tooltipContentStyles
+  i as getRecursiveOptionValues,
+  k as useSelectData
 };
 //# sourceMappingURL=fondue-components34.js.map

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components34.js","sources":["../src/components/Tooltip/styles/tooltipStyles.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const tooltipContentStyles = sv({\n    base: 'tw-bg-box-neutral-mighty tw-text-box-neutral-mighty-inverse tw-rounded tw-max-w-48 tw-text-sm tw-overflow-hidden',\n    variants: {\n        padding: {\n            spacious: 'tw-px-3 tw-py-2',\n            compact: 'tw-px-2 tw-py-1',\n        },\n    },\n    defaultVariants: {\n        padding: 'spacious',\n    },\n});\n\nexport const tooltipArrowStyles =\n    'tw-w-2 tw-h-2 tw-bg-box-neutral-mighty tw-border-r tw-border-b tw-border-r-line-mighty tw-border-b-line-mighty tw-rotate-45 -tw-translate-y-1 tw-rounded-br-small';\n"],"names":["tooltipContentStyles","sv","tooltipArrowStyles"],"mappings":";AAIO,MAAMA,IAAuBC,EAAG;AAAA,EACnC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,IACb;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,EACb;AACJ,CAAC,GAEYC,IACT;"}
+{"version":3,"file":"fondue-components34.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n    value: string;\n    label: string;\n};\n\nexport const getRecursiveOptionValues = (children: ReactNode): { value: string; label: string }[] => {\n    const values: { value: string; label: string }[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n            values.push(getSelectOptionValue(child.props));\n        } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n            const optionValues = getRecursiveOptionValues(child.props.children);\n            for (const optionValue of optionValues) {\n                values.push(optionValue);\n            }\n        }\n    });\n    return values;\n};\n\nexport const useSelectData = (children: ReactNode) => {\n    const [filterText, setFilterText] = useState('');\n    const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n        const inputSlots: ReactNode[] = [];\n        const menuSlots: ReactNode[] = [];\n        let clearButton: ReactNode;\n        const hasSlots = Children.toArray(children).some(\n            (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n        );\n\n        if (hasSlots) {\n            Children.forEach(children, (child) => {\n                if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n                    if (child.props.name === 'menu') {\n                        menuSlots.push(child.props.children);\n                    } else if (child.props.name === 'left' || child.props.name === 'right') {\n                        inputSlots.push(child);\n                    } else if (child.props.name === 'clear') {\n                        if (child.props.children) {\n                            clearButton = child;\n                        } else {\n                            clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n                        }\n                    }\n                }\n            });\n\n            return {\n                inputSlots,\n                menuSlots,\n                clearButton,\n                itemValues: getRecursiveOptionValues(menuSlots),\n            };\n        } else {\n            return {\n                menuSlots: children,\n                inputSlots: [],\n                itemValues: getRecursiveOptionValues(children),\n            };\n        }\n    }, [children]);\n\n    const filteredItems = useMemo(\n        () =>\n            itemValues.filter(\n                (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n            ),\n        [itemValues, filterText],\n    );\n\n    const getItemByValue = useCallback(\n        (value?: string) => (value ? itemValues.find((item) => item.value === value) : undefined),\n        [itemValues],\n    );\n\n    return {\n        inputSlots,\n        menuSlots,\n        clearButton,\n        setFilterText,\n        filterText,\n        items: filteredItems,\n        getItemByValue,\n    };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","filteredItems","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AAca,MAAAA,IAA2B,CAACC,MAA4D;AACjG,QAAMC,IAA6C,CAAA;AAC1C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAE/B;AAAA,EAAA,CACH,GACMP;AACX,GAEaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAA,GAC1BC,IAAyB,CAAA;AAC3BE,QAAAA;AAKJ,WAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IAAA,KAI3DhB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,EAAI,CAAA;AAAA,IAGnF,CACH,GAEM;AAAA,MACH,YAAAP;AAAAA,MACA,WAAAC;AAAAA,MACA,aAAAE;AAAAA,MACA,YAAYjB,EAAyBe,CAAS;AAAA,IAAA,KAG3C;AAAA,MACH,WAAWd;AAAA,MACX,YAAY,CAAC;AAAA,MACb,YAAYD,EAAyBC,CAAQ;AAAA,IAAA;AAAA,EAErD,GACD,CAACA,CAAQ,CAAC,GAEPqB,IAAgBJ;AAAA,IAClB,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,YAAA,EAAc,SAASZ,EAAW,aAAa;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAAA,GAGrBa,IAAiBC;AAAA,IACnB,CAACC,MAAoBA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IAC/E,CAACV,CAAU;AAAA,EAAA;AAGR,SAAA;AAAA,IACH,YAAAF;AAAA,IACA,WAAAC;AAAA,IACA,aAAAE;AAAA,IACA,eAAAL;AAAA,IACA,YAAAD;AAAA,IACA,OAAOW;AAAA,IACP,gBAAAE;AAAA,EAAA;AAER;"}

package/dist/fondue-components35.js

@@ -1,5 +1,21 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+const o = "_root_1y56f_5", t = "_input_1y56f_52", s = "_slot_1y56f_71", _ = "_iconSuccess_1y56f_121", n = "_iconError_1y56f_129", c = "_loadingStatus_1y56f_137", i = "_spin_1y56f_1", r = {
+  root: o,
+  input: t,
+  slot: s,
+  iconSuccess: _,
+  iconError: n,
+  loadingStatus: c,
+  spin: i,
+  "tw-dark": "_tw-dark_1y56f_169"
+};
 export {
-  t as FOCUS_OUTLINE
+  r as default,
+  n as iconError,
+  _ as iconSuccess,
+  t as input,
+  c as loadingStatus,
+  o as root,
+  s as slot,
+  i as spin
 };
 //# sourceMappingURL=fondue-components35.js.map

package/dist/fondue-components35.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components35.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components35.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/fondue-components36.js

@@ -1,42 +1,18 @@
-import { Children as a, isValidElement as u, cloneElement as f } from "react";
-import { ForwardedRefSelectItem as E } from "./fondue-components28.js";
-const g = ({
-  children: r,
-  value: o,
-  label: s
-}) => r && typeof r == "string" ? {
-  value: o || r,
-  label: s || r
-} : {
-  value: o || "",
-  label: s || o || ""
-}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
-  const n = [];
-  let t = 0;
-  return a.forEach(r, (e) => {
-    if (w(e, E) && u(e) && g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || ""))
-      n.push(o(e, p + t)), t++;
-    else if (u(e) && (e != null && e.props.children)) {
-      const { parsedChildren: m, subElementCount: C } = y(
-        e.props.children,
-        o,
-        "",
-        p + t
-      );
-      e = f(e, {
-        children: m,
-        key: `group-${p + t}`
-      }), n.push(e), t += C;
-    } else
-      n.push(e);
-  }), {
-    parsedChildren: n,
-    subElementCount: t
-  };
-};
+import { sv as t } from "./fondue-components15.js";
+const o = t({
+  base: "tw-bg-box-neutral-mighty tw-text-box-neutral-mighty-inverse tw-rounded tw-max-w-48 tw-text-sm tw-overflow-hidden",
+  variants: {
+    padding: {
+      spacious: "tw-px-3 tw-py-2",
+      compact: "tw-px-2 tw-py-1"
+    }
+  },
+  defaultVariants: {
+    padding: "spacious"
+  }
+}), e = "tw-w-2 tw-h-2 tw-bg-box-neutral-mighty tw-border-r tw-border-b tw-border-r-line-mighty tw-border-b-line-mighty tw-rotate-45 -tw-translate-y-1 tw-rounded-br-small";
 export {
-  g as getSelectOptionValue,
-  w as isReactLeaf,
-  y as recursiveMap
+  e as tooltipArrowStyles,
+  o as tooltipContentStyles
 };
 //# sourceMappingURL=fondue-components36.js.map

package/dist/fondue-components36.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components36.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n    };\n};\n\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement => {\n    return isValidElement(child) && child.type === Component;\n};\n\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (\n            isReactLeaf(child, ForwardedRefSelectItem) &&\n            isValidElement<SelectItemProps>(child) &&\n            getSelectOptionValue(child.props)\n                .label.toLowerCase()\n                .includes(filterText?.toLowerCase() || '')\n        ) {\n            resultingChildren.push(callback(child, nextIndex + itemCounter));\n            itemCounter++;\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AAaO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAIQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,GAO3BE,IAAc,CAACC,GAAkBC,MACnCC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAGtCE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QACID,EAAYC,GAAOU,CAAsB,KACzCR,EAAgCF,CAAK,KACrCL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE;AAE7C,MAAAE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aACON,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}
+{"version":3,"file":"fondue-components36.js","sources":["../src/components/Tooltip/styles/tooltipStyles.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const tooltipContentStyles = sv({\n    base: 'tw-bg-box-neutral-mighty tw-text-box-neutral-mighty-inverse tw-rounded tw-max-w-48 tw-text-sm tw-overflow-hidden',\n    variants: {\n        padding: {\n            spacious: 'tw-px-3 tw-py-2',\n            compact: 'tw-px-2 tw-py-1',\n        },\n    },\n    defaultVariants: {\n        padding: 'spacious',\n    },\n});\n\nexport const tooltipArrowStyles =\n    'tw-w-2 tw-h-2 tw-bg-box-neutral-mighty tw-border-r tw-border-b tw-border-r-line-mighty tw-border-b-line-mighty tw-rotate-45 -tw-translate-y-1 tw-rounded-br-small';\n"],"names":["tooltipContentStyles","sv","tooltipArrowStyles"],"mappings":";AAIO,MAAMA,IAAuBC,EAAG;AAAA,EACnC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,IACb;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,EACb;AACJ,CAAC,GAEYC,IACT;"}

package/dist/fondue-components37.js

@@ -0,0 +1,5 @@
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+export {
+  t as FOCUS_OUTLINE
+};
+//# sourceMappingURL=fondue-components37.js.map

package/dist/fondue-components37.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components37.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}

package/dist/fondue-components38.js

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

package/dist/fondue-components38.js.map

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

package/dist/fondue-components7.js

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

package/dist/fondue-components7.js.map

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

package/dist/fondue-components8.js

@@ -2,7 +2,7 @@ import { jsx as a, jsxs as F } from "react/jsx-runtime";
 import { IconCross as g } from "@frontify/fondue-icons";
 import * as r from "@radix-ui/react-popover";
 import { forwardRef as d } from "react";
-import { flyoutContentStyles as N, flyoutHeaderStyles as C, flyoutFooterStyles as h, flyoutBodyStyles as x } from "./fondue-components23.js";
+import { flyoutContentStyles as N, flyoutHeaderStyles as C, flyoutFooterStyles as h, flyoutBodyStyles as x } from "./fondue-components25.js";
 const i = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
 i.displayName = "Flyout.Root";
 const y = ({ children: t, "data-test-id": o = "fondue-flyout-trigger" }, e) => /* @__PURE__ */ a(r.Trigger, { "data-test-id": o, asChild: !0, ref: e, children: t });

package/dist/index.d.ts

@@ -342,6 +342,13 @@ export declare const Dropdown: {
 declare type DropdownContentProps = {
     children?: ReactNode;
     'data-test-id'?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    /**
+     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.
+     * @default "bottom"
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
 };
 
 declare type DropdownGroupProps = {
@@ -362,7 +369,7 @@ declare type DropdownItemProps = {
     /**
      * Callback that is called when the item is selected.
      */
-    onSelect: (event: Event) => void;
+    onSelect?: (event: Event) => void;
     'data-test-id'?: string;
 };
 
@@ -816,7 +823,7 @@ declare type TooltipContentProps = {
      */
     padding?: 'spacious' | 'compact';
     /**
-     * Defines the preffered side of the tooltip. It will not be respected if there are collisions with the viewport.
+     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.
      */
     side?: 'top' | 'right' | 'bottom' | 'left';
     maxWidth?: string;