@carbon/ibm-products 2.43.2-canary.1 → 2.43.2-canary.101

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/useDisableSelectRows.d.ts

@@ -1,2 +1,3 @@
+import { Hooks } from 'react-table';
+declare const useDisableSelectRows: (hooks: Hooks) => void;
 export default useDisableSelectRows;
-declare function useDisableSelectRows(hooks: any): void;

package/lib/components/Datagrid/useDisableSelectRows.js

@@ -13,52 +13,56 @@ var useDisableSelectRows = function useDisableSelectRows(hooks) {
   updateSelectAll(hooks);
   updatePageSelectAll(hooks);
   var getRowProps = function getRowProps(props, _ref) {
+    var _instance$shouldDisab;
     var row = _ref.row,
       instance = _ref.instance;
     return [props, {
-      disabled: instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row)
+      disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row)
     }];
   };
   hooks.getRowProps.push(getRowProps);
 };
 var updateSelectAll = function updateSelectAll(hooks) {
   var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
-    var _instance$disableSele;
+    var _instance$rows, _instance$disableSele, _instance$state2;
     var instance = _ref2.instance;
-    var selectableRows = instance.rows.filter(function (row) {
+    var selectableRows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
-    });
-    var isAllRowsSelected = selectableRows.length > 0 && selectableRows.every(function (_ref3) {
+    })) || [];
+    var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref3) {
+      var _instance$state;
       var id = _ref3.id;
-      return instance.state.selectedRowIds[id];
+      return instance === null || instance === void 0 || (_instance$state = instance.state) === null || _instance$state === void 0 || (_instance$state = _instance$state.selectedRowIds) === null || _instance$state === void 0 ? void 0 : _instance$state[id];
     });
     return [props, {
       onChange: function onChange(e) {
         selectableRows.forEach(function (row) {
-          return row.toggleRowSelected(e.target.checked);
+          var _toggleRowSelected, _ref4;
+          return row === null || row === void 0 || (_toggleRowSelected = (_ref4 = row).toggleRowSelected) === null || _toggleRowSelected === void 0 ? void 0 : _toggleRowSelected.call(_ref4, e.target.checked);
         });
       },
       style: {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      disabled: instance.disableSelectAll,
+      disabled: instance === null || instance === void 0 ? void 0 : instance.disableSelectAll,
       title: (instance === null || instance === void 0 || (_instance$disableSele = instance.disableSelectRowsProps) === null || _instance$disableSele === void 0 || (_instance$disableSele = _instance$disableSele.labels) === null || _instance$disableSele === void 0 ? void 0 : _instance$disableSele.toggleAllRowsLabel) || 'Toggle All Rows Selected',
-      indeterminate: Boolean(!isAllRowsSelected && Object.keys(instance.state.selectedRowIds).length)
+      indeterminate: Boolean(!isAllRowsSelected && Object.keys((instance === null || instance === void 0 || (_instance$state2 = instance.state) === null || _instance$state2 === void 0 ? void 0 : _instance$state2.selectedRowIds) || {}).length)
     }];
   };
   hooks.getToggleAllRowsSelectedProps.push(getToggleAllRowsSelectedProps);
 };
 var updatePageSelectAll = function updatePageSelectAll(hooks) {
-  var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref4) {
-    var _instance$disableSele2;
-    var instance = _ref4.instance;
-    var selectableRows = instance.page.filter(function (row) {
+  var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref5) {
+    var _instance$page, _instance$disableSele2, _instance$page2;
+    var instance = _ref5.instance;
+    var selectableRows = (instance === null || instance === void 0 || (_instance$page = instance.page) === null || _instance$page === void 0 ? void 0 : _instance$page.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
-    });
-    var isAllRowsSelected = selectableRows.length > 0 && selectableRows.every(function (_ref5) {
-      var id = _ref5.id;
-      return instance.state.selectedRowIds[id];
+    })) || [];
+    var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref6) {
+      var _instance$state3;
+      var id = _ref6.id;
+      return instance === null || instance === void 0 || (_instance$state3 = instance.state) === null || _instance$state3 === void 0 || (_instance$state3 = _instance$state3.selectedRowIds) === null || _instance$state3 === void 0 ? void 0 : _instance$state3[id];
     });
     return [props, {
       onChange: function onChange(e) {
@@ -70,12 +74,13 @@ var updatePageSelectAll = function updatePageSelectAll(hooks) {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      disabled: instance.disableSelectAll,
+      disabled: instance === null || instance === void 0 ? void 0 : instance.disableSelectAll,
       title: (instance === null || instance === void 0 || (_instance$disableSele2 = instance.disableSelectRowsProps) === null || _instance$disableSele2 === void 0 || (_instance$disableSele2 = _instance$disableSele2.labels) === null || _instance$disableSele2 === void 0 ? void 0 : _instance$disableSele2.toggleAllRowsLabel) || 'Toggle All Rows Selected',
-      indeterminate: Boolean(!isAllRowsSelected && instance.page.some(function (_ref6) {
-        var id = _ref6.id;
-        return instance.state.selectedRowIds[id];
-      }))
+      indeterminate: Boolean(!isAllRowsSelected && (instance === null || instance === void 0 || (_instance$page2 = instance.page) === null || _instance$page2 === void 0 ? void 0 : _instance$page2.some(function (_ref7) {
+        var _instance$state4;
+        var id = _ref7.id;
+        return instance === null || instance === void 0 || (_instance$state4 = instance.state) === null || _instance$state4 === void 0 || (_instance$state4 = _instance$state4.selectedRowIds) === null || _instance$state4 === void 0 ? void 0 : _instance$state4[id];
+      })))
     }];
   };
   hooks.getToggleAllPageRowsSelectedProps.push(getToggleAllPageRowsSelectedProps);

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

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2022, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Hooks } from 'react-table';
+declare const useInlineEdit: (hooks: Hooks) => void;
 export default useInlineEdit;
-declare function useInlineEdit(hooks: any): void;

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,19 +23,20 @@ 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,
         tabIndex: -1,
         value: cell.value,
         cell: cell,
-        isDisabled: isDisabled,
+        disabledCell: isDisabled,
         instance: instance,
         type: type
       });
@@ -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;
     /**