@carbon-labs/react-date-picker 0.2.0

package/lib/components/Calendar.js

@@ -0,0 +1,269 @@
+/**
+ * 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';
+
+var React = require('react');
+var classNames = require('classnames');
+var datePicker = require('@carbon-labs/primitives/date-picker');
+
+var _svg, _svg2;
+
+/**
+ * Calendar component props
+ */
+
+/**
+ * Day cell in the calendar grid
+ */
+
+/**
+ * Generate calendar grid for a given month
+ *
+ * @param {Temporal.PlainDate} viewDate - The date to generate calendar for
+ * @param {Temporal.PlainDate | null} minDate - Minimum selectable date
+ * @param {Temporal.PlainDate | null} maxDate - Maximum selectable date
+ * @returns {DayCell[][]} 2D array of day cells (weeks x days)
+ */
+function generateCalendarGrid(viewDate, minDate, maxDate) {
+  const today = Temporal.Now.plainDateISO();
+  const firstDayOfMonth = viewDate.with({
+    day: 1
+  });
+
+  // Get the day of week for the first day (0 = Sunday)
+  // Convert Temporal dayOfWeek (1=Monday) to JS (0=Sunday)
+  const jsDate = datePicker.plainDateToDate(firstDayOfMonth);
+  const firstDayOfWeek = jsDate.getDay();
+
+  // Calculate start date (may be from previous month)
+  const startDate = datePicker.addDays(firstDayOfMonth, -firstDayOfWeek);
+
+  // Generate 6 weeks (42 days) to ensure consistent calendar height
+  const weeks = [];
+  let currentDate = startDate;
+  for (let week = 0; week < 6; week++) {
+    const days = [];
+    for (let day = 0; day < 7; day++) {
+      const isCurrentMonth = currentDate.month === viewDate.month;
+      const isToday = Temporal.PlainDate.compare(currentDate, today) === 0;
+
+      // Check if date is disabled
+      let isDisabled = false;
+      if (minDate && Temporal.PlainDate.compare(currentDate, minDate) < 0) {
+        isDisabled = true;
+      }
+      if (maxDate && Temporal.PlainDate.compare(currentDate, maxDate) > 0) {
+        isDisabled = true;
+      }
+      days.push({
+        date: currentDate,
+        isCurrentMonth,
+        isDisabled,
+        isToday
+      });
+      currentDate = datePicker.addDays(currentDate, 1);
+    }
+    weeks.push(days);
+  }
+  return weeks;
+}
+
+/**
+ * Calendar component
+ * Renders a calendar grid for date selection
+ */
+function Calendar({
+  context,
+  onDateSelect,
+  onNavigate,
+  className
+}) {
+  // Use Carbon's standard 'cds' prefix to match Carbon's date-picker styles
+  const prefix = 'cds';
+  const {
+    viewDate,
+    startDate,
+    endDate,
+    minDate,
+    maxDate,
+    focusedDate,
+    mode
+  } = context;
+
+  // Generate calendar grid
+  const calendarGrid = React.useMemo(() => {
+    if (!viewDate) {
+      return [];
+    }
+    return generateCalendarGrid(viewDate, minDate, maxDate);
+  }, [viewDate, minDate, maxDate]);
+
+  // Navigation handlers
+  const handlePrevMonth = React.useCallback(() => {
+    onNavigate('PREV_MONTH');
+  }, [onNavigate]);
+  const handleNextMonth = React.useCallback(() => {
+    onNavigate('NEXT_MONTH');
+  }, [onNavigate]);
+  const handleDateClick = React.useCallback((date, isDisabled) => {
+    if (!isDisabled) {
+      onDateSelect(date);
+    }
+  }, [onDateSelect]);
+
+  // Check if a date is selected
+  const isDateSelected = React.useCallback(date => {
+    if (!startDate) {
+      return false;
+    }
+    if (Temporal.PlainDate.compare(date, startDate) === 0) {
+      return true;
+    }
+    if (endDate && Temporal.PlainDate.compare(date, endDate) === 0) {
+      return true;
+    }
+    return false;
+  }, [startDate, endDate]);
+
+  // Check if a date is in the selected range
+  const isDateInRange = React.useCallback(date => {
+    if (mode !== 'range' || !startDate) {
+      return false;
+    }
+
+    // If endDate exists, use it for the range
+    if (endDate) {
+      return Temporal.PlainDate.compare(date, startDate) > 0 && Temporal.PlainDate.compare(date, endDate) < 0;
+    }
+
+    // If endDate doesn't exist but focusedDate does (user is selecting end date),
+    // show the range between startDate and focusedDate
+    if (focusedDate) {
+      const earlierDate = Temporal.PlainDate.compare(startDate, focusedDate) < 0 ? startDate : focusedDate;
+      const laterDate = Temporal.PlainDate.compare(startDate, focusedDate) < 0 ? focusedDate : startDate;
+      return Temporal.PlainDate.compare(date, earlierDate) > 0 && Temporal.PlainDate.compare(date, laterDate) < 0;
+    }
+    return false;
+  }, [mode, startDate, endDate, focusedDate]);
+
+  // Check if a date is the range start (not currently used but kept for future range styling)
+  React.useCallback(date => {
+    if (mode !== 'range' || !startDate) {
+      return false;
+    }
+    return Temporal.PlainDate.compare(date, startDate) === 0;
+  }, [mode, startDate]);
+
+  // Check if a date is the range end (not currently used but kept for future range styling)
+  React.useCallback(date => {
+    if (mode !== 'range' || !endDate) {
+      return false;
+    }
+    return Temporal.PlainDate.compare(date, endDate) === 0;
+  }, [mode, endDate]);
+
+  // Check if a date is focused
+  const isDateFocused = React.useCallback(date => {
+    if (!focusedDate) {
+      return false;
+    }
+    return Temporal.PlainDate.compare(date, focusedDate) === 0;
+  }, [focusedDate]);
+  if (!viewDate) {
+    return null;
+  }
+  const calendarClasses = classNames(`${prefix}--date-picker__calendar`, className);
+
+  // Format month and year for display
+  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  const monthYear = `${monthNames[viewDate.month - 1]} ${viewDate.year}`;
+  return /*#__PURE__*/React.createElement("div", {
+    className: calendarClasses,
+    role: "grid",
+    "aria-label": "Calendar",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker__month`
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: `${prefix}--date-picker__month-nav`,
+    onClick: handlePrevMonth,
+    "aria-label": "Previous month"
+  }, _svg || (_svg = /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    preserveAspectRatio: "xMidYMid meet",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z",
+    transform: "rotate(180 8 8)"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker__current-month`
+  }, monthYear), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: `${prefix}--date-picker__month-nav`,
+    onClick: handleNextMonth,
+    "aria-label": "Next month"
+  }, _svg2 || (_svg2 = /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    preserveAspectRatio: "xMidYMid meet",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker__weekdays`
+  }, ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => /*#__PURE__*/React.createElement("div", {
+    key: day,
+    className: `${prefix}--date-picker__weekday`,
+    title: day
+  }, day))), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker__days`
+  }, calendarGrid.flat().map((dayCell, index) => {
+    const {
+      date,
+      isCurrentMonth,
+      isDisabled,
+      isToday
+    } = dayCell;
+    const selected = isDateSelected(date);
+    const inRange = isDateInRange(date);
+    const focused = isDateFocused(date);
+    const dayClasses = classNames(`${prefix}--date-picker__day`, {
+      today: isToday,
+      selected: selected,
+      inRange: inRange,
+      prevMonthDay: !isCurrentMonth && date.month < viewDate.month,
+      nextMonthDay: !isCurrentMonth && date.month > viewDate.month,
+      disabled: isDisabled,
+      focused: focused
+    });
+    return /*#__PURE__*/React.createElement("button", {
+      key: index,
+      type: "button",
+      className: dayClasses,
+      onClick: () => handleDateClick(date, isDisabled),
+      disabled: isDisabled,
+      "aria-label": `${monthNames[date.month - 1]} ${date.day}, ${date.year}`,
+      "aria-pressed": selected || undefined,
+      "aria-current": isToday ? 'date' : undefined,
+      tabIndex: focused ? 0 : -1
+    }, date.day);
+  })));
+}
+Calendar.displayName = 'Calendar';
+
+exports.Calendar = Calendar;

