@carbon/ibm-products 2.43.2-canary.22 → 2.43.2-canary.226

package/lib/components/TagSet/TagSet.js

@@ -12,21 +12,21 @@ 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');
-var cx = require('classnames');
-var TagSetOverflow = require('./TagSetOverflow.js');
-var TagSetModal = require('./TagSetModal.js');
 var react = require('@carbon/react');
-var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
+var TagSetModal = require('./TagSetModal.js');
+var TagSetOverflow = require('./TagSetOverflow.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
+var useResizeObserver = require('../../global/js/hooks/useResizeObserver.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 = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label", "onClose"];
 var componentName = 'TagSet';
@@ -41,14 +41,6 @@ var defaults = {
   overflowType: 'default',
   onOverflowTagChange: function onOverflowTagChange() {}
 };
-
-// interface TagType extends TagBaseProps
-// {
-//   label: string;
-//   // we duplicate this prop to improve the DocGen
-//   type?: typeof tagTypes[number];
-// }
-
 exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'start' : _ref$align,
@@ -56,15 +48,20 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     multiline = _ref.multiline,
+    overflowAutoAlign = _ref.overflowAutoAlign,
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
     overflowClassName = _ref.overflowClassName,
     _ref$overflowType = _ref.overflowType,
     overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
-    allTagsModalTitle = _ref.allTagsModalTitle,
-    allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
-    allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
-    showAllTagsLabel = _ref.showAllTagsLabel,
+    _ref$allTagsModalTitl = _ref.allTagsModalTitle,
+    allTagsModalTitle = _ref$allTagsModalTitl === void 0 ? 'All tags' : _ref$allTagsModalTitl,
+    _ref$allTagsModalSear = _ref.allTagsModalSearchLabel,
+    allTagsModalSearchLabel = _ref$allTagsModalSear === void 0 ? 'Search all tags' : _ref$allTagsModalSear,
+    _ref$allTagsModalSear2 = _ref.allTagsModalSearchPlaceholderText,
+    allTagsModalSearchPlaceholderText = _ref$allTagsModalSear2 === void 0 ? 'Search all tags' : _ref$allTagsModalSear2,
+    _ref$showAllTagsLabel = _ref.showAllTagsLabel,
+    showAllTagsLabel = _ref$showAllTagsLabel === void 0 ? 'View all tags' : _ref$showAllTagsLabel,
     tags = _ref.tags,
     containingElementRef = _ref.containingElementRef,
     _ref$measurementOffse = _ref.measurementOffset,
@@ -97,13 +94,21 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     sizingTags = _useState10[0],
     setSizingTags = _useState10[1];
   var overflowTag = React.useRef(null);
-  var _useState11 = React.useState(false),
+  var _useState11 = React.useState(0),
     _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-    popoverOpen = _useState12[0],
-    setPopoverOpen = _useState12[1];
+    maxVisibleCount = _useState12[0],
+    setMaxVisibleCount = _useState12[1];
+  var _useState13 = React.useState(false),
+    _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
+    popoverOpen = _useState14[0],
+    setPopoverOpen = _useState14[1];
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
+  React.useEffect(function () {
+    var maxCount = maxVisible || (tags === null || tags === void 0 ? void 0 : tags.length) || 0;
+    setMaxVisibleCount(maxCount);
+  }, [maxVisible, tags]);
   React.useEffect(function () {
     var newSizingTags = [];
     // create sizing tags
@@ -158,6 +163,7 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     });
     newDisplayedTags.push( /*#__PURE__*/React__default["default"].createElement(TagSetOverflow.TagSetOverflow, {
       allTagsModalSearchThreshold: allTagsModalSearchThreshold,
+      overflowAutoAlign: overflowAutoAlign,
       className: overflowClassName,
       onShowAllClick: handleShowAllClick,
       overflowTags: newOverflowTags,
@@ -171,10 +177,10 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     }));
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(newOverflowTags);
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
   var checkFullyVisibleTags = React.useCallback(function () {
     if (multiline) {
-      return setDisplayCount(maxVisible || 3);
+      return setDisplayCount(maxVisibleCount);
     }
 
     // how many will fit?
@@ -204,12 +210,12 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     if (willFit < 1) {
       setDisplayCount(0);
     } else {
-      setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
+      setDisplayCount(maxVisibleCount ? Math.min(willFit, maxVisibleCount) : willFit);
     }
-  }, [maxVisible, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
+  }, [maxVisibleCount, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
   React.useEffect(function () {
     checkFullyVisibleTags();
-  }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
+  }, [checkFullyVisibleTags, maxVisibleCount, multiline, sizingTags]);
 
   /* don't know how to test resize */
   /* istanbul ignore next */
@@ -288,21 +294,21 @@ exports.TagSet.propTypes = {
    */
   align: index["default"].oneOf(['start', 'center', 'end']),
   /**
-   * label text for the show all search. **Note: Required if more than 10 tags**
+   * label text for the show all search.
    */
-  allTagsModalSearchLabel: string_required_if_more_than_10_tags,
+  allTagsModalSearchLabel: index["default"].string,
   /**
-   * placeholder text for the show all search. **Note: Required if more than 10 tags**
+   * placeholder text for the show all search.
    */
-  allTagsModalSearchPlaceholderText: string_required_if_more_than_10_tags,
+  allTagsModalSearchPlaceholderText: index["default"].string,
   /**
    * portal target for the all tags modal
    */
   allTagsModalTarget: index["default"].node,
   /**
-   * title for the show all modal. **Note: Required if more than 10 tags**
+   * title for the show all modal.
    */
-  allTagsModalTitle: string_required_if_more_than_10_tags,
+  allTagsModalTitle: index["default"].string,
   /**
    * className
    */
@@ -334,6 +340,10 @@ exports.TagSet.propTypes = {
    * overflowAlign from the standard tooltip. Default center.
    */
   overflowAlign: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  overflowAutoAlign: index["default"].bool,
   /**
    * overflowClassName for the tooltip popup
    */
@@ -344,10 +354,8 @@ exports.TagSet.propTypes = {
   overflowType: index["default"].oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
-   *
-   * **Note:** Required if more than 10 tags
    */
-  showAllTagsLabel: string_required_if_more_than_10_tags,
+  showAllTagsLabel: index["default"].string,
   /**
    * The tags to be shown in the TagSet. Each tag is specified as an object
    * with properties: **label**\* (required) to supply the tag content, and

package/lib/components/TagSet/TagSetOverflow.d.ts

@@ -26,6 +26,10 @@ interface TagSetOverflowProps {
      * Type of rendering displayed inside of the tag overflow component
      */
     overflowType?: OverflowType;
+    /**
+     * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+     */
+    overflowAutoAlign?: boolean;
     /**
      * Open state of the popover
      */

package/lib/components/TagSet/TagSetOverflow.js

@@ -22,7 +22,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
 var componentName = 'TagSetOverflow';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-set-overflow");
 
@@ -37,6 +37,7 @@ var TagSetOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     onShowAllClick = _ref.onShowAllClick,
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
+    overflowAutoAlign = _ref.overflowAutoAlign,
     overflowTags = _ref.overflowTags,
     overflowType = _ref.overflowType,
     showAllTagsLabel = _ref.showAllTagsLabel,
@@ -72,13 +73,14 @@ var TagSetOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     dropShadow: true,
     highContrast: true,
     onKeyDown: handleEscKeyPress,
-    open: popoverOpen
+    open: popoverOpen,
+    autoAlign: overflowAutoAlign
   }, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
     onClick: function onClick() {
       return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
     },
     className: cx__default["default"]("".concat(blockClass, "__popover-trigger"))
-  }, "+", overflowTags.length), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "+".concat(overflowTags.length)), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: overflowTagContent,
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
@@ -124,6 +126,10 @@ TagSetOverflow.propTypes = {
    * overflowAlign from the standard tooltip
    */
   overflowAlign: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  overflowAutoAlign: index["default"].bool,
   /**
    * tags shown in overflow
    */

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

@@ -1 +1,2 @@
-export { TagSet } from "./TagSet";
+export { TagSet } from './TagSet';
+export type { TagSetProps } from './TagSet';

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
+import { ButtonProps } from '@carbon/react';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonProps } from '@carbon/react';
 /**
  * The accessibility title for the close icon (if shown).
  *
@@ -21,7 +21,7 @@ export type CloseIconDescriptionTypes = {
     hasCloseIcon: true;
     closeIconDescription: string;
 };
-interface TearsheetProps extends PropsWithChildren {
+export interface TearsheetProps extends PropsWithChildren {
     /**
      * The navigation actions to be shown as buttons in the action area at the
      * bottom of the tearsheet. Each action is specified as an object with
@@ -35,7 +35,7 @@ interface TearsheetProps extends PropsWithChildren {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions: ButtonProps[];
+    actions?: ButtonProps<'button'>[];
     /**
      * The aria-label for the tearsheet, which is optional.
      * if it is not passed, the title will be used as the aria-label.
@@ -97,7 +97,7 @@ interface TearsheetProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget: ReactNode;
+    portalTarget?: ReactNode;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.
@@ -148,4 +148,3 @@ export declare const deprecatedProps: {
      */
     verticalPosition: PropTypes.Requireable<string>;
 };
-export {};

package/lib/components/Tearsheet/Tearsheet.js

@@ -10,14 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
 var React = require('react');
+var TearsheetShell = require('./TearsheetShell.js');
+var ActionSet = require('../ActionSet/ActionSet.js');
 var index = require('../../node_modules/prop-types/index.js');
-var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
+var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var react = require('@carbon/react');
-var TearsheetShell = require('./TearsheetShell.js');
-var ActionSet = require('../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode, PropsWithChildren } from 'react';
-import PropTypes from 'prop-types';
 import { ButtonProps } from '@carbon/react';
 import { CloseIconDescriptionTypes } from './TearsheetShell';
+import React, { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
 interface TearsheetNarrowBaseProps extends PropsWithChildren {
     /**
      * The navigation actions to be shown as buttons in the action area at the
@@ -23,7 +23,7 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions?: ButtonProps[];
+    actions?: ButtonProps<'button'>[];
     /**
      * The aria-label for the tearsheet, which is optional.
      * if it is not passed, the title will be used as the aria-label.
@@ -90,7 +90,7 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      */
     verticalPosition?: 'normal' | 'lower';
 }
-type TearsheetNarrowProps = TearsheetNarrowBaseProps & CloseIconDescriptionTypes;
+export type TearsheetNarrowProps = TearsheetNarrowBaseProps & CloseIconDescriptionTypes;
 /**
  * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
  * that keeps users in-context and focused by bringing actionable content front

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -10,14 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
+var TearsheetShell = require('./TearsheetShell.js');
 var React = require('react');
+var propsHelper = require('../../global/js/utils/props-helper.js');
+var ActionSet = require('../ActionSet/ActionSet.js');
 var index = require('../../node_modules/prop-types/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
-var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
-var react = require('@carbon/react');
-var TearsheetShell = require('./TearsheetShell.js');
-var ActionSet = require('../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -9,7 +9,7 @@ import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
-    actions?: ButtonProps[];
+    actions?: ButtonProps<'button'>[];
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.

package/lib/components/Tearsheet/TearsheetShell.js

@@ -18,11 +18,11 @@ 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 }; }
 
@@ -148,10 +148,16 @@ 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) {
@@ -175,10 +181,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,7 +254,11 @@ 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__default["default"].createElement(react.unstable_FeatureFlags, {
+      flags: {
+        'enable-experimental-focus-wrap-without-sentinels': true
+      }
+    }, /*#__PURE__*/React__default["default"].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),
       // Don't apply this on the initial open of a single tearsheet.
@@ -297,7 +310,8 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       alwaysRender: includeActions
     }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: !!(influencer && influencerPosition === 'right')
+      alwaysRender: !!(influencer && influencerPosition === 'right'),
+      tabIndex: -1
     }, 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')),
       neverRender: influencerPosition !== 'right'
@@ -312,7 +326,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     })))), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
-    })));
+    }))));
   } else {
     pconsole["default"].warn('Tearsheet not rendered: maximum stacking depth exceeded.');
     return null;
@@ -322,7 +336,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**
@@ -365,6 +381,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     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
   }))),
   /**

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

@@ -10,17 +10,17 @@
 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('../../node_modules/prop-types/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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className", "vertical"];
 var checkComponentEnabled = settings.pkg.checkComponentEnabled,

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

@@ -10,19 +10,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var Toolbar = require('./Toolbar.js');
+var index = require('../../node_modules/prop-types/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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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,13 +33,14 @@ 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'
+    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)),
     kind: "ghost",
@@ -50,7 +51,14 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 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 +66,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 {};