@carbon/ibm-products 2.43.2-canary.27 → 2.43.2-canary.270

package/lib/components/AboutModal/AboutModal.js

@@ -7,23 +7,17 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
+var useFocus = require('../../global/js/hooks/useFocus.js');
 var settings = require('../../settings.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrightText", "content", "links", "logo", "modalAriaLabel", "onClose", "open", "portalTarget", "title", "version"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -38,7 +32,7 @@ var componentName = 'AboutModal';
  * should be immediately apparent to the user, with a clear and obvious path
  * to completion.
  */
-exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.AboutModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var additionalInfo = _ref.additionalInfo,
     className = _ref.className,
     closeIconDescription = _ref.closeIconDescription,
@@ -54,9 +48,13 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
     version = _ref.version,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var bodyRef = React.useRef(null);
+  var localRef = React.useRef();
+  var modalRef = ref || localRef;
   var contentRef = React.useRef(null);
-  var contentId = uuidv4["default"]();
+  var contentId = uuidv4.default();
   var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
+  var _useFocus = useFocus.useFocus(modalRef),
+    firstElement = _useFocus.firstElement;
 
   // We can't add a ref directly to the ModalBody, so track it in a ref
   // as the parent of the current bodyRef element
@@ -64,47 +62,59 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
     var _contentRef$current;
     bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
   }, [bodyRef]);
-  return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass,
+  React.useEffect(function () {
+    if (open) {
+      setTimeout(function () {
+        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+      }, 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+    flags: {
+      'enable-experimental-focus-wrap-without-sentinels': true
+    }
+  }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass,
     // Apply the block class to the main HTML element
     className // Apply any supplied class names to the main HTML element.
     ),
-    "aria-label": modalAriaLabel
+    "aria-label": modalAriaLabel,
+    ref: modalRef
   }, _rollupPluginBabelHelpers.objectSpread2({
     onClose: onClose,
-    open: open,
-    ref: ref
-  }, devtools.getDevtoolsProps(componentName))), /*#__PURE__*/React__default["default"].createElement("div", {
+    open: open
+  }, devtools.getDevtoolsProps(componentName))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__logo")
-  }, logo), /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
+  }, logo), /*#__PURE__*/React.createElement(react.ModalHeader, {
     className: "".concat(blockClass, "__header"),
     closeModal: onClose,
     iconDescription: closeIconDescription,
     label: title,
     labelClassName: "".concat(blockClass, "__title")
-  }), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, {
+  }), /*#__PURE__*/React.createElement(react.ModalBody, {
     className: "".concat(blockClass, "__body")
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body-content"),
     ref: contentRef,
     id: contentId
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__version")
-  }, version), links && links.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, version), links && links.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__links-container")
   }, links.map(function (link, i) {
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
       key: i
     }, link);