package/lib/components/DatePicker.d.ts

@@ -0,0 +1,90 @@
+/**
+ * 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';
+/**
+ * DatePicker component props
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ */
+export interface DatePickerProps {
+    /**
+     * The type of date picker (Carbon API uses datePickerType, not mode)
+     */
+    datePickerType?: 'simple' | 'single' | 'range';
+    /**
+     * The date format string (Flatpickr-compatible format)
+     */
+    dateFormat?: string;
+    /**
+     * Minimum selectable date (mm/dd/yyyy format - Carbon API)
+     */
+    minDate?: string;
+    /**
+     * Maximum selectable date (mm/dd/yyyy format - Carbon API)
+     */
+    maxDate?: string;
+    /**
+     * Locale for date formatting
+     */
+    locale?: string;
+    /**
+     * Whether the picker is read-only (Carbon uses readOnly, not readonly)
+     */
+    readOnly?: boolean;
+    /**
+     * Whether to use the light variant
+     */
+    light?: boolean;
+    /**
+     * Whether to use the short variant
+     */
+    short?: boolean;
+    /**
+     * Whether to allow manual input
+     */
+    allowInput?: boolean;
+    /**
+     * Whether to close calendar on date selection
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Change handler - receives array of Date objects (Carbon API)
+     */
+    onChange?: (dates: Date[]) => void;
+    /**
+     * Close handler
+     */
+    onClose?: () => void;
+    /**
+     * Open handler
+     */
+    onOpen?: () => void;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Children (DatePickerInput components)
+     */
+    children?: React.ReactNode;
+    /**
+     * Initial value
+     */
+    value?: string;
+    /**
+     * Append the calendar to a specific element
+     */
+    appendTo?: HTMLElement;
+}
+/**
+ * DatePicker component
+ * Main wrapper component that orchestrates date picker functionality
+ * Maintains 100% backwards compatibility with Carbon React v11
+ */
+export declare function DatePicker({ datePickerType, dateFormat, minDate, maxDate, locale, readOnly, light, short, allowInput, closeOnSelect, onChange, onClose, onOpen, className, children, value, }: DatePickerProps): React.JSX.Element;
+export declare namespace DatePicker {
+    var displayName: string;
+}

