@carbon/ibm-products 1.11.2 → 1.14.0

package/lib/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../../settings");
+
+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) { (0, _defineProperty2.default)(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; }
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid"); // TableBody from carbon is a functional component
+// hence no way to pass the ref to html element without changes in carbon side
+// define html directly here.
+// ref should be passed in thru getTableBodyProps
+
+var DatagridRefBody = function DatagridRefBody(datagridState) {
+  var getTableBodyProps = datagridState.getTableBodyProps,
+      rows = datagridState.rows,
+      prepareRow = datagridState.prepareRow;
+  return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps(), {
+    className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
+  }), rows.map(function (row) {
+    prepareRow(row);
+    return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
+      row: row
+    }));
+  }));
+};
+
+var _default = DatagridRefBody;
+exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _commonColumnIds = require("../common-column-ids");
+
+var _settings = require("../../../settings");
+
+var _excluded = ["children"];
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var TableRow = _carbonComponentsReact.DataTable.TableRow,
+    TableCell = _carbonComponentsReact.DataTable.TableCell; // eslint-disable-next-line react/prop-types
+
+var DatagridRow = function DatagridRow(datagridState) {
+  var row = datagridState.row;
+  return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
+    className: "".concat(blockClass, "__carbon-row")
+  }, row.getRowProps(), {
+    key: row.id
+  }), row.cells.map(function (cell) {
+    var cellProps = cell.getCellProps();
+    var children = cellProps.children,
+        restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
+
+    var content = children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SkeletonText, null));
+
+    if (cell && cell.column && cell.column.id === _commonColumnIds.selectionColumnId) {
+      // directly render component without the wrapping TableCell
+      return cell.render('Cell', {
+        key: cell.column.id
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement(TableCell, (0, _extends2.default)({
+      className: "".concat(blockClass, "__cell")
+    }, restProps, {
+      key: cell.column.id
+    }), content);
+  }));
+};
+
+var _default = DatagridRow;
+exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectAll = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _settings = require("../../../settings");
+
+var _excluded = ["onChange"];
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var SelectAll = function SelectAll(datagridState) {
+  var isFetching = datagridState.isFetching,
+      getToggleAllRowsSelectedProps = datagridState.getToggleAllRowsSelectedProps,
+      getToggleAllPageRowsSelectedProps = datagridState.getToggleAllPageRowsSelectedProps,
+      tableId = datagridState.tableId,
+      hideSelectAll = datagridState.hideSelectAll,
+      DatagridPagination = datagridState.DatagridPagination,
+      radio = datagridState.radio;
+
+  if (hideSelectAll || radio) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__head-hidden-select-all")
+    });
+  }
+
+  var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
+
+  var _getProps = getProps(),
+      onChange = _getProps.onChange,
+      selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__head-select-all ").concat(blockClass, "__checkbox-cell")
+  }, /*#__PURE__*/_react.default.createElement(TableSelectAll, (0, _extends2.default)({}, selectProps, {
+    name: "".concat(tableId, "-select-all-checkbox-name"),
+    onSelect: onChange,
+    disabled: isFetching || selectProps.disabled,
+    id: "".concat(tableId, "-select-all-checkbox-id")
+  })));
+};
+
+exports.SelectAll = SelectAll;
+var TableSelectAll = _carbonComponentsReact.DataTable.TableSelectAll;

