@carbon/ibm-products 2.48.0 → 2.49.0

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

@@ -15,6 +15,7 @@ import cx from 'classnames';
 import { prepareProps } from '../../../../../../global/js/utils/props-helper.js';
 import { InlineEditContext } from '../InlineEditContext/InlineEditContext.js';
 import { usePreviousValue } from '../../../../../../global/js/hooks/usePreviousValue.js';
+import { useIsomorphicEffect } from '../../../../../../global/js/hooks/useIsomorphicEffect.js';
 import { InlineEditButton } from '../InlineEditButton/InlineEditButton.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -69,7 +70,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
   var checkboxRef = useRef();
   var numberInputRef = useRef();
   var dropdownRef = useRef();
-  var datePickerRef = useRef();
   var outerButtonElement = useRef();
   var rowSize = instance.rowSize,
     onDataUpdate = instance.onDataUpdate;
@@ -299,6 +299,13 @@ var InlineEditCell = function InlineEditCell(_ref) {
       return renderDropdownItem(item);
     } : null;
   };
+  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;
@@ -308,9 +315,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
       ariaLabel: cellLabel || 'Dropdown menu options'
     }, inputProps, {
       hideLabel: true,
-      style: {
-        width: cell.column.totalWidth
-      },
       className: cx("".concat(blockClass, "__inline-edit--select"), _defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
       items: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.items) || [],
       initialSelectedItem: cell.value,
@@ -363,20 +367,21 @@ var InlineEditCell = function InlineEditCell(_ref) {
       return Calendar;
     }
   };
-  var renderRegularCell = function renderRegularCell() {
-    return /*#__PURE__*/React__default.createElement("span", _extends({}, inputProps, {
-      id: cellId
-    }));
-  };
   var renderDateCell = function renderDateCell() {
     var _config$inputProps, _outerButtonElement$c;
     var datePickerPreparedProps = 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.createElement(DatePicker, _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("".concat(blockClass, "__inline-edit--date"), _defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
@@ -399,9 +404,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
       },
       value: cell.value
     }), /*#__PURE__*/React__default.createElement(DatePickerInput, _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),
