@carbon/react 1.68.0 → 1.69.0

package/lib/components/DataTable/TableCell.js

@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TableCell = _ref => {
+const TableCell = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     children,
     className,
@@ -33,9 +33,10 @@ const TableCell = _ref => {
   });
   return /*#__PURE__*/React__default["default"].createElement("td", _rollupPluginBabelHelpers["extends"]({
     className: tableCellClassNames ? tableCellClassNames : undefined,
+    ref: ref,
     colSpan: colSpan
   }, rest), children);
-};
+});
 TableCell.displayName = 'TableCell';
 
 exports["default"] = TableCell;

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

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+declare function useDisclosure(id: any): {
+    buttonProps: {
+        'aria-controls': any;
+        'aria-expanded': boolean;
+        onClick(): void;
+    };
+    contentProps: {
+        id: any;
+    };
+    open: boolean;
+};
+export { useDisclosure };

package/lib/components/Dropdown/Dropdown.js

@@ -15,7 +15,7 @@ var Downshift = require('downshift');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
-var index = require('../ListBox/index.js');
+var index$1 = require('../ListBox/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -24,6 +24,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
 var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
+var index = require('../FeatureFlags/index.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -81,11 +82,12 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     slug,
     ...other
   } = _ref;
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles');
   const {
     refs,
     floatingStyles,
     middlewareData
-  } = react.useFloating(autoAlign ? {
+  } = react.useFloating(enableFloatingStyles || autoAlign ? {
     placement: direction,
     // The floating element is positioned relative to its nearest
     // containing block (usually the viewport). It will in many cases also
@@ -103,12 +105,14 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
           width: `${rects.reference.width}px`
         });
       }
-    }), react.flip(), floatingUi_dom.hide()],
+    }), autoAlign && react.flip(), autoAlign && floatingUi_dom.hide()],
     whileElementsMounted: react.autoUpdate
-  } : {} // When autoAlign is turned off, floating-ui will not be used
+  } : {}
+  // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
+  // enabled, floating-ui will not be used
   );
   React.useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles || autoAlign) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -247,9 +251,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       // NOTE: does not prevent click
       evt.preventDefault();
       // focus on the element as per readonly input behavior
-      if (mergedRef.current !== undefined) {
-        mergedRef.current.focus();
-      }
+      mergedRef?.current?.focus();
     },
     onKeyDown: evt => {
       const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
@@ -277,7 +279,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
   };
   const menuProps = React.useMemo(() => getMenuProps({
-    ref: autoAlign ? refs.setFloating : null
+    ref: enableFloatingStyles || autoAlign ? refs.setFloating : null
   }), [autoAlign, getMenuProps, refs.setFloating]);
 
   // Slug is always size `mini`
@@ -291,7 +293,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index["default"], {
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     size: size,
@@ -302,7 +304,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     warnText: warnText,
     light: light,
     isOpen: isOpen,
-    ref: autoAlign ? refs.setReference : null,
+    ref: enableFloatingStyles || autoAlign ? refs.setReference : null,
     id: id
   }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
