@carbon/react 1.43.0-rc.0 → 1.44.0

package/lib/components/Accordion/AccordionItem.d.ts

@@ -47,7 +47,7 @@ interface AccordionItemProps {
      * The callback function to run on the `onAnimationEnd`
      * event for the list item.
      */
-    handleAnimationEnd?: AnimationEventHandler<HTMLLIElement>;
+    handleAnimationEnd?: AnimationEventHandler<HTMLElement>;
 }
 interface AccordionToggleProps {
     'aria-controls'?: AriaAttributes['aria-controls'];

package/lib/components/Accordion/AccordionItem.js

@@ -47,8 +47,6 @@ function AccordionItem(_ref) {
     ...rest
   } = _ref;
   const [isOpen, setIsOpen] = React.useState(open);
-  const [prevIsOpen, setPrevIsOpen] = React.useState(open);
-  const [animation, setAnimation] = React.useState('');
   const accordionState = React.useContext(AccordionProvider.AccordionContext);
   const disabledIsControlled = typeof controlledDisabled === 'boolean';
   const disabled = disabledIsControlled ? controlledDisabled : accordionState.disabled;
@@ -57,23 +55,28 @@ function AccordionItem(_ref) {
   const className = cx__default["default"]({
     [`${prefix}--accordion__item`]: true,
     [`${prefix}--accordion__item--active`]: isOpen,
-    [`${prefix}--accordion__item--${animation}`]: animation,
     [`${prefix}--accordion__item--disabled`]: disabled,
     [customClassName]: !!customClassName
   });
   const Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
 
-  if (open !== prevIsOpen) {
-    setAnimation(isOpen ? 'collapsing' : 'expanding');
-    setIsOpen(open);
-    setPrevIsOpen(open);
-  }
+  const content = React.useRef(null);
 
   // When the AccordionItem heading is clicked, toggle the open state of the
   // panel
   function onClick(event) {
+    // type guard for ref
+    if (!content.current) {
+      return;
+    }
+    if (isOpen) {
+      // accordion closes
+      content.current.style.maxBlockSize = '';
+    } else {
+      // accordion opens
+      content.current.style.maxBlockSize = content.current.scrollHeight + 15 + 'px';
+    }
     const nextValue = !isOpen;
-    setAnimation(isOpen ? 'collapsing' : 'expanding');
     setIsOpen(nextValue);
     if (onHeadingClick) {
       // TODO: normalize signature, potentially:
@@ -95,13 +98,10 @@ function AccordionItem(_ref) {
     if (handleAnimationEnd) {
       handleAnimationEnd(event);
     }
-    setAnimation('');
   }
   return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     className: className
-  }, rest, {
-    onAnimationEnd: onAnimationEnd
-  }), /*#__PURE__*/React__default["default"].createElement(Toggle, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Toggle, {
     disabled: disabled,
     "aria-controls": id,
     "aria-expanded": isOpen,
@@ -115,9 +115,13 @@ function AccordionItem(_ref) {
     as: "div",
     className: `${prefix}--accordion__title`
   }, title)), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: content,
+    className: `${prefix}--accordion__wrapper`,
+    onTransitionEnd: onAnimationEnd
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     id: id,
     className: `${prefix}--accordion__content`
-  }, children));
+  }, children)));
 }
 AccordionItem.propTypes = {
   /**

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

@@ -45,6 +45,10 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Provide the text that is displayed when the Checkbox is in an invalid state
      */
     invalidText?: React.ReactNode;
+    /**
+     * Provide a `Slug` component to be rendered inside the `Checkbox` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify whether the Checkbox is currently invalid
      */

package/lib/components/Checkbox/Checkbox.js

@@ -43,6 +43,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     title = '',
     warn,
     warnText,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -57,11 +58,19 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   const wrapperClasses = cx__default["default"](`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, className, {
     [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
     [`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
-    [`${prefix}--checkbox-wrapper--warning`]: showWarning
+    [`${prefix}--checkbox-wrapper--warning`]: showWarning,
+    [`${prefix}--checkbox-wrapper--slug`]: slug
   });
   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, {
+      size
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
@@ -107,7 +116,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     title: title
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: innerLabelClasses
-  }, labelText)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, labelText, normalizedSlug)), /*#__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`
@@ -175,6 +184,10 @@ Checkbox.propTypes = {
    * Specify whether the Checkbox is read-only
    */
   readOnly: PropTypes__default["default"].bool,
