@frontify/fondue-components 29.0.1 → 29.2.0

package/dist/fondue-components117.js

@@ -1,114 +1,8 @@
-import { jsx as r } from "react/jsx-runtime";
-import { IconArrowRight as m, IconArrowLeft as f } from "@frontify/fondue-icons";
-import { forwardRef as h, useMemo as $, useRef as p, useEffect as y } from "react";
-import { getDefaultClassNames as b, DayPicker as w } from "react-day-picker";
-/* empty css                     */
-import { Button as c } from "./fondue-components6.js";
-import { useFondueTheme as g } from "./fondue-components39.js";
-import e from "./fondue-components130.js";
-const N = h(
-  ({ "data-test-id": t = "fondue-date-picker-calendar", disabledDates: o, ...a }, s) => {
-    const d = b(), {
-      dir: l,
-      translations: { dateLocale: n }
-    } = g(), i = $(() => {
-      var u;
-      return a.mode === "single" ? a.selected : (u = a.selected) == null ? void 0 : u.from;
-    }, [a]);
-    return /* @__PURE__ */ r("div", { ref: s, "data-test-id": t, className: e.wrapper, children: /* @__PURE__ */ r(
-      w,
-      {
-        navLayout: "around",
-        "data-test-id": t,
-        locale: n,
-        components: v(),
-        showOutsideDays: !0,
-        disabled: o,
-        defaultMonth: i,
-        dir: l,
-        timeZone: "UTC",
-        classNames: {
-          root: `${d.root} ${e.root}`,
-          day: `${e.day}`,
-          selected: `${e.selected}`,
-          week: `${d.week} ${e.week}`,
-          weekday: `${e.weekday}`,
-          weekdays: `${d.weekdays} ${e.weekdays}`,
-          range_start: `${e.selectedStart}`,
-          range_end: `${e.selectedEnd}`,
-          range_middle: `${e.selectedMiddle}`,
-          disabled: `${e.disabled}`,
-          outside: `${e.outside}`
-        },
-        ...a,
-        modifiersClassNames: {
-          hoverAfter: `${e.hoverAfter}`,
-          hoverBefore: `${e.hoverBefore}`,
-          hoverSelected: `${e.hoverSelected}`
-        }
-      }
-    ) });
-  }
-);
-N.displayName = "DatePickerCalendar";
-const v = () => ({
-  DayButton: ({ day: t, modifiers: o, onClick: a, onMouseEnter: s, onMouseLeave: d, ...l }) => {
-    const n = p(null);
-    return y(() => {
-      var i;
-      o.focused && ((i = n.current) == null || i.focus());
-    }, [o.focused]), /* @__PURE__ */ r(
-      "button",
-      {
-        ...l,
-        ref: n,
-        className: e.dayButton,
-        onClick: a,
-        onMouseEnter: s,
-        onMouseLeave: d,
-        type: "button",
-        children: /* @__PURE__ */ r("div", { className: `${e.dayContent} ${e.button}`, children: t.date.getDate() })
-      }
-    );
-  },
-  PreviousMonthButton: ({
-    onClick: t,
-    "aria-label": o,
-    "aria-disabled": a
-  }) => /* @__PURE__ */ r("div", { className: `${e.toggleMonthButtonContainer} `, children: /* @__PURE__ */ r(
-    c,
-    {
-      emphasis: "weak",
-      size: "small",
-      aspect: "square",
-      "aria-label": o,
-      "aria-disabled": a,
-      onPress: (s) => {
-        s && (t == null || t(s));
-      },
-      children: /* @__PURE__ */ r(f, { size: 16 })
-    }
-  ) }),
-  NextMonthButton: ({
-    onClick: t,
-    "aria-label": o,
-    "aria-disabled": a
-  }) => /* @__PURE__ */ r("div", { className: `${e.toggleMonthButtonContainer} ${e.nextMonthButtonContainer}`, children: /* @__PURE__ */ r(
-    c,
-    {
-      emphasis: "weak",
-      size: "small",
-      aspect: "square",
-      "aria-label": o,
-      "aria-disabled": a,
-      onPress: (s) => {
-        s && (t == null || t(s));
-      },
-      children: /* @__PURE__ */ r(m, { size: 16 })
-    }
-  ) })
-});
+const r = (e) => {
+  if (e)
+    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
+};
 export {
-  N as DatePickerCalendar
+  r as colorToCss
 };
 //# sourceMappingURL=fondue-components117.js.map

