@kenos-ui/react-datepicker 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kenos-ui/react-datepicker
 
+## 0.4.2
+
+### Patch Changes
+
+- 3222bd8: Sync controlled single `value` into reducer state via a new `SET_SELECTED_DATE` action, keeping the segmented input and calendar focused month in sync when the prop changes externally.
+
 ## 0.4.1
 
 ### Minor Changes
@@ -9,18 +15,21 @@
   Headless date & scheduling primitives for React 19+, fully unstyled and composition-first.
 
   **Selection API**
+
   - Unified `DatePicker.Root` with `mode`: `"single"` | `"range"` | `"multiple"`
   - Controlled / uncontrolled `value`, `open`, and `onValueChange` / `onOpenChange`
   - Range mode with live hover preview between `rangeStart` and `rangeEnd`
   - `minDate`, `maxDate`, `disabled` (boolean or per-date function), `readOnly`, `closeOnSelect`
 
   **Segmented input (timescape)**
+
   - First-class `<DatePicker.Input />` — locale-aware month / day / year segments
   - Dual inputs for range (`index={0}` / `index={1}`)
   - Bidirectional sync: type in segments or pick from calendar
   - Custom `segmentLabels` for screen readers
 
   **Compound calendar parts**
+
   - `Label`, `Trigger`, `Content`, `Calendar` (shorthand composition)
   - `ViewControl`, `PrevTrigger`, `NextTrigger`, `ViewTrigger`
   - `View` with `day` / `month` / `year` drill-down
@@ -29,25 +38,30 @@
   - `useDatePickerContext()` for custom layouts
 
   **Positioning & popup policy**
+
   - Floating UI via `Content`: `side`, `align`, `sideOffset`, `avoidCollisions`, `portal`
   - `forceMount` for enter/exit animations (`data-state`)
   - `modal` prop (default `false`) — opt-in focus trap + `aria-modal`; popup-policy friendly
   - Focus restore to trigger / input on close; dialog-interop (`Escape` does not bubble)
 
   **State & i18n**
+
   - Reducer-driven state machine (`OPEN`, `SELECT_DATE`, `NAV_PREV`/`NAV_NEXT`, `SET_VIEW`, `COMMIT_INPUT`, …)
   - `Intl`-based locale: week start, month/year labels, segment order & separators
   - `weekStartsOn` override
 
   **Accessibility & quality**
+
   - WAI-ARIA: `role="dialog"`, `grid` / `gridcell`, labelled inputs, keyboard roving tabindex
   - Test suite: reducer, calendar grid, date utils, ARIA, keyboard nav, dialog interop, axe (vitest-axe)
   - Storybook: Single, Range, Multiple, Locales
 
   **Docs**
+
   - README with quick start, range / multiple examples, full composition, localization, and `Content` props
 
   **Packaging**
+
   - Add `license: MIT` to `package.json` (fixes npm registry showing "no license")
 
 ## 0.4.0
@@ -59,18 +73,21 @@
   Headless date & scheduling primitives for React 19+, fully unstyled and composition-first.
 
   **Selection API**
+
   - Unified `DatePicker.Root` with `mode`: `"single"` | `"range"` | `"multiple"`
   - Controlled / uncontrolled `value`, `open`, and `onValueChange` / `onOpenChange`
   - Range mode with live hover preview between `rangeStart` and `rangeEnd`
   - `minDate`, `maxDate`, `disabled` (boolean or per-date function), `readOnly`, `closeOnSelect`
 
   **Segmented input (timescape)**
+
   - First-class `<DatePicker.Input />` — locale-aware month / day / year segments
   - Dual inputs for range (`index={0}` / `index={1}`)
   - Bidirectional sync: type in segments or pick from calendar
   - Custom `segmentLabels` for screen readers
 
   **Compound calendar parts**
+
   - `Label`, `Trigger`, `Content`, `Calendar` (shorthand composition)
   - `ViewControl`, `PrevTrigger`, `NextTrigger`, `ViewTrigger`
   - `View` with `day` / `month` / `year` drill-down
@@ -79,22 +96,26 @@
   - `useDatePickerContext()` for custom layouts
 
   **Positioning & popup policy**
+
   - Floating UI via `Content`: `side`, `align`, `sideOffset`, `avoidCollisions`, `portal`
   - `forceMount` for enter/exit animations (`data-state`)
   - `modal` prop (default `false`) — opt-in focus trap + `aria-modal`; popup-policy friendly
   - Focus restore to trigger / input on close; dialog-interop (`Escape` does not bubble)
 
   **State & i18n**
+
   - Reducer-driven state machine (`OPEN`, `SELECT_DATE`, `NAV_PREV`/`NAV_NEXT`, `SET_VIEW`, `COMMIT_INPUT`, …)
   - `Intl`-based locale: week start, month/year labels, segment order & separators
   - `weekStartsOn` override
 
   **Accessibility & quality**
+
   - WAI-ARIA: `role="dialog"`, `grid` / `gridcell`, labelled inputs, keyboard roving tabindex
   - Test suite: reducer, calendar grid, date utils, ARIA, keyboard nav, dialog interop, axe (vitest-axe)
   - Storybook: Single, Range, Multiple, Locales
 
   **Docs**
+
   - README with quick start, range / multiple examples, full composition, localization, and `Content` props
 
 ## 0.3.3
@@ -125,6 +146,7 @@
 ### Minor Changes
 
 - Axis lift-and-shift: publish DatePicker under `@at5/axis-datepicker`.
+
   - Add `@at5/axis-datepicker` — same DatePicker API and behavior as `@at5/kairo` (migrated from `packages/kairo` to `packages/datepicker`)
   - Add `@at5/axis` — aggregator re-exporting `DatePicker`
   - `@at5/kairo` — deprecated; thin re-export of `@at5/axis-datepicker` for transition

package/dist/index.cjs

@@ -362,6 +362,20 @@ function datePickerReducer(state, action, config) {
         } : {}
       };
     }
+    case "SET_SELECTED_DATE": {
+      const d = action.date ? startOfDay(action.date) : null;
+      return {
+        ...state,
+        selectedDate: d,
+        inputValue: d ? formatDate(d, config.locale) : "",
+        ...d ? {
+          focusedDate: d,
+          focusedMonth: d.getMonth(),
+          focusedYear: d.getFullYear(),
+          yearPageStart: yearPageStart(d.getFullYear())
+        } : {}
+      };
+    }
     case "SET_INPUT":
       return { ...state, inputValue: action.value };
     case "COMMIT_INPUT": {
@@ -488,6 +502,17 @@ function useDatePicker(props) {
       prevSelectedRef.current = state.selectedDate;
     }
   }, [state.selectedDate]);
+  const controlledSingleValue = (!props.mode || props.mode === "single") && "value" in props && props.value !== void 0 ? props.value : void 0;
+  const propSelectedT = controlledSingleValue?.getTime() ?? null;
+  const lastSyncedPropSelectedRef = React.useRef(null);
+  React.useEffect(() => {
+    if (controlledSingleValue === void 0) return;
+    if (lastSyncedPropSelectedRef.current === propSelectedT) return;
+    lastSyncedPropSelectedRef.current = propSelectedT;
+    const stateT = state.selectedDate?.getTime() ?? null;
+    if (propSelectedT === stateT) return;
+    dispatch({ type: "SET_SELECTED_DATE", date: controlledSingleValue });
+  }, [propSelectedT, dispatch]);
   const controlledRangeValue = props.mode === "range" && "value" in props && props.value !== void 0 ? props.value : void 0;
   const lastSyncedPropRangeRef = React.useRef(
     null