+  /**
+   * Provide a `Slug` component to be rendered inside the `Checkbox` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify a title for the <label> node for the Checkbox
    */

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -36,6 +36,7 @@ function CheckboxGroup(_ref) {
     readOnly,
     warn,
     warnText,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -50,8 +51,18 @@ function CheckboxGroup(_ref) {
   const fieldsetClasses = cx__default["default"](`${prefix}--checkbox-group`, className, {
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
-    [`${prefix}--checkbox-group--warning`]: showWarning
+    [`${prefix}--checkbox-group--warning`]: showWarning,
+    [`${prefix}--checkbox-group--slug`]: slug
   });
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini',
+      kind: 'default'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({
     className: fieldsetClasses,
     "data-invalid": invalid ? true : undefined,
@@ -61,7 +72,7 @@ function CheckboxGroup(_ref) {
   }, rest), /*#__PURE__*/React__default["default"].createElement("legend", {
     className: `${prefix}--label`,
     id: legendId || rest['aria-labelledby']
-  }, legendText), children, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, legendText, normalizedSlug), 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`
@@ -107,6 +118,10 @@ CheckboxGroup.propTypes = {
    * Whether the CheckboxGroup should be read-only
    */
   readOnly: PropTypes__default["default"].bool,
+  /**
+   * Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify whether the form group is currently in warning state
    */

package/lib/components/ComboBox/ComboBox.js

@@ -362,6 +362,18 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (match.match(event, keys.End) && event.code !== 'Numpad1') {
           event.target.setSelectionRange(event.target.value.length, event.target.value.length);
         }
+        if (event.altKey && event.key == 'ArrowDown') {
+          event.preventDownshiftDefault = true;
+          if (!isOpen) {
+            toggleMenu();
+          }
+        }
+        if (event.altKey && event.key == 'ArrowUp') {
+          event.preventDownshiftDefault = true;
+          if (isOpen) {
+            toggleMenu();
+          }
+        }
       }
     });
     const handleFocus = evt => {

package/lib/components/ComboButton/index.js

@@ -78,7 +78,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     }
   }
   function handleOpen() {
-    menuRef.current.style.width = `${width}px`;
+    menuRef.current.style.inlineSize = `${width}px`;
   }
   const containerClasses = cx__default["default"](`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
@@ -110,6 +110,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     ref: menuRef,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
+    mode: "basic",
     size: size,
     open: open,
     onClose: handleClose,

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

@@ -4,7 +4,7 @@ export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     /**
      * Provide whether the modal content has a form element.
-     * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+     * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
      */
     hasForm?: boolean;
     /**
@@ -15,11 +15,11 @@ export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
 export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
 export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Specify the aria-label for bx--modal-container
+     * Specify the aria-label for cds--modal-container
      */
     'aria-label'?: string;
     /**
-     * Specify the aria-labelledby for bx--modal-container
+     * Specify the aria-labelledby for cds--modal-container
      */
     'aria-labelledby'?: string;
     /**

package/lib/components/ComposedModal/ComposedModal.js

@@ -66,7 +66,7 @@ ModalBody.propTypes = {
   className: PropTypes__default["default"].string,
   /**
    * Provide whether the modal content has a form element.
-   * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+   * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
    */
   hasForm: PropTypes__default["default"].bool,
   /**
@@ -241,11 +241,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
 });
 ComposedModal.propTypes = {
   /**
-   * Specify the aria-label for bx--modal-container
+   * Specify the aria-label for cds--modal-container
    */
   ['aria-label']: PropTypes__default["default"].string,
   /**
-   * Specify the aria-labelledby for bx--modal-container
+   * Specify the aria-labelledby for cds--modal-container
    */
   ['aria-labelledby']: PropTypes__default["default"].string,
   /**

package/lib/components/ContextMenu/useContextMenu.js

@@ -44,7 +44,8 @@ function useContextMenu() {
     open,
     x: position[0],
     y: position[1],
-    onClose
+    onClose,
+    mode: 'full'
   };
 }
 

package/lib/components/DataTable/tools/sorting.js

@@ -37,7 +37,7 @@ const compare = function (a, b) {
 
   // if column has React elements, this should sort by the child string if there is one
   if (typeof a === 'object' && typeof b === 'object') {
-    if (typeof a.props.children === 'string' && typeof b.props.children === 'string') {
+    if (typeof a.props?.children === 'string' && typeof b.props?.children === 'string') {
       return compareStrings(a.props.children, b.props.children, locale);
     }
   }

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -73,7 +73,7 @@ const DataTableSkeleton = _ref => {
   }, rest), /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React__default["default"].createElement("th", {
     key: i
   }, headers ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "bx--table-header-label"
+    className: "cds--table-header-label"
   }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React__default["default"].createElement("span", null)))))), /*#__PURE__*/React__default["default"].createElement("tbody", null, rows)));
 };
 DataTableSkeleton.propTypes = {

package/lib/components/Dropdown/Dropdown.js

@@ -287,6 +287,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       item,
       index: index$1
     });
