@frontify/fondue-components 28.0.0 → 29.0.0

package/dist/fondue-components114.js

@@ -1,10 +1,17 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Slot as e } from "@radix-ui/react-slot";
-import a from "./fondue-components102.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 });
+import { format as o } from "date-fns";
+import { transformDateRangeToPickerDateRange as i, transformDatePickerDateToDate as e } from "./fondue-components132.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 {
-  m as ClearButton
+  g as getDateDisplayString
 };
 //# sourceMappingURL=fondue-components114.js.map

package/dist/fondue-components114.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components114.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-components114.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-components115.js

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

package/dist/fondue-components115.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components115.js","sources":["../src/components/Select/components/CollapsibleBadges.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\n\nimport { Badge } from '#/components/Badge/Badge';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\nconst BADGE_GAP = 4;\nconst OVERFLOW_BADGE_MIN_WIDTH = 40;\nconst INPUT_MIN_WIDTH = 24;\n\ntype BadgeItem = {\n    value: string;\n    displayValue: ReactNode;\n};\n\ntype CollapsibleBadgesProps = {\n    items: BadgeItem[];\n    placeholder?: string;\n    onDismiss: (value: string, preventFocusRing: boolean) => void;\n    /** Optional children to render at the end (e.g., an input field). Space is reserved in the layout calculation. */\n    children?: ReactNode;\n    /** Total number of selected items (for screen reader announcements). */\n    selectedCount?: number;\n};\n\nconst calculateVisibleCount = (\n    container: HTMLDivElement,\n    badgeElements: Map<string, HTMLDivElement>,\n    items: BadgeItem[],\n    hasInputSlot: boolean,\n): number => {\n    const containerWidth = container.offsetWidth;\n    let usedWidth = hasInputSlot ? INPUT_MIN_WIDTH + BADGE_GAP : 0;\n    let count = 0;\n\n    for (const item of items) {\n        const badgeElement = badgeElements.get(item.value);\n        if (!badgeElement) {\n            continue;\n        }\n\n        const badgeWidth = badgeElement.offsetWidth;\n        const widthWithGap = count > 0 ? badgeWidth + BADGE_GAP : badgeWidth;\n        const hasMoreAfterThis = items.length - count - 1 > 0;\n        const reservedWidth = hasMoreAfterThis ? OVERFLOW_BADGE_MIN_WIDTH + BADGE_GAP : 0;\n\n        if (usedWidth + widthWithGap + reservedWidth > containerWidth) {\n            break;\n        }\n\n        usedWidth += widthWithGap;\n        count++;\n    }\n\n    return Math.max(1, count);\n};\n\nexport const CollapsibleBadges = ({\n    items,\n    placeholder,\n    onDismiss,\n    children,\n    selectedCount = 0,\n}: CollapsibleBadgesProps): ReactNode => {\n    const { t } = useTranslation();\n    const wasClickedRef = useRef(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const badgeElementsRef = useRef<Map<string, HTMLDivElement>>(new Map());\n    const [visibleCount, setVisibleCount] = useState(items.length);\n    const hasChildren = children !== undefined;\n\n    useEffect(() => {\n        const container = containerRef.current;\n        if (!container) {\n            return;\n        }\n\n        const recalculate = (): void => {\n            if (items.length === 0) {\n                setVisibleCount(0);\n                return;\n            }\n            setVisibleCount(calculateVisibleCount(container, badgeElementsRef.current, items, hasChildren));\n        };\n\n        const observer = new ResizeObserver(recalculate);\n        observer.observe(container);\n        return (): void => {\n            observer.disconnect();\n        };\n    }, [items, hasChildren]);\n\n    if (items.length === 0 && !children) {\n        return placeholder;\n    }\n\n    const overflowCount = items.length - visibleCount;\n\n    const getSelectedCountText = (count: number): string => {\n        if (count === 1) {\n            return t('Select_singleItemSelected');\n        }\n        if (count > 1) {\n            return t('Select_multipleItemsSelected', { count: count.toString() });\n        }\n        return '';\n    };\n\n    return (\n        <div ref={containerRef} className={styles.badgesContainer}>\n            <span className={styles.srOnly} aria-live=\"polite\" aria-atomic=\"true\">\n                {getSelectedCountText(selectedCount)}\n            </span>\n            {children}\n            {items.map((item, index) => (\n                <div\n                    key={item.value}\n                    ref={(element): void => {\n                        if (element) {\n                            badgeElementsRef.current.set(item.value, element);\n                        } else {\n                            badgeElementsRef.current.delete(item.value);\n                        }\n                    }}\n                    role=\"presentation\"\n                    className={styles.badgeWrapper}\n                    data-visible={index < visibleCount}\n                    onKeyDown={(event: KeyboardEvent<HTMLDivElement>): void => {\n                        if (event.key === 'Enter' || event.key === ' ') {\n                            event.stopPropagation();\n                        }\n                    }}\n                    onMouseDown={(): void => {\n                        wasClickedRef.current = true;\n                    }}\n                >\n                    <Badge\n                        emphasis=\"weak\"\n                        aria-label={typeof item.displayValue === 'string' ? item.displayValue : item.value}\n                        onDismiss={(event) => {\n                            event.stopPropagation();\n                            onDismiss(item.value, wasClickedRef.current);\n                            wasClickedRef.current = false;\n                        }}\n                    >\n                        {item.displayValue}\n                    </Badge>\n                </div>\n            ))}\n            {overflowCount > 0 && (\n                <div\n                    className={styles.badgeWrapper}\n                    aria-label={t('Select_additionalItemsSelected', { count: overflowCount.toString() })}\n                >\n                    <Badge emphasis=\"weak\" aria-hidden=\"true\">\n                        +{overflowCount}\n                    </Badge>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["BADGE_GAP","OVERFLOW_BADGE_MIN_WIDTH","INPUT_MIN_WIDTH","calculateVisibleCount","container","badgeElements","items","hasInputSlot","containerWidth","usedWidth","count","item","badgeElement","badgeWidth","widthWithGap","reservedWidth","CollapsibleBadges","placeholder","onDismiss","children","selectedCount","t","useTranslation","wasClickedRef","useRef","containerRef","badgeElementsRef","visibleCount","setVisibleCount","useState","hasChildren","useEffect","recalculate","observer","overflowCount","getSelectedCountText","styles","jsx","index","element","event","Badge","jsxs"],"mappings":"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"}
+{"version":3,"file":"fondue-components115.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/fondue-components116.js

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

package/dist/fondue-components116.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components116.js","sources":["../src/components/Select/components/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '#/components/ThemeProvider/ThemeProvider';\n\nimport styles from '../styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from '../utils';\n\nimport { type SelectItemProps } from './SelectItem';\n\nexport type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n    /**\n     * @internal\n     * The alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @internal\n     * The type of the menu.\n     */\n    selectedItemValues?: string[];\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n    /**\n     * @internal\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItemValues,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n    onEscapeKeyDown,\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n        compact: 8,\n        spacious: 24,\n    };\n\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side: 'left' | 'right' | 'bottom' | 'top') => {\n        if (dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixPopover.Content\n                    dir={dir}\n                    align={align}\n                    side={getAdjustedSide(side)}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    onEscapeKeyDown={onEscapeKeyDown}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\n                        data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                        data-test-id=\"fondue-select-menu\"\n                    >\n                        {\n                            recursiveMap(\n                                children,\n                                (child, index) => {\n                                    const isValid = <TProps,>(\n                                        child: ReactNode,\n                                    ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                        // @ts-expect-error - We are explicitly checking for ref\n                                        isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                    if (isValid<SelectItemProps>(child)) {\n                                        const optionData = getSelectOptionValue(child.props);\n                                        const itemProps = getItemProps({\n                                            item: optionData,\n                                            index,\n                                            ...(child.ref ? { ref: child.ref } : {}),\n                                        });\n\n                                        const isSelected = selectedItemValues?.includes(optionData.value);\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={isSelected}\n                                                key={child.props.value}\n                                                // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                                onTouchStart={(event) => {\n                                                    if (itemProps.onClick) {\n                                                        itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                    }\n                                                }}\n                                                {...itemProps}\n                                                aria-selected={isSelected}\n                                            >\n                                                {child}\n                                            </RadixSlot>\n                                        );\n                                    }\n                                },\n                                filterText,\n                            ).parsedChildren\n                        }\n                    </ul>\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItemValues","hasInteractedSinceOpening","viewportCollisionPadding","onEscapeKeyDown","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","dir","useFondueTheme","getAdjustedSide","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","RadixSlot"],"mappings":";;;;;;;AA4EO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,iBAAAC;AACJ,MAAuB;AACnB,QAAMC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAA;AAAA,EACV,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,GAGR,EAAE,OAAAC,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACX,MACjBS,MAAQ,QACDT,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKY,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAAN,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,KAAAH;AAAA,MACA,OAAAV;AAAA,MACA,MAAMY,EAAgBX,CAAI;AAAA,MAC1B,kBAAkBO,EAA+BJ,CAAwB,IAAI;AAAA,MAC7E,iBAAiBE;AAAA,MACjB,iBAAAD;AAAA,MACA,WAAWW,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGpB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAc;AAAA,YACInB;AAAA,YACA,CAACoB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAY1B,EAAa;AAAA,kBAC3B,MAAMwB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,IAAatB,KAAA,gBAAAA,EAAoB,SAASmB,EAAW;AAE3D,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBrB,MAAqBwB;AAAA,oBACvC,iBAAeK;AAAA,oBAGf,cAAc,CAACjB,MAAU;AACrB,sBAAIgB,EAAU,WACVA,EAAU,QAAQhB,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGgB;AAAA,oBACJ,iBAAeC;AAAA,oBAEd,UAAAN;AAAA,kBAAA;AAAA,kBAVIA,EAAM,MAAM;AAAA,gBAAA;AAAA,cAa7B;AAAA,YACJ;AAAA,YACAnB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components116.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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"}

package/dist/fondue-components117.js

@@ -1,34 +1,16 @@
-import { jsxs as c, Fragment as n, jsx as r } from "react/jsx-runtime";
-import { IconCheckMark as i, IconExclamationMarkTriangle as l } from "@frontify/fondue-icons";
-import { useTranslation as m } from "./fondue-components40.js";
-import s from "./fondue-components102.js";
-const f = ({ status: o, hasError: a, dataTestId: e }) => {
-  const { t } = m();
-  return /* @__PURE__ */ c(n, { children: [
-    o === "success" ? /* @__PURE__ */ r(
-      i,
-      {
-        size: 16,
-        className: s.iconSuccess,
-        "data-test-id": `${e}-success-icon`,
-        "aria-hidden": "true"
-      }
-    ) : null,
-    a ? /* @__PURE__ */ c(n, { children: [
-      /* @__PURE__ */ r(
-        l,
-        {
-          size: 16,
-          className: s.iconError,
-          "data-test-id": `${e}-error-icon`,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ r("span", { className: s.srOnly, role: "alert", children: t("Select_error") })
-    ] }) : null
-  ] });
+import { useState as o, useMemo as D } from "react";
+import { transformDateRangeToPickerDateRange as c, transformPickerDateRangeToDateRange as i } from "./fondue-components132.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));
+    }
+  };
 };
 export {
-  f as StatusIcons
+  l as useDateRange
 };
 //# sourceMappingURL=fondue-components117.js.map

package/dist/fondue-components117.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components117.js","sources":["../src/components/Select/components/StatusIcons.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport { type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\ntype StatusIconsProps = {\n    /** The current status of the component. */\n    status: 'neutral' | 'success' | 'error';\n    /** Whether the component is in an error state (may differ from status when validation is involved). */\n    hasError: boolean;\n    /** The data-test-id prefix for the icons. */\n    dataTestId: string;\n};\n\nexport const StatusIcons = ({ status, hasError, dataTestId }: StatusIconsProps): ReactNode => {\n    const { t } = useTranslation();\n    return (\n        <>\n            {status === 'success' ? (\n                <IconCheckMark\n                    size={16}\n                    className={styles.iconSuccess}\n                    data-test-id={`${dataTestId}-success-icon`}\n                    aria-hidden=\"true\"\n                />\n            ) : null}\n            {hasError ? (\n                <>\n                    <IconExclamationMarkTriangle\n                        size={16}\n                        className={styles.iconError}\n                        data-test-id={`${dataTestId}-error-icon`}\n                        aria-hidden=\"true\"\n                    />\n                    <span className={styles.srOnly} role=\"alert\">\n                        {t('Select_error')}\n                    </span>\n                </>\n            ) : null}\n        </>\n    );\n};\n"],"names":["StatusIcons","status","hasError","dataTestId","useTranslation","jsxs","Fragment","jsx","IconCheckMark","styles","IconExclamationMarkTriangle"],"mappings":";;;;AAkBO,MAAMA,IAAc,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,YAAAC,QAA8C;AAC1F,QAAM,EAAE,EAAA,IAAMC,EAAA;AACd,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAL,MAAW,YACR,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWC,EAAO;AAAA,QAClB,gBAAc,GAAGN,CAAU;AAAA,QAC3B,eAAY;AAAA,MAAA;AAAA,IAAA,IAEhB;AAAA,IACHD,IACG,gBAAAG,EAAAC,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAWD,EAAO;AAAA,UAClB,gBAAc,GAAGN,CAAU;AAAA,UAC3B,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhB,gBAAAI,EAAC,UAAK,WAAWE,EAAO,QAAQ,MAAK,SAChC,UAAA,EAAE,cAAc,EAAA,CACrB;AAAA,IAAA,EAAA,CACJ,IACA;AAAA,EAAA,GACR;AAER;"}
+{"version":3,"file":"fondue-components117.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;"}

package/dist/fondue-components118.js

@@ -1,32 +1,20 @@
-const n = (r) => {
-  if (r)
-    return {
-      year: r.getUTCFullYear(),
-      // Month is 0-indexed in JavaScript, so we add 1 to get the correct month
-      month: r.getUTCMonth() + 1,
-      day: r.getUTCDate()
-    };
-}, f = (r) => {
-  if (r)
-    return new Date(Date.UTC(r.year, r.month - 1, r.day));
-}, D = (r) => {
-  const o = n(r == null ? void 0 : r.from), t = n(r == null ? void 0 : r.to);
-  if (!(!o || !t))
-    return {
-      from: o,
-      to: t
-    };
-}, m = (r) => {
-  if (r)
-    return {
-      from: f(r.from),
-      to: f(r.to)
-    };
-};
+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])
+});
 export {
-  f as transformDatePickerDateToDate,
-  m as transformDateRangeToPickerDateRange,
-  n as transformDateToDatePickerDate,
-  D as transformPickerDateRangeToDateRange
+  h as useRangeHover
 };
 //# sourceMappingURL=fondue-components118.js.map

package/dist/fondue-components118.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components118.js","sources":["../src/components/DatePicker/helpers/dateTransformer.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type DateRange as InternalDayPickerDateRange } from 'react-day-picker';\n\nimport { type DatePickerDate, type DatePickerDateRange } from '../types';\n\nexport const transformDateToDatePickerDate = (date?: Date): DatePickerDate | undefined => {\n    if (!date) {\n        return undefined;\n    }\n    return {\n        year: date.getUTCFullYear(),\n        // Month is 0-indexed in JavaScript, so we add 1 to get the correct month\n        month: date.getUTCMonth() + 1,\n        day: date.getUTCDate(),\n    };\n};\n\nexport const transformDatePickerDateToDate = (datePickerDate?: DatePickerDate): Date | undefined => {\n    if (!datePickerDate) {\n        return undefined;\n    }\n    // Month is 0-indexed in JavaScript, so we subtract 1 to get the correct month\n    return new Date(Date.UTC(datePickerDate.year, datePickerDate.month - 1, datePickerDate.day));\n};\n\nexport const transformPickerDateRangeToDateRange = (dateRange?: InternalDayPickerDateRange): DatePickerDateRange => {\n    const fromDate = transformDateToDatePickerDate(dateRange?.from);\n    const toDate = transformDateToDatePickerDate(dateRange?.to);\n    if (!fromDate || !toDate) {\n        return undefined;\n    }\n\n    return {\n        from: fromDate,\n        to: toDate,\n    };\n};\n\nexport const transformDateRangeToPickerDateRange = (\n    dateRange?: DatePickerDateRange,\n): InternalDayPickerDateRange | undefined => {\n    if (!dateRange) {\n        return undefined;\n    }\n\n    return {\n        from: transformDatePickerDateToDate(dateRange.from),\n        to: transformDatePickerDateToDate(dateRange.to),\n    };\n};\n"],"names":["transformDateToDatePickerDate","date","transformDatePickerDateToDate","datePickerDate","transformPickerDateRangeToDateRange","dateRange","fromDate","toDate","transformDateRangeToPickerDateRange"],"mappings":"AAMO,MAAMA,IAAgC,CAACC,MAA4C;AACtF,MAAKA;AAGL,WAAO;AAAA,MACH,MAAMA,EAAK,eAAA;AAAA;AAAA,MAEX,OAAOA,EAAK,YAAA,IAAgB;AAAA,MAC5B,KAAKA,EAAK,WAAA;AAAA,IAAW;AAE7B,GAEaC,IAAgC,CAACC,MAAsD;AAChG,MAAKA;AAIL,WAAO,IAAI,KAAK,KAAK,IAAIA,EAAe,MAAMA,EAAe,QAAQ,GAAGA,EAAe,GAAG,CAAC;AAC/F,GAEaC,IAAsC,CAACC,MAAgE;AAChH,QAAMC,IAAWN,EAA8BK,KAAA,gBAAAA,EAAW,IAAI,GACxDE,IAASP,EAA8BK,KAAA,gBAAAA,EAAW,EAAE;AAC1D,MAAI,GAACC,KAAY,CAACC;AAIlB,WAAO;AAAA,MACH,MAAMD;AAAA,MACN,IAAIC;AAAA,IAAA;AAEZ,GAEaC,IAAsC,CAC/CH,MACyC;AACzC,MAAKA;AAIL,WAAO;AAAA,MACH,MAAMH,EAA8BG,EAAU,IAAI;AAAA,MAClD,IAAIH,EAA8BG,EAAU,EAAE;AAAA,IAAA;AAEtD;"}
+{"version":3,"file":"fondue-components118.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;"}

package/dist/fondue-components119.js

@@ -0,0 +1,16 @@
+import { useState as o, useMemo as i } from "react";
+import { transformDatePickerDateToDate as m, transformDateToDatePickerDate as d } from "./fondue-components132.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);
+    }
+  };
+};
+export {
+  P as useSingleDate
+};
+//# sourceMappingURL=fondue-components119.js.map

package/dist/fondue-components119.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components119.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;"}

package/dist/fondue-components12.js

@@ -1,6 +1,6 @@
-import { ForwardedRefDatePickerInput as r } from "./fondue-components58.js";
-import { ForwardedRefRangeDatePicker as o } from "./fondue-components59.js";
-import { ForwardedRefSingleDatePicker as t } from "./fondue-components60.js";
+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;