@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/components/DataTable/TableHeader.js

@@ -0,0 +1,187 @@
+/**
+ * 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 { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { ArrowUp, ArrowsVertical } from '@carbon/icons-react';
+import './state/sorting.js';
+import { useId } from '../../internal/useId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { sortStates } from './state/sortStates.js';
+
+var _excluded = ["className", "children", "colSpan", "isSortable", "isSortHeader", "onClick", "scope", "sortDirection", "translateWithId", "id"];
+
+var _sortDirections;
+var translationKeys = {
+  buttonDescription: 'carbon.table.header.icon.description'
+};
+
+var translateWithId = function translateWithId(key, _ref) {
+  var header = _ref.header,
+      sortDirection = _ref.sortDirection,
+      isSortHeader = _ref.isSortHeader,
+      sortStates = _ref.sortStates;
+
+  if (key === translationKeys.buttonDescription) {
+    if (isSortHeader) {
+      // When transitioning, we know that the sequence of states is as follows:
+      // NONE -> ASC -> DESC -> NONE
+      if (sortDirection === sortStates.NONE) {
+        return "Click to sort rows by ".concat(header, " header in ascending order");
+      }
+
+      if (sortDirection === sortStates.ASC) {
+        return "Click to sort rows by ".concat(header, " header in descending order");
+      }
+
+      return "Click to unsort rows by ".concat(header, " header");
+    }
+
+    return "Click to sort rows by ".concat(header, " header in ascending order");
+  }
+
+  return '';
+};
+
+var sortDirections = (_sortDirections = {}, _defineProperty(_sortDirections, sortStates.NONE, 'none'), _defineProperty(_sortDirections, sortStates.ASC, 'ascending'), _defineProperty(_sortDirections, sortStates.DESC, 'descending'), _sortDirections);
+var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_ref2, ref) {
+  var _cx;
+
+  var headerClassName = _ref2.className,
+      children = _ref2.children,
+      colSpan = _ref2.colSpan,
+      isSortable = _ref2.isSortable,
+      isSortHeader = _ref2.isSortHeader,
+      onClick = _ref2.onClick,
+      scope = _ref2.scope,
+      sortDirection = _ref2.sortDirection,
+      t = _ref2.translateWithId,
+      id = _ref2.id,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var prefix = usePrefix();
+  var uniqueId = useId('table-sort');
+
+  if (!isSortable) {
+    return /*#__PURE__*/React__default.createElement("th", _extends({}, rest, {
+      id: id,
+      className: headerClassName,
+      scope: scope,
+      colSpan: colSpan,
+      ref: ref
+    }), children ? /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--table-header-label")
+    }, children) : null);
+  }
+
+  var className = cx(headerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--table-sort"), true), _defineProperty(_cx, "".concat(prefix, "--table-sort--active"), isSortHeader && sortDirection !== sortStates.NONE), _defineProperty(_cx, "".concat(prefix, "--table-sort--ascending"), isSortHeader && sortDirection === sortStates.DESC), _cx));
+  var ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];
+  var sortDescription = t('carbon.table.header.icon.description', {
+    header: children,
+    sortDirection: sortDirection,
+    isSortHeader: isSortHeader,
+    sortStates: sortStates
+  });
+  return /*#__PURE__*/React__default.createElement("th", {
+    id: id,
+    "aria-sort": ariaSort,
+    className: headerClassName,
+    colSpan: colSpan,
+    ref: ref,
+    scope: scope
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'none'
+    },
+    id: uniqueId
+  }, sortDescription), /*#__PURE__*/React__default.createElement("button", _extends({
+    type: "button",
+    "aria-describedby": uniqueId,
+    className: className,
+    onClick: onClick
+  }, rest), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--table-sort__flex")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--table-header-label")
+  }, children), /*#__PURE__*/React__default.createElement(ArrowUp, {
+    size: 20,
+    className: "".concat(prefix, "--table-sort__icon")
+  }), /*#__PURE__*/React__default.createElement(ArrowsVertical, {
+    size: 20,
+    className: "".concat(prefix, "--table-sort__icon-unsorted")
+  }))));
+});
+TableHeader.propTypes = {
+  /**
+   * Pass in children that will be embedded in the table header label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify `colSpan` as a non-negative integer value to indicate how
+   * many columns the TableHeader cell extends in a table
+   */
+  colSpan: PropTypes.number,
+
+  /**
+   * Supply an id to the th element.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Specify whether this header is the header by which a table is being sorted
+   * by
+   */
+  isSortHeader: PropTypes.bool,
+
+  /**
+   * Specify whether this header is one through which a user can sort the table
+   */
+  isSortable: PropTypes.bool,
+
+  /**
+   * Hook that is invoked when the header is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the scope of this table header. You can find more info about this
+   * attribute at the following URL:
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+   */
+  scope: PropTypes.string.isRequired,
+
+  /**
+   * Specify which direction we are currently sorting by, should be one of DESC,
+   * NONE, or ASC.
+   */
+  sortDirection: PropTypes.oneOf(Object.values(sortStates)),
+
+  /**
+   * Supply a method to translate internal strings with your i18n tool of
+   * choice. Translation keys are available on the `translationKeys` field for
+   * this component.
+   */
+  translateWithId: PropTypes.func
+};
+TableHeader.defaultProps = {
+  isSortable: false,
+  scope: 'col',
+  translateWithId: translateWithId
+};
+TableHeader.translationKeys = Object.values(translationKeys);
+TableHeader.displayName = 'TableHeader';
+var TableHeader$1 = TableHeader;
+
+export { TableHeader$1 as default };

