@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/Datagrid/useSelectRows.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { TableSelectRow } from '@carbon/react';
@@ -14,144 +14,127 @@ import { selectionColumnId } from './common-column-ids.js';
 import { pkg, carbon } from '../../settings.js';
 import { handleToggleRowSelected } from './Datagrid/addons/stateReducer.js';
 
-var _excluded = ["onChange", "title"];
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var checkboxClass = "".concat(pkg.prefix, "--datagrid__checkbox-cell");
-var useSelectRows = function useSelectRows(hooks) {
+const blockClass = `${pkg.prefix}--datagrid`;
+const checkboxClass = `${pkg.prefix}--datagrid__checkbox-cell`;
+const useSelectRows = hooks => {
   useHighlightSelection(hooks);
-  var useInstance = function useInstance(instance) {
-    var rows = instance.rows;
-    var rowsWithSelect = rows.map(function (row) {
-      return _objectSpread2(_objectSpread2({}, row), {}, {
-        isSelectable: true
-      });
-    });
+  const useInstance = instance => {
+    const {
+      rows
+    } = instance;
+    const rowsWithSelect = rows.map(row => ({
+      ...row,
+      isSelectable: true
+    }));
     Object.assign(instance, {
       rows: rowsWithSelect
     });
   };
   hooks.useInstance.push(useInstance);
-  hooks.useInstance.push(function (instance) {
+  hooks.useInstance.push(instance => {
     Object.assign(instance, {
       withSelectRows: true
     });
   });
-  hooks.visibleColumns.push(function (columns) {
+  hooks.visibleColumns.push(columns => {
     // Ensures that the first column is the row expander in the
     // case of selected rows and expandable rows being used together
-    var newColOrder = _toConsumableArray(columns);
-    var expanderColumnIndex = newColOrder.findIndex(function (col) {
-      return col.id === 'expander';
-    });
-    var expanderCol = expanderColumnIndex > -1 ? newColOrder.splice(expanderColumnIndex, 1) : [];
-    return [].concat(_toConsumableArray(expanderColumnIndex > -1 && expanderCol && expanderCol.length ? expanderCol : []), [{
+    const newColOrder = [...columns];
+    const expanderColumnIndex = newColOrder.findIndex(col => col.id === 'expander');
+    const expanderCol = expanderColumnIndex > -1 ? newColOrder.splice(expanderColumnIndex, 1) : [];
+    return [...(expanderColumnIndex > -1 && expanderCol && expanderCol.length ? expanderCol : []), {
       id: selectionColumnId,
-      Header: function Header(gridState) {
-        return /*#__PURE__*/React__default.createElement(SelectAll, gridState);
-      },
-      Cell: function Cell(gridState) {
-        return /*#__PURE__*/React__default.createElement(SelectRow, gridState);
-      }
-    }], _toConsumableArray(newColOrder));
+      Header: gridState => /*#__PURE__*/React__default.createElement(SelectAll, gridState),
+      Cell: gridState => /*#__PURE__*/React__default.createElement(SelectRow, gridState)
+    }, ...newColOrder];
   });
 };
-var useHighlightSelection = function useHighlightSelection(hooks) {
-  var getRowProps = function getRowProps(props, _ref) {
-    var row = _ref.row;
-    var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
-      checked = _row$getToggleRowSele.checked;
+const useHighlightSelection = hooks => {
+  const getRowProps = (props, _ref) => {
+    let {
+      row
+    } = _ref;
+    const {
+      checked
+    } = row.getToggleRowSelectedProps();
     return [props, {
-      className: cx(["".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty({}, "".concat(carbon.prefix, "--data-table--selected"), checked), "".concat(blockClass, "__active-row"), checked)])
+      className: cx([`${blockClass}__carbon-row`, {
+        [`${carbon.prefix}--data-table--selected`]: checked,
+        [`${blockClass}__active-row`]: checked
+      }])
     }];
   };
   hooks.getRowProps.push(getRowProps);
 };
-var SelectRow = function SelectRow(datagridState) {
-  var _columns$;
-  var _datagridState$isFetc = datagridState.isFetching,
-    isFetching = _datagridState$isFetc === void 0 ? false : _datagridState$isFetc,
-    tableId = datagridState.tableId,
-    row = datagridState.row,
-    cell = datagridState.cell,
-    radio = datagridState.radio,
-    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-    onRadioSelect = datagridState.onRadioSelect,
-    onRowSelect = datagridState.onRowSelect,
-    columns = datagridState.columns,
-    withStickyColumn = datagridState.withStickyColumn,
-    dispatch = datagridState.dispatch,
-    getRowId = datagridState.getRowId;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    windowSize = _useState2[0],
-    setWindowSize = _useState2[1];
-  useLayoutEffect(function () {
+const SelectRow = datagridState => {
+  const {
+    isFetching = false,
+    tableId,
+    row,
+    cell,
+    radio,
+    toggleAllRowsSelected,
+    onRadioSelect,
+    onRowSelect,
+    columns,
+    withStickyColumn,
+    dispatch,
+    getRowId
+  } = datagridState;
+  const [windowSize, setWindowSize] = useState();
+  useLayoutEffect(() => {
     setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
     window.addEventListener('resize', updateSize);
-    return function () {
-      return window.removeEventListener('resize', updateSize);
-    };
+    return () => window.removeEventListener('resize', updateSize);
   }, []);
-  var onSelectHandler = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
-      var _document$activeEleme, _document, _document2;
-      var activeElement;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            event.stopPropagation(); // avoid triggering onRowClick
-            if (radio) {
-              toggleAllRowsSelected(false);
-              if (onRadioSelect) {
-                onRadioSelect(row);
-              }
-            }
-            onChange(event);
-            onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, event);
-            handleToggleRowSelected({
-              dispatch: dispatch,
-              rowData: row,
-              isChecked: event.target.checked,
-              getRowId: getRowId,
-              selectAll: null
-            });
-            // focus the radio / checkbox if lost
-            activeElement = (_document$activeEleme = (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 ? void 0 : _document.id) !== null && _document$activeEleme !== void 0 ? _document$activeEleme : '';
-            _context.next = 8;
-            return undefined;
-          case 8:
-            (_document2 = document) === null || _document2 === void 0 || (_document2 = _document2.getElementById(activeElement)) === null || _document2 === void 0 || _document2.focus();
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function onSelectHandler(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  var selectDisabled = isFetching || row.getRowProps().disabled;
-  var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),
-    onChange = _row$getToggleRowSele2.onChange,
-    title = _row$getToggleRowSele2.title,
-    selectProps = _objectWithoutProperties(_row$getToggleRowSele2, _excluded);
-  var cellProps = cell.getCellProps();
-  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
-  var rowId = "".concat(tableId, "-").concat(row.id, "-").concat(row.index);
-  var key = cellProps.key,
-    _cellProps = cellProps._cellProps;
+  const onSelectHandler = async event => {
+    event.stopPropagation(); // avoid triggering onRowClick
+    if (radio) {
+      toggleAllRowsSelected(false);
+      if (onRadioSelect) {
+        onRadioSelect(row);
+      }
+    }
+    onChange(event);
+    onRowSelect?.(row, event);
+    handleToggleRowSelected({
+      dispatch,
+      rowData: row,
+      isChecked: event.target.checked,
+      getRowId,
+      selectAll: null
+    });
+    // focus the radio / checkbox if lost
+    const activeElement = document?.activeElement?.id ?? '';
+    await undefined;
+    document?.getElementById(activeElement)?.focus();
+  };
+  const selectDisabled = isFetching || row.getRowProps().disabled;
+  const {
+    onChange,
+    title,
+    ...selectProps
+  } = row.getToggleRowSelectedProps();
+  const cellProps = cell.getCellProps();
+  const isFirstColumnStickyLeft = columns[0]?.sticky === 'left' && withStickyColumn;
+  const rowId = `${tableId}-${row.id}-${row.index}`;
+  const {
+    key,
+    _cellProps
+  } = cellProps;
   return /*#__PURE__*/React__default.createElement(TableSelectRow, _extends({
     key: key
   }, _cellProps, selectProps, {
     radio: radio,
     onSelect: onSelectHandler,
     id: rowId,
-    name: "".concat(rowId, "-name"),
-    className: cx([checkboxClass, cellProps.className, _defineProperty({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && Number(windowSize) > 671)]),
+    name: `${rowId}-name`,
+    className: cx([checkboxClass, cellProps.className, {
+      [`${checkboxClass}-sticky-left`]: isFirstColumnStickyLeft && Number(windowSize) > 671
+    }]),
     ariaLabel: title,
     disabled: selectDisabled
   }));

package/es/components/Datagrid/useSkeletonRows.js

@@ -5,35 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-
-/**
- * Copyright IBM Corp. 2020, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var useSkeletons = function useSkeletons(hooks) {
-  var useInstance = function useInstance(instance) {
-    var isFetching = instance.isFetching,
-      rows = instance.rows,
-      skeletonRowCount = instance.skeletonRowCount;
+const useSkeletons = hooks => {
+  const useInstance = instance => {
+    const {
+      isFetching,
+      rows,
+      skeletonRowCount
+    } = instance;
     if (isFetching && skeletonRowCount === 0) {
       throw new Error('skeletonRowCount cannot be set to 0, if isFetching is true');
     }
-    var skeletonRow = function skeletonRow(id) {
-      return {
-        isSkeleton: true,
-        values: 'skeleton',
-        id: id
-      };
-    };
-    var rowsWithSkeletons = [].concat(_toConsumableArray(rows), _toConsumableArray(Array.from({
+    const skeletonRow = id => ({
+      isSkeleton: true,
+      values: 'skeleton',
+      id
+    });
+    const rowsWithSkeletons = [...rows, ...Array.from({
       length: skeletonRowCount || 3
-    }, function (_, index) {
-      return skeletonRow("skeleton-row-".concat(index + 1));
-    })));
+    }, (_, index) => skeletonRow(`skeleton-row-${index + 1}`))];
     Object.assign(instance, {
       rows: isFetching ? rowsWithSkeletons : rows
     });

package/es/components/Datagrid/useSortableColumns.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import { pkg, carbon } from '../../settings.js';
@@ -14,9 +13,9 @@ import { ArrowsVertical, ArrowDown, ArrowUp } from '@carbon/react/icons';
 import { SelectAll } from './Datagrid/DatagridSelectAll.js';
 import { DatagridAILabel } from './Datagrid/addons/AiLabel/DatagridAiLabel.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var getNewSortOrder = function getNewSortOrder(currentOrder) {
-  var order = {
+const blockClass = `${pkg.prefix}--datagrid`;
+const getNewSortOrder = currentOrder => {
+  const order = {
     newOrder: 'NONE',
     newSortDesc: undefined
   };
@@ -40,69 +39,52 @@ var getNewSortOrder = function getNewSortOrder(currentOrder) {
   }
   return order;
 };
-var getAriaSortValue = function getAriaSortValue(col, _ref) {
-  var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
-    descendingSortableLabelText = _ref.descendingSortableLabelText,
-    defaultSortableLabelText = _ref.defaultSortableLabelText;
+const getAriaPressedValue = col => {
   if (!col) {
     return;
   }
-  var isSorted = col.isSorted,
-    isSortedDesc = col.isSortedDesc;
-  if (!isSorted) {
-    return defaultSortableLabelText;
-  }
-  if (isSorted && !isSortedDesc) {
-    return ascendingSortableLabelText;
-  }
-  if (isSorted && isSortedDesc) {
-    return descendingSortableLabelText;
-  }
-};
-var getAriaPressedValue = function getAriaPressedValue(col) {
-  if (!col) {
-    return;
-  }
-  var isSorted = col.isSorted;
+  const {
+    isSorted
+  } = col;
   if (isSorted) {
     return 'true';
   }
   return 'false';
 };
-var useSortableColumns = function useSortableColumns(hooks) {
-  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
-    var _instance$customizeCo;
-    var instance = _ref2.instance;
-    var onSort = instance.onSort,
-      ascendingSortableLabelText = instance.ascendingSortableLabelText,
-      descendingSortableLabelText = instance.descendingSortableLabelText,
-      defaultSortableLabelText = instance.defaultSortableLabelText;
-    var onSortClick = function onSortClick(event, column) {
-      var aiLabel = event.target.classList.contains("".concat(carbon.prefix, "--slug")) || event.target.closest(".".concat(carbon.prefix, "--slug"));
+const useSortableColumns = hooks => {
+  const sortableVisibleColumns = (visibleColumns, _ref) => {
+    let {
+      instance
+    } = _ref;
+    const {
+      onSort
+    } = instance;
+    const onSortClick = (event, column) => {
+      const aiLabel = event.target.classList.contains(`${carbon.prefix}--slug`) || event.target.closest(`.${carbon.prefix}--slug`);
       // Do not continue with sorting if we find a slug
       if (aiLabel) {
         event.stopPropagation();
         return;
       }
-      var key = column.id;
-      var sortDesc = column.isSortedDesc;
-      var _getNewSortOrder = getNewSortOrder(sortDesc),
-        newSortDesc = _getNewSortOrder.newSortDesc,
-        newOrder = _getNewSortOrder.newOrder;
+      const key = column.id;
+      const sortDesc = column.isSortedDesc;
+      const {
+        newSortDesc,
+        newOrder
+      } = getNewSortOrder(sortDesc);
       if (onSort) {
         onSort(key, newOrder);
       }
       instance.toggleSortBy(key, newSortDesc, false);
     };
-    var sortableColumns = visibleColumns.map(function (column) {
-      var _column$minWidth;
-      var icon = function icon(col, props) {
-        var iconProps = _objectSpread2(_objectSpread2({
-          size: 16
-        }, props), {}, {
-          className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
-        });
-        if (col !== null && col !== void 0 && col.isSorted) {
+    const sortableColumns = visibleColumns.map(column => {
+      const icon = (col, props) => {
+        const iconProps = {
+          size: 16,
+          ...props,
+          className: `${blockClass}__sortable-icon ${carbon.prefix}--btn__icon`
+        };
+        if (col?.isSorted) {
           switch (col.isSortedDesc) {
             case false:
               return /*#__PURE__*/React__default.createElement(ArrowUp, iconProps);
@@ -114,50 +96,42 @@ var useSortableColumns = function useSortableColumns(hooks) {
         }
         return /*#__PURE__*/React__default.createElement(ArrowsVertical, iconProps);
       };
-      var handleKey = function handleKey(e, columnId) {
-        var key = e.key;
+      const handleKey = (e, columnId) => {
+        const {
+          key
+        } = e;
         if (key === 'Enter') {
-          setTimeout(function () {
-            var _document$getElementB;
-            return (_document$getElementB = document.getElementById(columnId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
-          }, 0);
+          setTimeout(() => document.getElementById(columnId)?.focus(), 0);
         }
       };
-      var Header = function Header(headerProp) {
-        return column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
-          "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
-            ascendingSortableLabelText: ascendingSortableLabelText,
-            descendingSortableLabelText: descendingSortableLabelText,
-            defaultSortableLabelText: defaultSortableLabelText
-          }),
-          "aria-pressed": getAriaPressedValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column),
-          onClick: function onClick(event) {
-            return onSortClick(event, headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
-          },
-          kind: "ghost",
-          renderIcon: function renderIcon(props) {
-            var _headerProp$column, _headerProp$column2;
-            return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DatagridAILabel, {
-              aiLabel: (headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.aiLabel) || (headerProp === null || headerProp === void 0 || (_headerProp$column2 = headerProp.column) === null || _headerProp$column2 === void 0 ? void 0 : _headerProp$column2.slug)
-            }), icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props));
-          },
-          id: column === null || column === void 0 ? void 0 : column.id,
-          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _defineProperty(_defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false)),
-          onKeyDown: function onKeyDown(event) {
-            return handleKey(event, column.id);
-          }
-        }, column.Header);
+      const Header = headerProp => column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
+        "aria-pressed": getAriaPressedValue(headerProp?.column),
+        onClick: event => onSortClick(event, headerProp?.column),
+        kind: "ghost",
+        renderIcon: props => {
+          return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DatagridAILabel, {
+            aiLabel: headerProp?.column?.aiLabel || headerProp?.column?.slug
+          }), icon(headerProp?.column, props));
+        },
+        id: column?.id,
+        className: cx(`${carbon.prefix}--table-sort ${blockClass}--table-sort`, {
+          [`${blockClass}--table-sort--desc`]: headerProp?.column.isSortedDesc,
+          [`${blockClass}--table-sort--asc`]: headerProp?.column.isSortedDesc === false
+        }),
+        onKeyDown: event => handleKey(event, column.id)
+      }, column.Header);
+      return {
+        ...column,
+        Header,
+        minWidth: column.minWidth ?? (column.disableSortBy ? 50 : column.isAction ? 50 : 90)
       };
-      return _objectSpread2(_objectSpread2({}, column), {}, {
-        Header: Header,
-        minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : column.disableSortBy ? 50 : column.isAction ? 50 : 90
-      });
     });
-    return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);
+    return instance.customizeColumnsProps?.isTearsheetOpen ? visibleColumns : [...sortableColumns];
   };
-  var sortInstanceProps = function sortInstanceProps(instance) {
-    var _ref3 = instance,
-      onSort = _ref3.onSort;
+  const sortInstanceProps = instance => {
+    const {
+      onSort
+    } = instance;
     Object.assign(instance, {
       manualSortBy: !!onSort,
       isTableSortable: true