package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _InlineCheckbox = _interopRequireDefault(require("carbon-components-react/lib/components/InlineCheckbox"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _settings = require("../../../settings");
+
+var _excluded = ["onChange"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// cspell:words columnheader
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var SELECT_ALL_PAGE_ROWS = 'pageRows';
+var SELECT_ALL_ROWS = 'allRows';
+
+var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
+  var tableId = _ref.tableId,
+      isFetching = _ref.isFetching,
+      isAllRowsSelected = _ref.isAllRowsSelected,
+      selectAllToggle = _ref.selectAllToggle,
+      getToggleAllPageRowsSelectedProps = _ref.getToggleAllPageRowsSelectedProps,
+      getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps,
+      _ref$allPageRowsLabel = _ref.allPageRowsLabel,
+      allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
+      _ref$allRowsLabel = _ref.allRowsLabel,
+      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel;
+
+  var _useState = (0, _react.useState)(SELECT_ALL_PAGE_ROWS),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selectAllMode = _useState2[0],
+      setSelectAllMode = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (onSelectAllRows) {
+      onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
+    }
+  }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
+
+  var _ref2 = selectAllToggle || {},
+      onSelectAllRows = _ref2.onSelectAllRows,
+      labels = _ref2.labels;
+
+  if (labels) {
+    allPageRowsLabel = labels.allPageRows || allPageRowsLabel;
+    allRowsLabel = labels.allRows || allRowsLabel;
+  }
+
+  var getProps = selectAllMode === SELECT_ALL_PAGE_ROWS ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
+
+  var _getProps = getProps(),
+      onChange = _getProps.onChange,
+      selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
+
+  var disabled = isFetching || selectProps.disabled;
+  return /*#__PURE__*/_react.default.createElement("th", {
+    role: "columnheader",
+    scope: "col",
+    className: "".concat(blockClass, "__select-all-toggle-on")
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_InlineCheckbox.default, (0, _extends2.default)({}, selectProps, {
+    name: "".concat(tableId, "-select-all-checkbox-name"),
+    onClick: function onClick(e) {
+      onChange(e);
+    },
+    disabled: disabled,
+    id: "".concat(tableId, "-select-all-checkbox-id")
+  }))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+    renderIcon: _iconsReact.CaretDown16,
+    size: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
+    itemText: allPageRowsLabel,
+    requireTitle: true,
+    disabled: disabled,
+    onClick: function onClick() {
+      setSelectAllMode(SELECT_ALL_PAGE_ROWS); // deselect all rows first
+
+      getToggleAllRowsSelectedProps().onChange({
+        target: {
+          checked: false
+        }
+      }); // select all row on current page
+
+      getToggleAllPageRowsSelectedProps().onChange({
+        target: {
+          checked: true
+        }
+      });
+    }
+  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
+    itemText: allRowsLabel,
+    requireTitle: true,
+    disabled: disabled,
+    onClick: function onClick() {
+      setSelectAllMode(SELECT_ALL_ROWS);
+      getToggleAllRowsSelectedProps().onChange({
+        target: {
+          checked: true
+        }
+      });
+    }
+  })));
+};
+
+SelectAllWithToggle.propTypes = {
+  allPageRowsLabel: _propTypes.default.string,
+  allRowsLabel: _propTypes.default.string,
+  getToggleAllPageRowsSelectedProps: _propTypes.default.func.isRequired,
+  getToggleAllRowsSelectedProps: _propTypes.default.func.isRequired,
+  isAllRowsSelected: _propTypes.default.bool.isRequired,
+  isFetching: _propTypes.default.bool,
+  selectAllToggle: _propTypes.default.object,
+  tableId: _propTypes.default.string.isRequired
+};
+var _default = SelectAllWithToggle;
+exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../../settings");
+
+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) { (0, _defineProperty2.default)(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; }
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var TableBody = _carbonComponentsReact.DataTable.TableBody;
+
+var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
+  var getTableBodyProps = datagridState.getTableBodyProps,
+      rows = datagridState.rows,
+      prepareRow = datagridState.prepareRow;
+  return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+    className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
+  }), rows.map(function (row) {
+    prepareRow(row);
+    return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
+      row: row
+    }));
+  }));
+};
+
+var _default = DatagridSimpleBody;
+exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _settings = require("../../../settings");
+
+/*
+ * 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.
+ */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var TableToolbar = _carbonComponentsReact.DataTable.TableToolbar;
+
+var DatagridToolbar = function DatagridToolbar(datagridState) {
+  var DatagridActions = datagridState.DatagridActions,
+      DatagridBatchActions = datagridState.DatagridBatchActions;
+  return DatagridActions || DatagridBatchActions ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__table-toolbar")
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+};
+
+var _default = DatagridToolbar;
+exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactWindow = require("react-window");
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _settings = require("../../../settings");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var TableBody = _carbonComponentsReact.DataTable.TableBody;
+var rowSizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64,
+  // TODO: deprecate the below values in next major release (v8) on carbon-components-react
+  short: 32,
+  compact: 24,
+  normal: 48,
+  tall: 64
+};
+var defaultRowHeight = rowSizeMap.lg;
+
+var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
+  var getTableBodyProps = datagridState.getTableBodyProps,
+      rows = datagridState.rows,
+      prepareRow = datagridState.prepareRow,
+      onScroll = datagridState.onScroll,
+      innerListRef = datagridState.innerListRef,
+      _datagridState$tableH = datagridState.tableHeight,
+      tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
+      listRef = datagridState.listRef,
+      rowSize = datagridState.rowSize,
+      DatagridPagination = datagridState.DatagridPagination,
+      page = datagridState.page,
+      handleResize = datagridState.handleResize,
+      withOverflowRow = datagridState.withOverflowRow;
+  (0, _react.useEffect)(function () {
+    handleResize();
+  }, [handleResize]);
+  var rowHeight = rowSize && rowSizeMap[rowSize] || defaultRowHeight;
+
+  if (listRef && listRef.current) {
+    listRef.current.resetAfterIndex(0);
+  }
+
+  var visibleRows = DatagridPagination && page || rows;
+  return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+    onScroll: onScroll
+  }), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
+    height: tableHeight,
+    itemCount: visibleRows.length,
+    itemSize: function itemSize(index) {
+      return visibleRows[index].isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight;
+    },
+    estimatedItemSize: rowHeight,
+    onScroll: onScroll,
+    innerRef: innerListRef,
+    ref: listRef,
+    className: "".concat(blockClass, "__virtual-scrollbar")
+  }, function (_ref) {
+    var index = _ref.index,
+        style = _ref.style;
+    var row = visibleRows[index];
+    prepareRow(row);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        overflow: withOverflowRow ? 'visible' : 'hidden'
+      })
+    }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
+      row: row
+    })));
+  }));
+};
+
+var _default = DatagridVirtualBody;
+exports.default = _default;