package/es/components/DataTable/TableRow.js

@@ -0,0 +1,41 @@
+/**
+ * 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 { defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import omit from 'lodash.omit';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var TableRow = function TableRow(props) {
+  var prefix = usePrefix(); // Remove unnecessary props if provided to this component, these are
+  // only useful in `TableExpandRow`
+
+  var className = cx(props.className, _defineProperty({}, "".concat(prefix, "--data-table--selected"), props.isSelected));
+
+  var cleanProps = _objectSpread2(_objectSpread2({}, omit(props, ['ariaLabel', 'onExpand', 'isExpanded', 'isSelected'])), {}, {
+    className: className || undefined
+  });
+
+  return /*#__PURE__*/React__default.createElement("tr", cleanProps);
+};
+
+TableRow.propTypes = {
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify if the row is selected
+   */
+  isSelected: PropTypes.bool
+};
+var TableRow$1 = TableRow;
+
+export { TableRow$1 as default };

package/es/components/DataTable/TableSelectAll.js

@@ -0,0 +1,84 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React__default from 'react';
+import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var TableSelectAll = function TableSelectAll(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+      checked = _ref.checked,
+      id = _ref.id,
+      indeterminate = _ref.indeterminate,
+      name = _ref.name,
+      onSelect = _ref.onSelect,
+      disabled = _ref.disabled,
+      className = _ref.className;
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("th", {
+    scope: "col",
+    className: cx("".concat(prefix, "--table-column-checkbox"), className)
+  }, /*#__PURE__*/React__default.createElement(InlineCheckbox, {
+    ariaLabel: ariaLabel,
+    checked: checked,
+    id: id,
+    indeterminate: indeterminate,
+    name: name,
+    onClick: onSelect,
+    disabled: disabled
+  }));
+};
+
+TableSelectAll.propTypes = {
+  /**
+   * Specify the aria label for the underlying input control
+   */
+  ariaLabel: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether all items are selected, or not
+   */
+  checked: PropTypes.bool.isRequired,
+
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the checkbox input should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide an `id` for the underlying input control
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the selection only has a subset of all items
+   */
+  indeterminate: PropTypes.bool,
+
+  /**
+   * Provide a `name` for the underlying input control
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Provide a handler to listen to when a user initiates a selection request
+   */
+  onSelect: PropTypes.func.isRequired
+};
+TableSelectAll.defaultProps = {
+  ariaLabel: 'Select all rows in the table'
+};
+var TableSelectAll$1 = TableSelectAll;
+
+export { TableSelectAll$1 as default };

package/es/components/DataTable/TableSelectRow.js

