@frontify/fondue-components 28.0.0 → 29.0.0

package/dist/fondue-components134.js

@@ -0,0 +1,44 @@
+const e = "_wrapper_ejipv_4", t = "_root_ejipv_8", o = "_toggleMonthButtonContainer_ejipv_8", n = "_nextMonthButtonContainer_ejipv_22", _ = "_weekday_ejipv_27", d = "_weekdays_ejipv_39", s = "_week_ejipv_27", c = "_day_ejipv_49", i = "_disabled_ejipv_69", r = "_dayContent_ejipv_72", a = "_outside_ejipv_76", v = "_dayButton_ejipv_89", l = "_selected_ejipv_123", p = "_selectedMiddle_ejipv_133", j = "_selectedStart_ejipv_146", y = "_selectedEnd_ejipv_146", h = "_hoverAfter_ejipv_179", u = "_hoverSelected_ejipv_192", w = "_hoverBefore_ejipv_253", B = {
+  wrapper: e,
+  root: t,
+  toggleMonthButtonContainer: o,
+  nextMonthButtonContainer: n,
+  weekday: _,
+  weekdays: d,
+  week: s,
+  day: c,
+  disabled: i,
+  dayContent: r,
+  outside: a,
+  dayButton: v,
+  selected: l,
+  selectedMiddle: p,
+  selectedStart: j,
+  selectedEnd: y,
+  hoverAfter: h,
+  hoverSelected: u,
+  hoverBefore: w
+};
+export {
+  c as day,
+  v as dayButton,
+  r as dayContent,
+  B as default,
+  i as disabled,
+  h as hoverAfter,
+  w as hoverBefore,
+  u as hoverSelected,
+  n as nextMonthButtonContainer,
+  a as outside,
+  t as root,
+  l as selected,
+  y as selectedEnd,
+  p as selectedMiddle,
+  j as selectedStart,
+  o as toggleMonthButtonContainer,
+  s as week,
+  _ as weekday,
+  d as weekdays,
+  e as wrapper
+};
+//# sourceMappingURL=fondue-components134.js.map

package/dist/fondue-components134.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components134.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components135.js

@@ -0,0 +1,9 @@
+import { useMemo as t } from "react";
+const m = (n, s) => t(() => n.map((r) => {
+  const o = s(r), p = (o == null ? void 0 : o.label) ?? r;
+  return { value: r, displayValue: p };
+}), [n, s]);
+export {
+  m as useBadgeItems
+};
+//# sourceMappingURL=fondue-components135.js.map

package/dist/fondue-components135.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components135.js","sources":["../src/components/Select/hooks/useBadgeItems.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemo } from 'react';\n\ntype SelectItemLike = {\n    value: string;\n    label: string;\n};\n\ntype BadgeItem = {\n    value: string;\n    displayValue: string;\n};\n\nexport const useBadgeItems = (\n    selectedItemValues: string[],\n    getItemByValue: (value?: string) => SelectItemLike | undefined,\n): BadgeItem[] => {\n    return useMemo(() => {\n        return selectedItemValues.map((value) => {\n            const item = getItemByValue(value);\n            const displayValue = item?.label ?? value;\n            return { value, displayValue };\n        });\n    }, [selectedItemValues, getItemByValue]);\n};\n"],"names":["useBadgeItems","selectedItemValues","getItemByValue","useMemo","value","item","displayValue"],"mappings":";AAcO,MAAMA,IAAgB,CACzBC,GACAC,MAEOC,EAAQ,MACJF,EAAmB,IAAI,CAACG,MAAU;AACrC,QAAMC,IAAOH,EAAeE,CAAK,GAC3BE,KAAeD,KAAA,gBAAAA,EAAM,UAASD;AACpC,SAAO,EAAE,OAAAA,GAAO,cAAAE,EAAA;AACpB,CAAC,GACF,CAACL,GAAoBC,CAAc,CAAC;"}

package/dist/fondue-components136.js

@@ -0,0 +1,15 @@
+import { useRef as u, useCallback as t } from "react";
+const c = () => {
+  const s = u(!1), o = t((e) => {
+    s.current = !0, e.currentTarget.dataset.showFocusRing = "false";
+  }, []), r = t((e) => {
+    s.current || (e.target.dataset.showFocusRing = "true");
+  }, []), n = t((e) => {
+    e.target.dataset.showFocusRing = "false", s.current = !1;
+  }, []);
+  return { wasClickedRef: s, onMouseDown: o, onFocus: r, onBlur: n };
+};
+export {
+  c as useFocusRing
+};
+//# sourceMappingURL=fondue-components136.js.map

