@carbon/react 1.86.0 → 1.87.0

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -8,9 +8,9 @@
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
+    enumerable: true,
+    configurable: true,
+    writable: true
   }) : e[r] = t, e;
 }
 function _extends() {
@@ -26,7 +26,7 @@ function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r || "default");
+    var i = e.call(t, r);
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }

package/es/components/Button/Button.Skeleton.js

@@ -22,6 +22,7 @@ const ButtonSkeleton = ({
   const buttonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,
     [`${prefix}--btn`]: true,
+    [`${prefix}--btn--xs`]: size === 'xs',
     [`${prefix}--btn--sm`]: small || size === 'sm',
     [`${prefix}--btn--md`]: size === 'md',
     [`${prefix}--btn--lg`]: size === 'lg',
@@ -54,7 +55,7 @@ ButtonSkeleton.propTypes = {
    * For `default` buttons, this prop can remain unspecified or use `default`.
    * In the next major release of Carbon, `default`, `field`, and `small` will be removed
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
   /**
    * @deprecated This property will be removed in the next major Carbon version,
    * use size={sm} instead.

package/es/components/Button/Button.d.ts

@@ -9,7 +9,7 @@ import { IconButtonKind } from '../IconButton';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export declare const ButtonKinds: readonly ["primary", "secondary", "danger", "ghost", "danger--primary", "danger--ghost", "danger--tertiary", "tertiary"];
 export type ButtonKind = (typeof ButtonKinds)[number];
-export declare const ButtonSizes: readonly ["sm", "md", "lg", "xl", "2xl"];
+export declare const ButtonSizes: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
 export type ButtonSize = (typeof ButtonSizes)[number];
 export declare const ButtonTooltipAlignments: readonly ["start", "center", "end"];
 export type ButtonTooltipAlignment = (typeof ButtonTooltipAlignments)[number];

package/es/components/Button/Button.js

@@ -8,11 +8,11 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { IconButton, IconButtonKinds } from '../IconButton/index.js';
+import { IconButtonKinds, IconButton } from '../IconButton/index.js';
 import ButtonBase from './ButtonBase.js';
 
 const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary'];
-const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
+const ButtonSizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
 const ButtonTooltipAlignments = ['start', 'center', 'end'];
 const ButtonTooltipPositions = ['top', 'right', 'bottom', 'left'];
 function isIconOnlyButton(hasIconOnly, _kind) {
@@ -210,7 +210,7 @@ Button.propTypes = {
   /**
    * Specify the size of the button, from the following list of sizes:
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
   /**
    * Optional prop to specify the tabIndex of the Button
    */

package/es/components/Button/ButtonBase.js

@@ -36,6 +36,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase({
   const prefix = usePrefix();
   const buttonClasses = cx(className, {
     [`${prefix}--btn`]: true,
+    [`${prefix}--btn--xs`]: size === 'xs' && !isExpressive,
+    // TODO: V12 - Remove this class
     [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
     // TODO: V12 - Remove this class
     [`${prefix}--btn--md`]: size === 'md' && !isExpressive,

package/es/components/Button/index.js

@@ -6,5 +6,9 @@
  */
 
 import Button from './Button.js';
-export { default as Button, ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions, default } from './Button.js';
+export { ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions } from './Button.js';
 export { default as ButtonSkeleton } from './Button.Skeleton.js';
+
+
+
+export { Button, Button as default };

package/es/components/ButtonSet/index.js

@@ -6,4 +6,7 @@
  */
 
 import ButtonSet from './ButtonSet.js';
-export { default as ButtonSet, default } from './ButtonSet.js';
+
+
+
+export { ButtonSet, ButtonSet as default };

package/es/components/Checkbox/index.js

@@ -6,5 +6,8 @@
  */
 
 import Checkbox from './Checkbox.js';
-export { default as Checkbox, default } from './Checkbox.js';
 export { default as CheckboxSkeleton } from './Checkbox.Skeleton.js';
+
+
+
+export { Checkbox, Checkbox as default };

package/es/components/CodeSnippet/CodeSnippet.js

@@ -157,6 +157,7 @@ function CodeSnippet({
       "aria-label": deprecatedAriaLabel || ariaLabel,
       "aria-describedby": uid,
       className: codeSnippetClasses,
+      disabled: disabled,
       feedback: feedback,
       feedbackTimeout: feedbackTimeout
     }), /*#__PURE__*/React.createElement("code", {

package/es/components/ComboBox/ComboBox.d.ts

@@ -195,6 +195,13 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: ReactNode;
+    /**
+     * Specify native input attributes to place on the `<input>`, like maxLength.
+     * These are passed to downshift's getInputProps() and will override the
+     * internal input props.
+     * https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 type ComboboxComponentProps<ItemType> = PropsWithRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
 export interface ComboBoxComponent {

package/es/components/ComboBox/ComboBox.js

@@ -24,7 +24,7 @@ import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { useFloating, flip, hide, autoUpdate } from '@floating-ui/react';
+import { useFloating, autoUpdate, flip, hide } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
@@ -150,6 +150,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     warnText,
     allowCustomValue = false,
     slug,
+    inputProps,
     ...rest
   } = props;
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
@@ -623,6 +624,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
     value: inputValue,
+    ...inputProps,
     onChange: e => {
       const newValue = e.target.value;
       setInputValue(newValue);
@@ -924,7 +926,14 @@ ComboBox.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Specify native input attributes to place on the `<input>`, like maxLength.
+   * These are passed to downshift's getInputProps() and will override the
+   * internal input props.
+   * https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops
+   */
+  inputProps: PropTypes.object
 };
 
 export { ComboBox as default };

package/es/components/ComboBox/index.js

@@ -6,4 +6,7 @@
  */
 
 import ComboBox from './ComboBox.js';
-export { default as ComboBox, default } from './ComboBox.js';
+
+
+
+export { ComboBox, ComboBox as default };

package/es/components/ComposedModal/ComposedModal.js

@@ -17,7 +17,7 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
 import { toggleClass } from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu, wrapFocus } from '../../internal/wrapFocus.js';
+import { wrapFocusWithoutSentinels, wrapFocus, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Escape, Tab } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -28,7 +28,7 @@ import { unstable__Dialog } from '../Dialog/index.js';
 import { warning } from '../../internal/warning.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
 
 const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
   className: customClassName,
@@ -146,10 +146,6 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
 
   function handleKeyDown(event) {
     if (!enableDialogElement) {
-      event.stopPropagation();
-      if (match(event, Escape)) {
-        closeModal(event);
-      }
       if (focusTrapWithoutSentinels && open && match(event, Tab) && innerModal.current) {
         wrapFocusWithoutSentinels({
           containerNode: innerModal.current,
@@ -235,7 +231,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   let generatedAriaLabel;
   const childrenWithProps = React.Children.toArray(children).map(child => {
     switch (true) {
-      case isElement(child) && child.type === React.createElement(ModalHeader).type:
+      case isElement(child) && child.type === /*#__PURE__*/React.createElement(ModalHeader).type:
         {
           const el = child;
           generatedAriaLabel = el.props.label;
@@ -243,7 +239,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
             closeModal
           });
         }
-      case isElement(child) && child.type === React.createElement(ModalFooter).type:
+      case isElement(child) && child.type === /*#__PURE__*/React.createElement(ModalFooter).type:
         {
           const el = child;
           return /*#__PURE__*/React.cloneElement(el, {
@@ -256,6 +252,20 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
         return child;
     }
   });
+  useEffect(() => {
+    if (!open) return;
+    const handleEscapeKey = event => {
+      if (match(event, Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeModal(event);
+      }
+    };
+    document.addEventListener('keydown', handleEscapeKey, true);
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey, true);
+    };
+  }, [open]);
   useEffect(() => {
     if (!enableDialogElement && !open && launcherButtonRef) {
       setTimeout(() => {

package/es/components/ContainedList/ContainedList.d.ts

@@ -35,7 +35,7 @@ export interface ContainedListProps {
     /**
      * A label describing the contained list.
      */
-    label: string | ReactNode;
+    label?: string | ReactNode;
     /**
      * Specify the size of the contained list.
      */

package/es/components/ContainedList/ContainedList.js

@@ -76,7 +76,7 @@ const ContainedList = ({
   const renderedChildren = renderChildren(children);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classes
-  }, rest), /*#__PURE__*/React.createElement("div", {
+  }, rest), label && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--contained-list__header`
   }, /*#__PURE__*/React.createElement("div", {
     id: labelId,
@@ -99,7 +99,7 @@ const ContainedList = ({
   // eslint-disable-next-line jsx-a11y/no-redundant-roles
   React.createElement("ul", {
     role: "list",
-    "aria-labelledby": labelId
+    "aria-labelledby": label ? labelId : undefined
   }, isActionSearch ? filteredChildren : renderedChildren));
 };
 ContainedList.propTypes = {
@@ -126,7 +126,7 @@ ContainedList.propTypes = {
   /**
    * A label describing the contained list.
    */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Specify the size of the contained list.
    */

package/es/components/ContainedList/ContainedListItem/index.js

@@ -6,4 +6,7 @@
  */
 
 import ContainedListItem from './ContainedListItem.js';
-export { default as ContainedListItem, default } from './ContainedListItem.js';
+
+
+
+export { ContainedListItem, ContainedListItem as default };

package/es/components/ContainedList/index.js

@@ -7,11 +7,11 @@
 
 import { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject.js';
 import ContainedList from './ContainedList.js';
-export { default as ContainedList, default } from './ContainedList.js';
 import ContainedListItem from './ContainedListItem/ContainedListItem.js';
-export { default as ContainedListItem } from './ContainedListItem/ContainedListItem.js';
 
 ContainedList.ContainedListItem = ContainedListItem;
 if (process.env.NODE_ENV !== 'production') {
   deprecateFieldOnObject(ContainedList, 'ContainedListItem', ContainedListItem);
 }
+
+export { ContainedList, ContainedListItem, ContainedList as default };

package/es/components/Copy/Copy.js

@@ -15,7 +15,7 @@ import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
-import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
 
 function Copy({
   align = 'bottom',

package/es/components/Copy/index.js

@@ -6,4 +6,7 @@
  */
 
 import Copy from './Copy.js';
-export { default as Copy, default } from './Copy.js';
+
+
+
+export { Copy, Copy as default };

package/es/components/CopyButton/index.js

@@ -6,4 +6,7 @@
  */
 
 import CopyButton from './CopyButton.js';
-export { default as CopyButton, default } from './CopyButton.js';
+
+
+
+export { CopyButton, CopyButton as default };

package/es/components/DataTable/Table.js

@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { TableContext } from './TableContext.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
-import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
 
 const isElementWrappingContent = (element, context) => {
   if (element.children.length > 0) {

package/es/components/DataTable/state/getDerivedStateFromProps.d.ts

@@ -0,0 +1,19 @@
+export default getDerivedStateFromProps;
+/**
+ * Helper to derive the next state from the given props and the
+ * prevState. Potential future-facing API hook for React v17.
+ *
+ * Currently, it's being used as a way to normalize the incoming data that we
+ * are receiving for rows
+ */
+declare function getDerivedStateFromProps(props: any, prevState: any): {
+    rowIds: any;
+    rowsById: any;
+    cellsById: any;
+    sortDirection: any;
+    sortHeaderKey: any;
+    initialRowOrder: any;
+    filterInputValue: any;
+    shouldShowBatchActions: any;
+    isExpandedAll: boolean;
+};

package/es/components/DataTable/state/getDerivedStateFromProps.js

@@ -50,6 +50,5 @@ const getDerivedStateFromProps = (props, prevState) => {
   });
   return state;
 };
-var getDerivedStateFromProps$1 = getDerivedStateFromProps;
 
-export { getDerivedStateFromProps$1 as default };
+export { getDerivedStateFromProps as default };

package/es/components/DataTable/state/sorting.d.ts

@@ -0,0 +1,15 @@
+export { sortStates };
+export const initialSortState: import("./sortStates").DataTableSortState;
+export function getNextSortDirection(prevHeader: string, header: string, prevState: string): string;
+export function getNextSortState(props: any, state: any, { key }: {
+    key: any;
+}): any;
+export function getSortedState(props: {
+    locale: string;
+    sortRows: Function;
+}, state: {
+    rowIds: Array<string>;
+    cellsById: object;
+    initialRowOrder: Array<string>;
+}, key: string, sortDirection: string): object;
+import { sortStates } from './sortStates';

package/es/components/DataTable/state/sorting.js

@@ -6,7 +6,6 @@
  */
 
 import { sortStates } from './sortStates.js';
-export { sortStates } from './sortStates.js';
 import { sortRows } from '../tools/sorting.js';
 
 // Our initialSortState should be `NONE`, unless a consumer has specified a
@@ -94,4 +93,4 @@ const getSortedState = (props, state, key, sortDirection) => {
   };
 };
 
-export { getNextSortDirection, getNextSortState, getSortedState, initialSortState };
+export { getNextSortDirection, getNextSortState, getSortedState, initialSortState, sortStates };

package/es/components/DataTable/tools/denormalize.d.ts

@@ -0,0 +1,22 @@
+export default denormalize;
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Counterpart to `normalize` for a collection of rows. This method unravels the
+ * normalization step that we use to build the given parameters in order to
+ * return a natural interface to working with rows for a consumer.
+ *
+ * The default heuristic here is to map through all the row ids and return the
+ * value of the row for the given id, in addition to adding a `cells` key that
+ * contains the results of mapping over the rows cells and getting individual
+ * cell info.
+ *
+ * @param {Array<string>} rowIds array of row ids in the table
+ * @param {object} rowsById object containing lookups for rows by id
+ * @param {object} cellsById object containing lookups for cells by id
+ */
+declare function denormalize(rowIds: Array<string>, rowsById: object, cellsById: object): any[];

package/es/components/DataTable/tools/denormalize.js

@@ -25,6 +25,5 @@ const denormalize = (rowIds, rowsById, cellsById) => {
     cells: rowsById[id].cells.map(cellId => cellsById[cellId])
   }));
 };
-var denormalize$1 = denormalize;
 
-export { denormalize$1 as default };
+export { denormalize as default };

package/es/components/DataTable/tools/normalize.d.ts

@@ -0,0 +1,9 @@
+export default normalize;
+/**
+ * Normalize a collection of rows with the given headers.
+ *
+ * @param {Array<object>} rows
+ * @param {Array<object>} headers
+ * @returns {object}
+ */
+declare function normalize(rows: Array<object>, headers: Array<object>, prevState?: {}): object;

package/es/components/DataTable/tools/normalize.js

@@ -78,6 +78,5 @@ const normalize = (rows, headers, prevState = {}) => {
     cellsById
   };
 };
-var normalize$1 = normalize;
 
-export { normalize$1 as default };
+export { normalize as default };

package/es/components/DatePicker/DatePicker.js

@@ -24,15 +24,20 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
-// Weekdays shorthand for english locale
-l10n.en.weekdays.shorthand.forEach((_day, index) => {
-  const currentDay = l10n.en.weekdays.shorthand;
-  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
-    currentDay[index] = 'Th';
-  } else {
-    currentDay[index] = currentDay[index].charAt(0);
+// Weekdays shorthand for English locale
+// Ensure localization exists before trying to access it
+function initializeWeekdayShorthand() {
+  if (l10n?.en?.weekdays?.shorthand) {
+    l10n.en.weekdays.shorthand.forEach((_day, index) => {
+      const currentDay = l10n.en.weekdays.shorthand;
+      if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
+        currentDay[index] = 'Th';
+      } else {
+        currentDay[index] = currentDay[index].charAt(0);
+      }
+    });
   }
-});
+}
 const forEach = Array.prototype.forEach;
 
 /**
@@ -222,14 +227,14 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     [String(className)]: className
   });
   const childrenWithProps = React.Children.toArray(children).map((child, index) => {
-    if (index === 0 && child.type === React.createElement(DatePickerInput, child.props).type) {
+    if (index === 0 && child.type === /*#__PURE__*/React.createElement(DatePickerInput, child.props).type) {
       return /*#__PURE__*/React.cloneElement(child, {
         datePickerType,
         ref: startInputField,
         readOnly
       });
     }
-    if (index === 1 && child.type === React.createElement(DatePickerInput, child.props).type) {
+    if (index === 1 && child.type === /*#__PURE__*/React.createElement(DatePickerInput, child.props).type) {
       return /*#__PURE__*/React.cloneElement(child, {
         datePickerType,
         ref: endInputField,
@@ -249,6 +254,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       });
     }
   });
+  useEffect(() => {
+    initializeWeekdayShorthand();
+  }, []);
   useEffect(() => {
     if (datePickerType !== 'single' && datePickerType !== 'range') {
       return;
@@ -345,7 +353,6 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       }) : () => {}, carbonFlatpickrMonthSelectPlugin({
         selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
         selectorFlatpickrYearContainer: '.numInputWrapper',
-        selectorFlatpickrCurrentMonth: '.cur-month',
         classFlatpickrCurrentMonth: 'cur-month'
       }), carbonFlatpickrFixEventsPlugin({
         inputFrom: startInputField.current,

package/es/components/DatePicker/index.js

@@ -6,5 +6,8 @@
  */
 
 import DatePicker from './DatePicker.js';
-export { default as DatePicker, default } from './DatePicker.js';
 export { default as DatePickerSkeleton } from './DatePicker.Skeleton.js';
+
+
+
+export { DatePicker, DatePicker as default };

package/es/components/DatePicker/plugins/fixEventsPlugin.d.ts

@@ -0,0 +1,2 @@
+declare function _default(config: object): Plugin;
+export default _default;

package/es/components/DatePicker/plugins/rangePlugin.d.ts

@@ -0,0 +1,2 @@
+declare function _default(config: object): Plugin;
+export default _default;

package/es/components/DatePickerInput/DatePickerInput.js

@@ -6,6 +6,7 @@
  */
 
 import { WarningFilled, WarningAltFilled, Calendar } from '@carbon/icons-react';
+import { warning } from '../../internal/warning.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useContext, cloneElement } from 'react';
@@ -19,6 +20,7 @@ import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
+let didWarnAboutDatePickerInputValue = false;
 const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(props, ref) {
   const {
     datePickerType,
@@ -62,6 +64,10 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     placeholder,
     type
   };
+  if (process.env.NODE_ENV !== 'production' && 'value' in rest && !didWarnAboutDatePickerInputValue) {
+    process.env.NODE_ENV !== "production" ? warning(false, `The 'value' prop is not supported on the DatePickerInput component. ` + `For DatePicker components with 'datePickerType="range"', please ` + `pass the 'value' prop (as an array of dates) to the parent ` + `DatePicker component instead.`) : void 0;
+    didWarnAboutDatePickerInputValue = true;
+  }
   const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, {
     [`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
     [`${prefix}--date-picker-input__wrapper--warn`]: warn,

package/es/components/DatePickerInput/index.js

@@ -6,4 +6,7 @@
  */
 
 import DatePickerInput from './DatePickerInput.js';
-export { default as DatePickerInput, default } from './DatePickerInput.js';
+
+
+
+export { DatePickerInput, DatePickerInput as default };

package/es/components/Dialog/index.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useRef, useEffect, useContext, useState, createContext } from 'react';
+import React, { useRef, useEffect, createContext, useContext, useState } from 'react';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import cx from 'classnames';
@@ -21,7 +21,7 @@ import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import { useId } from '../../internal/useId.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
-import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
 import { Text } from '../Text/Text.js';
 
 const DialogContext = /*#__PURE__*/createContext({});

package/es/components/Dropdown/Dropdown.Skeleton.js

@@ -20,15 +20,15 @@ const DropdownSkeleton = ({
   ...rest
 }) => {
   const prefix = usePrefix();
-  const wrapperClasses = cx(className, `${prefix}--skeleton`, `${prefix}--form-item`, {
-    [`${prefix}--list-box--${size}`]: size
-  });
+  const wrapperClasses = cx(className, `${prefix}--skeleton`, `${prefix}--form-item`);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: wrapperClasses
   }, rest), !hideLabel && /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--skeleton ${prefix}--dropdown`
+    className: cx(`${prefix}--skeleton ${prefix}--dropdown`, {
+      [`${prefix}--list-box--${size}`]: size
+    })
   }));
 };
 DropdownSkeleton.propTypes = {