@carbon/ibm-products 2.43.2-canary.7 → 2.43.2-canary.72

package/lib/components/Datagrid/useActionsColumn.js

@@ -26,9 +26,10 @@ var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuIt
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
-    var rowActions = instance.rowActions,
-      isFetching = instance.isFetching,
-      selectedRowIds = instance.state.selectedRowIds;
+    var _ref = instance,
+      rowActions = _ref.rowActions,
+      isFetching = _ref.isFetching,
+      selectedRowIds = _ref.state.selectedRowIds;
     var getDisabledState = function getDisabledState(rowIndex) {
       var selectedRowIndexes = Object.keys(selectedRowIds).map(function (n) {
         return Number(n);
@@ -88,10 +89,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
                     return;
                   }
                   e.stopPropagation();
-                  _onClick(id, row, e);
+                  _onClick === null || _onClick === void 0 || _onClick(id, row, e);
                 },
                 disabled: isDisabledByRow
-              }), /*#__PURE__*/React__default["default"].createElement(Icon, null)));
+              }), Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null)));
             })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
               align: "left",
               size: "sm",
@@ -117,7 +118,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 disabled: isDisabledByRow,
                 onClick: function onClick(e) {
                   e.stopPropagation();
-                  _onClick2(id, row, e);
+                  _onClick2 === null || _onClick2 === void 0 || _onClick2(id, row, e);
                 },
                 key: id
               }));

package/lib/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/lib/components/Datagrid/useColumnRightAlign.js

