@carbon/react 1.71.0-rc.0 → 1.71.1

package/es/components/Tile/Tile.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
+import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
 import Link from '../Link/Link.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
@@ -24,11 +24,12 @@ import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _rect, _path, _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
+var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 const Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
   let {
     children,
     className,
+    decorator,
     light = false,
     slug,
     hasRoundedCorners = false,
@@ -38,12 +39,16 @@ const Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
   const tileClasses = cx(`${prefix}--tile`, {
     [`${prefix}--tile--light`]: light,
     [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    [`${prefix}--tile--decorator`]: decorator,
+    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: tileClasses,
     ref: ref
-  }, rest), children, slug);
+  }, rest), children, slug, decorator && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, decorator));
 });
 Tile.displayName = 'Tile';
 Tile.propTypes = {
@@ -55,6 +60,10 @@ Tile.propTypes = {
    * The CSS class names.
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
+   */
+  decorator: PropTypes.node,
   /**
    * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
    * when `slug` prop is present
@@ -70,13 +79,14 @@ Tile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
    */
-  slug: PropTypes.node
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
 const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTile(_ref2, ref) {
   let {
     children,
     className,
     clicked = false,
+    decorator,
     disabled,
     href,
     light,
@@ -92,7 +102,9 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     [`${prefix}--tile--is-clicked`]: clicked,
     [`${prefix}--tile--light`]: light,
     [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    [`${prefix}--tile--decorator`]: decorator,
+    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
   const [isSelected, setIsSelected] = useState(clicked);
   function handleOnClick(evt) {
@@ -107,25 +119,6 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     }
     onKeyDown(evt);
   }
-
-  // To Do: Replace with an an icon from `@carbon/react`
-  // since the hollow slug in `ClickableTile` is not interactive
-  const hollowSlugIcon = /*#__PURE__*/React__default.createElement("svg", {
-    className: `${prefix}--tile--slug-icon`,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, _rect || (_rect = /*#__PURE__*/React__default.createElement("rect", {
-    x: "0.5",
-    y: "0.5",
-    width: "23",
-    height: "23"
-  })), _path || (_path = /*#__PURE__*/React__default.createElement("path", {
-    d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
-    fill: "#161616"
-  })));
   const v12DefaultIcons = useFeatureFlag('enable-v12-tile-default-icons');
   if (v12DefaultIcons) {
     if (!Icon) {
@@ -147,9 +140,14 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     onKeyDown: handleOnKeyDown,
     ref: ref,
     disabled: disabled
-  }, rest), slug ? /*#__PURE__*/React__default.createElement("div", {
+  }, rest), slug || decorator ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tile-content`
-  }, children) : children, slug && hollowSlugIcon, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+  }, children) : children, (slug === true || decorator === true) && /*#__PURE__*/React__default.createElement(AiLabel, {
+    size: "24",
+    className: `${prefix}--tile--ai-label-icon`
+  }), /*#__PURE__*/React__default.isValidElement(decorator) && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, decorator), Icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses,
     "aria-hidden": "true"
   }));
@@ -168,6 +166,10 @@ ClickableTile.propTypes = {
    * Boolean for whether a tile has been clicked.
    */
   clicked: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
+   */
+  decorator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   /**
    * Specify whether the ClickableTile should be disabled
    */
@@ -209,6 +211,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
   let {
     children,
     className,
+    decorator,
     disabled,
     id,
     light,
@@ -232,14 +235,16 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     [`${prefix}--tile--light`]: light,
     [`${prefix}--tile--disabled`]: disabled,
     [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    [`${prefix}--tile--decorator`]: decorator,
+    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
 
   // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
     evt.preventDefault();
     evt?.persist?.();
-    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+    if (normalizedDecorator && decoratorRef.current && decoratorRef.current.contains(evt.target)) {
       return;
     }
     setIsSelected(!isSelected);
@@ -266,13 +271,13 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     setPrevSelected(selected);
   }
 
-  // Slug is always size `xs`
-  const slugRef = useRef(null);
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `xs`
+  const decoratorRef = useRef(null);
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'xs',
-      ref: slugRef
+      ref: decoratorRef
     });
   }
   return (
@@ -297,12 +302,18 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
       as: "label",
       htmlFor: id,
       className: `${prefix}--tile-content`
-    }, children), normalizedSlug)
+    }, children), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--tile--inner-decorator`
+    }, normalizedDecorator) : '')
   );
 });
 SelectableTile.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the SelectableTile should be disabled
    */
