@carbon/ibm-products 1.11.2 → 1.14.0

package/lib/components/Datagrid/useParentDimensions.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+/*
+ * 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 useParentDimensions = function useParentDimensions(hooks) {
+  var rootRef = (0, _react.useRef)();
+  var headRef = (0, _react.useRef)();
+  var innerListRef = (0, _react.useRef)();
+  var listRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      tableHeight = _useState2[0],
+      setTableHeight = _useState2[1];
+
+  var useInstance = function useInstance(instance) {
+    var DatagridActions = instance.DatagridActions,
+        DatagridBatchActions = instance.DatagridBatchActions,
+        totalColumnsWidth = instance.totalColumnsWidth,
+        DatagridPagination = instance.DatagridPagination;
+
+    var handleResize = function handleResize() {
+      var parent = rootRef && rootRef.current && rootRef.current.parentElement;
+
+      if (!parent) {
+        return;
+      }
+
+      var parentHeight = parent.clientHeight;
+      var parentWidth = parent.clientWidth;
+      var headHeight = headRef && headRef.current && headRef.current.clientHeight;
+      var parentStyles = window.getComputedStyle(parent);
+      var parentMarginBottom = parseFloat(parentStyles.getPropertyValue('margin-bottom'));
+      var parentPaddingBottom = parseFloat(parentStyles.getPropertyValue('padding-bottom'));
+      var parentMarginTop = parseFloat(parentStyles.getPropertyValue('margin-top'));
+      var parentPaddingTop = parseFloat(parentStyles.getPropertyValue('padding-top'));
+      var datagridActionsHeight = DatagridActions || DatagridBatchActions ? 48 : 0;
+      var datagridPaginationHeight = DatagridPagination ? 48 : 0;
+      var hasHorizontalScrollbar = parentWidth < totalColumnsWidth;
+      var horizontalScrollbarHolder = hasHorizontalScrollbar ? 16 : 0;
+      var newHeight = parentHeight - headHeight - parentMarginBottom - parentPaddingBottom - parentMarginTop - parentPaddingTop - datagridActionsHeight - datagridPaginationHeight - horizontalScrollbarHolder;
+      setTableHeight(newHeight);
+    };
+
+    Object.assign(instance, {
+      tableHeight: tableHeight,
+      rootRef: rootRef,
+      headRef: headRef,
+      innerListRef: innerListRef,
+      handleResize: handleResize,
+      listRef: listRef
+    });
+  };
+
+  hooks.useInstance.push(useInstance);
+};
+
+var _default = useParentDimensions;
+exports.default = _default;

package/lib/components/Datagrid/useResizeTable.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+/*
+ * 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 useResizeTable = function useResizeTable(hooks) {
+  var useInstanceBeforeDimensions = function useInstanceBeforeDimensions(instance) {
+    var rootRef = instance.rootRef,
+        handleResize = instance.handleResize;
+    var parent = rootRef && rootRef.current && rootRef.current.parentElement;
+    (0, _react.useLayoutEffect)(function () {
+      if (!parent) {
+        return function () {};
+      }
+
+      handleResize();
+
+      if (typeof ResizeObserver === 'function') {
+        var resizeObserver = new ResizeObserver(function () {
+          handleResize();
+        });
+        resizeObserver.observe(parent);
+        return function () {
+          resizeObserver.disconnect(parent);
+          resizeObserver = null;
+        };
+      }
+
+      return console.error(' Could not resize table, no support for ResizeObserver');
+    }, [handleResize, parent]);
+  };
+
+  hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
+};
+
+var _default = useResizeTable;
+exports.default = _default;

package/lib/components/Datagrid/useRowExpander.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _iconsReact = require("@carbon/icons-react");
+
+/* eslint-disable react/prop-types */
+
+/*
+ * 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 useRowExpander = function useRowExpander(hooks) {
+  var visibleColumns = function visibleColumns(columns) {
+    var expanderColumn = {
+      id: 'expander',
+      Cell: function Cell(_ref) {
+        var row = _ref.row;
+        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, null));
+      },
+      width: 32,
+      disableResizing: true,
+      disableSortBy: true,
+      Header: ''
+    };
+    return [expanderColumn].concat((0, _toConsumableArray2.default)(columns));
+  };
+
+  hooks.visibleColumns.push(visibleColumns);
+};
+
+var _default = useRowExpander;
+exports.default = _default;

package/lib/components/Datagrid/useRowIsMouseOver.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+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 useRowIsMouseOver = function useRowIsMouseOver(hooks) {
+  var useInstance = function useInstance(instance) {
+    var _useState = (0, _react.useState)(),
+        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+        mouseOverRowIndex = _useState2[0],
+        setMouseOverRowIndex = _useState2[1];
+
+    var onMouseChange = useDebounce(function (datagridState) {
+      var row = datagridState.row;
+      setMouseOverRowIndex(row.index);
+    }, 100);
+
+    var getRowProps = function getRowProps(props, datagridState) {
+      var onMouseOver = function onMouseOver() {
+        return onMouseChange(datagridState);
+      };
+
+      return [props, {
+        onMouseOver: onMouseOver
+      }];
+    };
+
+    var rows = instance.rows;
+    var rowsWithMouseOver = rows.map(function (row) {
+      return _objectSpread(_objectSpread({}, row), {}, {
+        isMouseOver: row.index === mouseOverRowIndex
+      });
+    });
+    Object.assign(instance, {
+      rows: rowsWithMouseOver
+    });
+    hooks.getRowProps.push(getRowProps);
+  };
+
+  hooks.useInstance.push(useInstance);
+};
+
+var useDebounce = function useDebounce(fn, wait) {
+  return (// eslint-disable-next-line react-hooks/exhaustive-deps
+    (0, _react.useCallback)((0, _debounce.default)(fn, wait), [])
+  );
+};
+
+var _default = useRowIsMouseOver;
+exports.default = _default;

package/lib/components/Datagrid/useRowRenderer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _DatagridRow = _interopRequireDefault(require("./Datagrid/DatagridRow"));
+
+/*
+ * 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 useRowRenderer = function useRowRenderer(hooks) {
+  var useInstance = function useInstance(instance) {
+    var rows = instance.rows;
+
+    var addRowRenderer = function addRowRenderer(row) {
+      return Object.assign(row, {
+        RowRenderer: _DatagridRow.default,
+        subRows: (row.subRows || []).map(addRowRenderer)
+      });
+    };
+
+    var rowsWithRenderer = rows.map(addRowRenderer);
+    Object.assign(instance, {
+      rows: rowsWithRenderer
+    });
+  };
+
+  hooks.useInstance.push(useInstance);
+};
+
+var _default = useRowRenderer;
+exports.default = _default;

package/lib/components/Datagrid/useRowSize.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _RowSize = require("./Datagrid/addons/RowSize");
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020, 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+var useRowSize = function useRowSize(hooks) {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      internalRowSize = _useState2[0],
+      setRowSize = _useState2[1];
+
+  hooks.useInstance.push(function (instance) {
+    var rowSizes = instance.rowSizes,
+        rowSize = instance.rowSize,
+        onRowSizeChange = instance.onRowSizeChange;
+    Object.assign(instance, {
+      rowSize: internalRowSize || rowSize,
+      rowSizeDropdownProps: {
+        rowSizes: rowSizes,
+        selectedOption: internalRowSize || rowSize,
+        onChange: function onChange(value) {
+          setRowSize(value);
+
+          if (typeof onRowSizeChange === 'function') {
+            onRowSizeChange(value);
+          }
+        }
+      },
+      RowSizeDropdown: _RowSize.RowSizeDropdown
+    });
+  });
+
+  var getTableProps = function getTableProps(props, _ref) {
+    var instance = _ref.instance;
+    var rowSize = instance.rowSize;
+
+    if (!rowSize) {
+      return props;
+    }
+
+    return [props, {
+      size: rowSize
+    }];
+  };
+
+  hooks.getTableProps.push(getTableProps);
+};
+
+var _default = useRowSize;
+exports.default = _default;

package/lib/components/Datagrid/useSelectAllToggle.js

@@ -0,0 +1,88 @@
+"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 _commonColumnIds = require("./common-column-ids");
+
+var _DatagridSelectAllWithToggle = _interopRequireDefault(require("./Datagrid/DatagridSelectAllWithToggle"));
+
+var _settings = require("../../settings");
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+// @flow
+var blockClass = "".concat(_settings.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;
+    var headersWithSelectAllToggle = headers.map(function (header) {
+      if (header.id === _commonColumnIds.selectionColumnId && DatagridPagination) {
+        Object.assign(header, {
+          Header: Header
+        });
+      }
+
+      return header;
+    });
+    Object.assign(instance, {
+      headers: headersWithSelectAllToggle
+    });
+  };
+
+  hooks.useInstance.push(useInstance);
+};
+
+var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
+  hooks.getCellProps.push(function (props, data) {
+    var column = data.cell.column;
+    var DatagridPagination = data.instance.DatagridPagination;
+
+    if (column.id === _commonColumnIds.selectionColumnId && DatagridPagination) {
+      return [props, {
+        className: "".concat(blockClass, "__select-all-toggle-on")
+      }];
+    }
+
+    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;
+  var props = {
+    tableId: tableId,
+    isFetching: isFetching,
+    selectAllToggle: selectAllToggle,
+    getToggleAllPageRowsSelectedProps: getToggleAllPageRowsSelectedProps,
+    getToggleAllRowsSelectedProps: getToggleAllRowsSelectedProps,
+    isAllRowsSelected: isAllRowsSelected
+  };
+  return /*#__PURE__*/_react.default.createElement(_DatagridSelectAllWithToggle.default, props);
+};
+
+var _default = useSelectAllToggle;
+exports.default = _default;

