@frontify/fondue-components 29.1.0 → 30.0.0

package/dist/fondue-components126.js

@@ -1,154 +1,114 @@
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import { IconCaretDown as V } from "@frontify/fondue-icons";
-import * as I from "@radix-ui/react-popover";
-import { useSelect as s } from "downshift";
-import { forwardRef as ee, useRef as te, useCallback as N, useState as ne, useMemo as oe } from "react";
-import { useBadgeItems as re } from "./fondue-components135.js";
-import { useFocusRing as ae } from "./fondue-components136.js";
-import { useSelectData as se } from "./fondue-components137.js";
-import { useSelectionDescription as ie } from "./fondue-components138.js";
-import r from "./fondue-components127.js";
-import { ClearButton as le } from "./fondue-components139.js";
-import { CollapsibleBadges as ce } from "./fondue-components140.js";
-import { SelectMenu as ue } from "./fondue-components141.js";
-import { StatusIcons as ge } from "./fondue-components142.js";
-const O = ({
-  children: M,
-  selectedItemValues: o,
-  onItemSelect: p,
-  onClear: P,
-  placeholder: c = "",
-  status: u = "neutral",
-  disabled: f,
-  alignMenu: R = "start",
-  side: j = "bottom",
-  id: k,
-  showStringValue: y = !0,
-  "data-test-id": b = "fondue-select",
-  viewportCollisionPadding: E = "compact",
-  onEscapeKeyDown: F,
-  multiple: g,
-  ...i
-}, a) => {
-  const C = te(null), B = N(
-    (e) => {
-      C.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
-    },
-    [a]
-  ), { inputSlots: H, menuSlots: K, items: w, clearButton: S, getItemByValue: l } = se(M), { onMouseDown: z, onFocus: A, onBlur: q } = ae(), { selectionDescriptionId: D, selectionDescription: m } = ie(
-    g,
-    o,
-    l
-  ), G = re(o, l), [J, v] = ne(!1), x = N(
-    (e) => {
-      const t = l(e);
-      if (t)
-        return !y && (t != null && t.children) ? t.children : t == null ? void 0 : t.label;
-    },
-    [l, y]
-  ), { getToggleButtonProps: L, getMenuProps: Q, getItemProps: U, reset: W, isOpen: X, highlightedIndex: Y } = s({
-    items: w,
-    selectedItem: null,
-    toggleButtonId: k,
-    labelId: "aria-labelledby" in i ? i["aria-labelledby"] : void 0,
-    onIsOpenChange: () => {
-      v(!1);
-    },
-    onHighlightedIndexChange: () => {
-      v(!0);
-    },
-    onSelectedItemChange: ({ selectedItem: e }) => {
-      p(e == null ? void 0 : e.value);
-    },
-    itemToString: (e) => e ? e.label : "",
-    ...g ? {
-      stateReducer: (e, t) => {
-        const { changes: h, type: $ } = t;
-        switch ($) {
-          case s.stateChangeTypes.ToggleButtonKeyDownEnter:
-          case s.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-          case s.stateChangeTypes.ItemClick:
-            return {
-              ...h,
-              isOpen: !0,
-              highlightedIndex: e.highlightedIndex
-            };
-          case s.stateChangeTypes.ToggleButtonBlur:
-            return {
-              ...h,
-              selectedItem: e.selectedItem
-            };
-        }
-        return h;
-      }
-    } : {}
-  }), T = u === "error", Z = () => {
-    P(), W();
-  }, _ = oe(
-    () => x(o[0]) || c,
-    [x, o, c]
-  );
-  return /* @__PURE__ */ d(I.Root, { open: X, children: [
-    /* @__PURE__ */ n(I.Anchor, { asChild: !0, onMouseDown: z, onFocus: A, onBlur: q, children: /* @__PURE__ */ d(
-      "div",
+import { jsx as r } from "react/jsx-runtime";
+import { IconArrowRight as h, IconArrowLeft as $ } from "@frontify/fondue-icons";
+import { forwardRef as p, useMemo as c, useRef as b, useEffect as y } from "react";
+import { getDefaultClassNames as w, DayPicker as g } from "react-day-picker";
+/* empty css                     */
+import { Button as m } from "./fondue-components6.js";
+import { useFondueTheme as N } from "./fondue-components40.js";
+import { transformDisabledDates as v } from "./fondue-components149.js";
+import e from "./fondue-components150.js";
+const B = p(
+  ({ "data-test-id": t = "fondue-date-picker-calendar", disabledDates: s, ...a }, o) => {
+    const d = w(), {
+      dir: l,
+      translations: { dateLocale: n }
+    } = N(), i = c(() => v(s), [s]), f = c(() => {
+      var u;
+      return a.mode === "single" ? a.selected : (u = a.selected) == null ? void 0 : u.from;
+    }, [a]);
+    return /* @__PURE__ */ r("div", { ref: o, "data-test-id": t, className: e.wrapper, children: /* @__PURE__ */ r(
+      g,
       {
-        ref: B,
-        className: r.root,
-        "data-status": T ? "error" : u,
-        "data-disabled": f,
-        "data-empty": o.length === 0,
-        "data-test-id": b,
-        ...f ? {} : (
-          // eslint-disable-next-line react-hooks/refs
-          L({
-            "aria-label": "aria-label" in i ? i["aria-label"] : void 0,
-            "aria-describedby": m ? D : void 0,
-            ref: B
-          })
-        ),
-        children: [
-          m ? /* @__PURE__ */ n("span", { id: D, className: r.srOnly, children: m }) : null,
-          g ? /* @__PURE__ */ n("div", { className: r.selectedValue, children: /* @__PURE__ */ n(
-            ce,
-            {
-              items: G,
-              placeholder: c,
-              onDismiss: (e) => {
-                var t;
-                p(e), (t = C.current) == null || t.focus();
-              },
-              selectedCount: o.length
-            }
-          ) }) : /* @__PURE__ */ n("span", { className: r.selectedValue, children: _ }),
-          H,
-          S ? /* @__PURE__ */ n(le, { onClear: Z, children: S }) : null,
-          /* @__PURE__ */ d("div", { className: r.icons, children: [
-            /* @__PURE__ */ n(V, { size: 16, className: r.caret }),
-            /* @__PURE__ */ n(ge, { status: u, hasError: T, dataTestId: b })
-          ] })
-        ]
+        navLayout: "around",
+        "data-test-id": t,
+        locale: n,
+        components: D(),
+        showOutsideDays: !0,
+        disabled: i,
+        defaultMonth: f,
+        dir: l,
+        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}`
+        }
       }
-    ) }),
-    /* @__PURE__ */ n(
-      ue,
+    ) });
+  }
+);
+B.displayName = "DatePickerCalendar";
+const D = () => ({
+  DayButton: ({ day: t, modifiers: s, onClick: a, onMouseEnter: o, onMouseLeave: d, ...l }) => {
+    const n = b(null);
+    return y(() => {
+      var i;
+      s.focused && ((i = n.current) == null || i.focus());
+    }, [s.focused]), /* @__PURE__ */ r(
+      "button",
       {
-        align: R,
-        side: j,
-        highlightedIndex: Y,
-        getMenuProps: Q,
-        getItemProps: U,
-        selectedItemValues: o,
-        hasInteractedSinceOpening: J,
-        viewportCollisionPadding: E,
-        onEscapeKeyDown: F,
-        children: K
+        ...l,
+        ref: n,
+        className: e.dayButton,
+        onClick: a,
+        onMouseEnter: o,
+        onMouseLeave: d,
+        type: "button",
+        children: /* @__PURE__ */ r("div", { className: `${e.dayContent} ${e.button}`, children: t.date.getDate() })
       }
-    )
-  ] });
-};
-O.displayName = "Select";
-const Te = ee(O);
+    );
+  },
+  PreviousMonthButton: ({
+    onClick: t,
+    "aria-label": s,
+    "aria-disabled": a
+  }) => /* @__PURE__ */ r("div", { className: `${e.toggleMonthButtonContainer} `, children: /* @__PURE__ */ r(
+    m,
+    {
+      emphasis: "weak",
+      size: "small",
+      aspect: "square",
+      "aria-label": s,
+      "aria-disabled": a,
+      onPress: (o) => {
+        o && (t == null || t(o));
+      },
+      children: /* @__PURE__ */ r($, { size: 16 })
+    }
+  ) }),
+  NextMonthButton: ({
+    onClick: t,
+    "aria-label": s,
+    "aria-disabled": a
+  }) => /* @__PURE__ */ r("div", { className: `${e.toggleMonthButtonContainer} ${e.nextMonthButtonContainer}`, children: /* @__PURE__ */ r(
+    m,
+    {
+      emphasis: "weak",
+      size: "small",
+      aspect: "square",
+      "aria-label": s,
+      "aria-disabled": a,
+      onPress: (o) => {
+        o && (t == null || t(o));
+      },
+      children: /* @__PURE__ */ r(h, { size: 16 })
+    }
+  ) })
+});
 export {
-  Te as SelectBase
+  B as DatePickerCalendar
 };
 //# sourceMappingURL=fondue-components126.js.map

package/dist/fondue-components126.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components126.js","sources":["../src/components/Select/components/SelectBase.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useCallback, useMemo, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { useBadgeItems } from '../hooks/useBadgeItems';\nimport { useFocusRing } from '../hooks/useFocusRing';\nimport { useSelectData } from '../hooks/useSelectData';\nimport { useSelectionDescription } from '../hooks/useSelectionDescription';\nimport styles from '../styles/select.module.scss';\n\nimport { ClearButton } from './ClearButton';\nimport { CollapsibleBadges } from './CollapsibleBadges';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport { StatusIcons } from './StatusIcons';\n\nexport type SelectSharedProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu\n     */\n    children?: ReactNode;\n    /**\n     * The placeholder in the select component\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport\n     * @default \"bottom\"\n     */\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * The data test id of the select component\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plain text (from the label prop) when set to true\n     * Items child components are used if set to false\n     * @default true\n     */\n    showStringValue?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n    /**\n     * Event handler called when the escape key is pressed\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n} & CommonAriaProps;\n\ntype SelectBaseProps = SelectSharedProps & {\n    /**\n     * The currently selected item values\n     */\n    selectedItemValues: string[];\n    /**\n     * Callback fired when an item is selected or deselected\n     */\n    onItemSelect: (value?: string) => void;\n    /**\n     * Callback fired when the selection is cleared\n     */\n    onClear: () => void;\n    /**\n     * Whether the select allows multiple selections\n     */\n    multiple: boolean;\n};\n\nconst SelectBaseInput = (\n    {\n        children,\n        selectedItemValues,\n        onItemSelect,\n        onClear,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        viewportCollisionPadding = 'compact',\n        onEscapeKeyDown,\n        multiple,\n        ...props\n    }: SelectBaseProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactNode => {\n    const internalRef = useRef<HTMLDivElement | null>(null);\n    const triggerRef = useCallback(\n        (node: HTMLDivElement | null): void => {\n            internalRef.current = node;\n            if (typeof forwardedRef === 'function') {\n                forwardedRef(node);\n            } else if (forwardedRef) {\n                forwardedRef.current = node;\n            }\n        },\n        [forwardedRef],\n    );\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n    const { onMouseDown, onFocus, onBlur } = useFocusRing();\n    const { selectionDescriptionId, selectionDescription } = useSelectionDescription(\n        multiple,\n        selectedItemValues,\n        getItemByValue,\n    );\n    const badgeItems = useBadgeItems(selectedItemValues, getItemByValue);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const getDisplayedValue = useCallback(\n        (itemValue?: string): ReactNode => {\n            const selectedItem = getItemByValue(itemValue);\n            if (selectedItem) {\n                return !showStringValue && selectedItem?.children ? selectedItem.children : selectedItem?.label;\n            }\n            return undefined;\n        },\n        [getItemByValue, showStringValue],\n    );\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, isOpen, highlightedIndex } = useSelect<{\n        value: string;\n        label: string;\n        children?: ReactNode;\n    }>({\n        items,\n        selectedItem: null,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        onSelectedItemChange: ({ selectedItem }) => {\n            onItemSelect(selectedItem?.value);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n        ...(multiple\n            ? {\n                  stateReducer: (state, actionAndChanges) => {\n                      const { changes, type } = actionAndChanges;\n                      switch (type) {\n                          case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:\n                          case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n                          case useSelect.stateChangeTypes.ItemClick:\n                              return {\n                                  ...changes,\n                                  isOpen: true,\n                                  highlightedIndex: state.highlightedIndex,\n                              };\n                          case useSelect.stateChangeTypes.ToggleButtonBlur:\n                              return {\n                                  ...changes,\n                                  selectedItem: state.selectedItem,\n                              };\n                      }\n                      return changes;\n                  },\n              }\n            : {}),\n    });\n\n    const hasError = status === 'error';\n\n    const handleClear = (): void => {\n        onClear();\n        reset();\n    };\n\n    const singleSelectValue = useMemo(\n        (): ReactNode => getDisplayedValue(selectedItemValues[0]) || placeholder,\n        [getDisplayedValue, selectedItemValues, placeholder],\n    );\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild onMouseDown={onMouseDown} onFocus={onFocus} onBlur={onBlur}>\n                <div\n                    ref={triggerRef}\n                    className={styles.root}\n                    data-status={hasError ? 'error' : status}\n                    data-disabled={disabled}\n                    data-empty={selectedItemValues.length === 0}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : // eslint-disable-next-line react-hooks/refs\n                          getToggleButtonProps({\n                              'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                              'aria-describedby': selectionDescription ? selectionDescriptionId : undefined,\n                              ref: triggerRef,\n                          }))}\n                >\n                    {selectionDescription ? (\n                        <span id={selectionDescriptionId} className={styles.srOnly}>\n                            {selectionDescription}\n                        </span>\n                    ) : null}\n                    {multiple ? (\n                        <div className={styles.selectedValue}>\n                            <CollapsibleBadges\n                                items={badgeItems}\n                                placeholder={placeholder}\n                                onDismiss={(value) => {\n                                    onItemSelect(value);\n                                    internalRef.current?.focus();\n                                }}\n                                selectedCount={selectedItemValues.length}\n                            />\n                        </div>\n                    ) : (\n                        <span className={styles.selectedValue}>{singleSelectValue}</span>\n                    )}\n                    {inputSlots}\n                    {clearButton ? <ClearButton onClear={handleClear}>{clearButton}</ClearButton> : null}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        <StatusIcons status={status} hasError={hasError} dataTestId={dataTestId} />\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItemValues={selectedItemValues}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n                onEscapeKeyDown={onEscapeKeyDown}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectBaseInput.displayName = 'Select';\n\nexport const SelectBase = forwardRef<HTMLDivElement, SelectBaseProps>(SelectBaseInput);\n"],"names":["SelectBaseInput","children","selectedItemValues","onItemSelect","onClear","placeholder","status","disabled","alignMenu","side","id","showStringValue","dataTestId","viewportCollisionPadding","onEscapeKeyDown","multiple","props","forwardedRef","internalRef","useRef","triggerRef","useCallback","node","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","onMouseDown","onFocus","onBlur","useFocusRing","selectionDescriptionId","selectionDescription","useSelectionDescription","badgeItems","useBadgeItems","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getDisplayedValue","itemValue","selectedItem","getToggleButtonProps","getMenuProps","getItemProps","reset","isOpen","highlightedIndex","useSelect","item","state","actionAndChanges","changes","type","hasError","handleClear","singleSelectValue","useMemo","jsxs","RadixPopover","jsx","styles","CollapsibleBadges","value","_a","ClearButton","IconCaretDown","StatusIcons","SelectMenu","SelectBase","forwardRef"],"mappings":";;;;;;;;;;;;;;AA4FA,MAAMA,IAAkB,CACpB;AAAA,EACI,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,IAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,gBAAgBC,IAAa;AAAA,EAC7B,0BAAAC,IAA2B;AAAA,EAC3B,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MACY;AACZ,QAAMC,IAAcC,GAA8B,IAAI,GAChDC,IAAaC;AAAA,IACf,CAACC,MAAsC;AACnC,MAAAJ,EAAY,UAAUI,GAClB,OAAOL,KAAiB,aACxBA,EAAaK,CAAI,IACVL,MACPA,EAAa,UAAUK;AAAA,IAE/B;AAAA,IACA,CAACL,CAAY;AAAA,EAAA,GAEX,EAAE,YAAAM,GAAY,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,gBAAAC,EAAA,IAAmBC,GAAc3B,CAAQ,GACtF,EAAE,aAAA4B,GAAa,SAAAC,GAAS,QAAAC,EAAA,IAAWC,GAAA,GACnC,EAAE,wBAAAC,GAAwB,sBAAAC,EAAA,IAAyBC;AAAA,IACrDpB;AAAA,IACAb;AAAA,IACAyB;AAAA,EAAA,GAEES,IAAaC,GAAcnC,GAAoByB,CAAc,GAE7D,CAACW,GAA2BC,CAA4B,IAAIC,GAAS,EAAK,GAE1EC,IAAoBpB;AAAA,IACtB,CAACqB,MAAkC;AAC/B,YAAMC,IAAehB,EAAee,CAAS;AAC7C,UAAIC;AACA,eAAO,CAAChC,MAAmBgC,KAAA,QAAAA,EAAc,YAAWA,EAAa,WAAWA,KAAA,gBAAAA,EAAc;AAAA,IAGlG;AAAA,IACA,CAAChB,GAAgBhB,CAAe;AAAA,EAAA,GAG9B,EAAE,sBAAAiC,GAAsB,cAAAC,GAAc,cAAAC,GAAc,OAAAC,GAAO,QAAAC,GAAQ,kBAAAC,EAAA,IAAqBC,EAI3F;AAAA,IACC,OAAAzB;AAAA,IACA,cAAc;AAAA,IACd,gBAAgBf;AAAA,IAChB,SAAS,qBAAqBM,IAAQA,EAAM,iBAAiB,IAAI;AAAA,IACjE,gBAAgB,MAAM;AAClB,MAAAuB,EAA6B,EAAK;AAAA,IACtC;AAAA,IACA,0BAA0B,MAAM;AAC5B,MAAAA,EAA6B,EAAI;AAAA,IACrC;AAAA,IACA,sBAAsB,CAAC,EAAE,cAAAI,QAAmB;AACxC,MAAAxC,EAAawC,KAAA,gBAAAA,EAAc,KAAK;AAAA,IACpC;AAAA,IACA,cAAc,CAACQ,MAAUA,IAAOA,EAAK,QAAQ;AAAA,IAC7C,GAAIpC,IACE;AAAA,MACI,cAAc,CAACqC,GAAOC,MAAqB;AACvC,cAAM,EAAE,SAAAC,GAAS,MAAAC,EAAA,IAASF;AAC1B,gBAAQE,GAAA;AAAA,UACJ,KAAKL,EAAU,iBAAiB;AAAA,UAChC,KAAKA,EAAU,iBAAiB;AAAA,UAChC,KAAKA,EAAU,iBAAiB;AAC5B,mBAAO;AAAA,cACH,GAAGI;AAAA,cACH,QAAQ;AAAA,cACR,kBAAkBF,EAAM;AAAA,YAAA;AAAA,UAEhC,KAAKF,EAAU,iBAAiB;AAC5B,mBAAO;AAAA,cACH,GAAGI;AAAA,cACH,cAAcF,EAAM;AAAA,YAAA;AAAA,QACxB;AAER,eAAOE;AAAA,MACX;AAAA,IAAA,IAEJ,CAAA;AAAA,EAAC,CACV,GAEKE,IAAWlD,MAAW,SAEtBmD,IAAc,MAAY;AAC5B,IAAArD,EAAA,GACA2C,EAAA;AAAA,EACJ,GAEMW,IAAoBC;AAAA,IACtB,MAAiBlB,EAAkBvC,EAAmB,CAAC,CAAC,KAAKG;AAAA,IAC7D,CAACoC,GAAmBvC,GAAoBG,CAAW;AAAA,EAAA;AAGvD,SACI,gBAAAuD,EAACC,EAAa,MAAb,EAAkB,MAAMb,GACrB,UAAA;AAAA,IAAA,gBAAAc,EAACD,EAAa,QAAb,EAAoB,SAAO,IAAC,aAAAhC,GAA0B,SAAAC,GAAkB,QAAAC,GACrE,UAAA,gBAAA6B;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKxC;AAAA,QACL,WAAW2C,EAAO;AAAA,QAClB,eAAaP,IAAW,UAAUlD;AAAA,QAClC,iBAAeC;AAAA,QACf,cAAYL,EAAmB,WAAW;AAAA,QAC1C,gBAAcU;AAAA,QACb,GAAIL,IACC,CAAA;AAAA;AAAA,UAEAqC,EAAqB;AAAA,YACjB,cAAc,gBAAgB5B,IAAQA,EAAM,YAAY,IAAI;AAAA,YAC5D,oBAAoBkB,IAAuBD,IAAyB;AAAA,YACpE,KAAKb;AAAA,UAAA,CACR;AAAA;AAAA,QAEN,UAAA;AAAA,UAAAc,IACG,gBAAA4B,EAAC,UAAK,IAAI7B,GAAwB,WAAW8B,EAAO,QAC/C,aACL,IACA;AAAA,UACHhD,IACG,gBAAA+C,EAAC,OAAA,EAAI,WAAWC,EAAO,eACnB,UAAA,gBAAAD;AAAA,YAACE;AAAA,YAAA;AAAA,cACG,OAAO5B;AAAA,cACP,aAAA/B;AAAA,cACA,WAAW,CAAC4D,MAAU;;AAClB,gBAAA9D,EAAa8D,CAAK,IAClBC,IAAAhD,EAAY,YAAZ,QAAAgD,EAAqB;AAAA,cACzB;AAAA,cACA,eAAehE,EAAmB;AAAA,YAAA;AAAA,UAAA,GAE1C,IAEA,gBAAA4D,EAAC,UAAK,WAAWC,EAAO,eAAgB,UAAAL,GAAkB;AAAA,UAE7DnC;AAAA,UACAG,IAAc,gBAAAoC,EAACK,IAAA,EAAY,SAASV,GAAc,aAAY,IAAiB;AAAA,UAChF,gBAAAG,EAAC,OAAA,EAAI,WAAWG,EAAO,OACnB,UAAA;AAAA,YAAA,gBAAAD,EAACM,GAAA,EAAc,MAAM,IAAI,WAAWL,EAAO,OAAO;AAAA,YAClD,gBAAAD,EAACO,IAAA,EAAY,QAAA/D,GAAgB,UAAAkD,GAAoB,YAAA5C,EAAA,CAAwB;AAAA,UAAA,EAAA,CAC7E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IAEA,gBAAAkD;AAAA,MAACQ;AAAA,MAAA;AAAA,QACG,OAAO9D;AAAA,QACP,MAAAC;AAAA,QACA,kBAAAwC;AAAA,QACA,cAAAJ;AAAA,QACA,cAAAC;AAAA,QACA,oBAAA5C;AAAA,QACA,2BAAAoC;AAAA,QACA,0BAAAzB;AAAA,QACA,iBAAAC;AAAA,QAEC,UAAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AACAxB,EAAgB,cAAc;AAEvB,MAAMuE,KAAaC,GAA4CxE,CAAe;"}
+{"version":3,"file":"fondue-components126.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 { transformDisabledDates } from './helpers/dateTransformer';\nimport styles from './styles/datePickerCalendar.module.scss';\nimport { type DisabledDatePickerDates } from './types';\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\nexport type DatePickerBaseProps = {\n    /** The days to be disabled. */\n    disabledDates?: DisabledDatePickerDates | DisabledDatePickerDates[];\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 transformedDisabledDates = useMemo(() => transformDisabledDates(disabledDates), [disabledDates]);\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={transformedDisabledDates}\n                    defaultMonth={defaultMonth}\n                    dir={dir}\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","transformedDisabledDates","useMemo","transformDisabledDates","defaultMonth","_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-components127.js

@@ -1,48 +1,16 @@
-const c = "_root_13ciu_7", e = "_selectedValue_13ciu_63", _ = "_input_13ciu_80", o = "_slot_13ciu_106", t = "_clear_13ciu_156", n = "_clearIcon_13ciu_163", u = "_icons_13ciu_167", i = "_caret_13ciu_173", r = "_iconSuccess_13ciu_201", s = "_iconError_13ciu_207", a = "_menu_13ciu_213", l = "_portal_13ciu_236", p = "_item_13ciu_252", g = "_checkmarkIcon_13ciu_281", m = "_itemValue_13ciu_287", d = "_group_13ciu_301", I = "_groupHeading_13ciu_312", b = "_badgesContainer_13ciu_324", k = "_badgeWrapper_13ciu_336", S = "_srOnly_13ciu_345", V = "_multiSelectInput_13ciu_357", y = {
-  root: c,
-  selectedValue: e,
-  input: _,
-  slot: o,
-  clear: t,
-  clearIcon: n,
-  icons: u,
-  caret: i,
-  iconSuccess: r,
-  iconError: s,
-  menu: a,
-  portal: l,
-  item: p,
-  checkmarkIcon: g,
-  itemValue: m,
-  group: d,
-  groupHeading: I,
-  badgesContainer: b,
-  badgeWrapper: k,
-  srOnly: S,
-  multiSelectInput: V
+import { useState as o, useMemo as D } from "react";
+import { transformDateRangeToPickerDateRange as c, transformPickerDateRangeToDateRange as i } from "./fondue-components149.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 {
-  k as badgeWrapper,
-  b as badgesContainer,
-  i as caret,
-  g as checkmarkIcon,
-  t as clear,
-  n as clearIcon,
-  y as default,
-  d as group,
-  I as groupHeading,
-  s as iconError,
-  r as iconSuccess,
-  u as icons,
-  _ as input,
-  p as item,
-  m as itemValue,
-  a as menu,
-  V as multiSelectInput,
-  l as portal,
-  c as root,
-  e as selectedValue,
-  o as slot,
-  S as srOnly
+  l as useDateRange
 };
 //# sourceMappingURL=fondue-components127.js.map

package/dist/fondue-components127.js.map

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

@@ -1,45 +1,20 @@
-const i = (r) => {
-  if (r)
-    return {
-      year: r.getFullYear(),
-      // Month is 0-indexed in JavaScript, so we add 1 to get the correct month
-      month: r.getMonth() + 1,
-      day: r.getDate()
-    };
-}, t = (r) => {
-  if (r)
-    return new Date(r.year, r.month - 1, r.day);
-}, m = (r) => {
-  const n = i(r == null ? void 0 : r.from), o = i(r == null ? void 0 : r.to);
-  if (!(!n || !o))
-    return {
-      from: n,
-      to: o
-    };
-}, u = (r) => {
-  if (r)
-    return {
-      from: t(r.from),
-      to: t(r.to)
-    };
-}, c = (r) => {
-  if (!r)
-    return;
-  const o = (Array.isArray(r) ? r : [r]).flatMap((f) => {
-    if ("before" in f) {
-      const s = t(f.before);
-      return s ? [{ before: s }] : [];
-    }
-    const e = t(f.after);
-    return e ? [{ after: e }] : [];
-  });
-  return o.length > 0 ? o : void 0;
-};
+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 {
-  t as transformDatePickerDateToDate,
-  u as transformDateRangeToPickerDateRange,
-  i as transformDateToDatePickerDate,
-  c as transformDisabledDates,
-  m as transformPickerDateRangeToDateRange
+  h as useRangeHover
 };
 //# sourceMappingURL=fondue-components128.js.map

package/dist/fondue-components128.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components128.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 DisabledDatePickerDates, 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.getFullYear(),\n        // Month is 0-indexed in JavaScript, so we add 1 to get the correct month\n        month: date.getMonth() + 1,\n        day: date.getDate(),\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(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\ntype DisabledDate = { before: Date } | { after: Date };\n\nexport const transformDisabledDates = (\n    disabledDates?: DisabledDatePickerDates | DisabledDatePickerDates[],\n): DisabledDate[] | undefined => {\n    if (!disabledDates) {\n        return undefined;\n    }\n\n    const entries = Array.isArray(disabledDates) ? disabledDates : [disabledDates];\n\n    const transformedDisabledDates = entries.flatMap((entry): DisabledDate[] => {\n        if ('before' in entry) {\n            const date = transformDatePickerDateToDate(entry.before);\n            return date ? [{ before: date }] : [];\n        }\n        const date = transformDatePickerDateToDate(entry.after);\n        return date ? [{ after: date }] : [];\n    });\n\n    return transformedDisabledDates.length > 0 ? transformedDisabledDates : undefined;\n};\n"],"names":["transformDateToDatePickerDate","date","transformDatePickerDateToDate","datePickerDate","transformPickerDateRangeToDateRange","dateRange","fromDate","toDate","transformDateRangeToPickerDateRange","transformDisabledDates","disabledDates","transformedDisabledDates","entry"],"mappings":"AAMO,MAAMA,IAAgC,CAACC,MAA4C;AACtF,MAAKA;AAGL,WAAO;AAAA,MACH,MAAMA,EAAK,YAAA;AAAA;AAAA,MAEX,OAAOA,EAAK,SAAA,IAAa;AAAA,MACzB,KAAKA,EAAK,QAAA;AAAA,IAAQ;AAE1B,GAEaC,IAAgC,CAACC,MAAsD;AAChG,MAAKA;AAIL,WAAO,IAAI,KAAKA,EAAe,MAAMA,EAAe,QAAQ,GAAGA,EAAe,GAAG;AACrF,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,GAIaI,IAAyB,CAClCC,MAC6B;AAC7B,MAAI,CAACA;AACD;AAKJ,QAAMC,KAFU,MAAM,QAAQD,CAAa,IAAIA,IAAgB,CAACA,CAAa,GAEpC,QAAQ,CAACE,MAA0B;AACxE,QAAI,YAAYA,GAAO;AACnB,YAAMX,IAAOC,EAA8BU,EAAM,MAAM;AACvD,aAAOX,IAAO,CAAC,EAAE,QAAQA,EAAAA,CAAM,IAAI,CAAA;AAAA,IACvC;AACA,UAAMA,IAAOC,EAA8BU,EAAM,KAAK;AACtD,WAAOX,IAAO,CAAC,EAAE,OAAOA,EAAA,CAAM,IAAI,CAAA;AAAA,EACtC,CAAC;AAED,SAAOU,EAAyB,SAAS,IAAIA,IAA2B;AAC5E;"}
+{"version":3,"file":"fondue-components128.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-components129.js

@@ -0,0 +1,16 @@
+import { useState as o, useMemo as i } from "react";
+import { transformDatePickerDateToDate as m, transformDateToDatePickerDate as d } from "./fondue-components149.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-components129.js.map

package/dist/fondue-components129.js.map

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

@@ -1,66 +1,11 @@
-import { jsx as f } from "react/jsx-runtime";
-import { Slot as v } from "@radix-ui/react-slot";
-import { forwardRef as N, useState as S, useRef as c } from "react";
-import g from "./fondue-components63.js";
-const A = N(
-  ({
-    onChange: o,
-    asChild: m,
-    hugWidth: x = !0,
-    "aria-label": b,
-    children: p,
-    "data-test-id": w = "fondue-editable-text"
-  }, E) => {
-    const R = m ? v : "span", [n, u] = S(!1), s = c(!1), l = c(null), i = c(""), T = () => {
-      s.current = !0;
-    }, h = (t) => {
-      var d;
-      i.current = t.currentTarget.textContent ?? "", u(!0), (d = l.current) == null || d.setAttribute("data-show-focus-ring", String(!s.current));
-      const a = t.currentTarget, e = document.createRange();
-      e.selectNodeContents(a), e.collapse(!1);
-      const r = window.getSelection();
-      r == null || r.removeAllRanges(), r == null || r.addRange(e);
-    }, y = (t) => {
-      t.key === "Enter" && (t.preventDefault(), t.currentTarget.blur());
-    }, D = (t) => {
-      var e;
-      u(!1), (e = l.current) == null || e.setAttribute("data-show-focus-ring", "false"), s.current = !1, t.currentTarget.scrollLeft = 0;
-      const a = t.currentTarget.textContent ?? "";
-      a !== i.current && (o == null || o(a));
-    };
-    return /* @__PURE__ */ f(
-      "div",
-      {
-        ref: l,
-        className: g.root,
-        "data-editing": n,
-        "data-hug-width": x,
-        "data-show-focus-ring": "false",
-        "data-test-id": w,
-        children: /* @__PURE__ */ f(
-          R,
-          {
-            ref: E,
-            className: g.text,
-            contentEditable: n ? "plaintext-only" : void 0,
-            suppressContentEditableWarning: !0,
-            tabIndex: 0,
-            role: n ? "textbox" : void 0,
-            "aria-label": n ? b : void 0,
-            "aria-live": "off",
-            onMouseDown: T,
-            onFocus: h,
-            onKeyDown: y,
-            onBlur: D,
-            children: p
-          }
-        )
-      }
-    );
-  }
-);
-A.displayName = "EditableText";
+import { ForwardedRefDatePickerInput as r } from "./fondue-components65.js";
+import { ForwardedRefRangeDatePicker as a } from "./fondue-components66.js";
+import { ForwardedRefSingleDatePicker as t } from "./fondue-components67.js";
+const e = t;
+e.Range = a;
+e.Input = r;
+e.displayName = "DatePicker";
 export {
-  A as EditableText
+  e as DatePicker
 };
 //# sourceMappingURL=fondue-components13.js.map

package/dist/fondue-components13.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components13.js","sources":["../src/components/EditableText/EditableText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { type ReactNode, forwardRef, useRef, useState } from 'react';\n\nimport styles from './styles/editable-text.module.scss';\n\nexport type EditableTextProps = {\n    /**\n     * Callback fired with the plain text value when editing is confirmed (on blur or Enter).\n     * Only fires if the value has actually changed.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * When true, renders the child element instead of a default span,\n     * merging all editable props onto it.\n     */\n    asChild?: boolean;\n    /**\n     * When true, the EditableText only takes the width of the content.\n     * @default true\n     */\n    hugWidth?: boolean;\n    /**\n     * Accessible label for the editable text field.\n     */\n    'aria-label'?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const EditableText = forwardRef<HTMLElement, EditableTextProps>(\n    (\n        {\n            onChange,\n            asChild,\n            hugWidth = true,\n            'aria-label': ariaLabel,\n            children,\n            'data-test-id': dataTestId = 'fondue-editable-text',\n        },\n        forwardedRef,\n    ) => {\n        const TextElement = asChild ? Slot : 'span';\n        const [isEditing, setIsEditing] = useState(false);\n        const wasClickedRef = useRef(false);\n        const rootRef = useRef<HTMLDivElement>(null);\n        const valueOnFocusRef = useRef('');\n\n        const handleMouseDown = () => {\n            wasClickedRef.current = true;\n        };\n\n        const handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n            valueOnFocusRef.current = event.currentTarget.textContent ?? '';\n            setIsEditing(true);\n            rootRef.current?.setAttribute('data-show-focus-ring', String(!wasClickedRef.current));\n            const element = event.currentTarget;\n            const range = document.createRange();\n            range.selectNodeContents(element);\n            range.collapse(false);\n            const selection = window.getSelection();\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n        };\n\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n            if (event.key === 'Enter') {\n                event.preventDefault();\n                event.currentTarget.blur();\n            }\n        };\n\n        const handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n            setIsEditing(false);\n            rootRef.current?.setAttribute('data-show-focus-ring', 'false');\n            wasClickedRef.current = false;\n            event.currentTarget.scrollLeft = 0;\n            const currentValue = event.currentTarget.textContent ?? '';\n            if (currentValue !== valueOnFocusRef.current) {\n                onChange?.(currentValue);\n            }\n        };\n\n        return (\n            <div\n                ref={rootRef}\n                className={styles.root}\n                data-editing={isEditing}\n                data-hug-width={hugWidth}\n                data-show-focus-ring=\"false\"\n                data-test-id={dataTestId}\n            >\n                <TextElement\n                    ref={forwardedRef}\n                    className={styles.text}\n                    contentEditable={isEditing ? 'plaintext-only' : undefined}\n                    suppressContentEditableWarning\n                    tabIndex={0}\n                    role={isEditing ? 'textbox' : undefined}\n                    aria-label={isEditing ? ariaLabel : undefined}\n                    aria-live=\"off\"\n                    onMouseDown={handleMouseDown}\n                    onFocus={handleFocus}\n                    onKeyDown={handleKeyDown}\n                    onBlur={handleBlur}\n                >\n                    {children}\n                </TextElement>\n            </div>\n        );\n    },\n);\n\nEditableText.displayName = 'EditableText';\n"],"names":["EditableText","forwardRef","onChange","asChild","hugWidth","ariaLabel","children","dataTestId","forwardedRef","TextElement","Slot","isEditing","setIsEditing","useState","wasClickedRef","useRef","rootRef","valueOnFocusRef","handleMouseDown","handleFocus","event","_a","element","range","selection","handleKeyDown","handleBlur","currentValue","jsx","styles"],"mappings":";;;;AA+BO,MAAMA,IAAeC;AAAA,EACxB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,cAAcC;AAAA,IACd,UAAAC;AAAA,IACA,gBAAgBC,IAAa;AAAA,EAAA,GAEjCC,MACC;AACD,UAAMC,IAAcN,IAAUO,IAAO,QAC/B,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAgBC,EAAO,EAAK,GAC5BC,IAAUD,EAAuB,IAAI,GACrCE,IAAkBF,EAAO,EAAE,GAE3BG,IAAkB,MAAM;AAC1B,MAAAJ,EAAc,UAAU;AAAA,IAC5B,GAEMK,IAAc,CAACC,MAAyC;;AAC1D,MAAAH,EAAgB,UAAUG,EAAM,cAAc,eAAe,IAC7DR,EAAa,EAAI,IACjBS,IAAAL,EAAQ,YAAR,QAAAK,EAAiB,aAAa,wBAAwB,OAAO,CAACP,EAAc,OAAO;AACnF,YAAMQ,IAAUF,EAAM,eAChBG,IAAQ,SAAS,YAAA;AACvB,MAAAA,EAAM,mBAAmBD,CAAO,GAChCC,EAAM,SAAS,EAAK;AACpB,YAAMC,IAAY,OAAO,aAAA;AACzB,MAAAA,KAAA,QAAAA,EAAW,mBACXA,KAAA,QAAAA,EAAW,SAASD;AAAA,IACxB,GAEME,IAAgB,CAACL,MAA4C;AAC/D,MAAIA,EAAM,QAAQ,YACdA,EAAM,eAAA,GACNA,EAAM,cAAc,KAAA;AAAA,IAE5B,GAEMM,IAAa,CAACN,MAAyC;;AACzD,MAAAR,EAAa,EAAK,IAClBS,IAAAL,EAAQ,YAAR,QAAAK,EAAiB,aAAa,wBAAwB,UACtDP,EAAc,UAAU,IACxBM,EAAM,cAAc,aAAa;AACjC,YAAMO,IAAeP,EAAM,cAAc,eAAe;AACxD,MAAIO,MAAiBV,EAAgB,YACjCf,KAAA,QAAAA,EAAWyB;AAAA,IAEnB;AAEA,WACI,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKZ;AAAA,QACL,WAAWa,EAAO;AAAA,QAClB,gBAAclB;AAAA,QACd,kBAAgBP;AAAA,QAChB,wBAAqB;AAAA,QACrB,gBAAcG;AAAA,QAEd,UAAA,gBAAAqB;AAAA,UAACnB;AAAA,UAAA;AAAA,YACG,KAAKD;AAAA,YACL,WAAWqB,EAAO;AAAA,YAClB,iBAAiBlB,IAAY,mBAAmB;AAAA,YAChD,gCAA8B;AAAA,YAC9B,UAAU;AAAA,YACV,MAAMA,IAAY,YAAY;AAAA,YAC9B,cAAYA,IAAYN,IAAY;AAAA,YACpC,aAAU;AAAA,YACV,aAAaa;AAAA,YACb,SAASC;AAAA,YACT,WAAWM;AAAA,YACX,QAAQC;AAAA,YAEP,UAAApB;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEAN,EAAa,cAAc;"}
+{"version":3,"file":"fondue-components13.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;\nDatePicker.displayName = 'DatePicker';\nexport type { DatePickerDate, DatePickerDateRange } from './types';\n"],"names":["DatePicker","ForwardedRefSingleDatePicker","ForwardedRefRangeDatePicker","ForwardedRefDatePickerInput"],"mappings":";;;AAOO,MAAMA,IAGTC;AACJD,EAAW,QAAQE;AACnBF,EAAW,QAAQG;AACnBH,EAAW,cAAc;"}