package/dist/fondue-components136.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components136.js","sources":["../src/components/Select/hooks/useFocusRing.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useRef, type FocusEvent, type MouseEvent, type MutableRefObject } from 'react';\n\ntype FocusRingHandlers = {\n    /** Ref tracking whether the element was activated via mouse click. */\n    wasClickedRef: MutableRefObject<boolean>;\n    /** Handler for mousedown events — marks the interaction as click-based. */\n    onMouseDown: (event: MouseEvent<HTMLElement>) => void;\n    /** Handler for focus events — shows the focus ring only for keyboard navigation. */\n    onFocus: (event: FocusEvent<HTMLElement>) => void;\n    /** Handler for blur events — hides the focus ring and resets click tracking. */\n    onBlur: (event: FocusEvent<HTMLElement>) => void;\n};\n\nexport const useFocusRing = (): FocusRingHandlers => {\n    const wasClickedRef = useRef(false);\n\n    const onMouseDown = useCallback((event: MouseEvent<HTMLElement>): void => {\n        wasClickedRef.current = true;\n        event.currentTarget.dataset.showFocusRing = 'false';\n    }, []);\n\n    const onFocus = useCallback((event: FocusEvent<HTMLElement>): void => {\n        if (!wasClickedRef.current) {\n            event.target.dataset.showFocusRing = 'true';\n        }\n    }, []);\n\n    const onBlur = useCallback((event: FocusEvent<HTMLElement>): void => {\n        event.target.dataset.showFocusRing = 'false';\n        wasClickedRef.current = false;\n    }, []);\n\n    return { wasClickedRef, onMouseDown, onFocus, onBlur };\n};\n"],"names":["useFocusRing","wasClickedRef","useRef","onMouseDown","useCallback","event","onFocus","onBlur"],"mappings":";AAeO,MAAMA,IAAe,MAAyB;AACjD,QAAMC,IAAgBC,EAAO,EAAK,GAE5BC,IAAcC,EAAY,CAACC,MAAyC;AACtE,IAAAJ,EAAc,UAAU,IACxBI,EAAM,cAAc,QAAQ,gBAAgB;AAAA,EAChD,GAAG,CAAA,CAAE,GAECC,IAAUF,EAAY,CAACC,MAAyC;AAClE,IAAKJ,EAAc,YACfI,EAAM,OAAO,QAAQ,gBAAgB;AAAA,EAE7C,GAAG,CAAA,CAAE,GAECE,IAASH,EAAY,CAACC,MAAyC;AACjE,IAAAA,EAAM,OAAO,QAAQ,gBAAgB,SACrCJ,EAAc,UAAU;AAAA,EAC5B,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,eAAAA,GAAe,aAAAE,GAAa,SAAAG,GAAS,QAAAC,EAAA;AAClD;"}

package/dist/fondue-components137.js

@@ -0,0 +1,74 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useState as S, useMemo as b, Children as V, isValidElement as C, cloneElement as w, useCallback as B, useEffect as x } from "react";
+import { SelectClear as F } from "./fondue-components148.js";
+import { ForwardedRefSelectItem as L } from "./fondue-components94.js";
+import { ForwardedRefSelectSlot as y } from "./fondue-components95.js";
+import { getSelectOptionValue as I } from "./fondue-components149.js";
+const d = (n, s) => {
+  const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
+    menuComponents: [],
+    items: []
+  });
+  return x(() => {
+    i(null), s || f({
+      menuComponents: [],
+      items: []
+    }), s && (r(!0), s(n).then((u) => {
+      f({
+        menuComponents: u.map((o) => /* @__PURE__ */ E(L, { label: o.label, value: o.value, children: o.content ? o.content : o.label }, o.value)),
+        items: u.map((o) => ({ value: o.value, label: o.label, children: o.content }))
+      }), r(!1);
+    }).catch((u) => {
+      i(u), r(!1);
+    }));
+  }, [n, s]), { isLoading: e, error: m, menuComponents: l.menuComponents, items: l.items };
+}, g = (n) => {
+  const s = [];
+  return V.forEach(n, (e) => {
+    if (C(e) && e.type === L)
+      s.push(I(e.props));
+    else if (C(e) && e.props.children) {
+      const r = g(e.props.children);
+      for (const m of r)
+        s.push(m);
+    }
+  }), s;
+}, q = (n, s) => {
+  const [e, r] = S(""), { inputSlots: m, menuSlots: i, itemValues: l, clearButton: f } = b(() => {
+    const a = [], p = [];
+    let v;
+    V.toArray(n).some(
+      (t) => C(t) && t.type === y
+    ) ? V.forEach(n, (t) => {
+      C(t) && t.type === y && (t.props.name === "menu" ? p.push(t.props.children) : t.props.name === "left" || t.props.name === "right" ? a.push(t) : t.props.name === "clear" && (t.props.children ? v = t : v = w(t, { children: /* @__PURE__ */ E(F, {}) })));
+    }) : p.push(n);
+    const R = g(p);
+    return { inputSlots: a, menuSlots: p, itemValues: R, clearButton: v };
+  }, [n]), u = b(
+    () => l.filter(
+      (a) => e === "" || a.label.toLowerCase().includes(e.toLowerCase())
+    ),
+    [l, e]
+  ), o = B(
+    (a) => a !== void 0 ? l.find((p) => p.value === a) : void 0,
+    [l]
+  ), c = d(e, s);
+  return {
+    items: [...u, ...c.items],
+    menuSlots: [...i, ...c.menuComponents],
+    filterText: e,
+    inputSlots: m,
+    clearButton: f,
+    setFilterText: r,
+    getItemByValue: o,
+    asyncItemStatus: {
+      isLoading: c.isLoading,
+      error: c.error
+    }
+  };
+};
+export {
+  g as getRecursiveOptionValues,
+  q as useSelectData
+};
+//# sourceMappingURL=fondue-components137.js.map

