@kalyx/react 1.0.0-rc.10 → 1.0.0-rc.11

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, forwardRef, useState, useRef, useCallback, useContext, useId, useMemo, useEffect } from 'react';
+import { createContext, forwardRef, useState, useRef, useEffect, useCallback, useContext, useId, useMemo } from 'react';
 import { parseInputValue, formatTimeString, parseTimeString, getTimeInTimezone, getTime, DateFnsAdapter, DEFAULT_DATEPICKER_LABELS, civilMidnightFromUtcDay, getMonthName, getWeekdayNames, getCalendarDays, formatMonthYear, isDateDisabled, getISOWeekNumber, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, setTimeInTimezone, setTime, to12Hour, to24Hour, generateMinutes, generateHours, formatFullDate } from '@kalyx/core';
 export { DEFAULT_DATEPICKER_LABELS, DEFAULT_DATETIMEPICKER_LABELS, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, DateFnsAdapter } from '@kalyx/core';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -156,6 +156,10 @@ var DatePickerInput = forwardRef(
     const displayFormat = formatProp ?? ctx.displayFormat;
     const [inputText, setInputText] = useState(null);
     const isComposingRef = useRef(false);
+    useEffect(() => {
+      if (isComposingRef.current) return;
+      setInputText(null);
+    }, [ctx.value]);
     let formattedValue = "";
     if (ctx.value) {
       try {
@@ -1098,6 +1102,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,
@@ -1124,6 +1139,8 @@ function RangePickerRoot({
   const [isOpen, setIsOpen] = useState(false);
   const [selectingTarget, setSelectingTarget] = useState("start");
   const [hoverDate, setHoverDate] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const announce = useCallback((message) => setAnnouncement(message), []);
   const [viewMonth, setViewMonth] = useState(
     () => currentValue.start ?? adapter.today(displayTimezone)
   );
@@ -1226,7 +1243,8 @@ function RangePickerRoot({
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
-      labels: mergedLabels
+      labels: mergedLabels,
+      announce
     }),
     [
       currentValue,
@@ -1249,10 +1267,14 @@ function RangePickerRoot({
       isDisabled,
       readOnly,
       pickerId,
-      mergedLabels
+      mergedLabels,
+      announce
     ]
   );
-  return /* @__PURE__ */ jsx(RangePickerContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsxs(RangePickerContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: SR_ONLY, children: announcement })
+  ] });
 }
 var RangePickerInput = forwardRef(
   function RangePickerInput2({ part, format: formatProp, onClick, onKeyDown, ...props }, ref) {
@@ -1352,17 +1374,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",
@@ -1372,7 +1383,6 @@ function RangePickerCalendar({
 }) {
   const ctx = useRangePickerContext("RangePicker.Calendar");
   const gridRef = useRef(null);
-  const [announcement, setAnnouncement] = useState("");
   const {
     adapter,
     viewMonth,
@@ -1424,7 +1434,7 @@ function RangePickerCalendar({
       ctx.setFocusedDate(adapter.startOfMonth(newMonth));
       const y = adapter.getYear(newMonth);
       const m = adapter.getMonth(newMonth);
-      setAnnouncement(formatMonthYear(y, m, locale));
+      ctx.announce(formatMonthYear(y, m, locale));
     },
     [adapter, viewMonth, ctx, locale]
   );
@@ -1436,15 +1446,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 = useCallback(
     (day) => {
@@ -1653,8 +1675,7 @@ function RangePickerCalendar({
           )) })
         ]
       }
-    ),
-    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: srOnly2, children: announcement })
+    )
   ] });
 }
 function RangePickerPresets({ classNames, children, ...props }) {
@@ -1847,6 +1868,9 @@ var TimePickerInput = forwardRef(
   function TimePickerInput2({ onBlur, onKeyDown, ...props }, ref) {
     const ctx = useTimePickerContext("TimePicker.Input");
     const [inputText, setInputText] = useState(null);
+    useEffect(() => {
+      setInputText(null);
+    }, [ctx.value]);
     const displayValue = inputText !== null ? inputText : formatTimeString(ctx.currentTime, ctx.withSeconds);
     const commitInput = useCallback(() => {
       if (inputText === null) return;