package/dist/fondue-components117.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components117.js","sources":["../src/components/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowLeft, IconArrowRight } from '@frontify/fondue-icons';\nimport { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport {\n    getDefaultClassNames,\n    DayPicker,\n    type PreviousMonthButtonProps,\n    type NextMonthButtonProps,\n    type OnSelectHandler,\n    type DateRange as InternalDayPickerDateRange,\n    type CustomComponents,\n    type Matcher,\n    type DayButtonProps,\n} from 'react-day-picker';\nimport 'react-day-picker/style.css';\n\nimport { Button } from '../Button/Button';\nimport { useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/datePickerCalendar.module.scss';\n\ntype DatePickerCalendarSingleModeProps = {\n    mode: 'single';\n    required: true;\n    selected: Date | undefined;\n    onSelect: OnSelectHandler<Date>;\n};\ntype DatePickerCalendarRangeModeProps = {\n    mode: 'range';\n    required: true;\n    selected: InternalDayPickerDateRange | undefined;\n    onSelect: OnSelectHandler<InternalDayPickerDateRange>;\n    modifiers?: Record<string, Matcher>;\n    onDayMouseEnter?: (day: Date) => void;\n    onDayMouseLeave?: (day: Date) => void;\n};\n\ntype DatePickerCalendarModeProps = DatePickerCalendarSingleModeProps | DatePickerCalendarRangeModeProps;\n\ntype DisabledDates = { before: Date } | { after: Date };\n\nexport type DatePickerBaseProps = {\n    /** The days to be disabled. */\n    disabledDates?: DisabledDates | DisabledDates[];\n    /** The test id applied to the wrapper and forwarded to DayPicker. */\n    'data-test-id'?: string;\n};\n\ntype DatePickerCalendarProps = DatePickerBaseProps & DatePickerCalendarModeProps;\n\nexport const DatePickerCalendar = forwardRef<HTMLDivElement, DatePickerCalendarProps>(\n    ({ 'data-test-id': dataTestId = 'fondue-date-picker-calendar', disabledDates, ...modeProps }, ref): JSX.Element => {\n        const defaultClassNames = getDefaultClassNames();\n        const {\n            dir,\n            translations: { dateLocale },\n        } = useFondueTheme();\n\n        const defaultMonth = useMemo(() => {\n            if (modeProps.mode === 'single') {\n                return modeProps.selected;\n            }\n            return modeProps.selected?.from;\n        }, [modeProps]);\n\n        return (\n            <div ref={ref} data-test-id={dataTestId} className={styles.wrapper}>\n                <DayPicker\n                    navLayout=\"around\"\n                    data-test-id={dataTestId}\n                    locale={dateLocale}\n                    components={getCustomComponents()}\n                    showOutsideDays\n                    disabled={disabledDates}\n                    defaultMonth={defaultMonth}\n                    dir={dir}\n                    timeZone=\"UTC\"\n                    classNames={{\n                        root: `${defaultClassNames.root} ${styles.root}`,\n                        day: `${styles.day}`,\n                        selected: `${styles.selected}`,\n                        week: `${defaultClassNames.week} ${styles.week}`,\n                        weekday: `${styles.weekday}`,\n                        weekdays: `${defaultClassNames.weekdays} ${styles.weekdays}`,\n                        range_start: `${styles.selectedStart}`,\n                        range_end: `${styles.selectedEnd}`,\n                        range_middle: `${styles.selectedMiddle}`,\n                        disabled: `${styles.disabled}`,\n                        outside: `${styles.outside}`,\n                    }}\n                    {...modeProps}\n                    modifiersClassNames={{\n                        hoverAfter: `${styles.hoverAfter}`,\n                        hoverBefore: `${styles.hoverBefore}`,\n                        hoverSelected: `${styles.hoverSelected}`,\n                    }}\n                />\n            </div>\n        );\n    },\n);\nDatePickerCalendar.displayName = 'DatePickerCalendar';\n\nconst getCustomComponents = (): Partial<CustomComponents> => ({\n    DayButton: ({ day, modifiers, onClick, onMouseEnter, onMouseLeave, ...props }: DayButtonProps): JSX.Element => {\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        useEffect(() => {\n            if (modifiers.focused) {\n                buttonRef.current?.focus();\n            }\n        }, [modifiers.focused]);\n\n        return (\n            <button\n                {...props}\n                ref={buttonRef}\n                className={styles.dayButton}\n                onClick={onClick}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                type=\"button\"\n            >\n                <div className={`${styles.dayContent} ${styles.button}`}>{day.date.getDate()}</div>\n            </button>\n        );\n    },\n    PreviousMonthButton: ({\n        onClick,\n        'aria-label': ariaLabel,\n        'aria-disabled': ariaDisabled,\n    }: PreviousMonthButtonProps): JSX.Element => {\n        return (\n            <div className={`${styles.toggleMonthButtonContainer} `}>\n                <Button\n                    emphasis=\"weak\"\n                    size=\"small\"\n                    aspect=\"square\"\n                    aria-label={ariaLabel}\n                    aria-disabled={ariaDisabled}\n                    onPress={(event) => {\n                        if (event) {\n                            onClick?.(event);\n                        }\n                    }}\n                >\n                    <IconArrowLeft size={16} />\n                </Button>\n            </div>\n        );\n    },\n    NextMonthButton: ({\n        onClick,\n        'aria-label': ariaLabel,\n        'aria-disabled': ariaDisabled,\n    }: NextMonthButtonProps): JSX.Element => {\n        return (\n            <div className={`${styles.toggleMonthButtonContainer} ${styles.nextMonthButtonContainer}`}>\n                <Button\n                    emphasis=\"weak\"\n                    size=\"small\"\n                    aspect=\"square\"\n                    aria-label={ariaLabel}\n                    aria-disabled={ariaDisabled}\n                    onPress={(event) => {\n                        if (event) {\n                            onClick?.(event);\n                        }\n                    }}\n                >\n                    <IconArrowRight size={16} />\n                </Button>\n            </div>\n        );\n    },\n});\n"],"names":["DatePickerCalendar","forwardRef","dataTestId","disabledDates","modeProps","ref","defaultClassNames","getDefaultClassNames","dir","dateLocale","useFondueTheme","defaultMonth","useMemo","_a","styles","jsx","DayPicker","getCustomComponents","day","modifiers","onClick","onMouseEnter","onMouseLeave","props","buttonRef","useRef","useEffect","ariaLabel","ariaDisabled","Button","event","IconArrowLeft","IconArrowRight"],"mappings":"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"}
+{"version":3,"file":"fondue-components117.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}

package/dist/fondue-components118.js

@@ -1,16 +1,20 @@
-import { useState as o, useMemo as D } from "react";
-import { transformDateRangeToPickerDateRange as c, transformPickerDateRangeToDateRange as i } from "./fondue-components128.js";
-const l = (e, t) => {
-  const [n, r] = o(e), [s, g] = o(e);
-  return s !== e && (g(e), r(e)), {
-    selectedDateRange: D(() => c(n), [n]),
-    handleSelect: (R) => {
-      const a = i(R);
-      a && (t == null || t(a), r(a));
-    }
-  };
+const o = "_root_18649_5", c = "_caret_18649_43", t = "_colorName_18649_58", _ = "_colorIndicator_18649_61", n = "_button_18649_82", r = "_actions_18649_113", a = "_clearIcon_18649_122", s = {
+  root: o,
+  caret: c,
+  colorName: t,
+  colorIndicator: _,
+  button: n,
+  actions: r,
+  clearIcon: a
 };
 export {
-  l as useDateRange
+  r as actions,
+  n as button,
+  c as caret,
+  a as clearIcon,
+  _ as colorIndicator,
+  t as colorName,
+  s as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components118.js.map

package/dist/fondue-components118.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components118.js","sources":["../src/components/DatePicker/hooks/useDateRange.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemo, useState } from 'react';\nimport { type DateRange as InternalDayPickerDateRange, type OnSelectHandler } from 'react-day-picker';\n\nimport { transformDateRangeToPickerDateRange, transformPickerDateRangeToDateRange } from '../helpers/dateTransformer';\nimport { type DatePickerDateRange } from '../types';\n\nexport const useDateRange = (selected: DatePickerDateRange, onSelect?: (dateRange: DatePickerDateRange) => void) => {\n    const [internalSelectedDateRange, setInternalSelectedDateRange] = useState<DatePickerDateRange>(selected);\n    const [prevSelected, setPrevSelected] = useState<DatePickerDateRange | undefined>(selected);\n\n    if (prevSelected !== selected) {\n        setPrevSelected(selected);\n        setInternalSelectedDateRange(selected);\n    }\n\n    const selectedDateRange = useMemo(() => {\n        return transformDateRangeToPickerDateRange(internalSelectedDateRange);\n    }, [internalSelectedDateRange]);\n\n    const handleSelect: OnSelectHandler<InternalDayPickerDateRange> = (pickerDateRange) => {\n        const dateRange = transformPickerDateRangeToDateRange(pickerDateRange);\n\n        if (dateRange) {\n            onSelect?.(dateRange);\n            setInternalSelectedDateRange(dateRange);\n        }\n    };\n\n    return {\n        selectedDateRange,\n        handleSelect,\n    };\n};\n"],"names":["useDateRange","selected","onSelect","internalSelectedDateRange","setInternalSelectedDateRange","useState","prevSelected","setPrevSelected","useMemo","transformDateRangeToPickerDateRange","pickerDateRange","dateRange","transformPickerDateRangeToDateRange"],"mappings":";;AAQO,MAAMA,IAAe,CAACC,GAA+BC,MAAwD;AAChH,QAAM,CAACC,GAA2BC,CAA4B,IAAIC,EAA8BJ,CAAQ,GAClG,CAACK,GAAcC,CAAe,IAAIF,EAA0CJ,CAAQ;AAE1F,SAAIK,MAAiBL,MACjBM,EAAgBN,CAAQ,GACxBG,EAA6BH,CAAQ,IAgBlC;AAAA,IACH,mBAdsBO,EAAQ,MACvBC,EAAoCN,CAAyB,GACrE,CAACA,CAAyB,CAAC;AAAA,IAa1B,cAX8D,CAACO,MAAoB;AACnF,YAAMC,IAAYC,EAAoCF,CAAe;AAErE,MAAIC,MACAT,KAAA,QAAAA,EAAWS,IACXP,EAA6BO,CAAS;AAAA,IAE9C;AAAA,EAII;AAER;"}
+{"version":3,"file":"fondue-components118.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/fondue-components119.js

@@ -1,20 +1,17 @@
-import { useMemo as o } from "react";
-const f = {
-  hoverBefore: !1,
-  hoverAfter: !1,
-  hoverSelected: !1
-}, h = (r) => ({
-  hoverModifiers: o(() => !(r != null && r.from) || !(r != null && r.to) || (r == null ? void 0 : r.to.getTime()) > (r == null ? void 0 : r.from.getTime()) ? f : {
-    hoverBefore: {
-      before: r == null ? void 0 : r.from
-    },
-    hoverAfter: {
-      after: r == null ? void 0 : r.to
-    },
-    hoverSelected: r == null ? void 0 : r.from
-  }, [r])
-});
+import { format as o } from "date-fns";
+import { transformDateRangeToPickerDateRange as i, transformDatePickerDateToDate as e } from "./fondue-components140.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 {
-  h as useRangeHover
+  g as getDateDisplayString
 };
 //# sourceMappingURL=fondue-components119.js.map

package/dist/fondue-components119.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components119.js","sources":["../src/components/DatePicker/hooks/useRangeHover.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemo } from 'react';\nimport { type DateRange as InternalDayPickerDateRange } from 'react-day-picker';\n\ntype RangeHoverModifiers = {\n    hoverBefore:\n        | {\n              before: Date;\n          }\n        | false;\n    hoverAfter:\n        | {\n              after: Date;\n          }\n        | false;\n    hoverSelected: Date | false;\n};\n\nconst DISABLED_MODIFIERS: RangeHoverModifiers = {\n    hoverBefore: false,\n    hoverAfter: false,\n    hoverSelected: false,\n};\n\nexport const useRangeHover = (selectedDateRange?: InternalDayPickerDateRange) => {\n    const hoverModifiers = useMemo(() => {\n        if (\n            !selectedDateRange?.from ||\n            !selectedDateRange?.to ||\n            selectedDateRange?.to.getTime() > selectedDateRange?.from.getTime()\n        ) {\n            return DISABLED_MODIFIERS;\n        }\n        return {\n            hoverBefore: {\n                before: selectedDateRange?.from,\n            },\n            hoverAfter: {\n                after: selectedDateRange?.to,\n            },\n            hoverSelected: selectedDateRange?.from,\n        };\n    }, [selectedDateRange]);\n\n    return {\n        hoverModifiers,\n    };\n};\n"],"names":["DISABLED_MODIFIERS","useRangeHover","selectedDateRange","useMemo"],"mappings":";AAmBA,MAAMA,IAA0C;AAAA,EAC5C,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AACnB,GAEaC,IAAgB,CAACC,OAoBnB;AAAA,EACH,gBApBmBC,EAAQ,MAEvB,EAACD,KAAA,QAAAA,EAAmB,SACpB,EAACA,KAAA,QAAAA,EAAmB,QACpBA,KAAA,gBAAAA,EAAmB,GAAG,cAAYA,KAAA,gBAAAA,EAAmB,KAAK,aAEnDF,IAEJ;AAAA,IACH,aAAa;AAAA,MACT,QAAQE,KAAA,gBAAAA,EAAmB;AAAA,IAAA;AAAA,IAE/B,YAAY;AAAA,MACR,OAAOA,KAAA,gBAAAA,EAAmB;AAAA,IAAA;AAAA,IAE9B,eAAeA,KAAA,gBAAAA,EAAmB;AAAA,EAAA,GAEvC,CAACA,CAAiB,CAAC;AAGlB;"}
+{"version":3,"file":"fondue-components119.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-components12.js

@@ -1,10 +1,188 @@
-import { ForwardedRefDatePickerInput as r } from "./fondue-components60.js";
-import { ForwardedRefRangeDatePicker as o } from "./fondue-components61.js";
-import { ForwardedRefSingleDatePicker as t } from "./fondue-components62.js";
-const e = t;
-e.Range = o;
-e.Input = r;
+import { jsx as d, jsxs as C } from "react/jsx-runtime";
+import { IconCaretRight as _ } from "@frontify/fondue-icons";
+import * as a from "@radix-ui/react-dropdown-menu";
+import { forwardRef as i, useRef as R, useMemo as j, Children as B } from "react";
+import { useFondueTheme as F, ThemeProvider as I } from "./fondue-components40.js";
+import { useProcessedChildren as T } from "./fondue-components63.js";
+import u from "./fondue-components64.js";
+const y = ({
+  children: t,
+  open: o,
+  modal: r = !1,
+  onOpenChange: n,
+  "data-test-id": e = "fondue-dropdown"
+}) => /* @__PURE__ */ d(a.Root, { open: o, modal: r, onOpenChange: n, "data-test-id": e, children: t });
+y.displayName = "Dropdown.Root";
+const M = ({
+  asChild: t = !0,
+  children: o,
+  "data-test-id": r = "fondue-dropdown-trigger",
+  ...n
+}, e) => /* @__PURE__ */ d(a.Trigger, { asChild: t, "data-test-id": r, ref: e, ...n, children: o });
+M.displayName = "Dropdown.Trigger";
+const L = {
+  compact: 8,
+  comfortable: 12,
+  spacious: 16
+}, k = {
+  compact: 8,
+  spacious: 24
+}, P = ({
+  side: t = "bottom",
+  align: o = "start",
+  triggerOffset: r = "compact",
+  children: n,
+  preventTriggerFocusOnClose: e,
+  viewportCollisionPadding: s = "compact",
+  forceMount: l = !1,
+  onEscapeKeyDown: g,
+  "data-test-id": D = "fondue-dropdown-content"
+}, b) => {
+  const c = R(null), { theme: p, dir: N } = F(), w = b || c;
+  return /* @__PURE__ */ d(a.Portal, { forceMount: l || void 0, children: /* @__PURE__ */ d(I, { theme: p, dir: N, children: /* @__PURE__ */ d(
+    a.Content,
+    {
+      dir: N,
+      align: o,
+      collisionPadding: k[s],
+      sideOffset: L[r],
+      side: t,
+      className: u.content,
+      "data-test-id": D,
+      ref: w,
+      onEscapeKeyDown: g,
+      onPointerDownOutside: (f) => {
+        var S;
+        if (!l || !(f.target instanceof Element) || !(w instanceof Object) || !("current" in w))
+          return;
+        let m = f.target, h = null;
+        for (; m && m !== document.body && (h = m.getAttribute("aria-controls"), !h); )
+          m = m.parentElement;
+        h === ((S = w.current) == null ? void 0 : S.id) && f.preventDefault();
+      },
+      onCloseAutoFocus: (f) => {
+        e && f.preventDefault();
+      },
+      forceMount: l || void 0,
+      children: n
+    }
+  ) }) });
+};
+P.displayName = "Dropdown.Content";
+const A = ({ children: t, heading: o, "data-test-id": r = "fondue-dropdown-group" }, n) => j(
+  () => B.toArray(t).filter((s) => s !== null).length > 0,
+  [t]
+) ? /* @__PURE__ */ C(a.Group, { className: u.group, "data-test-id": r, ref: n, children: [
+  o ? /* @__PURE__ */ d("div", { className: u.groupHeading, children: /* @__PURE__ */ d("span", { "aria-label": o, children: o }) }) : null,
+  t
+] }) : null;
+A.displayName = "Dropdown.Group";
+const G = ({
+  children: t,
+  "data-test-id": o = "fondue-dropdown-submenu"
+}) => /* @__PURE__ */ d(a.Sub, { "data-test-id": o, children: t });
+G.displayName = "Dropdown.SubMenu";
+const O = ({ children: t, "data-test-id": o = "fondue-dropdown-subtrigger" }, r) => {
+  const { content: n } = T(t), e = R(!1);
+  return /* @__PURE__ */ C(
+    a.SubTrigger,
+    {
+      className: u.subTrigger,
+      "data-show-focus-ring": e.current,
+      "data-test-id": o,
+      ref: r,
+      onMouseEnter: () => {
+        e.current = !0;
+      },
+      onFocus: (s) => {
+        e.current || (s.target.dataset.showFocusRing = "true");
+      },
+      onBlur: (s) => {
+        s.target.dataset.showFocusRing = "false", e.current = !1;
+      },
+      children: [
+        n,
+        /* @__PURE__ */ d(_, { className: u.subMenuIndicator, size: 16 })
+      ]
+    }
+  );
+};
+O.displayName = "Dropdown.SubTrigger";
+const v = ({ children: t, "data-test-id": o = "fondue-dropdown-subcontent" }, r) => {
+  const { theme: n, dir: e } = F();
+  return /* @__PURE__ */ d(a.Portal, { children: /* @__PURE__ */ d(I, { theme: n, dir: e, children: /* @__PURE__ */ d(
+    a.SubContent,
+    {
+      dir: e,
+      className: u.subContent,
+      "data-test-id": o,
+      ref: r,
+      children: t
+    }
+  ) }) });
+};
+v.displayName = "Dropdown.SubContent";
+const E = ({
+  children: t,
+  disabled: o,
+  textValue: r,
+  onSelect: n,
+  emphasis: e = "default",
+  asChild: s = !1,
+  "data-test-id": l = "fondue-dropdown-subtrigger",
+  ...g
+}, D) => {
+  const { content: b } = T(t), c = R(!1);
+  return /* @__PURE__ */ d(
+    a.Item,
+    {
+      onSelect: n,
+      className: u.item,
+      textValue: r,
+      "data-test-id": l,
+      "data-emphasis": e,
+      ref: D,
+      disabled: o,
+      asChild: s,
+      "data-show-focus-ring": c.current,
+      onMouseEnter: () => {
+        c.current = !0;
+      },
+      onFocus: (p) => {
+        c.current || (p.target.dataset.showFocusRing = "true");
+      },
+      onBlur: (p) => {
+        p.target.dataset.showFocusRing = "false", c.current = !1;
+      },
+      ...g,
+      children: b
+    }
+  );
+};
+E.displayName = "Dropdown.Item";
+const x = ({ children: t, name: o, "data-test-id": r = "fondue-dropdown-slot" }, n) => /* @__PURE__ */ d("div", { "data-name": o, className: u.slot, "data-test-id": r, ref: n, children: t });
+x.displayName = "Dropdown.Slot";
+const z = i(M), H = i(P), V = i(A), W = i(O), q = i(v), J = i(E), K = i(x), tt = {
+  Root: y,
+  Trigger: z,
+  Content: H,
+  Group: V,
+  SubMenu: G,
+  SubTrigger: W,
+  SubContent: q,
+  Item: J,
+  Slot: K
+};
 export {
-  e as DatePicker
+  tt as Dropdown,
+  P as DropdownContent,
+  A as DropdownGroup,
+  E as DropdownItem,
+  y as DropdownRoot,
+  x as DropdownSlot,
+  v as DropdownSubContent,
+  G as DropdownSubMenu,
+  O as DropdownSubTrigger,
+  M as DropdownTrigger
 };
 //# sourceMappingURL=fondue-components12.js.map

package/dist/fondue-components12.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components12.js","sources":["../src/components/DatePicker/DatePicker.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ForwardedRefDatePickerInput } from './DatePickerInput';\nimport { ForwardedRefRangeDatePicker } from './RangeDatePicker';\nimport { ForwardedRefSingleDatePicker } from './SingleDatePicker';\n\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const DatePicker: typeof ForwardedRefSingleDatePicker & {\n    Range: typeof ForwardedRefRangeDatePicker;\n    Input: typeof ForwardedRefDatePickerInput;\n} = ForwardedRefSingleDatePicker;\nDatePicker.Range = ForwardedRefRangeDatePicker;\nDatePicker.Input = ForwardedRefDatePickerInput;\n\nexport type { DatePickerDate, DatePickerDateRange } from './types';\n"],"names":["DatePicker","ForwardedRefSingleDatePicker","ForwardedRefRangeDatePicker","ForwardedRefDatePickerInput"],"mappings":";;;AAOO,MAAMA,IAGTC;AACJD,EAAW,QAAQE;AACnBF,EAAW,QAAQG;"}
+{"version":3,"file":"fondue-components12.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { Children, forwardRef, useMemo, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    modal = false,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} modal={modal} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownTrigger = (\n    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\ntype DropdownSpacing = 'compact' | 'comfortable' | 'spacious';\ntype DropdownViewportCollisionPadding = 'compact' | 'spacious';\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: DropdownSpacing;\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n    /**\n     * Define the minimum distance between the dropdown and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: DropdownViewportCollisionPadding;\n    /**\n     * When true, the content will always be mounted in the DOM. Before enabling, make sure you really need it.\n     * @default false\n     */\n    forceMount?: boolean;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<DropdownViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        viewportCollisionPadding = 'compact',\n        forceMount = false,\n        onEscapeKeyDown,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef<HTMLDivElement>(null);\n    const { theme, dir } = useFondueTheme();\n    const actualRef = ref || localRef;\n    return (\n        <RadixDropdown.Portal forceMount={forceMount || undefined}>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.Content\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={side}\n                    className={styles.content}\n                    data-test-id={dataTestId}\n                    ref={actualRef}\n                    onEscapeKeyDown={onEscapeKeyDown}\n                    onPointerDownOutside={(event) => {\n                        if (!forceMount) {\n                            return;\n                        }\n\n                        if (!(event.target instanceof Element)) {\n                            return;\n                        }\n\n                        if (!(actualRef instanceof Object) || !('current' in actualRef)) {\n                            return;\n                        }\n\n                        let element: Element | null = event.target;\n                        let controlsId: string | null = null;\n\n                        while (element && element !== document.body) {\n                            controlsId = element.getAttribute('aria-controls');\n\n                            if (controlsId) {\n                                break;\n                            }\n\n                            element = element.parentElement;\n                        }\n\n                        if (controlsId === actualRef.current?.id) {\n                            event.preventDefault();\n                        }\n                    }}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                    forceMount={forceMount || undefined}\n                >\n                    {children}\n                </RadixDropdown.Content>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const hasChildren = useMemo(\n        () => Children.toArray(children).filter((child) => child !== null).length > 0,\n        [children],\n    );\n\n    if (!hasChildren) {\n        return null;\n    }\n\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    const wasMouseInteracted = useRef(false);\n    return (\n        <RadixDropdown.SubTrigger\n            className={styles.subTrigger}\n            // eslint-disable-next-line react-hooks/refs\n            data-show-focus-ring={wasMouseInteracted.current}\n            data-test-id={dataTestId}\n            ref={ref}\n            onMouseEnter={() => {\n                wasMouseInteracted.current = true;\n            }}\n            onFocus={(focusEvent) => {\n                if (!wasMouseInteracted.current) {\n                    focusEvent.target.dataset.showFocusRing = 'true';\n                }\n            }}\n            onBlur={(blurEvent) => {\n                blurEvent.target.dataset.showFocusRing = 'false';\n                wasMouseInteracted.current = false;\n            }}\n        >\n            {content}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.SubContent\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\n                    className={styles.subContent}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                >\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    const wasMouseInteracted = useRef(false);\n\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            asChild={asChild}\n            // eslint-disable-next-line react-hooks/refs\n            data-show-focus-ring={wasMouseInteracted.current}\n            onMouseEnter={() => {\n                wasMouseInteracted.current = true;\n            }}\n            onFocus={(focusEvent) => {\n                if (!wasMouseInteracted.current) {\n                    focusEvent.target.dataset.showFocusRing = 'true';\n                }\n            }}\n            onBlur={(blurEvent) => {\n                blurEvent.target.dataset.showFocusRing = 'false';\n                wasMouseInteracted.current = false;\n            }}\n            {...props}\n        >\n            {content}\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","modal","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","viewportCollisionPadding","forceMount","onEscapeKeyDown","localRef","useRef","theme","dir","useFondueTheme","actualRef","ThemeProvider","styles","event","element","controlsId","_a","DropdownGroup","heading","useMemo","Children","child","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","wasMouseInteracted","focusEvent","blurEvent","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}

package/dist/fondue-components120.js

@@ -1,16 +1,20 @@
-import { useState as o, useMemo as i } from "react";
-import { transformDatePickerDateToDate as m, transformDateToDatePickerDate as d } from "./fondue-components128.js";
-const P = (e, t) => {
-  const [a, r] = o(e), [D, s] = o(e);
-  return D !== e && (s(e), r(e)), {
-    selectedDate: i(() => m(a), [a]),
-    handleSelect: (c) => {
-      const n = d(c);
-      r(n), t == null || t(n);
-    }
-  };
+const c = "_root_13ac0_5", t = "_caret_13ac0_44", o = "_dateName_13ac0_59", a = "_icon_13ac0_76", _ = "_button_13ac0_88", n = "_actions_13ac0_101", e = "_clearIcon_13ac0_109", s = {
+  root: c,
+  caret: t,
+  dateName: o,
+  icon: a,
+  button: _,
+  actions: n,
+  clearIcon: e
 };
 export {
-  P as useSingleDate
+  n as actions,
+  _ as button,
+  t as caret,
+  e as clearIcon,
+  o as dateName,
+  s as default,
+  a as icon,
+  c as root
 };
 //# sourceMappingURL=fondue-components120.js.map

package/dist/fondue-components120.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components120.js","sources":["../src/components/DatePicker/hooks/useSingleDate.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemo, useState } from 'react';\nimport { type OnSelectHandler } from 'react-day-picker';\n\nimport { transformDatePickerDateToDate, transformDateToDatePickerDate } from '../helpers/dateTransformer';\nimport { type DatePickerDate } from '../types';\n\nexport const useSingleDate = (selected?: DatePickerDate, onSelect?: (date?: DatePickerDate) => void) => {\n    const [internalSelectedDate, setInternalSelectedDate] = useState<DatePickerDate | undefined>(selected);\n    const [prevSelected, setPrevSelected] = useState<DatePickerDate | undefined>(selected);\n\n    if (prevSelected !== selected) {\n        setPrevSelected(selected);\n        setInternalSelectedDate(selected);\n    }\n\n    const selectedDate = useMemo(() => {\n        return transformDatePickerDateToDate(internalSelectedDate);\n    }, [internalSelectedDate]);\n\n    const handleSelect: OnSelectHandler<Date> = (date) => {\n        const datePickerDate = transformDateToDatePickerDate(date);\n\n        setInternalSelectedDate(datePickerDate);\n        onSelect?.(datePickerDate);\n    };\n\n    return {\n        selectedDate,\n        handleSelect,\n    };\n};\n"],"names":["useSingleDate","selected","onSelect","internalSelectedDate","setInternalSelectedDate","useState","prevSelected","setPrevSelected","useMemo","transformDatePickerDateToDate","date","datePickerDate","transformDateToDatePickerDate"],"mappings":";;AAQO,MAAMA,IAAgB,CAACC,GAA2BC,MAA+C;AACpG,QAAM,CAACC,GAAsBC,CAAuB,IAAIC,EAAqCJ,CAAQ,GAC/F,CAACK,GAAcC,CAAe,IAAIF,EAAqCJ,CAAQ;AAErF,SAAIK,MAAiBL,MACjBM,EAAgBN,CAAQ,GACxBG,EAAwBH,CAAQ,IAc7B;AAAA,IACH,cAZiBO,EAAQ,MAClBC,EAA8BN,CAAoB,GAC1D,CAACA,CAAoB,CAAC;AAAA,IAWrB,cATwC,CAACO,MAAS;AAClD,YAAMC,IAAiBC,EAA8BF,CAAI;AAEzD,MAAAN,EAAwBO,CAAc,GACtCT,KAAA,QAAAA,EAAWS;AAAA,IACf;AAAA,EAII;AAER;"}
+{"version":3,"file":"fondue-components120.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}