@@ -325,7 +336,7 @@ SelectableTile.propTypes = {
    * The `name` of the `<input>`.
    * @deprecated
    */
-  name: PropTypes.string,
+  name: deprecate(PropTypes.string, 'The `name` property is no longer used.  It will be removed in the next major release.'),
   /**
    * The empty handler of the `<input>`.
    */
@@ -345,7 +356,7 @@ SelectableTile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `SelectableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Specify the tab index of the wrapper element
    */
@@ -358,13 +369,14 @@ SelectableTile.propTypes = {
    * The value of the `<input>`.
    * @deprecated
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
 const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function ExpandableTile(_ref4, forwardRef) {
   let {
     tabIndex = 0,
     className,
     children,
+    decorator,
     expanded = false,
     tileMaxHeight = 0,
     // eslint-disable-line
@@ -439,7 +451,9 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light,
     [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    [`${prefix}--tile--decorator`]: decorator,
+    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
   const chevronInteractiveClassNames = cx(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
   const childrenAsArray = getChildren();
@@ -466,10 +480,10 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
 
     // Interactive elements or elements that are given a role should be treated
     // the same because elements with a role can not be rendered inside a `button`
-    if (!getInteractiveContent(belowTheFold.current) && !getRoleContent(belowTheFold.current) && !getInteractiveContent(aboveTheFold.current) && !getRoleContent(aboveTheFold.current) && !slug) {
+    if (!getInteractiveContent(belowTheFold.current) && !getRoleContent(belowTheFold.current) && !getInteractiveContent(aboveTheFold.current) && !getRoleContent(aboveTheFold.current) && !(slug || decorator)) {
       setInteractive(false);
     }
-  }, [slug]);
+  }, [slug, decorator]);
   useIsomorphicEffect(() => {
     if (!tile.current) {
       return;
@@ -493,10 +507,10 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
   }, []);
   const belowTheFoldId = useId('expandable-tile-interactive');
 
-  // Slug is always size `xs`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `xs`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'xs'
     });
   }
@@ -506,7 +520,9 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     className: interactiveClassNames
   }, rest), /*#__PURE__*/React__default.createElement("div", {
     ref: tileContent
-  }, normalizedSlug, /*#__PURE__*/React__default.createElement("div", {
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement("div", {
     ref: aboveTheFold,
     className: `${prefix}--tile-content`
   }, childrenAsArray[0]), /*#__PURE__*/React__default.createElement("button", {
@@ -549,6 +565,10 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
 ExpandableTile.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
+   */
+  decorator: PropTypes.node,
   /**
    * `true` if the tile is expanded.
    */
@@ -578,7 +598,7 @@ ExpandableTile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `ExpandableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * The `tabindex` attribute.
    */

package/es/internal/wrapFocus.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import findLast from 'lodash.findlast';
 import { useEffect } from 'react';
 import { DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable, DOCUMENT_POSITION_BROAD_FOLLOWING } from './keyboard/navigation.js';
 import { tabbable } from 'tabbable';
@@ -45,7 +44,7 @@ function wrapFocus(_ref) {
   if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
     const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
     if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
-      const tabbable = findLast(bodyNode.querySelectorAll(selectorTabbable), elem => Boolean(elem.offsetParent));
+      const tabbable = [...bodyNode.querySelectorAll(selectorTabbable)].reverse().find(elem => Boolean(elem.offsetParent));
       if (tabbable) {
         tabbable.focus();
       } else if (bodyNode !== oldActiveNode) {

package/lib/components/Checkbox/Checkbox.d.ts

@@ -16,6 +16,10 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * exposing to the user
      */
     labelText: NonNullable<ReactNode>;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `Checkbox` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the underlying input should be checked by default
      */
@@ -45,6 +49,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     invalidText?: ReactNode;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
      */
     slug?: ReactNode;

package/lib/components/Checkbox/Checkbox.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 require('../Text/index.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
@@ -29,6 +30,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     className,
+    decorator,
     helperText,
     id,
     labelText,
@@ -58,15 +60,16 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
     [`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-wrapper--warning`]: showWarning,
-    [`${prefix}--checkbox-wrapper--slug`]: slug
+    [`${prefix}--checkbox-wrapper--slug`]: slug,
+    [`${prefix}--checkbox-wrapper--decorator`]: decorator
   });
   const innerLabelClasses = cx__default["default"](`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel
   });
-  let normalizedSlug;
-  if (slug && /*#__PURE__*/React__default["default"].isValidElement(slug)) {
-    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    const size = normalizedDecorator.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size
     });
   }
@@ -115,7 +118,9 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     title: title
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: innerLabelClasses
-  }, labelText, normalizedSlug)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--checkbox-wrapper-inner--decorator`
+  }, normalizedDecorator) : '')), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--checkbox__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -136,6 +141,10 @@ Checkbox.propTypes = {
    * Specify an optional className to be applied to the <label> node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `Checkbox` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify whether the underlying input should be checked by default
    */
@@ -186,7 +195,7 @@ Checkbox.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify a title for the <label> node for the Checkbox
    */

package/lib/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -8,6 +8,7 @@ import React, { ReactNode } from 'react';
 export interface CheckboxGroupProps {
     children?: ReactNode;
     className?: string;
+    decorator?: ReactNode;
     helperText?: ReactNode;
     invalid?: boolean;
     invalidText?: ReactNode;
@@ -15,6 +16,10 @@ export interface CheckboxGroupProps {
     orientation?: 'horizontal' | 'vertical';
     legendText: ReactNode;
     readOnly?: boolean;
+    /**
+     * * @deprecated please use decorator instead.
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
+     */
     slug?: ReactNode;
     warn?: boolean;
     warnText?: ReactNode;

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
@@ -27,6 +28,7 @@ const CheckboxGroup = _ref => {
   let {
     children,
     className,
+    decorator,
     helperText,
     invalid,
     invalidText,
@@ -53,13 +55,14 @@ const CheckboxGroup = _ref => {
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-group--warning`]: showWarning,
-    [`${prefix}--checkbox-group--slug`]: slug
+    [`${prefix}--checkbox-group--slug`]: slug,
+    [`${prefix}--checkbox-group--decorator`]: decorator
   });
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (/*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini',
       kind: 'default'
     });
@@ -73,7 +76,9 @@ const CheckboxGroup = _ref => {
   }, rest), /*#__PURE__*/React__default["default"].createElement("legend", {
     className: `${prefix}--label`,
     id: legendId || rest['aria-labelledby']
-  }, legendText, normalizedSlug), children, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--checkbox-group-inner--decorator`
+  }, normalizedDecorator) : ''), children, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--checkbox-group__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -94,6 +99,10 @@ CheckboxGroup.propTypes = {
    * Provide a custom className to be applied to the containing <fieldset> node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `CheckboxGroup` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Provide text for the form group for additional help
    */
@@ -126,7 +135,7 @@ CheckboxGroup.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify whether the form group is currently in warning state
    */

package/lib/components/ComboBox/ComboBox.d.ts

@@ -147,7 +147,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     placeholder?: string;
     /**
-     * Is the ComboBox readonly?
+     * Whether or not the component is read-only
      */
     readOnly?: boolean;
     /**

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -39,6 +39,10 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
      * Note that this prop is not applied if you render primary/danger button by yourself
      */
     danger?: boolean;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `ComposedModal` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the Modal content should have any inner padding.
      */
@@ -70,6 +74,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     selectorsFloatingMenus?: string[];
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
      */
     slug?: ReactNode;

package/lib/components/ComposedModal/ComposedModal.js

@@ -26,6 +26,7 @@ var wrapFocus = require('../../internal/wrapFocus.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var index$1 = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -109,6 +110,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     className: customClassName,
     containerClassName,
     danger,
+    decorator,
     isFullWidth,
     onClose,
     onKeyDown,
@@ -200,7 +202,8 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const modalClass = cx__default["default"](`${prefix}--modal`, {
     'is-visible': isOpen,
     [`${prefix}--modal--danger`]: danger,
-    [`${prefix}--modal--slug`]: slug
+    [`${prefix}--modal--slug`]: slug,
+    [`${prefix}--modal--decorator`]: decorator
   }, customClassName);
   const containerClass = cx__default["default"](`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
@@ -259,10 +262,10 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   }, [open, selectorPrimaryFocus, isOpen]);
 
-  // Slug is always size `sm`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel is always size `sm`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'sm'
     });
   }
@@ -288,7 +291,9 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, normalizedSlug, childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--modal--inner__decorator`
+  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -320,6 +325,10 @@ ComposedModal.propTypes = {
    * Note that this prop is not applied if you render primary/danger button by yourself
    */
   danger: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `ComposedModal` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify whether the Modal content should have any inner padding.
    */
@@ -359,10 +368,7 @@ ComposedModal.propTypes = {
    * Specify the size variant.
    */
   size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg']),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
-   */
-  slug: PropTypes__default["default"].node
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `ComposedModal` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
 
 exports.ModalBody = ModalBody;

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

@@ -90,6 +90,10 @@ export interface FluidNumberInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidNumberInput: React.FC<FluidNumberInputProps>;
 export default FluidNumberInput;

package/lib/components/FluidSelect/FluidSelect.d.ts

@@ -52,6 +52,10 @@ export interface FluidSelectProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidSelect: React.ForwardRefExoticComponent<FluidSelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default FluidSelect;

package/lib/components/FluidSelect/FluidSelect.js

@@ -87,7 +87,11 @@ FluidSelect.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes__default["default"].node
+  warnText: PropTypes__default["default"].node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes__default["default"].bool
 };
 
 exports["default"] = FluidSelect;

package/lib/components/FluidTextArea/FluidTextArea.d.ts

@@ -91,6 +91,10 @@ export interface FluidTextAreaProps {
      *  Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidTextArea: React.FC<FluidTextAreaProps>;
 export default FluidTextArea;

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -125,7 +125,11 @@ FluidTextArea.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes__default["default"].node
+  warnText: PropTypes__default["default"].node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes__default["default"].bool
 };
 
 exports["default"] = FluidTextArea;