@carbon/ibm-products 2.43.2-canary.3 → 2.43.2-canary.31

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

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * 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 { Hooks } from 'react-table';
+declare const useColumnRightAlign: (hooks: Hooks) => void;
 export default useColumnRightAlign;
-declare function useColumnRightAlign(hooks: any): void;

package/es/components/Datagrid/useColumnRightAlign.js

@@ -13,16 +13,17 @@ import { pkg } from '../../settings.js';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useColumnRightAlign = function useColumnRightAlign(hooks) {
   var RightAlignRenderer = function RightAlignRenderer(tableProps, column) {
+    var _tableProps$column, _column$Cell;
     return /*#__PURE__*/React__default.createElement("div", {
       className: cx("".concat(blockClass, "__right-align-cell-renderer"), {
-        sortDisabled: !tableProps.isTableSortable || tableProps.column.disableSortBy === true
+        sortDisabled: !tableProps.isTableSortable || (tableProps === null || tableProps === void 0 || (_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.disableSortBy) === true
       })
-    }, column.Cell(tableProps));
+    }, column === null || column === void 0 || (_column$Cell = column.Cell) === null || _column$Cell === void 0 ? void 0 : _column$Cell.call(column, tableProps));
   };
   var RightAlignHeader = function RightAlignHeader(headerProp, column) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(blockClass, "__right-align-header")