package/lib/components/DatePicker.js

@@ -0,0 +1,184 @@
+/**
+ * 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';
+
+var React = require('react');
+var classNames = require('classnames');
+var useDatePicker = require('../hooks/useDatePicker.js');
+var Calendar = require('./Calendar.js');
+var datePicker = require('@carbon-labs/primitives/date-picker');
+
+/**
+ * DatePicker component props
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ */
+
+/**
+ * DatePicker component
+ * Main wrapper component that orchestrates date picker functionality
+ * Maintains 100% backwards compatibility with Carbon React v11
+ */
+function DatePicker({
+  datePickerType = 'single',
+  dateFormat = 'm/d/Y',
+  minDate,
+  maxDate,
+  locale = 'en',
+  readOnly = false,
+  light = false,
+  short = false,
+  allowInput = true,
+  closeOnSelect = true,
+  onChange,
+  onClose,
+  onOpen,
+  className,
+  children,
+  value
+}) {
+  const containerRef = React.useRef(null);
+
+  // Use Carbon's standard 'cds' prefix to match Carbon's date-picker styles
+  const prefix = 'cds';
+
+  // Use the date picker hook
+  const {
+    context,
+    isOpen,
+    selectDate,
+    openCalendar,
+    closeCalendar,
+    handleInputFocus,
+    handleInputBlur,
+    handleInputChange,
+    send,
+    startInputRef,
+    endInputRef,
+    calendarRef
+  } = useDatePicker.useDatePicker({
+    datePickerType,
+    value,
+    minDate,
+    maxDate,
+    dateFormat,
+    closeOnSelect,
+    readOnly,
+    onChange,
+    onOpen,
+    onClose
+  });
+
+  // Handle calendar navigation
+  const handleNavigate = eventType => {
+    send(eventType);
+  };
+
+  // Handle calendar icon click - toggle calendar open/close
+  const handleIconClick = () => {
+    if (isOpen) {
+      closeCalendar();
+    } else {
+      openCalendar();
+    }
+  };
+
+  // Clone children and inject props
+  const childArray = React.Children.toArray(children);
+  const enhancedChildren = childArray.map((child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
+    // Determine which input this is (start or end for range mode)
+    const isStartInput = index === 0;
+    const isEndInput = index === 1 && datePickerType === 'range';
+
+    // Get the appropriate ref
+    const inputRef = isStartInput ? startInputRef : isEndInput ? endInputRef : undefined;
+
+    // Get the appropriate value - always use a string to keep input controlled
+    let inputValue = child.props.value ?? '';
+    if (inputValue === '') {
+      if (isStartInput && context.startDate) {
+        inputValue = datePicker.formatPlainDate(context.startDate, context.dateFormat);
+      } else if (isEndInput && context.endDate) {
+        inputValue = datePicker.formatPlainDate(context.endDate, context.dateFormat);
+      }
+    }
+
+    // Clone the child with enhanced props
+    const enhancedProps = {
+      ...child.props,
+      value: inputValue,
+      // Always a string, never undefined
+      disabled: child.props.disabled || context.isDisabled,
+      readOnly: child.props.readOnly || readOnly,
+      onFocus: e => {
+        child.props.onFocus?.(e);
+        handleInputFocus(isEndInput ? 'to' : 'from');
+      },
+      onBlur: e => {
+        child.props.onBlur?.(e);
+        handleInputBlur();
+      },
+      onChange: e => {
+        child.props.onChange?.(e);
+        handleInputChange(e.target.value, isEndInput ? 'to' : 'from');
+      },
+      onIconClick: () => {
+        child.props.onIconClick?.();
+        handleIconClick();
+      },
+      hideIcon: datePickerType === 'simple' || child.props.hideIcon
+    };
+
+    // Wrap each input in a container div with proper Carbon classes
+    const containerClasses = classNames(`${prefix}--date-picker-container`, {
+      [`${prefix}--date-picker-container--single`]: datePickerType === 'single',
+      [`${prefix}--date-picker-container--from`]: isStartInput && datePickerType === 'range',
+      [`${prefix}--date-picker-container--to`]: isEndInput && datePickerType === 'range'
+    });
+
+    // Use cloneElement with ref separately to avoid TypeScript issues
+    return /*#__PURE__*/React.createElement("div", {
+      key: child.props.id,
+      className: containerClasses
+    }, /*#__PURE__*/React.cloneElement(child, {
+      ...enhancedProps,
+      // @ts-expect-error - ref is valid but TypeScript doesn't recognize it in cloneElement
+      ref: inputRef
+    }));
+  });
+
+  // Generate class names
+  const wrapperClasses = classNames(`${prefix}--date-picker`, {
+    [`${prefix}--date-picker--simple`]: datePickerType === 'simple',
+    [`${prefix}--date-picker--single`]: datePickerType === 'single',
+    [`${prefix}--date-picker--range`]: datePickerType === 'range',
+    [`${prefix}--date-picker--light`]: light,
+    [`${prefix}--date-picker--short`]: short,
+    [`${prefix}--date-picker--open`]: isOpen
+  }, className);
+
+  // Don't render calendar for simple mode
+  const shouldRenderCalendar = datePickerType !== 'simple' && isOpen;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: wrapperClasses
+  }, enhancedChildren, shouldRenderCalendar && /*#__PURE__*/React.createElement("div", {
+    ref: calendarRef,
+    className: `${prefix}--date-picker__calendar-container`
+  }, /*#__PURE__*/React.createElement(Calendar.Calendar, {
+    context: context,
+    onDateSelect: selectDate,
+    onNavigate: handleNavigate
+  })));
+}
+DatePicker.displayName = 'DatePicker';
+
+exports.DatePicker = DatePicker;

