@carbon/react 1.24.0 → 1.26.0-rc.0

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -31,7 +31,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
 
-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;
@@ -48,7 +50,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,
@@ -183,7 +186,7 @@ function CodeSnippet(_ref) {
 
     return /*#__PURE__*/React__default["default"].createElement(Copy["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
       onClick: handleCopyClick,
-      "aria-label": ariaLabel,
+      "aria-label": deprecatedAriaLabel || ariaLabel,
       "aria-describedby": uid,
       className: codeSnippetClasses,
       feedback: feedback,
@@ -226,10 +229,12 @@ function CodeSnippet(_ref) {
     className: codeSnippetClasses
   }), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["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["default"].createElement("pre", {
     ref: codeContentRef,
@@ -263,114 +268,7 @@ function CodeSnippet(_ref) {
   })));
 }
 
-CodeSnippet.propTypes = {
-  /**
-   * Specify a label to be read by screen readers on the containing <textbox>
-   * node
-   */
-  ariaLabel: PropTypes__default["default"].string,
-
-  /**
-   * Provide the content of your CodeSnippet as a node or string
-   */
-  children: PropTypes__default["default"].node,
-
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes__default["default"].string,
-
-  /**
-   * Specify the description for the Copy Button
-   */
-  copyButtonDescription: PropTypes__default["default"].string,
-
-  /**
-   * Optional text to copy. If not specified, the `children` node's `innerText`
-   * will be used as the copy value.
-   */
-  copyText: PropTypes__default["default"].string,
-
-  /**
-   * Specify whether or not the CodeSnippet should be disabled
-   */
-  disabled: PropTypes__default["default"].bool,
-
-  /**
-   * Specify the string displayed when the snippet is copied
-   */
-  feedback: PropTypes__default["default"].string,
-
-  /**
-   * Specify the time it takes for the feedback message to timeout
-   */
-  feedbackTimeout: PropTypes__default["default"].number,
-
-  /**
-   * Specify whether or not a copy button should be used/rendered.
-   */
-  hideCopyButton: PropTypes__default["default"].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["default"](PropTypes__default["default"].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__default["default"].number,
-
-  /**
-   * Specify the maximum number of rows to be shown when in expanded view
-   */
-  maxExpandedNumberOfRows: PropTypes__default["default"].number,
-
-  /**
-   * Specify the minimum number of rows to be shown when in collapsed view
-   */
-  minCollapsedNumberOfRows: PropTypes__default["default"].number,
-
-  /**
-   * Specify the minimum number of rows to be shown when in expanded view
-   */
-  minExpandedNumberOfRows: PropTypes__default["default"].number,
-
-  /**
-   * An optional handler to listen to the `onClick` even fired by the Copy
-   * Button
-   */
-  onClick: PropTypes__default["default"].func,
-
-  /**
-   * Specify a string that is displayed when the Code Snippet has been
-   * interacted with to show more lines
-   */
-  showLessText: PropTypes__default["default"].string,
-
-  /**
-   * Specify a string that is displayed when the Code Snippet text is more
-   * than 15 lines
-   */
-  showMoreText: PropTypes__default["default"].string,
-
-  /**
-   * Provide the type of Code Snippet
-   */
-  type: PropTypes__default["default"].oneOf(['single', 'inline', 'multi']),
-
-  /**
-   * Specify whether or not to wrap the text.
-   */
-  wrapText: PropTypes__default["default"].bool
-};
-CodeSnippet.defaultProps = {
-  ariaLabel: 'Copy to clipboard',
-  type: 'single',
-  showMoreText: 'Show more',
-  showLessText: 'Show less',
-  wrapText: false
-};
+CodeSnippet.propTypes = (_CodeSnippet$propType = {}, _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "copyButtonDescription", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "copyText", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "feedback", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "feedbackTimeout", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "hideCopyButton", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "light", deprecate["default"](PropTypes__default["default"].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.')), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "maxCollapsedNumberOfRows", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "maxExpandedNumberOfRows", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "minCollapsedNumberOfRows", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "minExpandedNumberOfRows", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "onClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "showLessText", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "showMoreText", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "type", PropTypes__default["default"].oneOf(['single', 'inline', 'multi'])), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "wrapText", PropTypes__default["default"].bool), _CodeSnippet$propType);
+CodeSnippet.defaultProps = (_CodeSnippet$defaultP = {}, _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, 'aria-label', 'Copy to clipboard'), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, "type", 'single'), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, "showMoreText", 'Show more'), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, "showLessText", 'Show less'), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, "wrapText", false), _CodeSnippet$defaultP);
 
 exports["default"] = CodeSnippet;

