@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Datagrid/useActionsColumn.js

@@ -16,72 +16,81 @@ var react = require('@carbon/react');
 var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 
-var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"],
-  _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var useActionsColumn = function useActionsColumn(hooks) {
-  var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
-    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);
-      });
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const useActionsColumn = hooks => {
+  const useAttachActionsOnInstance = instance => {
+    const {
+      rowActions,
+      isFetching,
+      state: {
+        selectedRowIds
+      }
+    } = instance;
+    const getDisabledState = rowIndex => {
+      const selectedRowIndexes = Object.keys(selectedRowIds).map(n => Number(n));
       if (selectedRowIndexes.includes(rowIndex)) {
         return true;
       }
       return false;
     };
     if (rowActions && Array.isArray(rowActions)) {
-      var addActionsMenu = function addActionsMenu(props, cellData) {
-        var cell = cellData.cell;
-        var row = cell.row,
-          column = cell.column;
+      const addActionsMenu = (props, cellData) => {
+        const {
+          cell
+        } = cellData;
+        const {
+          row,
+          column
+        } = cell;
         if (column.isAction) {
-          var isColumnSticky = !!column.sticky;
+          const isColumnSticky = !!column.sticky;
           return [props, {
             children: /*#__PURE__*/React.createElement("div", {
-              className: "".concat(blockClass, "__actions-column-contents")
+              className: `${blockClass}__actions-column-contents`
             }, isFetching && /*#__PURE__*/React.createElement(react.IconSkeleton, {
-              className: "".concat(blockClass, "__actions-column-loading")
+              className: `${blockClass}__actions-column-loading`
             }), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/React.createElement("div", {
-              className: "".concat(blockClass, "_actions-column")
-            }, rowActions.map(function (action, index) {
-              var preparedActionProps = propsHelper.prepareProps(action, ['isDelete']);
-              var align = preparedActionProps.align,
-                id = preparedActionProps.id,
-                itemText = preparedActionProps.itemText,
-                _onClick = preparedActionProps.onClick,
-                icon = preparedActionProps.icon,
-                shouldHideMenuItem = preparedActionProps.shouldHideMenuItem,
-                shouldDisableMenuItem = preparedActionProps.shouldDisableMenuItem,
-                disabled = preparedActionProps.disabled,
-                rest = _rollupPluginBabelHelpers.objectWithoutProperties(preparedActionProps, _excluded);
-              var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
-              var isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
+              className: `${blockClass}_actions-column`
+            }, rowActions.map((action, index) => {
+              const preparedActionProps = propsHelper.prepareProps(action, ['isDelete']);
+              const {
+                align,
+                id,
+                itemText,
+                onClick,
+                icon,
+                shouldHideMenuItem,
+                shouldDisableMenuItem,
+                disabled,
+                ...rest
+              } = preparedActionProps;
+              const hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
+              const isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
               if (hidden) {
                 return null;
               }
-              var Icon = icon;
+              const Icon = icon;
               return /*#__PURE__*/React.createElement("div", {
-                className: cx("".concat(blockClass, "__actions-column-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__disabled-row-action-button"), getDisabledState(row.index))),
-                key: "".concat(itemText, "__").concat(index)
+                className: cx(`${blockClass}__actions-column-button`, {
+                  [`${blockClass}__disabled-row-action-button`]: getDisabledState(row.index)
+                }),
+                key: `${itemText}__${index}`
               }, /*#__PURE__*/React.createElement(react.IconButton, _rollupPluginBabelHelpers.extends({}, rest, {
                 align: align || 'top',
                 label: itemText,
                 kind: "ghost",
                 name: itemText //for test use
                 ,
-                className: cx(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
-                onClick: function onClick(e) {
+                className: cx({
+                  [`${blockClass}__disabled-row-action`]: getDisabledState(row.index)
+                }),
+                onClick: e => {
                   if (getDisabledState(row.index)) {
                     // Row actions should be disabled if row is selected and batchActions toolbar is active
                     return;
                   }
                   e.stopPropagation();
-                  _onClick === null || _onClick === void 0 || _onClick(id, row, e);
+                  onClick?.(id, row, e);
                 },
                 disabled: isDisabledByRow
               }), Icon && /*#__PURE__*/React.createElement(Icon, null)));
@@ -89,33 +98,39 @@ var useActionsColumn = function useActionsColumn(hooks) {
               align: "left",
               size: "sm",
               flipped: true,
-              onClick: function onClick(e) {
+              onClick: e => {
                 e.stopPropagation();
               }
-            }, rowActions.map(function (action) {
-              var id = action.id,
-                _onClick2 = action.onClick,
-                shouldHideMenuItem = action.shouldHideMenuItem,
-                shouldDisableMenuItem = action.shouldDisableMenuItem,
-                disabled = action.disabled,
-                rest = _rollupPluginBabelHelpers.objectWithoutProperties(action, _excluded2);
-              var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
+            }, rowActions.map(action => {
+              const {
+                id,
+                onClick,
+                shouldHideMenuItem,
+                shouldDisableMenuItem,
+                disabled,
+                ...rest
+              } = action;
+              const hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
               // shouldDisableMenuItem will override disabled because it's more specific
               // if shouldDisableMenuItem doesn't exists, fall back to disabled
-              var isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
+              const isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
               if (hidden) {
                 return null;
               }
               return /*#__PURE__*/React.createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers.extends({}, rest, {
                 disabled: isDisabledByRow,
-                onClick: function onClick(e) {
+                onClick: e => {
                   e.stopPropagation();
-                  _onClick2 === null || _onClick2 === void 0 || _onClick2(id, row, e);
+                  onClick?.(id, row, e);
                 },
                 key: id
               }));
             })))),
-            className: cx(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-column-cell"), true), "".concat(blockClass, "__cell"), true), "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky)),
+            className: cx({
+              [`${blockClass}__actions-column-cell`]: true,
+              [`${blockClass}__cell`]: true,
+              [`${blockClass}__actions-column-cell-non-sticky`]: !isColumnSticky
+            }),
             style: {
               width: rowActions.length > 2 || isColumnSticky ? 48 : 96
             }
@@ -126,17 +141,22 @@ var useActionsColumn = function useActionsColumn(hooks) {
       hooks.getCellProps.push(addActionsMenu);
     }
   };
-  var useStickyHeaderWidth = function useStickyHeaderWidth(instance) {
-    var rowActions = instance.rowActions;
+  const useStickyHeaderWidth = instance => {
+    const {
+      rowActions
+    } = instance;
     if (rowActions && Array.isArray(rowActions)) {
-      var addHeaderWidth = function addHeaderWidth(props, cellData) {
-        var column = cellData.column;
+      const addHeaderWidth = (props, cellData) => {
+        const {
+          column
+        } = cellData;
         if (column.isAction) {
-          var isColumnSticky = !!column.sticky;
+          const isColumnSticky = !!column.sticky;
           return [props, {
-            style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props.style), {}, {
+            style: {
+              ...props.style,
               width: rowActions.length > 2 || isColumnSticky ? 48 : 96 // set header width based on action length
-            })
+            }
           }];
         }
         return [props];

package/lib/components/Datagrid/useColumnCenterAlign.js

@@ -9,37 +9,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var useColumnCenterAlign = function useColumnCenterAlign(hooks) {
-  var centerAlignRenderer = function centerAlignRenderer(tableProps, column) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__center-align-cell-renderer"), {
-        sortDisabled: !tableProps.isTableSortable || tableProps.column && tableProps.column.disableSortBy === true
-      })
-    }, column.Cell(tableProps));
-  };
-  var centerAlignHeader = function centerAlignHeader(headerProp, column) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__center-align-header")
-    }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
-  };
-  var centerAlignedColumns = function centerAlignedColumns(columns) {
-    var columnsWithDefaultCells = columns.map(function (column) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, column), {}, {
-        Cell: column.centerAlignedColumn ? function (tableProp) {
-          return centerAlignRenderer(tableProp, column);
-        } : column.Cell,
-        Header: column.centerAlignedColumn ? function (headerProp) {
-          return centerAlignHeader(headerProp, column);
-        } : column.Header
-      });
-    });
-    return _rollupPluginBabelHelpers.toConsumableArray(columnsWithDefaultCells);
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const useColumnCenterAlign = hooks => {
+  const centerAlignRenderer = (tableProps, column) => /*#__PURE__*/React.createElement("div", {
+    className: cx(`${blockClass}__center-align-cell-renderer`, {
+      sortDisabled: !tableProps.isTableSortable || tableProps.column && tableProps.column.disableSortBy === true
+    })
+  }, column.Cell(tableProps));
+  const centerAlignHeader = (headerProp, column) => /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__center-align-header`
+  }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
+  const centerAlignedColumns = columns => {
+    const columnsWithDefaultCells = columns.map(column => ({
+      ...column,
+      Cell: column.centerAlignedColumn ? tableProp => centerAlignRenderer(tableProp, column) : column.Cell,
+      Header: column.centerAlignedColumn ? headerProp => centerAlignHeader(headerProp, column) : column.Header
+    }));
+    return [...columnsWithDefaultCells];
   };
   hooks.visibleColumns.push(centerAlignedColumns);
 };

package/lib/components/Datagrid/useColumnRightAlign.js

@@ -9,38 +9,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 
-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.createElement("div", {
-      className: cx("".concat(blockClass, "__right-align-cell-renderer"), {
-        sortDisabled: !tableProps.isTableSortable || (tableProps === null || tableProps === void 0 || (_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.disableSortBy) === true
-      })
-    }, 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.createElement("div", {
-      className: "".concat(blockClass, "__right-align-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) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, column), {}, {
-        Cell: column.rightAlignedColumn ? function (tableProp) {
-          return RightAlignRenderer(tableProp, column);
-        } : column.Cell,
-        Header: column.rightAlignedColumn ? function (headerProp) {
-          return RightAlignHeader(headerProp, column);
-        } : column.Header
-      });
-    });
-    return _rollupPluginBabelHelpers.toConsumableArray(columnsWithDefaultCells);
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const useColumnRightAlign = hooks => {
+  const RightAlignRenderer = (tableProps, column) => /*#__PURE__*/React.createElement("div", {
+    className: cx(`${blockClass}__right-align-cell-renderer`, {
+      sortDisabled: !tableProps.isTableSortable || tableProps?.column?.disableSortBy === true
+    })
+  }, column?.Cell?.(tableProps));
+  const RightAlignHeader = (headerProp, column) => /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__right-align-header`
+  }, typeof column.Header === 'function' ? (column?.Header)(headerProp) : column.Header);
+  const rightAlignedColumns = columns => {
+    const columnsWithDefaultCells = columns.map(column => ({
+      ...column,
+      Cell: column.rightAlignedColumn ? tableProp => RightAlignRenderer(tableProp, column) : column.Cell,
+      Header: column.rightAlignedColumn ? headerProp => RightAlignHeader(headerProp, column) : column.Header
+    }));
+    return [...columnsWithDefaultCells];
   };
   hooks.visibleColumns.push(rightAlignedColumns);
 };

package/lib/components/Datagrid/useCustomizeColumns.js

@@ -33,28 +33,26 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-var useCustomizeColumns = function useCustomizeColumns(hooks) {
-  var _React$useState = React__namespace.useState(false),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    isTearsheetOpen = _React$useState2[0],
-    setIsTearsheetOpen = _React$useState2[1];
-  hooks.useInstance.push(function (instance) {
-    var _ref = instance,
-      customizeColumnsProps = _ref.customizeColumnsProps;
-    var _ref2 = customizeColumnsProps || {},
-      labels = _ref2.labels;
+const useCustomizeColumns = hooks => {
+  const [isTearsheetOpen, setIsTearsheetOpen] = React__namespace.useState(false);
+  hooks.useInstance.push(instance => {
+    const {
+      customizeColumnsProps
+    } = instance;
+    const {
+      labels
+    } = customizeColumnsProps || {};
     Object.assign(instance, {
-      customizeColumnsProps: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, customizeColumnsProps), {}, {
+      customizeColumnsProps: {
+        ...customizeColumnsProps,
+        isTearsheetOpen,
+        setIsTearsheetOpen
+      },
+      CustomizeColumnsButton: props => /*#__PURE__*/React__namespace.createElement(ButtonWrapper.default, _rollupPluginBabelHelpers.extends({
+        iconTooltipLabel: labels?.iconTooltipLabel,
         isTearsheetOpen: isTearsheetOpen,
         setIsTearsheetOpen: setIsTearsheetOpen
-      }),
-      CustomizeColumnsButton: function CustomizeColumnsButton(props) {
-        return /*#__PURE__*/React__namespace.createElement(ButtonWrapper.default, _rollupPluginBabelHelpers.extends({
-          iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
-          isTearsheetOpen: isTearsheetOpen,
-          setIsTearsheetOpen: setIsTearsheetOpen
-        }, props));
-      },
+      }, props)),
       CustomizeColumnsTearsheet: TearsheetWrapper.default
     });
   });

package/lib/components/Datagrid/useDatagrid.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var reactTable = require('react-table');
 var useSkeletonRows = require('./useSkeletonRows.js');
@@ -22,33 +21,29 @@ var useFloatingScroll = require('./useFloatingScroll.js');
 var stateReducer = require('./Datagrid/addons/stateReducer.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
-var useDatagrid = function useDatagrid(params) {
-  var defaultPlugins = [reactTable.useFlexLayout, DatagridHeaderRow.default, useSkeletonRows.default, reactTable.useResizeColumns, useRowRenderer.default, useDefaultStringRenderer.default, useRowSize.default, reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useSortBy, reactTable.useExpanded];
+const useDatagrid = function (params) {
+  const defaultPlugins = [reactTable.useFlexLayout, DatagridHeaderRow.default, useSkeletonRows.default, reactTable.useResizeColumns, useRowRenderer.default, useDefaultStringRenderer.default, useRowSize.default, reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useSortBy, reactTable.useExpanded];
 
   // Disable resizing
   if (params.disableResizing) {
-    var resizeIndex = defaultPlugins.findIndex(function (p) {
-      return (p === null || p === void 0 ? void 0 : p['pluginName']) === 'useResizeColumns';
-    });
+    const resizeIndex = defaultPlugins.findIndex(p => p?.['pluginName'] === 'useResizeColumns');
     defaultPlugins.splice(resizeIndex, 1);
   }
-  var defaultEndPlugins = [reactTable.usePagination, reactTable.useRowSelect, useFlexResize.default, useFloatingScroll.default];
-  var clientEndPlugins = params.endPlugins || [];
-  var defaultColumn = {
+  const defaultEndPlugins = [reactTable.usePagination, reactTable.useRowSelect, useFlexResize.default, useFloatingScroll.default];
+  const clientEndPlugins = params.endPlugins || [];
+  const defaultColumn = {
     minWidth: 50
   };
-  var tableId = React.useMemo(function () {
-    return uuidv4.default('datagrid-table-id');
-  }, []);
+  const tableId = React.useMemo(() => uuidv4.default('datagrid-table-id'), []);
   for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     plugins[_key - 1] = arguments[_key];
   }
-  var tableState = reactTable.useTable.apply(void 0, [_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
-    tableId: tableId
-  }, params), {}, {
+  const tableState = reactTable.useTable({
+    tableId,
+    ...params,
     stateReducer: stateReducer.stateReducer,
-    defaultColumn: defaultColumn
-  })].concat(defaultPlugins, plugins, defaultEndPlugins, _rollupPluginBabelHelpers.toConsumableArray(clientEndPlugins)));
+    defaultColumn
+  }, ...defaultPlugins, ...plugins, ...defaultEndPlugins, ...clientEndPlugins);
   return tableState;
 };
 

package/lib/components/Datagrid/useDefaultStringRenderer.js

@@ -9,34 +9,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
-  var StringRenderer = function StringRenderer(tableProps) {
-    var _tableProps$column;
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const useDefaultStringRenderer = hooks => {
+  const StringRenderer = tableProps => /*#__PURE__*/React.createElement("div", {
+    className: cx(`${blockClass}__defaultStringRenderer`, {
+      [`${blockClass}__defaultStringRenderer--multiline`]: tableProps.column?.multiLineWrap || tableProps?.multiLineWrapAll
+    })
+  }, tableProps.value);
+  const HeaderRenderer = (header, slug, aiLabel) => {
     return /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__defaultStringRenderer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll)))
-    }, tableProps.value);
-  };
-  var HeaderRenderer = function HeaderRenderer(header, slug, aiLabel) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__defaultStringRenderer"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React.isValidElement(slug)), "".concat(blockClass, "__defaultStringRenderer--ai-label"), aiLabel && /*#__PURE__*/React.isValidElement(aiLabel))),
+      className: cx(`${blockClass}__defaultStringRenderer`, {
+        [`${blockClass}__defaultStringRenderer--slug`]: slug && /*#__PURE__*/React.isValidElement(slug),
+        [`${blockClass}__defaultStringRenderer--ai-label`]: aiLabel && /*#__PURE__*/React.isValidElement(aiLabel)
+      }),
       key: typeof header === 'string' ? header : ''
     }, header);
   };
