@carbon-labs/react-date-picker 0.2.0

package/es/hooks/useDatePicker.js

@@ -0,0 +1,364 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { DatePickerStateMachine, parseDateToPlainDate, DatePickerState, plainDateToDate, DatePickerEvent, ClickOutsideHandler, mapKeyboardToStateMachineEvent } from '@carbon-labs/primitives/date-picker';
+
+/**
+ * Configuration for the useDatePicker hook
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ */
+
+/**
+ * Return type for the useDatePicker hook
+ */
+
+// Note: parseDate and temporalToDate functions removed - now using shared utilities
+// from @carbon-labs/primitives/date-picker:
+// - parseDateToPlainDate() handles mm/dd/yyyy, ISO, and Date object parsing
+// - plainDateToDate() converts Temporal.PlainDate to Date objects
+
+/**
+ * React hook for managing date picker state using the shared state machine
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ *
+ * @param {UseDatePickerConfig} config - Configuration options
+ * @returns {UseDatePickerReturn} Hook return object with state and handlers
+ */
+function useDatePicker(config = {}) {
+  const {
+    datePickerType = 'single',
+    value = '',
+    minDate = null,
+    maxDate = null,
+    dateFormat = 'm/d/Y',
+    closeOnSelect = true,
+    disabled = false,
+    readOnly = false,
+    onChange,
+    onOpen,
+    onClose
+  } = config;
+
+  // Refs for input elements
+  const startInputRef = useRef(null);
+  const endInputRef = useRef(null);
+  const calendarRef = useRef(null);
+
+  // State machine instance (persists across renders)
+  const machineRef = useRef(null);
+
+  // React state for triggering re-renders
+  const [context, setContext] = useState(() => {
+    // Initialize state machine on first render
+    const machine = new DatePickerStateMachine({
+      mode: datePickerType,
+      value,
+      minDate: parseDateToPlainDate(minDate),
+      maxDate: parseDateToPlainDate(maxDate),
+      dateFormat,
+      isDisabled: disabled,
+      isReadonly: readOnly
+    });
+    machineRef.current = machine;
+    return machine.getContext();
+  });
+  const [state, setState] = useState(() => {
+    return machineRef.current?.getState() || DatePickerState.IDLE;
+  });
+
+  // Subscribe to state machine changes
+  useEffect(() => {
+    const machine = machineRef.current;
+    if (!machine) {
+      return;
+    }
+    const unsubscribe = machine.subscribe(transition => {
+      setContext(transition.context);
+      setState(transition.to);
+
+      // Call Carbon API callbacks
+      if (transition.to === DatePickerState.CALENDAR_OPEN && onOpen) {
+        onOpen();
+      }
+      if ((transition.to === DatePickerState.IDLE || transition.to === DatePickerState.FOCUSED) && transition.from === DatePickerState.CALENDAR_OPEN && onClose) {
+        onClose();
+      }
+    });
+    return unsubscribe;
+  }, [onOpen, onClose, context.isOpen]);
+
+  // Track previous dates to prevent infinite loops
+  const prevDatesRef = useRef('');
+
+  // Handle onChange callback (convert Temporal.PlainDate to Date[])
+  useEffect(() => {
+    if (!onChange) {
+      return;
+    }
+    const dates = [];
+    if (context.startDate) {
+      const date = plainDateToDate(context.startDate);
+      if (date) {
+        dates.push(date);
+      }
+    }
+    if (context.endDate) {
+      const date = plainDateToDate(context.endDate);
+      if (date) {
+        dates.push(date);
+      }
+    }
+
+    // Create a string representation of dates for comparison
+    const datesKey = dates.map(d => d.toISOString()).join(',');
+
+    // Only call onChange if dates have actually changed
+    if (dates.length > 0 && datesKey !== prevDatesRef.current) {
+      prevDatesRef.current = datesKey;
+      onChange(dates);
+    }
+  }, [context.startDate, context.endDate, onChange]);
+
+  // Update state machine when config changes
+  useEffect(() => {
+    const machine = machineRef.current;
+    if (!machine) {
+      return;
+    }
+
+    // Update disabled state
+    if (disabled !== context.isDisabled) {
+      machine.send(disabled ? DatePickerEvent.DISABLE : DatePickerEvent.ENABLE);
+    }
+
+    // Update readonly state
+    if (readOnly !== context.isReadonly) {
+      machine.send(readOnly ? DatePickerEvent.SET_READONLY : DatePickerEvent.UNSET_READONLY);
+    }
+
+    // Update min/max dates
+    const newMinDate = parseDateToPlainDate(minDate);
+    const newMaxDate = parseDateToPlainDate(maxDate);
+    if (newMinDate) {
+      machine.send(DatePickerEvent.SET_MIN_DATE, {
+        date: newMinDate
+      });
+    }
+    if (newMaxDate) {
+      machine.send(DatePickerEvent.SET_MAX_DATE, {
+        date: newMaxDate
+      });
+    }
+  }, [disabled, readOnly, minDate, maxDate, context.isDisabled, context.isReadonly]);
+
+  // Event handlers
+  const send = useCallback((eventType, payload) => {
+    machineRef.current?.send(eventType, payload);
+  }, []);
+  const openCalendar = useCallback(() => {
+    // Send CALENDAR_ICON_CLICK to trigger the state transition from IDLE
+    // The state machine will handle transitioning to CALENDAR_OPEN state
+    send(DatePickerEvent.CALENDAR_ICON_CLICK);
+  }, [send]);
+  const closeCalendar = useCallback(() => {
+    send(DatePickerEvent.CALENDAR_CLOSE);
+  }, [send]);
+  const selectDate = useCallback(date => {
+    if (datePickerType === 'range') {
+      if (!context.startDate || context.endDate) {
+        // Select start date
+        send(DatePickerEvent.RANGE_START_SELECT, {
+          date
+        });
+      } else {
+        // Select end date
+        send(DatePickerEvent.RANGE_END_SELECT, {
+          date
+        });
+        if (closeOnSelect) {
+          closeCalendar();
+        }
+      }
+    } else {
+      // Single date selection
+      send(DatePickerEvent.DATE_SELECT, {
+        date
+      });
+      if (closeOnSelect) {
+        closeCalendar();
+      }
+    }
+  }, [datePickerType, context.startDate, context.endDate, closeOnSelect, send, closeCalendar]);
+  const handleInputFocus = useCallback((inputType = 'from') => {
+    // Send INPUT_FOCUS to transition to FOCUSED state
+    send(DatePickerEvent.INPUT_FOCUS, {
+      inputType
+    });
+    // Then send CALENDAR_OPEN to open the calendar
+    // This matches the expected state machine flow: IDLE -> FOCUSED -> CALENDAR_OPEN
+    send(DatePickerEvent.CALENDAR_OPEN);
+  }, [send]);
+  const handleInputBlur = useCallback(() => {
+    send(DatePickerEvent.INPUT_BLUR);
+  }, [send]);
+  const handleInputChange = useCallback((value, inputType = 'from') => {
+    send(DatePickerEvent.VALUE_CHANGE, {
+      value,
+      inputType
+    });
+  }, [send]);
+
+  // Handle click outside to close calendar using shared utility
+  useEffect(() => {
+    if (!context.isOpen) {
+      return;
+    }
+    const handler = new ClickOutsideHandler({
+      isOpen: context.isOpen,
+      /**
+       * Check if a node is contained within the date picker elements
+       * @param {Node} node - The node to check
+       * @returns {boolean} True if the node is within the date picker
+       */
+      containsNode: node => {
+        const calendarEl = calendarRef.current;
+        const startInputEl = startInputRef.current;
+        const endInputEl = endInputRef.current;
+        return (calendarEl?.contains(node) ?? false) || (startInputEl?.contains(node) ?? false) || (endInputEl?.contains(node) ?? false);
+      },
+      /**
+       * Handle clicks outside the date picker
+       */
+      onOutsideClick: () => send(DatePickerEvent.OUTSIDE_CLICK),
+      useCapture: true,
+      attachDelay: 0
+    });
+    handler.attach();
+    return () => {
+      handler.detach();
+    };
+  }, [context.isOpen, send]);
+
+  // Handle keyboard events
+  useEffect(() => {
+    if (!context.isOpen) {
+      return;
+    }
+
+    /**
+     * Handle keyboard events for calendar navigation
+     *
+     * @param {KeyboardEvent} event - Keyboard event
+     */
+    const handleKeyDown = event => {
+      const {
+        key
+      } = event;
+      const target = event.target;
+
+      // Check if focus is in the calendar (not in input fields)
+      const calendarEl = calendarRef.current;
+      const startInputEl = startInputRef.current;
+      const endInputEl = endInputRef.current;
+      const isFocusInCalendar = calendarEl && (calendarEl.contains(target) || target === calendarEl || target.classList?.contains('cds--date-picker__calendar'));
+      const isFocusInInput = target === startInputEl || target === endInputEl || startInputEl && startInputEl.contains(target) || endInputEl && endInputEl.contains(target);
+
+      // Handle Escape key - close calendar (works from anywhere)
+      if (key === 'Escape') {
+        event.preventDefault();
+        send(DatePickerEvent.ESCAPE_KEY);
+        return;
+      }
+
+      // Handle Tab key - complex focus management
+      if (key === 'Tab') {
+        // Case 1: Tab FROM input -> Focus the calendar container
+        if (isFocusInInput && !event.shiftKey) {
+          event.preventDefault();
+          // Focus the calendar container which has tabIndex={0}
+          if (calendarEl) {
+            setTimeout(() => {
+              const calendar = calendarEl.querySelector('.cds--date-picker__calendar');
+              if (calendar) {
+                calendar.focus();
+              }
+            }, 0);
+          }
+          return;
+        }
+
+        // Case 2: Shift+Tab FROM calendar -> Focus input
+        if (isFocusInCalendar && event.shiftKey) {
+          event.preventDefault();
+          // Focus the appropriate input based on mode
+          if (datePickerType === 'range' && context.lastFocusedInput === 'to' && endInputEl) {
+            endInputEl.focus();
+          } else if (startInputEl) {
+            startInputEl.focus();
+          }
+          return;
+        }
+
+        // Case 3: Tab FROM calendar -> Close and move to next element
+        if (isFocusInCalendar && !event.shiftKey) {
+          // Let the state machine handle closing
+          send(DatePickerEvent.TAB_KEY);
+          // Don't prevent default - let browser move focus naturally
+          return;
+        }
+
+        // For other cases, let default Tab behavior work
+        return;
+      }
+
+      // Only handle navigation keys when focus is in calendar, not in input
+      if (!isFocusInCalendar || isFocusInInput) {
+        return;
+      }
+
+      // Use shared keyboard mapper for navigation keys
+      const mappedEvent = mapKeyboardToStateMachineEvent({
+        key,
+        shiftKey: event.shiftKey,
+        mode: datePickerType,
+        state,
+        focusedDate: context.focusedDate
+      });
+      if (mappedEvent) {
+        if (mappedEvent.preventDefault) {
+          event.preventDefault();
+        }
+        if (mappedEvent.eventType) {
+          send(mappedEvent.eventType, mappedEvent.payload);
+        }
+        return;
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [context.isOpen, context.focusedDate, context.lastFocusedInput, state, datePickerType, send]);
+  return {
+    context,
+    state,
+    isOpen: context.isOpen,
+    send,
+    openCalendar,
+    closeCalendar,
+    selectDate,
+    handleInputFocus,
+    handleInputBlur,
+    handleInputChange,
+    startInputRef,
+    endInputRef,
+    calendarRef
+  };
+}
+
+export { useDatePicker };

package/es/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { DatePicker } from './components/DatePicker';
+export { DatePickerInput } from './components/DatePickerInput';
+export { Calendar } from './components/Calendar';
+export { DatePickerSkeleton } from './components/DatePickerSkeleton';
+export { useDatePicker } from './hooks/useDatePicker';
+export type { DatePickerProps } from './components/DatePicker';
+export type { DatePickerInputProps } from './components/DatePickerInput';
+export type { CalendarProps } from './components/Calendar';
+export type { DatePickerSkeletonProps } from './components/DatePickerSkeleton';
+export type { UseDatePickerConfig, UseDatePickerReturn, } from './hooks/useDatePicker';
+export type { DatePickerContext, DatePickerMode, InputType, DateSelectPayload, InputFocusPayload, KeyboardPayload, ValueChangePayload, ValidationErrorPayload, StateTransition, } from '@carbon-labs/primitives/date-picker';
+export { DatePickerState, DatePickerEvent, } from '@carbon-labs/primitives/date-picker';

package/es/index.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { DatePicker } from './components/DatePicker.js';
+export { DatePickerInput } from './components/DatePickerInput.js';
+export { Calendar } from './components/Calendar.js';
+export { DatePickerSkeleton } from './components/DatePickerSkeleton.js';
+export { useDatePicker } from './hooks/useDatePicker.js';
+export { DatePickerEvent, DatePickerState } from '@carbon-labs/primitives/date-picker';

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+exports.extends = _extends;

package/lib/components/Calendar.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import type { DatePickerContext } from '@carbon-labs/primitives/date-picker';
+/**
+ * Calendar component props
+ */
+export interface CalendarProps {
+    /**
+     * State machine context
+     */
+    context: DatePickerContext;
+    /**
+     * Date selection handler
+     */
+    onDateSelect: (date: Temporal.PlainDate) => void;
+    /**
+     * Navigation handler
+     */
+    onNavigate: (eventType: string) => void;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Calendar component
+ * Renders a calendar grid for date selection
+ */
+export declare function Calendar({ context, onDateSelect, onNavigate, className, }: CalendarProps): React.JSX.Element | null;
+export declare namespace Calendar {
+    var displayName: string;
+}