@@ -322,23 +324,23 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ref: mergedRef
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--list-box__label`
-  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
+  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
+  })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
-      index: index$1
+      index
     });
     if (item !== null && typeof item === 'object' && Object.prototype.hasOwnProperty.call(item, 'id')) {
       itemProps.id = item['id'];
     }
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
-    return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
-      isHighlighted: highlightedIndex === index$1,
+      isHighlighted: highlightedIndex === index,
       title: title,
       disabled: itemProps['aria-disabled']
     }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({

package/lib/components/FileUploader/FileUploader.d.ts

@@ -4,8 +4,7 @@
  * 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 PropTypes from 'prop-types';
-import React from 'react';
+import { ReactElement } from 'react';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
     /**
@@ -74,93 +73,10 @@ export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
      */
     size?: 'sm' | 'small' | 'md' | 'field' | 'lg';
 }
-export default class FileUploader extends React.Component<FileUploaderProps, {
-    filenames: string[];
-}> {
-    static propTypes: {
-        /**
-         * Specify the types of files that this input should be able to receive
-         */
-        accept: PropTypes.Requireable<(string | null | undefined)[]>;
-        /**
-         * Specify the type of the `<FileUploaderButton>`
-         */
-        buttonKind: PropTypes.Requireable<string>;
-        /**
-         * Provide the label text to be read by screen readers when interacting with
-         * the `<FileUploaderButton>`
-         */
-        buttonLabel: PropTypes.Requireable<string>;
-        /**
-         * Provide a custom className to be applied to the container node
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify whether file input is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Specify the status of the File Upload
-         */
-        filenameStatus: PropTypes.Validator<string>;
-        /**
-         * Provide a description for the complete/close icon that can be read by screen readers
-         */
-        iconDescription: PropTypes.Requireable<string>;
-        /**
-         * Specify the description text of this `<FileUploader>`
-         */
-        labelDescription: PropTypes.Requireable<string>;
-        /**
-         * Specify the title text of this `<FileUploader>`
-         */
-        labelTitle: PropTypes.Requireable<string>;
-        /**
-         * Specify if the component should accept multiple files to upload
-         */
-        multiple: PropTypes.Requireable<boolean>;
-        /**
-         * Provide a name for the underlying `<input>` node
-         */
-        name: PropTypes.Requireable<string>;
-        /**
-         * Provide an optional `onChange` hook that is called each time the input is
-         * changed
-         */
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Provide an optional `onClick` hook that is called each time the
-         * FileUploader is clicked
-         */
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Provide an optional `onDelete` hook that is called when an uploaded item
-         * is removed
-         */
-        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Specify the size of the FileUploaderButton, from a list of available
-         * sizes.
-         */
-        size: PropTypes.Requireable<string>;
-    };
-    static contextType: React.Context<string>;
-    state: {
-        filenames: string[];
-    };
-    nodes: HTMLElement[];
-    uploaderButton: React.RefObject<HTMLLabelElement>;
-    static getDerivedStateFromProps({ filenameStatus }: {
-        filenameStatus: any;
-    }, state: any): {
-        filenameStatus: any;
-        prevFilenameStatus: any;
-    } | null;
-    handleChange: (evt: any) => void;
-    handleClick: (evt: any, { index, filenameStatus }: {
-        index: any;
-        filenameStatus: any;
-    }) => void;
-    clearFiles: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare const FileUploader: {
+    <ItemType>(props: FileUploaderProps): ReactElement;
+    propTypes?: any;
+    contextTypes?: any;
+    defaultProps?: any;
+};
+export default FileUploader;

package/lib/components/FileUploader/FileUploader.js

@@ -18,6 +18,7 @@ var FileUploaderButton = require('./FileUploaderButton.js');
 var types = require('../../prop-types/types.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
+var useId = require('../../internal/useId.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -28,144 +29,123 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-class FileUploader extends React__default["default"].Component {
-  constructor() {
-    super(...arguments);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {
-      filenames: []
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "nodes", []);
-    _rollupPluginBabelHelpers.defineProperty(this, "uploaderButton", /*#__PURE__*/React__default["default"].createRef());
-    _rollupPluginBabelHelpers.defineProperty(this, "handleChange", evt => {
+const FileUploader = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    accept,
+    buttonKind,
+    buttonLabel,
+    className,
+    disabled,
+    filenameStatus,
+    iconDescription,
+    labelDescription,
+    labelTitle,
+    multiple,
+    name,
+    onChange,
+    onClick,
+    onDelete,
+    size,
+    ...other
+  } = _ref;
+  const fileUploaderInstanceId = useId.useId('file-uploader');
+  const [state, updateState] = React.useState({
+    fileNames: []
+  });
+  const nodes = [];
+  const prefix = usePrefix.usePrefix();
+  const handleChange = evt => {
+    evt.stopPropagation();
+    const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
+    updateState(prevState => ({
+      fileNames: multiple ? [...new Set([...prevState.fileNames, ...filenames])] : filenames
+    }));
+    if (onChange) {
+      onChange(evt);
+    }
+  };
+  const handleClick = (evt, _ref2) => {
+    let {
+      index,
+      filenameStatus
+    } = _ref2;
+    if (filenameStatus === 'edit') {
       evt.stopPropagation();
-      const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
-      this.setState({
-        filenames: this.props.multiple ? [...new Set([...this.state.filenames, ...filenames])] : filenames
+      const filteredArray = state.fileNames.filter(filename => filename !== nodes[index]?.innerText?.trim());
+      updateState({
+        fileNames: filteredArray
       });
-      if (this.props.onChange) {
-        this.props.onChange(evt);
+      if (onDelete) {
+        onDelete(evt);
+        uploaderButton.current?.focus?.();
       }
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleClick", (evt, _ref) => {
-      let {
-        index,
-        filenameStatus
-      } = _ref;
-      if (filenameStatus === 'edit') {
-        evt.stopPropagation();
-        const filteredArray = this.state.filenames.filter(filename => filename !== this.nodes[index].innerText.trim());
-        this.setState({
-          filenames: filteredArray
+      onClick?.(evt);
+    }
+  };
+  const uploaderButton = /*#__PURE__*/React__default["default"].createRef();
+  const classes = cx__default["default"]({
+    [`${prefix}--form-item`]: true,
+    [className]: className
+  });
+  const getHelperLabelClasses = baseClass => cx__default["default"](baseClass, {
+    [`${prefix}--label-description--disabled`]: disabled
+  });
+  const selectedFileClasses = cx__default["default"](`${prefix}--file__selected-file`, {
+    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
+    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classes
+  }, other), !labelTitle ? null : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "h3",
+    className: getHelperLabelClasses(`${prefix}--file--label`)
+  }, labelTitle), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "p",
+    className: getHelperLabelClasses(`${prefix}--label-description`),
+    id: fileUploaderInstanceId
+  }, labelDescription), /*#__PURE__*/React__default["default"].createElement(FileUploaderButton["default"], {
+    innerRef: uploaderButton,
+    disabled: disabled,
+    labelText: buttonLabel,
+    multiple: multiple,
+    buttonKind: buttonKind,
+    onChange: handleChange,
+    disableLabelChanges: true,
+    accept: accept,
+    name: name,
+    size: size,
+    "aria-describedby": fileUploaderInstanceId
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--file-container`
+  }, state.fileNames.length === 0 ? null : state.fileNames.map((name, index) => /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
+    key: index,
+    className: selectedFileClasses,
+    ref: node => nodes[index] = node // eslint-disable-line
+  }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "p",
+    className: `${prefix}--file-filename`,
+    id: name
+  }, name), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--file__state-container`
+  }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
+    name: name,
+    iconDescription: iconDescription,
+    status: filenameStatus,
+    onKeyDown: evt => {
+      if (match.matches(evt, [keys.Enter, keys.Space])) {
+        handleClick(evt, {
+          index,
+          filenameStatus
         });
-        if (this.props.onDelete) {
-          this.props.onDelete(evt);
-          this.uploaderButton.current?.focus?.();
-        }
-        this.props.onClick?.(evt);
       }
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "clearFiles", () => {
-      // A clearFiles function that resets filenames and can be referenced using a ref by the parent.
-      this.setState({
-        filenames: []
-      });
-    });
-  }
-  static getDerivedStateFromProps(_ref2, state) {
-    let {
+    },
+    onClick: evt => handleClick(evt, {
+      index,
       filenameStatus
-    } = _ref2;
-    const {
-      prevFilenameStatus
-    } = state;
-    return prevFilenameStatus === filenameStatus ? null : {
-      filenameStatus,
-      prevFilenameStatus: filenameStatus
-    };
-  }
-  render() {
-    const {
-      iconDescription,
-      buttonLabel = '',
-      buttonKind = 'primary',
-      disabled = false,
-      filenameStatus = 'uploading',
-      labelDescription,
-      labelTitle,
-      className,
-      multiple = false,
-      accept = [],
-      name,
-      size = 'md',
-      onDelete,
-      // eslint-disable-line
-      ...other
-    } = this.props;
-    const prefix = this.context;
-    const classes = cx__default["default"]({
-      [`${prefix}--form-item`]: true,
-      [className]: className
-    });
-    const getHelperLabelClasses = baseClass => cx__default["default"](baseClass, {
-      [`${prefix}--label-description--disabled`]: disabled
-    });
-    const selectedFileClasses = cx__default["default"](`${prefix}--file__selected-file`, {
-      [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
-      [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
-    });
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-      className: classes
-    }, other), !labelTitle ? null : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-      as: "h3",
-      className: getHelperLabelClasses(`${prefix}--file--label`)
-    }, labelTitle), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-      as: "p",
-      className: getHelperLabelClasses(`${prefix}--label-description`),
-      id: "description"
-    }, labelDescription), /*#__PURE__*/React__default["default"].createElement(FileUploaderButton["default"], {
-      innerRef: this.uploaderButton,
-      disabled: disabled,
-      labelText: buttonLabel,
-      multiple: multiple,
-      buttonKind: buttonKind,
-      onChange: this.handleChange,
-      disableLabelChanges: true,
-      accept: accept,
-      name: name,
-      size: size,
-      "aria-describedby": "description"
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${prefix}--file-container`
-    }, this.state.filenames.length === 0 ? null : this.state.filenames.map((name, index) => /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
-      key: index,
-      className: selectedFileClasses,
-      ref: node => this.nodes[index] = node // eslint-disable-line
-    }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-      as: "p",
-      className: `${prefix}--file-filename`,
-      id: name
-    }, name), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--file__state-container`
-    }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
-      name: name,
-      iconDescription: iconDescription,
-      status: filenameStatus,
-      onKeyDown: evt => {
-        if (match.matches(evt, [keys.Enter, keys.Space])) {
-          this.handleClick(evt, {
-            index,
-            filenameStatus
-          });
-        }
-      },
-      onClick: evt => this.handleClick(evt, {
-        index,
-        filenameStatus
-      })
-    }))))));
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
+    })
+  }))))));
+});
+FileUploader.propTypes = {
   /**
    * Specify the types of files that this input should be able to receive
    */
@@ -231,7 +211,6 @@ _rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
    * sizes.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
-});
-_rollupPluginBabelHelpers.defineProperty(FileUploader, "contextType", usePrefix.PrefixContext);
+};
 
 exports["default"] = FileUploader;

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/IdPrefix/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+import PropTypes from 'prop-types';
+import { PropsWithChildren, ReactNode } from 'react';
+type IdPrefixProps = {
+    children?: ReactNode;
+    /**
+     * The value used to prefix the auto-generated id placed on some DOM elements
+     */
+    prefix?: string;
+};
+declare function IdPrefix({ children, prefix }: PropsWithChildren<IdPrefixProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace IdPrefix {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The value used to prefix the auto-generated id placed on some DOM elements
+         */
+        prefix: PropTypes.Requireable<string>;
+    };
+}
+export { IdPrefix };

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