-  var visibleColumns = function visibleColumns(columns) {
-    var columnsWithDefaultCells = columns.map(function (column) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
-        Cell: StringRenderer
-      }, column), {}, {
-        Header: column.HeaderRenderer || HeaderRenderer(column.Header, column.slug, column.aiLabel)
-      });
-    });
-    return _rollupPluginBabelHelpers.toConsumableArray(columnsWithDefaultCells);
+  const visibleColumns = columns => {
+    const columnsWithDefaultCells = columns.map(column => ({
+      Cell: StringRenderer,
+      ...column,
+      Header: column.HeaderRenderer || HeaderRenderer(column.Header, column.slug, column.aiLabel)
+    }));
+    return [...columnsWithDefaultCells];
   };
   hooks.visibleColumns.push(visibleColumns);
 };

package/lib/components/Datagrid/useDisableSelectRows.js

@@ -9,93 +9,85 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var nonselectablerowsList = function nonselectablerowsList(instance) {
-  var _instance$rows;
-  var nonselectablerows = (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);
-  }).map(function (row) {
-    return row.id;
-  })) || [];
+const nonselectablerowsList = instance => {
+  const nonselectablerows = instance?.rows?.filter(row => instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row)).map(row => row.id) || [];
   return nonselectablerows;
 };
