@carbon/react 1.86.0 → 1.87.0-rc.0

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

@@ -12,7 +12,7 @@ import { IconButton, IconButtonKinds } 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/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

@@ -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/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/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 = {

package/es/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -43,8 +43,9 @@ export interface FluidNumberInputProps {
      */
     id: string;
     /**
-     * Instruct the browser which keyboard to display on mobile devices. Note that
-     * standard numeric keyboards vary across devices and operating systems.
+     * Instruct the browser which keyboard to display on mobile devices. Defaults
+     * to `decimal`, but note that standard numeric keyboards vary across devices
+     * and operating systems.
      * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
      */
     inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];

package/es/components/FluidNumberInput/FluidNumberInput.js

@@ -67,8 +67,9 @@ FluidNumberInput.propTypes = {
    */
   id: PropTypes.string.isRequired,
   /**
-   * Instruct the browser which keyboard to display on mobile devices. Note that
-   * standard numeric keyboards vary across devices and operating systems.
+   * Instruct the browser which keyboard to display on mobile devices. Defaults
+   * to `decimal`, but note that standard numeric keyboards vary across devices
+   * and operating systems.
    * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
    */
   inputMode: PropTypes.oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),

package/es/components/IconButton/index.d.ts

@@ -88,7 +88,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     /**
      * Specify the size of the Button.
      */
-    size?: Extract<ButtonSize, 'sm' | 'md' | 'lg'>;
+    size?: Extract<ButtonSize, 'xs' | 'sm' | 'md' | 'lg'>;
     /**
      * Optionally specify a `target` when using an `<a>` element.
      */

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -191,6 +191,13 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * 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?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 export declare const FilterableMultiSelect: {
     <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement<any>;

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -102,7 +102,8 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   useTitleInItem,
   warn,
   warnText,
-  slug
+  slug,
+  inputProps
 }, ref) {
   const {
     isFluid
@@ -338,7 +339,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
         }
         return {
           ...changes,
-          highlightedIndex: null
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
         };
       case InputChange:
         if (onInputValueChange) {
@@ -351,6 +352,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
           highlightedIndex: 0
         };
       case InputClick:
+        setIsOpen(changes.isOpen || false);
         validateHighlightFocus();
         if (changes.isOpen && !changes.selectedItem) {
           return {
@@ -360,7 +362,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
         return {
           ...changes,
           isOpen: false,
-          highlightedIndex: null
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
         };
       case MenuMouseLeave:
         return {
@@ -482,7 +484,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       }
     }
   });