package/dist/fondue-components137.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components137.js","sources":["../src/components/Select/hooks/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ReactNode,\n} from 'react';\n\nimport { SelectClear } from '../components/SelectClear';\nimport { ForwardedRefSelectItem, type SelectItemProps } from '../components/SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from '../components/SelectSlot';\nimport { getSelectOptionValue } from '../utils';\n\nexport type SelectItemType = {\n    value: string;\n    label: string;\n};\n\nexport type AsyncItem = { label: string; value: string; content?: ReactNode };\n\nexport type AsyncItemsFetcher = (filterText: string) => Promise<AsyncItem[]>;\n\nconst useAsyncItems = (filterText: string, getAsyncItems?: AsyncItemsFetcher) => {\n    const [isLoading, setIsLoading] = useState(false);\n    const [error, setError] = useState<Error | null>(null);\n    const [asyncResult, setAsyncResult] = useState<{\n        menuComponents: ReactNode[];\n        items: { value: string; label: string; children?: ReactNode }[];\n    }>({\n        menuComponents: [],\n        items: [],\n    });\n\n    useEffect(() => {\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        setError(null);\n        if (!getAsyncItems) {\n            setAsyncResult({\n                menuComponents: [],\n                items: [],\n            });\n        }\n\n        if (getAsyncItems) {\n            setIsLoading(true);\n            getAsyncItems(filterText)\n                .then((items) => {\n                    setAsyncResult({\n                        menuComponents: items.map((item) => (\n                            <ForwardedRefSelectItem key={item.value} label={item.label} value={item.value}>\n                                {item.content ? item.content : item.label}\n                            </ForwardedRefSelectItem>\n                        )),\n                        items: items.map((item) => ({ value: item.value, label: item.label, children: item.content })),\n                    });\n                    setIsLoading(false);\n                })\n                .catch((error: Error) => {\n                    setError(error);\n                    setIsLoading(false);\n                });\n        }\n    }, [filterText, getAsyncItems]);\n\n    return { isLoading, error, menuComponents: asyncResult.menuComponents, items: asyncResult.items };\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n *   <SelectItem value=\"1\">Option 1</SelectItem>\n *   <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (\n    children: ReactNode,\n): { value: string; label: string; children?: ReactNode }[] => {\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\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @param {AsyncItemsFetcher} [getAsyncItems] - Optional function to fetch items asynchronously based on filter text.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode, getAsyncItems?: AsyncItemsFetcher) => {\n    const [filterText, setFilterText] = useState('');\n    // eslint-disable-next-line react-hooks/preserve-manual-memoization\n    const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n        const inputSlots: ReactNode[] = [];\n        const menuSlots: ReactNode[] = [];\n        let clearButton: ReactNode;\n\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: <SelectClear /> });\n                        }\n                    }\n                }\n            });\n        } else {\n            menuSlots.push(children);\n        }\n\n        const itemValues = getRecursiveOptionValues(menuSlots);\n\n        return { inputSlots, menuSlots, itemValues, clearButton };\n    }, [children]);\n\n    const items = 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 | null) => (value !== undefined ? itemValues.find((item) => item.value === value) : undefined),\n        [itemValues],\n    );\n\n    const asyncItems = useAsyncItems(filterText, getAsyncItems);\n\n    return {\n        items: [...items, ...asyncItems.items],\n        menuSlots: [...menuSlots, ...asyncItems.menuComponents],\n        filterText,\n        inputSlots,\n        clearButton,\n        setFilterText,\n        getItemByValue,\n        asyncItemStatus: {\n            isLoading: asyncItems.isLoading,\n            error: asyncItems.error,\n        },\n    };\n};\n"],"names":["useAsyncItems","filterText","getAsyncItems","isLoading","setIsLoading","useState","error","setError","asyncResult","setAsyncResult","useEffect","items","item","jsx","ForwardedRefSelectItem","getRecursiveOptionValues","children","values","Children","child","isValidElement","getSelectOptionValue","optionValues","optionValue","useSelectData","setFilterText","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","SelectClear","getItemByValue","useCallback","value","asyncItems"],"mappings":"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"}

package/dist/fondue-components138.js

@@ -0,0 +1,18 @@
+import { useId as u, useMemo as f } from "react";
+import { useTranslation as D } from "./fondue-components42.js";
+const g = (t, n, r) => {
+  const { t: i } = D(), s = u(), e = f(() => {
+    if (!t || n.length === 0)
+      return "";
+    const p = n.map((c) => {
+      const o = r(c);
+      return (o == null ? void 0 : o.label) ?? c;
+    }).join(", ");
+    return i("Select_selectedCount", { count: n.length.toString(), items: p });
+  }, [t, n, r, i]);
+  return { selectionDescriptionId: s, selectionDescription: e };
+};
+export {
+  g as useSelectionDescription
+};
+//# sourceMappingURL=fondue-components138.js.map

