@carbon/react 1.113.0 → 1.114.0-rc.0

package/es/index.js

@@ -98,6 +98,7 @@ import DataTableSkeleton from "./components/DataTableSkeleton/DataTableSkeleton.
 import DatePickerInput from "./components/DatePickerInput/DatePickerInput.js";
 import DatePicker from "./components/DatePicker/DatePicker.js";
 import { DatePickerSkeleton } from "./components/DatePicker/DatePicker.Skeleton.js";
+import { next_exports } from "./components/DatePicker/next/index.js";
 import Dropdown from "./components/Dropdown/Dropdown.js";
 import { DropdownSkeleton } from "./components/Dropdown/Dropdown.Skeleton.js";
 import { ErrorBoundaryContext } from "./components/ErrorBoundary/ErrorBoundaryContext.js";
@@ -250,4 +251,4 @@ import { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from
 * LICENSE file in the root directory of this source tree.
 */
 //#endregion
-export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineCheckbox, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };
+export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineCheckbox, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, next_exports as preview__DatePicker, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };

package/es/internal/checkForOverflow.d.ts

@@ -0,0 +1,5 @@
+/**
+ * used to calculate if a element is overflowing the width or height of an area
+ */
+export declare const checkWidthOverflow: (el: HTMLElement | null) => boolean;
+export declare const checkHeightOverflow: (el: HTMLElement | null) => boolean;

package/es/internal/useFocus.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ *
+ * 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 { RefObject } from 'react';
+/**
+ * Returns the first element matching `selector` within `container`, or null.
+TO DO: This hook will be removed https://github.com/carbon-design-system/ibm-products/issues/7731
+*/
+export declare const getSpecificElement: (container: HTMLElement | null, selector: string) => HTMLElement | null;
+/**
+ * Provides focus-trap helpers for a panel/modal container.
+ *
+ * - `firstElement` – the first tabbable element inside the container.
+ * - `keyDownListener` – an `onKeyDown` handler that cycles focus between the
+ *   first and last tabbable elements (Tab / Shift+Tab wrap-around).
+ */
+export declare const useFocus: (ref: RefObject<HTMLElement | null>) => {
+    firstElement: HTMLElement | null;
+    keyDownListener: (event: React.KeyboardEvent | KeyboardEvent) => void;
+};

package/es/internal/usePrefersReducedMotion.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Returns `true` when the user has requested reduced motion via the
+ * `prefers-reduced-motion: reduce` media query.
+ */
+export declare const usePrefersReducedMotion: () => boolean;

package/es/internal/useSidePanelPresence.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ *
+ * 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 { RefObject } from 'react';
+/**
+ * Controls the presence (mount/unmount) of a panel element, waiting for a
+ * named CSS exit animation to finish before removing it from the DOM.
+ *
+ * Signature mirrors the `usePresence` hook from `@carbon/ibm-products`:
+ *   `usePresence(open, ref, exitAnimationName)` → `{ shouldRender }`
+ *
+ * @param open - Whether the panel is currently open.
+ * @param ref - Ref to the panel's root DOM element.
+ * @param exitAnimationName - The CSS `animation-name` value used on exit.
+ */
+export declare const useSidePanelPresence: (open: boolean, ref: RefObject<HTMLElement | null>, exitAnimationName: string) => {
+    shouldRender: boolean;
+};

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

