@carbon/ibm-products 2.43.2-canary.30 → 2.43.2-canary.300

package/lib/components/Tearsheet/TearsheetShell.js

@@ -7,27 +7,20 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var getNodeTextContent = require('../../global/js/utils/getNodeTextContent.js');
 var react = require('@carbon/react');
+var ActionSet = require('../ActionSet/ActionSet.js');
 var Wrap = require('../../global/js/utils/Wrap.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
-var ActionSet = require('../ActionSet/ActionSet.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", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
@@ -70,7 +63,7 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
  *
  * See the canvas tab for the component API details.
  * */
-var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
     ariaLabel = _ref.ariaLabel,
     children = _ref.children,
@@ -111,6 +104,12 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     keyDownListener = _useFocus.keyDownListener,
     specifiedElement = _useFocus.specifiedElement;
   var modalRefValue = modalRef.current;
+
+  // Function to strip html tags out of a string.
+  var stripTags = React.useCallback(function (input) {
+    return input.replace(/<\/?[^>]+(>|$)/g, '');
+  }, []);
+  var titleText = stripTags(String(description));
   var wide = size === 'wide';
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
@@ -148,23 +147,35 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
-    if (selectorPrimaryFocus) {
-      return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+    if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
+      var _window;
+      var specifiedEl = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
+      if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
+        return specifiedEl.focus();
+      }
     }
-    firstElement === null || firstElement === void 0 || firstElement.focus();
+    setTimeout(function () {
+      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+    }, 0);
   };
   React.useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      setTimeout(function () {
-        if (selectorPrimaryFocus) {
-          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+      if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
+        var _window2;
+        var specifiedEl = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
+        if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
+          setTimeout(function () {
+            return specifiedEl.focus();
+          }, 0);
+          return;
         }
-        firstElement === null || firstElement === void 0 || firstElement.focus();
+      }
+      setTimeout(function () {
+        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
       }, 0);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
   React.useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
@@ -175,10 +186,13 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(function () {
     if (open && position !== depth) {
       setTimeout(function () {
+        if (selectorPrimaryFocus) {
+          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+        }
         firstElement === null || firstElement === void 0 || firstElement.focus();
       }, 0);
     }
-  }, [position, depth, firstElement, open]);
+  }, [position, depth, firstElement, open, specifiedElement, selectorPrimaryFocus]);
   React.useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
@@ -245,14 +259,18 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       }
       return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
     };
-    return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+      flags: {
+        'enable-experimental-focus-wrap-without-sentinels': true
+      }
+    }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
-      className: cx__default["default"](bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx(bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
       depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
       slug: slug,
       style: setScaleValues(),
-      containerClassName: cx__default["default"]("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
+      containerClassName: cx("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
@@ -262,59 +280,61 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       ref: modalRef,
       selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_rollupPluginBabelHelpers.toConsumableArray(selectorsFloatingMenus)),
       size: "sm"
-    }), includeHeader && /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
-      className: cx__default["default"]("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
-      closeClassName: cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
+    }), includeHeader && /*#__PURE__*/React.createElement(react.ModalHeader, {
+      className: cx("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
+      closeClassName: cx(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
       closeModal: onClose,
       iconDescription: closeIconDescription
-    }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__header-content"),
       element: wide ? react.Layer : undefined
-    }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__header-fields")
-    }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       element: "h2",
       className: "".concat(bcModalHeader, "__label")
-    }, label), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, label), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       element: "h3",
-      className: cx__default["default"]("".concat(bcModalHeader, "__heading"), "".concat(bc, "__heading"))
-    }, title), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__header-description")
-    }, description)), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+      className: cx("".concat(bcModalHeader, "__heading"), "".concat(bc, "__heading"))
+    }, title), /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      className: "".concat(bc, "__header-description"),
+      title: titleText
+    }, description)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__header-actions")
-    }, headerActions)), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, headerActions)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__header-navigation")
-    }, navigation)), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, navigation)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       ref: modalBodyRef,
       className: "".concat(carbonPrefix, "--modal-content ").concat(bc, "__body")
-    }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
-      className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      className: cx(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition === 'right'
-    }, influencer), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, influencer), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__right")
-    }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__main"),
       alwaysRender: includeActions
