@carbon/ibm-products 2.43.2-canary.15 → 2.43.2-canary.152

package/lib/components/TagOverflow/TagOverflowPopover.js

@@ -26,52 +26,48 @@ var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "
   _excluded2 = ["label", "id", "tagType", "filter", "onClose"];
 var componentName = 'TagOverflowPopover';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-popover");
-
-// Default values for props
-var defaults = {
-  allTagsModalSearchThreshold: 10,
-  overflowAlign: 'bottom'
-};
-var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
-    allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
-    className = _ref.className,
-    onShowAllClick = _ref.onShowAllClick,
-    _ref$overflowAlign = _ref.overflowAlign,
-    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
-    overflowTags = _ref.overflowTags,
-    overflowType = _ref.overflowType,
-    showAllTagsLabel = _ref.showAllTagsLabel,
-    popoverOpen = _ref.popoverOpen,
-    setPopoverOpen = _ref.setPopoverOpen,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var localRef = React.useRef();
+var TagOverflowPopover = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _overflowTags$length;
+  var allTagsModalSearchThreshold = props.allTagsModalSearchThreshold,
+    className = props.className,
+    onShowAllClick = props.onShowAllClick,
+    overflowAlign = props.overflowAlign,
+    overflowTags = props.overflowTags,
+    overflowType = props.overflowType,
+    showAllTagsLabel = props.showAllTagsLabel,
+    popoverOpen = props.popoverOpen,
+    setPopoverOpen = props.setPopoverOpen,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var localRef = React.useRef(null);
   var overflowTagContent = React.useRef(null);
   useClickOutside.useClickOutside(ref || localRef, function () {
     if (popoverOpen) {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   });
   var handleShowAllTagsClick = function handleShowAllTagsClick(evt) {
     evt.stopPropagation();
     evt.preventDefault();
-    setPopoverOpen(false);
-    onShowAllClick();
+    setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+    onShowAllClick === null || onShowAllClick === void 0 || onShowAllClick();
   };
-  var handleEscKeyPress = function handleEscKeyPress(event) {
-    var key = event.key;
+  var handleEscKeyPress = function handleEscKeyPress(evt) {
+    var key = evt.key;
     if (key === 'Escape') {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   };
   var getOverflowPopoverItems = function getOverflowPopoverItems() {
-    return overflowTags.filter(function (_, index) {
-      return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
+    var thresh = allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0;
+    return overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.filter(function (_, index) {
+      return (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) > thresh ? index < thresh : index <= thresh;
     });
   };
+  var visibleItems = getOverflowPopoverItems();
+  var hasItems = (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0;
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    "aria-hidden": overflowTags.length === 0,
-    className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
+    "aria-hidden": (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0,
+    className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0)),
     ref: ref || localRef
   }), /*#__PURE__*/React__default["default"].createElement(react.Popover, {
     align: overflowAlign,
@@ -82,21 +78,21 @@ var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(funct
     open: popoverOpen
   }, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
     onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
+      return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
     },
     className: cx__default["default"]("".concat(blockClass, "__trigger"))
-  }, "+", overflowTags.length), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "+", overflowTags === null || overflowTags === void 0 ? void 0 : 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", {
     className: "".concat(blockClass, "__tag-list")
-  }, getOverflowPopoverItems().map(function (_ref2) {
-    var label = _ref2.label,
-      id = _ref2.id,
-      tagType = _ref2.tagType,
-      filter = _ref2.filter,
-      _onClose = _ref2.onClose,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+  }, hasItems && visibleItems.map(function (_ref) {
+    var label = _ref.label,
+      id = _ref.id,
+      tagType = _ref.tagType,
+      filter = _ref.filter,
+      _onClose = _ref.onClose,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
     var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
     var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default["default"].createElement("li", {
@@ -109,7 +105,7 @@ var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(funct
       type: typeValue,
       filter: isFilterable
     }), label) : label);
-  })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default["default"].createElement(react.Link, {
+  })), ((_overflowTags$length = overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) !== null && _overflowTags$length !== void 0 ? _overflowTags$length : 0) > (allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0) && /*#__PURE__*/React__default["default"].createElement(react.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
     onClick: handleShowAllTagsClick,
@@ -137,6 +133,7 @@ TagOverflowPopover.propTypes = {
   /**
    * tags shown in overflow
    */
+  //@ts-ignore
   overflowTags: index["default"].arrayOf(index["default"].object).isRequired,
   /**
    * Type of rendering displayed inside of the tag overflow component

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

@@ -1 +1,8 @@
-export { TagOverflow } from "./TagOverflow";
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * 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 { TagOverflow } from './TagOverflow';
+export type { TagOverflowProps } from './TagOverflow';

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { TagBaseProps } from '@carbon/type';
 type Align = 'start' | 'center' | 'end';
 type OverflowAlign = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
@@ -7,7 +7,7 @@ type TagType = {
     label: string;
     type?: keyof typeof tagTypes;
 } & TagBaseProps;
-interface TagSetProps extends PropsWithChildren {
+export interface TagSetProps extends PropsWithChildren {
     /**
      * align the Tags displayed by the TagSet. Default start.
      */

package/lib/components/TagSet/TagSet.js

@@ -12,14 +12,14 @@ 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 }; }
 