@@ -22,16 +22,17 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var useColumnRightAlign = function useColumnRightAlign(hooks) {
   var RightAlignRenderer = function RightAlignRenderer(tableProps, column) {
+    var _tableProps$column, _column$Cell;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: cx__default["default"]("".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["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/lib/components/Datagrid/useCustomizeColumns.d.ts

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

package/lib/components/Datagrid/useCustomizeColumns.js

@@ -40,9 +40,10 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
     isTearsheetOpen = _React$useState2[0],
     setIsTearsheetOpen = _React$useState2[1];
   hooks.useInstance.push(function (instance) {
-    var customizeColumnsProps = instance.customizeColumnsProps;
-    var _ref = customizeColumnsProps || {},
-      labels = _ref.labels;
+    var _ref = instance,
+      customizeColumnsProps = _ref.customizeColumnsProps;
+    var _ref2 = customizeColumnsProps || {},
+      labels = _ref2.labels;
     Object.assign(instance, {
       customizeColumnsProps: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, customizeColumnsProps), {}, {
         isTearsheetOpen: isTearsheetOpen,

package/lib/components/Datagrid/useDefaultStringRenderer.js

@@ -30,7 +30,6 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   var HeaderRenderer = function HeaderRenderer(header, slug) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: cx__default["default"]("".concat(blockClass, "__defaultStringRenderer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React__default["default"].isValidElement(slug))),
-      title: typeof header === 'string' ? header : '',
       key: typeof header === 'string' ? header : ''
     }, header);
   };

package/lib/components/Datagrid/useInlineEdit.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var settings = require('../../settings.js');
 var cx = require('classnames');
@@ -22,12 +23,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var blockClass = "".concat(settings.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 = _rollupPluginBabelHelpers["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["default"].createElement(InlineEditCell.InlineEditCell, {
         config: columnInlineEditConfig,
@@ -47,7 +49,15 @@ var useInlineEdit = function useInlineEdit(hooks) {
     return [props, {
       className: cx__default["default"]("".concat(blockClass, "__cell"), "".concat(blockClass, "__cell-inline-edit")),
       role: 'gridcell',
-      children: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/React__default["default"].createElement(InlineEditCell.InlineEditCell, {
+      children: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !staticCell && inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'checkbox' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), staticCell && /*#__PURE__*/React__default["default"].createElement(InlineEditCell.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["default"].createElement(InlineEditCell.InlineEditCell, {
         config: columnInlineEditConfig,
         tabIndex: -1,
         value: cell.value,

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -57,9 +57,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
           type: "button",
           "aria-label": expanderTitle,
           className: cx__default["default"]("".concat(blockClass, "__row-expander"), "".concat(settings.carbon.prefix, "--btn"), "".concat(settings.carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), /*#__PURE__*/React__default["default"].createElement(icons.ChevronRight, {
+        }, expanderButtonProps), /*#__PURE__*/React__default["default"].createElement(icons.ChevronRight, {
           className: cx__default["default"]("".concat(blockClass, "__expander-icon"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
         }));
       },

package/lib/components/Datagrid/useNestedRows.js

@@ -23,33 +23,52 @@ var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var useNestedRows = function useNestedRows(hooks) {
   useNestedRowExpander["default"](hooks);
   var useInstance = function useInstance(instance) {
+    React.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
     React.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__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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")
@@ -59,9 +78,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/lib/components/Datagrid/useRowExpander.js

@@ -59,9 +59,7 @@ var useRowExpander = function useRowExpander(hooks) {
           type: "button",
           "aria-label": expanderTitle,
           className: cx__default["default"]("".concat(blockClass, "__row-expander"), "".concat(settings.carbon.prefix, "--btn"), "".concat(settings.carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUp, {
+        }, expanderButtonProps), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUp, {
           className: "".concat(blockClass, "__row-expander--icon")
         }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDown, {
           className: "".concat(blockClass, "__row-expander--icon")

package/lib/components/Datagrid/useSelectRows.js

@@ -90,11 +90,12 @@ var SelectRow = function SelectRow(datagridState) {
     withStickyColumn = datagridState.withStickyColumn,
     dispatch = datagridState.dispatch,
     getRowId = datagridState.getRowId;
-  var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = React.useState(),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   React.useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }

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

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2021, 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 useStickyColumn: (hooks: Hooks) => void;
 export default useStickyColumn;
-declare function useStickyColumn(hooks: any): void;

package/lib/components/Datagrid/useStickyColumn.js

@@ -27,12 +27,13 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 var useStickyColumn = function useStickyColumn(hooks) {
   var tableBodyRef = React.useRef();
   var stickyHeaderCellRef = React.useRef();
-  var _useState = React.useState(null),
+  var _useState = React.useState(),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   React.useEffect(function () {
-    setWindowSize(window.innerWidth);
+    var _window;
+    setWindowSize((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth);
   }, []);
   React.useLayoutEffect(function () {
     /* istanbul ignore next */
@@ -58,10 +59,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
   var useEventListener = function useEventListener(instance) {
     React.useEffect(function () {
       var tableBodyElement = tableBodyRef.current;
-      var headerCellElement = stickyHeaderCellRef.current;
+      var headerCellElement = stickyHeaderCellRef === null || stickyHeaderCellRef === void 0 ? void 0 : stickyHeaderCellRef.current;
       /* istanbul ignore next */
       if (hasVertScroll(tableBodyElement) && headerCellElement) {
-        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+        var _headerCellElement$cl;
+        headerCellElement === null || headerCellElement === void 0 || (_headerCellElement$cl = headerCellElement.classList) === null || _headerCellElement$cl === void 0 || _headerCellElement$cl.add(OFFSET_SCROLL_CLASS);
       }
       var boundListener = debounce__default["default"](onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
       /* istanbul ignore next */
@@ -83,7 +85,7 @@ var useStickyColumn = function useStickyColumn(hooks) {
       };
       toggleStickyShadow(tableBodyElement, headerCellElement);
       if (tableBodyElement) {
-        tableBodyElement.addEventListener('scroll', listener);
+        tableBodyElement === null || tableBodyElement === void 0 || tableBodyElement.addEventListener('scroll', listener);
       }
       return function () {
         if (tableBodyElement) {
@@ -147,18 +149,19 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
   }];
 };
 var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
-  var column = data.column || data.cell.column;
-  if (column.sticky === 'right') {
+  var _data$cell;
+  var column = data.column || ((_data$cell = data.cell) === null || _data$cell === void 0 ? void 0 : _data$cell.column);
+  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'right') {
     return [props, _rollupPluginBabelHelpers.objectSpread2({
       className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
     }, headerCellRef && {
       ref: headerCellRef
     })];
   }
-  if (column.sticky === 'left') {
+  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'left') {
     var _data$instance;
     return [props, _rollupPluginBabelHelpers.objectSpread2({
-      className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671))
+      className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize && windowSize > 671))
     }, headerCellRef && {
       ref: headerCellRef
     })];

package/lib/components/Decorator/Decorator.js

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

package/lib/components/DecoratorBase/DecoratorBase.js

@@ -32,8 +32,7 @@ var defaults = {
   onContextMenu: function onContextMenu() {},
   onContextMenuLabel: function onContextMenuLabel() {},
   onContextMenuValue: function onContextMenuValue() {},
-  scoreThresholds: [0, 4, 7, 10],
-  theme: 'light'
+  scoreThresholds: [0, 4, 7, 10]
 };
 
 /**
@@ -65,8 +64,7 @@ var DecoratorBase = /*#__PURE__*/React__default["default"].forwardRef(function (
     _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,
@@ -76,7 +74,7 @@ var DecoratorBase = /*#__PURE__*/React__default["default"].forwardRef(function (
   var _value = utils.truncate(value, truncateValue);
 
   // These class names apply to all types of DecoratorBase.
-  var classNames = cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(theme), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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/lib/components/DecoratorDualButton/DecoratorDualButton.js

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

package/lib/components/DecoratorLink/DecoratorLink.js

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

package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js

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

package/lib/components/EditInPlace/EditInPlace.d.ts

@@ -50,6 +50,10 @@ interface EditInplaceProps extends PropsWithChildren {
      * Provide the text that will be read by a screen reader when visiting this control
      */
     labelText: string;
+    /**
+     * handler to add custom onBlur event
+     */
+    onBlur?: (value: string) => void;
     /**
      * handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
      */

package/lib/components/EditInPlace/EditInPlace.js

@@ -24,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close, _Checkmark, _Edit;
-var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "size", "tooltipAlignment", "value"];
+var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "onBlur", "saveLabel", "size", "tooltipAlignment", "value"];
 var componentName = 'EditInPlace';
 var blockClass = "".concat(settings.pkg.prefix, "--edit-in-place");
 var defaults = {
@@ -45,6 +45,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onCancel = _ref.onCancel,
     onChange = _ref.onChange,
     onSave = _ref.onSave,
+    onBlur = _ref.onBlur,
     saveLabel = _ref.saveLabel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
@@ -112,15 +113,21 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onCancel(initialValue);
   };
   var onBlurHandler = function onBlurHandler(e) {
-    // if (readOnly || escaping.current) {
-    if (escaping.current) {
-      return;
-    }
-    if (!isTargetingChild(e)) {
-      if (canSave) {
-        onSaveHandler();
-      } else {
-        onCancelHandler();
+    // Use custom function provided if passed through
+    if (typeof onBlur === 'function' && !isTargetingChild(e)) {
+      onBlur(initialValue);
+      setFocused(false);
+    } else {
+      // Use Default behavior if no custom function provided
+      if (escaping.current) {
+        return;
+      }
+      if (!isTargetingChild(e)) {
+        if (canSave) {
+          onSaveHandler();
+        } else {
+          onCancelHandler();
+        }
       }
     }
   };
@@ -260,6 +267,10 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Provide the text that will be read by a screen reader when visiting this control
    */
   labelText: index["default"].string.isRequired,
+  /**
+   * handler to add custom onBlur event
+   */
+  onBlur: index["default"].func,
   /**
    * handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
    */

package/lib/components/EditTearsheet/EditTearsheet.d.ts

@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode, PropsWithChildren } from 'react';
-export declare const FormContext: React.Context<null>;
+export type FormContextType = {
+    currentForm: number;
+    setFormTitle: () => void;
+};
+export declare const FormContext: React.Context<FormContextType | null>;
 export declare const FormNumberContext: React.Context<number>;
 interface EditTearsheetProps extends PropsWithChildren {
     /**
@@ -47,7 +51,8 @@ interface EditTearsheetProps extends PropsWithChildren {
      */
     onFormChange?: (formIndex: number) => number;
     /**
-     * Specify a handler for submitting the tearsheet.
+     * Specify a handler for submitting the tearsheet. Throughout its execution
+     * the submit button will be disabled and include a loading indicator.
      */
     onRequestSubmit: () => void;
     /**

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -27,7 +27,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
 var componentName = 'EditTearsheet';
 var blockClass = "".concat(settings.pkg.prefix, "--tearsheet-edit");
-
 // This is a general context for the forms container
 // containing information about the state of the container
 // and providing some callback methods for forms to use
@@ -69,10 +68,45 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var handleOnRequestSubmit = /*#__PURE__*/function () {
+    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsSubmitting(true);
+            _context.prev = 1;
+            _context.next = 4;
+            return onRequestSubmit();
+          case 4:
+            _context.next = 9;
+            break;
+          case 6:
+            _context.prev = 6;
+            _context.t0 = _context["catch"](1);
+            console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
+          case 9:
+            setIsSubmitting(false);
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 6]]);
+    }));
+    return function handleOnRequestSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var actions = [{
     key: 'edit-action-button-submit',
     label: submitButtonText,
-    onClick: onRequestSubmit,
+    onClick: function onClick() {
+      return handleOnRequestSubmit();
+    },
+    loading: isSubmitting,
     kind: 'primary'
   }, {
     key: 'edit-action-button-cancel',
@@ -80,14 +114,14 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: onClose,
     kind: 'ghost'
   }];
-  var _useState = React.useState(0),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    currentForm = _useState2[0],
-    setCurrentForm = _useState2[1];
-  var _useState3 = React.useState([]),
+  var _useState3 = React.useState(0),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    formTitles = _useState4[0],
-    setFormTitles = _useState4[1];
+    currentForm = _useState4[0],
+    setCurrentForm = _useState4[1];
+  var _useState5 = React.useState([]),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    formTitles = _useState6[0],
+    setFormTitles = _useState6[1];
   var contentRef = React.useRef(null);
   var handleCurrentForm = function handleCurrentForm(formIndex) {
     setCurrentForm(formIndex);

package/lib/components/EditTearsheet/EditTearsheetForm.d.ts

@@ -1,2 +1,45 @@
-export let EditTearsheetForm: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * 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 React, { ReactNode } from 'react';
+interface EditTearsheetFormBaseProps {
+    /**
+     * Content that shows in the tearsheet form
+     */
+    children?: ReactNode;
+    /**
+     * Sets an optional className to be added to the tearsheet form
+     */
+    className?: string;
+    /**
+     * Sets an optional description on the form component
+     */
+    description?: string;
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     * and is defaulted to true.
+     * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's form content.
+     */
+    hasFieldset?: boolean;
+    /**
+     * Sets an optional subtitle on the form component
+     */
+    subtitle?: string;
+    /**
+     * Sets the title text for a tearsheet form
+     */
+    title: ReactNode;
+}
+type EditTearsheetFormFieldsetTypes = {
+    hasFieldset?: false;
+    fieldsetLegendText: string;
+} | {
+    hasFieldset: true;
+    fieldsetLegendText: string;
+};
+type EditTearsheetFormProps = EditTearsheetFormBaseProps & EditTearsheetFormFieldsetTypes;
+export declare let EditTearsheetForm: React.ForwardRefExoticComponent<EditTearsheetFormProps & React.RefAttributes<HTMLDivElement>>;
+export {};