@carbon/react 1.24.0 → 1.26.0-rc.0

package/es/components/Button/Button.js

@@ -17,7 +17,7 @@ import { useId } from '../../internal/useId.js';
 
 var _excluded = ["as", "children", "className", "dangerDescription", "disabled", "hasIconOnly", "href", "iconDescription", "isExpressive", "isSelected", "kind", "onBlur", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "renderIcon", "size", "tabIndex", "tooltipAlignment", "tooltipPosition", "type"];
 var Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
-  var _classNames;
+  var _classNames, _rest$ariaPressed;
 
   var as = _ref.as,
       children = _ref.children,
@@ -82,7 +82,7 @@ var Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
     disabled: disabled,
     type: type,
     'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : null,
-    'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null
+    'aria-pressed': (_rest$ariaPressed = rest['aria-pressed']) !== null && _rest$ariaPressed !== void 0 ? _rest$ariaPressed : hasIconOnly && kind === 'ghost' ? isSelected : null
   };
   var anchorProps = {
     href: href

package/es/components/CodeSnippet/CodeSnippet.js

@@ -19,7 +19,9 @@ import copy from 'copy-to-clipboard';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className", "type", "children", "disabled", "feedback", "feedbackTimeout", "onClick", "ariaLabel", "copyText", "copyButtonDescription", "light", "showMoreText", "showLessText", "hideCopyButton", "wrapText", "maxCollapsedNumberOfRows", "maxExpandedNumberOfRows", "minCollapsedNumberOfRows", "minExpandedNumberOfRows"];
+var _CodeSnippet$propType, _CodeSnippet$defaultP;
+
+var _excluded = ["className", "type", "children", "disabled", "feedback", "feedbackTimeout", "onClick", "aria-label", "ariaLabel", "copyText", "copyButtonDescription", "light", "showMoreText", "showLessText", "hideCopyButton", "wrapText", "maxCollapsedNumberOfRows", "maxExpandedNumberOfRows", "minCollapsedNumberOfRows", "minExpandedNumberOfRows"];
 var rowHeightInPixels = 16;
 var defaultMaxCollapsedNumberOfRows = 15;
 var defaultMaxExpandedNumberOfRows = 0;
@@ -36,7 +38,8 @@ function CodeSnippet(_ref) {
       feedback = _ref.feedback,
       feedbackTimeout = _ref.feedbackTimeout,
       onClick = _ref.onClick,
-      ariaLabel = _ref.ariaLabel,
+      ariaLabel = _ref['aria-label'],
+      deprecatedAriaLabel = _ref.ariaLabel,
       copyText = _ref.copyText,
       copyButtonDescription = _ref.copyButtonDescription,
       light = _ref.light,
@@ -171,7 +174,7 @@ function CodeSnippet(_ref) {
 
     return /*#__PURE__*/React__default.createElement(Copy, _extends({}, rest, {
       onClick: handleCopyClick,
-      "aria-label": ariaLabel,
+      "aria-label": deprecatedAriaLabel || ariaLabel,
       "aria-describedby": uid,
       className: codeSnippetClasses,
       feedback: feedback,
@@ -214,10 +217,12 @@ function CodeSnippet(_ref) {
     className: codeSnippetClasses
   }), /*#__PURE__*/React__default.createElement("div", _extends({
     ref: codeContainerRef,
-    role: type === 'single' ? 'textbox' : null,
-    tabIndex: type === 'single' && !disabled ? 0 : null,
+    role: type === 'single' || type === 'multi' ? 'textbox' : null,
+    tabIndex: (type === 'single' || type === 'multi') && !disabled ? 0 : null,
     className: "".concat(prefix, "--snippet-container"),
-    "aria-label": ariaLabel || 'code-snippet',
+    "aria-label": deprecatedAriaLabel || ariaLabel || 'code-snippet',
+    "aria-readonly": type === 'single' || type === 'multi' ? true : null,
+    "aria-multiline": type === 'multi' ? true : null,
     onScroll: type === 'single' && handleScroll || null
   }, containerStyle), /*#__PURE__*/React__default.createElement("pre", {
     ref: codeContentRef,
@@ -251,114 +256,7 @@ function CodeSnippet(_ref) {
   })));
 }
 
-CodeSnippet.propTypes = {
-  /**
-   * Specify a label to be read by screen readers on the containing <textbox>
-   * node
-   */
-  ariaLabel: PropTypes.string,
-
-  /**
-   * Provide the content of your CodeSnippet as a node or string
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify the description for the Copy Button
-   */
-  copyButtonDescription: PropTypes.string,
-
-  /**
-   * Optional text to copy. If not specified, the `children` node's `innerText`
-   * will be used as the copy value.
-   */
-  copyText: PropTypes.string,
-
-  /**
-   * Specify whether or not the CodeSnippet should be disabled
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Specify the string displayed when the snippet is copied
-   */
-  feedback: PropTypes.string,
-
-  /**
-   * Specify the time it takes for the feedback message to timeout
-   */
-  feedbackTimeout: PropTypes.number,
-
-  /**
-   * Specify whether or not a copy button should be used/rendered.
-   */
-  hideCopyButton: PropTypes.bool,
-
-  /**
-   * Specify whether you are using the light variant of the Code Snippet,
-   * typically used for inline snippet to display an alternate color
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
-  /**
-   * Specify the maximum number of rows to be shown when in collapsed view
-   */
-  maxCollapsedNumberOfRows: PropTypes.number,
-
-  /**
-   * Specify the maximum number of rows to be shown when in expanded view
-   */
-  maxExpandedNumberOfRows: PropTypes.number,
-
-  /**
-   * Specify the minimum number of rows to be shown when in collapsed view
-   */
-  minCollapsedNumberOfRows: PropTypes.number,
-
-  /**
-   * Specify the minimum number of rows to be shown when in expanded view
-   */
-  minExpandedNumberOfRows: PropTypes.number,
-
-  /**
-   * An optional handler to listen to the `onClick` even fired by the Copy
-   * Button
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * Specify a string that is displayed when the Code Snippet has been
-   * interacted with to show more lines
-   */
-  showLessText: PropTypes.string,
-
-  /**
-   * Specify a string that is displayed when the Code Snippet text is more
-   * than 15 lines
-   */
-  showMoreText: PropTypes.string,
-
-  /**
-   * Provide the type of Code Snippet
-   */
-  type: PropTypes.oneOf(['single', 'inline', 'multi']),
-
-  /**
-   * Specify whether or not to wrap the text.
-   */
-  wrapText: PropTypes.bool
-};
-CodeSnippet.defaultProps = {
-  ariaLabel: 'Copy to clipboard',
-  type: 'single',
-  showMoreText: 'Show more',
-  showLessText: 'Show less',
-  wrapText: false
-};
+CodeSnippet.propTypes = (_CodeSnippet$propType = {}, _defineProperty(_CodeSnippet$propType, 'aria-label', PropTypes.string), _defineProperty(_CodeSnippet$propType, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_CodeSnippet$propType, "children", PropTypes.node), _defineProperty(_CodeSnippet$propType, "className", PropTypes.string), _defineProperty(_CodeSnippet$propType, "copyButtonDescription", PropTypes.string), _defineProperty(_CodeSnippet$propType, "copyText", PropTypes.string), _defineProperty(_CodeSnippet$propType, "disabled", PropTypes.bool), _defineProperty(_CodeSnippet$propType, "feedback", PropTypes.string), _defineProperty(_CodeSnippet$propType, "feedbackTimeout", PropTypes.number), _defineProperty(_CodeSnippet$propType, "hideCopyButton", PropTypes.bool), _defineProperty(_CodeSnippet$propType, "light", deprecate(PropTypes.bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _defineProperty(_CodeSnippet$propType, "maxCollapsedNumberOfRows", PropTypes.number), _defineProperty(_CodeSnippet$propType, "maxExpandedNumberOfRows", PropTypes.number), _defineProperty(_CodeSnippet$propType, "minCollapsedNumberOfRows", PropTypes.number), _defineProperty(_CodeSnippet$propType, "minExpandedNumberOfRows", PropTypes.number), _defineProperty(_CodeSnippet$propType, "onClick", PropTypes.func), _defineProperty(_CodeSnippet$propType, "showLessText", PropTypes.string), _defineProperty(_CodeSnippet$propType, "showMoreText", PropTypes.string), _defineProperty(_CodeSnippet$propType, "type", PropTypes.oneOf(['single', 'inline', 'multi'])), _defineProperty(_CodeSnippet$propType, "wrapText", PropTypes.bool), _CodeSnippet$propType);
+CodeSnippet.defaultProps = (_CodeSnippet$defaultP = {}, _defineProperty(_CodeSnippet$defaultP, 'aria-label', 'Copy to clipboard'), _defineProperty(_CodeSnippet$defaultP, "type", 'single'), _defineProperty(_CodeSnippet$defaultP, "showMoreText", 'Show more'), _defineProperty(_CodeSnippet$defaultP, "showLessText", 'Show less'), _defineProperty(_CodeSnippet$defaultP, "wrapText", false), _CodeSnippet$defaultP);
 
 export { CodeSnippet as default };

package/es/components/ComboBox/ComboBox.d.ts

@@ -11,6 +11,12 @@ import { ListBoxType, ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
+     * Specify a label to be read by screen readers on the container node
+     * 'aria-label' of the ListBox component.
+     */
+    ['aria-label']?: string;
+    /**
+     * @deprecated please use `aria-label` instead.
      * 'aria-label' of the ListBox component.
      */
     ariaLabel?: string;

package/es/components/ComboBox/ComboBox.js

@@ -25,9 +25,11 @@ import { Text } from '../Text/Text.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
-import { Space, Enter } from '../../internal/keyboard/keys.js';
+import { Space, Enter, Escape } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "readOnly", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
+var _ComboBox$propTypes, _ComboBox$defaultProp;
+
+var _excluded = ["aria-label", "ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "readOnly", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -84,7 +86,8 @@ var getInstanceId = setupGetInstanceId();
 var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var _cx, _ref4, _cx4, _Text;
 
-  var ariaLabel = props.ariaLabel,
+  var ariaLabel = props['aria-label'],
+      deprecatedAriaLabel = props.ariaLabel,
       containerClassName = props.className,
       direction = props.direction,
       disabled = props.disabled,
@@ -304,6 +307,14 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
         if (match(event, Enter) && !inputValue) {
           toggleMenu();
         }
+
+        if (match(event, Escape) && inputValue) {
+          if (event.target === textInput.current && isOpen) {
+            toggleMenu();
+            event.preventDownshiftDefault = true;
+            event.persist();
+          }
+        }
       }
     });
 
@@ -366,7 +377,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       isOpen: isOpen,
       translateWithId: translateWithId
     }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({
-      'aria-label': ariaLabel
+      'aria-label': deprecatedAriaLabel || ariaLabel
     }), isOpen ? filterItems(items, itemToString, inputValue).map(function (item, index) {
       var _getItemProps;
 
@@ -395,178 +406,14 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   });
 });
 ComboBox.displayName = 'ComboBox';
-ComboBox.propTypes = {
-  /**
-   * 'aria-label' of the ListBox component.
-   */
-  ariaLabel: PropTypes.string,
-
-  /**
-   * An optional className to add to the container node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify the direction of the combobox dropdown. Can be either top or bottom.
-   */
-  direction: PropTypes.oneOf(['top', 'bottom']),
-
-  /**
-   * Specify if the control should be disabled, or not
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Additional props passed to Downshift
-   */
-  // @ts-ignore
-  downshiftProps: PropTypes.shape(Downshift.propTypes),
-
-  /**
-   * Provide helper text that is used alongside the control label for
-   * additional help
-   */
-  helperText: PropTypes.string,
-
-  /**
-   * Specify a custom `id` for the input
-   */
-  id: PropTypes.string.isRequired,
-
-  /**
-   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
-   * from their collection that are pre-selected
-   */
-  initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
-
-  /**
-   * Specify if the currently selected value is invalid.
-   */
-  invalid: PropTypes.bool,
-
-  /**
-   * Message which is displayed if the value is invalid.
-   */
-  invalidText: PropTypes.node,
-
-  /**
-   * Optional function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
-   */
-  itemToElement: PropTypes.func,
-
-  /**
-   * Helper function passed to downshift that allows the library to render a
-   * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list
-   */
-  itemToString: PropTypes.func,
-
-  /**
-   * We try to stay as generic as possible here to allow individuals to pass
-   * in a collection of whatever kind of data structure they prefer
-   */
-  items: PropTypes.array.isRequired,
-
-  /**
-   * should use "light theme" (white background)?
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `Combobox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
-  /**
-   * `onChange` is a utility for this controlled component to communicate to a
-   * consuming component when a specific dropdown item is selected.
-   * `({ selectedItem }) => void`
-   * @param {{ selectedItem }}
-   */
-  onChange: PropTypes.func.isRequired,
-
-  /**
-   * Callback function to notify consumer when the text input changes.
-   * This provides support to change available items based on the text.
-   * `(inputText) => void`
-   * @param {string} inputText
-   */
-  onInputChange: PropTypes.func,
-
-  /**
-   * Helper function passed to Downshift that allows the user to observe internal
-   * state changes
-   * `(changes, stateAndHelpers) => void`
-   */
-  onStateChange: PropTypes.func,
-
-  /**
-   * Callback function that fires when the combobox menu toggle is clicked
-   * `(evt) => void`
-   * @param {MouseEvent} event
-   */
-  onToggleClick: PropTypes.func,
-
-  /**
-   * Used to provide a placeholder text node before a user enters any input.
-   * This is only present if the control has no items selected
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Is the ComboBox readonly?
-   */
-  readOnly: PropTypes.bool,
-
-  /**
-   * For full control of the selection
-   */
-  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
-
-  /**
-   * Specify your own filtering logic by passing in a `shouldFilterItem`
-   * function that takes in the current input and an item and passes back
-   * whether or not the item should be filtered.
-   */
-  shouldFilterItem: PropTypes.func,
-
-  /**
-   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
-   */
-  size: ListBoxSize,
-
-  /**
-   * Provide text to be used in a `<label>` element that is tied to the
-   * combobox via ARIA attributes.
-   */
-  titleText: PropTypes.node,
-
-  /**
-   * Specify a custom translation function that takes in a message identifier
-   * and returns the localized string for the message
-   */
-  translateWithId: PropTypes.func,
-
-  /**
-   * Currently supports either the default type, or an inline variant
-   */
-  type: ListBoxType,
-
-  /**
-   * Specify whether the control is currently in warning state
-   */
-  warn: PropTypes.bool,
-
-  /**
-   * Provide the text that is displayed when the control is in warning state
-   */
-  warnText: PropTypes.node
-};
-ComboBox.defaultProps = {
+ComboBox.propTypes = (_ComboBox$propTypes = {}, _defineProperty(_ComboBox$propTypes, 'aria-label', PropTypes.string), _defineProperty(_ComboBox$propTypes, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_ComboBox$propTypes, "className", PropTypes.string), _defineProperty(_ComboBox$propTypes, "direction", PropTypes.oneOf(['top', 'bottom'])), _defineProperty(_ComboBox$propTypes, "disabled", PropTypes.bool), _defineProperty(_ComboBox$propTypes, "downshiftProps", PropTypes.shape(Downshift.propTypes)), _defineProperty(_ComboBox$propTypes, "helperText", PropTypes.string), _defineProperty(_ComboBox$propTypes, "id", PropTypes.string.isRequired), _defineProperty(_ComboBox$propTypes, "initialSelectedItem", PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number])), _defineProperty(_ComboBox$propTypes, "invalid", PropTypes.bool), _defineProperty(_ComboBox$propTypes, "invalidText", PropTypes.node), _defineProperty(_ComboBox$propTypes, "itemToElement", PropTypes.func), _defineProperty(_ComboBox$propTypes, "itemToString", PropTypes.func), _defineProperty(_ComboBox$propTypes, "items", PropTypes.array.isRequired), _defineProperty(_ComboBox$propTypes, "light", deprecate(PropTypes.bool, 'The `light` prop for `Combobox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _defineProperty(_ComboBox$propTypes, "onChange", PropTypes.func.isRequired), _defineProperty(_ComboBox$propTypes, "onInputChange", PropTypes.func), _defineProperty(_ComboBox$propTypes, "onStateChange", PropTypes.func), _defineProperty(_ComboBox$propTypes, "onToggleClick", PropTypes.func), _defineProperty(_ComboBox$propTypes, "placeholder", PropTypes.string), _defineProperty(_ComboBox$propTypes, "readOnly", PropTypes.bool), _defineProperty(_ComboBox$propTypes, "selectedItem", PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number])), _defineProperty(_ComboBox$propTypes, "shouldFilterItem", PropTypes.func), _defineProperty(_ComboBox$propTypes, "size", ListBoxSize), _defineProperty(_ComboBox$propTypes, "titleText", PropTypes.node), _defineProperty(_ComboBox$propTypes, "translateWithId", PropTypes.func), _defineProperty(_ComboBox$propTypes, "type", ListBoxType), _defineProperty(_ComboBox$propTypes, "warn", PropTypes.bool), _defineProperty(_ComboBox$propTypes, "warnText", PropTypes.node), _ComboBox$propTypes);
+ComboBox.defaultProps = (_ComboBox$defaultProp = {
   disabled: false,
   itemToString: defaultItemToString,
   itemToElement: null,
   shouldFilterItem: defaultShouldFilterItem,
-  type: 'default',
-  ariaLabel: 'Choose an item',
-  direction: 'bottom'
-};
+  type: 'default'
+}, _defineProperty(_ComboBox$defaultProp, 'aria-label', 'Choose an item'), _defineProperty(_ComboBox$defaultProp, "direction", 'bottom'), _ComboBox$defaultProp);
 var ComboBox$1 = ComboBox;
 
 export { ComboBox$1 as default };

package/es/components/ComboButton/index.js

@@ -0,0 +1,164 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { ChevronDown } from '@carbon/icons-react';
+import Button from '../Button/Button.js';
+import { IconButton } from '../IconButton/index.js';
+import { Menu } from '../Menu/Menu.js';
+import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
+import { useId } from '../../internal/useId.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _ChevronDown;
+
+var _excluded = ["children", "className", "disabled", "label", "onClick", "size", "tooltipAlign", "translateWithId"];
+var spacing = 4; // top and bottom spacing between the button and the menu. in px
+
+var defaultTranslations = {
+  'carbon.combo-button.additional-actions': 'Additional actions'
+};
+
+function defaultTranslateWithId(messageId) {
+  return defaultTranslations[messageId];
+}
+
+var ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(_ref, forwardRef) {
+  var children = _ref.children,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      label = _ref.label,
+      onClick = _ref.onClick,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'lg' : _ref$size,
+      tooltipAlign = _ref.tooltipAlign,
+      _ref$translateWithId = _ref.translateWithId,
+      t = _ref$translateWithId === void 0 ? defaultTranslateWithId : _ref$translateWithId,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var id = useId('combobutton');
+  var prefix = usePrefix();
+  var containerRef = useRef(null);
+  var menuRef = useRef(null);
+  var ref = useMergedRefs([forwardRef, containerRef]);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useAttachedMenu = useAttachedMenu(containerRef),
+      open = _useAttachedMenu.open,
+      x = _useAttachedMenu.x,
+      y = _useAttachedMenu.y,
+      hookOnClick = _useAttachedMenu.handleClick,
+      handleTriggerMousedown = _useAttachedMenu.handleMousedown,
+      handleClose = _useAttachedMenu.handleClose;
+
+  function handleTriggerClick() {
+    if (containerRef.current) {
+      var _containerRef$current = containerRef.current.getBoundingClientRect(),
+          w = _containerRef$current.width;
+
+      setWidth(w);
+      hookOnClick();
+    }
+  }
+
+  function handlePrimaryActionClick(e) {
+    if (onClick) {
+      onClick(e);
+    }
+  }
+
+  function handleOpen() {
+    menuRef.current.style.width = "".concat(width, "px");
+  }
+
+  var containerClasses = cx("".concat(prefix, "--combo-button__container"), "".concat(prefix, "--combo-button__container--").concat(size), _defineProperty({}, "".concat(prefix, "--combo-button__container--open"), open), className);
+  var primaryActionClasses = cx("".concat(prefix, "--combo-button__primary-action"));
+  var triggerClasses = cx("".concat(prefix, "--combo-button__trigger"));
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: containerClasses,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: primaryActionClasses
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    size: size,
+    disabled: disabled,
+    onClick: handlePrimaryActionClick
+  }, label)), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: triggerClasses,
+    label: t('carbon.combo-button.additional-actions'),
+    size: size,
+    disabled: disabled,
+    align: tooltipAlign,
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    onClick: handleTriggerClick,
+    onMouseDown: handleTriggerMousedown,
+    "aria-owns": open ? id : null
+  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement(Menu, {
+    ref: menuRef,
+    id: id,
+    label: t('carbon.combo-button.additional-actions'),
+    size: size,
+    open: open,
+    onClose: handleClose,
+    onOpen: handleOpen,
+    x: x,
+    y: [y[0] - spacing, y[1] + spacing]
+  }, children));
+});
+ComboButton.propTypes = {
+  /**
+   * A collection of MenuItems to be rendered as additional actions for this ComboButton.
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the ComboButton should be disabled, or not.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide the label to be renderd on the primary action button.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the primary action element is clicked.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the size of the buttons and menu.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Specify how the trigger tooltip should be aligned.
+   */
+  tooltipAlign: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+
+  /**
+   * Optional method that takes in a message id and returns an
+   * internationalized string.
+   */
+  translateWithId: PropTypes.func
+};
+
+export { ComboButton };