-    }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: !!(influencer && influencerPosition === 'right')
-    }, children), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
-      className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
+      alwaysRender: !!(influencer && influencerPosition === 'right'),
+      tabIndex: -1
+    }, children), /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      className: cx(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'
-    }, influencer)), includeActions && /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
+    }, influencer)), includeActions && /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__button-container")
-    }, /*#__PURE__*/React__default["default"].createElement(ActionSet.ActionSet, {
+    }, /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
       actions: actions,
       buttonSize: wide ? '2xl' : undefined,
       className: "".concat(bc, "__buttons"),
       size: wide ? '2xl' : 'lg',
       "aria-hidden": !open
-    })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    })))), /*#__PURE__*/React.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
-    })));
+    }))));
   } else {
-    pconsole["default"].warn('Tearsheet not rendered: maximum stacking depth exceeded.');
+    pconsole.default.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
     return null;
   }
 });
@@ -322,7 +342,9 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 TearsheetShell.displayName = componentName;
-var portalType = typeof Element === 'undefined' ? index["default"].object : index["default"].instanceOf(Element);
+var portalType = typeof Element === 'undefined' ? index.default.object :
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+index.default.instanceOf(Element);
 var deprecatedProps = {
   /**
    * **Deprecated**
@@ -333,7 +355,7 @@ var deprecatedProps = {
    * from below. The 'lower' position (the default) provides a little extra room at the top
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
-  verticalPosition: index["default"].oneOf(['normal', 'lower'])
+  verticalPosition: index.default.oneOf(['normal', 'lower'])
 };
 
 // The types and DocGen commentary for the component props,
@@ -357,24 +379,25 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   /**@ts-ignore*/
-  actions: index["default"].arrayOf(
+  actions: index.default.arrayOf(
   // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
-  index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
-    kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
-    label: index["default"].string,
-    loading: index["default"].bool,
+  index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+    kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
+    label: index.default.string,
+    loading: index.default.bool,
     // we duplicate this Button prop to improve the DocGen here
+    /**@ts-ignore*/
     onClick: react.Button.propTypes.onClick
   }))),
   /**
    * The main content of the tearsheet.
    */
-  children: index["default"].node,
+  children: index.default.node,
   /**
    * An optional class or classes to be added to the outermost element.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * The accessibility title for the close icon (if shown).
    *
@@ -382,7 +405,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
   /**@ts-ignore*/
