@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/DataTable/TableToolbarMenu.js

@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var index = require('../OverflowMenu/index.js');
+var iconsReact = require('@carbon/icons-react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["className", "renderIcon", "iconDescription", "children"];
+
+var TableToolbarMenu = function TableToolbarMenu(_ref) {
+  var className = _ref.className,
+      renderIcon = _ref.renderIcon,
+      iconDescription = _ref.iconDescription,
+      children = _ref.children,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var toolbarActionClasses = cx__default["default"](className, "".concat(prefix, "--toolbar-action ").concat(prefix, "--overflow-menu"));
+  return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({
+    ariaLabel: iconDescription,
+    renderIcon: renderIcon,
+    className: toolbarActionClasses,
+    title: iconDescription,
+    iconDescription: iconDescription,
+    flipped: true
+  }, rest), children);
+};
+
+TableToolbarMenu.defaultProps = {
+  renderIcon: iconsReact.Settings,
+  iconDescription: 'Settings'
+};
+TableToolbarMenu.propTypes = {
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Provide an optional class name for the toolbar menu
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * The description of the menu icon.
+   */
+  iconDescription: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Optional prop to allow overriding the default menu icon
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
+};
+var TableToolbarMenu$1 = TableToolbarMenu;
+
+exports["default"] = TableToolbarMenu$1;

package/lib/components/DataTable/TableToolbarSearch.js

@@ -0,0 +1,243 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var index = require('../Search/index.js');
+var instanceId = require('./tools/instanceId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["className", "searchContainerClass", "onChange", "onClear", "translateWithId", "placeholder", "labelText", "expanded", "defaultExpanded", "defaultValue", "disabled", "onExpand", "persistent", "id", "onBlur", "onFocus"];
+var getInstanceId = instanceId["default"]();
+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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var _useRef = React.useRef(expandedProp !== undefined),
+      controlled = _useRef.current;
+
+  var _useState = React.useState(defaultExpanded || defaultValue),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      expandedState = _useState2[0],
+      setExpandedState = _useState2[1];
+
+  var expanded = controlled ? expandedProp : expandedState;
+
+  var _useState3 = React.useState(defaultValue || ''),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+
+  var uniqueId = React.useMemo(getInstanceId, []);
+
+  var _useState5 = React.useState(null),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      focusTarget = _useState6[0],
+      setFocusTarget = _useState6[1];
+
+  var prefix = usePrefix.usePrefix();
+  React.useEffect(function () {
+    if (focusTarget) {
+      focusTarget.current.querySelector('input').focus();
+      setFocusTarget(null);
+    }
+  }, [focusTarget]);
+  React.useEffect(function () {
+    if (defaultValue) {
+      onChangeProp('', defaultValue);
+    }
+  }, //eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var searchClasses = cx__default["default"](className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, searchContainerClass, searchContainerClass), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-active"), expanded), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-expandable"), !persistent), _rollupPluginBabelHelpers.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["default"].createElement(index["default"], _rollupPluginBabelHelpers["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__default["default"].node,
+
+  /**
+   * Provide an optional class name for the search container
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specifies if the search should initially render in an expanded state
+   */
+  defaultExpanded: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an optional default value for the Search component
+   */
+  defaultValue: PropTypes__default["default"].string,
+
+  /**
+   * Specifies if the search should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specifies if the search should expand
+   */
+  expanded: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an optional id for the search container
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Provide an optional label text for the Search component icon
+   */
+  labelText: PropTypes__default["default"].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__default["default"].func,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional hook that is called each time the input is expanded
+   */
+  onExpand: PropTypes__default["default"].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__default["default"].func,
+
+  /**
+   * Whether the search should be allowed to expand
+   */
+  persistent: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an optional placeholder text for the Search component
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Provide an optional className for the overall container of the Search
+   */
+  searchContainerClass: PropTypes__default["default"].string,
+
+  /**
+   * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+   */
+  tabIndex: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
+
+  /**
+   * Provide custom text for the component for each translation id
+   */
+  translateWithId: PropTypes__default["default"].func.isRequired
+};
+TableToolbarSearch.defaultProps = {
+  tabIndex: '0',
+  translateWithId: translateWithId,
+  persistent: false,
+  onClear: function onClear() {}
+};
+var TableToolbarSearch$1 = TableToolbarSearch;
+
+exports["default"] = TableToolbarSearch$1;

package/lib/components/DataTable/index.js

@@ -0,0 +1,76 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DataTable$1 = require('./DataTable.js');
+var Table = require('./Table.js');
+var TableActionList = require('./TableActionList.js');
+var TableBatchAction = require('./TableBatchAction.js');
+var TableBatchActions = require('./TableBatchActions.js');
+var TableBody = require('./TableBody.js');
+var TableCell = require('./TableCell.js');
+var TableContainer = require('./TableContainer.js');
+var TableExpandHeader = require('./TableExpandHeader.js');
+var TableExpandRow = require('./TableExpandRow.js');
+var TableExpandedRow = require('./TableExpandedRow.js');
+var TableHead = require('./TableHead.js');
+var TableHeader = require('./TableHeader.js');
+var TableRow = require('./TableRow.js');
+var TableSelectAll = require('./TableSelectAll.js');
+var TableSelectRow = require('./TableSelectRow.js');
+var TableToolbar = require('./TableToolbar.js');
+var TableToolbarAction = require('./TableToolbarAction.js');
+var TableToolbarContent = require('./TableToolbarContent.js');
+var TableToolbarSearch = require('./TableToolbarSearch.js');
+var TableToolbarMenu = require('./TableToolbarMenu.js');
+
+DataTable$1["default"].Table = Table["default"];
+DataTable$1["default"].TableActionList = TableActionList["default"];
+DataTable$1["default"].TableBatchAction = TableBatchAction["default"];
+DataTable$1["default"].TableBatchActions = TableBatchActions["default"];
+DataTable$1["default"].TableBody = TableBody["default"];
+DataTable$1["default"].TableCell = TableCell["default"];
+DataTable$1["default"].TableContainer = TableContainer["default"];
+DataTable$1["default"].TableExpandHeader = TableExpandHeader["default"];
+DataTable$1["default"].TableExpandRow = TableExpandRow["default"];
+DataTable$1["default"].TableExpandedRow = TableExpandedRow["default"];
+DataTable$1["default"].TableHead = TableHead["default"];
+DataTable$1["default"].TableHeader = TableHeader["default"];
+DataTable$1["default"].TableRow = TableRow["default"];
+DataTable$1["default"].TableSelectAll = TableSelectAll["default"];
+DataTable$1["default"].TableSelectRow = TableSelectRow["default"];
+DataTable$1["default"].TableToolbar = TableToolbar["default"];
+DataTable$1["default"].TableToolbarAction = TableToolbarAction["default"];
+DataTable$1["default"].TableToolbarContent = TableToolbarContent["default"];
+DataTable$1["default"].TableToolbarSearch = TableToolbarSearch["default"];
+DataTable$1["default"].TableToolbarMenu = TableToolbarMenu["default"];
+var DataTable = DataTable$1["default"];
+
+exports.Table = Table["default"];
+exports.TableActionList = TableActionList["default"];
+exports.TableBatchAction = TableBatchAction["default"];
+exports.TableBatchActions = TableBatchActions["default"];
+exports.TableBody = TableBody["default"];
+exports.TableCell = TableCell["default"];
+exports.TableContainer = TableContainer["default"];
+exports.TableExpandHeader = TableExpandHeader["default"];
+exports.TableExpandRow = TableExpandRow["default"];
+exports.TableExpandedRow = TableExpandedRow["default"];
+exports.TableHead = TableHead["default"];
+exports.TableHeader = TableHeader["default"];
+exports.TableRow = TableRow["default"];
+exports.TableSelectAll = TableSelectAll["default"];
+exports.TableSelectRow = TableSelectRow["default"];
+exports.TableToolbar = TableToolbar["default"];
+exports.TableToolbarAction = TableToolbarAction["default"];
+exports.TableToolbarContent = TableToolbarContent["default"];
+exports.TableToolbarSearch = TableToolbarSearch["default"];
+exports.TableToolbarMenu = TableToolbarMenu["default"];
+exports["default"] = DataTable;

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

@@ -0,0 +1,56 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sorting = require('./sorting.js');
+var normalize = require('../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["default"](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 || sorting.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 = sorting.getSortedState(props, state, prevState.sortHeaderKey, prevState.sortDirection),
+        _rowIds = _getSortedState.rowIds;
+
+    state.rowIds = _rowIds;
+  }
+
+  return state;
+};
+
+var getDerivedStateFromProps$1 = getDerivedStateFromProps;
+
+exports["default"] = getDerivedStateFromProps$1;

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

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 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'
+};
+
+exports.sortStates = sortStates;

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

