@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/es/components/Datagrid/useRowRenderer.js

@@ -6,25 +6,20 @@
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import DatagridRow from './Datagrid/DatagridRow';
-
 var useRowRenderer = function useRowRenderer(hooks) {
   var useInstance = function useInstance(instance) {
     var rows = instance.rows;
-
     var addRowRenderer = function addRowRenderer(row) {
       return Object.assign(row, {
         RowRenderer: DatagridRow,
         subRows: (row.subRows || []).map(addRowRenderer)
       });
     };
-
     var rowsWithRenderer = rows.map(addRowRenderer);
     Object.assign(instance, {
       rows: rowsWithRenderer
     });
   };
-
   hooks.useInstance.push(useInstance);
 };
-
 export default useRowRenderer;

package/es/components/Datagrid/useRowSize.js

@@ -1,10 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -12,24 +9,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
+
 import { useState } from 'react';
 import { RowSizeDropdown } from './Datagrid/addons/RowSize';
-
 var useRowSize = function useRowSize(hooks) {
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      internalRowSize = _useState2[0],
-      setRowSize = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    internalRowSize = _useState2[0],
+    setRowSize = _useState2[1];
   hooks.useInstance.push(function (instance) {
     var rowSizeProps = instance.rowSizeProps,
-        rowSizes = instance.rowSizes,
-        rowSize = instance.rowSize,
-        onRowSizeChange = instance.onRowSizeChange;
-
+      rowSizes = instance.rowSizes,
+      rowSize = instance.rowSize,
+      onRowSizeChange = instance.onRowSizeChange;
     var _ref = rowSizeProps || {},
-        labels = _ref.labels;
-
+      labels = _ref.labels;
     Object.assign(instance, {
       rowSize: internalRowSize || rowSize,
       rowSizeDropdownProps: _objectSpread(_objectSpread({
@@ -38,7 +32,6 @@ var useRowSize = function useRowSize(hooks) {
         selectedOption: internalRowSize || rowSize,
         onChange: function onChange(value) {
           setRowSize(value);
-
           if (typeof onRowSizeChange === 'function') {
             onRowSizeChange(value);
           }
@@ -47,21 +40,16 @@ var useRowSize = function useRowSize(hooks) {
       RowSizeDropdown: RowSizeDropdown
     });
   });
-
   var getTableProps = function getTableProps(props, _ref2) {
     var instance = _ref2.instance;
     var rowSize = instance.rowSize;
-
     if (!rowSize) {
       return props;
     }
-
     return [props, {
       size: rowSize
     }];
   };
-
   hooks.getTableProps.push(getTableProps);
 };
-
 export default useRowSize;

package/es/components/Datagrid/useSelectAllToggle.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -8,69 +8,73 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 // @flow
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import cx from 'classnames';
 import { selectionColumnId } from './common-column-ids';
 import SelectAllWithToggle from './Datagrid/DatagridSelectAllWithToggle';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-
 var useSelectAllToggle = function useSelectAllToggle(hooks) {
   useSelectAllWithToggleComponent(hooks);
   useAddClassNameToSelectRow(hooks);
 };
-
 var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(hooks) {
   var useInstance = function useInstance(instance) {
     var headers = instance.headers,
-        DatagridPagination = instance.DatagridPagination;
+      DatagridPagination = instance.DatagridPagination;
     var headersWithSelectAllToggle = headers.map(function (header) {
       if (header.id === selectionColumnId && DatagridPagination) {
         Object.assign(header, {
           Header: Header
         });
       }
-
       return header;
     });
     Object.assign(instance, {
       headers: headersWithSelectAllToggle
     });
   };
-
   hooks.useInstance.push(useInstance);
 };
-
 var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
+  var _useState = useState(window.innerWidth),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  useLayoutEffect(function () {
+    function updateSize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
   hooks.getCellProps.push(function (props, data) {
     var _columns$;
-
     var column = data.cell.column;
     var _data$instance = data.instance,
-        DatagridPagination = _data$instance.DatagridPagination,
-        columns = _data$instance.columns,
-        withStickyColumn = _data$instance.withStickyColumn;
+      DatagridPagination = _data$instance.DatagridPagination,
+      columns = _data$instance.columns,
+      withStickyColumn = _data$instance.withStickyColumn;
     var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
-
     if (column.id === selectionColumnId && DatagridPagination) {
       return [props, {
-        className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
+        className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
       }];
     }
-
     return [props];
   });
 };
-
 var Header = function Header(gridState) {
   var tableId = gridState.tableId,
-      isFetching = gridState.isFetching,
-      selectAllToggle = gridState.selectAllToggle,
-      getToggleAllPageRowsSelectedProps = gridState.getToggleAllPageRowsSelectedProps,
-      getToggleAllRowsSelectedProps = gridState.getToggleAllRowsSelectedProps,
-      isAllRowsSelected = gridState.isAllRowsSelected,
-      withStickyColumn = gridState.withStickyColumn,
-      columns = gridState.columns;
+    isFetching = gridState.isFetching,
+    selectAllToggle = gridState.selectAllToggle,
+    getToggleAllPageRowsSelectedProps = gridState.getToggleAllPageRowsSelectedProps,
+    getToggleAllRowsSelectedProps = gridState.getToggleAllRowsSelectedProps,
+    isAllRowsSelected = gridState.isAllRowsSelected,
+    withStickyColumn = gridState.withStickyColumn,
+    columns = gridState.columns;
   var props = {
     tableId: tableId,
     isFetching: isFetching,
@@ -83,5 +87,4 @@ var Header = function Header(gridState) {
   };
   return /*#__PURE__*/React.createElement(SelectAllWithToggle, props);
 };
-
 export default useSelectAllToggle;

package/es/components/Datagrid/useSelectRows.js

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["onChange"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -16,18 +14,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 // @flow
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import cx from 'classnames';
-import { DataTable } from '@carbon/react';
+import { TableSelectRow } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
 import { selectionColumnId } from './common-column-ids';
 import { pkg, carbon } from '../../settings';
-var TableSelectRow = DataTable.TableSelectRow;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-
 var useSelectRows = function useSelectRows(hooks) {
   useHighlightSelection(hooks);
-
   var useInstance = function useInstance(instance) {
     var rows = instance.rows;
     var rowsWithSelect = rows.map(function (row) {
@@ -39,7 +34,6 @@ var useSelectRows = function useSelectRows(hooks) {
       rows: rowsWithSelect
     });
   };
-
   hooks.useInstance.push(useInstance);
   hooks.useInstance.push(function (instance) {
     Object.assign(instance, {
@@ -58,7 +52,6 @@ var useSelectRows = function useSelectRows(hooks) {
     }].concat(_toConsumableArray(columns));
   });
 };
-
 var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
@@ -66,53 +59,59 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
       className: cx("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
     }];
   };
-
   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,
-      columns = datagridState.columns,
-      withStickyColumn = datagridState.withStickyColumn;
+    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;
+  var _useState = useState(window.innerWidth),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  useLayoutEffect(function () {
+    function updateSize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
   var selectDisabled = isFetching || row.getRowProps().selectDisabled;
-
   var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
-      onChange = _row$getToggleRowSele.onChange,
-      selectProps = _objectWithoutProperties(_row$getToggleRowSele, _excluded);
-
+    onChange = _row$getToggleRowSele.onChange,
+    selectProps = _objectWithoutProperties(_row$getToggleRowSele, _excluded);
   var cellProps = cell.getCellProps();
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React.createElement(TableSelectRow, _extends({}, cellProps, selectProps, {
     radio: radio,
     onSelect: function onSelect(e) {
       e.stopPropagation(); // avoid triggering onRowClick
-
       if (radio) {
         toggleAllRowsSelected(false);
-
         if (onRadioSelect) {
           onRadioSelect(row);
         }
       }
-
       onChange(e);
+      onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row, e);
     },
     id: "".concat(tableId, "-").concat(row.index),
     name: "".concat(tableId, "-").concat(row.index, "-name"),
-    className: cx("".concat(blockClass, "__checkbox-cell"), cellProps.className, _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft)),
+    className: cx("".concat(blockClass, "__checkbox-cell"), cellProps.className, _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)),
     ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
     ,
     disabled: selectDisabled
   }));
 };
-
 export default useSelectRows;

package/es/components/Datagrid/useSkeletonRows.js

@@ -1,5 +1,4 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -10,8 +9,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var useSkeletons = function useSkeletons(hooks) {
   var useInstance = function useInstance(instance) {
     var isFetching = instance.isFetching,
-        rows = instance.rows;
-
+      rows = instance.rows;
     var skeletonRow = function skeletonRow(id) {
       return {
         isSkeleton: true,
@@ -19,14 +17,11 @@ var useSkeletons = function useSkeletons(hooks) {
         id: id
       };
     };
-
     var rowsWithSkeletons = [].concat(_toConsumableArray(rows), [skeletonRow('skeleton-row-1'), skeletonRow('skeleton-row-2'), skeletonRow('skeleton-row-3')]);
     Object.assign(instance, {
       rows: isFetching ? rowsWithSkeletons : rows
     });
   };
-
   hooks.useInstance.push(useInstance);
 };
-
 export default useSkeletons;

package/es/components/Datagrid/useSortableColumns.js

@@ -1,92 +1,92 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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 React from 'react';
+import cx from 'classnames';
+import { pkg, carbon } from '../../settings';
 import { Button } from '@carbon/react';
 import { ArrowUp, ArrowDown, ArrowsVertical } from '@carbon/react/icons';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
 var ordering = {
   ASC: 'ASC',
   DESC: 'DESC',
   NONE: 'NONE'
 };
-
 var useSortableColumns = function useSortableColumns(hooks) {
   var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+    var _instance$customizeCo;
     var instance = _ref.instance;
     var onSort = instance.onSort;
-
     var onSortClick = function onSortClick(column) {
       var key = column.id;
       var sortDesc = column.isSortedDesc;
-
       var _getNewSortOrder = getNewSortOrder(sortDesc),
-          newSortDesc = _getNewSortOrder.newSortDesc,
-          newOrder = _getNewSortOrder.newOrder;
-
+        newSortDesc = _getNewSortOrder.newSortDesc,
+        newOrder = _getNewSortOrder.newOrder;
       if (onSort) {
         onSort(key, newOrder);
       }
-
       instance.toggleSortBy(key, newSortDesc, false);
     };
-
     var sortableColumns = visibleColumns.map(function (column) {
       var icon = function icon(col, props) {
-        if (col.isSorted) {
+        if (col !== null && col !== void 0 && col.isSorted) {
           switch (col.isSortedDesc) {
             case false:
               return /*#__PURE__*/React.createElement(ArrowUp, _extends({
                 size: 16
-              }, props));
-
+              }, props, {
+                className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
+              }));
             case true:
               return /*#__PURE__*/React.createElement(ArrowDown, _extends({
                 size: 16
-              }, props));
-
+              }, props, {
+                className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
+              }));
             default:
               return /*#__PURE__*/React.createElement(ArrowsVertical, _extends({
                 size: 16
-              }, props));
+              }, props, {
+                className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
+              }));
           }
         }
-
         return /*#__PURE__*/React.createElement(ArrowsVertical, _extends({
           size: 16
-        }, props));
+        }, props, {
+          className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
+        }));
       };