package/lib/components/DatePickerInput.d.ts

@@ -0,0 +1,139 @@
+/**
+ * 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';
+/**
+ * DatePickerInput component props
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ */
+export interface DatePickerInputProps {
+    /**
+     * The unique identifier for the input (required)
+     */
+    id: string;
+    /**
+     * The label text
+     */
+    labelText?: React.ReactNode;
+    /**
+     * The placeholder text
+     */
+    placeholder?: string;
+    /**
+     * The input size
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is invalid
+     */
+    invalid?: boolean;
+    /**
+     * The invalid text to display
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Whether the input has a warning
+     */
+    warn?: boolean;
+    /**
+     * The warning text to display
+     */
+    warnText?: React.ReactNode;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Whether to hide the label visually (still accessible)
+     */
+    hideLabel?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * The input value
+     */
+    value?: string;
+    /**
+     * Default value for uncontrolled component
+     */
+    defaultValue?: string;
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Focus handler
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Blur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Keydown handler
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Icon description for accessibility
+     */
+    iconDescription?: string;
+    /**
+     * Calendar icon click handler
+     */
+    onIconClick?: () => void;
+    /**
+     * Whether to show the calendar icon
+     */
+    hideIcon?: boolean;
+    /**
+     * Pattern for input validation
+     */
+    pattern?: string;
+    /**
+     * Type of input
+     */
+    type?: string;
+    /**
+     * Whether the input is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Autocomplete attribute
+     */
+    autoComplete?: string;
+    /**
+     * Name attribute
+     */
+    name?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Callback when calendar opens (for internal use)
+     */
+    onOpen?: () => void;
+    /**
+     * Decorator component (e.g., AI Label)
+     */
+    decorator?: React.ReactNode;
+    /**
+     * @deprecated Use `decorator` instead. Will be removed in next major version.
+     */
+    slug?: React.ReactNode;
+}
+/**
+ * DatePickerInput component
+ * Input field for date picker with Carbon Design System styling
+ * Maintains 100% backwards compatibility with Carbon React v11
+ */
+export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;