-  closeIconDescription: index["default"].string.isRequired.if(function (_ref4) {
+  closeIconDescription: index.default.string.isRequired.if(function (_ref4) {
     var actions = _ref4.actions,
       hasCloseIcon = _ref4.hasCloseIcon;
     return tearsheetHasCloseIcon(actions, hasCloseIcon);
@@ -390,7 +413,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
-  description: index["default"].node,
+  description: index.default.node,
   /**
    * Enable a close icon ('x') in the header area of the tearsheet. By default,
    * (when this prop is omitted, or undefined or null) a tearsheet does not
@@ -400,57 +423,57 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * this prop to either true or false.
    */
   /**@ts-ignore*/
-  hasCloseIcon: index["default"].bool,
+  hasCloseIcon: index.default.bool,
   /**
    * The content for the header actions area, displayed alongside the title in
    * the header area of the tearsheet. This is typically a drop-down, or a set
    * of small buttons, or similar. NB the headerActions is only applicable for
    * wide tearsheets.
    */
-  headerActions: index["default"].element,
+  headerActions: index.default.element,
   /**
    * The content for the influencer section of the tearsheet, displayed
    * alongside the main content. This is typically a menu, or filter, or
    * progress indicator, or similar. NB the influencer is only applicable for
    * wide tearsheets.
    */
-  influencer: index["default"].element,
+  influencer: index.default.element,
   /**
    * The position of the influencer section, 'left' or 'right'.
    */
-  influencerPosition: index["default"].oneOf(['left', 'right']),
+  influencerPosition: index.default.oneOf(['left', 'right']),
   /**
    * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
    * is 320px.
    */
-  influencerWidth: index["default"].oneOf(['narrow', 'wide']),
+  influencerWidth: index.default.oneOf(['narrow', 'wide']),
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet
    * to maintain context for the tearsheet (e.g. as the title changes from page
    * to page of a multi-page task).
    */
-  label: index["default"].node,
+  label: index.default.node,
   /**
    * Provide a ref to return focus to once the tearsheet is closed.
    */
   /**@ts-ignore */
-  launcherButtonRef: index["default"].any,
+  launcherButtonRef: index.default.any,
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet. NB the navigation is only applicable
    * for wide tearsheets.
    */
-  navigation: index["default"].element,
+  navigation: index.default.element,
   /**
    * An optional handler that is called when the user closes the tearsheet (by
    * clicking the close button, if enabled, or clicking outside, if enabled).
    * Returning `false` here prevents the modal from closing.
    */
-  onClose: index["default"].func,
+  onClose: index.default.func,
   /**
    * Specifies whether the tearsheet is currently open.
    */
-  open: index["default"].bool,
+  open: index.default.bool,
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
@@ -460,27 +483,27 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Specify a CSS selector that matches the DOM element that should be
    * focused when the Modal opens.
    */
-  selectorPrimaryFocus: index["default"].string,
+  selectorPrimaryFocus: index.default.string,
   /**
    * Specify the CSS selectors that match the floating menus.
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
    */
   /**@ts-ignore*/
-  selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
+  selectorsFloatingMenus: index.default.arrayOf(index.default.string),
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
   /**@ts-ignore*/
-  size: index["default"].oneOf(['narrow', 'wide']).isRequired,
+  size: index.default.oneOf(['narrow', 'wide']).isRequired,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
    */
-  slug: index["default"].node,
+  slug: index.default.node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */
-  title: index["default"].node
+  title: index.default.node
 }, deprecatedProps);
 
 exports.TearsheetShell = TearsheetShell;

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

@@ -1,2 +1,10 @@
-export { Tearsheet } from "./Tearsheet";
-export { TearsheetNarrow } from "./TearsheetNarrow";
+/**
+ * Copyright IBM Corp. 2020, 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 { Tearsheet } from './Tearsheet';
+export { TearsheetNarrow } from './TearsheetNarrow';
+export type { TearsheetProps } from './Tearsheet';
+export type { TearsheetNarrowProps } from './TearsheetNarrow';

package/lib/components/Toolbar/Toolbar.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 declare const blockClass: string;
-interface ToolbarProps {
+export interface ToolbarProps {
     /** Provide an optional class to be applied to the containing node */
     className?: string;
     /** Determines whether the `Toolbar` is rendered vertically */

package/lib/components/Toolbar/Toolbar.js

@@ -7,21 +7,14 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
 var React = require('react');
-var devtools = require('../../global/js/utils/devtools.js');
+var index = require('../../_virtual/index.js');
 var getFocusableElements = require('../../global/js/utils/getFocusableElements.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var _excluded = ["children", "className", "vertical"];
 var checkComponentEnabled = settings.pkg.checkComponentEnabled,
   prefix = settings.pkg.prefix;
@@ -84,16 +77,16 @@ exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref, r) {
       }
     }
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     ref: ref,
-    className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--vertical"), vertical)),
+    className: cx(blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--vertical"), vertical)),
     onFocus: onFocus,
     onKeyDown: onKeyDown
   }, vertical && {
     'aria-orientation': 'vertical'
   }, devtools.getDevtoolsProps(componentName), {
     role: "toolbar"
-  }), /*#__PURE__*/React__default["default"].createElement(ToolbarContext.Provider, {
+  }), /*#__PURE__*/React.createElement(ToolbarContext.Provider, {
     value: {
       vertical: vertical
     }

package/lib/components/Toolbar/ToolbarButton.d.ts

@@ -5,16 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import { IconButton } from '@carbon/react';
 import React from 'react';
+import { IconButton } from '@carbon/react';
 export declare const blockClass: string;
-interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
+export interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
     /** Determines whether the caret is rendered */
     caret?: boolean;
     /** Provide an optional class to be applied to the containing node */
     className?: string;
+    /**
+     * @deprecated use `label` instead
+     * Specifies the label for the icon button */
+    iconDescription?: string;
     /** Specifies the label for the icon button */
-    iconDescription: string;
+    label: string;
     /** Specifies the icon to be used by the ToolbarButton component */
     renderIcon: React.ElementType;
 }
@@ -22,4 +26,10 @@ interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
 export declare let ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
-export {};
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     * Specifies the label for the icon button
+     *  */
+    iconDescription: import("prop-types").Requireable<string>;
+};