-  const inputProps = getInputProps(getDropdownProps({
+  const inputProp = getInputProps(getDropdownProps({
     'aria-controls': isOpen ? menuId : undefined,
     'aria-describedby': helperText ? helperId : undefined,
     'aria-haspopup': 'listbox',
@@ -492,6 +494,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     disabled,
     placeholder,
     preventKeyAction: isOpen,
+    ...inputProps,
     onClick: () => handleMenuChange(true),
     onKeyDown(event) {
       const $input = event.target;
@@ -545,7 +548,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
-  const mergedRef = mergeRefs(textInput, inputProps.ref);
+  const mergedRef = mergeRefs(textInput, inputProp.ref);
   const readOnlyEventHandlers = readOnly ? {
     onClick: evt => {
       // NOTE: does not prevent click
@@ -600,7 +603,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     disabled: disabled
   }), /*#__PURE__*/React.createElement("input", _extends({
     className: inputClasses
-  }, inputProps, {
+  }, inputProp, {
     ref: mergedRef
   }, readOnlyEventHandlers, {
     readOnly: readOnly
@@ -815,7 +818,14 @@ FilterableMultiSelect.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 { FilterableMultiSelect };

package/es/components/NumberInput/NumberInput.d.ts

@@ -72,8 +72,9 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     id: string;
     /**
-     * Instruct the browser which keyboard to display on mobile devices. Note that
-     * standard numeric keyboards vary across devices and operating systems.
+     * Instruct the browser which keyboard to display on mobile devices. Defaults
+     * to `decimal`, but note that standard numeric keyboards vary across devices
+     * and operating systems.
      * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
      */
     inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];

package/es/components/NumberInput/NumberInput.js

@@ -54,7 +54,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     hideSteppers,
     iconDescription,
     id,
-    inputMode,
+    inputMode = 'decimal',
     invalid = false,
     invalidText,
     label,
@@ -495,8 +495,9 @@ NumberInput.propTypes = {
    */
   id: PropTypes.string.isRequired,
   /**
-   * Instruct the browser which keyboard to display on mobile devices. Note that
-   * standard numeric keyboards vary across devices and operating systems.
+   * Instruct the browser which keyboard to display on mobile devices. Defaults
+   * to `decimal`, but note that standard numeric keyboards vary across devices
+   * and operating systems.
    * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
    */
   inputMode: PropTypes.oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),

package/es/components/Popover/index.js

@@ -13,7 +13,7 @@ import React, { useRef, useMemo, useEffect } from 'react';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { useWindowEvent } from '../../internal/useEvent.js';
+import { useEvent, useWindowEvent } from '../../internal/useEvent.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 import { useFloating, offset, flip, arrow, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
@@ -59,9 +59,10 @@ forwardRef) {
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   let align = mapPopoverAlign(initialAlign);
 
-  // If the `Popover` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
-  useWindowEvent('blur', () => {
-    if (open) {
+  // The `Popover` should close whenever it and its children loses focus
+  useEvent(popover, 'focusout', event => {
+    const relatedTarget = event.relatedTarget;
+    if (!popover.current?.contains(relatedTarget)) {
       onRequestClose?.();
     }
   });

package/es/components/Toggletip/index.d.ts

@@ -58,7 +58,7 @@ export declare namespace Toggletip {
          */
         align: PropTypes.Requireable<string>;
         /**
-         * Provide an offset value for alignment axis.
+         * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
          */
         alignmentAxisOffset: PropTypes.Requireable<number>;
         /**

package/es/components/Toggletip/index.js

@@ -176,7 +176,7 @@ Toggletip.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
-   * Provide an offset value for alignment axis.
+   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
    */
   alignmentAxisOffset: PropTypes.number,
   /**

package/es/internal/useEvent.d.ts

@@ -4,6 +4,6 @@
  * 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 MutableRefObject } from 'react';
-export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | MutableRefObject<HTMLElement | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;
+import { RefObject } from 'react';
+export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | RefObject<Element | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;
 export declare const useWindowEvent: <E extends keyof WindowEventMap>(eventName: E, callback: (event: WindowEventMap[E]) => void) => void;

package/es/internal/useEvent.js

@@ -13,15 +13,16 @@ const useEvent = (elementOrRef, eventName, callback) => {
     savedCallback.current = callback;
   }, [callback]);
   useEffect(() => {
+    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
+    if (!element) return;
     const handler = event => {
       if (savedCallback.current) {
         savedCallback.current(event);
       }
     };
-    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
-    element?.addEventListener(eventName, handler);
+    element.addEventListener(eventName, handler);
     return () => {
-      element?.removeEventListener(eventName, handler);
+      element.removeEventListener(eventName, handler);
     };
   }, [elementOrRef, eventName]);
 };

package/lib/components/Button/Button.Skeleton.js

@@ -32,6 +32,7 @@ const ButtonSkeleton = ({
   const buttonClasses = cx__default["default"](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',
@@ -64,7 +65,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__default["default"].oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
+  size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
   /**
    * @deprecated This property will be removed in the next major Carbon version,
    * use size={sm} instead.

package/lib/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/lib/components/Button/Button.js

@@ -21,7 +21,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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) {
@@ -219,7 +219,7 @@ Button.propTypes = {
   /**
    * Specify the size of the button, from the following list of sizes:
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
+  size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
   /**
    * Optional prop to specify the tabIndex of the Button
    */

package/lib/components/Button/ButtonBase.js

@@ -45,6 +45,8 @@ const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function Bu
   const prefix = usePrefix.usePrefix();
   const buttonClasses = cx__default["default"](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/lib/components/CodeSnippet/CodeSnippet.js

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

package/lib/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/lib/components/ComboBox/ComboBox.js

@@ -161,6 +161,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     warnText,
     allowCustomValue = false,
     slug,
+    inputProps,
     ...rest
   } = props;
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
@@ -634,6 +635,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
     value: inputValue,
+    ...inputProps,
     onChange: e => {
       const newValue = e.target.value;
       setInputValue(newValue);
@@ -935,7 +937,14 @@ ComboBox.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes__default["default"].node
+  warnText: PropTypes__default["default"].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__default["default"].object
 };
 
 exports["default"] = ComboBox;

package/lib/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/lib/components/ContainedList/ContainedList.js

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

package/lib/components/Dropdown/Dropdown.Skeleton.js

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

package/lib/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -43,8 +43,9 @@ export interface FluidNumberInputProps {
      */
     id: string;
     /**
-     * Instruct the browser which keyboard to display on mobile devices. Note that
-     * standard numeric keyboards vary across devices and operating systems.
+     * Instruct the browser which keyboard to display on mobile devices. Defaults
+     * to `decimal`, but note that standard numeric keyboards vary across devices
+     * and operating systems.
      * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
      */
     inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];

package/lib/components/FluidNumberInput/FluidNumberInput.js

@@ -77,8 +77,9 @@ FluidNumberInput.propTypes = {
    */
   id: PropTypes__default["default"].string.isRequired,
   /**
-   * Instruct the browser which keyboard to display on mobile devices. Note that
-   * standard numeric keyboards vary across devices and operating systems.
+   * Instruct the browser which keyboard to display on mobile devices. Defaults
+   * to `decimal`, but note that standard numeric keyboards vary across devices
+   * and operating systems.
    * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
    */
   inputMode: PropTypes__default["default"].oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),

package/lib/components/IconButton/index.d.ts

@@ -88,7 +88,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     /**
      * Specify the size of the Button.
      */
-    size?: Extract<ButtonSize, 'sm' | 'md' | 'lg'>;
+    size?: Extract<ButtonSize, 'xs' | 'sm' | 'md' | 'lg'>;
     /**
      * Optionally specify a `target` when using an `<a>` element.
      */