@@ -524,7 +526,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
       className: cx("".concat(blockClass, "__inline-edit--outer-cell-button"), _defineProperty(_defineProperty(_defineProperty(_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.createElement(InlineEditButton, {
+    }, (!inEditMode || disabledCell) && type !== 'checkbox' && /*#__PURE__*/React__default.createElement(InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),
       label: getLabel(),

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

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

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

@@ -7,9 +7,18 @@
 
 import { defineProperty as _defineProperty, slicedToArray as _slicedToArray, typeof as _typeof, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo } from 'react';
-import { MULTISELECT, DATE, NUMBER, CHECKBOX, BATCH } from './Datagrid/addons/Filtering/constants.js';
+import { RADIO, DATE, NUMBER, CHECKBOX, MULTISELECT, BATCH } from './Datagrid/addons/Filtering/constants.js';
 import FilterFlyout from './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) {
@@ -30,7 +39,7 @@ var handleMultiFilter = function handleMultiFilter(rows, id, value) {
 var useFiltering = function useFiltering(hooks) {
   /* istanbul ignore next */
   var filterTypes = useMemo(function () {
-    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DATE, function (rows, id, _ref) {
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DATE, function (rows, id, _ref) {
       var _ref2 = _slicedToArray(_ref, 2),
         startDate = _ref2[0],
         endDate = _ref2[1];
@@ -60,6 +69,8 @@ var useFiltering = function useFiltering(hooks) {
       return handleMultiFilter(rows, id, value);
     }), MULTISELECT, function (rows, id, value) {
       return handleMultiFilter(rows, id, value);
+    }), RADIO, function (rows, id, value) {
+      return exactText(rows, id, value);
     });
   }, []);
   hooks.useInstance.push(function (instance) {
@@ -94,4 +105,4 @@ var useFiltering = function useFiltering(hooks) {
 };
 var useFiltering$1 = useFiltering;
 
-export { useFiltering$1 as default };
+export { useFiltering$1 as default, exactText };

package/es/components/EditInPlace/EditInPlace.js

@@ -95,12 +95,10 @@ var EditInPlace = /*#__PURE__*/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);
   };
@@ -131,17 +129,21 @@ var EditInPlace = /*#__PURE__*/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/es/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/es/components/NotificationsPanel/NotificationsPanel.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { Button, Toggle, Link, IconButton } from '@carbon/react';
+import { usePrefix, Button, Toggle, Link, IconButton } from '@carbon/react';
 import { Settings, ErrorFilled, CheckmarkFilled, WarningAltFilled, InformationSquareFilled, Close, ChevronDown } from '@carbon/react/icons';
 import React__default, { useRef, useState, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
@@ -16,12 +16,13 @@ import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { timeAgo } from './utils.js';
 import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
+import wrapFocus from '../../global/js/utils/wrapFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
 
 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';
@@ -141,8 +142,12 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     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 = _objectWithoutProperties(_ref, _excluded);
-  var notificationPanelRef = useRef();
+  var notificationPanelRef = useRef(null);
+  var notificationPanelInnerRef = useRef(null);
+  var startSentinel = useRef(null);
+  var endSentinel = useRef(null);
   var _useState = useState(open),
     _useState2 = _slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
@@ -155,6 +160,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     open: open
   });
   var reducedMotion = usePrefersReducedMotion();
+  var carbonPrefix = usePrefix();
   useEffect(function () {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
@@ -166,12 +172,56 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     // 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({
+        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();
+    }
+  };
   useEffect(function () {
     if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion) {
       setRender(false);
@@ -310,7 +360,17 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onDismissSingleNotification(notification);
   };
   var mainSectionClassName = cx(["".concat(blockClass, "__main-section"), _defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
-  return shouldRender ? /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return shouldRender ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "".concat(carbonPrefix, "--visually-hidden"),
+    ref: startSentinel
+  }, "Focus sentinel start"), /*#__PURE__*/React__default.createElement("div", _extends({
+    role: "dialog",
+    "aria-label": "Notification Panel",
+    onBlur: handleBlur,
+    tabIndex: 0,
+    onKeyDown: handleKeydown
+  }, rest, {
     id: blockClass,
     className: cx(blockClass, className, "".concat(blockClass, "__container")),
     style: {
@@ -319,6 +379,8 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
+    ref: notificationPanelInnerRef
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__header-container")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__header-flex")
@@ -382,7 +444,11 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onClick: function onClick() {
       return onSettingsClick();
     }
-  })) : null) : null;
+  })) : null)), /*#__PURE__*/React__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
@@ -513,6 +579,10 @@ NotificationsPanel.propTypes = {
    * Sets the `seconds ago` label text
    */
   secondsAgoText: PropTypes.func,
+  /**
+   * Specify the CSS selectors that match the floating menus
+   */
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
   /**
    * Sets the settings icon description text
    */

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

@@ -18,7 +18,7 @@ import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 
-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"];
@@ -32,6 +32,7 @@ var TagOverflow = /*#__PURE__*/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,
@@ -212,7 +213,8 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
     key: "tag-overflow-popover",
     ref: overflowRef,
     popoverOpen: popoverOpen,
-    setPopoverOpen: setPopoverOpen
+    setPopoverOpen: setPopoverOpen,
+    autoAlign: autoAlign
   }), /*#__PURE__*/React__default.createElement(TagOverflowModal, {
     allTags: items,
     open: showAllModalOpen,
@@ -266,6 +268,10 @@ 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: PropTypes.bool,
   /**
    * Provide an optional class to be applied to the containing node.
    */

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

@@ -13,13 +13,14 @@ import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
-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(pkg.prefix, "--tag-overflow-popover");
 var TagOverflowPopover = /*#__PURE__*/forwardRef(function (props, ref) {
   var _overflowTags$length;
   var allTagsModalSearchThreshold = props.allTagsModalSearchThreshold,
+    autoAlign = props.autoAlign,
     className = props.className,
     onShowAllClick = props.onShowAllClick,
     overflowAlign = props.overflowAlign,
@@ -62,6 +63,7 @@ var TagOverflowPopover = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref || localRef
   }), /*#__PURE__*/React__default.createElement(Popover, {
     align: overflowAlign,
+    autoAlign: autoAlign,
     className: cx(className, "".concat(blockClass, "__el")),
     dropShadow: true,
     highContrast: true,
@@ -109,6 +111,10 @@ TagOverflowPopover.propTypes = {
    * count of overflowTags over which a modal is offered
    */
   allTagsModalSearchThreshold: PropTypes.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: PropTypes.bool,
   /**
    * className
    */

package/es/components/TagSet/TagSetOverflow.js

@@ -69,7 +69,7 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
     },
     className: cx("".concat(blockClass, "__popover-trigger"))
-  }, "+", overflowTags.length), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
+  }, "+".concat(overflowTags.length)), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
     ref: overflowTagContent,
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React__default.createElement("ul", {

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

package/es/components/Tearsheet/TearsheetShell.js

@@ -13,7 +13,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
-import { Button, usePrefix, ComposedModal, ModalHeader, Layer } from '@carbon/react';
+import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer } from '@carbon/react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
@@ -245,7 +245,11 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       }
       return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
     };
