@carbon/react 1.30.0 → 1.31.0

package/lib/components/DataTable/Table.js

@@ -13,25 +13,57 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
+var debounce = require('lodash.debounce');
 var usePrefix = require('../../internal/usePrefix.js');
 var TableContext = require('./TableContext.js');
+var useEvent = require('../../internal/useEvent.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
+const isElementWrappingContent = (element, context) => {
+  if (element.children.length > 0) {
+    return false;
+  }
+  const computedStyles = window.getComputedStyle(element);
+  context.font = computedStyles.font ? computedStyles.font : `${computedStyles.fontSize}" "${computedStyles.fontFamily}`;
+  const measuredText = context?.measureText(element.textContent ?? '');
+  let textWidth = measuredText.width ?? 0;
+  // account for letter spacing
+  const letterSpacing = computedStyles.letterSpacing?.split('px');
+  if (letterSpacing && letterSpacing.length && !isNaN(Number(letterSpacing[0]))) {
+    textWidth += Number(letterSpacing[0]) * (element.textContent?.length ?? 0);
+  }
+  // account for padding
+  const paddingLeft = computedStyles.paddingLeft?.split('px');
+  if (paddingLeft && paddingLeft.length && !isNaN(Number(paddingLeft[0]))) {
+    textWidth += Number(paddingLeft[0]);
+  }
+  const paddingRight = computedStyles.paddingLeft?.split('px');
+  if (paddingRight && paddingRight.length && !isNaN(Number(paddingRight[0]))) {
+    textWidth += Number(paddingRight[0]);
+  }
+  // if measured textWidth is larger than the cell's width, then the content is being wrapped
+  if (textWidth > element.getBoundingClientRect().width) {
+    return true;
+  }
+  return false;
+};
 const Table = _ref => {
   let {
     className,
     children,
     useZebraStyles,
-    size,
+    size = 'lg',
     isSortable = false,
     useStaticWidth,
     stickyHeader,
     overflowMenuOnHover = true,
+    experimentalAutoAlign = false,
     ...other
   } = _ref;
   const {
@@ -39,6 +71,7 @@ const Table = _ref => {
     descriptionId
   } = React.useContext(TableContext.TableContext);
   const prefix = usePrefix.usePrefix();
+  const tableRef = React.useRef(null);
   const componentClass = cx__default["default"](`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
     [`${prefix}--data-table--sort`]: isSortable,
@@ -47,13 +80,52 @@ const Table = _ref => {
     [`${prefix}--data-table--sticky-header`]: stickyHeader,
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
+  const toggleTableBodyAlignmentClass = React.useCallback(function () {
+    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
+  }, [prefix]);
+  const toggleTableHeaderAlignmentClass = React.useCallback(function () {
+    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
+  }, [prefix]);
+  const setTableAlignment = React.useCallback(() => {
+    if (experimentalAutoAlign) {
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      if (tableRef.current && context) {
+        const isBodyMultiline = Array.from(tableRef.current.querySelectorAll('td')).some(td => isElementWrappingContent(td, context));
+        const isHeaderMultiline = Array.from(tableRef.current.querySelectorAll('th')).some(th => {
+          const label = th.querySelector(`.${prefix}--table-header-label`);
+          return label && isElementWrappingContent(label, context);
+        });
+        toggleTableBodyAlignmentClass(isBodyMultiline);
+        toggleTableHeaderAlignmentClass(isHeaderMultiline);
+      }
+    } else {
+      toggleTableBodyAlignmentClass(false);
+      toggleTableHeaderAlignmentClass(false);
+    }
+  }, [experimentalAutoAlign, toggleTableBodyAlignmentClass, toggleTableHeaderAlignmentClass, prefix]);
+  const debouncedSetTableAlignment = debounce__default["default"](setTableAlignment, 100);
+  useEvent.useWindowEvent('resize', debouncedSetTableAlignment);
+
+  // recalculate table alignment once fonts have loaded
+  if (document?.fonts?.status && document.fonts.status !== 'loaded') {
+    document.fonts.ready.then(() => {
+      setTableAlignment();
+    });
+  }
+  React.useLayoutEffect(() => {
+    setTableAlignment();
+  }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--data-table-content`
   }, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId
   }, other, {
-    className: componentClass
+    className: componentClass,
+    ref: tableRef
   }), children));
   return stickyHeader ? /*#__PURE__*/React__default["default"].createElement("section", {
     className: `${prefix}--data-table_inner-container`
@@ -65,6 +137,10 @@ Table.propTypes = {
    */
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
+  /**
+   * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
+   */
+  experimentalAutoAlign: PropTypes__default["default"].bool,
   /**
    * `false` If true, will apply sorting styles
    */

package/lib/components/DataTable/TableHeader.js

@@ -90,10 +90,11 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     isSortHeader,
     sortStates: sortStates.sortStates
   });
+  const headerClasses = cx__default["default"](headerClassName, `${prefix}--table-sort__header`);
   return /*#__PURE__*/React__default["default"].createElement("th", {
     id: id,
     "aria-sort": ariaSort,
-    className: headerClassName,
+    className: headerClasses,
     colSpan: colSpan,
     ref: ref,
     scope: scope

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -121,6 +121,5 @@ DataTableSkeleton.defaultProps = {
   showHeader: true,
   showToolbar: true
 };
-var DataTableSkeleton$1 = DataTableSkeleton;
 
-exports["default"] = DataTableSkeleton$1;
+exports["default"] = DataTableSkeleton;

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

@@ -0,0 +1,9 @@
+/**
+ * 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 DataTableSkeleton from './DataTableSkeleton';
+export default DataTableSkeleton;
+export { DataTableSkeleton };

package/lib/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, ...props }: SearchProps): JSX.Element;
+declare function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, defaultValue, isExpanded, ...props }: SearchProps): JSX.Element;
 declare namespace ExpandableSearch {
     var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
     var displayName: string;

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -28,10 +28,12 @@ function ExpandableSearch(_ref) {
     onChange,
     onExpand,
     onFocus,
+    defaultValue,
+    isExpanded,
     ...props
   } = _ref;
-  const [expanded, setExpanded] = React.useState(false);
-  const [hasContent, setHasContent] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(isExpanded || false);
+  const [hasContent, setHasContent] = React.useState(defaultValue ? true : false);
   const searchRef = React.useRef(null);
   const prefix = usePrefix.usePrefix();
   function handleFocus() {
@@ -55,6 +57,8 @@ function ExpandableSearch(_ref) {
     [`${prefix}--search--expanded`]: expanded
   }, props.className);
   return /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
+    defaultValue: defaultValue,
+    isExpanded: expanded,
     ref: searchRef,
     className: classes,
     onFocus: events.composeEventHandlers([onFocus, handleFocus]),

package/lib/components/FileUploader/FileUploaderButton.js

@@ -56,7 +56,8 @@ function FileUploaderButton(_ref) {
     [`${prefix}--btn--disabled`]: disabled,
     // V11: remove field, small
     [`${prefix}--btn--md`]: size === 'field' || size === 'md',
-    [`${prefix}--btn--sm`]: size === 'small' || size === 'sm'
+    [`${prefix}--btn--sm`]: size === 'small' || size === 'sm',
+    [`${prefix}--layout--size-${size}`]: size
   });
 
   // Adjust label text state based on changes to the labelText prop

package/lib/components/IconButton/index.js

@@ -31,16 +31,19 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     className,
     closeOnActivation = true,
     defaultOpen = false,
+    disabled,
     enterDelayMs,
     kind,
     label,
     leaveDelayMs,
     wrapperClasses,
-    size = 'md',
+    size,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
-  const tooltipClasses = cx__default["default"](wrapperClasses, `${prefix}--icon-tooltip`);
+  const tooltipClasses = cx__default["default"](wrapperClasses, `${prefix}--icon-tooltip`, {
+    [`${prefix}--icon-tooltip--disabled`]: disabled
+  });
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: align,
     closeOnActivation: closeOnActivation,
@@ -50,6 +53,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     label: label,
     leaveDelayMs: leaveDelayMs
   }, /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    disabled: disabled,
     kind: kind,
     ref: ref,
     size: size,
@@ -77,6 +81,10 @@ IconButton.propTypes = {
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes__default["default"].bool,
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  disabled: PropTypes__default["default"].bool,
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */

package/lib/components/Layout/index.js

@@ -0,0 +1,129 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+const densities = ['condensed', 'normal'];
+const Layout = /*#__PURE__*/React__default["default"].forwardRef(function Layout(_ref, forwardRef) {
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className,
+    density,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classes = cx__default["default"](className, `${prefix}--layout`, {
+    [`${prefix}--layout--size-${size}`]: sizes.includes(size),
+    [`${prefix}--layout--density-${density}`]: densities.includes(density)
+  });
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: forwardRef,
+    className: classes
+  }), children);
+});
+Layout.propTypes = {
+  /**
+   * Specify a custom component or element to be rendered as the top-level
+   * element in the component
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+  /**
+   * Provide child elements to be rendered inside of `Layout`
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Provide a custom class name to be used on the outermost element rendered by
+   * the component
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify the desired density of components within this layout
+   */
+  density: PropTypes__default["default"].oneOf(densities),
+  /**
+   * Specify the desired size of components within this layout
+   */
+  size: PropTypes__default["default"].oneOf(sizes)
+};
+const LayoutConstraint = /*#__PURE__*/React__default["default"].forwardRef(function Layout(_ref2, forwardRef) {
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className,
+    density,
+    size,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const classes = cx__default["default"](className, Object.entries({
+    size,
+    density
+  }).map(_ref3 => {
+    let [group, constraints] = _ref3;
+    return {
+      [`${prefix}--layout-constraint--${group}:default-${constraints?.default}`]: constraints?.default,
+      [`${prefix}--layout-constraint--${group}:min-${constraints?.min}`]: constraints?.min,
+      [`${prefix}--layout-constraint--${group}:max-${constraints?.max}`]: constraints?.max
+    };
+  }));
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: forwardRef,
+    className: classes
+  }), children);
+});
+LayoutConstraint.propTypes = {
+  /**
+   * Specify a custom component or element to be rendered as the top-level
+   * element in the component
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+  /**
+   * Provide child elements to be rendered inside of `LayoutConstraint`
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Provide a custom class name to be used on the outermost element rendered by
+   * the component
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify the desired layout density constraints of this element's children
+   */
+  density: PropTypes__default["default"].shape({
+    min: PropTypes__default["default"].oneOf(densities),
+    default: PropTypes__default["default"].oneOf(densities),
+    max: PropTypes__default["default"].oneOf(densities)
+  }),
+  /**
+   * Specify the desired layout size constraints of this element's children
+   */
+  size: PropTypes__default["default"].shape({
+    min: PropTypes__default["default"].oneOf(sizes),
+    default: PropTypes__default["default"].oneOf(sizes),
+    max: PropTypes__default["default"].oneOf(sizes)
+  })
+};
+
+exports.Layout = Layout;
+exports.LayoutConstraint = LayoutConstraint;

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