-var useDisableSelectRows = function useDisableSelectRows(hooks) {
+const useDisableSelectRows = hooks => {
   updateSelectAll(hooks);
   updatePageSelectAll(hooks);
-  var nonselectablerows = [];
-  var useInstance = function useInstance(instance) {
+  let nonselectablerows = [];
+  const useInstance = instance => {
     nonselectablerows = nonselectablerowsList(instance);
   };
   hooks.useInstance.push(useInstance);
-  var getRowProps = function getRowProps(props, _ref) {
-    var _instance$shouldDisab;
-    var row = _ref.row,
-      instance = _ref.instance;
+  const getRowProps = (props, _ref) => {
+    let {
+      row,
+      instance
+    } = _ref;
     return [props, {
-      disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row),
-      nonselectablerows: nonselectablerows
+      disabled: instance?.shouldDisableSelectRow?.(row),
+      nonselectablerows
     }];
   };
   hooks.getRowProps.push(getRowProps);
 };
-var updateSelectAll = function updateSelectAll(hooks) {
-  var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
-    var _instance$rows2, _instance$disableSele, _instance$state2;
-    var instance = _ref2.instance;
-    var selectableRows = (instance === null || instance === void 0 || (_instance$rows2 = instance.rows) === null || _instance$rows2 === void 0 ? void 0 : _instance$rows2.filter(function (row) {
-      return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
-    })) || [];
-    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 === 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];
+const updateSelectAll = hooks => {
+  const getToggleAllRowsSelectedProps = (props, _ref2) => {
+    let {
+      instance
+    } = _ref2;
+    const selectableRows = instance?.rows?.filter(row => !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row))) || [];
+    const isAllRowsSelected = selectableRows?.length > 0 && selectableRows.every(_ref3 => {
+      let {
+        id
+      } = _ref3;
+      return instance?.state?.selectedRowIds?.[id];
     });
     return [props, {
-      onChange: function onChange(e) {
-        selectableRows.forEach(function (row) {
-          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);
-        });
+      onChange: e => {
+        selectableRows.forEach(row => row?.toggleRowSelected?.(e.target.checked));
       },
       style: {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      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 === null || instance === void 0 || (_instance$state2 = instance.state) === null || _instance$state2 === void 0 ? void 0 : _instance$state2.selectedRowIds) || {}).length)
+      disabled: instance?.disableSelectAll,
+      title: instance?.disableSelectRowsProps?.labels?.toggleAllRowsLabel || 'Toggle All Rows Selected',
+      indeterminate: Boolean(!isAllRowsSelected && Object.keys(instance?.state?.selectedRowIds || {}).length)
     }];
   };
   hooks.getToggleAllRowsSelectedProps.push(getToggleAllRowsSelectedProps);
 };
