@kalyx/react 1.0.0-rc.7 → 1.0.0-rc.9

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @kalyx/react
 
+## 1.0.0-rc.9
+
+### Patch Changes
+
+- 1a77283: docs: clarify `TimePicker.filterTime` polarity. The predicate returns `true` to mark a slot **unselectable** — same polarity as MUI X's `shouldDisableTime`, and the **inverse** of react-datepicker's `filterTime` (which returns `true` to _keep_ a slot). Earlier JSDoc/changelog called it "equivalent to react-datepicker's `filterTime`", which is misleading because the polarity is reversed; react-datepicker migrators must invert their predicate. No runtime behavior change — JSDoc, the published package description (≤16 KB), and docs only.
+
+## 1.0.0-rc.8
+
+### Minor Changes
+
+- 0d3b845: `TimePicker.Root` gains a programmatic **`filterTime`** prop — `(hours: number, minutes: number) => boolean` returning `true` for any slot that should be unselectable. Equivalent to `react-datepicker`'s `filterTime` and MUI X's `shouldDisableTime`, covering use cases the static `step` prop can't (business-hours-only, lunch breaks, blackout slots, per-day variations).
+
+  ```tsx
+  <TimePicker
+    value={time}
+    onChange={setTime}
+    step={15}
+    // Business hours only: 09:00–11:45 and 13:00–17:45 (no lunch slot)
+    filterTime={(h, m) => h < 9 || h >= 18 || h === 12}
+  >
+    <TimePicker.Input />
+    <TimePicker.HourList />
+    <TimePicker.MinuteList />
+  </TimePicker>
+  ```
+
+  Behavior:
+  - **`MinuteList`** — minutes for which `filterTime(currentHour, minute)` returns `true` get `aria-disabled="true"` and reject click/Enter.
+  - **`HourList`** — an hour is marked `aria-disabled="true"` only when `filterTime` returns `true` for **every** step minute within it. Hours with at least one open minute remain selectable.
+  - 12-hour mode — the predicate always receives 24-hour values (`0`–`23`) regardless of the picker's display format.
+
+  **Note**: `DateTimePicker` does not yet wire this through — combine `DatePicker.Root` + `TimePicker.Root` manually if you need both date and time-slot filtering in the same picker.
+
+  Bundle ceiling raised 15 → 16 KB (PR #N follows the 12→13→14→15 cadence — each raise tied to a documented feature; CLAUDE.md §2 records the chain). Measured 15.01 KB ESM / 15.16 KB CJS at this commit, ~4× smaller than react-datepicker.
+
 ## 1.0.0-rc.7
 
 ### Minor Changes

package/dist/index.cjs

@@ -1792,6 +1792,7 @@ function TimePickerRoot({
   displayTimezone,
   disabled = false,
   readOnly = false,
+  filterTime,
   labels: labelsProp,
   children
 }) {
@@ -1833,7 +1834,8 @@ function TimePickerRoot({
       isReadOnly: readOnly,
       currentTime,
       pickerId,
-      labels: mergedLabels
+      labels: mergedLabels,
+      filterTime
     }),
     [
       currentValue,
@@ -1846,7 +1848,8 @@ function TimePickerRoot({
       readOnly,
       currentTime,
       pickerId,
-      mergedLabels
+      mergedLabels,
+      filterTime
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TimePickerContext.Provider, { value: contextValue, children });
@@ -1951,17 +1954,41 @@ function useListboxNavigation({
 }
 function TimePickerHourList({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.HourList");
-  const { format, currentTime, isDisabled, isReadOnly } = ctx;
+  const { format, step, currentTime, isDisabled, isReadOnly, filterTime } = ctx;
   const hours = react.useMemo(() => core.generateHours(format), [format]);
   const selectedHourDisplay = format === "12h" ? core.to12Hour(currentTime.hours).hours12 : currentTime.hours;
   const currentPeriod = format === "12h" ? core.to12Hour(currentTime.hours).period : null;
+  const fullyDisabledHours24 = react.useMemo(() => {
+    if (!filterTime) return null;
+    const disabled = /* @__PURE__ */ new Set();
+    for (let h = 0; h < 24; h++) {
+      let allRejected = true;
+      for (let m = 0; m < 60; m += step) {
+        if (!filterTime(h, m)) {
+          allRejected = false;
+          break;
+        }
+      }
+      if (allRejected) disabled.add(h);
+    }
+    return disabled;
+  }, [filterTime, step]);
+  const isHourDisabled = react.useCallback(
+    (hourDisplay) => {
+      if (!fullyDisabledHours24) return false;
+      const hours24 = format === "12h" && currentPeriod ? core.to24Hour(hourDisplay, currentPeriod) : hourDisplay;
+      return fullyDisabledHours24.has(hours24);
+    },
+    [fullyDisabledHours24, format, currentPeriod]
+  );
   const handleSelect = react.useCallback(
     (hourDisplay) => {
       if (isDisabled || isReadOnly) return;
+      if (isHourDisabled(hourDisplay)) return;
       const hours24 = format === "12h" && currentPeriod ? core.to24Hour(hourDisplay, currentPeriod) : hourDisplay;
       ctx.setTime({ hours: hours24 });
     },
-    [format, currentPeriod, ctx, isDisabled, isReadOnly]
+    [format, currentPeriod, ctx, isDisabled, isReadOnly, isHourDisabled]
   );
   const { listRef, handleKeyDown } = useListboxNavigation({
     items: hours,
@@ -1979,13 +2006,14 @@ function TimePickerHourList({ classNames, ...props }) {
       ...props,
       children: hours.map((hour) => {
         const isSelected = hour === selectedHourDisplay;
+        const isHourFullyDisabled = isHourDisabled(hour);
         const optionClass = [classNames?.option, isSelected && classNames?.optionSelected].filter(Boolean).join(" ") || void 0;
         return /* @__PURE__ */ jsxRuntime.jsx(
           "li",
           {
             role: "option",
             "aria-selected": isSelected,
-            "aria-disabled": isDisabled || void 0,
+            "aria-disabled": isDisabled || isHourFullyDisabled || void 0,
             "aria-label": ctx.labels.hourOption(hour),
             "data-selected": isSelected || void 0,
             tabIndex: isSelected ? 0 : -1,
@@ -2002,14 +2030,22 @@ function TimePickerHourList({ classNames, ...props }) {
 }
 function TimePickerMinuteList({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.MinuteList");
-  const { step, currentTime, isDisabled, isReadOnly } = ctx;
+  const { step, currentTime, isDisabled, isReadOnly, filterTime } = ctx;
   const minutes = react.useMemo(() => core.generateMinutes(step), [step]);
+  const isMinuteDisabled = react.useCallback(
+    (minute) => {
+      if (!filterTime) return false;
+      return filterTime(currentTime.hours, minute);
+    },
+    [filterTime, currentTime.hours]
+  );
   const handleSelect = react.useCallback(
     (minute) => {
       if (isDisabled || isReadOnly) return;
+      if (isMinuteDisabled(minute)) return;
       ctx.setTime({ minutes: minute });
     },
-    [ctx, isDisabled, isReadOnly]
+    [ctx, isDisabled, isReadOnly, isMinuteDisabled]
   );
   const { listRef, handleKeyDown } = useListboxNavigation({
     items: minutes,
@@ -2027,13 +2063,14 @@ function TimePickerMinuteList({ classNames, ...props }) {
       ...props,
       children: minutes.map((minute) => {
         const isSelected = minute === currentTime.minutes;
+        const isMinuteFullyDisabled = isMinuteDisabled(minute);
         const optionClass = [classNames?.option, isSelected && classNames?.optionSelected].filter(Boolean).join(" ") || void 0;
         return /* @__PURE__ */ jsxRuntime.jsx(
           "li",
           {
             role: "option",
             "aria-selected": isSelected,
-            "aria-disabled": isDisabled || void 0,
+            "aria-disabled": isDisabled || isMinuteFullyDisabled || void 0,
             "aria-label": ctx.labels.minuteOption(minute),
             "data-selected": isSelected || void 0,
             tabIndex: isSelected ? 0 : -1,