@@ -0,0 +1,53 @@
+/**
+ * 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 React, { AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
+interface LinkProps {
+    /**
+     * @description Indicates the element that represents the
+     *   current item within a container or set of related
+     *   elements.
+     */
+    'aria-current'?: AriaAttributes['aria-current'];
+    /**
+     * @description Provide a custom className to be applied to
+     *   the containing `<a>` node.
+     */
+    className?: string;
+    /**
+     * @description Specify if the control should be disabled, or not.
+     */
+    disabled?: boolean;
+    /**
+     * @description Provide the `href` attribute for the `<a>` node.
+     */
+    href?: string;
+    /**
+     * @description Specify whether you want the inline version of this control.
+     */
+    inline?: boolean;
+    /**
+     * @description Optional prop to render an icon next to the link.
+     *   Can be a React component class
+     */
+    renderIcon?: ComponentType;
+    /**
+     * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * @description Specify the target attribute for the `<a>` node.
+     */
+    target?: HTMLAttributeAnchorTarget;
+    /**
+     * Specify whether you want the link to receive visited styles after the link has been clicked
+     */
+    visited?: boolean;
+}
+declare const Link: React.ForwardRefExoticComponent<LinkProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;

package/lib/components/Link/Link.js

@@ -31,6 +31,7 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
     visited = false,
     renderIcon: Icon,
     size,