package/dist/fondue-components138.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components138.js","sources":["../src/components/Select/hooks/useSelectionDescription.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useId, useMemo } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\ntype SelectItemLike = {\n    value: string;\n    label: string;\n};\n\ntype SelectionDescription = {\n    /** The unique ID for the SR description element. */\n    selectionDescriptionId: string;\n    /** The description text for screen readers (empty string when not applicable). */\n    selectionDescription: string;\n};\n\nexport const useSelectionDescription = (\n    isMultiple: boolean,\n    selectedItemValues: string[],\n    getItemByValue: (value?: string) => SelectItemLike | undefined,\n): SelectionDescription => {\n    const { t } = useTranslation();\n    const selectionDescriptionId = useId();\n\n    const selectionDescription = useMemo((): string => {\n        if (!isMultiple || selectedItemValues.length === 0) {\n            return '';\n        }\n        const labels = selectedItemValues\n            .map((value) => {\n                const item = getItemByValue(value);\n                return item?.label ?? value;\n            })\n            .join(', ');\n        return t('Select_selectedCount', { count: selectedItemValues.length.toString(), items: labels });\n    }, [isMultiple, selectedItemValues, getItemByValue, t]);\n\n    return { selectionDescriptionId, selectionDescription };\n};\n"],"names":["useSelectionDescription","isMultiple","selectedItemValues","getItemByValue","t","useTranslation","selectionDescriptionId","useId","selectionDescription","useMemo","labels","value","item"],"mappings":";;AAkBO,MAAMA,IAA0B,CACnCC,GACAC,GACAC,MACuB;AACvB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAyBC,EAAA,GAEzBC,IAAuBC,EAAQ,MAAc;AAC/C,QAAI,CAACR,KAAcC,EAAmB,WAAW;AAC7C,aAAO;AAEX,UAAMQ,IAASR,EACV,IAAI,CAACS,MAAU;AACZ,YAAMC,IAAOT,EAAeQ,CAAK;AACjC,cAAOC,KAAA,gBAAAA,EAAM,UAASD;AAAA,IAC1B,CAAC,EACA,KAAK,IAAI;AACd,WAAOP,EAAE,wBAAwB,EAAE,OAAOF,EAAmB,OAAO,SAAA,GAAY,OAAOQ,GAAQ;AAAA,EACnG,GAAG,CAACT,GAAYC,GAAoBC,GAAgBC,CAAC,CAAC;AAEtD,SAAO,EAAE,wBAAAE,GAAwB,sBAAAE,EAAA;AACrC;"}

package/dist/fondue-components139.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Slot as e } from "@radix-ui/react-slot";
+import a from "./fondue-components127.js";
+const m = ({ children: o, onClear: t }) => /* @__PURE__ */ r(e, { onClick: (l) => {
+  l.stopPropagation(), t();
+}, className: a.clear, role: "button", "aria-label": "Clear selection", children: o });
+export {
+  m as ClearButton
+};
+//# sourceMappingURL=fondue-components139.js.map

package/dist/fondue-components139.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components139.js","sources":["../src/components/Select/components/ClearButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\ntype ClearButtonProps = {\n    /** The clear button element to render inside the slot. */\n    children: ReactNode;\n    /** Callback fired when the clear button is clicked. */\n    onClear: () => void;\n};\n\nexport const ClearButton = ({ children, onClear }: ClearButtonProps): ReactNode => {\n    const handleClick = (event: MouseEvent): void => {\n        event.stopPropagation();\n        onClear();\n    };\n\n    return (\n        <RadixSlot onClick={handleClick} className={styles.clear} role=\"button\" aria-label=\"Clear selection\">\n            {children}\n        </RadixSlot>\n    );\n};\n"],"names":["ClearButton","children","onClear","jsx","RadixSlot","event","styles"],"mappings":";;;AAcO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAOhC,gBAAAC,EAACC,GAAA,EAAU,SANK,CAACC,MAA4B;AAC7C,EAAAA,EAAM,gBAAA,GACNH,EAAA;AACJ,GAGqC,WAAWI,EAAO,OAAO,MAAK,UAAS,cAAW,mBAC9E,UAAAL,EAAA,CACL;"}

package/dist/fondue-components14.js