package/es/components/ComposedModal/ComposedModal.js

@@ -196,8 +196,7 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
     onBlur: handleBlur,
     onMouseDown: handleMousedown,
     onKeyDown: handleKeyDown,
-    className: modalClass,
-    tabIndex: "-1"
+    className: modalClass
   }), /*#__PURE__*/React__default.createElement("div", {
     className: containerClass,
     role: "dialog",

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

@@ -0,0 +1,74 @@
+/**
+ * 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 { PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
+interface TableProps {
+    className?: string;
+    /**
+     * `false` If true, will apply sorting styles
+     */
+    isSortable?: boolean;
+    /**
+     * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+     */
+    overflowMenuOnHover?: boolean;
+    /**
+     *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * `false` If true, will keep the header sticky (only data rows will scroll)
+     */
+    stickyHeader?: boolean;
+    /**
+     * `false` If true, will use a width of 'auto' instead of 100%
+     */
+    useStaticWidth?: boolean;
+    /**
+     * `true` to add useZebraStyles striping.
+     */
+    useZebraStyles?: boolean;
+}
+export declare const Table: {
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, ...other }: PropsWithChildren<TableProps>): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the children that will be rendered within the Table
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * `false` If true, will apply sorting styles
+         */
+        isSortable: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+         */
+        overflowMenuOnHover: PropTypes.Requireable<boolean>;
+        /**
+         *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * `false` If true, will keep the header sticky (only data rows will scroll)
+         */
+        stickyHeader: PropTypes.Requireable<boolean>;
+        /**
+         * `false` If true, will use a width of 'auto' instead of 100%
+         */
+        useStaticWidth: PropTypes.Requireable<boolean>;
+        /**
+         * `true` to add useZebraStyles striping.
+         */
+        useZebraStyles: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        isSortable: boolean;
+        overflowMenuOnHover: boolean;
+    };
+};
+export default Table;