+    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"]({
       key: itemProps.id,
@@ -314,7 +317,7 @@ Dropdown.propTypes = {
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
-   * Provide a custom className to be applied on the bx--dropdown node
+   * Provide a custom className to be applied on the cds--dropdown node
    */
   className: PropTypes__default["default"].string,
   /**

package/lib/components/FileUploader/FileUploader.js

@@ -116,11 +116,12 @@ class FileUploader extends React__default["default"].Component {
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
       className: classes
     }, other), !labelTitle ? null : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-      as: "p",
+      as: "h3",
       className: getHelperLabelClasses(`${prefix}--file--label`)
     }, labelTitle), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       as: "p",
-      className: getHelperLabelClasses(`${prefix}--label-description`)
+      className: getHelperLabelClasses(`${prefix}--label-description`),
+      id: "description"
     }, labelDescription), /*#__PURE__*/React__default["default"].createElement(FileUploaderButton["default"], {
       innerRef: this.uploaderButton,
       disabled: disabled,
@@ -131,7 +132,8 @@ class FileUploader extends React__default["default"].Component {
       disableLabelChanges: true,
       accept: accept,
       name: name,
-      size: size
+      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"]({

package/lib/components/Grid/Column.js

@@ -131,6 +131,11 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   sm: spanPropType,
+  /**
+   * Specify constant column span, start, or end values that will not change
+   * based on breakpoint
+   */
+  span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType]),
   /**
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
@@ -340,8 +345,13 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
  */
 function getClassNameForSpan(value, prefix) {
   const classNames = [];
-  if (typeof value === 'number' || typeof value === 'string') {
+  if (typeof value === 'number') {
     classNames.push(`${prefix}--col-span-${value}`);
+  }
+  // If value is a string, the user has specified a percent
+  // they'd like this column to span.
+  else if (typeof value === 'string') {
+    classNames.push(`${prefix}--col-span-${value.slice(0, -1)}`);
   } else if (typeof value === 'object') {
     const {
       span,

package/lib/components/Link/Link.d.ts

@@ -6,6 +6,11 @@
  */
 import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Provide a custom element or component to render the top-level node for the
+     * component.
+     */
+    as?: string | undefined;
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related

package/lib/components/Link/Link.js

@@ -23,6 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_ref, ref) {
   let {
+    as: BaseComponent,
     children,
     className: customClassName,
     href,
@@ -43,7 +44,7 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
   });
   const rel = target === '_blank' ? 'noopener' : undefined;
   const linkProps = {
-    className,
+    className: BaseComponent ? undefined : className,
     rel,
     target
   };
@@ -56,7 +57,8 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
     linkProps.role = 'link';
     linkProps['aria-disabled'] = true;
   }
-  return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({
+  const BaseComponentAsAny = BaseComponent ?? 'a';
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     ref: ref
   }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--link__icon`
@@ -64,6 +66,11 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
 });
 Link.displayName = 'Link';
 Link.propTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes__default["default"].string,
   /**
    * Provide the content for the Link
    */

package/lib/components/Menu/Menu.js

@@ -16,6 +16,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var warning = require('../../internal/warning.js');
 var MenuContext = require('./MenuContext.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
 var match = require('../../internal/keyboard/match.js');
@@ -34,6 +35,7 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     children,
     className,
     label,
+    mode = 'full',
     onClose,
     onOpen,
     open,
@@ -47,10 +49,14 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
   const focusReturn = React.useRef(null);
   const context = React.useContext(MenuContext.MenuContext);
   const isRoot = context.state.isRoot;
+  if (context.state.mode === 'basic' && !isRoot) {
+    process.env.NODE_ENV !== "production" ? warning.warning(false, 'Nested menus are not supported when the menu is in "basic" mode.') : void 0;
+  }
   const menuSize = isRoot ? size : context.state.size;
   const [childState, childDispatch] = React.useReducer(MenuContext.menuReducer, {
     ...context.state,
     isRoot: false,
+    mode,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
   });
@@ -255,6 +261,14 @@ Menu.propTypes = {
    * A label describing the Menu.
    */
   label: PropTypes__default["default"].string,
+  /**
+   * The mode of this menu. Defaults to full.
+   * `full` supports nesting and selectable menu items, but no icons.
+   * `basic` supports icons but no nesting or selectable menu items.
+   *
+   * **This prop is not intended for use and will be set by the respective implementation (like useContextMenu, MenuButton, and ComboButton).**
+   */
+  mode: PropTypes__default["default"].oneOf(['full', 'basic']),
   /**
    * Provide an optional function to be called when the Menu should be closed.
    */

package/lib/components/Menu/MenuContext.js

@@ -17,6 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const menuDefaultState = {
   isRoot: true,
+  mode: 'full',
   hasIcons: false,
   size: null,
   items: [],

package/lib/components/Menu/MenuItem.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 var useControllableState = require('../../internal/useControllableState.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var warning = require('../../internal/warning.js');
 var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
 require('../Text/index.js');
@@ -153,6 +154,14 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
       setRtl(false);
     }
   }, [direction]);
+  const iconsAllowed = context.state.mode === 'basic' || rest.role === 'menuitemcheckbox' || rest.role === 'menuitemradio';
+  React.useEffect(() => {
+    if (iconsAllowed && IconElement && !context.state.hasIcons) {
+      context.dispatch({
+        type: 'enableIcons'
+      });
+    }
+  }, [iconsAllowed, IconElement, context.state.hasIcons, context]);
   return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     role: "menuitem"
   }, rest, {
@@ -168,7 +177,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__icon`
-  }, IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  }, iconsAllowed && IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: `${prefix}--menu-item__label`
   }, label), shortcut && !hasChildren && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -212,7 +221,7 @@ MenuItem.propTypes = {
    */
   onClick: PropTypes__default["default"].func,
   /**
-   * This prop is not intended for use. The only supported icons are Checkmarks to depict single- and multi-selects. This prop is used by MenuItemSelectable and MenuItemRadioGroup automatically.
+   * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
@@ -231,6 +240,9 @@ const MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(fun
   } = _ref2;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
+  if (context.state.mode === 'basic') {
+    process.env.NODE_ENV !== "production" ? warning.warning(false, 'MenuItemSelectable is not supported when the menu is in "basic" mode.') : void 0;
+  }
   const [checked, setChecked] = useControllableState.useControllableState({
     value: selected,
     onChange,
@@ -256,7 +268,7 @@ const MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(fun
     className: classNames,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    renderIcon: checked && iconsReact.Checkmark,
+    renderIcon: checked ? iconsReact.Checkmark : undefined,
     onClick: handleClick
   }));
 });
@@ -328,6 +340,9 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
   } = _ref4;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
+  if (context.state.mode === 'basic') {
+    process.env.NODE_ENV !== "production" ? warning.warning(false, 'MenuItemRadioGroup is not supported when the menu is in "basic" mode.') : void 0;
+  }
   const [selection, setSelection] = useControllableState.useControllableState({
     value: selectedItem,
     onChange,
@@ -359,7 +374,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
     label: itemToString(item),
     role: "menuitemradio",
     "aria-checked": item === selection,
-    renderIcon: item === selection && iconsReact.Checkmark,
+    renderIcon: item === selection ? iconsReact.Checkmark : undefined,
     onClick: e => {
       handleClick(item, e);
     }

package/lib/components/MenuButton/index.js

@@ -39,6 +39,7 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
     kind = defaultButtonKind,
     label,
     size = 'lg',
+    tabIndex = 0,
     ...rest
   } = _ref;
   const id = useId.useId('MenuButton');
@@ -67,6 +68,7 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
   function handleOpen() {
     menuRef.current.style.inlineSize = `${width}px`;
   }
+  const containerClasses = cx__default["default"](`${prefix}--menu-button__container`, className);
   const triggerClasses = cx__default["default"](`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
   });
@@ -74,10 +76,11 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
     "aria-owns": open ? id : null,
-    className: className
+    className: containerClasses
   }), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
     className: triggerClasses,
     size: size,
+    tabIndex: tabIndex,
     kind: buttonKind,
     renderIcon: iconsReact.ChevronDown,
     disabled: disabled,
@@ -90,6 +93,7 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
     ref: menuRef,
     id: id,
     label: label,
+    mode: "basic",
     size: size,
     open: open,
     onClose: handleClose,
@@ -122,7 +126,11 @@ MenuButton.propTypes = {
   /**
    * Specify the size of the button and menu.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Specify the tabIndex of the button.
+   */
+  tabIndex: PropTypes__default["default"].number
 };
 
 exports.MenuButton = MenuButton;

package/lib/components/RadioButton/RadioButton.d.ts

@@ -55,6 +55,10 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide a handler that is invoked when a user clicks on the control
      */
     onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Provide a `Slug` component to be rendered inside the `RadioButton` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify the value of the `<RadioButton>`
      */