@carbon/react 1.69.0-rc.0 → 1.69.0

package/es/components/Checkbox/Checkbox.js

@@ -81,7 +81,7 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       }
       if (typeof ref === 'function') {
         ref(el);
-      } else if (ref && Object(ref) === ref) {
+      } else if (ref && 'current' in ref) {
         ref.current = el;
       }
     }

package/es/components/Grid/CSSGrid.js

@@ -14,6 +14,7 @@ import { useGridSettings, GridSettings } from './GridContext.js';
 
 function CSSGrid(_ref) {
   let {
+    align,
     as: BaseComponent = 'div',
     children,
     className: customClassName,
@@ -46,7 +47,9 @@ function CSSGrid(_ref) {
     [`${prefix}--css-grid`]: true,
     [`${prefix}--css-grid--condensed`]: mode === 'condensed',
     [`${prefix}--css-grid--narrow`]: mode === 'narrow',
-    [`${prefix}--css-grid--full-width`]: fullWidth
+    [`${prefix}--css-grid--full-width`]: fullWidth,
+    [`${prefix}--css-grid--start`]: align === 'start',
+    [`${prefix}--css-grid--end`]: align === 'end'
   });
 
   // cast as any to let TypeScript allow passing in attributes to base component
@@ -59,6 +62,10 @@ function CSSGrid(_ref) {
   }, rest), children));
 }
 CSSGrid.propTypes = {
+  /**
+   * Specify grid aligment. Default is center
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
   /**
    * Provide a custom element to render instead of the default <div>
    */

package/es/components/Grid/Grid.js

@@ -19,6 +19,10 @@ function Grid(props) {
   return /*#__PURE__*/React__default.createElement(FlexGridComponent, props);
 }
 Grid.propTypes = {
+  /**
+   * Specify grid aligment. Default is center
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
   /**
    * Provide a custom element to render instead of the default <div>
    */

package/es/components/ListBox/next/ListBoxSelection.d.ts

@@ -37,6 +37,10 @@ export interface ListBoxSelectionProps {
      * Specify whether or not the clear selection element should be disabled
      */
     disabled?: boolean;
+    /**
+     * Whether or not the listbox is readonly
+     */
+    readOnly?: boolean;
     /**
      * Specify an optional `onClearSelection` handler that is called when the underlying
      * element is cleared
@@ -58,7 +62,7 @@ export interface ListBoxSelectionProps {
      */
     onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
 }
-declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
+declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, readOnly, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ListBoxSelection {
     var propTypes: {
         /**
@@ -70,6 +74,10 @@ declare namespace ListBoxSelection {
          * Specify whether or not the clear selection element should be disabled
          */
         disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Whether or not the listbox is readonly
+         */
+        readOnly: PropTypes.Requireable<boolean>;
         /**
          * Specify an optional `onClearSelection` handler that is called when the underlying
          * element is cleared

package/es/components/ListBox/next/ListBoxSelection.js

@@ -26,6 +26,7 @@ function ListBoxSelection(_ref) {
     selectionCount,
     translateWithId: t = defaultTranslateWithId,
     disabled,
+    readOnly,
     onClearSelection,
     ...rest
   } = _ref;
@@ -40,7 +41,7 @@ function ListBoxSelection(_ref) {
   });
   function onClick(event) {
     event.stopPropagation();
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
     clearSelection(event);
@@ -57,21 +58,23 @@ function ListBoxSelection(_ref) {
     }, selectionCount), /*#__PURE__*/React__default.createElement("button", {
       "aria-label": description,
       className: `${prefix}--tag__close-icon`,
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClick: onClick,
       tabIndex: -1,
       title: description,
-      type: "button"
+      type: "button",
+      "aria-disabled": readOnly ? true : undefined
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
   }
   return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
     "aria-label": description,
     className: className,
-    disabled: disabled,
+    disabled: disabled || readOnly,
     onClick: onClick,
     tabIndex: -1,
     title: description,
-    type: "button"
+    type: "button",
+    "aria-disabled": readOnly ? true : undefined
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
 }
 ListBoxSelection.propTypes = {
@@ -84,6 +87,10 @@ ListBoxSelection.propTypes = {
    * Specify whether or not the clear selection element should be disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Whether or not the listbox is readonly
+   */
+  readOnly: PropTypes.bool,
   /**
    * Specify an optional `onClearSelection` handler that is called when the underlying
    * element is cleared

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

@@ -143,6 +143,10 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * what this field is for
      */
     placeholder?: string;
+    /**
+     * Whether or not the filterable multiselect is readonly
+     */
+    readOnly?: boolean;
     /**
      * Specify feedback (mode) of the selection.
      * `top`: selected item jumps to top

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -90,6 +90,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     onChange,
     onMenuChange,
     placeholder,
+    readOnly,
     titleText,
     type,
     selectionFeedback = 'top-after-reopen',
@@ -232,9 +233,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     }
   };
   function handleMenuChange(forceIsOpen) {
-    const nextIsOpen = forceIsOpen ?? !isOpen;
-    setIsOpen(nextIsOpen);
-    validateHighlightFocus();
+    if (!readOnly) {
+      const nextIsOpen = forceIsOpen ?? !isOpen;
+      setIsOpen(nextIsOpen);
+      validateHighlightFocus();
+    }
   }
   useEffect(() => {
     onMenuChange?.(isOpen);
@@ -423,7 +426,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     [`${prefix}--multi-select--open`]: isOpen,
     [`${prefix}--multi-select--inline`]: inline,
     [`${prefix}--multi-select--selected`]: controlledSelectedItems?.length > 0,
-    [`${prefix}--multi-select--filterable--input-focused`]: inputFocused
+    [`${prefix}--multi-select--filterable--input-focused`]: inputFocused,
+    [`${prefix}--multi-select--readonly`]: readOnly
   });
   const labelProps = getLabelProps();
   const buttonProps = getToggleButtonProps({
@@ -510,6 +514,24 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
+  const mergedRef = mergeRefs(textInput, inputProps.ref);
+  const readOnlyEventHandlers = readOnly ? {
+    onClick: evt => {
+      // NOTE: does not prevent click
+      evt.preventDefault();
+      // focus on the element as per readonly input behavior
+      if (mergedRef.current !== undefined) {
+        mergedRef.current.focus();
+      }
+    },
+    onKeyDown: evt => {
+      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+      // This prevents the select from opening for the above keys
+      if (selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  } : {};
   const clearSelectionContent = controlledSelectedItems.length > 0 ? /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default.createElement("span", {
@@ -533,12 +555,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     invalidText: invalidText,
     warn: warn,
     warnText: warnText,
-    isOpen: isOpen,
+    isOpen: !readOnly && isOpen,
     size: size$1
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
   }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+    readOnly: readOnly,
     clearSelection: () => {
       clearSelection();
       if (textInput.current) {
@@ -551,7 +574,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   }), /*#__PURE__*/React__default.createElement("input", _extends({
     className: inputClasses
   }, inputProps, {
-    ref: mergeRefs(textInput, inputProps.ref)
+    ref: mergedRef
+  }, readOnlyEventHandlers, {
+    readOnly: readOnly
   })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
@@ -560,6 +585,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
+    readOnly: readOnly,
     onMouseUp: event => {
       // If we do not stop this event from propagating,
       // it seems like Downshift takes our event and

package/es/components/Tabs/Tabs.js

@@ -322,8 +322,8 @@ function TabList(_ref4) {
   function onKeyDown(event) {
     if (matches(event, [ArrowRight, ArrowLeft, Home, End])) {
       event.preventDefault();
-      const filtredTabs = tabs.current.filter(tab => tab !== null);
-      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const filteredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filteredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {
@@ -334,6 +334,18 @@ function TabList(_ref4) {
       tabs.current[nextIndex]?.focus();
     }
   }
+  function handleBlur(_ref5) {
+    let {
+      relatedTarget: currentActiveNode
+    } = _ref5;
+    if (ref.current?.contains(currentActiveNode)) {
+      return;
+    }
+    // reset active index to selected tab index for manual activation
+    if (activation === 'manual') {
+      setActiveIndex(selectedIndex);
+    }
+  }
   useEffectOnce(() => {
     const tab = tabs.current[selectedIndex];
     if (scrollIntoView && tab) {
@@ -419,10 +431,10 @@ function TabList(_ref4) {
     }
   }, [activation, activeIndex, selectedIndex, isScrollable, children]);
   usePressable(previousButton, {
-    onPress(_ref5) {
+    onPress(_ref6) {
       let {
         longPress
-      } = _ref5;
+      } = _ref6;
       if (!longPress && ref.current) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
@@ -432,10 +444,10 @@ function TabList(_ref4) {
     }
   });
   usePressable(nextButton, {
-    onPress(_ref6) {
+    onPress(_ref7) {
       let {
         longPress
-      } = _ref6;
+      } = _ref7;
       if (!longPress && ref.current) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
@@ -459,7 +471,8 @@ function TabList(_ref4) {
     role: "tablist",
     className: `${prefix}--tab--list`,
     onScroll: debouncedOnScroll,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default.Children.map(children, (child, index) => {
     return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
       value: {
@@ -544,7 +557,7 @@ TabList.propTypes = {
 
 // type TabElement = HTMLElement & { disabled?: boolean };
 
-function TabListVertical(_ref7) {
+function TabListVertical(_ref8) {
   let {
     activation = 'automatic',
     'aria-label': label,
@@ -552,7 +565,7 @@ function TabListVertical(_ref7) {
     className: customClassName,
     scrollIntoView,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     activeIndex,
     selectedIndex,
@@ -569,8 +582,8 @@ function TabListVertical(_ref7) {
   function onKeyDown(event) {
     if (matches(event, [ArrowDown, ArrowUp, Home, End])) {
       event.preventDefault();
-      const filtredTabs = tabs.current.filter(tab => tab !== null);
-      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const filteredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filteredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndexVertical(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {
@@ -581,6 +594,18 @@ function TabListVertical(_ref7) {
       tabs.current[nextIndex]?.focus();
     }
   }
+  function handleBlur(_ref9) {
+    let {
+      relatedTarget: currentActiveNode
+    } = _ref9;
+    if (ref.current?.contains(currentActiveNode)) {
+      return;
+    }
+    // reset active index to selected tab index for manual activation
+    if (activation === 'manual') {
+      setActiveIndex(selectedIndex);
+    }
+  }
   useEffectOnce(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
@@ -647,7 +672,8 @@ function TabListVertical(_ref7) {
     ref: ref,
     role: "tablist",
     className: `${prefix}--tab--list`,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default.Children.map(children, (child, index) => {
     return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
       value: {
@@ -730,7 +756,7 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
  * Tab
  */
 
-const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
+const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
   let {
     as = 'button',
     children,
@@ -741,7 +767,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
     secondaryLabel,
     renderIcon: Icon,
     ...rest
-  } = _ref8;
+  } = _ref10;
   const prefix = usePrefix();
   const {
     selectedIndex,
@@ -983,7 +1009,7 @@ Tab.propTypes = {
  * IconTab
  */
 
-const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref9, ref) {
+const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11, ref) {
   let {
     children,
     className: customClassName,
@@ -992,7 +1018,7 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref9, r
     leaveDelayMs,
     label,
     ...rest
-  } = _ref9;
+  } = _ref11;
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName);
   return /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -1041,12 +1067,12 @@ IconTab.propTypes = {
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref10, forwardRef) {
+const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref12, forwardRef) {
   let {
     children,
     className: customClassName,
     ...rest
-  } = _ref10;
+  } = _ref12;
   const prefix = usePrefix();
   const panel = useRef(null);
   const ref = useMergedRefs([forwardRef, panel]);
@@ -1121,10 +1147,10 @@ TabPanel.propTypes = {
  * TabPanels
  */
 
-function TabPanels(_ref11) {
+function TabPanels(_ref13) {
   let {
     children
-  } = _ref11;
+  } = _ref13;
   const prefix = usePrefix();
   const refs = useRef([]);
   const hiddenStates = useRef([]);

package/es/components/Tag/SelectableTag.d.ts

@@ -26,6 +26,14 @@ export interface SelectableTagBaseProps {
      * Can be a React component class
      */
     renderIcon?: React.ElementType;
+    /**
+     * Provide an optional hook that is called when selected is changed
+     */
+    onChange?: (selected: boolean) => void;
+    /**
+     * Provide an optional function to be called when the tag is clicked.
+     */
+    onClick?: (e: Event) => void;
     /**
      * Specify the state of the selectable tag.
      */
@@ -42,7 +50,7 @@ export interface SelectableTagBaseProps {
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -61,6 +69,14 @@ declare const SelectableTag: {
          * Can be a React component class
          */
         renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Provide an optional hook that is called when selected is changed
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when the tag is clicked.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * Specify the state of the selectable tag.
          */

package/es/components/Tag/SelectableTag.js

@@ -24,6 +24,8 @@ const SelectableTag = _ref => {
     disabled,
     id,
     renderIcon,
+    onChange,
+    onClick,
     selected = false,
     size,
     text,
@@ -42,13 +44,11 @@ const SelectableTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
-
-  // Removing onClick from the spread operator
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {
-    onClick,
-    ...otherProps
-  } = other;
+  const handleClick = e => {
+    setSelectedTag(!selectedTag);
+    onChange?.(!selectedTag);
+    onClick?.(e);
+  };
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       label: text,
@@ -57,29 +57,29 @@ const SelectableTag = _ref => {
       leaveDelayMs: 0,
       onMouseEnter: () => false
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
-      "aria-pressed": selectedTag,
+      "aria-pressed": selectedTag !== false,
       ref: tagRef,
       size: size,
       renderIcon: renderIcon,
       disabled: disabled,
       className: tagClasses,
       id: tagId,
-      onClick: () => setSelectedTag(!selectedTag)
-    }, otherProps), /*#__PURE__*/React__default.createElement(Text, {
+      onClick: handleClick
+    }, other), /*#__PURE__*/React__default.createElement(Text, {
       title: text,
       className: `${prefix}--tag__label`
     }, text)));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
-    "aria-pressed": selectedTag,
+    "aria-pressed": selectedTag !== false,
     ref: tagRef,
     size: size,
     renderIcon: renderIcon,
     disabled: disabled,
     className: tagClasses,
     id: tagId,
-    onClick: () => setSelectedTag(!selectedTag)
-  }, otherProps), /*#__PURE__*/React__default.createElement(Text, {
+    onClick: handleClick
+  }, other), /*#__PURE__*/React__default.createElement(Text, {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
@@ -102,6 +102,14 @@ SelectableTag.propTypes = {
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Provide an optional hook that is called when selected is changed
+   */
+  onChange: PropTypes.func,
+  /**
+   * Provide an optional function to be called when the tag is clicked.
+   */
+  onClick: PropTypes.func,
   /**
    * Specify the state of the selectable tag.
    */

package/lib/components/Checkbox/Checkbox.js

@@ -91,7 +91,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       }
       if (typeof ref === 'function') {
         ref(el);
-      } else if (ref && Object(ref) === ref) {
+      } else if (ref && 'current' in ref) {
         ref.current = el;
       }
     }

package/lib/components/Grid/CSSGrid.js

@@ -24,6 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function CSSGrid(_ref) {
   let {
+    align,
     as: BaseComponent = 'div',
     children,
     className: customClassName,
@@ -56,7 +57,9 @@ function CSSGrid(_ref) {
     [`${prefix}--css-grid`]: true,
     [`${prefix}--css-grid--condensed`]: mode === 'condensed',
     [`${prefix}--css-grid--narrow`]: mode === 'narrow',
-    [`${prefix}--css-grid--full-width`]: fullWidth
+    [`${prefix}--css-grid--full-width`]: fullWidth,
+    [`${prefix}--css-grid--start`]: align === 'start',
+    [`${prefix}--css-grid--end`]: align === 'end'
   });
 
   // cast as any to let TypeScript allow passing in attributes to base component
@@ -69,6 +72,10 @@ function CSSGrid(_ref) {
   }, rest), children));
 }
 CSSGrid.propTypes = {
+  /**
+   * Specify grid aligment. Default is center
+   */
+  align: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
   /**
    * Provide a custom element to render instead of the default <div>
    */

package/lib/components/Grid/Grid.js

@@ -28,6 +28,10 @@ function Grid(props) {
   return /*#__PURE__*/React__default["default"].createElement(FlexGrid.FlexGrid, props);
 }
 Grid.propTypes = {
+  /**
+   * Specify grid aligment. Default is center
+   */
+  align: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
   /**
    * Provide a custom element to render instead of the default <div>
    */

package/lib/components/ListBox/next/ListBoxSelection.d.ts

@@ -37,6 +37,10 @@ export interface ListBoxSelectionProps {
      * Specify whether or not the clear selection element should be disabled
      */
     disabled?: boolean;
+    /**
+     * Whether or not the listbox is readonly
+     */
+    readOnly?: boolean;
     /**
      * Specify an optional `onClearSelection` handler that is called when the underlying
      * element is cleared
@@ -58,7 +62,7 @@ export interface ListBoxSelectionProps {
      */
     onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
 }
-declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
+declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, readOnly, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ListBoxSelection {
     var propTypes: {
         /**
@@ -70,6 +74,10 @@ declare namespace ListBoxSelection {
          * Specify whether or not the clear selection element should be disabled
          */
         disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Whether or not the listbox is readonly
+         */
+        readOnly: PropTypes.Requireable<boolean>;
         /**
          * Specify an optional `onClearSelection` handler that is called when the underlying
          * element is cleared

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -36,6 +36,7 @@ function ListBoxSelection(_ref) {
     selectionCount,
     translateWithId: t = defaultTranslateWithId,
     disabled,
+    readOnly,
     onClearSelection,
     ...rest
   } = _ref;
@@ -50,7 +51,7 @@ function ListBoxSelection(_ref) {
   });
   function onClick(event) {
     event.stopPropagation();
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
     clearSelection(event);
@@ -67,21 +68,23 @@ function ListBoxSelection(_ref) {
     }, selectionCount), /*#__PURE__*/React__default["default"].createElement("button", {
       "aria-label": description,
       className: `${prefix}--tag__close-icon`,
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClick: onClick,
       tabIndex: -1,
       title: description,
-      type: "button"
+      type: "button",
+      "aria-disabled": readOnly ? true : undefined
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-label": description,
     className: className,
-    disabled: disabled,
+    disabled: disabled || readOnly,
     onClick: onClick,
     tabIndex: -1,
     title: description,
-    type: "button"
+    type: "button",
+    "aria-disabled": readOnly ? true : undefined
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
 }
 ListBoxSelection.propTypes = {
@@ -94,6 +97,10 @@ ListBoxSelection.propTypes = {
    * Specify whether or not the clear selection element should be disabled
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * Whether or not the listbox is readonly
+   */
+  readOnly: PropTypes__default["default"].bool,
   /**
    * Specify an optional `onClearSelection` handler that is called when the underlying
    * element is cleared