@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/dist/Table/_variables.scss

@@ -0,0 +1,34 @@
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:          .75rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$table-color:                 $body-color !default;
+$table-bg:                    null !default;
+$table-accent-bg:             rgba($black, .05) !default;
+$table-hover-color:           $table-color !default;
+$table-hover-bg:              rgba($black, .075) !default;
+$table-active-bg:             $table-hover-bg !default;
+
+$table-border-width:          $border-width !default;
+$table-border-color:          $border-color !default;
+
+$table-head-bg:               theme-color("gray", "background") !default;
+$table-head-color:            theme-color("gray", "text") !default;
+
+$table-dark-color:            $white !default;
+$table-dark-bg:               theme-color("gray", "hover") !default;
+$table-dark-accent-bg:        rgba($white, .05) !default;
+$table-dark-hover-color:      $table-dark-color !default;
+$table-dark-hover-bg:         rgba($white, .075) !default;
+$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
+$table-dark-color:            $white !default;
+
+$table-striped-order:         odd !default;
+
+$table-caption-color:         $text-muted !default;
+
+$table-bg-level:              -9 !default;
+$table-border-level:          -6 !default;

package/dist/Table/index.js

@@ -0,0 +1,267 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+/* eslint-disable max-len */
+import React from 'react';
+import classNames from 'classnames';
+import isRequiredIf from 'react-proptype-conditional-require';
+import PropTypes from 'prop-types';
+import Button from '../Button';
+import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
+var Table = /*#__PURE__*/function (_React$Component) {
+  _inherits(Table, _React$Component);
+  var _super = _createSuper(Table);
+  function Table(props) {
+    var _this;
+    _classCallCheck(this, Table);
+    _this = _super.call(this, props);
+    _this.state = {
+      sortedColumn: props.tableSortable ? _this.props.defaultSortedColumn : '',
+      sortDirection: props.tableSortable ? _this.props.defaultSortDirection : ''
+    };
+    _this.onSortClick = _this.onSortClick.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  _createClass(Table, [{
+    key: "onSortClick",
+    value: function onSortClick(columnKey) {
+      var newDirection = 'desc';
+      if (this.state.sortedColumn === columnKey) {
+        newDirection = this.state.sortDirection === 'desc' ? 'asc' : 'desc';
+      }
+      this.setState({
+        sortedColumn: columnKey,
+        sortDirection: newDirection
+      });
+      var currentlySortedColumn = this.props.columns.find(function (column) {
+        return columnKey === column.key;
+      });
+      currentlySortedColumn.onSort(newDirection);
+    }
+  }, {
+    key: "getCaption",
+    value: function getCaption() {
+      return this.props.caption && /*#__PURE__*/React.createElement("caption", null, this.props.caption);
+    }
+  }, {
+    key: "getSortButtonScreenReaderText",
+    value: function getSortButtonScreenReaderText(columnKey) {
+      var text;
+      if (this.state.sortedColumn === columnKey) {
+        text = this.props.sortButtonsScreenReaderText[this.state.sortDirection];
+      } else {
+        text = this.props.sortButtonsScreenReaderText.defaultText;
+      }
+      return text;
+    }
+  }, {
+    key: "getSortIcon",
+    value: function getSortIcon(sortDirection) {
+      var sortIconClassName = ['fa-sort', sortDirection].filter(function (n) {
+        return n;
+      }).join('-');
+      return /*#__PURE__*/React.createElement("span", {
+        className: classNames('fa', sortIconClassName),
+        "aria-hidden": true
+      });
+    }
+  }, {
+    key: "getTableHeading",
+    value: function getTableHeading(column) {
+      var _this2 = this;
+      var heading;
+      if (this.props.tableSortable && column.columnSortable) {
+        heading = /*#__PURE__*/React.createElement(Button, {
+          variant: "header",
+          onClick: function onClick() {
+            return _this2.onSortClick(column.key);
+          }
+        }, /*#__PURE__*/React.createElement("span", null, column.label, /*#__PURE__*/React.createElement("span", {
+          className: classNames('sr-only'),
+          "data-testid": "table-heading-sr"
+        }, ' ', this.getSortButtonScreenReaderText(column.key)), ' ', this.getSortIcon(column.key === this.state.sortedColumn ? this.state.sortDirection : '')));
+      } else if (column.hideHeader) {
+        heading = /*#__PURE__*/React.createElement("span", {
+          className: classNames('sr-only'),
+          "data-testid": "table-heading-sr"
+        }, column.label);
+      } else {
+        heading = column.label;
+      }
+      return heading;
+    }
+  }, {
+    key: "getHeadings",
+    value: function getHeadings() {
+      var _this3 = this;
+      return /*#__PURE__*/React.createElement("thead", {
+        className: classNames.apply(void 0, _toConsumableArray(this.props.headingClassName).concat([{
+          'd-inline': this.props.hasFixedColumnWidths
+        }]))
+      }, /*#__PURE__*/React.createElement("tr", {
+        className: classNames({
+          'd-flex': this.props.hasFixedColumnWidths
+        })
+      }, this.props.columns.map(function (col) {
+        return /*#__PURE__*/React.createElement("th", {
+          className: classNames({
+            sortable: _this3.props.tableSortable && col.columnSortable
+          }, _this3.props.hasFixedColumnWidths ? col.width : null),
+          key: col.key,
+          scope: "col"
+        }, _this3.getTableHeading(col));
+      })));
+    }
+  }, {
+    key: "getBody",
+    value: function getBody() {
+      var _this4 = this;
+      return /*#__PURE__*/React.createElement("tbody", {
+        className: classNames({
+          'd-inline': this.props.hasFixedColumnWidths
+        })
+      }, this.props.data.map(function (row, i) {
+        return /*#__PURE__*/React.createElement("tr", {
+          // eslint-disable-next-line react/no-array-index-key
+          key: i,
+          className: classNames({
+            'd-flex': _this4.props.hasFixedColumnWidths
+          })
+        }, _this4.props.columns.map(function (_ref) {
+          var key = _ref.key,
+            width = _ref.width;
+          return /*#__PURE__*/React.createElement(key === _this4.props.rowHeaderColumnKey ? 'th' : 'td', {
+            key: key,
+            className: classNames(_this4.props.hasFixedColumnWidths ? width : null),
+            scope: key === _this4.props.rowHeaderColumnKey ? 'row' : null
+          }, row[key]);
+        }));
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("table", {
+        className: classNames('table', this.props.className)
+      }, this.getCaption(), this.getHeadings(), this.getBody());
+    }
+  }]);
+  return Table;
+}(React.Component);
+Table.propTypes = {
+  caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  className: PropTypes.string,
+  /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
+  1. `label` (string or element; required) contains the display string for each column's heading.
+  2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.
+  3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.
+  4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.
+  5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
+  6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
+  The order of objects in `columns` specifies the order of the columns in the table. */
+  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
+  1. `label` (string or element; required) contains the display string for each column's heading.
+  2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.
+  3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.
+  4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.
+  5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
+  6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
+  The order of objects in `columns` specifies the order of the columns in the table. */
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+    columnSortable: isRequiredIf(PropTypes.bool, function (props) {
+      return props.tableSortable;
+    }),
+    onSort: isRequiredIf(PropTypes.func, function (props) {
+      return props.columnSortable;
+    }),
+    hideHeader: PropTypes.bool,
+    width: isRequiredIf(PropTypes.string, function (props) {
+      return props.hasFixedColumnWidths;
+    })
+  })).isRequired,
+  /** Specifies Bootstrap class names to apply to the table heading. Options are detailed in [Bootstrap's docs](https://getbootstrap.com/docs/4.0/content/tables/#table-head-options).
+  */
+  headingClassName: PropTypes.arrayOf(PropTypes.string),
+  /** Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is `false`, no sortable components will be rendered. */
+  tableSortable: PropTypes.bool,
+  /** Specifies whether the table's columns have fixed widths. Every element in `columns` must define a `width` if this is `true`.
+  */
+  hasFixedColumnWidths: PropTypes.bool,
+  /* eslint-disable react/require-default-props */
+  /** Specifies the key of the column that is sorted by default. It is only required if `tableSortable` is set to `true`. */
+  defaultSortedColumn: isRequiredIf(PropTypes.string, function (props) {
+    return props.tableSortable;
+  }),
+  /* eslint-disable react/require-default-props */
+  /** Specifies the direction the `defaultSortedColumn` is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if `tableSortable` is set to `true`. */
+  defaultSortDirection: isRequiredIf(PropTypes.string, function (props) {
+    return props.tableSortable;
+  }),
+  /** Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:
+  1. `asc`: (string) specifies the screen reader only text for sort buttons in the ascending state.
+  2. `desc`: (string) specifies the screen reader only text for sort buttons in the descending state.
+  3. `defaultText`: (string) specifies the screen reader only text for sort buttons that are not engaged.
+  It is only required if `tableSortable` is set to `true`.
+  Default:
+  ```javascript
+  {
+  asc: 'sort ascending',
+  desc: 'sort descending',
+  defaultText: 'click to sort',
+  }
+  ``` */
+  sortButtonsScreenReaderText: isRequiredIf(PropTypes.shape({
+    asc: PropTypes.string,
+    desc: PropTypes.string,
+    defaultText: PropTypes.string
+  }), function (props) {
+    return props.tableSortable;
+  }),
+  /** Specifies the key for the column that should act as a row header. Rather than rendering as `<td>` elements,
+  cells in this column will render as `<th scope="row">`  */
+  rowHeaderColumnKey: PropTypes.string
+};
+Table.defaultProps = {
+  caption: null,
+  className: undefined,
+  headingClassName: [],
+  tableSortable: false,
+  hasFixedColumnWidths: false,
+  sortButtonsScreenReaderText: {
+    asc: 'sort ascending',
+    desc: 'sort descending',
+    defaultText: 'click to sort'
+  }
+};
+export default withDeprecatedProps(Table, 'TableDeprecated', {
+  className: {
+    deprType: DeprTypes.FORMAT,
+    expect: function expect(value) {
+      return typeof value === 'string';
+    },
+    transform: function transform(value) {
+      return Array.isArray(value) ? value.join(' ') : value;
+    },
+    message: 'It should be a string.'
+  }
+});
+//# sourceMappingURL=index.js.map

package/dist/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","classNames","isRequiredIf","PropTypes","Button","withDeprecatedProps","DeprTypes","Table","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","state","sortedColumn","tableSortable","defaultSortedColumn","sortDirection","defaultSortDirection","onSortClick","bind","_assertThisInitialized","_createClass","key","value","columnKey","newDirection","setState","currentlySortedColumn","columns","find","column","onSort","getCaption","caption","createElement","getSortButtonScreenReaderText","text","sortButtonsScreenReaderText","defaultText","getSortIcon","sortIconClassName","filter","n","join","className","getTableHeading","_this2","heading","columnSortable","variant","onClick","label","hideHeader","getHeadings","_this3","apply","_toConsumableArray","headingClassName","concat","hasFixedColumnWidths","map","col","sortable","width","scope","getBody","_this4","data","row","i","_ref","rowHeaderColumnKey","render","Component","propTypes","oneOfType","string","element","arrayOf","shape","isRequired","bool","func","asc","desc","defaultProps","undefined","deprType","FORMAT","expect","transform","Array","isArray","message"],"sources":["../../src/Table/index.jsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React from 'react';\nimport classNames from 'classnames';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport PropTypes from 'prop-types';\n\nimport Button from '../Button';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nclass Table extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      sortedColumn: props.tableSortable ? this.props.defaultSortedColumn : '',\n      sortDirection: props.tableSortable ? this.props.defaultSortDirection : '',\n    };\n\n    this.onSortClick = this.onSortClick.bind(this);\n  }\n\n  onSortClick(columnKey) {\n    let newDirection = 'desc';\n\n    if (this.state.sortedColumn === columnKey) {\n      newDirection = (this.state.sortDirection === 'desc' ? 'asc' : 'desc');\n    }\n\n    this.setState({\n      sortedColumn: columnKey,\n      sortDirection: newDirection,\n    });\n\n    const currentlySortedColumn = this.props.columns.find(column => (columnKey === column.key));\n    currentlySortedColumn.onSort(newDirection);\n  }\n\n  getCaption() {\n    return this.props.caption && (\n      <caption>{this.props.caption}</caption>\n    );\n  }\n\n  getSortButtonScreenReaderText(columnKey) {\n    let text;\n\n    if (this.state.sortedColumn === columnKey) {\n      text = this.props.sortButtonsScreenReaderText[this.state.sortDirection];\n    } else {\n      text = this.props.sortButtonsScreenReaderText.defaultText;\n    }\n\n    return text;\n  }\n\n  getSortIcon(sortDirection) {\n    const sortIconClassName = ['fa-sort', sortDirection].filter(n => n).join('-');\n\n    return (\n      <span\n        className={classNames('fa', sortIconClassName)}\n        aria-hidden\n      />\n    );\n  }\n\n  getTableHeading(column) {\n    let heading;\n    if (this.props.tableSortable && column.columnSortable) {\n      heading = (\n        <Button\n          variant=\"header\"\n          onClick={() => this.onSortClick(column.key)}\n        >\n          <span>\n            {column.label}\n            <span className={classNames('sr-only')} data-testid=\"table-heading-sr\">\n              {' '}\n              {this.getSortButtonScreenReaderText(column.key)}\n            </span>\n            {' '}\n            {this.getSortIcon(column.key === this.state.sortedColumn ? this.state.sortDirection : '')}\n          </span>\n        </Button>\n      );\n    } else if (column.hideHeader) {\n      heading = (<span className={classNames('sr-only')} data-testid=\"table-heading-sr\">{column.label}</span>);\n    } else {\n      heading = column.label;\n    }\n\n    return heading;\n  }\n\n  getHeadings() {\n    return (\n      <thead\n        className={classNames(\n          ...this.props.headingClassName,\n          { 'd-inline': this.props.hasFixedColumnWidths },\n        )}\n      >\n        <tr className={classNames({ 'd-flex': this.props.hasFixedColumnWidths })}>\n          {this.props.columns.map(col => (\n            <th\n              className={classNames(\n                { sortable: this.props.tableSortable && col.columnSortable },\n                this.props.hasFixedColumnWidths ? col.width : null,\n              )}\n              key={col.key}\n              scope=\"col\"\n            >\n              {this.getTableHeading(col)}\n            </th>\n          ))}\n        </tr>\n      </thead>\n    );\n  }\n\n  getBody() {\n    return (\n      <tbody className={classNames({ 'd-inline': this.props.hasFixedColumnWidths })}>\n        {this.props.data.map((row, i) => (\n          <tr\n          // eslint-disable-next-line react/no-array-index-key\n            key={i}\n            className={classNames({ 'd-flex': this.props.hasFixedColumnWidths })}\n          >\n            {this.props.columns.map(({ key, width }) => (\n              React.createElement(\n                (key === this.props.rowHeaderColumnKey) ? 'th' : 'td',\n                {\n                  key,\n                  className: classNames(this.props.hasFixedColumnWidths ? width : null),\n                  scope: (key === this.props.rowHeaderColumnKey) ? 'row' : null,\n                },\n                row[key],\n              )\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    );\n  }\n\n  render() {\n    return (\n      <table className={classNames(\n        'table',\n        this.props.className,\n      )}\n      >\n        {this.getCaption()}\n        {this.getHeadings()}\n        {this.getBody()}\n      </table>\n    );\n  }\n}\n\nTable.propTypes = {\n  caption: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n  ]),\n  className: PropTypes.string,\n  /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:\n\n1. `label` (string or element; required) contains the display string for each column's heading.\n2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.\n3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.\n4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.\n5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.\n6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.\n\nThe order of objects in `columns` specifies the order of the columns in the table. */\n  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n  /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:\n\n1. `label` (string or element; required) contains the display string for each column's heading.\n2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.\n3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.\n4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.\n5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.\n6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.\n\nThe order of objects in `columns` specifies the order of the columns in the table. */\n  columns: PropTypes.arrayOf(PropTypes.shape({\n    key: PropTypes.string.isRequired,\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.element,\n    ]).isRequired,\n    columnSortable: isRequiredIf(PropTypes.bool, props => props.tableSortable),\n    onSort: isRequiredIf(PropTypes.func, props => props.columnSortable),\n    hideHeader: PropTypes.bool,\n    width: isRequiredIf(PropTypes.string, props => props.hasFixedColumnWidths),\n  })).isRequired,\n  /** Specifies Bootstrap class names to apply to the table heading. Options are detailed in [Bootstrap's docs](https://getbootstrap.com/docs/4.0/content/tables/#table-head-options).\n */\n  headingClassName: PropTypes.arrayOf(PropTypes.string),\n  /** Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is `false`, no sortable components will be rendered. */\n  tableSortable: PropTypes.bool,\n  /** Specifies whether the table's columns have fixed widths. Every element in `columns` must define a `width` if this is `true`.\n */\n  hasFixedColumnWidths: PropTypes.bool,\n  /* eslint-disable react/require-default-props */\n  /** Specifies the key of the column that is sorted by default. It is only required if `tableSortable` is set to `true`. */\n  defaultSortedColumn: isRequiredIf(PropTypes.string, props => props.tableSortable),\n  /* eslint-disable react/require-default-props */\n  /** Specifies the direction the `defaultSortedColumn` is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if `tableSortable` is set to `true`. */\n  defaultSortDirection: isRequiredIf(PropTypes.string, props => props.tableSortable),\n  /** Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:\n\n1. `asc`: (string) specifies the screen reader only text for sort buttons in the ascending state.\n2. `desc`: (string) specifies the screen reader only text for sort buttons in the descending state.\n3. `defaultText`: (string) specifies the screen reader only text for sort buttons that are not engaged.\n\nIt is only required if `tableSortable` is set to `true`.\n\nDefault:\n\n```javascript\n{\n  asc: 'sort ascending',\n  desc: 'sort descending',\n  defaultText: 'click to sort',\n}\n``` */\n  sortButtonsScreenReaderText: isRequiredIf(\n    PropTypes.shape({\n      asc: PropTypes.string,\n      desc: PropTypes.string,\n      defaultText: PropTypes.string,\n    }),\n    props => props.tableSortable,\n  ),\n  /** Specifies the key for the column that should act as a row header. Rather than rendering as `<td>` elements,\ncells in this column will render as `<th scope=\"row\">`  */\n  rowHeaderColumnKey: PropTypes.string,\n};\n\nTable.defaultProps = {\n  caption: null,\n  className: undefined,\n  headingClassName: [],\n  tableSortable: false,\n  hasFixedColumnWidths: false,\n  sortButtonsScreenReaderText: {\n    asc: 'sort ascending',\n    desc: 'sort descending',\n    defaultText: 'click to sort',\n  },\n};\n\nexport default withDeprecatedProps(Table, 'TableDeprecated', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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"}

package/dist/Table/index.scss

@@ -0,0 +1,12 @@
+@import "variables";
+@import "~bootstrap/scss/tables";
+
+.btn-header {
+  padding: 0;
+  font-weight: $font-weight-bold;
+}
+
+.table th,
+.table td {
+  word-wrap: break-word;
+}

package/dist/Tabs/_variables.scss

@@ -0,0 +1,24 @@
+$tab-notification-height:                                   1rem !default;
+$tab-notification-width:                                    1rem !default;
+$tab-notification-font-size:                                $font-size-xs !default;
+$tab-more-link-dropdown-toggle-padding-x:                   .7rem !default;
+$tab-more-link-dropdown-toggle-padding-y:                   $spacer !default;
+$tab-more-link-dropdown-toggle-focus-bg:                    $primary-500 !default;
+$tab-more-link-dropdown-toggle-focus-border-color:          $tab-more-link-dropdown-toggle-focus-bg !default;
+$tab-more-link-dropdown-toggle-focus-color:                 $white !default;
+$tab-more-link-dropdown-toggle-btn-focus-color:             $tab-more-link-dropdown-toggle-focus-color !default;
+$tab-more-link-dropdown-toggle-btn-focus-border-color:      $tab-more-link-dropdown-toggle-focus-bg !default;
+$tab-more-link-dropdown-toggle-active-color:                $tab-more-link-dropdown-toggle-focus-color !default;
+$tab-more-link-dropdown-toggle-hover-color:                 $tab-more-link-dropdown-toggle-focus-bg !default;
+$tab-inverse-pills-link-dropdown-toggle-padding-x:          .625rem !default;
+$tab-inverse-pills-link-dropdown-toggle-padding-y:          $spacer !default;
+$tab-inverse-pills-link-dropdown-toggle-focus-bg:           $white !default;
+$tab-inverse-pills-link-dropdown-toggle-focus-color:        $primary-500 !default;
+$tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
+$tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
+$tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
+$tab-inverse-pills-link-dropdown-toggle-active-hover-bg:    $primary-300 !default;
+$tab-inverse-pills-link-dropdown-distance:                  5px !default;
+$tab-inverse-tabs-link-dropdown-toggle-padding-x:           .625rem !default;
+$tab-inverse-tabs-link-dropdown-toggle-padding-y:           $spacer !default;
+$tab-inverse-tabs-link-dropdown-toggle-hover-bg:            transparent !default;

package/dist/Tabs/deprecated/Tabs.scss

@@ -0,0 +1,3 @@
+.nav-tabs .nav-link {
+  background: transparent;
+}

package/dist/Tabs/deprecated/index.js

@@ -0,0 +1,123 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+// TODO: @jaebradley fix these eslint errors
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable max-len */
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import newId from '../../utils/newId';
+var Tabs = /*#__PURE__*/function (_React$Component) {
+  _inherits(Tabs, _React$Component);
+  var _super = _createSuper(Tabs);
+  function Tabs(props) {
+    var _this;
+    _classCallCheck(this, Tabs);
+    _this = _super.call(this, props);
+    _this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
+    _this.state = {
+      activeTab: 0,
+      uuid: newId('tabInterface')
+    };
+    return _this;
+  }
+  _createClass(Tabs, [{
+    key: "toggle",
+    value: function toggle(tab) {
+      if (this.state.activeTab !== tab) {
+        this.setState({
+          activeTab: tab
+        });
+      }
+    }
+  }, {
+    key: "genLabelId",
+    value: function genLabelId(index) {
+      return "tab-label-".concat(this.state.uuid, "-").concat(index);
+    }
+  }, {
+    key: "genPanelId",
+    value: function genPanelId(index) {
+      return "tab-panel-".concat(this.state.uuid, "-").concat(index);
+    }
+  }, {
+    key: "buildLabels",
+    value: function buildLabels() {
+      var _this2 = this;
+      return this.props.labels.map(function (label, i) {
+        var selected = _this2.state.activeTab === i;
+        var labelId = _this2.genLabelId(i);
+        return /*#__PURE__*/React.createElement("li", {
+          key: labelId
+        }, /*#__PURE__*/React.createElement("button", {
+          role: "tab",
+          "aria-selected": selected,
+          "aria-controls": _this2.genPanelId(i),
+          id: labelId,
+          onClick: function onClick() {
+            _this2.toggle(i);
+          },
+          className: classNames('nav-link nav-item', {
+            active: selected
+          })
+        }, label));
+      });
+    }
+  }, {
+    key: "buildPanels",
+    value: function buildPanels() {
+      var _this3 = this;
+      return this.props.children.map(function (panel, i) {
+        var selected = _this3.state.activeTab === i;
+        var panelId = _this3.genPanelId(i);
+        return /*#__PURE__*/React.createElement("div", {
+          "aria-hidden": !selected,
+          "aria-labelledby": _this3.genLabelId(i),
+          className: classNames('tab-pane', {
+            active: selected
+          }),
+          id: panelId,
+          key: panelId,
+          role: "tabpanel"
+        }, panel);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var labels = this.buildLabels();
+      var panels = this.buildPanels();
+      return /*#__PURE__*/React.createElement("div", {
+        className: "tabs"
+      }, /*#__PURE__*/React.createElement("ul", {
+        role: "tablist",
+        className: classNames(['nav', 'nav-tabs'])
+      }, labels), /*#__PURE__*/React.createElement("div", {
+        role: "tabpanel",
+        className: "tab-content"
+      }, panels));
+    }
+  }]);
+  return Tabs;
+}(React.Component); // TODO: custom validator that ensures labels and panels are the same length
+Tabs.propTypes = {
+  /** specifies the list of elements that will be displayed within each of the tabbed views.  It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing `<Tabs> </Tabs>` tags. */
+  labels: PropTypes.arrayOf(PropTypes.node).isRequired,
+  /** specifies the list of headings that will appear on all of the tabs that will be created.
+  */
+  children: PropTypes.arrayOf(PropTypes.element).isRequired
+};
+export default Tabs;
+//# sourceMappingURL=index.js.map

package/dist/Tabs/deprecated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","classNames","PropTypes","newId","Tabs","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","toggle","bind","_assertThisInitialized","state","activeTab","uuid","_createClass","key","value","tab","setState","genLabelId","index","concat","genPanelId","buildLabels","_this2","labels","map","label","i","selected","labelId","createElement","role","id","onClick","className","active","buildPanels","_this3","children","panel","panelId","render","panels","Component","propTypes","arrayOf","node","isRequired","element"],"sources":["../../../src/Tabs/deprecated/index.jsx"],"sourcesContent":["// TODO: @jaebradley fix these eslint errors\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/anchor-is-valid */\n/* eslint-disable max-len */\nimport React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport newId from '../../utils/newId';\n\nclass Tabs extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.toggle = this.toggle.bind(this);\n    this.state = {\n      activeTab: 0,\n      uuid: newId('tabInterface'),\n    };\n  }\n\n  toggle(tab) {\n    if (this.state.activeTab !== tab) {\n      this.setState({\n        activeTab: tab,\n      });\n    }\n  }\n\n  genLabelId(index) {\n    return `tab-label-${this.state.uuid}-${index}`;\n  }\n\n  genPanelId(index) {\n    return `tab-panel-${this.state.uuid}-${index}`;\n  }\n\n  buildLabels() {\n    return this.props.labels.map((label, i) => {\n      const selected = this.state.activeTab === i;\n      const labelId = this.genLabelId(i);\n\n      return (\n        <li key={labelId}>\n          {/* eslint-disable-next-line react/button-has-type */}\n          <button\n            role=\"tab\"\n            aria-selected={selected}\n            aria-controls={this.genPanelId(i)}\n            id={labelId}\n            onClick={() => { this.toggle(i); }}\n            className={classNames('nav-link nav-item', {\n              active: selected,\n            })}\n          >\n            {label}\n          </button>\n        </li>\n      );\n    });\n  }\n\n  buildPanels() {\n    return this.props.children.map((panel, i) => {\n      const selected = this.state.activeTab === i;\n      const panelId = this.genPanelId(i);\n\n      return (\n        <div\n          aria-hidden={!selected}\n          aria-labelledby={this.genLabelId(i)}\n          className={classNames(\n            'tab-pane',\n            { active: selected },\n          )}\n          id={panelId}\n          key={panelId}\n          role=\"tabpanel\"\n        >\n          {panel}\n        </div>\n      );\n    });\n  }\n\n  render() {\n    const labels = this.buildLabels();\n    const panels = this.buildPanels();\n\n    return (\n      <div className=\"tabs\">\n        <ul\n          role=\"tablist\"\n          className={classNames([\n            'nav',\n            'nav-tabs',\n          ])}\n        >\n          {labels}\n        </ul>\n        <div role=\"tabpanel\" className=\"tab-content\">\n          {panels}\n        </div>\n      </div>\n    );\n  }\n}\n// TODO: custom validator that ensures labels and panels are the same length\nTabs.propTypes = {\n  /** specifies the list of elements that will be displayed within each of the tabbed views.  It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing `<Tabs> </Tabs>` tags. */\n  labels: PropTypes.arrayOf(PropTypes.node).isRequired,\n  /** specifies the list of headings that will appear on all of the tabs that will be created.\n */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired,\n};\n\nexport default Tabs;\n"],"mappings":"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"}