-    return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
+    return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+      flags: {
+        'enable-experimental-focus-wrap-without-sentinels': true
+      }
+    }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent(title),
       className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
@@ -312,7 +316,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     })))), /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
-    })));
+    }))));
   } else {
     pconsole.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
     return null;

package/es/components/Toolbar/ToolbarButton.d.ts

@@ -13,8 +13,12 @@ export interface ToolbarButtonProps extends React.ComponentProps<typeof IconButt
     caret?: boolean;
     /** Provide an optional class to be applied to the containing node */
     className?: string;
+    /**
+     * @deprecated use `label` instead
+     * Specifies the label for the icon button */
+    iconDescription?: string;
     /** Specifies the label for the icon button */
-    iconDescription: string;
+    label: string;
     /** Specifies the icon to be used by the ToolbarButton component */
     renderIcon: React.ElementType;
 }
@@ -22,3 +26,10 @@ export interface ToolbarButtonProps extends React.ComponentProps<typeof IconButt
 export declare let ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     * Specifies the label for the icon button
+     *  */
+    iconDescription: import("prop-types").Requireable<string>;
+};

package/es/components/Toolbar/ToolbarButton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useContext } from 'react';
 import { ToolbarContext, blockClass as blockClass$1 } from './Toolbar.js';
 import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
@@ -13,7 +13,7 @@ import { IconButton } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
+var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription", "label"];
 var blockClass = "".concat(blockClass$1, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -24,13 +24,14 @@ var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className = _ref.className,
     renderIcon = _ref.renderIcon,
     _ref$iconDescription = _ref.iconDescription,
-    iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    deprecated_iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    label = _ref.label,
     rest = _objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
   return /*#__PURE__*/React__default.createElement(IconButton, _extends({
     align: (_useContext = useContext(ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
   }, rest, {
-    label: iconDescription,
+    label: label !== null && label !== void 0 ? label : deprecated_iconDescription,
     ref: ref,
     className: cx(className, _defineProperty({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
@@ -41,7 +42,14 @@ var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 var componentName = 'ToolbarButton';
 ToolbarButton.displayName = componentName;
-ToolbarButton.propTypes = {
+var deprecatedProps = {
+  /**
+   * **Deprecated**
+   * Specifies the label for the icon button
+   *  */
+  iconDescription: propTypesExports.string
+};
+ToolbarButton.propTypes = _objectSpread2({
   /** Determines whether the caret is rendered */
   caret: propTypesExports.bool,
   /** Provide the content of the `ToolbarButton` */
@@ -49,10 +57,10 @@ ToolbarButton.propTypes = {
   /** Provide an optional class to be applied to the containing node */
   className: propTypesExports.string,
   /** Specifies the label for the icon button */
-  iconDescription: propTypesExports.string.isRequired,
+  label: propTypesExports.string.isRequired,
   /** Specifies the icon to be used by the ToolbarButton component */
   renderIcon: propTypesExports.func.isRequired
-};
+}, deprecatedProps);
 ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);
 
-export { ToolbarButton, blockClass };
+export { ToolbarButton, blockClass, deprecatedProps };

package/es/global/js/hooks/useFocus.d.ts

@@ -4,7 +4,7 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
     lastElement: any;
     allElements: any;
     specifiedElement: any;
-    keyDownListener: (event: any) => void;
+    keyDownListener: (event: any) => Promise<void>;
     getFocusable: () => {
         first: any;
         last: any;