-  })), content && /*#__PURE__*/React__default["default"].createElement("p", {
+  })), content && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__content")
-  }, content), copyrightText && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, content), copyrightText && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__copyright-text")
-  }, copyrightText))), additionalInfo && /*#__PURE__*/React__default["default"].createElement(react.Theme, {
+  }, copyrightText))), additionalInfo && /*#__PURE__*/React.createElement(react.Theme, {
     theme: "g100"
-  }, /*#__PURE__*/React__default["default"].createElement(react.ModalFooter, {
+  }, /*#__PURE__*/React.createElement(react.ModalFooter, {
     className: "".concat(blockClass, "__footer")
-  }, additionalInfo))));
+  }, additionalInfo)))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -120,61 +130,61 @@ exports.AboutModal.propTypes = {
    * to build your product you can provide this in the additionalInfo.
    * Additional information will be displayed in the footer.
    */
-  additionalInfo: index["default"].node,
+  additionalInfo: index.default.node,
   /**
    * Provide an optional class to be applied to the modal root node.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * The accessibility title for the close icon.
    */
-  closeIconDescription: index["default"].string.isRequired,
+  closeIconDescription: index.default.string.isRequired,
   /**
    * Subhead text providing any relevant product disclaimers including
    * legal information (optional)
    */
-  content: index["default"].node,
+  content: index.default.node,
   /**
    * Trademark and copyright information. Displays first year of
    * product release to current year.
    */
-  copyrightText: index["default"].string.isRequired,
+  copyrightText: index.default.string.isRequired,
   /**
    * An array of Carbon `Link` component if there are additional information
    * to call out within the card. The about modal should be used to display
    * the product information and not where users go to find help (optional)
    */
-  links: index["default"].arrayOf(index["default"].element),
+  links: index.default.arrayOf(index.default.element),
   /**
    * A visual symbol used to represent the product.
    */
-  logo: index["default"].node.isRequired,
+  logo: index.default.node.isRequired,
   /**
    * Specifies aria label for AboutModal
    */
-  modalAriaLabel: index["default"].string,
+  modalAriaLabel: index.default.string,
   /**
    * Specifies an optional handler which is called when the AboutModal
    * is closed. Returning `false` prevents the AboutModal from closing.
    */
-  onClose: index["default"].func,
+  onClose: index.default.func,
   /**
    * Specifies whether the AboutModal is open or not.
    */
-  open: index["default"].bool,
+  open: index.default.bool,
   /**
    * The DOM node the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: index["default"].node,
+  portalTarget: index.default.node,
   /**
    * Header text that provides the product name. The IBM Services logo
    * consists of two discrete, but required, elements: the iconic
    * IBM 8-bar logo represented alongside the IBM Services logotype.
    * Please follow these guidelines to ensure proper execution.
    */
-  title: index["default"].node.isRequired,
+  title: index.default.node.isRequired,
   /**
    * Text that provides information on the version number of your product.
    */
-  version: index["default"].string.isRequired
+  version: index.default.string.isRequired
 };

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

@@ -1 +1,8 @@
-export { AboutModal } from "./AboutModal";
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { AboutModal } from './AboutModal';
+export type { AboutModalProps } from './AboutModal';

package/lib/components/ActionBar/ActionBar.d.ts

@@ -1,5 +1,65 @@
+import React, { PropsWithChildren, ForwardedRef } from 'react';
+import { ButtonProps } from '@carbon/type';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+interface Action extends ButtonProps {
+    id?: string;
+    key: string;
+    iconDescription: string;
+    label: string;
+    onClick?: () => void;
+    renderIcon: CarbonIconType;
+}
+interface ActionBarProps extends PropsWithChildren {
+    /**
+     * Specifies the action bar items. Each item is specified as an object
+     * with required fields: key for array rendering, renderIcon, iconDescription and
+     * label to provide the icon to display,
+     * and optional 'onClick' to receive notifications when the button is clicked.
+     * Additional fields in the object will be passed to the
+     * Button component, and these can include 'disabled', 'ref', 'className',
+     * and any other Button props.
+     *
+     * Note that the Button props 'kind', 'size',
+     * 'tooltipPosition', 'tooltipAlignment' and 'type' are ignored, as these
+     * cannot be used for an action bar item.
+     *
+     * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions?: readonly Action[];
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * maxVisible : Maximum action bar items visible before going into the overflow menu
+     */
+    maxVisible?: number;
+    /**
+     * class name applied to the overflow options
+     */
+    menuOptionsClass?: string;
+    /**
+     * onItemCountChange - event reporting maxWidth
+     */
+    onWidthChange?: (sizes: {
+        minWidth: number;
+        maxWidth: number;
+    }) => void;
+    /**
+     * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+     */
+    overflowAriaLabel: string;
+    /**
+     * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+     */
+    overflowMenuRef?: ForwardedRef<HTMLDivElement>;
+    /**
+     * align tags to right of available space
+     */
+    rightAlign?: boolean;
+}
 /**
  * The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
  */