@@ -0,0 +1,100 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sortStates = require('./sortStates.js');
+var sorting = require('../tools/sorting.js');
+
+// different initialSortState
+
+var initialSortState = sortStates.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.sortStates.ASC;
+    }
+
+    if (prevState === 'ASC') {
+      return sortStates.sortStates.DESC;
+    }
+
+    return sortStates.sortStates.NONE;
+  } // Otherwise, we have selected a new header and need to start off by sorting
+  // in descending order by default
+
+
+  return sortStates.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.sortStates.NONE ? sorting.sortRows({
+    rowIds: rowIds,
+    cellsById: cellsById,
+    sortDirection: sortDirection,
+    key: key,
+    locale: locale,
+    sortRow: sortRow
+  }) : initialRowOrder;
+  return {
+    sortHeaderKey: key,
+    sortDirection: sortDirection,
+    rowIds: nextRowIds
+  };
+};
+
+exports.sortStates = sortStates.sortStates;
+exports.getNextSortDirection = getNextSortDirection;
+exports.getNextSortState = getNextSortState;
+exports.getSortedState = getSortedState;
+exports.initialSortState = initialSortState;

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

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 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);
+};
+
+exports.getCellId = getCellId;

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

@@ -0,0 +1,47 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rowsById[id]), {}, {
+      cells: rowsById[id].cells.map(function (cellId) {
+        return cellsById[cellId];
+      })
+    });
+  });
+};
+
+var denormalize$1 = denormalize;
+
+exports["default"] = denormalize$1;