package/lib/components/TagSet/TagSetOverflow.js

@@ -78,7 +78,7 @@ var TagSetOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
       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", {

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
@@ -99,9 +99,16 @@ interface TearsheetProps extends PropsWithChildren {
      */
     portalTarget: ReactNode;
     /**
-     * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
      */
     selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * The main title of the tearsheet, displayed in the header area.
      */
@@ -141,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 }; }
 
@@ -198,9 +198,17 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**@ts-ignore */
   portalTarget: TearsheetShell.portalType,
   /**
-   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
    */
   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),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

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
@@ -64,6 +64,17 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * The main title of the tearsheet, displayed in the header area.
      */
@@ -79,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 }; }
 
@@ -156,6 +156,18 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore */
   portalTarget: TearsheetShell.portalType,
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  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),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

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<any>[];
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.
@@ -81,7 +81,17 @@ interface TearsheetShellProps extends PropsWithChildren {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
     selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * Specifies the width of the tearsheet, 'narrow' or 'wide'.
      */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -18,18 +18,18 @@ 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", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+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"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
@@ -88,6 +88,8 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+    _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
+    selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
     size = _ref.size,
     slug = _ref.slug,
     title = _ref.title,
@@ -146,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) {
@@ -173,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) {
@@ -258,7 +269,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
+      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)),
@@ -320,7 +331,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**
@@ -363,6 +376,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
   }))),
   /**
@@ -454,6 +468,18 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore*/
   portalTarget: portalType,
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  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),
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */

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,10 +5,10 @@
  * 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 */
@@ -22,4 +22,3 @@ interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
 export declare let ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
-export {};

package/lib/components/Toolbar/ToolbarButton.js

@@ -10,17 +10,17 @@
 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 blockClass = "".concat(Toolbar.blockClass, "__button");
@@ -37,7 +37,7 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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,
     ref: ref,

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

@@ -10,16 +10,16 @@
 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('../../node_modules/prop-types/index.js');
 var Toolbar = require('./Toolbar.js');
+var cx = require('classnames');
+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 = ["className", "children"];
 /** Toolbar groups organize the commands within a toolbar into related groups. */

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

@@ -1,3 +1,12 @@
-export { Toolbar } from "./Toolbar";
-export { ToolbarButton } from "./ToolbarButton";
-export { ToolbarGroup } from "./ToolbarGroup";
+/**
+ * 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 { Toolbar } from './Toolbar';
+export { ToolbarButton } from './ToolbarButton';
+export { ToolbarGroup } from './ToolbarGroup';
+export type { ToolbarProps } from './Toolbar';
+export type { ToolbarButtonProps } from './ToolbarButton';
+export type { ToolbarGroupProps } from './ToolbarGroup';