npm - @commercetools/nimbus - Versions diffs - 2.9.1 → 2.11.0 - Mend

@commercetools/nimbus 2.9.1 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1490) hide show

package/dist/chunks/date-range-picker-CloFZ70c.es.js ADDED Viewed

@@ -0,0 +1,363 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { createSlotRecipeContext as E, useSlotRecipe as L } from "@chakra-ui/react/styled-system";
+import { Close as V, CalendarMonth as F } from "@commercetools/nimbus-icons";
+import { $ as D, a as w } from "./DatePicker-BLXrb3eY.es.js";
+import { $ as _, k as A } from "./Dialog-Dwy2_Ptk.es.js";
+import { $ as B } from "./Group-MOzeoewy.es.js";
+import { g as O } from "./index-CTrsTsK6.es.js";
+import { e as W } from "./extract-style-props-D86m_g63.es.js";
+import { useContext as k, useRef as P, useEffect as j } from "react";
+import { n as T, u as R } from "./normalize-messages-CeN1NEyM.es.js";
+import { F as $ } from "./flex-BqxAMF-7.es.js";
+import { T as M } from "./text-Ci0HmiFd.es.js";
+import { T as x } from "./time-input-DVHH_t4-.es.js";
+import { $ as y } from "./Button-i3wfJjZy.es.js";
+import { d as G, e as K } from "./utils-BBrLCz2b.es.js";
+import { o as q } from "./DateField-C1PcBsYT.es.js";
+import { R as N } from "./range-calendar-BFVhbf7m.es.js";
+import { D as z } from "./date-input-U8N1y6b_.es.js";
+import { I } from "./icon-button-COjLtd6N.es.js";
+const { withProvider: J, withContext: H } = /* @__PURE__ */ E({
+  key: "nimbusDateRangePicker"
+}), Q = /* @__PURE__ */ J("div", "root"), U = /* @__PURE__ */ H("div", "group"), X = /* @__PURE__ */ H("div", "trigger"), Y = /* @__PURE__ */ H("div", "popover"), Z = /* @__PURE__ */ H("div", "calendar"), ee = {
+  clearInput: "Clear input value",
+  clearSelection: "Clear date range",
+  endTime: "End time",
+  endTimeHour: "End time (hour)",
+  endTimeHourMinute: "End time (hour and minute)",
+  endTimeHourMinuteSecond: "End time (hour, minute, and second)",
+  endTimeLabel: "End time",
+  openCalendar: "Open calendar",
+  startTime: "Start time",
+  startTimeHour: "Start time (hour)",
+  startTimeHourMinute: "Start time (hour and minute)",
+  startTimeHourMinuteSecond: "Start time (hour, minute, and second)",
+  startTimeLabel: "Start time"
+}, te = {
+  clearInput: "Eingabewert löschen",
+  clearSelection: "Datumsbereich löschen",
+  endTime: "Endzeit",
+  endTimeHour: "Endzeit (Stunde)",
+  endTimeHourMinute: "Endzeit (Stunde und Minute)",
+  endTimeHourMinuteSecond: "Endzeit (Stunde, Minute und Sekunde)",
+  endTimeLabel: "Endzeit",
+  openCalendar: "Kalender öffnen",
+  startTime: "Startzeit",
+  startTimeHour: "Startzeit (Stunde)",
+  startTimeHourMinute: "Startzeit (Stunde und Minute)",
+  startTimeHourMinuteSecond: "Startzeit (Stunde, Minute und Sekunde)",
+  startTimeLabel: "Startzeit"
+}, ne = {
+  clearInput: "Eliminar valor de entrada",
+  clearSelection: "Borrar rango de fechas",
+  endTime: "Finalizar tiempo",
+  endTimeHour: "Finalizar tiempo (hora)",
+  endTimeHourMinute: "Finalizar tiempo (hora y minuto)",
+  endTimeHourMinuteSecond: "Finalizar tiempo (hora, minuto, segundo)",
+  endTimeLabel: "Finalizar tiempo",
+  openCalendar: "Abrir calendario",
+  startTime: "Iniciar tiempo",
+  startTimeHour: "Iniciar tiempo (hora)",
+  startTimeHourMinute: "Iniciar tiempo (hora y minuto)",
+  startTimeHourMinuteSecond: "Iniciar tiempo (hora, minuto y segundo)",
+  startTimeLabel: "Iniciar tiempo"
+}, re = {
+  clearInput: "Effacer la valeur saisie",
+  clearSelection: "Effacer la plage de dates",
+  endTime: "Heure de fin",
+  endTimeHour: "Heure de fin (heure)",
+  endTimeHourMinute: "Heure de fin (heure et minute)",
+  endTimeHourMinuteSecond: " Heure de fin (heure, minute et seconde)",
+  endTimeLabel: "Heure de fin",
+  openCalendar: "Ouvrir le calendrier",
+  startTime: "Heure de début",
+  startTimeHour: "Heure de début (heure)",
+  startTimeHourMinute: "Heure de début  (heure et minute)",
+  startTimeHourMinuteSecond: "Heure de début (heure, minute et seconde)",
+  startTimeLabel: "Heure de début"
+}, ae = {
+  clearInput: "Limpar valores inseridos",
+  clearSelection: "Limpar intervalo de datas",
+  endTime: "Hora de término",
+  endTimeHour: "Hora de término (hora)",
+  endTimeHourMinute: "Hora de término (hora e minutos)",
+  endTimeHourMinuteSecond: "Hora de término (hora, minutos e segundos)",
+  endTimeLabel: "Hora de término",
+  openCalendar: "Abrir agenda",
+  startTime: "Hora de início",
+  startTimeHour: "Hora de início (hora)",
+  startTimeHourMinute: "Hora de início (hora e minutos)",
+  startTimeHourMinuteSecond: "Hora de início (hora, minutos e segundos)",
+  startTimeLabel: "Hora de início"
+}, C = {
+  en: /* @__PURE__ */ T(ee),
+  de: /* @__PURE__ */ T(te),
+  es: /* @__PURE__ */ T(ne),
+  "fr-FR": /* @__PURE__ */ T(re),
+  "pt-BR": /* @__PURE__ */ T(ae)
+}, ie = ({
+  hideTimeZone: s,
+  hourCycle: i
+}) => {
+  const d = R(C), e = k(D), { granularity: u, value: a } = e, o = P(null), l = P(a);
+  return j(() => {
+    let m;
+    if (a?.start && l.current?.start?.compare(a.start) !== 0 || a?.end && l.current?.end?.compare(a.end) !== 0) {
+      const c = o.current, f = document.activeElement;
+      c?.contains(f) && f?.getAttribute("role") === "spinbutton" || (m = setTimeout(() => {
+        if (c) {
+          const t = c.querySelector(
+            '[role="spinbutton"]'
+          );
+          t && t.focus();
+        }
+      }, 50));
+    }
+    return l.current = a, () => {
+      m && clearTimeout(m);
+    };
+  }, [a]), u === "day" ? null : /* @__PURE__ */ p(
+    $,
+    {
+      ref: o,
+      borderTop: "solid-25",
+      borderColor: "neutral.3",
+      py: "300",
+      px: "400",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "200",
+      children: [
+        /* @__PURE__ */ p($, { alignItems: "center", gap: "200", children: [
+          /* @__PURE__ */ n(
+            M,
+            {
+              textStyle: "xs",
+              fontWeight: "500",
+              color: "neutral.12",
+              minWidth: "fit-content",
+              children: d.format("startTimeLabel")
+            }
+          ),
+          /* @__PURE__ */ n(
+            x,
+            {
+              slot: "startTimeInput",
+              variant: "ghost",
+              size: "sm",
+              hideTimeZone: s,
+              hourCycle: i
+            }
+          )
+        ] }),
+        /* @__PURE__ */ p($, { alignItems: "center", gap: "200", children: [
+          /* @__PURE__ */ n(
+            M,
+            {
+              textStyle: "xs",
+              fontWeight: "500",
+              color: "neutral.12",
+              minWidth: "fit-content",
+              children: d.format("endTimeLabel")
+            }
+          ),
+          /* @__PURE__ */ n(
+            x,
+            {
+              slot: "endTimeInput",
+              variant: "ghost",
+              size: "sm",
+              hideTimeZone: s,
+              hourCycle: i
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, oe = ({
+  children: s
+}) => {
+  const i = R(C), d = G(y) || {}, e = k(D), u = (t) => t?.day && t?.month && t?.year, a = !e?.value || !u(e.value.start) || !u(e.value.end), { granularity: o } = e, l = e?.value?.start && "hour" in e.value.start ? e.value.start : null, m = e?.value?.end && "hour" in e.value.end ? e.value.end : null, S = d?.isDisabled, c = (t) => {
+    const r = t === "start" ? "start" : "end";
+    switch (o) {
+      case "hour":
+        return i.format(
+          `${r}TimeHour`
+        );
+      case "minute":
+        return i.format(
+          `${r}TimeHourMinute`
+        );
+      case "second":
+        return i.format(
+          `${r}TimeHourMinuteSecond`
+        );
+      default:
+        return i.format(`${r}Time`);
+    }
+  }, f = {
+    /** toggles the calendar popover */
+    calendarToggle: {
+      ...d,
+      onPress: (t) => {
+        const r = document?.activeElement;
+        r && r.blur(), d.onPress?.(t);
+      }
+    },
+    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */
+    clear: {
+      // Clear both start and end values
+      onPress: () => e?.setValue(null),
+      "aria-label": i.format("clearInput"),
+      isDisabled: S,
+      // Hide the button when there's no value
+      style: a ? { display: "none" } : void 0,
+      "aria-hidden": a ? !0 : void 0
+    }
+  }, b = {
+    startTimeInput: {
+      value: l,
+      onChange: (t) => {
+        if (t !== null && e?.value?.start) {
+          const r = e.value, h = r.start, g = r.end;
+          if (h && g) {
+            const v = h.set({
+              hour: t.hour,
+              minute: t.minute || 0,
+              second: t.second || 0,
+              millisecond: t.millisecond || 0
+            });
+            e.setValue({
+              start: v,
+              end: g
+            });
+          }
+        }
+      },
+      granularity: o === "day" ? void 0 : o,
+      "aria-label": c("start")
+    },
+    endTimeInput: {
+      value: m,
+      onChange: (t) => {
+        if (t !== null && e?.value?.end) {
+          const r = e.value, h = r.start, g = r.end;
+          if (h && g) {
+            const v = g.set({
+              hour: t.hour,
+              minute: t.minute || 0,
+              second: t.second || 0,
+              millisecond: t.millisecond || 0
+            });
+            e.setValue({
+              start: h,
+              end: v
+            });
+          }
+        }
+      },
+      granularity: o === "day" ? void 0 : o,
+      "aria-label": c("end")
+    }
+  };
+  return /* @__PURE__ */ n(
+    K,
+    {
+      values: [
+        [
+          y,
+          {
+            slots: f
+          }
+        ],
+        [q, { slots: b }]
+      ],
+      children: s
+    }
+  );
+}, se = (s) => {
+  const i = R(C), { granularity: d = "day", hideTimeZone: e, hourCycle: u } = s, a = L({ recipe: O }), [o, l] = a.splitVariantProps(s), [m, S] = W(l), { size: c = "md" } = o, f = c === "md" ? "xs" : "2xs", b = d === "day" ? s.shouldCloseOnSelect : !1;
+  return /* @__PURE__ */ n(Q, { ...o, ...m, asChild: !0, children: /* @__PURE__ */ n(
+    w,
+    {
+      ...S,
+      shouldCloseOnSelect: b,
+      children: /* @__PURE__ */ p(oe, { children: [
+        /* @__PURE__ */ n(U, { asChild: !0, children: /* @__PURE__ */ p(B, { children: [
+          /* @__PURE__ */ n(
+            z,
+            {
+              slot: "start",
+              size: s.size,
+              variant: "plain",
+              width: "auto",
+              hideTimeZone: e,
+              hourCycle: u
+            }
+          ),
+          /* @__PURE__ */ n(
+            M,
+            {
+              as: "span",
+              px: "150",
+              color: "neutral.11",
+              userSelect: "none",
+              "aria-hidden": "true",
+              slot: null,
+              children: "–"
+            }
+          ),
+          /* @__PURE__ */ n(
+            z,
+            {
+              slot: "end",
+              size: s.size,
+              variant: "plain",
+              width: "auto",
+              hideTimeZone: e,
+              hourCycle: u
+            }
+          ),
+          /* @__PURE__ */ p(X, { children: [
+            /* @__PURE__ */ n(
+              I,
+              {
+                variant: "ghost",
+                size: f,
+                slot: "clear",
+                "aria-label": i.format("clearSelection"),
+                children: /* @__PURE__ */ n(V, {})
+              }
+            ),
+            /* @__PURE__ */ n(
+              I,
+              {
+                variant: "ghost",
+                size: f,
+                slot: "calendarToggle",
+                "aria-label": i.format("openCalendar"),
+                children: /* @__PURE__ */ n(F, {})
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ n(Y, { asChild: !0, children: /* @__PURE__ */ n(_, { placement: "bottom end", children: /* @__PURE__ */ p(A, { children: [
+          /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n(N, {}) }),
+          /* @__PURE__ */ n(
+            ie,
+            {
+              hideTimeZone: e,
+              hourCycle: u
+            }
+          )
+        ] }) }) })
+      ] })
+    }
+  ) });
+};
+se.displayName = "DateRangePicker";
+export {
+  se as D
+};
+//# sourceMappingURL=date-range-picker-CloFZ70c.es.js.map

package/dist/chunks/date-range-picker-CloFZ70c.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-range-picker-CloFZ70c.es.js","sources":["../../src/components/date-range-picker/date-range-picker.slots.tsx","../../src/components/date-range-picker/intl/en.ts","../../src/components/date-range-picker/intl/de.ts","../../src/components/date-range-picker/intl/es.ts","../../src/components/date-range-picker/intl/fr-FR.ts","../../src/components/date-range-picker/intl/pt-BR.ts","../../src/components/date-range-picker/date-range-picker.messages.ts","../../src/components/date-range-picker/components/date-range-picker.time-input.tsx","../../src/components/date-range-picker/components/date-range-picker.custom-context.tsx","../../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\nimport type { DateRangePickerRootSlotProps } from \"./date-range-picker.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"nimbusDateRangePicker\",\n});\n\n/**\n * Root component that provides the styling context for the DateRangePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateRangePickerRootSlot = withProvider<\n HTMLDivElement,\n DateRangePickerRootSlotProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput and trigger button.\n */\nexport const DateRangePickerGroupSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the trigger button that opens the calendar popover.\n */\nexport const DateRangePickerTriggerSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DateRangePickerPopoverSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DateRangePickerCalendarSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DateRangePickerCalendarHeaderSlot = withContext<\n HTMLElement,\n HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DateRangePickerCalendarGridSlot = withContext<\n HTMLTableElement,\n HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DateRangePickerCalendarCellSlot = withContext<\n HTMLTableCellElement,\n HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","/**\n * Pre-compiled en messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Clear input value`,\n clearSelection: `Clear date range`,\n endTime: `End time`,\n endTimeHour: `End time (hour)`,\n endTimeHourMinute: `End time (hour and minute)`,\n endTimeHourMinuteSecond: `End time (hour, minute, and second)`,\n endTimeLabel: `End time`,\n openCalendar: `Open calendar`,\n startTime: `Start time`,\n startTimeHour: `Start time (hour)`,\n startTimeHourMinute: `Start time (hour and minute)`,\n startTimeHourMinuteSecond: `Start time (hour, minute, and second)`,\n startTimeLabel: `Start time`,\n};\n","/**\n * Pre-compiled de messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Eingabewert löschen`,\n clearSelection: `Datumsbereich löschen`,\n endTime: `Endzeit`,\n endTimeHour: `Endzeit (Stunde)`,\n endTimeHourMinute: `Endzeit (Stunde und Minute)`,\n endTimeHourMinuteSecond: `Endzeit (Stunde, Minute und Sekunde)`,\n endTimeLabel: `Endzeit`,\n openCalendar: `Kalender öffnen`,\n startTime: `Startzeit`,\n startTimeHour: `Startzeit (Stunde)`,\n startTimeHourMinute: `Startzeit (Stunde und Minute)`,\n startTimeHourMinuteSecond: `Startzeit (Stunde, Minute und Sekunde)`,\n startTimeLabel: `Startzeit`,\n};\n","/**\n * Pre-compiled es messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Eliminar valor de entrada`,\n clearSelection: `Borrar rango de fechas`,\n endTime: `Finalizar tiempo`,\n endTimeHour: `Finalizar tiempo (hora)`,\n endTimeHourMinute: `Finalizar tiempo (hora y minuto)`,\n endTimeHourMinuteSecond: `Finalizar tiempo (hora, minuto, segundo)`,\n endTimeLabel: `Finalizar tiempo`,\n openCalendar: `Abrir calendario`,\n startTime: `Iniciar tiempo`,\n startTimeHour: `Iniciar tiempo (hora)`,\n startTimeHourMinute: `Iniciar tiempo (hora y minuto)`,\n startTimeHourMinuteSecond: `Iniciar tiempo (hora, minuto y segundo)`,\n startTimeLabel: `Iniciar tiempo`,\n};\n","/**\n * Pre-compiled fr-FR messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Effacer la valeur saisie`,\n clearSelection: `Effacer la plage de dates`,\n endTime: `Heure de fin`,\n endTimeHour: `Heure de fin (heure)`,\n endTimeHourMinute: `Heure de fin (heure et minute)`,\n endTimeHourMinuteSecond: ` Heure de fin (heure, minute et seconde)`,\n endTimeLabel: `Heure de fin`,\n openCalendar: `Ouvrir le calendrier`,\n startTime: `Heure de début`,\n startTimeHour: `Heure de début (heure)`,\n startTimeHourMinute: `Heure de début (heure et minute)`,\n startTimeHourMinuteSecond: `Heure de début (heure, minute et seconde)`,\n startTimeLabel: `Heure de début`,\n};\n","/**\n * Pre-compiled pt-BR messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Limpar valores inseridos`,\n clearSelection: `Limpar intervalo de datas`,\n endTime: `Hora de término`,\n endTimeHour: `Hora de término (hora)`,\n endTimeHourMinute: `Hora de término (hora e minutos)`,\n endTimeHourMinuteSecond: `Hora de término (hora, minutos e segundos)`,\n endTimeLabel: `Hora de término`,\n openCalendar: `Abrir agenda`,\n startTime: `Hora de início`,\n startTimeHour: `Hora de início (hora)`,\n startTimeHourMinute: `Hora de início (hora e minutos)`,\n startTimeHourMinuteSecond: `Hora de início (hora, minutos e segundos)`,\n startTimeLabel: `Hora de início`,\n};\n","/**\n * Pre-compiled localized messages for DateRangePicker component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n type LocalizedString,\n type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport dateRangePickerMessages_en from \"./intl/en\";\nimport dateRangePickerMessages_de from \"./intl/de\";\nimport dateRangePickerMessages_es from \"./intl/es\";\nimport dateRangePickerMessages_fr from \"./intl/fr-FR\";\nimport dateRangePickerMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const dateRangePickerMessagesStrings: LocalizedStrings<\n string,\n LocalizedString\n> = {\n en: normalizeMessages(dateRangePickerMessages_en),\n de: normalizeMessages(dateRangePickerMessages_de),\n es: normalizeMessages(dateRangePickerMessages_es),\n \"fr-FR\": normalizeMessages(dateRangePickerMessages_fr),\n \"pt-BR\": normalizeMessages(dateRangePickerMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for DateRangePicker component\n */\nexport type DateRangePickerMessageKey =\n | \"clearInput\"\n | \"clearSelection\"\n | \"endTime\"\n | \"endTimeHour\"\n | \"endTimeHourMinute\"\n | \"endTimeHourMinuteSecond\"\n | \"endTimeLabel\"\n | \"openCalendar\"\n | \"startTime\"\n | \"startTimeHour\"\n | \"startTimeHourMinute\"\n | \"startTimeHourMinuteSecond\"\n | \"startTimeLabel\";\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DateRangePickerStateContext } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { dateRangePickerMessagesStrings } from \"../date-range-picker.messages\";\nimport type { DateRangePickerTimeInputProps } from \"../date-range-picker.types\";\n\nexport const DateRangePickerTimeInput = ({\n hideTimeZone,\n hourCycle,\n}: DateRangePickerTimeInputProps) => {\n const msg = useLocalizedStringFormatter(dateRangePickerMessagesStrings);\n const dateRangePickerState = useContext(DateRangePickerStateContext);\n const { granularity, value } = dateRangePickerState!;\n const timeInputRef = useRef<HTMLDivElement>(null);\n const previousValueRef = useRef(value);\n\n // Focus the time input when date range changes (user selects dates from calendar)\n useEffect(() => {\n let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n // Check if date range changed by comparing start and end dates\n const hasValueChanged =\n (value?.start &&\n previousValueRef.current?.start?.compare(value.start) !== 0) ||\n (value?.end && previousValueRef.current?.end?.compare(value.end) !== 0);\n\n if (hasValueChanged) {\n // Only auto-focus if no time input segment currently has focus\n // This prevents stealing focus during user interaction with time segments\n const container = timeInputRef.current;\n const activeElement = document.activeElement;\n const hasTimeSegmentFocus =\n container?.contains(activeElement) &&\n activeElement?.getAttribute(\"role\") === \"spinbutton\";\n\n if (!hasTimeSegmentFocus) {\n // Small delay to ensure the DOM is ready\n timeoutId = setTimeout(() => {\n // Find the first focusable segment within the time input container\n if (container) {\n const firstSegment = container.querySelector(\n '[role=\"spinbutton\"]'\n ) as HTMLElement;\n\n if (firstSegment) {\n firstSegment.focus();\n }\n }\n }, 50);\n }\n }\n\n previousValueRef.current = value;\n\n // Cleanup timeout on effect re-run or unmount to prevent memory leaks\n return () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n };\n }, [value]);\n\n // do not show up to the party if you're not invited\n if (granularity === \"day\") {\n return null;\n }\n\n return (\n <Flex\n ref={timeInputRef}\n borderTop=\"solid-25\"\n borderColor=\"neutral.3\"\n py=\"300\"\n px=\"400\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gap=\"200\"\n >\n {/* Start DateInput with separate label */}\n <Flex alignItems=\"center\" gap=\"200\">\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n {msg.format(\"startTimeLabel\")}\n </Text>\n <TimeInput\n slot=\"startTimeInput\"\n variant=\"ghost\"\n size=\"sm\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Flex>\n\n {/* End DateInput with separate label */}\n <Flex alignItems=\"center\" gap=\"200\">\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n {msg.format(\"endTimeLabel\")}\n </Text>\n <TimeInput\n slot=\"endTimeInput\"\n variant=\"ghost\"\n size=\"sm\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Flex>\n </Flex>\n );\n};\n","import { useContext, type ReactNode } from \"react\";\nimport {\n Provider,\n ButtonContext,\n DateRangePickerStateContext,\n TimeFieldContext,\n useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { dateRangePickerMessagesStrings } from \"../date-range-picker.messages\";\n\nexport const DateRangePickerCustomContext = ({\n children,\n}: {\n children: ReactNode;\n}) => {\n const msg = useLocalizedStringFormatter(dateRangePickerMessagesStrings);\n const buttonContext = useSlottedContext(ButtonContext) || {};\n const dateRangePickerState = useContext(DateRangePickerStateContext);\n\n // Check if all 6 segments (start: day, month, year; end: day, month, year) have values\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const hasCompleteRangeDate = (date: any) =>\n date?.day && date?.month && date?.year;\n\n const incompleteValue =\n !dateRangePickerState?.value ||\n !hasCompleteRangeDate(dateRangePickerState.value.start) ||\n !hasCompleteRangeDate(dateRangePickerState.value.end);\n\n const { granularity } = dateRangePickerState!;\n\n // Extract time values from start and end dates separately\n const startTimeValue =\n dateRangePickerState?.value?.start &&\n \"hour\" in dateRangePickerState.value.start\n ? dateRangePickerState.value.start\n : null;\n const endTimeValue =\n dateRangePickerState?.value?.end && \"hour\" in dateRangePickerState.value.end\n ? dateRangePickerState.value.end\n : null;\n\n // Try to get disabled state from the button context\n const isDateRangePickerDisabled = buttonContext?.isDisabled;\n\n // Generate default aria-label based on granularity if not provided\n const getDefaultTimeInputAriaLabel = (type: \"start\" | \"end\") => {\n const messageKey = type === \"start\" ? \"start\" : \"end\";\n switch (granularity) {\n case \"hour\":\n return msg.format(\n `${messageKey}TimeHour` as \"startTimeHour\" | \"endTimeHour\"\n );\n case \"minute\":\n return msg.format(\n `${messageKey}TimeHourMinute` as\n | \"startTimeHourMinute\"\n | \"endTimeHourMinute\"\n );\n case \"second\":\n return msg.format(\n `${messageKey}TimeHourMinuteSecond` as\n | \"startTimeHourMinuteSecond\"\n | \"endTimeHourMinuteSecond\"\n );\n default:\n return msg.format(`${messageKey}Time` as \"startTime\" | \"endTime\");\n }\n };\n\n /**\n * Button slots\n * ================================\n */\n const buttonSlots = {\n /** toggles the calendar popover */\n calendarToggle: {\n ...buttonContext,\n onPress: (event: PressEvent) => {\n // Ensure any active input (e.g., date picker segment) loses focus\n // because blurring the input will close the popover if it's open (or was just opened)\n const activeElement = document?.activeElement as HTMLElement | null;\n\n if (activeElement) {\n activeElement.blur();\n }\n\n buttonContext.onPress?.(event);\n },\n },\n /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n clear: {\n // Clear both start and end values\n onPress: () => dateRangePickerState?.setValue(null),\n \"aria-label\": msg.format(\"clearInput\"),\n isDisabled: isDateRangePickerDisabled,\n // Hide the button when there's no value\n style: incompleteValue ? { display: \"none\" } : undefined,\n \"aria-hidden\": incompleteValue ? true : undefined,\n },\n };\n\n /**\n * TimeInput slots\n * ================================\n */\n\n // Separate time input slots for start and end times\n const timeInputSlots = {\n startTimeInput: {\n value: startTimeValue,\n onChange: (value: TimeValue | null) => {\n if (value !== null && dateRangePickerState?.value?.start) {\n // Update the start date with the new time\n const currentValue = dateRangePickerState.value;\n const startDate = currentValue.start;\n const endDate = currentValue.end;\n if (startDate && endDate) {\n const newStartDate = startDate.set({\n hour: value.hour,\n minute: value.minute || 0,\n second: value.second || 0,\n millisecond: value.millisecond || 0,\n });\n\n dateRangePickerState.setValue({\n start: newStartDate,\n end: endDate,\n });\n }\n }\n },\n granularity: granularity === \"day\" ? undefined : granularity,\n \"aria-label\": getDefaultTimeInputAriaLabel(\"start\"),\n },\n endTimeInput: {\n value: endTimeValue,\n onChange: (value: TimeValue | null) => {\n if (value !== null && dateRangePickerState?.value?.end) {\n // Update the end date with the new time\n const currentValue = dateRangePickerState.value;\n const startDate = currentValue.start;\n const endDate = currentValue.end;\n if (startDate && endDate) {\n const newEndDate = endDate.set({\n hour: value.hour,\n minute: value.minute || 0,\n second: value.second || 0,\n millisecond: value.millisecond || 0,\n });\n\n dateRangePickerState.setValue({\n start: startDate,\n end: newEndDate,\n });\n }\n }\n },\n granularity: granularity === \"day\" ? undefined : granularity,\n \"aria-label\": getDefaultTimeInputAriaLabel(\"end\"),\n },\n };\n\n return (\n <Provider\n values={[\n [\n ButtonContext,\n {\n slots: buttonSlots,\n },\n ],\n [TimeFieldContext, { slots: timeInputSlots }],\n ]}\n >\n {children}\n </Provider>\n );\n};\n","import {\n DateRangePickerRootSlot,\n DateRangePickerGroupSlot,\n DateRangePickerTriggerSlot,\n DateRangePickerPopoverSlot,\n DateRangePickerCalendarSlot,\n} from \"./date-range-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n DateRangePicker as ReactAriaDateRangePicker,\n Group,\n Popover,\n Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport { dateRangePickerSlotRecipe } from \"./date-range-picker.recipe\";\nimport type { DateRangePickerProps } from \"./date-range-picker.types\";\nimport { extractStyleProps } from \"@/utils\";\nimport { DateInput, RangeCalendar, IconButton, Text } from \"@/components\";\nimport { DateRangePickerTimeInput } from \"./components/date-range-picker.time-input\";\nimport { DateRangePickerCustomContext } from \"./components/date-range-picker.custom-context\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { dateRangePickerMessagesStrings } from \"./date-range-picker.messages\";\n\n/**\n * DateRangePicker\n * ============================================================\n * Combines a DateInput with a RangeCalendar popover for date range selection.\n * Users can either type a date range directly or select from the calendar.\n *\n * @supportsStyleProps\n */\nexport const DateRangePicker = (props: DateRangePickerProps) => {\n const msg = useLocalizedStringFormatter(dateRangePickerMessagesStrings);\n\n // Forward hideTimeZone and hourCycle to child components (footer time inputs)\n const { granularity = \"day\", hideTimeZone, hourCycle } = props;\n const recipe = useSlotRecipe({ recipe: dateRangePickerSlotRecipe });\n const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n\n const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n // Extract size and variant from recipe props to pass to DateInputs\n const { size = \"md\" } = recipeProps;\n\n // the size of the buttons overlaying the input\n const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n // When granularity is \"day\", use the prop value (defaults to true if not provided)\n // For other granularities (time-based), force to false so users can set both date and time\n const shouldCloseOnSelect =\n granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n return (\n <DateRangePickerRootSlot {...recipeProps} {...styleProps} asChild>\n <ReactAriaDateRangePicker\n {...otherProps}\n shouldCloseOnSelect={shouldCloseOnSelect}\n >\n <DateRangePickerCustomContext>\n <DateRangePickerGroupSlot asChild>\n <Group>\n <DateInput\n slot=\"start\"\n size={props.size}\n variant=\"plain\"\n width=\"auto\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n <Text\n as=\"span\"\n px=\"150\"\n color=\"neutral.11\"\n userSelect=\"none\"\n aria-hidden=\"true\"\n slot={null}\n >\n –\n </Text>\n <DateInput\n slot=\"end\"\n size={props.size}\n variant=\"plain\"\n width=\"auto\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n <DateRangePickerTriggerSlot>\n <IconButton\n variant=\"ghost\"\n size={overlayButtonSize}\n slot=\"clear\"\n aria-label={msg.format(\"clearSelection\")}\n >\n <Close />\n </IconButton>\n <IconButton\n variant=\"ghost\"\n size={overlayButtonSize}\n slot=\"calendarToggle\"\n aria-label={msg.format(\"openCalendar\")}\n >\n <CalendarMonth />\n </IconButton>\n </DateRangePickerTriggerSlot>\n </Group>\n </DateRangePickerGroupSlot>\n <DateRangePickerPopoverSlot asChild>\n <Popover placement=\"bottom end\">\n <Dialog>\n <DateRangePickerCalendarSlot>\n <RangeCalendar />\n </DateRangePickerCalendarSlot>\n <DateRangePickerTimeInput\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Dialog>\n </Popover>\n </DateRangePickerPopoverSlot>\n </DateRangePickerCustomContext>\n </ReactAriaDateRangePicker>\n </DateRangePickerRootSlot>\n );\n};\n\nDateRangePicker.displayName = \"DateRangePicker\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","DateRangePickerRootSlot","DateRangePickerGroupSlot","DateRangePickerTriggerSlot","DateRangePickerPopoverSlot","DateRangePickerCalendarSlot","dateRangePickerMessages_en","dateRangePickerMessages_de","dateRangePickerMessages_es","dateRangePickerMessages_fr","dateRangePickerMessages_pt","dateRangePickerMessagesStrings","normalizeMessages","DateRangePickerTimeInput","hideTimeZone","hourCycle","msg","useLocalizedStringFormatter","dateRangePickerState","useContext","DateRangePickerStateContext","granularity","value","timeInputRef","useRef","previousValueRef","useEffect","timeoutId","container","activeElement","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DateRangePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","hasCompleteRangeDate","date","incompleteValue","startTimeValue","endTimeValue","isDateRangePickerDisabled","getDefaultTimeInputAriaLabel","type","messageKey","buttonSlots","event","timeInputSlots","currentValue","startDate","endDate","newStartDate","newEndDate","Provider","TimeFieldContext","DateRangePicker","props","recipe","useSlotRecipe","dateRangePickerSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","size","overlayButtonSize","shouldCloseOnSelect","ReactAriaDateRangePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","RangeCalendar"],"mappings":"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"}

package/dist/chunks/date-range-picker-DcKkP7Xj.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";const e=require("react/jsx-runtime"),k=require("@chakra-ui/react/styled-system"),P=require("@commercetools/nimbus-icons"),$=require("./DatePicker-vAsIj9qq.cjs.js"),R=require("./Dialog-3tr7frni.cjs.js"),E=require("./Group-JMIX_C6z.cjs.js"),L=require("./index-CiXhDFpN.cjs.js"),F=require("./extract-style-props-DiP1lZl_.cjs.js"),T=require("react"),l=require("./normalize-messages-Dogs8lYA.cjs.js"),v=require("./flex-DwGL6TCj.cjs.js"),M=require("./text-D73rGEjF.cjs.js"),C=require("./time-input-CrVLaoA0.cjs.js"),I=require("./Button-B00E728H.cjs.js"),y=require("./utils-CJJvg8rY.cjs.js"),V=require("./DateField-DHnAVDqa.cjs.js"),w=require("./range-calendar-C1irWg1b.cjs.js"),j=require("./date-input-DD0uZdGq.cjs.js"),D=require("./icon-button-BwxwVPZQ.cjs.js"),{withProvider:B,withContext:b}=k.createSlotRecipeContext({key:"nimbusDateRangePicker"}),W=B("div","root"),_=b("div","group"),A=b("div","trigger"),O=b("div","popover"),G=b("div","calendar"),K={clearInput:"Clear input value",clearSelection:"Clear date range",endTime:"End time",endTimeHour:"End time (hour)",endTimeHourMinute:"End time (hour and minute)",endTimeHourMinuteSecond:"End time (hour, minute, and second)",endTimeLabel:"End time",openCalendar:"Open calendar",startTime:"Start time",startTimeHour:"Start time (hour)",startTimeHourMinute:"Start time (hour and minute)",startTimeHourMinuteSecond:"Start time (hour, minute, and second)",startTimeLabel:"Start time"},N={clearInput:"Eingabewert löschen",clearSelection:"Datumsbereich löschen",endTime:"Endzeit",endTimeHour:"Endzeit (Stunde)",endTimeHourMinute:"Endzeit (Stunde und Minute)",endTimeHourMinuteSecond:"Endzeit (Stunde, Minute und Sekunde)",endTimeLabel:"Endzeit",openCalendar:"Kalender öffnen",startTime:"Startzeit",startTimeHour:"Startzeit (Stunde)",startTimeHourMinute:"Startzeit (Stunde und Minute)",startTimeHourMinuteSecond:"Startzeit (Stunde, Minute und Sekunde)",startTimeLabel:"Startzeit"},J={clearInput:"Eliminar valor de entrada",clearSelection:"Borrar rango de fechas",endTime:"Finalizar tiempo",endTimeHour:"Finalizar tiempo (hora)",endTimeHourMinute:"Finalizar tiempo (hora y minuto)",endTimeHourMinuteSecond:"Finalizar tiempo (hora, minuto, segundo)",endTimeLabel:"Finalizar tiempo",openCalendar:"Abrir calendario",startTime:"Iniciar tiempo",startTimeHour:"Iniciar tiempo (hora)",startTimeHourMinute:"Iniciar tiempo (hora y minuto)",startTimeHourMinuteSecond:"Iniciar tiempo (hora, minuto y segundo)",startTimeLabel:"Iniciar tiempo"},Q={clearInput:"Effacer la valeur saisie",clearSelection:"Effacer la plage de dates",endTime:"Heure de fin",endTimeHour:"Heure de fin (heure)",endTimeHourMinute:"Heure de fin (heure et minute)",endTimeHourMinuteSecond:" Heure de fin (heure, minute et seconde)",endTimeLabel:"Heure de fin",openCalendar:"Ouvrir le calendrier",startTime:"Heure de début",startTimeHour:"Heure de début (heure)",startTimeHourMinute:"Heure de début (heure et minute)",startTimeHourMinuteSecond:"Heure de début (heure, minute et seconde)",startTimeLabel:"Heure de début"},U={clearInput:"Limpar valores inseridos",clearSelection:"Limpar intervalo de datas",endTime:"Hora de término",endTimeHour:"Hora de término (hora)",endTimeHourMinute:"Hora de término (hora e minutos)",endTimeHourMinuteSecond:"Hora de término (hora, minutos e segundos)",endTimeLabel:"Hora de término",openCalendar:"Abrir agenda",startTime:"Hora de início",startTimeHour:"Hora de início (hora)",startTimeHourMinute:"Hora de início (hora e minutos)",startTimeHourMinuteSecond:"Hora de início (hora, minutos e segundos)",startTimeLabel:"Hora de início"},z={en:l.normalizeMessages(K),de:l.normalizeMessages(N),es:l.normalizeMessages(J),"fr-FR":l.normalizeMessages(Q),"pt-BR":l.normalizeMessages(U)},X=({hideTimeZone:s,hourCycle:i})=>{const u=l.useLocalizedStringFormatter(z),t=T.useContext($.$e539d00f123fdfd8$export$80d7ae1f804790be),{granularity:d,value:a}=t,o=T.useRef(null),m=T.useRef(a);return T.useEffect(()=>{let g;if(a?.start&&m.current?.start?.compare(a.start)!==0\|\|a?.end&&m.current?.end?.compare(a.end)!==0){const c=o.current,f=document.activeElement;c?.contains(f)&&f?.getAttribute("role")==="spinbutton"\|\|(g=setTimeout(()=>{if(c){const n=c.querySelector('[role="spinbutton"]');n&&n.focus()}},50))}return m.current=a,()=>{g&&clearTimeout(g)}},[a]),d==="day"?null:e.jsxs(v.Flex,{ref:o,borderTop:"solid-25",borderColor:"neutral.3",py:"300",px:"400",alignItems:"center",justifyContent:"center",gap:"200",children:[e.jsxs(v.Flex,{alignItems:"center",gap:"200",children:[e.jsx(M.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:u.format("startTimeLabel")}),e.jsx(C.TimeInput,{slot:"startTimeInput",variant:"ghost",size:"sm",hideTimeZone:s,hourCycle:i})]}),e.jsxs(v.Flex,{alignItems:"center",gap:"200",children:[e.jsx(M.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:u.format("endTimeLabel")}),e.jsx(C.TimeInput,{slot:"endTimeInput",variant:"ghost",size:"sm",hideTimeZone:s,hourCycle:i})]})]})},Y=({children:s})=>{const i=l.useLocalizedStringFormatter(z),u=y.$7230ffa83bc0c2cf$export$fabf2dc03a41866e(I.$7705c033048f6da7$export$24d547caef80ccd1)\|\|{},t=T.useContext($.$e539d00f123fdfd8$export$80d7ae1f804790be),d=n=>n?.day&&n?.month&&n?.year,a=!t?.value\|\|!d(t.value.start)\|\|!d(t.value.end),{granularity:o}=t,m=t?.value?.start&&"hour"in t.value.start?t.value.start:null,g=t?.value?.end&&"hour"in t.value.end?t.value.end:null,S=u?.isDisabled,c=n=>{const r=n==="start"?"start":"end";switch(o){case"hour":return i.format(`${r}TimeHour`);case"minute":return i.format(`${r}TimeHourMinute`);case"second":return i.format(`${r}TimeHourMinuteSecond`);default:return i.format(`${r}Time`)}},f={calendarToggle:{...u,onPress:n=>{const r=document?.activeElement;r&&r.blur(),u.onPress?.(n)}},clear:{onPress:()=>t?.setValue(null),"aria-label":i.format("clearInput"),isDisabled:S,style:a?{display:"none"}:void 0,"aria-hidden":a?!0:void 0}},x={startTimeInput:{value:m,onChange:n=>{if(n!==null&&t?.value?.start){const r=t.value,h=r.start,p=r.end;if(h&&p){const H=h.set({hour:n.hour,minute:n.minute\|\|0,second:n.second\|\|0,millisecond:n.millisecond\|\|0});t.setValue({start:H,end:p})}}},granularity:o==="day"?void 0:o,"aria-label":c("start")},endTimeInput:{value:g,onChange:n=>{if(n!==null&&t?.value?.end){const r=t.value,h=r.start,p=r.end;if(h&&p){const H=p.set({hour:n.hour,minute:n.minute\|\|0,second:n.second\|\|0,millisecond:n.millisecond\|\|0});t.setValue({start:h,end:H})}}},granularity:o==="day"?void 0:o,"aria-label":c("end")}};return e.jsx(y.$7230ffa83bc0c2cf$export$2881499e37b75b9a,{values:[[I.$7705c033048f6da7$export$24d547caef80ccd1,{slots:f}],[V.$5400c097f4765e59$export$8e17ddc448e87c1e,{slots:x}]],children:s})},q=s=>{const i=l.useLocalizedStringFormatter(z),{granularity:u="day",hideTimeZone:t,hourCycle:d}=s,a=k.useSlotRecipe({recipe:L.dateRangePickerSlotRecipe}),[o,m]=a.splitVariantProps(s),[g,S]=F.extractStyleProps(m),{size:c="md"}=o,f=c==="md"?"xs":"2xs",x=u==="day"?s.shouldCloseOnSelect:!1;return e.jsx(W,{...o,...g,asChild:!0,children:e.jsx($.$e539d00f123fdfd8$export$17334619f3ac2224,{...S,shouldCloseOnSelect:x,children:e.jsxs(Y,{children:[e.jsx(_,{asChild:!0,children:e.jsxs(E.$3a442827418ebe87$export$eb2fcfdbd7ba97d4,{children:[e.jsx(j.DateInput,{slot:"start",size:s.size,variant:"plain",width:"auto",hideTimeZone:t,hourCycle:d}),e.jsx(M.Text,{as:"span",px:"150",color:"neutral.11",userSelect:"none","aria-hidden":"true",slot:null,children:"–"}),e.jsx(j.DateInput,{slot:"end",size:s.size,variant:"plain",width:"auto",hideTimeZone:t,hourCycle:d}),e.jsxs(A,{children:[e.jsx(D.IconButton,{variant:"ghost",size:f,slot:"clear","aria-label":i.format("clearSelection"),children:e.jsx(P.Close,{})}),e.jsx(D.IconButton,{variant:"ghost",size:f,slot:"calendarToggle","aria-label":i.format("openCalendar"),children:e.jsx(P.CalendarMonth,{})})]})]})}),e.jsx(O,{asChild:!0,children:e.jsx(R.$542a13ca2fa5b484$export$5b6b19405a83ff9d,{placement:"bottom end",children:e.jsxs(R.$f2ff30fde7b014be$export$3ddf2d174ce01153,{children:[e.jsx(G,{children:e.jsx(w.RangeCalendar,{})}),e.jsx(X,{hideTimeZone:t,hourCycle:d})]})})})]})})})};q.displayName="DateRangePicker";exports.DateRangePicker=q;
2	+ //# sourceMappingURL=date-range-picker-DcKkP7Xj.cjs.js.map

package/dist/chunks/date-range-picker-DcKkP7Xj.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-range-picker-DcKkP7Xj.cjs.js","sources":["../../src/components/date-range-picker/date-range-picker.slots.tsx","../../src/components/date-range-picker/intl/en.ts","../../src/components/date-range-picker/intl/de.ts","../../src/components/date-range-picker/intl/es.ts","../../src/components/date-range-picker/intl/fr-FR.ts","../../src/components/date-range-picker/intl/pt-BR.ts","../../src/components/date-range-picker/date-range-picker.messages.ts","../../src/components/date-range-picker/components/date-range-picker.time-input.tsx","../../src/components/date-range-picker/components/date-range-picker.custom-context.tsx","../../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\nimport type { DateRangePickerRootSlotProps } from \"./date-range-picker.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"nimbusDateRangePicker\",\n});\n\n/**\n * Root component that provides the styling context for the DateRangePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateRangePickerRootSlot = withProvider<\n HTMLDivElement,\n DateRangePickerRootSlotProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput and trigger button.\n */\nexport const DateRangePickerGroupSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the trigger button that opens the calendar popover.\n */\nexport const DateRangePickerTriggerSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DateRangePickerPopoverSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DateRangePickerCalendarSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DateRangePickerCalendarHeaderSlot = withContext<\n HTMLElement,\n HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DateRangePickerCalendarGridSlot = withContext<\n HTMLTableElement,\n HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DateRangePickerCalendarCellSlot = withContext<\n HTMLTableCellElement,\n HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","/**\n * Pre-compiled en messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Clear input value`,\n clearSelection: `Clear date range`,\n endTime: `End time`,\n endTimeHour: `End time (hour)`,\n endTimeHourMinute: `End time (hour and minute)`,\n endTimeHourMinuteSecond: `End time (hour, minute, and second)`,\n endTimeLabel: `End time`,\n openCalendar: `Open calendar`,\n startTime: `Start time`,\n startTimeHour: `Start time (hour)`,\n startTimeHourMinute: `Start time (hour and minute)`,\n startTimeHourMinuteSecond: `Start time (hour, minute, and second)`,\n startTimeLabel: `Start time`,\n};\n","/**\n * Pre-compiled de messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Eingabewert löschen`,\n clearSelection: `Datumsbereich löschen`,\n endTime: `Endzeit`,\n endTimeHour: `Endzeit (Stunde)`,\n endTimeHourMinute: `Endzeit (Stunde und Minute)`,\n endTimeHourMinuteSecond: `Endzeit (Stunde, Minute und Sekunde)`,\n endTimeLabel: `Endzeit`,\n openCalendar: `Kalender öffnen`,\n startTime: `Startzeit`,\n startTimeHour: `Startzeit (Stunde)`,\n startTimeHourMinute: `Startzeit (Stunde und Minute)`,\n startTimeHourMinuteSecond: `Startzeit (Stunde, Minute und Sekunde)`,\n startTimeLabel: `Startzeit`,\n};\n","/**\n * Pre-compiled es messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Eliminar valor de entrada`,\n clearSelection: `Borrar rango de fechas`,\n endTime: `Finalizar tiempo`,\n endTimeHour: `Finalizar tiempo (hora)`,\n endTimeHourMinute: `Finalizar tiempo (hora y minuto)`,\n endTimeHourMinuteSecond: `Finalizar tiempo (hora, minuto, segundo)`,\n endTimeLabel: `Finalizar tiempo`,\n openCalendar: `Abrir calendario`,\n startTime: `Iniciar tiempo`,\n startTimeHour: `Iniciar tiempo (hora)`,\n startTimeHourMinute: `Iniciar tiempo (hora y minuto)`,\n startTimeHourMinuteSecond: `Iniciar tiempo (hora, minuto y segundo)`,\n startTimeLabel: `Iniciar tiempo`,\n};\n","/**\n * Pre-compiled fr-FR messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Effacer la valeur saisie`,\n clearSelection: `Effacer la plage de dates`,\n endTime: `Heure de fin`,\n endTimeHour: `Heure de fin (heure)`,\n endTimeHourMinute: `Heure de fin (heure et minute)`,\n endTimeHourMinuteSecond: ` Heure de fin (heure, minute et seconde)`,\n endTimeLabel: `Heure de fin`,\n openCalendar: `Ouvrir le calendrier`,\n startTime: `Heure de début`,\n startTimeHour: `Heure de début (heure)`,\n startTimeHourMinute: `Heure de début (heure et minute)`,\n startTimeHourMinuteSecond: `Heure de début (heure, minute et seconde)`,\n startTimeLabel: `Heure de début`,\n};\n","/**\n * Pre-compiled pt-BR messages for DateRangePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n clearInput: `Limpar valores inseridos`,\n clearSelection: `Limpar intervalo de datas`,\n endTime: `Hora de término`,\n endTimeHour: `Hora de término (hora)`,\n endTimeHourMinute: `Hora de término (hora e minutos)`,\n endTimeHourMinuteSecond: `Hora de término (hora, minutos e segundos)`,\n endTimeLabel: `Hora de término`,\n openCalendar: `Abrir agenda`,\n startTime: `Hora de início`,\n startTimeHour: `Hora de início (hora)`,\n startTimeHourMinute: `Hora de início (hora e minutos)`,\n startTimeHourMinuteSecond: `Hora de início (hora, minutos e segundos)`,\n startTimeLabel: `Hora de início`,\n};\n","/**\n * Pre-compiled localized messages for DateRangePicker component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n type LocalizedString,\n type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport dateRangePickerMessages_en from \"./intl/en\";\nimport dateRangePickerMessages_de from \"./intl/de\";\nimport dateRangePickerMessages_es from \"./intl/es\";\nimport dateRangePickerMessages_fr from \"./intl/fr-FR\";\nimport dateRangePickerMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const dateRangePickerMessagesStrings: LocalizedStrings<\n string,\n LocalizedString\n> = {\n en: normalizeMessages(dateRangePickerMessages_en),\n de: normalizeMessages(dateRangePickerMessages_de),\n es: normalizeMessages(dateRangePickerMessages_es),\n \"fr-FR\": normalizeMessages(dateRangePickerMessages_fr),\n \"pt-BR\": normalizeMessages(dateRangePickerMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for DateRangePicker component\n */\nexport type DateRangePickerMessageKey =\n | \"clearInput\"\n | \"clearSelection\"\n | \"endTime\"\n | \"endTimeHour\"\n | \"endTimeHourMinute\"\n | \"endTimeHourMinuteSecond\"\n | \"endTimeLabel\"\n | \"openCalendar\"\n | \"startTime\"\n | \"startTimeHour\"\n | \"startTimeHourMinute\"\n | \"startTimeHourMinuteSecond\"\n | \"startTimeLabel\";\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DateRangePickerStateContext } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { dateRangePickerMessagesStrings } from \"../date-range-picker.messages\";\nimport type { DateRangePickerTimeInputProps } from \"../date-range-picker.types\";\n\nexport const DateRangePickerTimeInput = ({\n hideTimeZone,\n hourCycle,\n}: DateRangePickerTimeInputProps) => {\n const msg = useLocalizedStringFormatter(dateRangePickerMessagesStrings);\n const dateRangePickerState = useContext(DateRangePickerStateContext);\n const { granularity, value } = dateRangePickerState!;\n const timeInputRef = useRef<HTMLDivElement>(null);\n const previousValueRef = useRef(value);\n\n // Focus the time input when date range changes (user selects dates from calendar)\n useEffect(() => {\n let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n // Check if date range changed by comparing start and end dates\n const hasValueChanged =\n (value?.start &&\n previousValueRef.current?.start?.compare(value.start) !== 0) ||\n (value?.end && previousValueRef.current?.end?.compare(value.end) !== 0);\n\n if (hasValueChanged) {\n // Only auto-focus if no time input segment currently has focus\n // This prevents stealing focus during user interaction with time segments\n const container = timeInputRef.current;\n const activeElement = document.activeElement;\n const hasTimeSegmentFocus =\n container?.contains(activeElement) &&\n activeElement?.getAttribute(\"role\") === \"spinbutton\";\n\n if (!hasTimeSegmentFocus) {\n // Small delay to ensure the DOM is ready\n timeoutId = setTimeout(() => {\n // Find the first focusable segment within the time input container\n if (container) {\n const firstSegment = container.querySelector(\n '[role=\"spinbutton\"]'\n ) as HTMLElement;\n\n if (firstSegment) {\n firstSegment.focus();\n }\n }\n }, 50);\n }\n }\n\n previousValueRef.current = value;\n\n // Cleanup timeout on effect re-run or unmount to prevent memory leaks\n return () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n };\n }, [value]);\n\n // do not show up to the party if you're not invited\n if (granularity === \"day\") {\n return null;\n }\n\n return (\n <Flex\n ref={timeInputRef}\n borderTop=\"solid-25\"\n borderColor=\"neutral.3\"\n py=\"300\"\n px=\"400\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gap=\"200\"\n >\n {/* Start DateInput with separate label */}\n <Flex alignItems=\"center\" gap=\"200\">\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n {msg.format(\"startTimeLabel\")}\n </Text>\n <TimeInput\n slot=\"startTimeInput\"\n variant=\"ghost\"\n size=\"sm\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Flex>\n\n {/* End DateInput with separate label */}\n <Flex alignItems=\"center\" gap=\"200\">\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n {msg.format(\"endTimeLabel\")}\n </Text>\n <TimeInput\n slot=\"endTimeInput\"\n variant=\"ghost\"\n size=\"sm\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Flex>\n </Flex>\n );\n};\n","import { useContext, type ReactNode } from \"react\";\nimport {\n Provider,\n ButtonContext,\n DateRangePickerStateContext,\n TimeFieldContext,\n useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { dateRangePickerMessagesStrings } from \"../date-range-picker.messages\";\n\nexport const DateRangePickerCustomContext = ({\n children,\n}: {\n children: ReactNode;\n}) => {\n const msg = useLocalizedStringFormatter(dateRangePickerMessagesStrings);\n const buttonContext = useSlottedContext(ButtonContext) || {};\n const dateRangePickerState = useContext(DateRangePickerStateContext);\n\n // Check if all 6 segments (start: day, month, year; end: day, month, year) have values\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const hasCompleteRangeDate = (date: any) =>\n date?.day && date?.month && date?.year;\n\n const incompleteValue =\n !dateRangePickerState?.value ||\n !hasCompleteRangeDate(dateRangePickerState.value.start) ||\n !hasCompleteRangeDate(dateRangePickerState.value.end);\n\n const { granularity } = dateRangePickerState!;\n\n // Extract time values from start and end dates separately\n const startTimeValue =\n dateRangePickerState?.value?.start &&\n \"hour\" in dateRangePickerState.value.start\n ? dateRangePickerState.value.start\n : null;\n const endTimeValue =\n dateRangePickerState?.value?.end && \"hour\" in dateRangePickerState.value.end\n ? dateRangePickerState.value.end\n : null;\n\n // Try to get disabled state from the button context\n const isDateRangePickerDisabled = buttonContext?.isDisabled;\n\n // Generate default aria-label based on granularity if not provided\n const getDefaultTimeInputAriaLabel = (type: \"start\" | \"end\") => {\n const messageKey = type === \"start\" ? \"start\" : \"end\";\n switch (granularity) {\n case \"hour\":\n return msg.format(\n `${messageKey}TimeHour` as \"startTimeHour\" | \"endTimeHour\"\n );\n case \"minute\":\n return msg.format(\n `${messageKey}TimeHourMinute` as\n | \"startTimeHourMinute\"\n | \"endTimeHourMinute\"\n );\n case \"second\":\n return msg.format(\n `${messageKey}TimeHourMinuteSecond` as\n | \"startTimeHourMinuteSecond\"\n | \"endTimeHourMinuteSecond\"\n );\n default:\n return msg.format(`${messageKey}Time` as \"startTime\" | \"endTime\");\n }\n };\n\n /**\n * Button slots\n * ================================\n */\n const buttonSlots = {\n /** toggles the calendar popover */\n calendarToggle: {\n ...buttonContext,\n onPress: (event: PressEvent) => {\n // Ensure any active input (e.g., date picker segment) loses focus\n // because blurring the input will close the popover if it's open (or was just opened)\n const activeElement = document?.activeElement as HTMLElement | null;\n\n if (activeElement) {\n activeElement.blur();\n }\n\n buttonContext.onPress?.(event);\n },\n },\n /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n clear: {\n // Clear both start and end values\n onPress: () => dateRangePickerState?.setValue(null),\n \"aria-label\": msg.format(\"clearInput\"),\n isDisabled: isDateRangePickerDisabled,\n // Hide the button when there's no value\n style: incompleteValue ? { display: \"none\" } : undefined,\n \"aria-hidden\": incompleteValue ? true : undefined,\n },\n };\n\n /**\n * TimeInput slots\n * ================================\n */\n\n // Separate time input slots for start and end times\n const timeInputSlots = {\n startTimeInput: {\n value: startTimeValue,\n onChange: (value: TimeValue | null) => {\n if (value !== null && dateRangePickerState?.value?.start) {\n // Update the start date with the new time\n const currentValue = dateRangePickerState.value;\n const startDate = currentValue.start;\n const endDate = currentValue.end;\n if (startDate && endDate) {\n const newStartDate = startDate.set({\n hour: value.hour,\n minute: value.minute || 0,\n second: value.second || 0,\n millisecond: value.millisecond || 0,\n });\n\n dateRangePickerState.setValue({\n start: newStartDate,\n end: endDate,\n });\n }\n }\n },\n granularity: granularity === \"day\" ? undefined : granularity,\n \"aria-label\": getDefaultTimeInputAriaLabel(\"start\"),\n },\n endTimeInput: {\n value: endTimeValue,\n onChange: (value: TimeValue | null) => {\n if (value !== null && dateRangePickerState?.value?.end) {\n // Update the end date with the new time\n const currentValue = dateRangePickerState.value;\n const startDate = currentValue.start;\n const endDate = currentValue.end;\n if (startDate && endDate) {\n const newEndDate = endDate.set({\n hour: value.hour,\n minute: value.minute || 0,\n second: value.second || 0,\n millisecond: value.millisecond || 0,\n });\n\n dateRangePickerState.setValue({\n start: startDate,\n end: newEndDate,\n });\n }\n }\n },\n granularity: granularity === \"day\" ? undefined : granularity,\n \"aria-label\": getDefaultTimeInputAriaLabel(\"end\"),\n },\n };\n\n return (\n <Provider\n values={[\n [\n ButtonContext,\n {\n slots: buttonSlots,\n },\n ],\n [TimeFieldContext, { slots: timeInputSlots }],\n ]}\n >\n {children}\n </Provider>\n );\n};\n","import {\n DateRangePickerRootSlot,\n DateRangePickerGroupSlot,\n DateRangePickerTriggerSlot,\n DateRangePickerPopoverSlot,\n DateRangePickerCalendarSlot,\n} from \"./date-range-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n DateRangePicker as ReactAriaDateRangePicker,\n Group,\n Popover,\n Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport { dateRangePickerSlotRecipe } from \"./date-range-picker.recipe\";\nimport type { DateRangePickerProps } from \"./date-range-picker.types\";\nimport { extractStyleProps } from \"@/utils\";\nimport { DateInput, RangeCalendar, IconButton, Text } from \"@/components\";\nimport { DateRangePickerTimeInput } from \"./components/date-range-picker.time-input\";\nimport { DateRangePickerCustomContext } from \"./components/date-range-picker.custom-context\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { dateRangePickerMessagesStrings } from \"./date-range-picker.messages\";\n\n/**\n * DateRangePicker\n * ============================================================\n * Combines a DateInput with a RangeCalendar popover for date range selection.\n * Users can either type a date range directly or select from the calendar.\n *\n * @supportsStyleProps\n */\nexport const DateRangePicker = (props: DateRangePickerProps) => {\n const msg = useLocalizedStringFormatter(dateRangePickerMessagesStrings);\n\n // Forward hideTimeZone and hourCycle to child components (footer time inputs)\n const { granularity = \"day\", hideTimeZone, hourCycle } = props;\n const recipe = useSlotRecipe({ recipe: dateRangePickerSlotRecipe });\n const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n\n const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n // Extract size and variant from recipe props to pass to DateInputs\n const { size = \"md\" } = recipeProps;\n\n // the size of the buttons overlaying the input\n const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n // When granularity is \"day\", use the prop value (defaults to true if not provided)\n // For other granularities (time-based), force to false so users can set both date and time\n const shouldCloseOnSelect =\n granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n return (\n <DateRangePickerRootSlot {...recipeProps} {...styleProps} asChild>\n <ReactAriaDateRangePicker\n {...otherProps}\n shouldCloseOnSelect={shouldCloseOnSelect}\n >\n <DateRangePickerCustomContext>\n <DateRangePickerGroupSlot asChild>\n <Group>\n <DateInput\n slot=\"start\"\n size={props.size}\n variant=\"plain\"\n width=\"auto\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n <Text\n as=\"span\"\n px=\"150\"\n color=\"neutral.11\"\n userSelect=\"none\"\n aria-hidden=\"true\"\n slot={null}\n >\n –\n </Text>\n <DateInput\n slot=\"end\"\n size={props.size}\n variant=\"plain\"\n width=\"auto\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n <DateRangePickerTriggerSlot>\n <IconButton\n variant=\"ghost\"\n size={overlayButtonSize}\n slot=\"clear\"\n aria-label={msg.format(\"clearSelection\")}\n >\n <Close />\n </IconButton>\n <IconButton\n variant=\"ghost\"\n size={overlayButtonSize}\n slot=\"calendarToggle\"\n aria-label={msg.format(\"openCalendar\")}\n >\n <CalendarMonth />\n </IconButton>\n </DateRangePickerTriggerSlot>\n </Group>\n </DateRangePickerGroupSlot>\n <DateRangePickerPopoverSlot asChild>\n <Popover placement=\"bottom end\">\n <Dialog>\n <DateRangePickerCalendarSlot>\n <RangeCalendar />\n </DateRangePickerCalendarSlot>\n <DateRangePickerTimeInput\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Dialog>\n </Popover>\n </DateRangePickerPopoverSlot>\n </DateRangePickerCustomContext>\n </ReactAriaDateRangePicker>\n </DateRangePickerRootSlot>\n );\n};\n\nDateRangePicker.displayName = \"DateRangePicker\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","DateRangePickerRootSlot","DateRangePickerGroupSlot","DateRangePickerTriggerSlot","DateRangePickerPopoverSlot","DateRangePickerCalendarSlot","dateRangePickerMessages_en","dateRangePickerMessages_de","dateRangePickerMessages_es","dateRangePickerMessages_fr","dateRangePickerMessages_pt","dateRangePickerMessagesStrings","normalizeMessages","DateRangePickerTimeInput","hideTimeZone","hourCycle","msg","useLocalizedStringFormatter","dateRangePickerState","useContext","DateRangePickerStateContext","granularity","value","timeInputRef","useRef","previousValueRef","useEffect","timeoutId","container","activeElement","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DateRangePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","hasCompleteRangeDate","date","incompleteValue","startTimeValue","endTimeValue","isDateRangePickerDisabled","getDefaultTimeInputAriaLabel","type","messageKey","buttonSlots","event","timeInputSlots","currentValue","startDate","endDate","newStartDate","newEndDate","Provider","TimeFieldContext","DateRangePicker","props","recipe","useSlotRecipe","dateRangePickerSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","size","overlayButtonSize","shouldCloseOnSelect","ReactAriaDateRangePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","RangeCalendar"],"mappings":"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"}

package/dist/chunks/date-range-picker-field-BPGGp3jH.es.js ADDED Viewed

@@ -0,0 +1,61 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { D as x } from "./date-range-picker-CloFZ70c.es.js";
+import { a as g } from "./field-errors-Biiy2SmJ.es.js";
+import { F as r } from "./form-field-BVbjVnSV.es.js";
+const j = ({
+  id: o,
+  label: m,
+  description: l,
+  info: s,
+  errors: a,
+  renderError: d,
+  touched: f = !1,
+  isRequired: h = !1,
+  isDisabled: i = !1,
+  isReadOnly: n = !1,
+  isInvalid: p = !1,
+  direction: F = "column",
+  size: t = "md",
+  ...D
+}) => {
+  const c = f && a && Object.values(a).some(Boolean);
+  return /* @__PURE__ */ u(
+    r.Root,
+    {
+      id: o,
+      direction: F,
+      size: t,
+      isInvalid: c || p,
+      isRequired: h,
+      isDisabled: i,
+      isReadOnly: n,
+      children: [
+        /* @__PURE__ */ e(r.Label, { children: m }),
+        /* @__PURE__ */ e(r.Input, { children: /* @__PURE__ */ e(
+          x,
+          {
+            size: t,
+            isDisabled: i,
+            isReadOnly: n,
+            ...D
+          }
+        ) }),
+        l && /* @__PURE__ */ e(r.Description, { children: l }),
+        s && /* @__PURE__ */ e(r.InfoBox, { children: s }),
+        c && /* @__PURE__ */ e(r.Error, { children: /* @__PURE__ */ e(
+          g,
+          {
+            id: `${o}-errors`,
+            errors: a,
+            renderError: d
+          }
+        ) })
+      ]
+    }
+  );
+};
+j.displayName = "DateRangePickerField";
+export {
+  j as D
+};
+//# sourceMappingURL=date-range-picker-field-BPGGp3jH.es.js.map

package/dist/chunks/date-range-picker-field-BPGGp3jH.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-range-picker-field-BPGGp3jH.es.js","sources":["../../src/patterns/fields/date-range-picker-field/date-range-picker-field.tsx"],"sourcesContent":["import { DateRangePicker } from \"@/components/date-range-picker/date-range-picker\";\nimport { FormField, FieldErrors } from \"@/components\";\nimport type { DateRangePickerFieldProps } from \"./date-range-picker-field.types\";\n\n/**\n * # DateRangePickerField\n *\n * A form field component that combines DateRangePicker with Form Field features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component follows the same API pattern as other field components in the UI-Kit,\n * providing a consistent interface for date range selection within forms.\n *\n * @example\n * ```tsx\n * <DateRangePickerField\n * label=\"Date Range\"\n * description=\"Select a start and end date\"\n * value={dateRange}\n * onChange={handleChange}\n * errors={errors}\n * touched={touched}\n * isRequired\n * />\n * ```\n */\nexport const DateRangePickerField = ({\n id,\n label,\n description,\n info,\n errors,\n renderError,\n touched = false,\n isRequired = false,\n isDisabled = false,\n isReadOnly = false,\n isInvalid = false,\n direction = \"column\",\n size = \"md\",\n ...dateRangePickerProps\n}: DateRangePickerFieldProps) => {\n // Determine if we should show errors\n const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n return (\n <FormField.Root\n id={id}\n direction={direction as \"row\" | \"column\"}\n size={size}\n isInvalid={hasErrors || isInvalid}\n isRequired={isRequired}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n >\n <FormField.Label>{label}</FormField.Label>\n <FormField.Input>\n <DateRangePicker\n size={size}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n {...dateRangePickerProps}\n />\n </FormField.Input>\n\n {description && (\n <FormField.Description>{description}</FormField.Description>\n )}\n\n {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n {hasErrors && (\n <FormField.Error>\n <FieldErrors\n id={`${id}-errors`}\n errors={errors}\n renderError={renderError}\n />\n </FormField.Error>\n )}\n </FormField.Root>\n );\n};\n\nDateRangePickerField.displayName = \"DateRangePickerField\";\n"],"names":["DateRangePickerField","id","label","description","info","errors","renderError","touched","isRequired","isDisabled","isReadOnly","isInvalid","direction","size","dateRangePickerProps","hasErrors","jsxs","FormField","jsx","DateRangePicker","FieldErrors"],"mappings":";;;;AA0BO,MAAMA,IAAuB,CAAC;AAAA,EACnC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MAAiC;AAE/B,QAAMC,IAAYR,KAAWF,KAAU,OAAO,OAAOA,CAAM,EAAE,KAAK,OAAO;AAEzE,SACE,gBAAAW;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,IAAAhB;AAAA,MACA,WAAAW;AAAA,MACA,MAAAC;AAAA,MACA,WAAWE,KAAaJ;AAAA,MACxB,YAAAH;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAQ,EAACD,EAAU,OAAV,EAAiB,UAAAf,EAAA,CAAM;AAAA,QACxB,gBAAAgB,EAACD,EAAU,OAAV,EACC,UAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAAN;AAAA,YACA,YAAAJ;AAAA,YACA,YAAAC;AAAA,YACC,GAAGI;AAAA,UAAA;AAAA,QAAA,GAER;AAAA,QAECX,KACC,gBAAAe,EAACD,EAAU,aAAV,EAAuB,UAAAd,GAAY;AAAA,QAGrCC,KAAQ,gBAAAc,EAACD,EAAU,SAAV,EAAmB,UAAAb,GAAK;AAAA,QACjCW,KACC,gBAAAG,EAACD,EAAU,OAAV,EACC,UAAA,gBAAAC;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,IAAI,GAAGnB,CAAE;AAAA,YACT,QAAAI;AAAA,YACA,aAAAC;AAAA,UAAA;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAN,EAAqB,cAAc;"}

package/dist/chunks/date-range-picker-field-CSpT0HwR.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";const e=require("react/jsx-runtime"),R=require("./date-range-picker-DcKkP7Xj.cjs.js"),g=require("./field-errors-YZww76Wi.cjs.js"),r=require("./form-field-BgYwFv45.cjs.js"),t=({id:l,label:F,description:s,info:o,errors:i,renderError:m,touched:j=!1,isRequired:u=!1,isDisabled:n=!1,isReadOnly:a=!1,isInvalid:x=!1,direction:f="column",size:c="md",...h})=>{const d=j&&i&&Object.values(i).some(Boolean);return e.jsxs(r.FormField.Root,{id:l,direction:f,size:c,isInvalid:d\|\|x,isRequired:u,isDisabled:n,isReadOnly:a,children:[e.jsx(r.FormField.Label,{children:F}),e.jsx(r.FormField.Input,{children:e.jsx(R.DateRangePicker,{size:c,isDisabled:n,isReadOnly:a,...h})}),s&&e.jsx(r.FormField.Description,{children:s}),o&&e.jsx(r.FormField.InfoBox,{children:o}),d&&e.jsx(r.FormField.Error,{children:e.jsx(g.FieldErrors,{id:`${l}-errors`,errors:i,renderError:m})})]})};t.displayName="DateRangePickerField";exports.DateRangePickerField=t;
2	+ //# sourceMappingURL=date-range-picker-field-CSpT0HwR.cjs.js.map

package/dist/chunks/date-range-picker-field-CSpT0HwR.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-range-picker-field-CSpT0HwR.cjs.js","sources":["../../src/patterns/fields/date-range-picker-field/date-range-picker-field.tsx"],"sourcesContent":["import { DateRangePicker } from \"@/components/date-range-picker/date-range-picker\";\nimport { FormField, FieldErrors } from \"@/components\";\nimport type { DateRangePickerFieldProps } from \"./date-range-picker-field.types\";\n\n/**\n * # DateRangePickerField\n *\n * A form field component that combines DateRangePicker with Form Field features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component follows the same API pattern as other field components in the UI-Kit,\n * providing a consistent interface for date range selection within forms.\n *\n * @example\n * ```tsx\n * <DateRangePickerField\n * label=\"Date Range\"\n * description=\"Select a start and end date\"\n * value={dateRange}\n * onChange={handleChange}\n * errors={errors}\n * touched={touched}\n * isRequired\n * />\n * ```\n */\nexport const DateRangePickerField = ({\n id,\n label,\n description,\n info,\n errors,\n renderError,\n touched = false,\n isRequired = false,\n isDisabled = false,\n isReadOnly = false,\n isInvalid = false,\n direction = \"column\",\n size = \"md\",\n ...dateRangePickerProps\n}: DateRangePickerFieldProps) => {\n // Determine if we should show errors\n const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n return (\n <FormField.Root\n id={id}\n direction={direction as \"row\" | \"column\"}\n size={size}\n isInvalid={hasErrors || isInvalid}\n isRequired={isRequired}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n >\n <FormField.Label>{label}</FormField.Label>\n <FormField.Input>\n <DateRangePicker\n size={size}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n {...dateRangePickerProps}\n />\n </FormField.Input>\n\n {description && (\n <FormField.Description>{description}</FormField.Description>\n )}\n\n {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n {hasErrors && (\n <FormField.Error>\n <FieldErrors\n id={`${id}-errors`}\n errors={errors}\n renderError={renderError}\n />\n </FormField.Error>\n )}\n </FormField.Root>\n );\n};\n\nDateRangePickerField.displayName = \"DateRangePickerField\";\n"],"names":["DateRangePickerField","id","label","description","info","errors","renderError","touched","isRequired","isDisabled","isReadOnly","isInvalid","direction","size","dateRangePickerProps","hasErrors","jsxs","FormField","jsx","DateRangePicker","FieldErrors"],"mappings":"yLA0BaA,EAAuB,CAAC,CACnC,GAAAC,EACA,MAAAC,EACA,YAAAC,EACA,KAAAC,EACA,OAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,UAAAC,EAAY,GACZ,UAAAC,EAAY,SACZ,KAAAC,EAAO,KACP,GAAGC,CACL,IAAiC,CAE/B,MAAMC,EAAYR,GAAWF,GAAU,OAAO,OAAOA,CAAM,EAAE,KAAK,OAAO,EAEzE,OACEW,EAAAA,KAACC,EAAAA,UAAU,KAAV,CACC,GAAAhB,EACA,UAAAW,EACA,KAAAC,EACA,UAAWE,GAAaJ,EACxB,WAAAH,EACA,WAAAC,EACA,WAAAC,EAEA,SAAA,CAAAQ,EAAAA,IAACD,EAAAA,UAAU,MAAV,CAAiB,SAAAf,CAAA,CAAM,EACxBgB,EAAAA,IAACD,EAAAA,UAAU,MAAV,CACC,SAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACC,KAAAN,EACA,WAAAJ,EACA,WAAAC,EACC,GAAGI,CAAA,CAAA,EAER,EAECX,GACCe,EAAAA,IAACD,EAAAA,UAAU,YAAV,CAAuB,SAAAd,EAAY,EAGrCC,GAAQc,EAAAA,IAACD,EAAAA,UAAU,QAAV,CAAmB,SAAAb,EAAK,EACjCW,GACCG,EAAAA,IAACD,EAAAA,UAAU,MAAV,CACC,SAAAC,EAAAA,IAACE,EAAAA,YAAA,CACC,GAAI,GAAGnB,CAAE,UACT,OAAAI,EACA,YAAAC,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAAA,CAIR,EAEAN,EAAqB,YAAc"}