-    }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
+    }, typeof column.Header === 'function' ? (column === null || column === void 0 ? void 0 : column.Header.bind(column))(headerProp) : column.Header);
   };
   var rightAlignedColumns = function rightAlignedColumns(columns) {
     var columnsWithDefaultCells = columns.map(function (column) {

package/es/components/Datagrid/useInlineEdit.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { pkg } from '../../settings.js';
 import cx from 'classnames';
@@ -13,12 +14,13 @@ import { InlineEditCell } from './Datagrid/addons/InlineEdit/InlineEditCell/Inli
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useInlineEdit = function useInlineEdit(hooks) {
   var addInlineEdit = function addInlineEdit(props, _ref) {
-    var _cell$column, _cell$column2;
+    var _cell$column, _cell$column2, _cell$value, _cell$value2, _cell$value3;
     var cell = _ref.cell,
       instance = _ref.instance;
     var columnInlineEditConfig = cell.column.inlineEdit;
     var inlineEditType = (_cell$column = cell.column) === null || _cell$column === void 0 || (_cell$column = _cell$column.inlineEdit) === null || _cell$column === void 0 ? void 0 : _cell$column.type;
     var isDisabled = (_cell$column2 = cell.column) === null || _cell$column2 === void 0 ? void 0 : _cell$column2.isDisabled;
+    var staticCell = _typeof(cell.value) === 'object' && cell.column.id === ((_cell$value = cell.value) === null || _cell$value === void 0 ? void 0 : _cell$value.columnId) && ((_cell$value2 = cell.value) === null || _cell$value2 === void 0 ? void 0 : _cell$value2.isStaticCell);
     var renderInlineEditComponent = function renderInlineEditComponent(type) {
       return /*#__PURE__*/React__default.createElement(InlineEditCell, {
         config: columnInlineEditConfig,
@@ -38,7 +40,15 @@ var useInlineEdit = function useInlineEdit(hooks) {
     return [props, {
       className: cx("".concat(blockClass, "__cell"), "".concat(blockClass, "__cell-inline-edit")),
       role: 'gridcell',
-      children: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/React__default.createElement(InlineEditCell, {
+      children: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !staticCell && inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), staticCell && /*#__PURE__*/React__default.createElement(InlineEditCell, {
+        config: columnInlineEditConfig,
+        tabIndex: -1,
+        value: (_cell$value3 = cell.value) === null || _cell$value3 === void 0 ? void 0 : _cell$value3.value,
+        cell: cell,
+        instance: instance,
+        nonEditCell: true,
+        type: "text"
+      }), !inlineEditType && /*#__PURE__*/React__default.createElement(InlineEditCell, {
         config: columnInlineEditConfig,
         tabIndex: -1,
         value: cell.value,

package/es/components/Datagrid/useNestedRows.js

@@ -15,33 +15,52 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useNestedRows = function useNestedRows(hooks) {
   useNestedRowExpander(hooks);
   var useInstance = function useInstance(instance) {
+    useEffect(function () {
+      var _ref = instance,
+        rows = _ref.rows;
+      var defaultExpandedRows = rows.filter(function (row) {
+        var _row$original;
+        return row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.defaultExpanded;
+      });
+      if (defaultExpandedRows !== null && defaultExpandedRows !== void 0 && defaultExpandedRows.length) {
+        defaultExpandedRows.map(function (defaultExpandedRow) {
+          if (!(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.isExpanded) && !(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.hasExpanded)) {
+            var _defaultExpandedRow$t;
+            defaultExpandedRow === null || defaultExpandedRow === void 0 || (_defaultExpandedRow$t = defaultExpandedRow.toggleRowExpanded) === null || _defaultExpandedRow$t === void 0 || _defaultExpandedRow$t.call(defaultExpandedRow);
+            defaultExpandedRow.hasExpanded = true;
+            return;
+          }
+        });
+      }
+    }, [instance, instance.rows]);
     // This useEffect will expand rows if they exist in the initialState obj
     useEffect(function () {
       var rows = instance.rows,
         initialState = instance.initialState;
-      var _ref = initialState,
-        expandedRowIds = _ref.expandedRowIds;
+      var _ref2 = initialState,
+        expandedRowIds = _ref2.expandedRowIds;
       if (expandedRowIds) {
         Object.keys(expandedRowIds).forEach(function (key) {
+          var _row$0$original;
           var row = rows.filter(function (r) {
-            return r.id.toString() === key.toString();
+            var _r$original;
+            return r.id.toString() === key.toString() || ((_r$original = r.original) === null || _r$original === void 0 || (_r$original = _r$original.id) === null || _r$original === void 0 ? void 0 : _r$original.toString()) === key.toString();
           });
-          if (row !== null && row !== void 0 && row.length && key.toString() === row[0].id.toString()) {
-            var _row$;
-            (_row$ = row[0]) === null || _row$ === void 0 || _row$.toggleRowExpanded();
+          if (row.length && key.toString() === row[0].id.toString() || row.length && key.toString() === ((_row$0$original = row[0].original) === null || _row$0$original === void 0 || (_row$0$original = _row$0$original.id) === null || _row$0$original === void 0 ? void 0 : _row$0$original.toString())) {
+            row[0].toggleRowExpanded();
           }
         });
       }
     }, [instance]);
     var marginLeft = 24;
-    var getRowProps = function getRowProps(props, _ref2) {
-      var row = _ref2.row;
+    var getRowProps = function getRowProps(props, _ref3) {
+      var row = _ref3.row;
       return [props, {
         className: cx(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
       }];
     };
-    var getRowStyles = function getRowStyles(props, _ref3) {
-      var row = _ref3.row;
+    var getRowStyles = function getRowStyles(props, _ref4) {
+      var row = _ref4.row;
       return [props, {
         style: {
           paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
@@ -51,9 +70,9 @@ var useNestedRows = function useNestedRows(hooks) {
     var getIndentation = function getIndentation(depth) {
       return 32 * depth + 16;
     }; // row indentation padding
-    var getCellProps = function getCellProps(props, _ref4) {
-      var cell = _ref4.cell,
-        instance = _ref4.instance;
+    var getCellProps = function getCellProps(props, _ref5) {
+      var cell = _ref5.cell,
+        instance = _ref5.instance;
       // we add a dynamic -ve margin right only if the cell is resized below minimum width i.e 50px, else we set the width based on indentation at different levels
       var isFirstCell = instance.columns.findIndex(function (c) {
         return c.id === cell.column.id;

package/es/components/Decorator/Decorator.js

@@ -87,7 +87,8 @@ Decorator.propTypes = {
    */
   small: PropTypes.bool,
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
   /**

package/es/components/DecoratorBase/DecoratorBase.js

@@ -23,8 +23,7 @@ var defaults = {
   onContextMenu: function onContextMenu() {},
   onContextMenuLabel: function onContextMenuLabel() {},
   onContextMenuValue: function onContextMenuValue() {},
-  scoreThresholds: [0, 4, 7, 10],
-  theme: 'light'
+  scoreThresholds: [0, 4, 7, 10]
 };
 
 /**
@@ -56,8 +55,7 @@ var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _ref$scoreThresholds = _ref.scoreThresholds,
     scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
     small = _ref.small,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    theme = _ref.theme,
     truncateValue = _ref.truncateValue,
     value = _ref.value,
     valueTitle = _ref.valueTitle,
@@ -67,7 +65,7 @@ var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var _value = truncate(value, truncateValue);
 
   // These class names apply to all types of DecoratorBase.
-  var classNames = cx(blockClass, className, "".concat(blockClass, "--").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
+  var classNames = cx(blockClass, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--").concat(theme), theme), "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
 
   // These properties apply to all <DecoratorIcons>.
   var decoratorIconsProps = {

package/es/components/DecoratorDualButton/DecoratorDualButton.js

@@ -111,7 +111,8 @@ DecoratorDualButton.propTypes = {
    */
   small: PropTypes.bool,
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
   /**

package/es/components/DecoratorLink/DecoratorLink.js

@@ -101,7 +101,8 @@ DecoratorLink.propTypes = {
    */
   small: PropTypes.bool,
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
   /**

package/es/components/DecoratorSingleButton/DecoratorSingleButton.js

@@ -101,7 +101,8 @@ DecoratorSingleButton.propTypes = {
    */
   small: PropTypes.bool,
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
   /**

package/es/components/HTTPErrors/HTTPError403/HTTPError403.js

@@ -44,6 +44,12 @@ var HTTPError403 = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }));
 });
 
+/**@ts-ignore*/
+HTTPError403.deprecated = {
+  level: 'warn',
+  details: "Please replace ".concat(componentName, " with FullPageError")
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 HTTPError403 = pkg.checkComponentEnabled(HTTPError403, componentName);
 

package/es/components/HTTPErrors/HTTPError404/HTTPError404.js

@@ -44,6 +44,12 @@ var HTTPError404 = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }));
 });
 
+/**@ts-ignore*/
+HTTPError404.deprecated = {
+  level: 'warn',
+  details: "Please replace ".concat(componentName, " with FullPageError")
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 HTTPError404 = pkg.checkComponentEnabled(HTTPError404, componentName);
 

package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js

@@ -44,6 +44,12 @@ var HTTPErrorOther = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   }));
 });
 
+/**@ts-ignore*/
+HTTPErrorOther.deprecated = {
+  level: 'warn',
+  details: "Please replace ".concat(componentName, " with FullPageError")
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 HTTPErrorOther = pkg.checkComponentEnabled(HTTPErrorOther, componentName);
 

package/es/components/RemoveModal/RemoveModal.d.ts

@@ -58,6 +58,10 @@ interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
      * Specify the text for the primary button
      */
     primaryButtonText?: string;
+    /**
+     * Specify the danger description on the primary button
+     */
+    primaryDangerDescription?: string;
     /**
      * The name of the resource being acted upon
      */

package/es/components/RemoveModal/RemoveModal.js

@@ -16,7 +16,7 @@ import { pkg } from '../../settings.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
+var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "primaryDangerDescription", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
 var componentName = 'RemoveModal';
 
 /**
@@ -40,6 +40,7 @@ var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
     primaryButtonDisabled = _ref.primaryButtonDisabled,
     primaryButtonText = _ref.primaryButtonText,
+    primaryDangerDescription = _ref.primaryDangerDescription,
     resourceName = _ref.resourceName,
     secondaryButtonText = _ref.secondaryButtonText,
     textConfirmation = _ref.textConfirmation,
@@ -109,6 +110,7 @@ var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
     type: "submit",
     kind: "danger",
+    dangerDescription: primaryDangerDescription,
     onClick: onRequestSubmit,
     disabled: primaryButtonStatus
   }, primaryButtonText))));
@@ -173,6 +175,10 @@ RemoveModal.propTypes = {
    * Specify the text for the primary button
    */
   primaryButtonText: PropTypes.string,
+  /**
+   * Specify the danger description on the primary button
+   */
+  primaryDangerDescription: PropTypes.string,
   /**
    * The name of the resource being acted upon
    */

package/es/components/StatusIndicator/StatusIndicatorStep.js

@@ -0,0 +1,87 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { InlineLoading } from '@carbon/react';
+import { CircleStroke, ErrorOutline, CheckmarkOutline } from '@carbon/react/icons';
+
+var _CircleStroke, _InlineLoading, _ErrorOutline, _CheckmarkOutline;
+var _excluded = ["className", "description", "errorMessage", "status"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--status-indicator-step");
+var componentName = 'StatusIndicatorStep';
+var defaults = {
+  status: 'inactive'
+};
+
+/**
+ * An icon/description pair that describes one step of the `StatusIndicator`.
+ */
+var StatusIndicatorStep = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    description = _ref.description,
+    errorMessage = _ref.errorMessage,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? defaults.status : _ref$status,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
+    className: cx(blockClass, className, "".concat(blockClass, "--").concat(status)),
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__details")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__icon")
+  }, status === 'inactive' && (_CircleStroke || (_CircleStroke = /*#__PURE__*/React__default.createElement(CircleStroke, {
+    size: 16,
+    viewBox: "1 1 14 14"
+  }))), status === 'active' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React__default.createElement(InlineLoading, null))), status === 'error' && (_ErrorOutline || (_ErrorOutline = /*#__PURE__*/React__default.createElement(ErrorOutline, {
+    size: 16
+  }))), status === 'finished' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default.createElement(CheckmarkOutline, {
+    size: 16
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__text")
+  }, description)), status === 'error' && errorMessage && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__error-message")
+  }, errorMessage));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+StatusIndicatorStep = pkg.checkComponentEnabled(StatusIndicatorStep, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+StatusIndicatorStep.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+StatusIndicatorStep.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * The text associated with the icon.
+   */
+  description: PropTypes.string.isRequired,
+  /**
+   * This message will appear below the description if the `status` is "error".
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * Each `status` represents a different icon..
+   */
+  status: PropTypes.oneOf(['inactive', 'active', 'error', 'finished']).isRequired
+};
+
+export { StatusIndicatorStep };

package/es/components/Tearsheet/Tearsheet.d.ts

@@ -99,9 +99,16 @@ interface TearsheetProps extends PropsWithChildren {
      */
     portalTarget: ReactNode;
     /**
-     * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
      */
     selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * The main title of the tearsheet, displayed in the header area.
      */

package/es/components/Tearsheet/Tearsheet.js

@@ -190,9 +190,17 @@ Tearsheet.propTypes = _objectSpread2({
   /**@ts-ignore */
   portalTarget: portalType,
   /**
-   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
    */
   selectorPrimaryFocus: PropTypes.string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

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

@@ -64,6 +64,17 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * The main title of the tearsheet, displayed in the header area.
      */

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -148,6 +148,18 @@ TearsheetNarrow.propTypes = _objectSpread2({
    */
   /**@ts-ignore */
   portalTarget: portalType,
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  selectorPrimaryFocus: PropTypes.string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/Tearsheet/TearsheetShell.d.ts

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

package/es/components/Tearsheet/TearsheetShell.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import PropTypes from '../../node_modules/prop-types/index.js';
@@ -20,7 +20,7 @@ import { useFocus } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
@@ -79,6 +79,8 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+    _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
+    selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
     size = _ref.size,
     slug = _ref.slug,
     title = _ref.title,
@@ -249,7 +251,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
+      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_toConsumableArray(selectorsFloatingMenus)),
       size: "sm"
     }), includeHeader && /*#__PURE__*/React__default.createElement(ModalHeader, {
       className: cx("".concat(bc, "__header"), _defineProperty(_defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
@@ -445,6 +447,18 @@ TearsheetShell.propTypes = _objectSpread2({
    */
   /**@ts-ignore*/
   portalTarget: portalType,
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  selectorPrimaryFocus: PropTypes.string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */

package/es/components/index.d.ts

@@ -50,7 +50,6 @@ export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { ScrollGradient } from "./ScrollGradient";
-export { StatusIndicator } from "./StatusIndicator";
 export { TagOverflow } from "./TagOverflow";
 export { ActionBar } from "./ActionBar";
 export { ConditionBuilder } from "./ConditionBuilder";
@@ -68,5 +67,6 @@ export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
 export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
 export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
 export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
+export { StatusIndicator, StatusIndicatorStep } from "./StatusIndicator";
 export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from "./FeatureFlags";

package/es/index.js

@@ -122,6 +122,7 @@ export { StringFormatter } from './components/StringFormatter/StringFormatter.js
 export { UserAvatar } from './components/UserAvatar/UserAvatar.js';
 export { ScrollGradient } from './components/ScrollGradient/ScrollGradient.js';
 export { StatusIndicator } from './components/StatusIndicator/StatusIndicator.js';
+export { StatusIndicatorStep } from './components/StatusIndicator/StatusIndicatorStep.js';
 export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
 export { ActionBar } from './components/ActionBar/ActionBar.js';
 export { FilterPanel } from './components/FilterPanel/FilterPanel.js';