@@ -1,125 +1,40 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { IconCross as x } from "@frontify/fondue-icons";
-import * as l from "@radix-ui/react-popover";
-import { forwardRef as i } from "react";
-import { useTranslation as I } from "./fondue-components40.js";
-import { addAutoFocusAttribute as _, addShowFocusRing as B } from "./fondue-components53.js";
-import { Button as O } from "./fondue-components6.js";
-import { useFondueTheme as S, ThemeProvider as j } from "./fondue-components37.js";
-import u from "./fondue-components62.js";
-const f = ({ children: t, ...o }) => /* @__PURE__ */ e(l.Root, { ...o, children: t });
-f.displayName = "Flyout.Root";
-const y = ({ asChild: t = !0, children: o, "data-test-id": a = "fondue-flyout-trigger", ...r }, d) => /* @__PURE__ */ e(
-  l.Trigger,
-  {
-    onMouseDown: _,
-    "data-auto-focus-visible": "true",
-    "data-auto-focus-trigger": !0,
-    "data-test-id": a,
-    asChild: t,
-    ref: d,
-    ...r,
-    children: o
-  }
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { propsToCssVariables as y } from "./fondue-components45.js";
+import x from "./fondue-components64.js";
+const u = n(
+  ({
+    as: a = "div",
+    "data-test-id": e = "fondue-flex",
+    children: r,
+    role: i,
+    "aria-label": d,
+    "aria-hidden": s,
+    "aria-describedby": t,
+    "aria-labelledby": o,
+    "aria-expanded": l,
+    "aria-haspopup": p,
+    ...b
+  }, f) => /* @__PURE__ */ m(
+    a,
+    {
+      className: x.root,
+      "data-test-id": e,
+      style: y(b, { justify: "justify-content" }),
+      role: i,
+      "aria-label": d,
+      "aria-hidden": s,
+      "aria-describedby": t,
+      "aria-labelledby": o,
+      "aria-expanded": l,
+      "aria-haspopup": p,
+      ref: f,
+      children: r
+    }
+  )
 );
-y.displayName = "Flyout.Trigger";
-const D = {
-  compact: 8,
-  comfortable: 12,
-  spacious: 16
-}, H = {
-  compact: 8,
-  spacious: 24
-}, p = ({
-  align: t = "start",
-  maxWidth: o = "360px",
-  padding: a = "compact",
-  rounded: r = "medium",
-  width: d = "fit-content",
-  shadow: n = "medium",
-  side: N,
-  triggerOffset: v = "compact",
-  viewportCollisionPadding: C = "compact",
-  "data-test-id": P = "fondue-flyout-content",
-  children: R,
-  ...b
-}, w) => {
-  const { theme: A, dir: c } = S(), T = (s) => !s || c === "ltr" ? s : s === "left" ? "right" : s === "right" ? "left" : s;
-  return /* @__PURE__ */ e(l.Portal, { children: /* @__PURE__ */ m(j, { theme: A, dir: c, children: [
-    /* @__PURE__ */ e("div", { "data-test-id": "fondue-flyout-overlay", className: u.overlay }),
-    /* @__PURE__ */ e(
-      l.Content,
-      {
-        dir: c,
-        style: {
-          "--flyout-max-width": o,
-          "--flyout-width": d
-        },
-        ref: w,
-        align: t,
-        collisionPadding: H[C],
-        sideOffset: D[v],
-        side: T(N),
-        className: u.root,
-        "data-flyout-spacing": a,
-        "data-rounded": r,
-        "data-shadow": n,
-        "data-test-id": P,
-        onFocus: B,
-        ...b,
-        children: R
-      }
-    )
-  ] }) });
-};
-p.displayName = "Flyout.Content";
-const F = ({ showCloseButton: t, children: o, "data-test-id": a = "fondue-flyout-header", closeProps: r }, d) => {
-  const { t: n } = I();
-  return /* @__PURE__ */ m("div", { "data-test-id": a, ref: d, className: u.header, children: [
-    /* @__PURE__ */ e("div", { children: o }),
-    t && /* @__PURE__ */ e(l.Close, { asChild: !0, ...r, children: /* @__PURE__ */ e(
-      O,
-      {
-        size: "small",
-        aspect: "square",
-        emphasis: "weak",
-        "aria-label": n("Flyout_close"),
-        "data-test-id": `${a}-close`,
-        children: /* @__PURE__ */ e(x, { size: 20 })
-      }
-    ) })
-  ] });
-};
-F.displayName = "Flyout.Header";
-const g = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, a) => /* @__PURE__ */ e("div", { "data-test-id": o, ref: a, className: u.footer, children: t });
-g.displayName = "Flyout.Footer";
-const h = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable: a = !1 }, r) => /* @__PURE__ */ e(
-  "div",
-  {
-    "data-test-id": o,
-    ref: r,
-    "data-flyout-spacing": "compact",
-    "data-scrollable": a,
-    className: u.body,
-    children: t
-  }
-);
-h.displayName = "Flyout.Body";
-const W = {
-  Root: f,
-  Trigger: i(y),
-  Content: i(p),
-  Header: i(F),
-  Footer: i(g),
-  Body: i(h)
-};
+u.displayName = "Flex";
 export {
-  W as Flyout,
-  h as FlyoutBody,
-  p as FlyoutContent,
-  g as FlyoutFooter,
-  F as FlyoutHeader,
-  f as FlyoutRoot,
-  y as FlyoutTrigger
+  u as Flex
 };
 //# sourceMappingURL=fondue-components14.js.map