-var updatePageSelectAll = function updatePageSelectAll(hooks) {
-  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 === 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];
+const updatePageSelectAll = hooks => {
+  const getToggleAllPageRowsSelectedProps = (props, _ref4) => {
+    let {
+      instance
+    } = _ref4;
+    const selectableRows = instance?.page?.filter(row => !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row))) || [];
+    const isAllRowsSelected = selectableRows?.length > 0 && selectableRows.every(_ref5 => {
+      let {
+        id
+      } = _ref5;
+      return instance?.state?.selectedRowIds?.[id];
     });
     return [props, {
-      onChange: function onChange(e) {
-        selectableRows.forEach(function (row) {
-          return row.toggleRowSelected(e.target.checked);
-        });
+      onChange: e => {
+        selectableRows.forEach(row => row.toggleRowSelected(e.target.checked));
       },
       style: {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      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 === 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];
-      })))
+      disabled: instance?.disableSelectAll,
+      title: instance?.disableSelectRowsProps?.labels?.toggleAllRowsLabel || 'Toggle All Rows Selected',
+      indeterminate: Boolean(!isAllRowsSelected && instance?.page?.some(_ref6 => {
+        let {
+          id
+        } = _ref6;
+        return instance?.state?.selectedRowIds?.[id];
+      }))
     }];
   };
   hooks.getToggleAllPageRowsSelectedProps.push(getToggleAllPageRowsSelectedProps);

package/lib/components/Datagrid/useEditableCell.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var useInlineEdit = require('./useInlineEdit.js');
 
-var useEditableCell = function useEditableCell(hooks) {
+const useEditableCell = hooks => {
   useInlineEdit.default(hooks);
 };