@carbon/react 1.113.0 → 1.114.0

package/lib/components/DatePicker/next/components/DatePicker.js

@@ -0,0 +1,150 @@
+/**
+ * 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.
+ */
+
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
+const require_usePrefix = require("../../../../internal/usePrefix.js");
+const require_useDatePicker = require("../hooks/useDatePicker.js");
+const require_Calendar = require("./Calendar.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_utilities_date_picker = require("@carbon/utilities/date-picker");
+//#region src/components/DatePicker/next/components/DatePicker.tsx
+/**
+* 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.
+*/
+/**
+* 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 = (0, react.useRef)(null);
+	const prefix = require_usePrefix.usePrefix();
+	const { context, isOpen, selectDate, openCalendar, closeCalendar, handleInputFocus, handleInputBlur, handleInputChange, send, startInputRef, endInputRef, calendarRef, exitSentinelRef, handleExitSentinelFocus } = require_useDatePicker.useDatePicker({
+		datePickerType,
+		value,
+		minDate,
+		maxDate,
+		dateFormat,
+		allowInput,
+		closeOnSelect,
+		readOnly,
+		locale,
+		onChange,
+		onOpen,
+		onClose
+	});
+	const handleNavigate = (eventType) => {
+		send(eventType);
+	};
+	const handleIconClick = () => {
+		if (isOpen) closeCalendar();
+		else openCalendar();
+	};
+	const enhancedChildren = react.Children.toArray(children).map((child, index) => {
+		if (!(0, react.isValidElement)(child)) return child;
+		const isStartInput = index === 0;
+		const isEndInput = index === 1 && datePickerType === "range";
+		const inputRef = isStartInput ? startInputRef : isEndInput ? endInputRef : void 0;
+		let inputValue = child.props.value ?? "";
+		if (inputValue === "") {
+			if (isStartInput && context.startDate) inputValue = (0, _carbon_utilities_date_picker.formatPlainDate)(context.startDate, context.dateFormat);
+			else if (isEndInput && context.endDate) inputValue = (0, _carbon_utilities_date_picker.formatPlainDate)(context.endDate, context.dateFormat);
+		}
+		const enhancedProps = {
+			...child.props,
+			value: inputValue,
+			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");
+			},
+			onClick: (e) => {
+				child.props.onClick?.(e);
+				if (!isOpen) openCalendar();
+			},
+			onKeyDown: (e) => {
+				child.props.onKeyDown?.(e);
+				if (!e.defaultPrevented && e.key === "Tab" && !e.shiftKey && !isOpen) {
+					e.preventDefault();
+					openCalendar();
+				}
+			},
+			onIconClick: () => {
+				child.props.onIconClick?.();
+				handleIconClick();
+			},
+			hideIcon: datePickerType === "simple" || child.props.hideIcon
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, classnames.default)(`${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"
+			}),
+			children: react.default.createElement(child.type, {
+				...child.props,
+				...enhancedProps,
+				ref: inputRef
+			})
+		}, child.props.id);
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		className: (0, classnames.default)(`${prefix}--date-picker`, `${prefix}--date-picker--next`, {
+			[`${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),
+		children: [
+			enhancedChildren,
+			datePickerType !== "simple" && isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: calendarRef,
+				className: `${prefix}--date-picker__calendar-container`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, {
+					context,
+					onDateSelect: selectDate,
+					onNavigate: handleNavigate,
+					locale
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				ref: exitSentinelRef,
+				tabIndex: -1,
+				"aria-hidden": true,
+				onFocus: handleExitSentinelFocus,
+				style: {
+					position: "absolute",
+					width: 0,
+					height: 0,
+					overflow: "hidden"
+				}
+			})
+		]
+	});
+}
+DatePicker.displayName = "DatePicker";
+//#endregion
+exports.DatePicker = DatePicker;

package/lib/components/DatePicker/next/components/DatePickerInput.d.ts

@@ -0,0 +1,143 @@
+/**
+ * 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;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<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>>;

package/lib/components/DatePicker/next/components/DatePickerInput.js

@@ -0,0 +1,127 @@
+/**
+ * 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.
+ */
+
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
+const require_usePrefix = require("../../../../internal/usePrefix.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/DatePicker/next/components/DatePickerInput.tsx
+/**
+* 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.
+*/
+/**
+* DatePickerInput component
+* Input field for date picker with Carbon Design System styling
+* Maintains 100% backwards compatibility with Carbon React v11
+*/
+const DatePickerInput = (0, 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, onClick, iconDescription = "Open calendar", onIconClick, hideIcon = false, pattern, type = "text", readOnly = false, autoComplete = "off", name, required = false, onOpen: _onOpen, decorator, slug, ...rest }, ref) {
+	const prefix = require_usePrefix.usePrefix();
+	const candidate = decorator || slug;
+	const normalizedDecorator = candidate && (0, react.isValidElement)(candidate) && candidate.type?.displayName === "AILabel" && (0, react.isValidElement)(candidate) ? (0, react.cloneElement)(candidate, { size: "mini" }) : candidate;
+	const wrapperClasses = (0, classnames.default)(`${prefix}--date-picker-input__wrapper`, className, {
+		[`${prefix}--date-picker-input__wrapper--slug`]: slug,
+		[`${prefix}--date-picker-input__wrapper--decorator`]: decorator
+	});
+	const inputClasses = (0, classnames.default)(`${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 = (0, classnames.default)(`${prefix}--label`, {
+		[`${prefix}--visually-hidden`]: hideLabel,
+		[`${prefix}--label--disabled`]: disabled
+	});
+	const showInvalidText = invalid && invalidText;
+	const showWarnText = !invalid && warn && warnText;
+	const showHelperText = !invalid && !warn && helperText;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		labelText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			htmlFor: id,
+			className: labelClasses,
+			children: [labelText, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `${prefix}--label__required`,
+				children: "*"
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: wrapperClasses,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					...rest,
+					ref,
+					id,
+					name,
+					type,
+					className: inputClasses,
+					placeholder,
+					value,
+					defaultValue,
+					disabled,
+					readOnly,
+					pattern,
+					autoComplete,
+					required,
+					onChange,
+					onFocus,
+					onBlur,
+					onKeyDown,
+					onClick,
+					"aria-invalid": invalid || void 0,
+					"aria-describedby": showInvalidText ? `${id}-error` : showWarnText ? `${id}-warn` : showHelperText ? `${id}-helper` : void 0
+				}),
+				slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefix}--date-picker-input-inner-wrapper--decorator`,
+					children: normalizedDecorator
+				}) : null,
+				!hideIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: `${prefix}--date-picker__icon`,
+					onClick: onIconClick,
+					disabled: disabled || readOnly,
+					"aria-label": iconDescription,
+					tabIndex: -1,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("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",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("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__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: `${id}-error`,
+			className: `${prefix}--form-requirement`,
+			children: invalidText
+		}),
+		showWarnText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: `${id}-warn`,
+			className: `${prefix}--form-requirement`,
+			children: warnText
+		}),
+		showHelperText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: `${id}-helper`,
+			className: `${prefix}--form__helper-text`,
+			children: helperText
+		})
+	] });
+});
+DatePickerInput.displayName = "DatePickerInput";
+//#endregion
+exports.DatePickerInput = DatePickerInput;