package/dist/fondue-components14.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components14.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 { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { Button } from '../Button/Button';\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    /**\n     * Event handler called when auto-focusing on open\n     */\n    onOpenAutoFocus?: (event: Event) => void;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\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        side,\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, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <div data-test-id=\"fondue-flyout-overlay\" className={styles.overlay} />\n                <RadixPopover.Content\n                    dir={dir}\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                    side={getAdjustedSide(side)}\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    closeProps?: CommonAriaProps;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header', closeProps }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close asChild {...closeProps}>\n                    <Button\n                        size=\"small\"\n                        aspect=\"square\"\n                        emphasis=\"weak\"\n                        aria-label={t('Flyout_close')}\n                        data-test-id={`${dataTestId}-close`}\n                    >\n                        <IconCross size={20} />\n                    </Button>\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","side","triggerOffset","viewportCollisionPadding","theme","dir","useFondueTheme","getAdjustedSide","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","closeProps","t","useTranslation","Button","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components14.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n    /**\n     * The element to render the Flex component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'flex'\n     */\n    display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n    /**\n     * The direction of the children.\n     * @default 'row'\n     */\n    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n    /**\n     * The wrap property.\n     */\n    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-flex',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-content' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nFlex.displayName = 'Flex';\n"],"names":["Flex","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAuDO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,mBAAmB;AAAA,MAChE,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,EAAK,cAAc;"}

package/dist/fondue-components140.js