@@ -0,0 +1,97 @@
+/**
+ * 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 { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
+import RadioButton from '../RadioButton/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var TableSelectRow = function TableSelectRow(_ref) {
+  var _classNames;
+
+  var ariaLabel = _ref.ariaLabel,
+      checked = _ref.checked,
+      id = _ref.id,
+      name = _ref.name,
+      onSelect = _ref.onSelect,
+      onChange = _ref.onChange,
+      disabled = _ref.disabled,
+      radio = _ref.radio,
+      className = _ref.className;
+  var prefix = usePrefix();
+  var selectionInputProps = {
+    id: id,
+    name: name,
+    onClick: onSelect,
+    onChange: onChange,
+    checked: checked,
+    disabled: disabled
+  };
+  var InlineInputComponent = radio ? RadioButton : InlineCheckbox;
+  var tableSelectRowClasses = cx("".concat(prefix, "--table-column-checkbox"), (_classNames = {}, _defineProperty(_classNames, className, className), _defineProperty(_classNames, "".concat(prefix, "--table-column-radio"), radio), _classNames));
+  return /*#__PURE__*/React__default.createElement("td", {
+    className: tableSelectRowClasses
+  }, /*#__PURE__*/React__default.createElement(InlineInputComponent, _extends({}, selectionInputProps, radio && {
+    labelText: ariaLabel,
+    hideLabel: true
+  }, !radio && {
+    ariaLabel: ariaLabel
+  })));
+};
+
+TableSelectRow.propTypes = {
+  /**
+   * Specify the aria label for the underlying input control
+   */
+  ariaLabel: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether all items are selected, or not
+   */
+  checked: PropTypes.bool.isRequired,
+
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide an `id` for the underlying input control
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Provide a `name` for the underlying input control
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide a handler to listen to when a user initiates a selection request
+   */
+  onSelect: PropTypes.func.isRequired,
+
+  /**
+   * Specify whether the control should be a radio button or inline checkbox
+   */
+  radio: PropTypes.bool
+};
+var TableSelectRow$1 = TableSelectRow;
+
+export { TableSelectRow$1 as default };

package/es/components/DataTable/TableToolbar.js

@@ -0,0 +1,48 @@
+/**
+ * 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, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "size"];
+
+var TableToolbar = function TableToolbar(_ref) {
+  var _cx;
+
+  var children = _ref.children,
+      size = _ref.size,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--table-toolbar"), true), _defineProperty(_cx, "".concat(prefix, "--table-toolbar--").concat(size), size), _cx));
+  return /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
+    className: className
+  }), children);
+};
+
+TableToolbar.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+  /**
+   * Pass in the children that will be rendered inside the TableToolbar
+   */
+  children: PropTypes.node,
+
+  /**
+   * `lg` Change the row height of table
+   */
+  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'lg']) : PropTypes.oneOf(['small', 'sm', 'normal', 'lg'])
+});
+TableToolbar.defaultProps = {
+  'aria-label': 'data table toolbar'
+};
+var TableToolbar$1 = TableToolbar;
+
+export { TableToolbar$1 as default };

package/es/components/DataTable/TableToolbarAction.js

@@ -0,0 +1,31 @@
+/**
+ * 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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import OverflowMenuItem from '../OverflowMenuItem/index.js';
+
+var _excluded = ["children"];
+var TableToolbarAction = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
+    ref: ref,
+    itemText: children
+  }, rest));
+});
+TableToolbarAction.displayName = 'TableToolbarAction';
+TableToolbarAction.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  onClick: PropTypes.func.isRequired
+};
+var TableToolbarAction$1 = TableToolbarAction;
+
+export { TableToolbarAction$1 as default };

package/es/components/DataTable/TableToolbarContent.js

@@ -0,0 +1,17 @@
+/**
+ * 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 wrapComponent from '../../tools/wrapComponent.js';
+
+var TableToolbarContent = wrapComponent({
+  name: 'TableToolbarContent',
+  type: 'div',
+  className: "cds--toolbar-content"
+});
+var TableToolbarContent$1 = TableToolbarContent;
+
+export { TableToolbarContent$1 as default };

package/es/components/DataTable/TableToolbarMenu.js

@@ -0,0 +1,61 @@
+/**
+ * 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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import OverflowMenu from '../OverflowMenu/index.js';
+import { Settings } from '@carbon/icons-react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var toolbarActionClasses = cx(className, "".concat(prefix, "--toolbar-action ").concat(prefix, "--overflow-menu"));
+  return /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({
+    ariaLabel: iconDescription,
+    renderIcon: renderIcon,
+    className: toolbarActionClasses,
+    title: iconDescription,
+    iconDescription: iconDescription,
+    flipped: true
+  }, rest), children);
+};
+
+TableToolbarMenu.defaultProps = {
+  renderIcon: Settings,
+  iconDescription: 'Settings'
+};
+TableToolbarMenu.propTypes = {
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Provide an optional class name for the toolbar menu
+   */
+  className: PropTypes.string,
+
+  /**
+   * The description of the menu icon.
+   */
+  iconDescription: PropTypes.string.isRequired,
+
+  /**
+   * Optional prop to allow overriding the default menu icon
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+var TableToolbarMenu$1 = TableToolbarMenu;
+
+export { TableToolbarMenu$1 as default };