package/lib/components/Datagrid/useSelectRows.js

@@ -0,0 +1,119 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
+
+var _commonColumnIds = require("./common-column-ids");
+
+var _settings = require("../../settings");
+
+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) { (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 useSelectRows = function useSelectRows(hooks) {
+  useHighlightSelection(hooks);
+
+  var useInstance = function useInstance(instance) {
+    var rows = instance.rows;
+    var rowsWithSelect = rows.map(function (row) {
+      return _objectSpread(_objectSpread({}, row), {}, {
+        isSelectable: true
+      });
+    });
+    Object.assign(instance, {
+      rows: rowsWithSelect
+    });
+  };
+
+  hooks.useInstance.push(useInstance);
+  hooks.visibleColumns.push(function (columns) {
+    return [{
+      id: _commonColumnIds.selectionColumnId,
+      Header: function Header(gridState) {
+        return /*#__PURE__*/_react.default.createElement(_DatagridSelectAll.SelectAll, gridState);
+      },
+      Cell: function Cell(gridState) {
+        return /*#__PURE__*/_react.default.createElement(SelectRow, gridState);
+      }
+    }].concat((0, _toConsumableArray2.default)(columns));
+  });
+};
+
+var useHighlightSelection = function useHighlightSelection(hooks) {
+  var getRowProps = function getRowProps(props, _ref) {
+    var row = _ref.row;
+    return [props, {
+      className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? 'bx--data-table--selected' : '')
+    }];
+  };
+
+  hooks.getRowProps.push(getRowProps);
+};
+
+var SelectRow = function SelectRow(datagridState) {
+  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;
+  var selectDisabled = isFetching || row.getRowProps().selectDisabled;
+
+  var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
+      onChange = _row$getToggleRowSele.onChange,
+      selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele, _excluded);
+
+  var cellProps = cell.getCellProps();
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
+    radio: radio,
+    onSelect: function onSelect(e) {
+      e.stopPropagation(); // avoid triggering onRowClick
+
+      if (radio) {
+        toggleAllRowsSelected(false);
+
+        if (onRadioSelect) {
+          onRadioSelect(row);
+        }
+      }
+
+      onChange(e);
+    },
+    id: "".concat(tableId, "-").concat(row.index),
+    name: "".concat(tableId, "-").concat(row.index, "-name"),
+    className: (0, _classnames.default)("".concat(blockClass, "__checkbox-cell"), cellProps.className),
+    ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
+    ,
+    disabled: selectDisabled
+  }));
+};
+
+var _default = useSelectRows;
+exports.default = _default;

package/lib/components/Datagrid/useSkeletonRows.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+/*
+ * 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 useSkeletons = function useSkeletons(hooks) {
+  var useInstance = function useInstance(instance) {
+    var isFetching = instance.isFetching,
+        rows = instance.rows;
+
+    var skeletonRow = function skeletonRow(id) {
+      return {
+        isSkeleton: true,
+        values: 'skeleton',
+        id: id
+      };
+    };
+
+    var rowsWithSkeletons = [].concat((0, _toConsumableArray2.default)(rows), [skeletonRow('skeleton-row-1'), skeletonRow('skeleton-row-2'), skeletonRow('skeleton-row-3')]);
+    Object.assign(instance, {
+      rows: isFetching ? rowsWithSkeletons : rows
+    });
+  };
+
+  hooks.useInstance.push(useInstance);
+};
+
+var _default = useSkeletons;
+exports.default = _default;