@carbon-labs/react-date-picker 0.2.0

package/lib/components/DatePickerInput.js

@@ -0,0 +1,151 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classNames = require('classnames');
+
+var _span, _svg;
+
+/**
+ * DatePickerInput component props
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ */
+
+/**
+ * DatePickerInput component
+ * Input field for date picker with Carbon Design System styling
+ * Maintains 100% backwards compatibility with Carbon React v11
+ */
+const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput({
+  id,
+  labelText,
+  placeholder = 'mm/dd/yyyy',
+  size = 'md',
+  disabled = false,
+  invalid = false,
+  invalidText,
+  warn = false,
+  warnText,
+  helperText,
+  hideLabel = false,
+  className,
+  value,
+  defaultValue,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  iconDescription = 'Open calendar',
+  onIconClick,
+  hideIcon = false,
+  pattern,
+  type = 'text',
+  readOnly = false,
+  autoComplete = 'off',
+  name,
+  required = false,
+  onOpen: _onOpen,
+  decorator,
+  slug,
+  ...rest
+}, ref) {
+  // Use Carbon's standard 'cds' prefix to match Carbon's date-picker styles
+  const prefix = 'cds';
+
+  // Check if decorator/slug is an AILabel component
+  const candidate = decorator || slug;
+  const isAILabel = candidate && /*#__PURE__*/React.isValidElement(candidate) && candidate.type?.displayName === 'AILabel';
+
+  // Clone AILabel with size='mini' if it's an AILabel
+  const normalizedDecorator = isAILabel && /*#__PURE__*/React.isValidElement(candidate) ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini'
+  }) : candidate;
+
+  // Generate class names following Carbon Design System patterns
+  const wrapperClasses = classNames(`${prefix}--date-picker-input__wrapper`, className, {
+    [`${prefix}--date-picker-input__wrapper--slug`]: slug,
+    [`${prefix}--date-picker-input__wrapper--decorator`]: decorator
+  });
+  const inputClasses = classNames(`${prefix}--date-picker__input`, {
+    [`${prefix}--date-picker__input--sm`]: size === 'sm',
+    [`${prefix}--date-picker__input--lg`]: size === 'lg',
+    [`${prefix}--date-picker__input--invalid`]: invalid,
+    [`${prefix}--date-picker__input--warn`]: warn && !invalid
+  });
+  const labelClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: disabled
+  });
+
+  // Determine which validation message to show
+  const showInvalidText = invalid && invalidText;
+  const showWarnText = !invalid && warn && warnText;
+  const showHelperText = !invalid && !warn && helperText;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, labelText && /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText, required && (_span || (_span = /*#__PURE__*/React.createElement("span", {
+    className: `${prefix}--label__required`
+  }, "*")))), /*#__PURE__*/React.createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({}, rest, {
+    ref: ref,
+    id: id,
+    name: name,
+    type: type,
+    className: inputClasses,
+    placeholder: placeholder,
+    value: value,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    readOnly: readOnly,
+    pattern: pattern,
+    autoComplete: autoComplete,
+    required: required,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    "aria-invalid": invalid || undefined,
+    "aria-describedby": showInvalidText ? `${id}-error` : showWarnText ? `${id}-warn` : showHelperText ? `${id}-helper` : undefined
+  })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker-input-inner-wrapper--decorator`
+  }, normalizedDecorator) : null, !hideIcon && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: `${prefix}--date-picker__icon`,
+    onClick: onIconClick,
+    disabled: disabled || readOnly,
+    "aria-label": iconDescription,
+    tabIndex: -1
+  }, _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 32 32",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20  V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"
+  })))))), showInvalidText && /*#__PURE__*/React.createElement("div", {
+    id: `${id}-error`,
+    className: `${prefix}--form-requirement`
+  }, invalidText), showWarnText && /*#__PURE__*/React.createElement("div", {
+    id: `${id}-warn`,
+    className: `${prefix}--form-requirement`
+  }, warnText), showHelperText && /*#__PURE__*/React.createElement("div", {
+    id: `${id}-helper`,
+    className: `${prefix}--form__helper-text`
+  }, helperText));
+});
+DatePickerInput.displayName = 'DatePickerInput';
+
+exports.DatePickerInput = DatePickerInput;

package/lib/components/DatePickerSkeleton.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 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';
+export interface DatePickerSkeletonProps {
+    /**
+     * Specify whether the skeleton should be a range date picker
+     */
+    range?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * DatePickerSkeleton component for loading states
+ */
+export declare const DatePickerSkeleton: React.FC<DatePickerSkeletonProps>;
+export default DatePickerSkeleton;

package/lib/components/DatePickerSkeleton.js

@@ -0,0 +1,41 @@
+/**
+ * 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 _div, _div2;
+/**
+ * DatePickerSkeleton component for loading states
+ */
+const DatePickerSkeleton = ({
+  range = false,
+  className
+}) => {
+  // Use 'cds' prefix to match Carbon's skeleton styles
+  const prefix = 'cds';
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--form-item`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker ${prefix}--date-picker--${range ? 'range' : 'single'} ${prefix}--skeleton ${className || ''}`
+  }, _div || (_div = /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker-container`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker__input ${prefix}--skeleton`
+  }))), range && (_div2 || (_div2 = /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker-container`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--date-picker__input ${prefix}--skeleton`
+  }))))));
+};
+
+exports.DatePickerSkeleton = DatePickerSkeleton;

package/lib/hooks/useDatePicker.d.ts

@@ -0,0 +1,130 @@
+/**
+ * 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 { DatePickerState, type DatePickerContext } from '@carbon-labs/primitives/date-picker';
+/**
+ * Configuration for the useDatePicker hook
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ */
+export interface UseDatePickerConfig {
+    /**
+     * The type of date picker (Carbon API uses datePickerType, not mode)
+     */
+    datePickerType?: 'simple' | 'single' | 'range';
+    /**
+     * Initial value as ISO date string
+     */
+    value?: string;
+    /**
+     * Minimum selectable date (mm/dd/yyyy format - Carbon API)
+     */
+    minDate?: string | null;
+    /**
+     * Maximum selectable date (mm/dd/yyyy format - Carbon API)
+     */
+    maxDate?: string | null;
+    /**
+     * Date format string (Flatpickr-compatible format)
+     */
+    dateFormat?: string;
+    /**
+     * Whether to allow manual input
+     */
+    allowInput?: boolean;
+    /**
+     * Whether to close calendar on date selection
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the picker is read-only (Carbon uses readOnly, not readonly)
+     */
+    readOnly?: boolean;
+    /**
+     * Locale for date formatting
+     */
+    locale?: string;
+    /**
+     * Change handler - receives array of Date objects (Carbon API)
+     */
+    onChange?: (dates: Date[]) => void;
+    /**
+     * Open handler
+     */
+    onOpen?: () => void;
+    /**
+     * Close handler
+     */
+    onClose?: () => void;
+}
+/**
+ * Return type for the useDatePicker hook
+ */
+export interface UseDatePickerReturn {
+    /**
+     * Current state machine context
+     */
+    context: DatePickerContext;
+    /**
+     * Current state
+     */
+    state: DatePickerState;
+    /**
+     * Whether the calendar is open
+     */
+    isOpen: boolean;
+    /**
+     * Send an event to the state machine
+     */
+    send: (eventType: string, payload?: any) => void;
+    /**
+     * Open the calendar
+     */
+    openCalendar: () => void;
+    /**
+     * Close the calendar
+     */
+    closeCalendar: () => void;
+    /**
+     * Select a date
+     */
+    selectDate: (date: Temporal.PlainDate) => void;
+    /**
+     * Handle input focus
+     */
+    handleInputFocus: (inputType?: 'from' | 'to') => void;
+    /**
+     * Handle input blur
+     */
+    handleInputBlur: () => void;
+    /**
+     * Handle input value change
+     */
+    handleInputChange: (value: string, inputType?: 'from' | 'to') => void;
+    /**
+     * Ref for the start input
+     */
+    startInputRef: React.RefObject<HTMLInputElement>;
+    /**
+     * Ref for the end input (range mode)
+     */
+    endInputRef: React.RefObject<HTMLInputElement>;
+    /**
+     * Ref for the calendar container
+     */
+    calendarRef: React.RefObject<HTMLDivElement>;
+}
+/**
+ * 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
+ */
+export declare function useDatePicker(config?: UseDatePickerConfig): UseDatePickerReturn;