package/lib/components/DatePicker/next/components/DatePickerSkeleton.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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';
+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/DatePicker/next/components/DatePickerSkeleton.js

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
+const require_usePrefix = require("../../../../internal/usePrefix.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/DatePicker/next/components/DatePickerSkeleton.tsx
+/**
+* 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.
+*/
+/**
+* DatePickerSkeleton component for loading states
+*/
+const DatePickerSkeleton = ({ range = false, className }) => {
+	const prefix = require_usePrefix.usePrefix();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `${prefix}--form-item`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `${prefix}--date-picker ${prefix}--date-picker--next ${prefix}--date-picker--${range ? "range" : "single"} ${prefix}--skeleton ${className || ""}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${prefix}--date-picker-container`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--date-picker__input ${prefix}--skeleton` })]
+			}), range && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${prefix}--date-picker-container`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--date-picker__input ${prefix}--skeleton` })]
+			})]
+		})
+	});
+};
+//#endregion
+exports.DatePickerSkeleton = DatePickerSkeleton;
+exports.default = DatePickerSkeleton;

package/lib/components/DatePicker/next/hooks/useDatePicker.d.ts

@@ -0,0 +1,144 @@
+/**
+ * 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 { type RefObject } from 'react';
+import { DatePickerState, type DatePickerContext } from '@carbon/utilities/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;
+    /**
+     * Ref to attach to the exit sentinel element in the render tree.
+     * The sentinel is a visually-hidden, aria-hidden span placed just after the
+     * calendar container.  It has tabindex="-1" by default and is briefly set to
+     * tabindex="0" when Tab is pressed from the calendar so the browser delivers
+     * focus there naturally — no DOM scan needed.
+     */
+    exitSentinelRef: RefObject<HTMLSpanElement | null>;
+    /**
+     * onFocus handler to attach to the exit sentinel element.
+     * Restores tabindex="-1" on the sentinel and closes the calendar if still open.
+     */
+    handleExitSentinelFocus: () => void;
+    /**
+     * Current state
+     */
+    state: DatePickerState;
+    /**
+     * Whether the calendar is open
+     */
+    isOpen: boolean;
+    /**
+     * Send an event to the state machine
+     */
+    send: (eventType: string, payload?: unknown) => 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 | null>;
+    /**
+     * Ref for the end input (range mode)
+     */
+    endInputRef: React.RefObject<HTMLInputElement | null>;
+    /**
+     * Ref for the calendar container
+     */
+    calendarRef: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * 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;