@kenos-ui/react-datepicker 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,14 +1,122 @@
 # @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
+
+- **Kenos UI DatePicker — feature release** (`@kenos-ui/react-datepicker@0.4.1`)
+
+  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
+  - `Grid`, `Day` (render-prop `DayCellMeta`), `WeekDays`
+  - `MonthGrid` / `MonthCell`, `YearGrid` / `YearCell`
+  - `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
 
 ### Minor Changes
 
-- docs(readme): major update to README
-  - Document the unified `DatePicker.Root` + `mode` API correctly
-  - Highlight the segmented `<DatePicker.Input />` as the main feature
-  - Add clear examples for range (dual inputs + hover preview), multiple, and full composition
-  - Improve props, localization and advanced Content sections
+- **Kenos UI DatePicker — feature release** (`@kenos-ui/react-datepicker@0.4.0`)
+
+  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
+  - `Grid`, `Day` (render-prop `DayCellMeta`), `WeekDays`
+  - `MonthGrid` / `MonthCell`, `YearGrid` / `YearCell`
+  - `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
 
@@ -38,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