package/lib/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/lib/components/ComboBox/ComboBox.js

@@ -38,7 +38,9 @@ var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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') {
@@ -95,7 +97,8 @@ var getInstanceId = setupGetInstanceId["default"]();
 var ComboBox = /*#__PURE__*/React__default["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,
@@ -315,6 +318,14 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
         if (match.match(event, keys.Enter) && !inputValue) {
           toggleMenu();
         }
+
+        if (match.match(event, keys.Escape) && inputValue) {
+          if (event.target === textInput.current && isOpen) {
+            toggleMenu();
+            event.preventDownshiftDefault = true;
+            event.persist();
+          }
+        }
       }
     });
 
@@ -377,7 +388,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       isOpen: isOpen,
       translateWithId: translateWithId
     }))), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, getMenuProps({
-      'aria-label': ariaLabel
+      'aria-label': deprecatedAriaLabel || ariaLabel
     }), isOpen ? filterItems(items, itemToString, inputValue).map(function (item, index) {
       var _getItemProps;
 
@@ -406,178 +417,14 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
   });
 });
 ComboBox.displayName = 'ComboBox';
-ComboBox.propTypes = {
-  /**
-   * 'aria-label' of the ListBox component.
-   */
-  ariaLabel: PropTypes__default["default"].string,
-
-  /**
-   * An optional className to add to the container node
-   */
-  className: PropTypes__default["default"].string,
-
-  /**
-   * Specify the direction of the combobox dropdown. Can be either top or bottom.
-   */
-  direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
-
-  /**
-   * Specify if the control should be disabled, or not
-   */
-  disabled: PropTypes__default["default"].bool,
-
-  /**
-   * Additional props passed to Downshift
-   */
-  // @ts-ignore
-  downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
-
-  /**
-   * Provide helper text that is used alongside the control label for
-   * additional help
-   */
-  helperText: PropTypes__default["default"].string,
-
-  /**
-   * Specify a custom `id` for the input
-   */
-  id: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
-  /**
-   * Specify if the currently selected value is invalid.
-   */
-  invalid: PropTypes__default["default"].bool,
-
-  /**
-   * Message which is displayed if the value is invalid.
-   */
-  invalidText: PropTypes__default["default"].node,
-
-  /**
-   * Optional function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
-   */
-  itemToElement: PropTypes__default["default"].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__default["default"].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__default["default"].array.isRequired,
-
-  /**
-   * should use "light theme" (white background)?
-   */
-  light: deprecate["default"](PropTypes__default["default"].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__default["default"].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__default["default"].func,
-
-  /**
-   * Helper function passed to Downshift that allows the user to observe internal
-   * state changes
-   * `(changes, stateAndHelpers) => void`
-   */
-  onStateChange: PropTypes__default["default"].func,
-
-  /**
-   * Callback function that fires when the combobox menu toggle is clicked
-   * `(evt) => void`
-   * @param {MouseEvent} event
-   */
-  onToggleClick: PropTypes__default["default"].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__default["default"].string,
-
-  /**
-   * Is the ComboBox readonly?
-   */
-  readOnly: PropTypes__default["default"].bool,
-
-  /**
-   * For full control of the selection
-   */
-  selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].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__default["default"].func,
-
-  /**
-   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
-   */
-  size: ListBoxPropTypes.ListBoxSize,
-
-  /**
-   * Provide text to be used in a `<label>` element that is tied to the
-   * combobox via ARIA attributes.
-   */
-  titleText: PropTypes__default["default"].node,
-
-  /**
-   * Specify a custom translation function that takes in a message identifier
-   * and returns the localized string for the message
-   */
-  translateWithId: PropTypes__default["default"].func,
-
-  /**
-   * Currently supports either the default type, or an inline variant
-   */
-  type: ListBoxPropTypes.ListBoxType,
-
-  /**
-   * Specify whether the control is currently in warning state
-   */
-  warn: PropTypes__default["default"].bool,
-
-  /**
-   * Provide the text that is displayed when the control is in warning state
-   */
-  warnText: PropTypes__default["default"].node
-};
-ComboBox.defaultProps = {
+ComboBox.propTypes = (_ComboBox$propTypes = {}, _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "direction", PropTypes__default["default"].oneOf(['top', 'bottom'])), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "downshiftProps", PropTypes__default["default"].shape(Downshift__default["default"].propTypes)), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "helperText", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "initialSelectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "invalid", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "invalidText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "itemToElement", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "itemToString", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "items", PropTypes__default["default"].array.isRequired), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "light", deprecate["default"](PropTypes__default["default"].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.')), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "onChange", PropTypes__default["default"].func.isRequired), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "onInputChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "onStateChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "onToggleClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "placeholder", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "readOnly", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "selectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "shouldFilterItem", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "size", ListBoxPropTypes.ListBoxSize), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "titleText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "translateWithId", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "type", ListBoxPropTypes.ListBoxType), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "warn", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "warnText", PropTypes__default["default"].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'
+}, _rollupPluginBabelHelpers.defineProperty(_ComboBox$defaultProp, 'aria-label', 'Choose an item'), _rollupPluginBabelHelpers.defineProperty(_ComboBox$defaultProp, "direction", 'bottom'), _ComboBox$defaultProp);
 var ComboBox$1 = ComboBox;
 
 exports["default"] = ComboBox$1;