+    target,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -40,7 +41,7 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
     [`${prefix}--link--visited`]: visited,
     [`${prefix}--link--${size}`]: size
   });
-  const rel = rest.target === '_blank' ? 'noopener' : null;
+  const rel = target === '_blank' ? 'noopener' : undefined;
   const linkProps = {
     className,
     rel
@@ -86,6 +87,7 @@ Link.propTypes = {
    * Optional prop to render an icon next to the link.
    * Can be a React component class
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
@@ -96,6 +98,5 @@ Link.propTypes = {
    */
   visited: PropTypes__default["default"].bool
 };
-var Link$1 = Link;
 
-exports["default"] = Link$1;
+exports["default"] = Link;

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

@@ -0,0 +1,9 @@
+/**
+ * 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 Link from './Link';
+export default Link;
+export { Link };

package/lib/components/ListBox/ListBoxPropTypes.d.ts

@@ -10,5 +10,5 @@ declare const listBoxSizes: readonly ["sm", "md", "lg"];
 export type ListBoxType = (typeof listBoxTypes)[number];
 export type ListBoxSize = (typeof listBoxSizes)[number];
 export declare const ListBoxType: PropTypes.Requireable<"default" | "inline">;
-export declare const ListBoxSize: PropTypes.Requireable<"md" | "sm" | "lg">;
+export declare const ListBoxSize: PropTypes.Requireable<"sm" | "md" | "lg">;
 export {};

package/lib/components/Menu/MenuItem.js

@@ -290,12 +290,13 @@ MenuItemGroup.propTypes = {
    */
   label: PropTypes__default["default"].string.isRequired
 };
+const defaultItemToString = item => item.toString();
 const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
   let {
     className,
     defaultSelectedItem,
     items,
-    itemToString = item => item.toString(),
+    itemToString = defaultItemToString,
     label,
     onChange,
     selectedItem,

package/lib/components/MenuButton/index.js

@@ -68,10 +68,13 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
   }
   const triggerClasses = cx__default["default"](`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
-  }, className);
+  });
   const buttonKind = validButtonKinds.includes(kind) ? kind : defaultButtonKind;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
+    "aria-owns": open ? id : null,
+    className: className
+  }), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
     className: triggerClasses,
     size: size,
     kind: buttonKind,
@@ -81,8 +84,8 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
     "aria-expanded": open,
     onClick: handleClick,
     onMouseDown: handleMousedown,
-    "aria-owns": open ? id : null
-  }), label), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+    "aria-controls": open ? id : null
+  }, label), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     ref: menuRef,
     id: id,
     label: label,

package/lib/components/OverflowMenu/index.js

@@ -9,10 +9,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var React = require('react');
+var index = require('../FeatureFlags/index.js');
+var index$1 = require('./next/index.js');
 var OverflowMenu$1 = require('./OverflowMenu.js');
 var createClassWrapper = require('../../internal/createClassWrapper.js');
 
-const OverflowMenu = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const OverflowMenuV11 = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
+function OverflowMenu(props) {
+  const enableV12OverflowMenu = index.useFeatureFlag('enable-v12-overflowmenu');
+  return enableV12OverflowMenu ? /*#__PURE__*/React__default["default"].createElement(index$1.OverflowMenu, props) : /*#__PURE__*/React__default["default"].createElement(OverflowMenuV11, props);
+}
+OverflowMenu.displayName = 'OverflowMenu';
 
 exports.OverflowMenu = OverflowMenu;
 exports["default"] = OverflowMenu;

package/lib/components/OverflowMenu/next/index.js

@@ -0,0 +1,108 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var index = require('../../IconButton/index.js');
+var Menu = require('../../Menu/Menu.js');
+var useId = require('../../../internal/useId.js');
+var usePrefix = require('../../../internal/usePrefix.js');
+var useAttachedMenu = require('../../../internal/useAttachedMenu.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const defaultSize = 'md';
+const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenu(_ref, forwardRef) {
+  let {
+    children,
+    className,
+    label = 'Options',
+    renderIcon: IconElement = iconsReact.OverflowMenuVertical,
+    size = defaultSize,
+    tooltipAlignment,
+    ...rest
+  } = _ref;
+  const id = useId.useId('overflowmenu');
+  const prefix = usePrefix.usePrefix();
+  const triggerRef = React.useRef(null);
+  const {
+    open,
+    x,
+    y,
+    handleClick,
+    handleMousedown,
+    handleClose
+  } = useAttachedMenu.useAttachedMenu(triggerRef);
+  const containerClasses = cx__default["default"](className, `${prefix}--overflow-menu__container`);
+  const triggerClasses = cx__default["default"](`${prefix}--overflow-menu`, {
+    [`${prefix}--overflow-menu--open`]: open
+  }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: containerClasses,
+    "aria-owns": open ? id : null,
+    ref: forwardRef
+  }), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    "aria-controls": open ? id : null,
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    className: triggerClasses,
+    onClick: handleClick,
+    onMouseDown: handleMousedown,
+    ref: triggerRef,
+    label: label,
+    align: tooltipAlignment
+  }, /*#__PURE__*/React__default["default"].createElement(IconElement, {
+    className: `${prefix}--overflow-menu__icon`
+  })), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+    id: id,
+    size: size,
+    open: open,
+    onClose: handleClose,
+    x: x,
+    y: y,
+    label: label
+  }, children));
+});
+OverflowMenu.propTypes = {
+  /**
+   * A collection of MenuItems to be rendered within this OverflowMenu.
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Additional CSS class names for the trigger button.
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * A label describing the options available. Is used in the trigger tooltip and as the menu's accessible label.
+   */
+  label: PropTypes__default["default"].string,
+  /**
+   * Otionally provide a custom icon to be rendered on the trigger button.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * Specify the size of the menu, from a list of available sizes.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Specify how the trigger tooltip should be aligned.
+   */
+  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
+};
+
+exports.OverflowMenu = OverflowMenu;