@carbon/ibm-products 2.49.1 → 2.50.0-rc.0

package/lib/components/Datagrid/useFlexResize.js

@@ -10,32 +10,47 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-
-/* eslint-disable no-unreachable */
-/**
- * Copyright IBM Corp. 2020, 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.
- */
+var React = require('react');
 
 var useFlexResize = function useFlexResize(hooks) {
+  var _useState = React.useState(),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    spacerColumn = _useState2[0],
+    setSpacerColumn = _useState2[1];
+  var useInstance = function useInstance(instance) {
+    var enableSpacerColumn = instance.enableSpacerColumn;
+    React.useEffect(function () {
+      setSpacerColumn(enableSpacerColumn);
+    });
+  };
+  var spacer = {
+    id: 'spacer',
+    width: 0,
+    disableSortBy: true,
+    disableResizing: true
+  };
   hooks.visibleColumns.push(function (columns) {
     // always move actions to the end
     var actionsIdx = columns.findIndex(function (col) {
       return col.isAction;
     });
-    if (actionsIdx === -1) {
-      var _lastCol = columns.at(-1);
-      _lastCol.isFlexCol = true;
+    if (!spacerColumn && actionsIdx === -1) {
+      var lastCol = columns.at(-1);
+      lastCol.isFlexCol = true;
       return _rollupPluginBabelHelpers.toConsumableArray(columns);
+    } else if (spacerColumn & actionsIdx === -1) {
+      return [].concat(_rollupPluginBabelHelpers.toConsumableArray(columns), [spacer]);
     }
     var cols = _rollupPluginBabelHelpers.toConsumableArray(columns);
     var actions = cols.splice(actionsIdx, 1)[0];
-    cols.splice(columns.length, 0, actions);
-    // the last non-action action column should flex remaining space
-    var lastCol = columns.at(-2);
-    lastCol.isFlexCol = true;
+    if (spacerColumn) {
+      cols.splice(columns.length, 0, spacer, actions);
+    } else {
+      cols.splice(columns.length, 0, actions);
+      // the last non-action action column should flex remaining space
+      var _lastCol = columns.at(-2);
+      _lastCol.isFlexCol = true;
+    }
     return cols;
   });
   var changeProps = function changeProps(props, data) {
@@ -43,7 +58,7 @@ var useFlexResize = function useFlexResize(hooks) {
     if (!column && data.cell) {
       column = data.cell.column;
     }
-    if (column.isFlexCol) {
+    if (column.isFlexCol || column.id === spacer.id) {
       return [props, {
         style: {
           flex: '1 1 0'
@@ -62,6 +77,7 @@ var useFlexResize = function useFlexResize(hooks) {
   hooks.getCellProps.push(function (props, data) {
     return changeProps(props, data);
   });
+  hooks.useInstance.push(useInstance);
 };
 var useFlexResize$1 = useFlexResize;
 

package/lib/components/Datagrid/useSortableColumns.js

@@ -104,6 +104,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       instance.toggleSortBy(key, newSortDesc, false);
     };
     var sortableColumns = visibleColumns.map(function (column) {
+      var _column$minWidth;
       var icon = function icon(col, props) {
         var iconProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
           size: 16
@@ -158,7 +159,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
       return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, column), {}, {
         Header: Header,
-        minWidth: column.disableSortBy === true ? 0 : column.minWidth ? column.minWidth : 90
+        minWidth: column.disableSortBy ? 0 : (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : column.isAction ? 50 : 90
       });
     });
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _rollupPluginBabelHelpers.toConsumableArray(sortableColumns);

package/lib/components/EditUpdateCards/EditUpdateCards.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 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.

package/lib/components/EditUpdateCards/EditUpdateCards.js

@@ -92,8 +92,7 @@ exports.EditUpdateCards = /*#__PURE__*/React__default["default"].forwardRef(func
     className, // Apply any supplied class names to the main HTML element.
     // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
     _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
-    ref: ref,
-    role: "main"
+    ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(ProductiveCard.ProductiveCard, _rollupPluginBabelHelpers["extends"]({
     actionIcons: actionIcons,
     actionsPlacement: actionsPlacement,

package/lib/components/PageHeader/PageHeader.js

@@ -102,6 +102,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   var headerRef = ref || localHeaderRef;
   var sizingContainerRef = React.useRef(null);
   var offsetTopMeasuringRef = React.useRef(null);
+  var overflowMenuRef = React.useRef(null);
 
   // state based on props only
   var hasActionBar = actionBarItems && actionBarItems.length > 0;
@@ -175,14 +176,22 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
     widthIsNarrow = _useState26[0],
     setWidthIsNarrow = _useState26[1];
+  var prefix = react.usePrefix();
 
   // handlers
   var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
+    var _overflowMenuRef$curr;
     var minWidth = _ref2.minWidth,
       maxWidth = _ref2.maxWidth;
+    var overflowMenuWidth = 0;
+    var overflowMenu = overflowMenuRef === null || overflowMenuRef === void 0 || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === void 0 ? void 0 : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
+    if (overflowMenu) {
+      overflowMenuWidth = overflowMenu.offsetWidth;
+    }
+
     /* don't know how to test resize */
     /* istanbul ignore next */
-    setActionBarMaxWidth(maxWidth);
+    setActionBarMaxWidth(maxWidth + overflowMenuWidth);
     /* don't know how to test resize */
     /* istanbul ignore next */
     setActionBarMinWidth(minWidth);
@@ -400,6 +409,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     menuOptionsClass: "".concat(cx__default["default"](actionBarMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__action-bar-menu-options"))),
     onWidthChange: handleActionBarWidthChange,
     overflowAriaLabel: actionBarOverflowAriaLabel,
+    overflowMenuRef: overflowMenuRef,
     rightAlign: true
   })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
     className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__title-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -107,11 +107,6 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
       // adjust top for sticky with navigation
       update.headerTopValue += update.navigationRowHeight;
     }
-    if (!hasActionBar && !widthIsNarrow) {
-      // Add difference between $spacing-08 and $spacing-07 to ensure space below breadcrumb is correct on scroll
-      // $spacing-07 is used as size for breadcrumb when no action bar otherwise $spacing-08
-      update.headerTopValue += 8;
-    }
     if (!enableBreadcrumbScroll || !navigation) {
       // adjust sticky top if no navigation or breadcrumb is to stay on screen
       update.headerTopValue += update.breadcrumbRowHeight;

package/lib/components/SidePanel/SidePanel.js

@@ -25,8 +25,8 @@ var carbonMotion = require('@carbon/motion');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var settings = require('../../settings.js');
 var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
-var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
+var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -330,10 +330,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   React.useEffect(function () {
     if (open) {
       setTimeout(function () {
-        if (selectorPrimaryFocus) {
-          var _document;
-          var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
-          if (primeFocusEl) {
+        if (selectorPrimaryFocus && useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
+          var _window2;
+          var primeFocusEl = useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus);
+          if (primeFocusEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
             primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
           }
         } else if (!slideIn) {
@@ -341,7 +341,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
         }
       }, 0);
     }
-  }, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
+  }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
   var primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
   var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {

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

@@ -7,7 +7,7 @@
 import React, { ReactNode, RefObject } from 'react';
 export interface TagOverflowItem {
     className?: string;
-    filter?: string;
+    filter?: boolean;
     id: string;
     label: string;
     onClose: () => void;

package/lib/components/TagOverflow/TagOverflow.js

@@ -179,8 +179,7 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [visibleItems]);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "--align-").concat(align), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
-    ref: containerRef,
-    role: "main"
+    ref: containerRef
   }, devtools.getDevtoolsProps(componentName)), (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0 && visibleItems.map(function (item, index) {
     // Render custom components
     if (tagComponent) {

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

@@ -13,11 +13,11 @@ export interface TagSetProps extends PropsWithChildren {
      */
     align?: Align;
     /**
-     * label text for the show all search. **Note: Required if more than 10 tags**
+     * label text for the show all search.
      */
     allTagsModalSearchLabel?: string;
     /**
-     * placeholder text for the show all search. **Note: Required if more than 10 tags**
+     * placeholder text for the show all search.
      */
     allTagsModalSearchPlaceholderText?: string;
     /**
@@ -25,7 +25,7 @@ export interface TagSetProps extends PropsWithChildren {
      */
     allTagsModalTarget?: ReactNode;
     /**
-     * title for the show all modal. **Note: Required if more than 10 tags**
+     * title for the show all modal.
      */
     allTagsModalTitle?: string;
     /**
@@ -58,6 +58,10 @@ export interface TagSetProps extends PropsWithChildren {
      * overflowAlign from the standard tooltip. Default center.
      */
     overflowAlign?: OverflowAlign;
+    /**
+     * 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;
     /**
      * overflowClassName for the tooltip popup
      */
@@ -68,10 +72,8 @@ export interface TagSetProps extends PropsWithChildren {
     overflowType?: OverflowType;
     /**
      * label for the overflow show all tags link.
-     *
-     * **Note:** Required if more than 10 tags
      */
-    showAllTagsLabel: string;
+    showAllTagsLabel?: 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/TagSet.js

@@ -26,7 +26,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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,7 +73,8 @@ 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);
@@ -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/Tearsheet/Tearsheet.d.ts

@@ -35,7 +35,7 @@ export interface TearsheetProps extends PropsWithChildren {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions: ButtonProps<'button'>[];
+    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.

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

@@ -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.

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<any>[];
+    actions?: ButtonProps<'button'>[];
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.

package/lib/components/Tearsheet/TearsheetShell.js

@@ -310,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'

package/lib/global/js/hooks/useCreateComponentStepChange.d.ts

@@ -1,4 +1,4 @@
-export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedStep, stepData, onPrevious, onNext, isSubmitDisabled, setCurrentStep, setIsSubmitting, setLoadingPrevious, loadingPrevious, onClose, onRequestSubmit, componentName, currentStep, backButtonText, cancelButtonText, submitButtonText, nextButtonText, isSubmitting, componentBlockClass, setCreateComponentActions, setModalIsOpen, }: {
+export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedStep, stepData, onPrevious, onNext, isSubmitDisabled, setCurrentStep, setIsSubmitting, setLoadingPrevious, loadingPrevious, onClose, onRequestSubmit, componentName, currentStep, backButtonText, cancelButtonText, submitButtonText, nextButtonText, isSubmitting, componentBlockClass, setCreateComponentActions, setModalIsOpen, experimentalSecondarySubmit, experimentalSecondarySubmitText, }: {
     firstIncludedStep: any;
     lastIncludedStep: any;
     stepData: any;
@@ -21,4 +21,6 @@ export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedSt
     componentBlockClass: any;
     setCreateComponentActions: any;
     setModalIsOpen: any;
+    experimentalSecondarySubmit: any;
+    experimentalSecondarySubmitText: any;
 }): void;

package/lib/global/js/hooks/useCreateComponentStepChange.js

@@ -36,7 +36,9 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
     isSubmitting = _ref.isSubmitting,
     componentBlockClass = _ref.componentBlockClass,
     setCreateComponentActions = _ref.setCreateComponentActions,
-    setModalIsOpen = _ref.setModalIsOpen;
+    setModalIsOpen = _ref.setModalIsOpen,
+    experimentalSecondarySubmit = _ref.experimentalSecondarySubmit,
+    experimentalSecondarySubmitText = _ref.experimentalSecondarySubmitText;
   var continueToNextStep = React.useCallback(function () {
     setIsSubmitting(false);
     setCurrentStep(function (prev) {
@@ -216,6 +218,11 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
         return _ref5.apply(this, arguments);
       };
     }();
+    var handleExperimentalSecondarySubmit = function handleExperimentalSecondarySubmit() {
+      if (typeof (experimentalSecondarySubmit === null || experimentalSecondarySubmit === void 0 ? void 0 : experimentalSecondarySubmit.onClick) === 'function') {
+        experimentalSecondarySubmit.onClick();
+      }
+    };
     if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 0) {
       var buttons = [];
       if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1) {
@@ -236,6 +243,15 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
         } : onUnmount,
         kind: 'ghost'
       });
+      if (experimentalSecondarySubmitText && !(experimentalSecondarySubmit !== null && experimentalSecondarySubmit !== void 0 && experimentalSecondarySubmit.hideSecondarySubmit)) {
+        buttons.push({
+          key: 'create-action-button-experimentalSecondarySubmit',
+          label: experimentalSecondarySubmitText,
+          onClick: handleExperimentalSecondarySubmit,
+          kind: 'secondary',
+          disabled: experimentalSecondarySubmit === null || experimentalSecondarySubmit === void 0 ? void 0 : experimentalSecondarySubmit.disabled
+        });
+      }
       buttons.push({
         key: 'create-action-button-submit',
         label: currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
@@ -247,7 +263,7 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
       });
       setCreateComponentActions(buttons);
     }
-  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setModalIsOpen, moveToPreviousStep, onPrevious, setLoadingPrevious, loadingPrevious]);
+  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setModalIsOpen, moveToPreviousStep, onPrevious, setLoadingPrevious, loadingPrevious, experimentalSecondarySubmit, experimentalSecondarySubmitText]);
 };
 
 exports.useCreateComponentStepChange = useCreateComponentStepChange;

package/lib/global/js/utils/Wrap.d.ts

@@ -26,6 +26,10 @@ interface WrapProps extends PropsWithChildren {
      */
     neverRender?: boolean;
     className?: string;
+    /**
+     * Tab index for the wrapper div
+     */
+    tabIndex?: number;
 }
 /**
  * A simple conditional wrapper that encloses its children in a <div> (or other