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

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @kalyx/react
 
+## 1.0.0-rc.11
+
+### Patch Changes
+
+- 19ac1c0: fix(core): allow `generateMinutes` step values up to 60
+
+  `generateMinutes(step)` rejected any step above 30, which prevented legitimate cases like `step=45` (quarter-and-three-quarters past the hour) and `step=60` (on-the-hour only). The slot-generation loop already works for any 1–60 integer, so the upper bound is now 60 with the same error message format. Steps `0`, `61+`, and negative values still throw. No callers in `@kalyx/react` relied on the previous narrower bound.
+
+- eafc3c1: fix(input): drop stale typed text when the parent re-sets value externally
+
+  `<DatePicker.Input>` and `<TimePicker.Input>` keep half-typed text in a local `inputText` state while the user is editing — without it, parse-failed input would vanish on every keystroke. The state was reset only when the user committed via blur/Enter, which left a real gap:
+
+  If the value changed from anywhere else (parent re-rendered with a new `value`, a calendar click, a `Preset`, a custom-Hook `setRange`, an HourList option), the Input kept rendering the user's stale text. Source-of-truth and visible value diverged silently.
+
+  A `useEffect` keyed on `ctx.value` now resets `inputText` whenever the source-of-truth changes. The Input goes back to formatting the new value normally. For DatePicker the reset is skipped while an IME composition is in flight (Korean/Japanese/Chinese), so an in-flight character is never wiped mid-stroke.
+
+  Impact: `DatePicker`, `MonthPicker`, `YearPicker` (the last two reuse `DatePickerInput`), and `TimePicker` all get the fix. `RangePicker`/`WeekPicker`/`DateTimePicker` Inputs are read-only or non-editable and already track context directly, so they were never affected.
+
+- 23bc187: docs(i18n): translate Korean intro and stop bumping demo apps on every patch
+  - `apps/docs-site/i18n/ko/.../intro.md` is now fully translated to Korean. Previously the file lived in the `i18n/ko/` tree but the body was the verbatim English copy, so Korean docs visitors saw English content on the landing page.
+  - `.changeset/config.json` `ignore` now includes the two demo workspaces (`@kalyx/docs`, `docs-site`). Changesets used to bump them on every release because they depend on `@kalyx/react`, polluting their CHANGELOG with `Updated dependencies` entries and adding noise to release PRs. Demo apps aren't published — they don't need versioning.
+
+- c8a6609: fix(rangepicker): announce next selection target and final range to screen readers
+
+  `<RangePicker.Calendar>` now announces context-aware messages through its existing `role="status"` live region:
+  - After the first click (start), it announces `<formatted-date>. Now select end date.` so screen-reader users know the next click commits the other endpoint.
+  - After the second click (end), it announces `Range selected: <start> – <end>` instead of just the bare date — matching the swap-if-before behaviour so the announcement always reflects what was committed.
+  - Week-mode commits now share the same `Range selected: ...` prefix for consistency.
+
+  The two new strings are wired through `RangePickerLabels.selectingEnd` and `RangePickerLabels.rangeSelected` with English defaults, and they are fully overridable via the existing `labels` prop for i18n. `@kalyx/core` gets a `minor` bump because `RangePickerLabels` gained required fields (with defaults supplied by `DEFAULT_RANGEPICKER_LABELS`); any consumer constructing a literal `RangePickerLabels` from scratch will need to add the two keys.
+
+- Updated dependencies [19ac1c0]
+- Updated dependencies [c8a6609]
+  - @kalyx/core@1.0.0-rc.11
+
 ## 1.0.0-rc.10
 
 ### Minor Changes

package/dist/index.cjs

@@ -157,6 +157,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 +1103,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,
@@ -1125,6 +1140,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 +1244,8 @@ function RangePickerRoot({
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
-      labels: mergedLabels
+      labels: mergedLabels,
+      announce
     }),
     [
       currentValue,
@@ -1250,10 +1268,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 +1375,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 +1384,6 @@ function RangePickerCalendar({
 }) {
   const ctx = useRangePickerContext("RangePicker.Calendar");
   const gridRef = react.useRef(null);
-  const [announcement, setAnnouncement] = react.useState("");
   const {
     adapter,
     viewMonth,
@@ -1425,7 +1435,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 +1447,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 +1676,7 @@ function RangePickerCalendar({
           )) })
         ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: srOnly2, children: announcement })
+    )
   ] });
 }
 function RangePickerPresets({ classNames, children, ...props }) {
@@ -1848,6 +1869,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;