package/lib/components/Toolbar/ToolbarButton.js

@@ -7,22 +7,15 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var Toolbar = require('./Toolbar.js');
+var index = require('../../_virtual/index.js');
 var react = require('@carbon/react');
 var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
-var React = require('react');
 var settings = require('../../settings.js');
-var Toolbar = require('./Toolbar.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
+var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription", "label"];
 var blockClass = "".concat(Toolbar.blockClass, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -33,24 +26,32 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     renderIcon = _ref.renderIcon,
     _ref$iconDescription = _ref.iconDescription,
-    iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    deprecated_iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    label = _ref.label,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
-  return /*#__PURE__*/React__default["default"].createElement(react.IconButton, _rollupPluginBabelHelpers["extends"]({
-    align: ((_useContext = React.useContext(Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
+  return /*#__PURE__*/React.createElement(react.IconButton, _rollupPluginBabelHelpers.extends({
+    align: (_useContext = React.useContext(Toolbar.ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
   }, rest, {
-    label: iconDescription,
+    label: label !== null && label !== void 0 ? label : deprecated_iconDescription,
     ref: ref,
-    className: cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--caret"), caret)),
+    className: cx(className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
     size: "md"
-  }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, null) : null, children, caret && /*#__PURE__*/React__default["default"].createElement("span", {
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, Icon ? /*#__PURE__*/React.createElement(Icon, null) : null, children, caret && /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__caret")
   })));
 });
 var componentName = 'ToolbarButton';
 exports.ToolbarButton.displayName = componentName;
-exports.ToolbarButton.propTypes = {
+var deprecatedProps = {
+  /**
+   * **Deprecated**
+   * Specifies the label for the icon button
+   *  */
+  iconDescription: index.propTypesExports.string
+};
+exports.ToolbarButton.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /** Determines whether the caret is rendered */
   caret: index.propTypesExports.bool,
   /** Provide the content of the `ToolbarButton` */
@@ -58,10 +59,11 @@ exports.ToolbarButton.propTypes = {
   /** Provide an optional class to be applied to the containing node */
   className: index.propTypesExports.string,
   /** Specifies the label for the icon button */
-  iconDescription: index.propTypesExports.string.isRequired,
+  label: index.propTypesExports.string.isRequired,
   /** Specifies the icon to be used by the ToolbarButton component */
   renderIcon: index.propTypesExports.func.isRequired
-};
+}, deprecatedProps);
 exports.ToolbarButton = settings.pkg.checkComponentEnabled(exports.ToolbarButton, componentName);
 
 exports.blockClass = blockClass;
+exports.deprecatedProps = deprecatedProps;

package/lib/components/Toolbar/ToolbarGroup.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface ToolbarGroupProps {
+export interface ToolbarGroupProps {
     /** Provide the content of the `ToolbarGroup` */
     children?: ReactNode;
     /** Provide an optional class to be applied to the containing node */
@@ -15,4 +15,3 @@ interface ToolbarGroupProps {
 export declare let ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/Toolbar/ToolbarGroup.js

@@ -7,19 +7,12 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
 var React = require('react');
-var settings = require('../../settings.js');
+var index = require('../../_virtual/index.js');
 var Toolbar = require('./Toolbar.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx = require('classnames');
+var settings = require('../../settings.js');
 
 var _excluded = ["className", "children"];
 /** Toolbar groups organize the commands within a toolbar into related groups. */
@@ -27,9 +20,9 @@ exports.ToolbarGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     ref: ref,
-    className: cx__default["default"]("".concat(Toolbar.blockClass, "__group"), className)
+    className: cx("".concat(Toolbar.blockClass, "__group"), className)
   }), children);
 });
 var componentName = 'ToolbarGroup';