-export let ActionBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/ActionBar/ActionBar.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
@@ -21,15 +19,9 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var ActionBarItem = require('./ActionBarItem.js');
 var ActionBarOverflowItems = require('./ActionBarOverflowItems.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
+var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "overflowMenuRef", "rightAlign"],
   _excluded2 = ["key", "id"],
   _excluded3 = ["key"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--action-bar");
 var componentName = 'ActionBar';
@@ -38,13 +30,12 @@ var componentName = 'ActionBar';
 var defaults = {
   actions: Object.freeze([])
 };
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
  * The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
  */
-exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.ActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     className = _ref.className,
@@ -52,6 +43,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
     menuOptionsClass = _ref.menuOptionsClass,
     onWidthChange = _ref.onWidthChange,
     overflowAriaLabel = _ref.overflowAriaLabel,
+    overflowMenuRef = _ref.overflowMenuRef,
     rightAlign = _ref.rightAlign,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(0),
@@ -62,27 +54,28 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     displayedItems = _useState4[0],
     setDisplayedItems = _useState4[1];
-  var _useState5 = React.useState([]),
+  var _useState5 = React.useState(null),
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     hiddenSizingItems = _useState6[0],
     setHiddenSizingItems = _useState6[1];
-  var internalId = React.useRef(uuidv4["default"]());
+  var internalId = React.useRef(uuidv4.default());
   var refDisplayedItems = React.useRef(null);
   var sizingRef = React.useRef(null);
   var sizes = React.useRef({});
-  var backupRef = React.useRef();
+  var backupRef = React.useRef(null);
   var localRef = ref || backupRef;
 
   // create hidden sizing items
   React.useEffect(function () {
     // Hidden action bar and items used to calculate sizes
-    setHiddenSizingItems( /*#__PURE__*/React__default["default"].createElement("div", {
+    setHiddenSizingItems( /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__hidden-sizing-items"),
       "aria-hidden": true,
       ref: sizingRef
-    }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
       className: "".concat(blockClass, "__hidden-sizing-item"),
       overflowAriaLabel: "hidden sizing overflow items",
+      overflowMenuRef: overflowMenuRef,
       overflowItems: [],
       key: "hidden-overflow-menu",
       tabIndex: -1
@@ -90,7 +83,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
       var key = _ref2.key,
         id = _ref2.id,
         rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-      return /*#__PURE__*/React__default["default"].createElement(ActionBarItem.ActionBarItem, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      return /*#__PURE__*/React.createElement(ActionBarItem.ActionBarItem, _rollupPluginBabelHelpers.extends({}, rest, {
         // ensure id is not duplicated
         "data-original-id": id,
         key: "hidden-item-".concat(key),
@@ -98,7 +91,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
         tabIndex: -1
       }));
     }))));
-  }, [actions]);
+  }, [actions, overflowMenuRef]);
 
   // creates displayed items based on actions, displayCount and alignment
   React.useEffect(function () {
@@ -106,7 +99,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
     var newDisplayedItems = actions.map(function (_ref3) {
       var key = _ref3.key,
         rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
-      return /*#__PURE__*/React__default["default"].createElement(ActionBarItem.ActionBarItem, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      return /*#__PURE__*/React.createElement(ActionBarItem.ActionBarItem, _rollupPluginBabelHelpers.extends({}, rest, {
         key: key
       }));
     });
@@ -116,38 +109,40 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
 
     // add overflow menu if needed
     if (newOverflowItems.length) {
-      newDisplayedItems.push( /*#__PURE__*/React__default["default"].createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
+      newDisplayedItems.push( /*#__PURE__*/React.createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
         menuOptionsClass: menuOptionsClass,
         overflowAriaLabel: overflowAriaLabel,
+        overflowMenuRef: overflowMenuRef,
         overflowItems: newOverflowItems,
         key: "overflow-menu-".concat(internalId.current)
       }));
     }
     setDisplayedItems(newDisplayedItems);
-  }, [actions, displayCount, overflowAriaLabel, menuOptionsClass]);
+  }, [actions, displayCount, overflowAriaLabel, menuOptionsClass, overflowMenuRef]);
 
   // determine display count based on space available and width of pageActions
   var checkFullyVisibleItems = function checkFullyVisibleItems() {
     /* istanbul ignore if */
     if (sizingRef.current) {
+      var _refDisplayedItems$cu;
       var sizingItems = Array.from(sizingRef.current.querySelectorAll(".".concat(blockClass, "__hidden-sizing-item")));
 
       // first item is always the overflow even if nothing else is rendered
       var overflowItem = sizingItems.shift();
 
       // determine how many will fit
-      var spaceAvailable = refDisplayedItems.current.offsetWidth;
+      var spaceAvailable = (_refDisplayedItems$cu = refDisplayedItems.current) === null || _refDisplayedItems$cu === void 0 ? void 0 : _refDisplayedItems$cu.offsetWidth;
       var willFit = 0;
       var maxVisibleWidth = 0;
       var fitLimit = maxVisible ? Math.min(maxVisible, sizingItems.length) : sizingItems.length;
 
       // loop checking the space available
       for (var i = 0; i < fitLimit; i++) {
-        var newSpaceAvailable = spaceAvailable - sizingItems[i].offsetWidth;
+        var newSpaceAvailable = spaceAvailable && spaceAvailable - sizingItems[i].offsetWidth;
 
         // update maxVisibleWidth for later use by onWidthChange
         maxVisibleWidth += sizingItems[i].offsetWidth;
-        if (newSpaceAvailable >= 0) {
+        if (newSpaceAvailable && newSpaceAvailable >= 0) {
           spaceAvailable = newSpaceAvailable;
           willFit += 1;
         }
@@ -157,7 +152,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
       var overflowWidth = overflowItem.offsetWidth;
       if (willFit < sizingItems.length) {
         // Check space for overflow
-        while (willFit > 0 && spaceAvailable < overflowWidth) {
+        while (willFit > 0 && spaceAvailable && spaceAvailable < overflowWidth) {
           willFit -= 1;
 
           // Highly unlikely that any action bar item is narrower than the overflow item
@@ -170,7 +165,10 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
         sizes.current.minWidth = overflowWidth;
         sizes.current.maxWidth = maxVisibleWidth;
         // emit onWidthChange
-        onWidthChange(_rollupPluginBabelHelpers.objectSpread2({}, sizes.current));
+        onWidthChange({
+          minWidth: overflowWidth,
+          maxWidth: maxVisibleWidth
+        });
       }
       if (willFit < 1) {
         setDisplayCount(0);
@@ -195,12 +193,12 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
   // // resize of the items
   useResizeObserver.useResizeObserver(sizingRef, handleResize);
   useResizeObserver.useResizeObserver(localRef, handleResize);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"]([blockClass, className]),
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx([blockClass, className]),
     ref: localRef
-  }), hiddenSizingItems, /*#__PURE__*/React__default["default"].createElement("div", {
+  }), hiddenSizingItems, /*#__PURE__*/React.createElement("div", {
     ref: refDisplayedItems,
-    className: cx__default["default"](["".concat(blockClass, "__displayed-items"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__displayed-items--right"), rightAlign)])
+    className: cx(["".concat(blockClass, "__displayed-items"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__displayed-items--right"), rightAlign)])
   }, displayedItems));
 });
 exports.ActionBar = settings.pkg.checkComponentEnabled(exports.ActionBar, componentName);
@@ -221,41 +219,51 @@ exports.ActionBar.propTypes = {
    *
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Button.propTypes, [
+  /**@ts-ignore */
+  actions: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Button.propTypes, [
   // props not desired from Button.propTypes
   'kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
+    id: index.default.string,
     // Additional props
-    key: index["default"].string.isRequired,
+    key: index.default.string.isRequired,
     // Redefine as form different  to Button and a key prop used by ActionBarItems
-    iconDescription: index["default"].string.isRequired,
-    label: index["default"].string.isRequired,
+    iconDescription: index.default.string.isRequired,
+    label: index.default.string.isRequired,
+    /**@ts-ignore */
     renderIcon: react.Button.propTypes.renderIcon.isRequired,
     // We duplicate onClick here to improve DocGen in Storybook
-    onClick: index["default"].func
+    onClick: index.default.func
   }))),
   // expects action bar item as array or in fragment,
   /**
    * className
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * maxVisible : Maximum action bar items visible before going into the overflow menu
    */
-  maxVisible: index["default"].number,
+  maxVisible: index.default.number,
   /**
    * class name applied to the overflow options
    */
-  menuOptionsClass: index["default"].string,
+  menuOptionsClass: index.default.string,
   /**
    * onItemCountChange - event reporting maxWidth
    */
-  onWidthChange: index["default"].func,
+  onWidthChange: index.default.func,
   /**
    * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
    */
-  overflowAriaLabel: index["default"].string.isRequired,
+  overflowAriaLabel: index.default.string.isRequired,
+  /**
+   * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+   */
+  /**@ts-ignore */
+  overflowMenuRef: index.default.oneOfType([index.default.shape({
+    current: index.default.elementType
+  }), index.default.object]),
   /**
    * align tags to right of available space
    */
-  rightAlign: index["default"].bool
+  rightAlign: index.default.bool
 };

package/lib/components/ActionBar/ActionBarItem.d.ts

@@ -1,5 +1,39 @@
+import React, { PropsWithChildren } from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+interface ActionBarItemProps extends PropsWithChildren {
+    /**
+     * Specify an optional className to be added to your Button
+     *
+     * (inherited from Carbon Button)
+     */
+    className?: string;
+    /**
+     * If specifying the `renderIcon` prop, provide a description for that icon that can
+     * be read by screen readers
+     *
+     * (inherited from Carbon Button)
+     */
+    label?: string;
+    /**
+     * Optional click handler
+     *
+     * (inherited from Carbon Button)
+     */
+    onClick?: () => void;
+    /**
+     * Optional prop to allow overriding the icon rendering.
+     * Can be a React component class
+     *
+     * (inherited from Carbon Button)
+     */
+    renderIcon?: CarbonIconType;
+    /**
+     * Optional tab index
+     */
+    tabIndex?: number;
+}
 /**
  * The ActionBarItem is used in the page header to populate the action bar
  */
-export let ActionBarItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ActionBarItem: React.ForwardRefExoticComponent<ActionBarItemProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/ActionBar/ActionBarItem.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
@@ -16,37 +14,30 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 var react = require('@carbon/react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _excluded = ["label", "className", "renderIcon"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'ActionBarItem';
 var blockClass = "".concat(settings.pkg.prefix, "--action-bar-item");
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
  * The ActionBarItem is used in the page header to populate the action bar
  */
-exports.ActionBarItem = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.ActionBarItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var label = _ref.label,
     className = _ref.className,
     renderIcon = _ref.renderIcon,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
-  return /*#__PURE__*/React__default["default"].createElement(react.IconButton, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+  return /*#__PURE__*/React.createElement(react.IconButton, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
     ref: ref,
-    className: cx__default["default"](blockClass, className),
+    className: cx(blockClass, className),
     kind: 'ghost',
     size: 'md',
-    align: 'bottom-right',
+    align: 'bottom-end',
     type: 'button',
     label: label
-  }), Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, null) : null);
+  }), Icon ? /*#__PURE__*/React.createElement(Icon, null) : null);
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -74,25 +65,30 @@ exports.ActionBarItem.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollu
    *
    * (inherited from Carbon Button)
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * If specifying the `renderIcon` prop, provide a description for that icon that can
    * be read by screen readers
    *
    * (inherited from Carbon Button)
    */
-  label: index["default"].string,
+  label: index.default.string,
   /**
    * Optional click handler
    *
    * (inherited from Carbon Button)
    */
-  onClick: index["default"].func,
+  onClick: index.default.func,
   /**
    * Optional prop to allow overriding the icon rendering.
    * Can be a React component class
    *
    * (inherited from Carbon Button)
    */
-  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object])
+  /**@ts-ignore */
+  renderIcon: index.default.oneOfType([index.default.func, index.default.object]),
+  /**
+   * Optional tab index
+   */
+  tabIndex: index.default.number
 });