@carbon/react 1.49.0 → 1.50.0

package/es/components/Accordion/AccordionItem.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState, useContext, useRef } from 'react';
+import React__default, { useState, useContext } from 'react';
 import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -51,7 +51,15 @@ function AccordionItem(_ref) {
   });
   const Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
 
-  const content = useRef(null);
+  const content = React__default.useCallback(node => {
+    if (!node) {
+      return;
+    }
+    if (isOpen) {
+      // accordion closes
+      node.style.maxBlockSize = '';
+    }
+  }, [isOpen]);
   if (open !== prevIsOpen) {
     setIsOpen(open);
     setPrevIsOpen(open);
@@ -60,19 +68,6 @@ function AccordionItem(_ref) {
   // 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 =
-      // Scroll height plus top/bottom padding
-      content.current.scrollHeight + 32 + 'px';
-    }
     const nextValue = !isOpen;
     setIsOpen(nextValue);
     if (onHeadingClick) {

package/es/components/Button/Button.js

@@ -90,12 +90,13 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
   let component = 'button';
   const assistiveId = useId('danger-description');
   const {
-    'aria-pressed': ariaPressed
+    'aria-pressed': ariaPressed,
+    'aria-describedby': ariaDescribedBy
   } = rest;
   let otherProps = {
     disabled,
     type,
-    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : undefined,
+    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || undefined,
     'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
   };
   const anchorProps = {

package/es/components/ChatButton/ChatButton.Skeleton.js

@@ -0,0 +1,40 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+const ChatButtonSkeleton = _ref => {
+  let {
+    className,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const skeletonClasses = cx(className, `${prefix}--skeleton`, `${prefix}--btn`, `${prefix}--chat-btn`, {
+    [`${prefix}--layout--size-${size}`]: size
+  });
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: skeletonClasses
+  }, rest));
+};
+ChatButtonSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+var ChatButtonSkeleton$1 = ChatButtonSkeleton;
+
+export { ChatButtonSkeleton$1 as default };

package/es/components/ChatButton/ChatButton.js

@@ -0,0 +1,81 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import Button from '../Button/Button.js';
+import '../Button/Button.Skeleton.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+const ChatButton = /*#__PURE__*/React__default.forwardRef(function ChatButton(_ref, ref) {
+  let {
+    className,
+    children,
+    disabled,
+    isQuickAction,
+    isSelected,
+    kind,
+    size,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(className, {
+    [`${prefix}--chat-btn`]: true,
+    [`${prefix}--chat-btn--quick-action`]: isQuickAction,
+    [`${prefix}--chat-btn--quick-action--selected`]: isSelected
+  });
+  const allowedSizes = ['sm', 'md', 'lg'];
+  if (isQuickAction) {
+    kind = 'ghost';
+    size = 'sm';
+  } else {
+    // Do not allow size larger than `lg`
+    size = allowedSizes.includes(size) ? size : 'lg';
+  }
+  return /*#__PURE__*/React__default.createElement(Button, _extends({
+    disabled: disabled,
+    className: classNames,
+    kind: kind,
+    ref: ref,
+    size: size
+  }, other), children);
+});
+ChatButton.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes.string,
+  /**
+   * Specify whether the `ChatButton` should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify whether the `ChatButton` should be rendered as a quick action button
+   */
+  isQuickAction: PropTypes.bool,
+  /**
+   * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input
+   */
+  isSelected: PropTypes.bool,
+  /**
+   * Specify the kind of `ChatButton` you want to create
+   */
+  kind: PropTypes.oneOf(['primary', 'secondary', 'danger', 'ghost', 'tertiary']),
+  /**
+   * Specify the size of the `ChatButton`, from the following list of sizes:
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+var ChatButton$1 = ChatButton;
+
+export { ChatButton$1 as default };

package/es/components/ComboButton/index.js

@@ -36,6 +36,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     label,
     onClick,
     size = 'lg',
+    menuAlignment = 'bottom',
     tooltipAlignment,
     translateWithId: t = defaultTranslateWithId,
     ...rest
@@ -70,10 +71,15 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
   }
   function handleOpen() {
     menuRef.current.style.inlineSize = `${width}px`;
+    menuRef.current.style.minInlineSize = `${width}px`;
+    if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
+      menuRef.current.style.inlineSize = `fit-content`;
+    }
   }
   const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
   }, className);
+  const menuClasses = cx(`${prefix}--combo-button__${menuAlignment}`);
   const primaryActionClasses = cx(`${prefix}--combo-button__primary-action`);
   const triggerClasses = cx(`${prefix}--combo-button__trigger`);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
@@ -83,6 +89,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
   }), /*#__PURE__*/React__default.createElement("div", {
     className: primaryActionClasses
   }, /*#__PURE__*/React__default.createElement(Button, {
+    title: label,
     size: size,
     disabled: disabled,
     onClick: handlePrimaryActionClick
@@ -98,6 +105,9 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     onMouseDown: handleTriggerMousedown,
     "aria-controls": open ? id : null
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement(Menu, {
+    containerRef: containerRef,
+    menuAlignment: menuAlignment,
+    className: menuClasses,
     ref: menuRef,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
@@ -127,6 +137,10 @@ ComboButton.propTypes = {
    * Provide the label to be renderd on the primary action button.
    */
   label: PropTypes.string.isRequired,
+  /**
+   * Experimental property. Specify how the menu should align with the button element
+   */
+  menuAlignment: PropTypes.oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']),
   /**
    * Provide an optional function to be called when the primary action element is clicked.
    */

package/es/components/ContainedList/ContainedList.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -44,7 +45,8 @@ function ContainedList(_ref) {
     isInset,
     kind = variants[0],
     label,
-    size
+    size,
+    ...rest
   } = _ref;
   const labelId = `${useId('contained-list')}-header`;
   const prefix = usePrefix();
@@ -57,9 +59,9 @@ function ContainedList(_ref) {
   const filteredChildren = filterChildren(children);
   const isActionSearch = ['Search', 'ExpandableSearch'].includes(action?.type?.displayName);
   const renderedChildren = renderChildren(children);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classes
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--contained-list__header`
   }, /*#__PURE__*/React__default.createElement("div", {
     id: labelId,

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -18,7 +19,8 @@ function ContainedListItem(_ref) {
     className,
     disabled = false,
     onClick,
-    renderIcon: IconElement
+    renderIcon: IconElement,
+    ...rest
   } = _ref;
   const prefix = usePrefix();
   const isClickable = onClick !== undefined;
@@ -30,9 +32,9 @@ function ContainedListItem(_ref) {
   const content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, IconElement && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--contained-list-item__icon`
   }, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("div", null, children));
-  return /*#__PURE__*/React__default.createElement("li", {
+  return /*#__PURE__*/React__default.createElement("li", _extends({
     className: classes
-  }, isClickable ? /*#__PURE__*/React__default.createElement("button", {
+  }, rest), isClickable ? /*#__PURE__*/React__default.createElement("button", {
     className: `${prefix}--contained-list-item__content`,
     type: "button",
     disabled: disabled,

package/es/components/DataTable/DataTable.d.ts

@@ -53,6 +53,7 @@ export interface DataTableRow<ColTypes extends any[]> {
 export interface DataTableHeader {
     key: string;
     header: React.ReactNode;
+    slug: React.ReactElement;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     headers: Array<DataTableHeader>;
@@ -152,6 +153,12 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         stickyHeader?: boolean;
         useStaticWidth?: boolean;
     };
+    getCellProps: (getCellPropsArgs: {
+        cell: DataTableCell<ColTypes>;
+    }) => {
+        [key: string]: unknown;
+        hasSlugHeader?: boolean;
+    };
     onInputChange: (e: React.ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
     sortBy: (headerKey: string) => void;
     selectAll: () => void;
@@ -334,6 +341,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         sortDirection: DataTableSortState;
         isSortable: boolean | undefined;
         isSortHeader: boolean;
+        slug: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
         onClick: (event: any) => void;
     };
     /**
@@ -468,6 +476,19 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         stickyHeader: boolean | undefined;
         useStaticWidth: boolean | undefined;
     };
+    /**
+     * Get the props associated with the given table cell.
+     *
+     * @param {object} config
+     * @param {object} config.cell the cell we want the props for
+     * @returns {object}
+     */
+    getCellProps: ({ cell, ...rest }: {
+        [x: string]: any;
+        cell: any;
+    }) => {
+        hasSlugHeader: any;
+    };
     /**
      * Helper utility to get all the currently selected rows
      * @returns {Array<string>} the array of rowIds that are currently selected

package/es/components/DataTable/DataTable.js

@@ -103,6 +103,7 @@ class DataTable extends React__default.Component {
         sortDirection,
         isSortable,
         isSortHeader: sortHeaderKey === header.key,
+        slug: header.slug,
         onClick: event => {
           const nextSortState = getNextSortState(this.props, this.state, {
             key: header.key
@@ -339,6 +340,23 @@ class DataTable extends React__default.Component {
         useStaticWidth
       };
     });
+    /**
+     * Get the props associated with the given table cell.
+     *
+     * @param {object} config
+     * @param {object} config.cell the cell we want the props for
+     * @returns {object}
+     */
+    _defineProperty(this, "getCellProps", _ref4 => {
+      let {
+        cell,
+        ...rest
+      } = _ref4;
+      return {
+        ...rest,
+        hasSlugHeader: cell.hasSlugHeader
+      };
+    });
     /**
      * Helper utility to get all the currently selected rows
      * @returns {Array<string>} the array of rowIds that are currently selected
@@ -612,6 +630,7 @@ class DataTable extends React__default.Component {
       getBatchActionProps: this.getBatchActionProps,
       getTableProps: this.getTableProps,
       getTableContainerProps: this.getTableContainerProps,
+      getCellProps: this.getCellProps,
       // Custom event handlers
       onInputChange: this.handleOnInputValueChange,
       // Expose internal state change actions

package/es/components/DataTable/TableCell.d.ts

@@ -4,7 +4,32 @@
  * 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 { TdHTMLAttributes } from 'react';
-export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
-declare const TableCell: React.FC<TableCellProps>;
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
+    /**
+     * Pass in children that will be embedded in the table header label
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * The width of the expanded row's internal cell
+     */
+    colSpan?: number;
+    /**
+     * Specify if the table cell is in an AI column
+     */
+    hasSlugHeader?: boolean;
+    /**
+     * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+     */
+    headers?: string;
+}
+declare const TableCell: {
+    ({ children, className, hasSlugHeader, colSpan, ...rest }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TableCell;

package/es/components/DataTable/TableCell.js

@@ -5,11 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import wrapComponent from '../../tools/wrapComponent.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
 
-const TableCell = wrapComponent({
-  name: 'TableCell',
-  type: 'td'
-});
+const TableCell = _ref => {
+  let {
+    children,
+    className,
+    hasSlugHeader,
+    colSpan,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const tableCellClassNames = cx(className, {
+    [`${prefix}--table-cell--column-slug`]: hasSlugHeader
+  });
+  return /*#__PURE__*/React__default.createElement("td", _extends({
+    className: tableCellClassNames ? tableCellClassNames : undefined,
+    colSpan: colSpan
+  }, rest), children);
+};
+TableCell.displayName = 'TableCell';
 
 export { TableCell as default };

package/es/components/DataTable/TableExpandRow.js

@@ -48,7 +48,7 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--parent-row`]: true,
     [`${prefix}--expandable-row`]: isExpanded,
     [`${prefix}--data-table--selected`]: isSelected,
-    [`${prefix}--parent-row--slug`]: rowHasSlug
+    [`${prefix}--data-table--slug-row`]: rowHasSlug
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default.createElement("tr", _extends({}, rest, {

package/es/components/DataTable/TableHeader.js

@@ -124,13 +124,13 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     className: `${prefix}--table-sort__flex`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--table-header-label`
-  }, children), normalizedSlug, /*#__PURE__*/React__default.createElement(ArrowUp, {
+  }, children), /*#__PURE__*/React__default.createElement(ArrowUp, {
     size: 20,
     className: `${prefix}--table-sort__icon`
   }), /*#__PURE__*/React__default.createElement(ArrowsVertical, {
     size: 20,
     className: `${prefix}--table-sort__icon-unsorted`
-  }))));
+  }), normalizedSlug)));
 });
 TableHeader.propTypes = {
   /**

package/es/components/DataTable/TableRow.js

@@ -13,10 +13,21 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const TableRow = props => {
   const prefix = usePrefix();
+  let rowHasSlug;
+  if (props?.children) {
+    React__default.Children.toArray(props.children).map(child => {
+      if (child.type?.displayName === 'TableSlugRow') {
+        if (child.props.slug) {
+          rowHasSlug = true;
+        }
+      }
+    });
+  }
   // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`
   const className = cx(props.className, {
-    [`${prefix}--data-table--selected`]: props.isSelected
+    [`${prefix}--data-table--selected`]: props.isSelected,
+    [`${prefix}--data-table--slug-row`]: rowHasSlug
   });
   const cleanProps = {
     ...omit(props, ['ariaLabel', 'aria-label', 'aria-controls', 'onExpand', 'isExpanded', 'isSelected']),

package/es/components/DataTable/tools/normalize.js

@@ -48,7 +48,8 @@ const normalize = function (rows, headers) {
     }
     headers.forEach((_ref, i) => {
       let {
-        key
+        key,
+        slug
       } = _ref;
       const id = getCellId(row.id, key);
       // Initialize the cell info and state values, namely for editing
@@ -59,6 +60,7 @@ const normalize = function (rows, headers) {
         isEditing: false,
         isValid: true,
         errors: null,
+        hasSlugHeader: !!slug,
         info: {
           header: key
         }

package/es/components/Menu/Menu.d.ts

@@ -4,8 +4,12 @@
  * 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 React from 'react';
+import React, { RefObject } from 'react';
 interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * The ref of the containing element, used for positioning and alignment of the menu
+     */
+    containerRef?: RefObject<HTMLDivElement>;
     /**
      * A collection of MenuItems to be rendered within this Menu.
      */
@@ -18,6 +22,10 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
      * A label describing the Menu.
      */
     label?: string;
+    /**
+     * Specify how the menu should align with the button element
+     */
+    menuAlignment?: string;
     /**
      * The mode of this menu. Defaults to full.
      * `full` supports nesting and selectable menu items, but no icons.

package/es/components/Menu/Menu.js

@@ -24,7 +24,9 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
   let {
     children,
     className,
+    containerRef,
     label,
+    menuAlignment,
     mode = 'full',
     onClose,
     onOpen,
@@ -61,6 +63,15 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
   const [position, setPosition] = useState([-1, -1]);
   const focusableItems = childContext.state.items.filter(item => !item.disabled && item.ref.current);
 
+  // Getting the width from the parent container element - controlled
+  let actionButtonWidth;
+  if (containerRef?.current) {
+    const {
+      width: w
+    } = containerRef.current.getBoundingClientRect();
+    actionButtonWidth = w;
+  }
+
   // Set RTL based on document direction or `LayoutDirection`
   const {
     direction
@@ -174,6 +185,16 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
       }
     };
 
+    // Avoid that the Menu render incorrectly when the postion is set in the right side of the screen
+    if (actionButtonWidth && actionButtonWidth < axes.x.size && (menuAlignment === 'bottom' || menuAlignment === 'top')) {
+      axes.x.size = actionButtonWidth;
+    }
+
+    // if 'axes.x.anchor' is lower than 87px dynamically switch render side
+    if (actionButtonWidth && (menuAlignment === 'bottom-end' || menuAlignment === 'top-end') && axes.x.anchor >= 87 && actionButtonWidth < axes.x.size) {
+      const diff = axes.x.anchor + axes.x.reversedAnchor;
+      axes.x.anchor = axes.x.anchor + diff;
+    }
     const {
       max,
       size,
@@ -190,6 +211,14 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
     reversedAnchor - size >= 0 ? reversedAnchor - size + offset : false,
     // align at max (second fallback)
     max - spacing - size];
+    const topAlignment = menuAlignment === 'top' || menuAlignment === 'top-end' || menuAlignment === 'top-start';
+
+    // If the tooltip is not visible in the top, switch to the bototm
+    if (typeof options[0] === 'number' && topAlignment && options[0] >= 0 && !options[1] && axis === 'y') {
+      menu.current.style.transform = 'translate(0)';
+    } else if (topAlignment && !options[0] && axis === 'y') {
+      options[0] = anchor - offset;
+    }
 
     // Previous array `options`, has at least one item that is a number (the last one - second fallback).
     // That guarantees that the return of `find()` will always be a number
@@ -244,6 +273,7 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
     // visibility is needed for focusing elements.
     // opacity is only set once the position has been set correctly
     // to avoid a flicker effect when opening.
+    [`${prefix}--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === 'top',
     [`${prefix}--menu--open`]: open,
     [`${prefix}--menu--shown`]: position[0] >= 0 && position[1] >= 0,
     [`${prefix}--menu--with-icons`]: childContext.state.hasIcons
@@ -274,6 +304,10 @@ Menu.propTypes = {
    * A label describing the Menu.
    */
   label: PropTypes.string,
+  /**
+   * Specify how the menu should align with the button element
+   */
+  menuAlignment: PropTypes.string,
   /**
    * The mode of this menu. Defaults to full.
    * `full` supports nesting and selectable menu items, but no icons.

package/es/components/MenuButton/index.js

@@ -30,6 +30,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
     kind = defaultButtonKind,
     label,
     size = 'lg',
+    menuAlignment = 'bottom',
     tabIndex = 0,
     ...rest
   } = _ref;
@@ -58,11 +59,16 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
   }
   function handleOpen() {
     menuRef.current.style.inlineSize = `${width}px`;
+    menuRef.current.style.minInlineSize = `${width}px`;
+    if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
+      menuRef.current.style.inlineSize = `fit-content`;
+    }
   }
   const containerClasses = cx(`${prefix}--menu-button__container`, className);
   const triggerClasses = cx(`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
   });
+  const menuClasses = cx(`${prefix}--menu-button__${menuAlignment}`);
   const buttonKind = validButtonKinds.includes(kind) ? kind : defaultButtonKind;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     ref: ref,
@@ -81,6 +87,9 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
     onMouseDown: handleMousedown,
     "aria-controls": open ? id : null
   }, label), /*#__PURE__*/React__default.createElement(Menu, {
+    containerRef: triggerRef,
+    menuAlignment: menuAlignment,
+    className: menuClasses,
     ref: menuRef,
     id: id,
     label: label,
@@ -114,6 +123,10 @@ MenuButton.propTypes = {
    * Provide the label to be renderd on the trigger button.
    */
   label: PropTypes.string.isRequired,
+  /**
+   * Experimental property. Specify how the menu should align with the button element
+   */
+  menuAlignment: PropTypes.oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']),
   /**
    * Specify the size of the button and menu.
    */