@carbon/ibm-products 2.48.0 → 2.49.0-rc.0

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -16,6 +16,7 @@ var react = require('@carbon/react');
 var settings = require('../../../settings.js');
 var DatagridHead = require('./DatagridHead.js');
 var useResizeObserver = require('../../../global/js/hooks/useResizeObserver.js');
+var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +32,6 @@ var rowSizeMap = {
 };
 var defaultRowHeight = rowSizeMap.lg;
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
-  var _gridRef$current, _gridRef$current2;
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow,
@@ -48,6 +48,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     gridRef = datagridState.gridRef,
     tableId = datagridState.tableId,
     onVirtualScroll = datagridState.onVirtualScroll;
+  var headWrapRef = React.useRef(null);
+  var innerRef = React.useRef(null);
 
   /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
@@ -68,7 +70,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     if (listRef && listRef.current) {
       listRef.current.resetAfterIndex(0);
     }
-  }, [listRef]);
+  }, [listRef, rowHeight]);
   var visibleRows = DatagridPagination && page || rows;
   var testRef = React.useRef(null);
 
@@ -88,12 +90,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleScroll);
     };
   });
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (headWrapRef.current && headWrapRef.current.style) {
+      var _gridRef$current;
+      headWrapRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth, "px");
+    }
+  }, [headWrapRef, gridRef]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (testRef !== null && testRef !== void 0 && testRef.current && testRef.current.style) {
+      var _gridRef$current2;
+      testRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth, "px");
+    }
+  }, [testRef, gridRef]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__head-wrap"),
-    style: {
-      width: gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
-      overflow: 'hidden'
-    }
+    ref: headWrapRef
   }, /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState)), /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
     role: undefined
   }), {
@@ -113,10 +124,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     innerRef: innerListRef,
     outerRef: testRef,
     ref: listRef,
-    className: "".concat(blockClass, "__virtual-scrollbar"),
-    style: {
-      width: gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
-    }
+    className: "".concat(blockClass, "__virtual-scrollbar")
   }, function (_ref) {
     var _row$RowRenderer;
     var index = _ref.index,
@@ -126,6 +134,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     var _row$getRowProps = row.getRowProps(),
       key = _row$getRowProps.key;
     return /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: innerRef,
       style: _rollupPluginBabelHelpers.objectSpread2({}, style)
     }, row === null || row === void 0 || (_row$RowRenderer = row.RowRenderer) === null || _row$RowRenderer === void 0 ? void 0 : _row$RowRenderer.call(row, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, datagridState), {}, {
       row: row,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -67,6 +67,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
     isDirty = _useState10[0],
     setIsDirty = _useState10[1];
+  var prevColumnDefinitions = React.useRef();
   var onRequestClose = function onRequestClose() {
     setColumnObjects(columnDefinitions);
     setIsTearsheetOpen(false);
@@ -129,6 +130,9 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   }, [columnObjects]);
   var string = searchText.trim().toLowerCase();
   React.useEffect(function () {
+    if (prevColumnDefinitions.current !== columnDefinitions) {
+      setColumnObjects(columnDefinitions);
+    }
     var actionCount = columnObjects.filter(function (col) {
       return col.id === 'actions';
     }).length;
@@ -137,7 +141,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     }).length;
     setVisibleColumnsCount(getVisibleColumnsCount() - actionCount - datagridSelectionCount < 0 ? 0 : getVisibleColumnsCount() - actionCount - datagridSelectionCount);
     setTotalColumns(columnObjects.length - actionCount - datagridSelectionCount);
