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

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -32,7 +32,7 @@ var RowSizeRadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, /*#__PURE__*/React__default.createElement(RadioButtonGroup, {
     legendText: legendText,
-    name: "row-height-group",
+    name: "".concat(tableId, "--row-height-group"),
     orientation: "vertical",
     defaultSelected: getBackwardCompatibleRowSize(selectedOption),
     onChange: onChange

package/es/components/Datagrid/Datagrid/addons/stateReducer.d.ts

@@ -14,6 +14,13 @@ export function handleSelectAllRowData({ dispatch, rows, getRowId, indeterminate
     indeterminate: any;
     isChecked: any;
 }): any;
+export function handleOnPageSelectAllRowData({ dispatch, rows, getRowId, indeterminate, isChecked, }: {
+    dispatch: any;
+    rows: any;
+    getRowId: any;
+    indeterminate: any;
+    isChecked: any;
+}): any;
 export function handleDynamicRowCheck({ dispatch, status, rowId, depth, index, }: {
     dispatch: any;
     status: any;

package/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -12,8 +12,9 @@ var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
-var TOGGLE_ROW_SELECTED = 'toggleRowSelected';
-var TOGGLE_ALL_ROWS_SELECTED = 'toggleAllRowsSelected';
+var TOGGLE_ROW_SELECTED = 'toggleRowSelected'; // selects individual row
+var TOGGLE_ALL_ROWS_SELECTED = 'toggleAllRowsSelected'; // selects all rows in entire table
+var TOGGLE_ON_PAGE_ALL_ROWS_SELECTED = 'toggleAllRowsOnPageSelected'; // selects all rows in the current page
 var DYNAMIC_ROW_CHECK = 'dynamicRowCheck';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
@@ -78,12 +79,28 @@ var handleSelectAllRowData = function handleSelectAllRowData(_ref2) {
     }
   });
 };
-var handleDynamicRowCheck = function handleDynamicRowCheck(_ref3) {
+var handleOnPageSelectAllRowData = function handleOnPageSelectAllRowData(_ref3) {
   var dispatch = _ref3.dispatch,
-    status = _ref3.status,
-    rowId = _ref3.rowId,
-    depth = _ref3.depth,
-    index = _ref3.index;
+    rows = _ref3.rows,
+    getRowId = _ref3.getRowId,
+    indeterminate = _ref3.indeterminate,
+    isChecked = _ref3.isChecked;
+  return dispatch({
+    type: TOGGLE_ON_PAGE_ALL_ROWS_SELECTED,
+    payload: {
+      rows: rows,
+      getRowId: getRowId,
+      indeterminate: indeterminate,
+      isChecked: isChecked
+    }
+  });
+};
+var handleDynamicRowCheck = function handleDynamicRowCheck(_ref4) {
+  var dispatch = _ref4.dispatch,
+    status = _ref4.status,
+    rowId = _ref4.rowId,
+    depth = _ref4.depth,
+    index = _ref4.index;
   return dispatch({
     type: DYNAMIC_ROW_CHECK,
     payload: {
@@ -124,18 +141,20 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case TOGGLE_ALL_ROWS_SELECTED:
       {
-        var _ref4 = action.payload || {},
-          rows = _ref4.rows,
-          getRowId = _ref4.getRowId,
-          indeterminate = _ref4.indeterminate,
-          isChecked = _ref4.isChecked;
+        var _ref5 = action.payload || {},
+          rows = _ref5.rows,
+          getRowId = _ref5.getRowId,
+          indeterminate = _ref5.indeterminate,
+          isChecked = _ref5.isChecked;
         var newSelectedRowIds = {};
         if (rows) {
+          var _rows$find, _rows$find$getRowProp;
           var newSelectedRowData = {};
+          var nonSelectableRows = ((_rows$find = rows.find(function (row) {
+            return row.getRowProps;
+          })) === null || _rows$find === void 0 || (_rows$find$getRowProp = _rows$find.getRowProps) === null || _rows$find$getRowProp === void 0 || (_rows$find$getRowProp = _rows$find$getRowProp.call(_rows$find)) === null || _rows$find$getRowProp === void 0 ? void 0 : _rows$find$getRowProp.nonselectablerows) || [];
           rows.forEach(function (row) {
-            var _row$getRowProps;
-            var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
-            if (props && props.disabled) {
+            if (nonSelectableRows.length > 0 && nonSelectableRows.includes(row.id)) {
               return;
             }
             newSelectedRowIds[getRowId(row.original, row.index)] = true;
@@ -148,26 +167,65 @@ var stateReducer = function stateReducer(newState, action) {
         }
         return _objectSpread2({}, newState);
       }
+    case TOGGLE_ON_PAGE_ALL_ROWS_SELECTED:
+      {
+        var _ref6 = action.payload || {},
+          _rows = _ref6.rows,
+          _getRowId = _ref6.getRowId,
+          _indeterminate = _ref6.indeterminate,
+          _isChecked = _ref6.isChecked;
+        var previousSelectedRowIds = newState.selectedRowIds || {};
+        var previousSelectedRowData = newState.selectedRowData || {};
+        var _newSelectedRowIds = {};
+        if (_rows) {
+          var _newSelectedRowData = {};
+          _rows.forEach(function (row) {
+            var _row$getRowProps;
+            var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
+            if (props && props.disabled) {
+              return;
+            }
+            if (props) {
+              if (!_indeterminate && _isChecked) {
+                // adds selection to newly selected rows
+                _newSelectedRowIds[_getRowId(row.original, row.index)] = true;
+                _newSelectedRowData[_getRowId(row.original, row.index)] = row.original;
+              } else {
+                // removes selection from previously selected rows
+                delete previousSelectedRowIds[_getRowId(row.original, row.index)];
+                delete previousSelectedRowData[_getRowId(row.original, row.index)];
+              }
+            }
+          });
+          var finalSelectedRowIds = _objectSpread2(_objectSpread2({}, previousSelectedRowIds), _newSelectedRowIds);
+          var finalSelectedRowData = _objectSpread2(_objectSpread2({}, previousSelectedRowData), _newSelectedRowData);
+          return _objectSpread2(_objectSpread2({}, newState), {}, {
+            selectedRowIds: finalSelectedRowIds,
+            selectedRowData: finalSelectedRowData
+          });
+        }
+        return _objectSpread2({}, newState);
+      }
     case TOGGLE_ROW_SELECTED:
       {
-        var _ref5 = action.payload || {},
-          rowData = _ref5.rowData,
-          _isChecked = _ref5.isChecked,
-          _getRowId = _ref5.getRowId;
+        var _ref7 = action.payload || {},
+          rowData = _ref7.rowData,
+          _isChecked2 = _ref7.isChecked,
+          _getRowId2 = _ref7.getRowId;
         if (!rowData) {
           return;
         }
-        if (_isChecked) {
+        if (_isChecked2) {
           return _objectSpread2(_objectSpread2({}, newState), {}, {
-            selectedRowData: _objectSpread2(_objectSpread2({}, newState.selectedRowData), {}, _defineProperty({}, _getRowId(rowData.original, rowData.index), rowData.original))
+            selectedRowData: _objectSpread2(_objectSpread2({}, newState.selectedRowData), {}, _defineProperty({}, _getRowId2(rowData.original, rowData.index), rowData.original))
           });
         }
-        if (rowData && !_isChecked) {
+        if (rowData && !_isChecked2) {
           var newData = _objectSpread2({}, newState.selectedRowData);
-          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref6) {
-            var _ref7 = _slicedToArray(_ref6, 1),
-              key = _ref7[0];
-            return parseInt(key) !== parseInt(_getRowId(rowData.original, rowData.index));
+          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref8) {
+            var _ref9 = _slicedToArray(_ref8, 1),
+              key = _ref9[0];
+            return parseInt(key) !== parseInt(_getRowId2(rowData.original, rowData.index));
           }));
           return _objectSpread2(_objectSpread2({}, newState), {}, {
             selectedRowData: dataWithRemovedRow
@@ -183,27 +241,27 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_START:
       {
-        var _ref8 = action.payload || {},
-          headerId = _ref8.headerId;
+        var _ref10 = action.payload || {},
+          headerId = _ref10.headerId;
         return _objectSpread2(_objectSpread2({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref9 = action.payload || {},
-          _headerId = _ref9.headerId,
-          newWidth = _ref9.newWidth,
-          defaultWidth = _ref9.defaultWidth;
+        var _ref11 = action.payload || {},
+          _headerId = _ref11.headerId,
+          newWidth = _ref11.newWidth,
+          defaultWidth = _ref11.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _objectSpread2({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref10) {
-          var _ref11 = _slicedToArray(_ref10, 2);
-            _ref11[0];
-            var value = _ref11[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref12) {
+          var _ref13 = _slicedToArray(_ref12, 2);
+            _ref13[0];
+            var value = _ref13[1];
           return !isNaN(value);
         }));
         var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -218,10 +276,10 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_END:
       {
-        var _ref12 = action.payload || {},
-          onColResizeEnd = _ref12.onColResizeEnd,
-          _headerId2 = _ref12.headerId,
-          isKeyEvent = _ref12.isKeyEvent;
+        var _ref14 = action.payload || {},
+          onColResizeEnd = _ref14.onColResizeEnd,
+          _headerId2 = _ref14.headerId,
+          isKeyEvent = _ref14.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;
@@ -247,4 +305,4 @@ var stateReducer = function stateReducer(newState, action) {
   }
 };
 
-export { handleColumnResizeEndEvent, handleColumnResizingEvent, handleDynamicRowCheck, handleSelectAllRowData, handleToggleRowSelected, stateReducer };
+export { handleColumnResizeEndEvent, handleColumnResizingEvent, handleDynamicRowCheck, handleOnPageSelectAllRowData, handleSelectAllRowData, handleToggleRowSelected, stateReducer };

package/es/components/Datagrid/types/index.d.ts

@@ -87,6 +87,7 @@ export interface FilterFlyoutProps {
     flyoutIconDescription?: string;
     onFlyoutClose?: () => void;
     onFlyoutOpen?: () => void;
+    onClearFilters?: () => void;
     panelIconDescription?: string;
     primaryActionLabel?: string;
     reactTableFiltersState?: ReactTableFiltersState[];
@@ -248,6 +249,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
     ExpandedRowContentComponent?: JSXElementConstructor<any>;
     getAsyncSubRows?: (row: DatagridRow) => void;
+    enableSpacerColumn?: boolean;
 }
 export interface DataGridData {
     instance?: DataGridTableInstance;

package/es/components/Datagrid/useDisableSelectRows.js

@@ -5,24 +5,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+var nonselectablerowsList = function nonselectablerowsList(instance) {
+  var _instance$rows;
+  var nonselectablerows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
+    return instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row);
+  }).map(function (row) {
+    return row.id;
+  })) || [];
+  return nonselectablerows;
+};
 var useDisableSelectRows = function useDisableSelectRows(hooks) {
   updateSelectAll(hooks);
   updatePageSelectAll(hooks);
+  var nonselectablerows = [];
+  var useInstance = function useInstance(instance) {
+    nonselectablerows = nonselectablerowsList(instance);
+  };
+  hooks.useInstance.push(useInstance);
   var getRowProps = function getRowProps(props, _ref) {
     var _instance$shouldDisab;
     var row = _ref.row,
       instance = _ref.instance;
     return [props, {
-      disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row)
+      disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row),
+      nonselectablerows: nonselectablerows
     }];
   };
   hooks.getRowProps.push(getRowProps);
 };
 var updateSelectAll = function updateSelectAll(hooks) {
   var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
-    var _instance$rows, _instance$disableSele, _instance$state2;
+    var _instance$rows2, _instance$disableSele, _instance$state2;
     var instance = _ref2.instance;
-    var selectableRows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
+    var selectableRows = (instance === null || instance === void 0 || (_instance$rows2 = instance.rows) === null || _instance$rows2 === void 0 ? void 0 : _instance$rows2.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
     })) || [];
     var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref3) {

package/es/components/Datagrid/useFlexResize.d.ts

@@ -1,8 +1,2 @@
 export default useFlexResize;
-/**
- * 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.
- */
 declare function useFlexResize(hooks: any): void;

package/es/components/Datagrid/useFlexResize.js

@@ -5,33 +5,48 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { toConsumableArray as _toConsumableArray } from '../../_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.
- */
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
 
 var useFlexResize = function useFlexResize(hooks) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    spacerColumn = _useState2[0],
+    setSpacerColumn = _useState2[1];
+  var useInstance = function useInstance(instance) {
+    var enableSpacerColumn = instance.enableSpacerColumn;
+    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 _toConsumableArray(columns);
+    } else if (spacerColumn & actionsIdx === -1) {
+      return [].concat(_toConsumableArray(columns), [spacer]);
     }
     var cols = _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) {
@@ -39,7 +54,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'
@@ -58,6 +73,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/es/components/Datagrid/useSortableColumns.js

@@ -95,6 +95,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 = _objectSpread2(_objectSpread2({
           size: 16
@@ -149,7 +150,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
       return _objectSpread2(_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 : _toConsumableArray(sortableColumns);

package/es/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/es/components/EditUpdateCards/EditUpdateCards.js

@@ -83,8 +83,7 @@ var EditUpdateCards = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     className, // Apply any supplied class names to the main HTML element.
     // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
     _defineProperty({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
-    ref: ref,
-    role: "main"
+    ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(ProductiveCard, _extends({
     actionIcons: actionIcons,
     actionsPlacement: actionsPlacement,

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { Button, Tooltip, Tag, FlexGrid, Row, Column } from '@carbon/react';
+import { Button, Tooltip, Tag, usePrefix, FlexGrid, Row, Column } from '@carbon/react';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { string_required_if_more_than_10_tags, TagSet } from '../TagSet/TagSet.js';
 import { breakpoints, spacing10, baseFontSize } from '@carbon/layout';
@@ -93,6 +93,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var headerRef = ref || localHeaderRef;
   var sizingContainerRef = useRef(null);
   var offsetTopMeasuringRef = useRef(null);
+  var overflowMenuRef = useRef(null);
 
   // state based on props only
   var hasActionBar = actionBarItems && actionBarItems.length > 0;
@@ -166,14 +167,22 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState26 = _slicedToArray(_useState25, 2),
     widthIsNarrow = _useState26[0],
     setWidthIsNarrow = _useState26[1];
+  var prefix = 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);
@@ -391,6 +400,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     menuOptionsClass: "".concat(cx(actionBarMenuOptionsClass, "".concat(blockClass, "__action-bar-menu-options"))),
     onWidthChange: handleActionBarWidthChange,
     overflowAriaLabel: actionBarOverflowAriaLabel,
+    overflowMenuRef: overflowMenuRef,
     rightAlign: true
   })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default.createElement(Row, {
     className: cx("".concat(blockClass, "__title-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))

package/es/components/PageHeader/PageHeaderUtils.js

@@ -98,11 +98,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/es/components/SidePanel/SidePanel.js

@@ -21,8 +21,8 @@ import { moderate02 } from '@carbon/motion';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { pkg } from '../../settings.js';
 import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
+import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
-import { useFocus } from '../../global/js/hooks/useFocus.js';
 
 var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
   _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
@@ -321,10 +321,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   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 && getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
+          var _window2;
+          var primeFocusEl = 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) {
@@ -332,7 +332,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         }
       }, 0);
     }
-  }, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
+  }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
   var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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/es/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/es/components/TagOverflow/TagOverflow.js

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

package/es/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