@@ -19,6 +19,8 @@ export interface DatePickerProps {
     allowInput?: boolean;
     /**
      * The DOM element the flatpickr should be inserted into `<body>` by default.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr.
      */
     appendTo?: HTMLElement;
     /**
@@ -47,14 +49,20 @@ export interface DatePickerProps {
     datePickerType?: DatePickerTypes;
     /**
      * The flatpickr `disable` option that allows a user to disable certain dates.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr
      */
     disable?: DateLimit<DateOption>[];
     /**
      * The flatpickr `enable` option that allows a user to enable certain dates.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr
      */
     enable?: DateLimit<DateOption>[];
     /**
      * The flatpickr `inline` option.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr
      */
     inline?: boolean;
     /**
@@ -91,6 +99,8 @@ export interface DatePickerProps {
     onOpen?: flatpickr.Options.Hook;
     /**
      * flatpickr prop passthrough. Controls how dates are parsed.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr
      */
     parseDate?: (date: string) => Date | false;
     /**

package/lib/components/DatePicker/DatePicker.js

@@ -46,6 +46,7 @@ function initializeWeekdayShorthand() {
 }
 const forEach = Array.prototype.forEach;
 const defaultAriaDateFormat = "l, F j, Y";
+const flatpickrDeprecation = (prop) => `The \`${prop}\` prop is deprecated and will be removed in the next major release. Please use the new \`preview__DatePicker\` component which doesn't use it — if that blocks you, tell us why: https://github.com/carbon-design-system/carbon/issues.`;
 /**
 * @param {number} monthNumber The month number.
 * @param {boolean} shorthand `true` to use shorthand month.
@@ -461,7 +462,7 @@ DatePicker.propTypes = {
 	/**
 	* The DOM element the Flatpicker should be inserted into. `<body>` by default.
 	*/
-	appendTo: prop_types.default.object,
+	appendTo: require_deprecate.deprecate(prop_types.default.object, flatpickrDeprecation("appendTo")),
 	/**
 	* The child nodes.
 	*/
@@ -493,15 +494,15 @@ DatePicker.propTypes = {
 	/**
 	* The flatpickr `disable` option that allows a user to disable certain dates.
 	*/
-	disable: prop_types.default.array,
+	disable: require_deprecate.deprecate(prop_types.default.array, flatpickrDeprecation("disable")),
 	/**
 	* The flatpickr `enable` option that allows a user to enable certain dates.
 	*/
-	enable: prop_types.default.array,
+	enable: require_deprecate.deprecate(prop_types.default.array, flatpickrDeprecation("enable")),
 	/**
 	* The flatpickr `inline` option.
 	*/
-	inline: prop_types.default.bool,
+	inline: require_deprecate.deprecate(prop_types.default.bool, flatpickrDeprecation("inline")),
 	/**
 	* Specify whether or not the control is invalid (Fluid only)
 	*/
@@ -540,7 +541,7 @@ DatePicker.propTypes = {
 	/**
 	* flatpickr prop passthrough. Controls how dates are parsed.
 	*/
-	parseDate: prop_types.default.func,
+	parseDate: require_deprecate.deprecate(prop_types.default.func, flatpickrDeprecation("parseDate")),
 	/**
 	* whether the DatePicker is to be readOnly
 	* if boolean applies to all inputs

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

@@ -0,0 +1,40 @@
+/**
+ * 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 { DatePickerContext } from '@carbon/utilities/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;
+    /**
+     * BCP 47 locale tag used to localize month and weekday labels
+     */
+    locale?: string;
+}
+/**
+ * Calendar component
+ * Renders a calendar grid for date selection
+ */
+export declare function Calendar({ context, onDateSelect, onNavigate, className, locale, }: CalendarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Calendar {
+    var displayName: string;
+}

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

@@ -0,0 +1,184 @@
+/**
+ * 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");
+let _carbon_utilities_date_picker = require("@carbon/utilities/date-picker");
+//#region src/components/DatePicker/next/components/Calendar.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.
+*/
+/**
+* Calendar component
+* Renders a calendar grid for date selection
+*/
+function Calendar({ context, onDateSelect, onNavigate, className, locale = "en" }) {
+	const prefix = require_usePrefix.usePrefix();
+	const { viewDate, startDate, endDate, minDate, maxDate, focusedDate, mode } = context;
+	const [hoveredDate, setHoveredDate] = (0, react.useState)(null);
+	const calendarGrid = (0, react.useMemo)(() => {
+		if (!viewDate) return [];
+		return (0, _carbon_utilities_date_picker.generateCalendarGrid)(viewDate, minDate, maxDate);
+	}, [
+		viewDate,
+		minDate,
+		maxDate
+	]);
+	const handlePrevMonth = (0, react.useCallback)(() => {
+		onNavigate("PREV_MONTH");
+	}, [onNavigate]);
+	const handleNextMonth = (0, react.useCallback)(() => {
+		onNavigate("NEXT_MONTH");
+	}, [onNavigate]);
+	const handleDateClick = (0, react.useCallback)((date, isDisabled) => {
+		if (!isDisabled) onDateSelect(date);
+	}, [onDateSelect]);
+	const isDateSelected = (0, 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]);
+	const isDateInRange = (0, react.useCallback)((date) => {
+		if (mode !== "range" || !startDate) return false;
+		if (endDate) return Temporal.PlainDate.compare(date, startDate) > 0 && Temporal.PlainDate.compare(date, endDate) < 0;
+		const previewDate = hoveredDate || focusedDate;
+		if (previewDate) {
+			if (minDate && Temporal.PlainDate.compare(previewDate, minDate) < 0 || maxDate && Temporal.PlainDate.compare(previewDate, maxDate) > 0) return false;
+			const earlierDate = Temporal.PlainDate.compare(startDate, previewDate) < 0 ? startDate : previewDate;
+			const laterDate = Temporal.PlainDate.compare(startDate, previewDate) < 0 ? previewDate : startDate;
+			return Temporal.PlainDate.compare(date, earlierDate) > 0 && Temporal.PlainDate.compare(date, laterDate) < 0;
+		}
+		return false;
+	}, [
+		mode,
+		startDate,
+		endDate,
+		hoveredDate,
+		focusedDate,
+		minDate,
+		maxDate
+	]);
+	const isDateFocused = (0, react.useCallback)((date) => {
+		if (!focusedDate) return false;
+		return Temporal.PlainDate.compare(date, focusedDate) === 0;
+	}, [focusedDate]);
+	if (!viewDate) return null;
+	const calendarClasses = (0, classnames.default)(`${prefix}--date-picker__calendar`, className);
+	const monthYear = (0, _carbon_utilities_date_picker.getMonthYearLabel)(viewDate, locale);
+	const weekdayLabels = (0, _carbon_utilities_date_picker.getWeekdayLabels)(locale);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: calendarClasses,
+		role: "grid",
+		"aria-label": "Calendar",
+		tabIndex: 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${prefix}--date-picker__month`,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: `${prefix}--date-picker__month-nav`,
+						onClick: handlePrevMonth,
+						"aria-label": "Previous month",
+						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 16 16",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+								d: "M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z",
+								transform: "rotate(180 8 8)"
+							})
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `${prefix}--date-picker__current-month`,
+						children: monthYear
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: `${prefix}--date-picker__month-nav`,
+						onClick: handleNextMonth,
+						"aria-label": "Next month",
+						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 16 16",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z" })
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefix}--date-picker__weekdays`,
+				children: weekdayLabels.map((day, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefix}--date-picker__weekday`,
+					title: day,
+					children: day
+				}, index))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefix}--date-picker__days`,
+				children: calendarGrid.flat().map((dayCell, index) => {
+					const { date, isCurrentMonth, isDisabled, isToday } = dayCell;
+					const selected = isDateSelected(date);
+					const inRange = isDateInRange(date);
+					const focused = isDateFocused(date);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: (0, classnames.default)(`${prefix}--date-picker__day`, {
+							today: isToday,
+							selected,
+							inRange,
+							prevMonthDay: !isCurrentMonth && date.month < viewDate.month,
+							nextMonthDay: !isCurrentMonth && date.month > viewDate.month,
+							disabled: isDisabled,
+							focused
+						}),
+						onMouseDown: (event) => {
+							event.preventDefault();
+						},
+						onMouseEnter: () => {
+							if (mode === "range" && startDate && !endDate) setHoveredDate(date);
+						},
+						onMouseLeave: () => {
+							setHoveredDate(null);
+						},
+						onClick: () => handleDateClick(date, isDisabled),
+						disabled: isDisabled,
+						"aria-label": (0, _carbon_utilities_date_picker.getFullDateLabel)(date, locale),
+						"aria-pressed": selected || void 0,
+						"aria-current": isToday ? "date" : void 0,
+						tabIndex: focused ? 0 : -1,
+						children: date.day
+					}, index);
+				})
+			})
+		]
+	});
+}
+Calendar.displayName = "Calendar";
+//#endregion
+exports.Calendar = Calendar;

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

@@ -0,0 +1,86 @@
+/**
+ * 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
+     */
+    datePickerType?: 'simple' | 'single' | 'range';
+    /**
+     * The date format string
+     */
+    dateFormat?: string;
+    /**
+     * Minimum selectable date (mm/dd/yyyy format)
+     */
+    minDate?: string;
+    /**
+     * Maximum selectable date (mm/dd/yyyy format)
+     */
+    maxDate?: string;
+    /**
+     * Locale for date formatting
+     */
+    locale?: string;
+    /**
+     * Whether the picker is read-only
+     */
+    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
+     */
+    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;
+}
+/**
+ * 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): import("react/jsx-runtime").JSX.Element;
+export declare namespace DatePicker {
+    var displayName: string;
+}

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;