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

package/dist/index.d.cts

@@ -495,12 +495,20 @@ interface TimePickerRootProps {
     disabled?: boolean;
     /** Read-only */
     readOnly?: boolean;
+    /**
+     * Programmatic per-slot disable predicate. Returns `true` for any `(hours, minutes)` pair
+     * that should be unselectable — same polarity as MUI X's `shouldDisableTime`, and the
+     * **inverse** of react-datepicker's `filterTime` (which returns `true` to *keep* a slot).
+     * Use cases: business hours, lunch breaks, blackout slots. Hours are disabled only when the
+     * predicate returns `true` for every step within the hour. Always receives 24-hour values.
+     */
+    filterTime?: (hours: number, minutes: number) => boolean;
     /** Override ARIA labels (defaults to English) */
     labels?: Partial<TimePickerLabels>;
     /** Child components */
     children: ReactNode;
 }
-declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
+declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
 
 interface TimePickerHourListClassNames {
     root?: string;

package/dist/index.d.ts

@@ -495,12 +495,20 @@ interface TimePickerRootProps {
     disabled?: boolean;
     /** Read-only */
     readOnly?: boolean;
+    /**
+     * Programmatic per-slot disable predicate. Returns `true` for any `(hours, minutes)` pair
+     * that should be unselectable — same polarity as MUI X's `shouldDisableTime`, and the
+     * **inverse** of react-datepicker's `filterTime` (which returns `true` to *keep* a slot).
+     * Use cases: business hours, lunch breaks, blackout slots. Hours are disabled only when the
+     * predicate returns `true` for every step within the hour. Always receives 24-hour values.
+     */
+    filterTime?: (hours: number, minutes: number) => boolean;
     /** Override ARIA labels (defaults to English) */
     labels?: Partial<TimePickerLabels>;
     /** Child components */
     children: ReactNode;
 }
-declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
+declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
 
 interface TimePickerHourListClassNames {
     root?: string;

package/dist/index.js

@@ -1791,6 +1791,7 @@ function TimePickerRoot({
   displayTimezone,
   disabled = false,
   readOnly = false,
+  filterTime,
   labels: labelsProp,
   children
 }) {
@@ -1832,7 +1833,8 @@ function TimePickerRoot({
       isReadOnly: readOnly,
       currentTime,
       pickerId,
-      labels: mergedLabels
+      labels: mergedLabels,
+      filterTime
     }),
     [
       currentValue,
@@ -1845,7 +1847,8 @@ function TimePickerRoot({
       readOnly,
       currentTime,
       pickerId,
-      mergedLabels
+      mergedLabels,
+      filterTime
     ]
   );
   return /* @__PURE__ */ jsx(TimePickerContext.Provider, { value: contextValue, children });
@@ -1950,17 +1953,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 = useMemo(() => generateHours(format), [format]);
   const selectedHourDisplay = format === "12h" ? to12Hour(currentTime.hours).hours12 : currentTime.hours;
   const currentPeriod = format === "12h" ? to12Hour(currentTime.hours).period : null;
+  const fullyDisabledHours24 = 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 = useCallback(
+    (hourDisplay) => {
+      if (!fullyDisabledHours24) return false;
+      const hours24 = format === "12h" && currentPeriod ? to24Hour(hourDisplay, currentPeriod) : hourDisplay;
+      return fullyDisabledHours24.has(hours24);
+    },
+    [fullyDisabledHours24, format, currentPeriod]
+  );
   const handleSelect = useCallback(
     (hourDisplay) => {
       if (isDisabled || isReadOnly) return;
+      if (isHourDisabled(hourDisplay)) return;
       const hours24 = format === "12h" && currentPeriod ? 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,
@@ -1978,13 +2005,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__ */ 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,
@@ -2001,14 +2029,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 = useMemo(() => generateMinutes(step), [step]);
+  const isMinuteDisabled = useCallback(
+    (minute) => {
+      if (!filterTime) return false;
+      return filterTime(currentTime.hours, minute);
+    },
+    [filterTime, currentTime.hours]
+  );
   const handleSelect = 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,
@@ -2026,13 +2062,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__ */ 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,