@carbon/react 0.17.0 → 1.0.1

package/es/components/DataTable/TableToolbarSearch.js

@@ -0,0 +1,233 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import Search from '../Search/index.js';
+import setupGetInstanceId from './tools/instanceId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "searchContainerClass", "onChange", "onClear", "translateWithId", "placeholder", "labelText", "expanded", "defaultExpanded", "defaultValue", "disabled", "onExpand", "persistent", "id", "onBlur", "onFocus"];
+var getInstanceId = setupGetInstanceId();
+var translationKeys = {
+  'carbon.table.toolbar.search.label': 'Filter table',
+  'carbon.table.toolbar.search.placeholder': 'Filter table'
+};
+
+var translateWithId = function translateWithId(id) {
+  return translationKeys[id];
+};
+
+var TableToolbarSearch = function TableToolbarSearch(_ref) {
+  var _cx;
+
+  var className = _ref.className,
+      searchContainerClass = _ref.searchContainerClass,
+      onChangeProp = _ref.onChange,
+      onClear = _ref.onClear,
+      t = _ref.translateWithId,
+      placeholder = _ref.placeholder,
+      labelText = _ref.labelText,
+      expandedProp = _ref.expanded,
+      defaultExpanded = _ref.defaultExpanded,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      onExpand = _ref.onExpand,
+      persistent = _ref.persistent,
+      id = _ref.id,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useRef = useRef(expandedProp !== undefined),
+      controlled = _useRef.current;
+
+  var _useState = useState(defaultExpanded || defaultValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      expandedState = _useState2[0],
+      setExpandedState = _useState2[1];
+
+  var expanded = controlled ? expandedProp : expandedState;
+
+  var _useState3 = useState(defaultValue || ''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+
+  var uniqueId = useMemo(getInstanceId, []);
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focusTarget = _useState6[0],
+      setFocusTarget = _useState6[1];
+
+  var prefix = usePrefix();
+  useEffect(function () {
+    if (focusTarget) {
+      focusTarget.current.querySelector('input').focus();
+      setFocusTarget(null);
+    }
+  }, [focusTarget]);
+  useEffect(function () {
+    if (defaultValue) {
+      onChangeProp('', defaultValue);
+    }
+  }, //eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var searchClasses = cx(className, (_cx = {}, _defineProperty(_cx, searchContainerClass, searchContainerClass), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-active"), expanded), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-expandable"), !persistent), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-persistent"), persistent), _cx));
+
+  var handleExpand = function handleExpand(event) {
+    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
+
+    if (!disabled) {
+      if (!controlled && !persistent) {
+        setExpandedState(value);
+      }
+
+      if (onExpand) {
+        onExpand(event, value);
+      }
+    }
+  };
+
+  var onChange = function onChange(e) {
+    setValue(e.target.value);
+
+    if (onChangeProp) {
+      onChangeProp(e);
+    }
+  };
+
+  var handleOnFocus = function handleOnFocus(event) {
+    return handleExpand(event, true);
+  };
+
+  var handleOnBlur = function handleOnBlur(event) {
+    return !value && handleExpand(event, false);
+  };
+
+  return /*#__PURE__*/React__default.createElement(Search, _extends({
+    disabled: disabled,
+    className: searchClasses,
+    value: value,
+    id: typeof id !== 'undefined' ? id : uniqueId.toString(),
+    labelText: labelText || t('carbon.table.toolbar.search.label'),
+    placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
+    onChange: onChange,
+    onClear: onClear,
+    onFocus: onFocus ? function (event) {
+      return onFocus(event, handleExpand);
+    } : handleOnFocus,
+    onBlur: onBlur ? function (event) {
+      return onBlur(event, handleExpand);
+    } : handleOnBlur
+  }, rest));
+};
+
+TableToolbarSearch.propTypes = {
+  children: PropTypes.node,
+
+  /**
+   * Provide an optional class name for the search container
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specifies if the search should initially render in an expanded state
+   */
+  defaultExpanded: PropTypes.bool,
+
+  /**
+   * Provide an optional default value for the Search component
+   */
+  defaultValue: PropTypes.string,
+
+  /**
+   * Specifies if the search should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specifies if the search should expand
+   */
+  expanded: PropTypes.bool,
+
+  /**
+   * Provide an optional id for the search container
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide an optional label text for the Search component icon
+   */
+  labelText: PropTypes.string,
+
+  /**
+   * Provide an optional function to be called when the search input loses focus, this will be
+   * passed the event as the first parameter and a function to handle the expanding of the search
+   * input as the second
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes.func,
+
+  /**
+   * Provide an optional hook that is called each time the input is expanded
+   */
+  onExpand: PropTypes.func,
+
+  /**
+   * Provide an optional function to be called when the search input gains focus, this will be
+   * passed the event as the first parameter and a function to handle the expanding of the search
+   * input as the second.
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * Whether the search should be allowed to expand
+   */
+  persistent: PropTypes.bool,
+
+  /**
+   * Provide an optional placeholder text for the Search component
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Provide an optional className for the overall container of the Search
+   */
+  searchContainerClass: PropTypes.string,
+
+  /**
+   * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   * Provide custom text for the component for each translation id
+   */
+  translateWithId: PropTypes.func.isRequired
+};
+TableToolbarSearch.defaultProps = {
+  tabIndex: '0',
+  translateWithId: translateWithId,
+  persistent: false,
+  onClear: function onClear() {}
+};
+var TableToolbarSearch$1 = TableToolbarSearch;
+
+export { TableToolbarSearch$1 as default };

package/es/components/DataTable/index.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 DataTable$1 from './DataTable.js';
+import Table from './Table.js';
+export { default as Table } from './Table.js';
+import TableActionList from './TableActionList.js';
+export { default as TableActionList } from './TableActionList.js';
+import TableBatchAction from './TableBatchAction.js';
+export { default as TableBatchAction } from './TableBatchAction.js';
+import TableBatchActions from './TableBatchActions.js';
+export { default as TableBatchActions } from './TableBatchActions.js';
+import TableBody from './TableBody.js';
+export { default as TableBody } from './TableBody.js';
+import TableCell from './TableCell.js';
+export { default as TableCell } from './TableCell.js';
+import TableContainer from './TableContainer.js';
+export { default as TableContainer } from './TableContainer.js';
+import TableExpandHeader from './TableExpandHeader.js';
+export { default as TableExpandHeader } from './TableExpandHeader.js';
+import TableExpandRow from './TableExpandRow.js';
+export { default as TableExpandRow } from './TableExpandRow.js';
+import TableExpandedRow from './TableExpandedRow.js';
+export { default as TableExpandedRow } from './TableExpandedRow.js';
+import TableHead from './TableHead.js';
+export { default as TableHead } from './TableHead.js';
+import TableHeader from './TableHeader.js';
+export { default as TableHeader } from './TableHeader.js';
+import TableRow from './TableRow.js';
+export { default as TableRow } from './TableRow.js';
+import TableSelectAll from './TableSelectAll.js';
+export { default as TableSelectAll } from './TableSelectAll.js';
+import TableSelectRow from './TableSelectRow.js';
+export { default as TableSelectRow } from './TableSelectRow.js';
+import TableToolbar from './TableToolbar.js';
+export { default as TableToolbar } from './TableToolbar.js';
+import TableToolbarAction from './TableToolbarAction.js';
+export { default as TableToolbarAction } from './TableToolbarAction.js';
+import TableToolbarContent from './TableToolbarContent.js';
+export { default as TableToolbarContent } from './TableToolbarContent.js';
+import TableToolbarSearch from './TableToolbarSearch.js';
+export { default as TableToolbarSearch } from './TableToolbarSearch.js';
+import TableToolbarMenu from './TableToolbarMenu.js';
+export { default as TableToolbarMenu } from './TableToolbarMenu.js';
+
+DataTable$1.Table = Table;
+DataTable$1.TableActionList = TableActionList;
+DataTable$1.TableBatchAction = TableBatchAction;
+DataTable$1.TableBatchActions = TableBatchActions;
+DataTable$1.TableBody = TableBody;
+DataTable$1.TableCell = TableCell;
+DataTable$1.TableContainer = TableContainer;
+DataTable$1.TableExpandHeader = TableExpandHeader;
+DataTable$1.TableExpandRow = TableExpandRow;
+DataTable$1.TableExpandedRow = TableExpandedRow;
+DataTable$1.TableHead = TableHead;
+DataTable$1.TableHeader = TableHeader;
+DataTable$1.TableRow = TableRow;
+DataTable$1.TableSelectAll = TableSelectAll;
+DataTable$1.TableSelectRow = TableSelectRow;
+DataTable$1.TableToolbar = TableToolbar;
+DataTable$1.TableToolbarAction = TableToolbarAction;
+DataTable$1.TableToolbarContent = TableToolbarContent;
+DataTable$1.TableToolbarSearch = TableToolbarSearch;
+DataTable$1.TableToolbarMenu = TableToolbarMenu;
+var DataTable = DataTable$1;
+
+export { DataTable as default };

package/es/components/DataTable/state/getDerivedStateFromProps.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { initialSortState, getSortedState } from './sorting.js';
+import normalize from '../tools/normalize.js';
+
+/**
+ * Helper to derive the next state from the given props and the
+ * prevState. Potential future-facing API hook for React v17.
+ *
+ * Currently, it's being used as a way to normalize the incoming data that we
+ * are receiving for rows
+ */
+
+var getDerivedStateFromProps = function getDerivedStateFromProps(props, prevState) {
+  var _normalize = normalize(props.rows, props.headers, prevState),
+      rowIds = _normalize.rowIds,
+      rowsById = _normalize.rowsById,
+      cellsById = _normalize.cellsById;
+
+  var state = {
+    rowIds: rowIds,
+    rowsById: rowsById,
+    cellsById: cellsById,
+    sortDirection: prevState.sortDirection || initialSortState,
+    sortHeaderKey: prevState.sortHeaderKey || null,
+    // Copy over rowIds so the reference doesn't mutate the stored
+    // `initialRowOrder`
+    initialRowOrder: rowIds.slice(),
+    filterInputValue: prevState.filterInputValue || null,
+    // Optional state field to indicate whether a consumer should show a
+    // batch actions menu
+    shouldShowBatchActions: prevState.shouldShowBatchActions || false
+  };
+
+  if (prevState.sortDirection && prevState.sortHeaderKey) {
+    var _getSortedState = getSortedState(props, state, prevState.sortHeaderKey, prevState.sortDirection),
+        _rowIds = _getSortedState.rowIds;
+
+    state.rowIds = _rowIds;
+  }
+
+  return state;
+};
+
+var getDerivedStateFromProps$1 = getDerivedStateFromProps;
+
+export { getDerivedStateFromProps$1 as default };

package/es/components/DataTable/state/sortStates.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * We currently support the following sorting states for DataTable headers,
+ * namely: `NONE` for no sorting being applied, and then `DESC` and `ASC` for
+ * the corresponding direction of the sorting order.
+ */
+var sortStates = {
+  NONE: 'NONE',
+  DESC: 'DESC',
+  ASC: 'ASC'
+};
+
+export { sortStates };

package/es/components/DataTable/state/sorting.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { sortStates } from './sortStates.js';
+export { sortStates } from './sortStates.js';
+import { sortRows } from '../tools/sorting.js';
+
+// different initialSortState
+
+var initialSortState = sortStates.NONE;
+/**
+ * Utility used to get the next sort state given the following pieces of
+ * information:
+ *
+ * @param {string} prevHeader the value of the previous header
+ * @param {string} header the value of the currently selected header
+ * @param {string} prevState the previous sort state of the table
+ * @returns {string}
+ */
+
+var getNextSortDirection = function getNextSortDirection(prevHeader, header, prevState) {
+  // If the previous header is equivalent to the current header, we know that we
+  // have to derive the next sort state from the previous sort state
+  if (prevHeader === header) {
+    // When transitioning, we know that the sequence of states is as follows:
+    // NONE -> ASC -> DESC -> NONE
+    if (prevState === 'NONE') {
+      return sortStates.ASC;
+    }
+
+    if (prevState === 'ASC') {
+      return sortStates.DESC;
+    }
+
+    return sortStates.NONE;
+  } // Otherwise, we have selected a new header and need to start off by sorting
+  // in descending order by default
+
+
+  return sortStates.ASC;
+};
+var getNextSortState = function getNextSortState(props, state, _ref) {
+  var key = _ref.key;
+  var sortDirection = state.sortDirection,
+      sortHeaderKey = state.sortHeaderKey;
+  var nextSortDirection = getNextSortDirection(key, sortHeaderKey, sortDirection);
+  return getSortedState(props, state, key, nextSortDirection);
+};
+/**
+ * Derive the set of sorted state fields from props and state for the given
+ * header key and sortDirection
+ *
+ * @param {object} props
+ * @param {string} props.locale The current locale
+ * @param {Function} props.sortRows Method to handle sorting a collection of
+ * rows
+ * @param {object} state
+ * @param {Array<string>} state.rowIds Array of row ids
+ * @param {object} state.cellsById Lookup object for cells by id
+ * @param {Array<string>} state.initialRowOrder Initial row order for the
+ * current set of rows
+ * @param {string} key The key for the given header we are serving the
+ * sorted state for
+ * @param {string} sortDirection The sortState that we want to order by
+ * @returns {object}
+ */
+
+var getSortedState = function getSortedState(props, state, key, sortDirection) {
+  var rowIds = state.rowIds,
+      cellsById = state.cellsById,
+      initialRowOrder = state.initialRowOrder;
+  var locale = props.locale,
+      sortRow = props.sortRow;
+  var nextRowIds = sortDirection !== sortStates.NONE ? sortRows({
+    rowIds: rowIds,
+    cellsById: cellsById,
+    sortDirection: sortDirection,
+    key: key,
+    locale: locale,
+    sortRow: sortRow
+  }) : initialRowOrder;
+  return {
+    sortHeaderKey: key,
+    sortDirection: sortDirection,
+    rowIds: nextRowIds
+  };
+};
+
+export { getNextSortDirection, getNextSortState, getSortedState, initialSortState };

package/es/components/DataTable/tools/cells.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Generic helper used to consolidate all call sites for getting a cell id into
+ * one method. The strategy currently is that a "cellId" is just the combination
+ * of the row id and the header key used to access this field in a row.
+ *
+ * @param {string} rowId
+ * @param {string} header
+ * @returns {string}
+ */
+var getCellId = function getCellId(rowId, header) {
+  return "".concat(rowId, ":").concat(header);
+};
+
+export { getCellId };

package/es/components/DataTable/tools/denormalize.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Counterpart to `normalize` for a collection of rows. This method unravels the
+ * normalization step that we use to build the given parameters in order to
+ * return a natural interface to working with rows for a consumer.
+ *
+ * The default heuristic here is to map through all the row ids and return the
+ * value of the row for the given id, in addition to adding a `cells` key that
+ * contains the results of mapping over the rows cells and getting individual
+ * cell info.
+ *
+ * @param {Array<string>} rowIds array of row ids in the table
+ * @param {object} rowsById object containing lookups for rows by id
+ * @param {object} cellsById object containing lookups for cells by id
+ */
+var denormalize = function denormalize(rowIds, rowsById, cellsById) {
+  return rowIds.map(function (id) {
+    return _objectSpread2(_objectSpread2({}, rowsById[id]), {}, {
+      cells: rowsById[id].cells.map(function (cellId) {
+        return cellsById[cellId];
+      })
+    });
+  });
+};
+
+var denormalize$1 = denormalize;
+
+export { denormalize$1 as default };

package/es/components/DataTable/tools/filter.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Default implementation of how we filter rows internally. The idea behind this
+ * implementation is to use the given list of row ids and headers to get the
+ * individual cell values for a row. Then, we go through each cell value and see
+ * if any of them includes the given inputValue.
+ *
+ * @param {object} config
+ * @param {Array<string>} config.rowIds array of all the row ids in the table
+ * @param {Array<object>} config.headers
+ * @param {object} config.cellsById object containing a map of cell id to cell
+ * @param {string} config.inputValue the current input value in the Table Search
+ * @param {Function} config.getCellId
+ * @returns {Array<string>} rowIds
+ */
+var defaultFilterRows = function defaultFilterRows(_ref) {
+  var rowIds = _ref.rowIds,
+      headers = _ref.headers,
+      cellsById = _ref.cellsById,
+      inputValue = _ref.inputValue,
+      getCellId = _ref.getCellId;
+  return rowIds.filter(function (rowId) {
+    return headers.some(function (_ref2) {
+      var key = _ref2.key;
+      var id = getCellId(rowId, key);
+
+      if (typeof cellsById[id].value === 'boolean') {
+        return false;
+      }
+
+      return ('' + cellsById[id].value).toLowerCase().includes(inputValue.toLowerCase());
+    });
+  });
+};
+
+export { defaultFilterRows };

package/es/components/DataTable/tools/instanceId.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Generic utility to initialize a method that will return a unique instance id
+ * for a component.
+ */
+var setupGetInstanceId = function setupGetInstanceId() {
+  var instanceId = 0;
+  return function getInstanceId() {
+    return ++instanceId;
+  };
+};
+
+var setupGetInstanceId$1 = setupGetInstanceId;
+
+export { setupGetInstanceId$1 as default };

package/es/components/DataTable/tools/normalize.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { getCellId } from './cells.js';
+
+/**
+ * Normalize a collection of rows with the given headers.
+ *
+ * @param {Array<object>} rows
+ * @param {Array<object>} headers
+ * @returns {object}
+ */
+
+var normalize = function normalize(rows, headers) {
+  var prevState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var prevRowsByIds = prevState.rowsById;
+  var rowIds = new Array(rows.length);
+  var rowsById = {};
+  var cellsById = {};
+  rows.forEach(function (row, i) {
+    rowIds[i] = row.id; // Initialize the row info and state values, namely for selection and
+    // expansion
+
+    var id = row.id,
+        _row$isSelected = row.isSelected,
+        isSelected = _row$isSelected === void 0 ? false : _row$isSelected,
+        _row$isExpanded = row.isExpanded,
+        isExpanded = _row$isExpanded === void 0 ? false : _row$isExpanded,
+        _row$disabled = row.disabled,
+        disabled = _row$disabled === void 0 ? false : _row$disabled;
+    rowsById[id] = {
+      id: id,
+      isSelected: isSelected,
+      isExpanded: isExpanded,
+      disabled: disabled,
+      cells: new Array(headers.length)
+    }; // If we have a previous state, and the row existed in that previous state,
+    // then we'll set the state values of the row to the previous state values.
+
+    if (prevRowsByIds && prevRowsByIds[row.id] !== undefined) {
+      rowsById[row.id].isSelected = prevRowsByIds[row.id].isSelected;
+      rowsById[row.id].isExpanded = prevRowsByIds[row.id].isExpanded;
+    }
+
+    headers.forEach(function (_ref, i) {
+      var key = _ref.key;
+      var id = getCellId(row.id, key); // Initialize the cell info and state values, namely for editing
+
+      cellsById[id] = {
+        id: id,
+        value: row[key],
+        isEditable: false,
+        isEditing: false,
+        isValid: true,
+        errors: null,
+        info: {
+          header: key
+        }
+      }; // TODO: When working on inline edits, we'll need to derive the state
+      // values similarly to rows above.
+
+      rowsById[row.id].cells[i] = id;
+    });
+  });
+  return {
+    rowIds: rowIds,
+    rowsById: rowsById,
+    cellsById: cellsById
+  };
+};
+
+var normalize$1 = normalize;
+
+export { normalize$1 as default };