@frontify/fondue-components 27.0.0 → 28.0.0

package/dist/fondue-components.js

@@ -8,32 +8,33 @@ import { ColorPicker as c } from "./fondue-components8.js";
 import { Dialog as g } from "./fondue-components9.js";
 import { Divider as S } from "./fondue-components10.js";
 import { Dropdown as B } from "./fondue-components11.js";
-import { Flex as L } from "./fondue-components12.js";
-import { Flyout as k } from "./fondue-components13.js";
-import { Grid as v } from "./fondue-components14.js";
-import { Heading as F } from "./fondue-components15.js";
-import { Label as w } from "./fondue-components16.js";
-import { Link as R } from "./fondue-components17.js";
-import { LoadingBar as G } from "./fondue-components18.js";
-import { LoadingCircle as I } from "./fondue-components19.js";
-import { Notice as j } from "./fondue-components20.js";
-import { RadioList as z } from "./fondue-components21.js";
-import { RouterProvider as J } from "./fondue-components22.js";
-import { ScrollArea as M } from "./fondue-components23.js";
-import { Section as Q } from "./fondue-components24.js";
-import { SegmentedControl as V } from "./fondue-components25.js";
-import { Select as X } from "./fondue-components26.js";
-import { Slider as Z } from "./fondue-components27.js";
-import { SplitButton as $ } from "./fondue-components28.js";
-import { Switch as ro } from "./fondue-components29.js";
-import { Table as to } from "./fondue-components30.js";
-import { Tag as mo } from "./fondue-components31.js";
-import { Tabs as fo } from "./fondue-components32.js";
-import { Text as ao } from "./fondue-components33.js";
-import { TextInput as no } from "./fondue-components34.js";
-import { Textarea as To } from "./fondue-components35.js";
-import { ThemeContext as uo, ThemeProvider as So, useFondueTheme as ho } from "./fondue-components36.js";
-import { Tooltip as Co } from "./fondue-components37.js";
+import { DatePicker as L } from "./fondue-components12.js";
+import { Flex as k } from "./fondue-components13.js";
+import { Flyout as P } from "./fondue-components14.js";
+import { Grid as v } from "./fondue-components15.js";
+import { Heading as w } from "./fondue-components16.js";
+import { Label as R } from "./fondue-components17.js";
+import { Link as G } from "./fondue-components18.js";
+import { LoadingBar as I } from "./fondue-components19.js";
+import { LoadingCircle as j } from "./fondue-components20.js";
+import { Notice as z } from "./fondue-components21.js";
+import { RadioList as J } from "./fondue-components22.js";
+import { RouterProvider as M } from "./fondue-components23.js";
+import { ScrollArea as Q } from "./fondue-components24.js";
+import { Section as V } from "./fondue-components25.js";
+import { SegmentedControl as X } from "./fondue-components26.js";
+import { Select as Z } from "./fondue-components27.js";
+import { Slider as $ } from "./fondue-components28.js";
+import { SplitButton as ro } from "./fondue-components29.js";
+import { Switch as to } from "./fondue-components30.js";
+import { Table as mo } from "./fondue-components31.js";
+import { Tag as fo } from "./fondue-components32.js";
+import { Tabs as ao } from "./fondue-components33.js";
+import { Text as no } from "./fondue-components34.js";
+import { TextInput as To } from "./fondue-components35.js";
+import { Textarea as uo } from "./fondue-components36.js";
+import { ThemeContext as ho, ThemeProvider as Bo, useFondueTheme as Co } from "./fondue-components37.js";
+import { Tooltip as bo } from "./fondue-components38.js";
 export {
   t as Accordion,
   m as Badge,
@@ -41,36 +42,37 @@ export {
   a as Button,
   l as Checkbox,
   c as ColorPicker,
+  L as DatePicker,
   g as Dialog,
   S as Divider,
   B as Dropdown,
-  L as Flex,
-  k as Flyout,
+  k as Flex,
+  P as Flyout,
   v as Grid,
-  F as Heading,
-  w as Label,
-  R as Link,
-  G as LoadingBar,
-  I as LoadingCircle,
-  j as Notice,
-  z as RadioList,
-  J as RouterProvider,
-  M as ScrollArea,
-  Q as Section,
-  V as SegmentedControl,
-  X as Select,
-  Z as Slider,
-  $ as SplitButton,
-  ro as Switch,
-  to as Table,
-  fo as Tabs,
-  mo as Tag,
-  ao as Text,
-  no as TextInput,
-  To as Textarea,
-  uo as ThemeContext,
-  So as ThemeProvider,
-  Co as Tooltip,
-  ho as useFondueTheme
+  w as Heading,
+  R as Label,
+  G as Link,
+  I as LoadingBar,
+  j as LoadingCircle,
+  z as Notice,
+  J as RadioList,
+  M as RouterProvider,
+  Q as ScrollArea,
+  V as Section,
+  X as SegmentedControl,
+  Z as Select,
+  $ as Slider,
+  ro as SplitButton,
+  to as Switch,
+  mo as Table,
+  ao as Tabs,
+  fo as Tag,
+  no as Text,
+  To as TextInput,
+  uo as Textarea,
+  ho as ThemeContext,
+  Bo as ThemeProvider,
+  bo as Tooltip,
+  Co as useFondueTheme
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

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

package/dist/fondue-components10.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as f from "@radix-ui/react-separator";
 import { forwardRef as p } from "react";
-import c from "./fondue-components54.js";
+import c from "./fondue-components55.js";
 const u = p(
   ({
     "data-test-id": t = "fondue-divider",

package/dist/fondue-components100.js

@@ -1,9 +1,20 @@
-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]);
+import { useState as a, useCallback as u } from "react";
+const n = (s, t, e) => {
+  const [f, r] = a(e ?? null), i = t !== void 0 ? t : f, l = i !== null ? [i] : [], m = u(
+    (d) => {
+      d !== void 0 && (t === void 0 && r(d), s == null || s(d));
+    },
+    [t, s]
+  ), I = u(() => {
+    t === void 0 && r(null), s == null || s(null);
+  }, [t, s]);
+  return {
+    selectedItemValues: l,
+    selectItem: m,
+    clear: I
+  };
+};
 export {
-  m as useBadgeItems
+  n as useSingleSelect
 };
 //# sourceMappingURL=fondue-components100.js.map

package/dist/fondue-components100.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components100.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;"}
+{"version":3,"file":"fondue-components100.js","sources":["../src/components/Select/hooks/useSingleSelect.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useState } from 'react';\n\nexport const useSingleSelect = (\n    onSelect?: (value: string | null) => void,\n    value?: string | null,\n    defaultValue?: string,\n) => {\n    const [selectedItemState, setSelectedItemState] = useState<string | null>(defaultValue ?? null);\n\n    const selectedValue = value !== undefined ? value : selectedItemState;\n    const selectedItemValues = selectedValue !== null ? [selectedValue] : [];\n\n    const selectItem = useCallback(\n        (item?: string) => {\n            if (item === undefined) {\n                return;\n            }\n            if (value === undefined) {\n                setSelectedItemState(item);\n            }\n            onSelect?.(item);\n        },\n        [value, onSelect],\n    );\n\n    const clear = useCallback(() => {\n        if (value === undefined) {\n            setSelectedItemState(null);\n        }\n        onSelect?.(null);\n    }, [value, onSelect]);\n\n    return {\n        selectedItemValues,\n        selectItem,\n        clear,\n    };\n};\n"],"names":["useSingleSelect","onSelect","value","defaultValue","selectedItemState","setSelectedItemState","useState","selectedValue","selectedItemValues","selectItem","useCallback","item","clear"],"mappings":";AAIO,MAAMA,IAAkB,CAC3BC,GACAC,GACAC,MACC;AACD,QAAM,CAACC,GAAmBC,CAAoB,IAAIC,EAAwBH,KAAgB,IAAI,GAExFI,IAAgBL,MAAU,SAAYA,IAAQE,GAC9CI,IAAqBD,MAAkB,OAAO,CAACA,CAAa,IAAI,CAAA,GAEhEE,IAAaC;AAAA,IACf,CAACC,MAAkB;AACf,MAAIA,MAAS,WAGTT,MAAU,UACVG,EAAqBM,CAAI,GAE7BV,KAAA,QAAAA,EAAWU;AAAA,IACf;AAAA,IACA,CAACT,GAAOD,CAAQ;AAAA,EAAA,GAGdW,IAAQF,EAAY,MAAM;AAC5B,IAAIR,MAAU,UACVG,EAAqB,IAAI,GAE7BJ,KAAA,QAAAA,EAAW;AAAA,EACf,GAAG,CAACC,GAAOD,CAAQ,CAAC;AAEpB,SAAO;AAAA,IACH,oBAAAO;AAAA,IACA,YAAAC;AAAA,IACA,OAAAG;AAAA,EAAA;AAER;"}

package/dist/fondue-components101.js

@@ -1,15 +1,154 @@
-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 };
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { IconCaretDown as V } from "@frontify/fondue-icons";
+import * as I from "@radix-ui/react-popover";
+import { useSelect as s } from "downshift";
+import { forwardRef as ee, useRef as te, useCallback as N, useState as ne, useMemo as oe } from "react";
+import { useBadgeItems as re } from "./fondue-components110.js";
+import { useFocusRing as ae } from "./fondue-components111.js";
+import { useSelectData as se } from "./fondue-components112.js";
+import { useSelectionDescription as ie } from "./fondue-components113.js";
+import r from "./fondue-components102.js";
+import { ClearButton as le } from "./fondue-components114.js";
+import { CollapsibleBadges as ce } from "./fondue-components115.js";
+import { SelectMenu as ue } from "./fondue-components116.js";
+import { StatusIcons as ge } from "./fondue-components117.js";
+const O = ({
+  children: M,
+  selectedItemValues: o,
+  onItemSelect: p,
+  onClear: P,
+  placeholder: c = "",
+  status: u = "neutral",
+  disabled: f,
+  alignMenu: R = "start",
+  side: j = "bottom",
+  id: k,
+  showStringValue: y = !0,
+  "data-test-id": b = "fondue-select",
+  viewportCollisionPadding: E = "compact",
+  onEscapeKeyDown: F,
+  multiple: g,
+  ...i
+}, a) => {
+  const C = te(null), B = N(
+    (e) => {
+      C.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+    },
+    [a]
+  ), { inputSlots: H, menuSlots: K, items: w, clearButton: S, getItemByValue: l } = se(M), { onMouseDown: z, onFocus: A, onBlur: q } = ae(), { selectionDescriptionId: D, selectionDescription: m } = ie(
+    g,
+    o,
+    l
+  ), G = re(o, l), [J, v] = ne(!1), x = N(
+    (e) => {
+      const t = l(e);
+      if (t)
+        return !y && (t != null && t.children) ? t.children : t == null ? void 0 : t.label;
+    },
+    [l, y]
+  ), { getToggleButtonProps: L, getMenuProps: Q, getItemProps: U, reset: W, isOpen: X, highlightedIndex: Y } = s({
+    items: w,
+    selectedItem: null,
+    toggleButtonId: k,
+    labelId: "aria-labelledby" in i ? i["aria-labelledby"] : void 0,
+    onIsOpenChange: () => {
+      v(!1);
+    },
+    onHighlightedIndexChange: () => {
+      v(!0);
+    },
+    onSelectedItemChange: ({ selectedItem: e }) => {
+      p(e == null ? void 0 : e.value);
+    },
+    itemToString: (e) => e ? e.label : "",
+    ...g ? {
+      stateReducer: (e, t) => {
+        const { changes: h, type: $ } = t;
+        switch ($) {
+          case s.stateChangeTypes.ToggleButtonKeyDownEnter:
+          case s.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+          case s.stateChangeTypes.ItemClick:
+            return {
+              ...h,
+              isOpen: !0,
+              highlightedIndex: e.highlightedIndex
+            };
+          case s.stateChangeTypes.ToggleButtonBlur:
+            return {
+              ...h,
+              selectedItem: e.selectedItem
+            };
+        }
+        return h;
+      }
+    } : {}
+  }), T = u === "error", Z = () => {
+    P(), W();
+  }, _ = oe(
+    () => x(o[0]) || c,
+    [x, o, c]
+  );
+  return /* @__PURE__ */ d(I.Root, { open: X, children: [
+    /* @__PURE__ */ n(I.Anchor, { asChild: !0, onMouseDown: z, onFocus: A, onBlur: q, children: /* @__PURE__ */ d(
+      "div",
+      {
+        ref: B,
+        className: r.root,
+        "data-status": T ? "error" : u,
+        "data-disabled": f,
+        "data-empty": o.length === 0,
+        "data-test-id": b,
+        ...f ? {} : (
+          // eslint-disable-next-line react-hooks/refs
+          L({
+            "aria-label": "aria-label" in i ? i["aria-label"] : void 0,
+            "aria-describedby": m ? D : void 0,
+            ref: B
+          })
+        ),
+        children: [
+          m ? /* @__PURE__ */ n("span", { id: D, className: r.srOnly, children: m }) : null,
+          g ? /* @__PURE__ */ n("div", { className: r.selectedValue, children: /* @__PURE__ */ n(
+            ce,
+            {
+              items: G,
+              placeholder: c,
+              onDismiss: (e) => {
+                var t;
+                p(e), (t = C.current) == null || t.focus();
+              },
+              selectedCount: o.length
+            }
+          ) }) : /* @__PURE__ */ n("span", { className: r.selectedValue, children: _ }),
+          H,
+          S ? /* @__PURE__ */ n(le, { onClear: Z, children: S }) : null,
+          /* @__PURE__ */ d("div", { className: r.icons, children: [
+            /* @__PURE__ */ n(V, { size: 16, className: r.caret }),
+            /* @__PURE__ */ n(ge, { status: u, hasError: T, dataTestId: b })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      ue,
+      {
+        align: R,
+        side: j,
+        highlightedIndex: Y,
+        getMenuProps: Q,
+        getItemProps: U,
+        selectedItemValues: o,
+        hasInteractedSinceOpening: J,
+        viewportCollisionPadding: E,
+        onEscapeKeyDown: F,
+        children: K
+      }
+    )
+  ] });
 };
+O.displayName = "Select";
+const Te = ee(O);
 export {
-  c as useFocusRing
+  Te as SelectBase
 };
 //# sourceMappingURL=fondue-components101.js.map

package/dist/fondue-components101.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components101.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;"}
+{"version":3,"file":"fondue-components101.js","sources":["../src/components/Select/components/SelectBase.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useCallback, useMemo, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { useBadgeItems } from '../hooks/useBadgeItems';\nimport { useFocusRing } from '../hooks/useFocusRing';\nimport { useSelectData } from '../hooks/useSelectData';\nimport { useSelectionDescription } from '../hooks/useSelectionDescription';\nimport styles from '../styles/select.module.scss';\n\nimport { ClearButton } from './ClearButton';\nimport { CollapsibleBadges } from './CollapsibleBadges';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport { StatusIcons } from './StatusIcons';\n\nexport type SelectSharedProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu\n     */\n    children?: ReactNode;\n    /**\n     * The placeholder in the select component\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport\n     * @default \"bottom\"\n     */\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * The data test id of the select component\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plain text (from the label prop) when set to true\n     * Items child components are used if set to false\n     * @default true\n     */\n    showStringValue?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n    /**\n     * Event handler called when the escape key is pressed\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n} & CommonAriaProps;\n\ntype SelectBaseProps = SelectSharedProps & {\n    /**\n     * The currently selected item values\n     */\n    selectedItemValues: string[];\n    /**\n     * Callback fired when an item is selected or deselected\n     */\n    onItemSelect: (value?: string) => void;\n    /**\n     * Callback fired when the selection is cleared\n     */\n    onClear: () => void;\n    /**\n     * Whether the select allows multiple selections\n     */\n    multiple: boolean;\n};\n\nconst SelectBaseInput = (\n    {\n        children,\n        selectedItemValues,\n        onItemSelect,\n        onClear,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        viewportCollisionPadding = 'compact',\n        onEscapeKeyDown,\n        multiple,\n        ...props\n    }: SelectBaseProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactNode => {\n    const internalRef = useRef<HTMLDivElement | null>(null);\n    const triggerRef = useCallback(\n        (node: HTMLDivElement | null): void => {\n            internalRef.current = node;\n            if (typeof forwardedRef === 'function') {\n                forwardedRef(node);\n            } else if (forwardedRef) {\n                forwardedRef.current = node;\n            }\n        },\n        [forwardedRef],\n    );\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n    const { onMouseDown, onFocus, onBlur } = useFocusRing();\n    const { selectionDescriptionId, selectionDescription } = useSelectionDescription(\n        multiple,\n        selectedItemValues,\n        getItemByValue,\n    );\n    const badgeItems = useBadgeItems(selectedItemValues, getItemByValue);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const getDisplayedValue = useCallback(\n        (itemValue?: string): ReactNode => {\n            const selectedItem = getItemByValue(itemValue);\n            if (selectedItem) {\n                return !showStringValue && selectedItem?.children ? selectedItem.children : selectedItem?.label;\n            }\n            return undefined;\n        },\n        [getItemByValue, showStringValue],\n    );\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, isOpen, highlightedIndex } = useSelect<{\n        value: string;\n        label: string;\n        children?: ReactNode;\n    }>({\n        items,\n        selectedItem: null,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        onSelectedItemChange: ({ selectedItem }) => {\n            onItemSelect(selectedItem?.value);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n        ...(multiple\n            ? {\n                  stateReducer: (state, actionAndChanges) => {\n                      const { changes, type } = actionAndChanges;\n                      switch (type) {\n                          case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:\n                          case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n                          case useSelect.stateChangeTypes.ItemClick:\n                              return {\n                                  ...changes,\n                                  isOpen: true,\n                                  highlightedIndex: state.highlightedIndex,\n                              };\n                          case useSelect.stateChangeTypes.ToggleButtonBlur:\n                              return {\n                                  ...changes,\n                                  selectedItem: state.selectedItem,\n                              };\n                      }\n                      return changes;\n                  },\n              }\n            : {}),\n    });\n\n    const hasError = status === 'error';\n\n    const handleClear = (): void => {\n        onClear();\n        reset();\n    };\n\n    const singleSelectValue = useMemo(\n        (): ReactNode => getDisplayedValue(selectedItemValues[0]) || placeholder,\n        [getDisplayedValue, selectedItemValues, placeholder],\n    );\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild onMouseDown={onMouseDown} onFocus={onFocus} onBlur={onBlur}>\n                <div\n                    ref={triggerRef}\n                    className={styles.root}\n                    data-status={hasError ? 'error' : status}\n                    data-disabled={disabled}\n                    data-empty={selectedItemValues.length === 0}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : // eslint-disable-next-line react-hooks/refs\n                          getToggleButtonProps({\n                              'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                              'aria-describedby': selectionDescription ? selectionDescriptionId : undefined,\n                              ref: triggerRef,\n                          }))}\n                >\n                    {selectionDescription ? (\n                        <span id={selectionDescriptionId} className={styles.srOnly}>\n                            {selectionDescription}\n                        </span>\n                    ) : null}\n                    {multiple ? (\n                        <div className={styles.selectedValue}>\n                            <CollapsibleBadges\n                                items={badgeItems}\n                                placeholder={placeholder}\n                                onDismiss={(value) => {\n                                    onItemSelect(value);\n                                    internalRef.current?.focus();\n                                }}\n                                selectedCount={selectedItemValues.length}\n                            />\n                        </div>\n                    ) : (\n                        <span className={styles.selectedValue}>{singleSelectValue}</span>\n                    )}\n                    {inputSlots}\n                    {clearButton ? <ClearButton onClear={handleClear}>{clearButton}</ClearButton> : null}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        <StatusIcons status={status} hasError={hasError} dataTestId={dataTestId} />\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItemValues={selectedItemValues}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n                onEscapeKeyDown={onEscapeKeyDown}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectBaseInput.displayName = 'Select';\n\nexport const SelectBase = forwardRef<HTMLDivElement, SelectBaseProps>(SelectBaseInput);\n"],"names":["SelectBaseInput","children","selectedItemValues","onItemSelect","onClear","placeholder","status","disabled","alignMenu","side","id","showStringValue","dataTestId","viewportCollisionPadding","onEscapeKeyDown","multiple","props","forwardedRef","internalRef","useRef","triggerRef","useCallback","node","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","onMouseDown","onFocus","onBlur","useFocusRing","selectionDescriptionId","selectionDescription","useSelectionDescription","badgeItems","useBadgeItems","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getDisplayedValue","itemValue","selectedItem","getToggleButtonProps","getMenuProps","getItemProps","reset","isOpen","highlightedIndex","useSelect","item","state","actionAndChanges","changes","type","hasError","handleClear","singleSelectValue","useMemo","jsxs","RadixPopover","jsx","styles","CollapsibleBadges","value","_a","ClearButton","IconCaretDown","StatusIcons","SelectMenu","SelectBase","forwardRef"],"mappings":"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"}

package/dist/fondue-components102.js

@@ -1,74 +1,48 @@
-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-components108.js";
-import { ForwardedRefSelectItem as L } from "./fondue-components75.js";
-import { ForwardedRefSelectSlot as y } from "./fondue-components76.js";
-import { getSelectOptionValue as I } from "./fondue-components109.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
-    }
-  };
+const c = "_root_13ciu_7", e = "_selectedValue_13ciu_63", _ = "_input_13ciu_80", o = "_slot_13ciu_106", t = "_clear_13ciu_156", n = "_clearIcon_13ciu_163", u = "_icons_13ciu_167", i = "_caret_13ciu_173", r = "_iconSuccess_13ciu_201", s = "_iconError_13ciu_207", a = "_menu_13ciu_213", l = "_portal_13ciu_236", p = "_item_13ciu_252", g = "_checkmarkIcon_13ciu_281", m = "_itemValue_13ciu_287", d = "_group_13ciu_301", I = "_groupHeading_13ciu_312", b = "_badgesContainer_13ciu_324", k = "_badgeWrapper_13ciu_336", S = "_srOnly_13ciu_345", V = "_multiSelectInput_13ciu_357", y = {
+  root: c,
+  selectedValue: e,
+  input: _,
+  slot: o,
+  clear: t,
+  clearIcon: n,
+  icons: u,
+  caret: i,
+  iconSuccess: r,
+  iconError: s,
+  menu: a,
+  portal: l,
+  item: p,
+  checkmarkIcon: g,
+  itemValue: m,
+  group: d,
+  groupHeading: I,
+  badgesContainer: b,
+  badgeWrapper: k,
+  srOnly: S,
+  multiSelectInput: V
 };
 export {
-  g as getRecursiveOptionValues,
-  q as useSelectData
+  k as badgeWrapper,
+  b as badgesContainer,
+  i as caret,
+  g as checkmarkIcon,
+  t as clear,
+  n as clearIcon,
+  y as default,
+  d as group,
+  I as groupHeading,
+  s as iconError,
+  r as iconSuccess,
+  u as icons,
+  _ as input,
+  p as item,
+  m as itemValue,
+  a as menu,
+  V as multiSelectInput,
+  l as portal,
+  c as root,
+  e as selectedValue,
+  o as slot,
+  S as srOnly
 };
 //# sourceMappingURL=fondue-components102.js.map

package/dist/fondue-components102.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components102.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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"}
+{"version":3,"file":"fondue-components102.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components103.js

@@ -1,18 +1,17 @@
-import { useId as u, useMemo as f } from "react";
-import { useTranslation as D } from "./fondue-components39.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 };
-};
+import { format as o } from "date-fns";
+import { transformDateRangeToPickerDateRange as i, transformDatePickerDateToDate as e } from "./fondue-components118.js";
+const y = (r) => !!(r && "from" in r && "to" in r), M = (r) => {
+  const t = e(r);
+  if (t)
+    return o(t, "MMMM d, yyyy");
+}, a = (r) => {
+  const t = i(r);
+  if (!(t != null && t.from) || !(t != null && t.to))
+    return;
+  const n = t.from.getFullYear() === t.to.getFullYear();
+  return n && t.from.getMonth() === t.to.getMonth() ? `${o(t.from, "MMM d")}–${o(t.to, "d, yyyy")}` : n ? `${o(t.from, "MMM d")}–${o(t.to, "MMM d, yyyy")}` : `${o(t.from, "MMM d, yyyy")}–${o(t.to, "MMM d, yyyy")}`;
+}, g = (r) => y(r) ? a(r) : M(r);
 export {
-  g as useSelectionDescription
+  g as getDateDisplayString
 };
 //# sourceMappingURL=fondue-components103.js.map

package/dist/fondue-components103.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components103.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;"}
+{"version":3,"file":"fondue-components103.js","sources":["../src/components/DatePicker/helpers/dateDisplayFormatter.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { format } from 'date-fns';\n\nimport { type DatePickerDate, type DatePickerDateRange } from '../types';\n\nimport { transformDateRangeToPickerDateRange, transformDatePickerDateToDate } from './dateTransformer';\n\nconst isDateRange = (selected?: DatePickerDateRange | DatePickerDate): selected is DatePickerDateRange => {\n    return Boolean(selected && 'from' in selected && 'to' in selected);\n};\n\nconst getSingleDateDisplayString = (selected?: DatePickerDate): string | undefined => {\n    const singleDate = transformDatePickerDateToDate(selected);\n    if (!singleDate) {\n        return undefined;\n    }\n    return format(singleDate, 'MMMM d, yyyy');\n};\n\nconst getDateRangeDisplayString = (selected?: DatePickerDateRange): string | undefined => {\n    const dateRange = transformDateRangeToPickerDateRange(selected);\n    if (!dateRange?.from || !dateRange?.to) {\n        return undefined;\n    }\n\n    const isSameYear = dateRange.from.getFullYear() === dateRange.to.getFullYear();\n\n    const isSameMonth = isSameYear && dateRange.from.getMonth() === dateRange.to.getMonth();\n\n    if (isSameMonth) {\n        return `${format(dateRange.from, 'MMM d')}\\u2013${format(dateRange.to, 'd, yyyy')}`;\n    }\n\n    if (isSameYear) {\n        return `${format(dateRange.from, 'MMM d')}\\u2013${format(dateRange.to, 'MMM d, yyyy')}`;\n    }\n\n    return `${format(dateRange.from, 'MMM d, yyyy')}\\u2013${format(dateRange.to, 'MMM d, yyyy')}`;\n};\n\nexport const getDateDisplayString = (selected?: DatePickerDateRange | DatePickerDate): string | undefined => {\n    if (isDateRange(selected)) {\n        return getDateRangeDisplayString(selected);\n    }\n    return getSingleDateDisplayString(selected);\n};\n"],"names":["isDateRange","selected","getSingleDateDisplayString","singleDate","transformDatePickerDateToDate","format","getDateRangeDisplayString","dateRange","transformDateRangeToPickerDateRange","isSameYear","getDateDisplayString"],"mappings":";;AAQA,MAAMA,IAAc,CAACC,MACV,GAAQA,KAAY,UAAUA,KAAY,QAAQA,IAGvDC,IAA6B,CAACD,MAAkD;AAClF,QAAME,IAAaC,EAA8BH,CAAQ;AACzD,MAAKE;AAGL,WAAOE,EAAOF,GAAY,cAAc;AAC5C,GAEMG,IAA4B,CAACL,MAAuD;AACtF,QAAMM,IAAYC,EAAoCP,CAAQ;AAC9D,MAAI,EAACM,KAAA,QAAAA,EAAW,SAAQ,EAACA,KAAA,QAAAA,EAAW;AAChC;AAGJ,QAAME,IAAaF,EAAU,KAAK,kBAAkBA,EAAU,GAAG,YAAA;AAIjE,SAFoBE,KAAcF,EAAU,KAAK,eAAeA,EAAU,GAAG,SAAA,IAGlE,GAAGF,EAAOE,EAAU,MAAM,OAAO,CAAC,IAASF,EAAOE,EAAU,IAAI,SAAS,CAAC,KAGjFE,IACO,GAAGJ,EAAOE,EAAU,MAAM,OAAO,CAAC,IAASF,EAAOE,EAAU,IAAI,aAAa,CAAC,KAGlF,GAAGF,EAAOE,EAAU,MAAM,aAAa,CAAC,IAASF,EAAOE,EAAU,IAAI,aAAa,CAAC;AAC/F,GAEaG,IAAuB,CAACT,MAC7BD,EAAYC,CAAQ,IACbK,EAA0BL,CAAQ,IAEtCC,EAA2BD,CAAQ;"}

package/dist/fondue-components104.js

@@ -1,10 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Slot as e } from "@radix-ui/react-slot";
-import a from "./fondue-components99.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 });
+const t = "_root_v3an7_5", a = "_caret_v3an7_44", o = "_dateName_v3an7_59", n = "_button_v3an7_80", c = "_actions_v3an7_93", _ = "_clearIcon_v3an7_101", e = {
+  root: t,
+  caret: a,
+  dateName: o,
+  button: n,
+  actions: c,
+  clearIcon: _
+};
 export {
-  m as ClearButton
+  c as actions,
+  n as button,
+  a as caret,
+  _ as clearIcon,
+  o as dateName,
+  e as default,
+  t as root
 };
 //# sourceMappingURL=fondue-components104.js.map

package/dist/fondue-components104.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components104.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;"}
+{"version":3,"file":"fondue-components104.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}