@kalyx/react 1.0.0-rc.9 → 1.0.0

package/dist/index.cjs

@@ -1,12 +1,29 @@
 "use client";
 'use strict';
 
+var adapterDateFns = require('@kalyx/adapter-date-fns');
 var react = require('react');
 var core = require('@kalyx/core');
 var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@floating-ui/react');
 
-// src/components/DatePicker/Root.tsx
+// src/index.ts
+
+// src/internal/defaultAdapter.ts
+var __defaultAdapter = null;
+function setDefaultAdapter(adapter) {
+  __defaultAdapter = adapter;
+}
+function getDefaultAdapter() {
+  return __defaultAdapter;
+}
+function resolveAdapter(passed, fallback, componentName) {
+  if (passed) return passed;
+  if (fallback) return fallback;
+  throw new Error(
+    `[@kalyx/react/headless] ${componentName} requires an adapter. Pass one via <${componentName} adapter={...}>. If you don't need a custom adapter, import from '@kalyx/react' instead.`
+  );
+}
 var DatePickerContext = react.createContext(null);
 function useDatePickerContext(componentName) {
   const context = react.useContext(DatePickerContext);
@@ -45,10 +62,11 @@ function DatePickerRoot({
   displayFormat = "yyyy-MM-dd",
   locale = "en-US",
   displayTimezone,
-  adapter = core.DateFnsAdapter,
+  adapter: adapterProp,
   labels: labelsProp,
   children
 }) {
+  const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "DatePicker");
   const pickerId = react.useId();
   const isControlled = react.useRef(controlledValue !== void 0).current;
   const referenceRef = react.useRef(null);
@@ -157,6 +175,10 @@ var DatePickerInput = react.forwardRef(
     const displayFormat = formatProp ?? ctx.displayFormat;
     const [inputText, setInputText] = react.useState(null);
     const isComposingRef = react.useRef(false);
+    react.useEffect(() => {
+      if (isComposingRef.current) return;
+      setInputText(null);
+    }, [ctx.value]);
     let formattedValue = "";
     if (ctx.value) {
       try {
@@ -1099,6 +1121,17 @@ function useRangePickerContext(componentName) {
   return context;
 }
 var EMPTY_RANGE = { start: null, end: null };
+var SR_ONLY = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
 function RangePickerRoot({
   value: controlledValue,
   defaultValue,
@@ -1111,10 +1144,11 @@ function RangePickerRoot({
   displayFormat = "yyyy-MM-dd",
   locale = "en-US",
   displayTimezone,
-  adapter = core.DateFnsAdapter,
+  adapter: adapterProp,
   labels: labelsProp,
   children
 }) {
+  const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "RangePicker");
   const pickerId = react.useId();
   const isControlled = react.useRef(controlledValue !== void 0).current;
   const referenceRef = react.useRef(null);
@@ -1125,6 +1159,8 @@ function RangePickerRoot({
   const [isOpen, setIsOpen] = react.useState(false);
   const [selectingTarget, setSelectingTarget] = react.useState("start");
   const [hoverDate, setHoverDate] = react.useState(null);
+  const [announcement, setAnnouncement] = react.useState("");
+  const announce = react.useCallback((message) => setAnnouncement(message), []);
   const [viewMonth, setViewMonth] = react.useState(
     () => currentValue.start ?? adapter.today(displayTimezone)
   );
@@ -1227,7 +1263,8 @@ function RangePickerRoot({
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
-      labels: mergedLabels
+      labels: mergedLabels,
+      announce
     }),
     [
       currentValue,
@@ -1250,10 +1287,14 @@ function RangePickerRoot({
       isDisabled,
       readOnly,
       pickerId,
-      mergedLabels
+      mergedLabels,
+      announce
     ]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(RangePickerContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsxRuntime.jsxs(RangePickerContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: SR_ONLY, children: announcement })
+  ] });
 }
 var RangePickerInput = react.forwardRef(
   function RangePickerInput2({ part, format: formatProp, onClick, onKeyDown, ...props }, ref) {
@@ -1353,17 +1394,6 @@ function safeFormatFullDate2(iso, locale) {
     return iso;
   }
 }
-var srOnly2 = {
-  position: "absolute",
-  width: "1px",
-  height: "1px",
-  padding: 0,
-  margin: "-1px",
-  overflow: "hidden",
-  clip: "rect(0, 0, 0, 0)",
-  whiteSpace: "nowrap",
-  border: 0
-};
 function RangePickerCalendar({
   classNames,
   selectionMode = "range",
@@ -1373,7 +1403,6 @@ function RangePickerCalendar({
 }) {
   const ctx = useRangePickerContext("RangePicker.Calendar");
   const gridRef = react.useRef(null);
-  const [announcement, setAnnouncement] = react.useState("");
   const {
     adapter,
     viewMonth,
@@ -1425,7 +1454,7 @@ function RangePickerCalendar({
       ctx.setFocusedDate(adapter.startOfMonth(newMonth));
       const y = adapter.getYear(newMonth);
       const m = adapter.getMonth(newMonth);
-      setAnnouncement(core.formatMonthYear(y, m, locale));
+      ctx.announce(core.formatMonthYear(y, m, locale));
     },
     [adapter, viewMonth, ctx, locale]
   );
@@ -1437,15 +1466,27 @@ function RangePickerCalendar({
         const range = { start: weekStart, end: weekEnd };
         ctx.setRange(range);
         ctx.close();
-        setAnnouncement(
-          `${safeFormatFullDate2(weekStart, locale)} \u2013 ${safeFormatFullDate2(weekEnd, locale)}`
+        ctx.announce(
+          `${ctx.labels.rangeSelected}: ${safeFormatFullDate2(weekStart, locale)} \u2013 ${safeFormatFullDate2(weekEnd, locale)}`
         );
       } else {
+        const wasPickingStart = selectingTarget === "start";
+        const previousStart = value.start;
         ctx.selectDate(iso);
-        setAnnouncement(safeFormatFullDate2(iso, locale));
+        const formatted = safeFormatFullDate2(iso, locale);
+        if (wasPickingStart) {
+          ctx.announce(`${formatted}. ${ctx.labels.selectingEnd}`);
+        } else if (previousStart) {
+          const [start, end] = adapter.isBefore(iso, previousStart) ? [iso, previousStart] : [previousStart, iso];
+          ctx.announce(
+            `${ctx.labels.rangeSelected}: ${safeFormatFullDate2(start, locale)} \u2013 ${safeFormatFullDate2(end, locale)}`
+          );
+        } else {
+          ctx.announce(formatted);
+        }
       }
     },
-    [selectionMode, adapter, weekStartsOn, ctx, locale]
+    [selectionMode, adapter, weekStartsOn, ctx, locale, selectingTarget, value.start]
   );
   const handleDayClick = react.useCallback(
     (day) => {
@@ -1654,8 +1695,7 @@ function RangePickerCalendar({
           )) })
         ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: srOnly2, children: announcement })
+    )
   ] });
 }
 function RangePickerPresets({ classNames, children, ...props }) {
@@ -1713,35 +1753,28 @@ function RangePickerPreset({
   ...props
 }) {
   const ctx = useRangePickerContext("RangePicker.Preset");
+  const resolved = react.useMemo(() => {
+    if (directRange) return directRange;
+    if (presetKey)
+      return resolvePreset(presetKey, ctx.adapter.today(ctx.displayTimezone), ctx.adapter);
+    return null;
+  }, [directRange, presetKey, ctx.adapter, ctx.displayTimezone]);
   const handleClick = react.useCallback(
     (e) => {
       if (ctx.isDisabled || ctx.isReadOnly) return;
-      let resolved;
-      if (directRange) {
-        resolved = directRange;
-      } else if (presetKey) {
-        resolved = resolvePreset(presetKey, ctx.adapter.today(), ctx.adapter);
-      } else {
-        return;
-      }
+      if (!resolved) return;
       ctx.setRange(resolved);
       ctx.close();
       onClick?.(e);
     },
-    [ctx, presetKey, directRange, onClick]
+    [ctx, resolved, onClick]
   );
-  const isActive = (() => {
-    if (!ctx.value.start || !ctx.value.end) return false;
-    let target;
-    if (directRange) {
-      target = directRange;
-    } else if (presetKey) {
-      target = resolvePreset(presetKey, ctx.adapter.today(), ctx.adapter);
-    } else {
+  const isActive = react.useMemo(() => {
+    if (!ctx.value.start || !ctx.value.end || !resolved || !resolved.start || !resolved.end) {
       return false;
     }
-    return target.start !== null && target.end !== null && ctx.adapter.isSameDay(ctx.value.start, target.start) && ctx.adapter.isSameDay(ctx.value.end, target.end);
-  })();
+    return ctx.adapter.isSameDay(ctx.value.start, resolved.start) && ctx.adapter.isSameDay(ctx.value.end, resolved.end);
+  }, [ctx.value.start, ctx.value.end, ctx.adapter, resolved]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -1779,9 +1812,6 @@ function useTimePickerContext(componentName) {
   }
   return context;
 }
-function getDefaultIso() {
-  return core.DateFnsAdapter.today();
-}
 function TimePickerRoot({
   value: controlledValue,
   defaultValue,
@@ -1793,9 +1823,11 @@ function TimePickerRoot({
   disabled = false,
   readOnly = false,
   filterTime,
+  adapter: adapterProp,
   labels: labelsProp,
   children
 }) {
+  const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "TimePicker");
   const pickerId = react.useId();
   const mergedLabels = react.useMemo(
     () => ({ ...core.DEFAULT_TIMEPICKER_LABELS, ...labelsProp }),
@@ -1806,21 +1838,21 @@ function TimePickerRoot({
     defaultValue ?? null
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
-  const baseIso = currentValue ?? getDefaultIso();
-  const currentTime = react.useMemo(
-    () => displayTimezone ? core.getTimeInTimezone(baseIso, displayTimezone) : core.getTime(baseIso),
-    [baseIso, displayTimezone]
-  );
+  const currentTime = react.useMemo(() => {
+    if (!currentValue) return { hours: 0, minutes: 0, seconds: 0 };
+    return displayTimezone ? core.getTimeInTimezone(currentValue, displayTimezone) : core.getTime(currentValue);
+  }, [currentValue, displayTimezone]);
   const setTime = react.useCallback(
     (partial) => {
       if (disabled || readOnly) return;
-      const newIso = displayTimezone ? core.setTimeInTimezone(baseIso, partial, displayTimezone) : core.setTime(baseIso, partial);
+      const base = currentValue ?? adapter.today(displayTimezone);
+      const newIso = displayTimezone ? core.setTimeInTimezone(base, partial, displayTimezone) : core.setTime(base, partial);
       if (!isControlled) {
         setUncontrolledValue(newIso);
       }
       onChange?.(newIso);
     },
-    [disabled, readOnly, baseIso, isControlled, onChange, displayTimezone]
+    [disabled, readOnly, currentValue, displayTimezone, isControlled, onChange, adapter]
   );
   const contextValue = react.useMemo(
     () => ({
@@ -1858,6 +1890,9 @@ var TimePickerInput = react.forwardRef(
   function TimePickerInput2({ onBlur, onKeyDown, ...props }, ref) {
     const ctx = useTimePickerContext("TimePicker.Input");
     const [inputText, setInputText] = react.useState(null);
+    react.useEffect(() => {
+      setInputText(null);
+    }, [ctx.value]);
     const displayValue = inputText !== null ? inputText : core.formatTimeString(ctx.currentTime, ctx.withSeconds);
     const commitInput = react.useCallback(() => {
       if (inputText === null) return;
@@ -2177,9 +2212,6 @@ var TimePicker = Object.assign(TimePickerRoot, {
   MinuteList: TimePickerMinuteList,
   AmPmToggle: TimePickerAmPmToggle
 });
-function getDefaultIso2() {
-  return core.DateFnsAdapter.today();
-}
 function DateTimePickerRoot({
   value: controlledValue,
   defaultValue,
@@ -2188,16 +2220,19 @@ function DateTimePickerRoot({
   onCalendarNavigate,
   format = "24h",
   step = 1,
+  withSeconds = false,
+  filterTime,
   disabled = false,
   readOnly = false,
   weekStartsOn = 0,
   displayFormat = "yyyy-MM-dd HH:mm",
   locale = "en-US",
   displayTimezone,
-  adapter = core.DateFnsAdapter,
+  adapter: adapterProp,
   labels: labelsProp,
   children
 }) {
+  const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "DateTimePicker");
   const pickerId = react.useId();
   const mergedDateLabels = react.useMemo(
     () => ({ ...core.DEFAULT_DATEPICKER_LABELS, ...labelsProp }),
@@ -2228,11 +2263,10 @@ function DateTimePickerRoot({
     () => Array.isArray(disabled) ? disabled : [],
     [disabled]
   );
-  const baseIso = currentValue ?? getDefaultIso2();
-  const currentTime = react.useMemo(
-    () => displayTimezone ? core.getTimeInTimezone(baseIso, displayTimezone) : core.getTime(baseIso),
-    [baseIso, displayTimezone]
-  );
+  const currentTime = react.useMemo(() => {
+    if (!currentValue) return { hours: 0, minutes: 0, seconds: 0 };
+    return displayTimezone ? core.getTimeInTimezone(currentValue, displayTimezone) : core.getTime(currentValue);
+  }, [currentValue, displayTimezone]);
   const updateValue = react.useCallback(
     (next) => {
       if (isDisabled || readOnly) return;
@@ -2258,11 +2292,11 @@ function DateTimePickerRoot({
   );
   const setTime = react.useCallback(
     (partial) => {
-      const base = currentValue ?? getDefaultIso2();
+      const base = currentValue ?? adapter.today(displayTimezone);
       const merged = displayTimezone ? core.setTimeInTimezone(base, partial, displayTimezone) : core.setTime(base, partial);
       updateValue(merged);
     },
-    [currentValue, updateValue, displayTimezone]
+    [currentValue, updateValue, displayTimezone, adapter]
   );
   const open = react.useCallback(() => {
     if (isDisabled || readOnly) return;
@@ -2329,25 +2363,28 @@ function DateTimePickerRoot({
       setTime,
       format,
       step,
-      withSeconds: false,
+      withSeconds,
       displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       currentTime,
       pickerId,
-      labels: mergedTimeLabels
+      labels: mergedTimeLabels,
+      filterTime
     }),
     [
       currentValue,
       setTime,
       format,
       step,
+      withSeconds,
       displayTimezone,
       isDisabled,
       readOnly,
       currentTime,
       pickerId,
-      mergedTimeLabels
+      mergedTimeLabels,
+      filterTime
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DatePickerContext.Provider, { value: dateContext, children: /* @__PURE__ */ jsxRuntime.jsx(TimePickerContext.Provider, { value: timeContext, children }) });
@@ -2730,9 +2767,10 @@ function useDatePicker(options = {}) {
     onChange,
     disabled = [],
     weekStartsOn = 0,
-    adapter = core.DateFnsAdapter,
+    adapter: adapterProp,
     displayTimezone
   } = options;
+  const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "useDatePicker");
   const pickerId = react.useId();
   const isControlled = react.useRef(controlledValue !== void 0).current;
   const [uncontrolledValue, setUncontrolledValue] = react.useState(
@@ -2813,9 +2851,10 @@ function useRangePicker(options = {}) {
     onChange,
     disabled = [],
     weekStartsOn = 0,
-    adapter = core.DateFnsAdapter,
+    adapter: adapterProp,
     displayTimezone
   } = options;
+  const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "useRangePicker");
   const pickerId = react.useId();
   const isControlled = react.useRef(controlledValue !== void 0).current;
   const [uncontrolledValue, setUncontrolledValue] = react.useState(
@@ -2920,9 +2959,6 @@ function useRangePicker(options = {}) {
     adapter
   };
 }
-function getDefaultIso3() {
-  return core.DateFnsAdapter.today();
-}
 function useTimePicker(options = {}) {
   const {
     value: controlledValue,
@@ -2930,15 +2966,17 @@ function useTimePicker(options = {}) {
     onChange,
     format = "24h",
     step = 1,
-    displayTimezone
+    displayTimezone,
+    adapter: adapterProp
   } = options;
+  const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "useTimePicker");
   const pickerId = react.useId();
   const isControlled = react.useRef(controlledValue !== void 0).current;
   const [uncontrolledValue, setUncontrolledValue] = react.useState(
     defaultValue ?? null
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
-  const baseIso = currentValue ?? getDefaultIso3();
+  const baseIso = currentValue ?? adapter.today();
   const currentTime = react.useMemo(
     () => displayTimezone ? core.getTimeInTimezone(baseIso, displayTimezone) : core.getTime(baseIso),
     [baseIso, displayTimezone]
@@ -2988,10 +3026,27 @@ function useTimePicker(options = {}) {
     pickerId
   };
 }
+setDefaultAdapter(adapterDateFns.DateFnsAdapter);
 
 Object.defineProperty(exports, "DateFnsAdapter", {
   enumerable: true,
-  get: function () { return core.DateFnsAdapter; }
+  get: function () { return adapterDateFns.DateFnsAdapter; }
+});
+Object.defineProperty(exports, "DEFAULT_DATEPICKER_LABELS", {
+  enumerable: true,
+  get: function () { return core.DEFAULT_DATEPICKER_LABELS; }
+});
+Object.defineProperty(exports, "DEFAULT_DATETIMEPICKER_LABELS", {
+  enumerable: true,
+  get: function () { return core.DEFAULT_DATETIMEPICKER_LABELS; }
+});
+Object.defineProperty(exports, "DEFAULT_RANGEPICKER_LABELS", {
+  enumerable: true,
+  get: function () { return core.DEFAULT_RANGEPICKER_LABELS; }
+});
+Object.defineProperty(exports, "DEFAULT_TIMEPICKER_LABELS", {
+  enumerable: true,
+  get: function () { return core.DEFAULT_TIMEPICKER_LABELS; }
 });
 exports.DatePicker = DatePicker;
 exports.DateTimePicker = DateTimePicker;