package/lib/components/ComboButton/index.js

@@ -0,0 +1,174 @@
+/**
+ * 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 Button = require('../Button/Button.js');
+var index = require('../IconButton/index.js');
+var Menu = require('../Menu/Menu.js');
+var useAttachedMenu = require('../../internal/useAttachedMenu.js');
+var useId = require('../../internal/useId.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
+var usePrefix = require('../../internal/usePrefix.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 _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["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var id = useId.useId('combobutton');
+  var prefix = usePrefix.usePrefix();
+  var containerRef = React.useRef(null);
+  var menuRef = React.useRef(null);
+  var ref = useMergedRefs.useMergedRefs([forwardRef, containerRef]);
+
+  var _useState = React.useState(0),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useAttachedMenu = 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__default["default"]("".concat(prefix, "--combo-button__container"), "".concat(prefix, "--combo-button__container--").concat(size), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--combo-button__container--open"), open), className);
+  var primaryActionClasses = cx__default["default"]("".concat(prefix, "--combo-button__primary-action"));
+  var triggerClasses = cx__default["default"]("".concat(prefix, "--combo-button__trigger"));
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: containerClasses,
+    ref: ref
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: primaryActionClasses
+  }, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    size: size,
+    disabled: disabled,
+    onClick: handlePrimaryActionClick
+  }, label)), /*#__PURE__*/React__default["default"].createElement(index.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["default"].createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement(Menu.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__default["default"].node.isRequired,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the ComboButton should be disabled, or not.
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the label to be renderd on the primary action button.
+   */
+  label: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the primary action element is clicked.
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify the size of the buttons and menu.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Specify how the trigger tooltip should be aligned.
+   */
+  tooltipAlign: PropTypes__default["default"].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__default["default"].func
+};
+
+exports.ComboButton = ComboButton;

package/lib/components/ComposedModal/ComposedModal.js

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

package/lib/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;