@@ -0,0 +1,92 @@
+import { jsxs as S, jsx as f } from "react/jsx-runtime";
+import { useRef as m, useState as C, useEffect as _ } from "react";
+import { Badge as w } from "./fondue-components4.js";
+import { useTranslation as I } from "./fondue-components42.js";
+import p from "./fondue-components127.js";
+const W = 4, D = 40, E = 24, M = (r, h, u, o) => {
+  const g = r.offsetWidth;
+  let s = o ? E + W : 0, n = 0;
+  for (const d of u) {
+    const a = h.get(d.value);
+    if (!a)
+      continue;
+    const l = a.offsetWidth, i = n > 0 ? l + W : l, c = u.length - n - 1 > 0 ? D + W : 0;
+    if (s + i + c > g)
+      break;
+    s += i, n++;
+  }
+  return Math.max(1, n);
+}, x = ({
+  items: r,
+  placeholder: h,
+  onDismiss: u,
+  children: o,
+  selectedCount: g = 0
+}) => {
+  const { t: s } = I(), n = m(!1), d = m(null), a = m(/* @__PURE__ */ new Map()), [l, i] = C(r.length), b = o !== void 0;
+  if (_(() => {
+    const e = d.current;
+    if (!e)
+      return;
+    const v = () => {
+      if (r.length === 0) {
+        i(0);
+        return;
+      }
+      i(M(e, a.current, r, b));
+    }, t = new ResizeObserver(v);
+    return t.observe(e), () => {
+      t.disconnect();
+    };
+  }, [r, b]), r.length === 0 && !o)
+    return h;
+  const c = r.length - l, y = (e) => e === 1 ? s("Select_singleItemSelected") : e > 1 ? s("Select_multipleItemsSelected", { count: e.toString() }) : "";
+  return /* @__PURE__ */ S("div", { ref: d, className: p.badgesContainer, children: [
+    /* @__PURE__ */ f("span", { className: p.srOnly, "aria-live": "polite", "aria-atomic": "true", children: y(g) }),
+    o,
+    r.map((e, v) => /* @__PURE__ */ f(
+      "div",
+      {
+        ref: (t) => {
+          t ? a.current.set(e.value, t) : a.current.delete(e.value);
+        },
+        role: "presentation",
+        className: p.badgeWrapper,
+        "data-visible": v < l,
+        onKeyDown: (t) => {
+          (t.key === "Enter" || t.key === " ") && t.stopPropagation();
+        },
+        onMouseDown: () => {
+          n.current = !0;
+        },
+        children: /* @__PURE__ */ f(
+          w,
+          {
+            emphasis: "weak",
+            "aria-label": typeof e.displayValue == "string" ? e.displayValue : e.value,
+            onDismiss: (t) => {
+              t.stopPropagation(), u(e.value, n.current), n.current = !1;
+            },
+            children: e.displayValue
+          }
+        )
+      },
+      e.value
+    )),
+    c > 0 && /* @__PURE__ */ f(
+      "div",
+      {
+        className: p.badgeWrapper,
+        "aria-label": s("Select_additionalItemsSelected", { count: c.toString() }),
+        children: /* @__PURE__ */ S(w, { emphasis: "weak", "aria-hidden": "true", children: [
+          "+",
+          c
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  x as CollapsibleBadges
+};
+//# sourceMappingURL=fondue-components140.js.map

package/dist/fondue-components140.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components140.js","sources":["../src/components/Select/components/CollapsibleBadges.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\n\nimport { Badge } from '#/components/Badge/Badge';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\nconst BADGE_GAP = 4;\nconst OVERFLOW_BADGE_MIN_WIDTH = 40;\nconst INPUT_MIN_WIDTH = 24;\n\ntype BadgeItem = {\n    value: string;\n    displayValue: ReactNode;\n};\n\ntype CollapsibleBadgesProps = {\n    items: BadgeItem[];\n    placeholder?: string;\n    onDismiss: (value: string, preventFocusRing: boolean) => void;\n    /** Optional children to render at the end (e.g., an input field). Space is reserved in the layout calculation. */\n    children?: ReactNode;\n    /** Total number of selected items (for screen reader announcements). */\n    selectedCount?: number;\n};\n\nconst calculateVisibleCount = (\n    container: HTMLDivElement,\n    badgeElements: Map<string, HTMLDivElement>,\n    items: BadgeItem[],\n    hasInputSlot: boolean,\n): number => {\n    const containerWidth = container.offsetWidth;\n    let usedWidth = hasInputSlot ? INPUT_MIN_WIDTH + BADGE_GAP : 0;\n    let count = 0;\n\n    for (const item of items) {\n        const badgeElement = badgeElements.get(item.value);\n        if (!badgeElement) {\n            continue;\n        }\n\n        const badgeWidth = badgeElement.offsetWidth;\n        const widthWithGap = count > 0 ? badgeWidth + BADGE_GAP : badgeWidth;\n        const hasMoreAfterThis = items.length - count - 1 > 0;\n        const reservedWidth = hasMoreAfterThis ? OVERFLOW_BADGE_MIN_WIDTH + BADGE_GAP : 0;\n\n        if (usedWidth + widthWithGap + reservedWidth > containerWidth) {\n            break;\n        }\n\n        usedWidth += widthWithGap;\n        count++;\n    }\n\n    return Math.max(1, count);\n};\n\nexport const CollapsibleBadges = ({\n    items,\n    placeholder,\n    onDismiss,\n    children,\n    selectedCount = 0,\n}: CollapsibleBadgesProps): ReactNode => {\n    const { t } = useTranslation();\n    const wasClickedRef = useRef(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const badgeElementsRef = useRef<Map<string, HTMLDivElement>>(new Map());\n    const [visibleCount, setVisibleCount] = useState(items.length);\n    const hasChildren = children !== undefined;\n\n    useEffect(() => {\n        const container = containerRef.current;\n        if (!container) {\n            return;\n        }\n\n        const recalculate = (): void => {\n            if (items.length === 0) {\n                setVisibleCount(0);\n                return;\n            }\n            setVisibleCount(calculateVisibleCount(container, badgeElementsRef.current, items, hasChildren));\n        };\n\n        const observer = new ResizeObserver(recalculate);\n        observer.observe(container);\n        return (): void => {\n            observer.disconnect();\n        };\n    }, [items, hasChildren]);\n\n    if (items.length === 0 && !children) {\n        return placeholder;\n    }\n\n    const overflowCount = items.length - visibleCount;\n\n    const getSelectedCountText = (count: number): string => {\n        if (count === 1) {\n            return t('Select_singleItemSelected');\n        }\n        if (count > 1) {\n            return t('Select_multipleItemsSelected', { count: count.toString() });\n        }\n        return '';\n    };\n\n    return (\n        <div ref={containerRef} className={styles.badgesContainer}>\n            <span className={styles.srOnly} aria-live=\"polite\" aria-atomic=\"true\">\n                {getSelectedCountText(selectedCount)}\n            </span>\n            {children}\n            {items.map((item, index) => (\n                <div\n                    key={item.value}\n                    ref={(element): void => {\n                        if (element) {\n                            badgeElementsRef.current.set(item.value, element);\n                        } else {\n                            badgeElementsRef.current.delete(item.value);\n                        }\n                    }}\n                    role=\"presentation\"\n                    className={styles.badgeWrapper}\n                    data-visible={index < visibleCount}\n                    onKeyDown={(event: KeyboardEvent<HTMLDivElement>): void => {\n                        if (event.key === 'Enter' || event.key === ' ') {\n                            event.stopPropagation();\n                        }\n                    }}\n                    onMouseDown={(): void => {\n                        wasClickedRef.current = true;\n                    }}\n                >\n                    <Badge\n                        emphasis=\"weak\"\n                        aria-label={typeof item.displayValue === 'string' ? item.displayValue : item.value}\n                        onDismiss={(event) => {\n                            event.stopPropagation();\n                            onDismiss(item.value, wasClickedRef.current);\n                            wasClickedRef.current = false;\n                        }}\n                    >\n                        {item.displayValue}\n                    </Badge>\n                </div>\n            ))}\n            {overflowCount > 0 && (\n                <div\n                    className={styles.badgeWrapper}\n                    aria-label={t('Select_additionalItemsSelected', { count: overflowCount.toString() })}\n                >\n                    <Badge emphasis=\"weak\" aria-hidden=\"true\">\n                        +{overflowCount}\n                    </Badge>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["BADGE_GAP","OVERFLOW_BADGE_MIN_WIDTH","INPUT_MIN_WIDTH","calculateVisibleCount","container","badgeElements","items","hasInputSlot","containerWidth","usedWidth","count","item","badgeElement","badgeWidth","widthWithGap","reservedWidth","CollapsibleBadges","placeholder","onDismiss","children","selectedCount","t","useTranslation","wasClickedRef","useRef","containerRef","badgeElementsRef","visibleCount","setVisibleCount","useState","hasChildren","useEffect","recalculate","observer","overflowCount","getSelectedCountText","styles","jsx","index","element","event","Badge","jsxs"],"mappings":";;;;;AASA,MAAMA,IAAY,GACZC,IAA2B,IAC3BC,IAAkB,IAiBlBC,IAAwB,CAC1BC,GACAC,GACAC,GACAC,MACS;AACT,QAAMC,IAAiBJ,EAAU;AACjC,MAAIK,IAAYF,IAAeL,IAAkBF,IAAY,GACzDU,IAAQ;AAEZ,aAAWC,KAAQL,GAAO;AACtB,UAAMM,IAAeP,EAAc,IAAIM,EAAK,KAAK;AACjD,QAAI,CAACC;AACD;AAGJ,UAAMC,IAAaD,EAAa,aAC1BE,IAAeJ,IAAQ,IAAIG,IAAab,IAAYa,GAEpDE,IADmBT,EAAM,SAASI,IAAQ,IAAI,IACXT,IAA2BD,IAAY;AAEhF,QAAIS,IAAYK,IAAeC,IAAgBP;AAC3C;AAGJ,IAAAC,KAAaK,GACbJ;AAAA,EACJ;AAEA,SAAO,KAAK,IAAI,GAAGA,CAAK;AAC5B,GAEaM,IAAoB,CAAC;AAAA,EAC9B,OAAAV;AAAA,EACA,aAAAW;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AACpB,MAAyC;AACrC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAgBC,EAAO,EAAK,GAC5BC,IAAeD,EAAuB,IAAI,GAC1CE,IAAmBF,EAAoC,oBAAI,KAAK,GAChE,CAACG,GAAcC,CAAe,IAAIC,EAASvB,EAAM,MAAM,GACvDwB,IAAcX,MAAa;AAuBjC,MArBAY,EAAU,MAAM;AACZ,UAAM3B,IAAYqB,EAAa;AAC/B,QAAI,CAACrB;AACD;AAGJ,UAAM4B,IAAc,MAAY;AAC5B,UAAI1B,EAAM,WAAW,GAAG;AACpB,QAAAsB,EAAgB,CAAC;AACjB;AAAA,MACJ;AACA,MAAAA,EAAgBzB,EAAsBC,GAAWsB,EAAiB,SAASpB,GAAOwB,CAAW,CAAC;AAAA,IAClG,GAEMG,IAAW,IAAI,eAAeD,CAAW;AAC/C,WAAAC,EAAS,QAAQ7B,CAAS,GACnB,MAAY;AACf,MAAA6B,EAAS,WAAA;AAAA,IACb;AAAA,EACJ,GAAG,CAAC3B,GAAOwB,CAAW,CAAC,GAEnBxB,EAAM,WAAW,KAAK,CAACa;AACvB,WAAOF;AAGX,QAAMiB,IAAgB5B,EAAM,SAASqB,GAE/BQ,IAAuB,CAACzB,MACtBA,MAAU,IACHW,EAAE,2BAA2B,IAEpCX,IAAQ,IACDW,EAAE,gCAAgC,EAAE,OAAOX,EAAM,SAAA,GAAY,IAEjE;AAGX,2BACK,OAAA,EAAI,KAAKe,GAAc,WAAWW,EAAO,iBACtC,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,QAAQ,aAAU,UAAS,eAAY,QAC1D,UAAAD,EAAqBf,CAAa,EAAA,CACvC;AAAA,IACCD;AAAA,IACAb,EAAM,IAAI,CAACK,GAAM2B,MACd,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,KAAK,CAACE,MAAkB;AACpB,UAAIA,IACAb,EAAiB,QAAQ,IAAIf,EAAK,OAAO4B,CAAO,IAEhDb,EAAiB,QAAQ,OAAOf,EAAK,KAAK;AAAA,QAElD;AAAA,QACA,MAAK;AAAA,QACL,WAAWyB,EAAO;AAAA,QAClB,gBAAcE,IAAQX;AAAA,QACtB,WAAW,CAACa,MAA+C;AACvD,WAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QACvCA,EAAM,gBAAA;AAAA,QAEd;AAAA,QACA,aAAa,MAAY;AACrB,UAAAjB,EAAc,UAAU;AAAA,QAC5B;AAAA,QAEA,UAAA,gBAAAc;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,UAAS;AAAA,YACT,cAAY,OAAO9B,EAAK,gBAAiB,WAAWA,EAAK,eAAeA,EAAK;AAAA,YAC7E,WAAW,CAAC6B,MAAU;AAClB,cAAAA,EAAM,gBAAA,GACNtB,EAAUP,EAAK,OAAOY,EAAc,OAAO,GAC3CA,EAAc,UAAU;AAAA,YAC5B;AAAA,YAEC,UAAAZ,EAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACV;AAAA,MA9BKA,EAAK;AAAA,IAAA,CAgCjB;AAAA,IACAuB,IAAgB,KACb,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWD,EAAO;AAAA,QAClB,cAAYf,EAAE,kCAAkC,EAAE,OAAOa,EAAc,SAAA,GAAY;AAAA,QAEnF,UAAA,gBAAAQ,EAACD,GAAA,EAAM,UAAS,QAAO,eAAY,QAAO,UAAA;AAAA,UAAA;AAAA,UACpCP;AAAA,QAAA,EAAA,CACN;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GAER;AAER;"}

package/dist/fondue-components141.js

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