-  }, [getVisibleColumnsCount, columnObjects]);
+    prevColumnDefinitions.current = columnDefinitions;
+  }, [getVisibleColumnsCount, columnObjects, columnDefinitions]);
   return /*#__PURE__*/React__default["default"].createElement(TearsheetNarrow.TearsheetNarrow, {
     className: "".concat(blockClass, "__customize-columns-tearsheet"),
     open: isOpen,

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -25,6 +25,7 @@ var layout = require('@carbon/layout');
 var useFilters = require('./hooks/useFilters.js');
 var useShouldDisableButtons = require('./hooks/useShouldDisableButtons.js');
 var useSubscribeToEventEmitter = require('./hooks/useSubscribeToEventEmitter.js');
+var useIsomorphicEffect = require('../../../../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -111,7 +112,7 @@ var FilterPanel = function FilterPanel(_ref) {
   var filterHeadingRef = React.useRef();
   var filterSearchRef = React.useRef();
   var actionSetRef = React.useRef();
-
+  var innerContainerRef = React.useRef();
   /** State from hooks */
   var _useShouldDisableButt = useShouldDisableButtons["default"]({
       initialValue: true,
@@ -198,7 +199,7 @@ var FilterPanel = function FilterPanel(_ref) {
   useSubscribeToEventEmitter["default"](constants.CLEAR_FILTERS, function (tableId) {
     reset(tableId);
   });
-  var getScrollableContainerHeight = function getScrollableContainerHeight() {
+  var getScrollableContainerHeight = React.useCallback(function () {
     var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;
     var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
     var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
@@ -206,7 +207,13 @@ var FilterPanel = function FilterPanel(_ref) {
     var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
     showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === constants.BATCH ? actionSetHeight : 0, "px)") : 0;
     return height;
-  };
+  }, [filterHeadingRef, filterSearchRef, actionSetRef, panelOpen, showFilterSearch, updateMethod]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var height = getScrollableContainerHeight();
+    if (innerContainerRef.current && innerContainerRef.current.style) {
+      innerContainerRef.current.style.height = height;
+    }
+  }, [getScrollableContainerHeight, innerContainerRef]);
   return /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
     ref: filterPanelRef,
     className: cx__default["default"](componentClass, "".concat(componentClass, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
@@ -246,9 +253,7 @@ var FilterPanel = function FilterPanel(_ref) {
     size: "sm"
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(componentClass, "__inner-container"),
-    style: {
-      height: getScrollableContainerHeight()
-    },
+    ref: innerContainerRef,
     onScroll: onInnerContainerScroll
   }, filterSections.map(function (_ref2, index) {
     var _ref2$categoryTitle = _ref2.categoryTitle,

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -19,6 +19,7 @@ var cx = require('classnames');
 var propsHelper = require('../../../../../../global/js/utils/props-helper.js');
 var InlineEditContext = require('../InlineEditContext/InlineEditContext.js');
 var usePreviousValue = require('../../../../../../global/js/hooks/usePreviousValue.js');
+var useIsomorphicEffect = require('../../../../../../global/js/hooks/useIsomorphicEffect.js');
 var InlineEditButton = require('../InlineEditButton/InlineEditButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -78,7 +79,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
   var checkboxRef = React.useRef();
   var numberInputRef = React.useRef();
   var dropdownRef = React.useRef();
-  var datePickerRef = React.useRef();
   var outerButtonElement = React.useRef();
   var rowSize = instance.rowSize,
     onDataUpdate = instance.onDataUpdate;
@@ -308,6 +308,13 @@ var InlineEditCell = function InlineEditCell(_ref) {
       return renderDropdownItem(item);
     } : null;
   };
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (dropdownRef.current && dropdownRef.current.style) {
+      var closestElement = dropdownRef.current.closest(".".concat(blockClass, "__inline-edit--select"));
+      closestElement.style.width = "".concat(cell.column.totalWidth, "px");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dropdownRef.current, cell.column.totalWidth]);
   var renderSelectCell = function renderSelectCell() {
     var _ref6 = config || {},
       inputProps = _ref6.inputProps;
@@ -317,9 +324,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
       ariaLabel: cellLabel || 'Dropdown menu options'
     }, inputProps, {
       hideLabel: true,
-      style: {
-        width: cell.column.totalWidth
-      },
       className: cx__default["default"]("".concat(blockClass, "__inline-edit--select"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
       items: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.items) || [],
       initialSelectedItem: cell.value,
@@ -372,20 +376,21 @@ var InlineEditCell = function InlineEditCell(_ref) {
       return icons.Calendar;
     }
   };
-  var renderRegularCell = function renderRegularCell() {
-    return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, inputProps, {
-      id: cellId
-    }));
-  };
   var renderDateCell = function renderDateCell() {
     var _config$inputProps, _outerButtonElement$c;
     var datePickerPreparedProps = propsHelper.prepareProps(config.inputProps, ['datePickerInputProps']);
     var datePickerInputProps = config === null || config === void 0 || (_config$inputProps = config.inputProps) === null || _config$inputProps === void 0 ? void 0 : _config$inputProps.datePickerInputProps;
     return /*#__PURE__*/React__default["default"].createElement(react.DatePicker, _rollupPluginBabelHelpers["extends"]({}, datePickerPreparedProps, {
       appendTo: outerButtonElement === null || outerButtonElement === void 0 || (_outerButtonElement$c = outerButtonElement.current) === null || _outerButtonElement$c === void 0 ? void 0 : _outerButtonElement$c.parentElement,
-      ref: datePickerRef,
-      style: {
-        width: cell.column.totalWidth
+      ref: function ref(el) {
+        if (el && el.style) {
+          el.style.width = "".concat(cell.column.totalWidth, "px");
+          var elementId = "".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index);
+          var element = el.querySelector("input#".concat(elementId));
+          if (element) {
+            element.style.position = 'static';
+          }
+        }
       },
       datePickerType: "single",
       className: cx__default["default"]("".concat(blockClass, "__inline-edit--date"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
@@ -408,9 +413,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
       },
       value: cell.value
     }), /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, _rollupPluginBabelHelpers["extends"]({}, datePickerInputProps, {
-      style: {
-        position: 'static'
-      },
       placeholder: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.placeholder) || 'mm/dd/yyyy',
       labelText: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.labelText) || cellLabel || 'Set date',
       id: "".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index),
@@ -533,7 +535,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
       className: cx__default["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), inEditMode && (config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue))), "".concat(blockClass, "__static--outer-cell"), !disabledCell))
-    }, !nonEditCell && !disabledCell && type !== 'checkbox' && renderRegularCell(), (!inEditMode || disabledCell) && type !== 'checkbox' && /*#__PURE__*/React__default["default"].createElement(InlineEditButton.InlineEditButton, {
+    }, (!inEditMode || disabledCell) && type !== 'checkbox' && /*#__PURE__*/React__default["default"].createElement(InlineEditButton.InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),
       label: getLabel(),

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

@@ -223,6 +223,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     setGlobalFilter?: (filterValue: FilterValue) => void;
     batchActionMenuButtonLabel?: string;
     translateWithIdBatchActions?: TableBatchActionsProps['translateWithId'];
+    toolbarBatchActionsDisplayMin?: number;
     onScroll?: (evt?: any) => void;
     innerListRef?: MutableRefObject<HTMLDivElement>;
     tableHeight?: number;

package/lib/components/Datagrid/useActionsColumn.js

@@ -52,10 +52,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
             }, isFetching && /*#__PURE__*/React__default["default"].createElement(react.IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
             }), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/React__default["default"].createElement("div", {
-              className: "".concat(blockClass, "_actions-column"),
-              style: {
-                display: 'flex'
-              }
+              className: "".concat(blockClass, "_actions-column")
             }, rowActions.map(function (action, index) {
               var preparedActionProps = propsHelper.prepareProps(action, ['isDelete']);
               var align = preparedActionProps.align,

package/lib/components/Datagrid/useFiltering.d.ts

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Hooks } from 'react-table';
+export declare const exactText: (rows: any, ids: any, filterValue: any) => any;
 declare const useFiltering: (hooks: Hooks) => void;
 export default useFiltering;

package/lib/components/Datagrid/useFiltering.js

@@ -14,6 +14,15 @@ var React = require('react');
 var constants = require('./Datagrid/addons/Filtering/constants.js');
 var FilterFlyout = require('./Datagrid/addons/Filtering/FilterFlyout.js');
 
+// This function was taken from https://github.com/TanStack/table/blob/v7/src/filterTypes.js
+var exactText = function exactText(rows, ids, filterValue) {
+  return rows.filter(function (row) {
+    return ids.some(function (id) {
+      var rowValue = row.values[id];
+      return rowValue !== undefined ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase() : true;
+    });
+  });
+};
 var handleMultiFilter = function handleMultiFilter(rows, id, value) {
   // gets all the items that are selected and returns their value
   var selectedItems = value.filter(function (item) {
@@ -34,7 +43,7 @@ var handleMultiFilter = function handleMultiFilter(rows, id, value) {
 var useFiltering = function useFiltering(hooks) {
   /* istanbul ignore next */
   var filterTypes = React.useMemo(function () {
-    return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, constants.DATE, function (rows, id, _ref) {
+    return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, constants.DATE, function (rows, id, _ref) {
       var _ref2 = _rollupPluginBabelHelpers.slicedToArray(_ref, 2),
         startDate = _ref2[0],
         endDate = _ref2[1];
@@ -64,6 +73,8 @@ var useFiltering = function useFiltering(hooks) {
       return handleMultiFilter(rows, id, value);
     }), constants.MULTISELECT, function (rows, id, value) {
       return handleMultiFilter(rows, id, value);
+    }), constants.RADIO, function (rows, id, value) {
+      return exactText(rows, id, value);
     });
   }, []);
   hooks.useInstance.push(function (instance) {
@@ -99,3 +110,4 @@ var useFiltering = function useFiltering(hooks) {
 var useFiltering$1 = useFiltering;
 
 exports["default"] = useFiltering$1;
+exports.exactText = exactText;

package/lib/components/EditInPlace/EditInPlace.js

@@ -104,12 +104,10 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var onSaveHandler = function onSaveHandler() {
     setInitialValue(value);
-    setFocused(false);
     setDirtyInput(false);
     onSave();
   };
   var onCancelHandler = function onCancelHandler() {
-    setFocused(false);
     setDirtyInput(false);
     onCancel(initialValue);
   };
@@ -140,17 +138,21 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var escapeHandler = function escapeHandler() {
     onCancelHandler();
   };
+  var removeFocus = function removeFocus() {
+    var _inputRef$current2;
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+    setFocused(false);
+  };
   var onKeyHandler = function onKeyHandler(e) {
-    var _inputRef$current2, _inputRef$current3;
     // to prevent blur handler from being called twice add additional state to check if escape is being used
     escaping.current = true;
     switch (e.key) {
       case 'Escape':
-        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+        removeFocus();
         escapeHandler();
         break;
       case 'Enter':
-        (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.blur();
+        removeFocus();
         returnHandler();
         break;
     }

package/lib/components/NotificationsPanel/NotificationsPanel.d.ts

@@ -158,6 +158,8 @@ export interface NotificationsPanelProps {
      * Sets the yesterday label text
      */
     yesterdayLabel?: string;
+    /** Specify the CSS selectors that match the floating menus. */
+    selectorsFloatingMenus?: string[];
 }
 export declare let NotificationsPanel: React.ForwardRefExoticComponent<NotificationsPanelProps & React.RefAttributes<unknown>>;
 export {};

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -20,6 +20,7 @@ var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var utils = require('./utils.js');
 var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
+var wrapFocus = require('../../global/js/utils/wrapFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
 var NotificationsEmptyState = require('../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js');
@@ -30,7 +31,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close;
-var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel"];
+var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "selectorsFloatingMenus"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'NotificationsPanel';
@@ -150,8 +151,12 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     yesterdayAtText = _ref$yesterdayAtText === void 0 ? defaults.yesterdayAtText : _ref$yesterdayAtText,
     _ref$yesterdayLabel = _ref.yesterdayLabel,
     yesterdayLabel = _ref$yesterdayLabel === void 0 ? defaults.yesterdayLabel : _ref$yesterdayLabel,
+    selectorsFloatingMenus = _ref.selectorsFloatingMenus,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var notificationPanelRef = React.useRef();
+  var notificationPanelRef = React.useRef(null);
+  var notificationPanelInnerRef = React.useRef(null);
+  var startSentinel = React.useRef(null);
+  var endSentinel = React.useRef(null);
   var _useState = React.useState(open),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
@@ -164,6 +169,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     open: open
   });
   var reducedMotion = usePrefersReducedMotion["default"]();
+  var carbonPrefix = react.usePrefix();
   React.useEffect(function () {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
@@ -175,12 +181,56 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     // initialize the notification panel to open
     if (open) {
       setRender(true);
+      var observer = new MutationObserver(function () {
+        if (notificationPanelRef.current) {
+          var _querySelector;
+          var parentElement = notificationPanelRef.current;
+          parentElement === null || parentElement === void 0 || (_querySelector = parentElement.querySelector(".".concat(blockClass, "__dismiss-button"))) === null || _querySelector === void 0 || _querySelector.focus();
+          observer.disconnect();
+        }
+      });
+      if (notificationPanelRef.current) {
+        var parentElement = notificationPanelRef.current;
+        var button = parentElement === null || parentElement === void 0 ? void 0 : parentElement.querySelector(".".concat(blockClass, "__dismiss-button"));
+        button === null || button === void 0 || button.focus();
+      } else {
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true
+        });
+      }
+      return function () {
+        return observer.disconnect();
+      };
     }
   }, [open]);
   var onAnimationEnd = function onAnimationEnd() {
     // initialize the notification panel to close
     !open && setRender(false);
   };
+  var handleBlur = function handleBlur(_ref2) {
+    var oldActiveNode = _ref2.target,
+      currentActiveNode = _ref2.relatedTarget;
+    if (open && currentActiveNode && oldActiveNode && notificationPanelInnerRef.current) {
+      var bodyNode = notificationPanelInnerRef.current;
+      var startSentinelNode = startSentinel.current;
+      var endSentinelNode = endSentinel.current;
+      wrapFocus["default"]({
+        bodyNode: bodyNode,
+        startTrapNode: startSentinelNode,
+        endTrapNode: endSentinelNode,
+        currentActiveNode: currentActiveNode,
+        oldActiveNode: oldActiveNode,
+        selectorsFloatingMenus: selectorsFloatingMenus === null || selectorsFloatingMenus === void 0 ? void 0 : selectorsFloatingMenus.filter(Boolean)
+      });
+    }
+  };
+  var handleKeydown = function handleKeydown(event) {
+    event.stopPropagation();
+    if (event.key === 'Escape') {
+      onClickOutside();
+    }
+  };
   React.useEffect(function () {
     if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion) {
       setRender(false);
@@ -319,7 +369,17 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     onDismissSingleNotification(notification);
   };
   var mainSectionClassName = cx__default["default"](["".concat(blockClass, "__main-section"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
-  return shouldRender ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return shouldRender ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: "".concat(carbonPrefix, "--visually-hidden"),
+    ref: startSentinel
+  }, "Focus sentinel start"), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    role: "dialog",
+    "aria-label": "Notification Panel",
+    onBlur: handleBlur,
+    tabIndex: 0,
+    onKeyDown: handleKeydown
+  }, rest, {
     id: blockClass,
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "__container")),
     style: {
@@ -328,6 +388,8 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: notificationPanelInnerRef
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__header-container")
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__header-flex")
@@ -391,7 +453,11 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     onClick: function onClick() {
       return onSettingsClick();
     }
-  })) : null) : null;
+  })) : null)), /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: "".concat(carbonPrefix, "--visually-hidden"),
+    ref: endSentinel
+  }, "Focus sentinel end")) : null;
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -522,6 +588,10 @@ exports.NotificationsPanel.propTypes = {
    * Sets the `seconds ago` label text
    */
   secondsAgoText: index["default"].func,
+  /**
+   * Specify the CSS selectors that match the floating menus
+   */
+  selectorsFloatingMenus: index["default"].arrayOf(index["default"].string.isRequired),
   /**
    * Sets the settings icon description text
    */

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

@@ -20,6 +20,7 @@ export interface TagOverflowProps {
     allTagsModalSearchPlaceholderText?: string;
     allTagsModalTarget?: ReactNode;
     allTagsModalTitle?: string;
+    autoAlign?: boolean;
     className?: string;
     containingElementRef?: RefObject<HTMLElement>;
     items: TagOverflowItem[];

package/lib/components/TagOverflow/TagOverflow.js

@@ -27,7 +27,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", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
+var _excluded = ["align", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
   _excluded2 = ["className", "id"],
   _excluded3 = ["tagType"],
   _excluded4 = ["id", "label", "tagType", "onClose"];
@@ -41,6 +41,7 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     allTagsModalSearchPlaceholderText = props.allTagsModalSearchPlaceholderText,
     allTagsModalTarget = props.allTagsModalTarget,
     allTagsModalTitle = props.allTagsModalTitle,
+    autoAlign = props.autoAlign,
     className = props.className,
     containingElementRef = props.containingElementRef,
     items = props.items,
@@ -221,7 +222,8 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     key: "tag-overflow-popover",
     ref: overflowRef,
     popoverOpen: popoverOpen,
-    setPopoverOpen: setPopoverOpen
+    setPopoverOpen: setPopoverOpen,
+    autoAlign: autoAlign
   }), /*#__PURE__*/React__default["default"].createElement(TagOverflowModal.TagOverflowModal, {
     allTags: items,
     open: showAllModalOpen,
@@ -275,6 +277,10 @@ exports.TagOverflow.propTypes = {
    * title for the show all modal. **Note: Required if more than 10 tags**
    */
   allTagsModalTitle: string_required_if_more_than_10_tags,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: index["default"].bool,
   /**
    * Provide an optional class to be applied to the containing node.
    */

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { TagOverflowItem } from './TagOverflow';
 export interface Props {
     allTagsModalSearchThreshold?: number;
+    autoAlign?: boolean;
     className?: string;
     onShowAllClick: () => void;
     overflowAlign?: string;

package/lib/components/TagOverflow/TagOverflowPopover.js

@@ -22,13 +22,14 @@ 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", "autoAlign", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"],
   _excluded2 = ["label", "id", "tagType", "filter", "onClose"];
 var componentName = 'TagOverflowPopover';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-popover");
 var TagOverflowPopover = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _overflowTags$length;
   var allTagsModalSearchThreshold = props.allTagsModalSearchThreshold,
+    autoAlign = props.autoAlign,
     className = props.className,
     onShowAllClick = props.onShowAllClick,
     overflowAlign = props.overflowAlign,
@@ -71,6 +72,7 @@ var TagOverflowPopover = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref || localRef
   }), /*#__PURE__*/React__default["default"].createElement(react.Popover, {
     align: overflowAlign,
+    autoAlign: autoAlign,
     className: cx__default["default"](className, "".concat(blockClass, "__el")),
     dropShadow: true,
     highContrast: true,
@@ -118,6 +120,10 @@ TagOverflowPopover.propTypes = {
    * count of overflowTags over which a modal is offered
    */
   allTagsModalSearchThreshold: index["default"].number,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: index["default"].bool,
   /**
    * className
    */

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/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[];
+    actions: ButtonProps<'button'>[];
     /**
      * The aria-label for the tearsheet, which is optional.
      * if it is not passed, the title will be used as the aria-label.
@@ -97,7 +97,7 @@ export interface TearsheetProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget: ReactNode;
+    portalTarget?: ReactNode;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.