-
       var Header = function Header(headerProp) {
+        var _cx;
         return column.disableSortBy === true ? column.Header : /*#__PURE__*/React.createElement(Button, {
           onClick: function onClick() {
-            return onSortClick(headerProp.column);
+            return onSortClick(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
           },
           kind: "ghost",
           renderIcon: function renderIcon(props) {
-            return icon(headerProp.column, props);
-          }
+            return icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props);
+          },
+          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), _defineProperty(_cx, "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false), _cx))
         }, column.Header);
       };
-
       return _objectSpread(_objectSpread({}, column), {}, {
-        Header: Header
+        Header: Header,
+        minWidth: column.disableSortBy === true ? 0 : 90
       });
     });
-    return _toConsumableArray(sortableColumns);
+    return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);
   };
-
   var sortInstanceProps = function sortInstanceProps(instance) {
     var onSort = instance.onSort;
     Object.assign(instance, {
@@ -94,28 +94,22 @@ var useSortableColumns = function useSortableColumns(hooks) {
       isTableSortable: true
     });
   };
-
   var getNewSortOrder = function getNewSortOrder(sortOrder) {
     var order = {
       newSortDesc: undefined,
       newOrder: ordering.NONE
     };
-
     if (sortOrder === false) {
       order.newOrder = ordering.DESC;
       order.newSortDesc = true;
     }
-
     if (sortOrder === undefined) {
       order.newOrder = ordering.ASC;
       order.newSortDesc = false;
     }
-
     return order;
   };
-
   hooks.visibleColumns.push(sortableVisibleColumns);
   hooks.useInstance.push(sortInstanceProps);
 };
-
 export default useSortableColumns;