@instructure/ui-table 11.6.0 → 11.6.1-snapshot-129

package/lib/Table/v2/Body/styles.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  return {
+    body: {
+      label: 'body',
+      fontSize: componentTheme.fontSize,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      color: componentTheme.color,
+      background: componentTheme.background
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Table/v2/Cell/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Cell = void 0;
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _latest = require("@instructure/ui-view/latest");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _TableContext = _interopRequireDefault(require("../TableContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _Cell;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: Table
+id: Table.Cell
+---
+**/
+let Cell = exports.Cell = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Cell = class Cell extends _react.Component {
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const _this$props3 = this.props,
+      children = _this$props3.children,
+      styles = _this$props3.styles,
+      header = _this$props3.header;
+    const isStacked = this.context.isStacked;
+    return (0, _jsxRuntime.jsxs)(_latest.View, {
+      ..._latest.View.omitViewProps((0, _omitProps.omitProps)(this.props, Cell.allowedProps), Cell),
+      as: isStacked ? 'div' : 'td',
+      css: styles === null || styles === void 0 ? void 0 : styles.cell,
+      role: isStacked ? 'cell' : void 0,
+      children: [header && (0, _callRenderProp.callRenderProp)(header), header && ': ', (0, _callRenderProp.callRenderProp)(children)]
+    });
+  }
+}, _Cell.displayName = "Cell", _Cell.componentId = 'Table.Cell', _Cell.contextType = _TableContext.default, _Cell.allowedProps = _props.allowedProps, _Cell.defaultProps = {
+  textAlign: 'start',
+  children: null
+}, _Cell)) || _class);
+var _default = exports.default = Cell;

package/lib/Table/v2/Cell/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['children', 'header', 'textAlign'];

package/lib/Table/v2/Cell/styles.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const textAlign = props.textAlign;
+  return {
+    cell: {
+      label: 'cell',
+      fontSize: componentTheme.fontSize,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      color: componentTheme.color,
+      background: componentTheme.background,
+      boxSizing: 'border-box',
+      verticalAlign: 'middle',
+      lineHeight: componentTheme.lineHeight,
+      padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`,
+      ...(textAlign && {
+        textAlign
+      })
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Table/v2/ColHeader/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ColHeader = void 0;
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _uiIcons = require("@instructure/ui-icons");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _ColHeader, _ChevronUpInstUIIcon, _ChevronDownInstUIIco, _ChevronsUpDownInstUI;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: Table
+id: Table.ColHeader
+---
+**/
+let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_ColHeader = class ColHeader extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.handleClick = event => {
+      const _this$props = this.props,
+        id = _this$props.id,
+        onRequestSort = _this$props.onRequestSort;
+      onRequestSort && onRequestSort(event, {
+        id
+      });
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
+  renderSortArrow() {
+    const _this$props4 = this.props,
+      sortDirection = _this$props4.sortDirection,
+      onRequestSort = _this$props4.onRequestSort;
+    if (sortDirection === 'ascending') {
+      return _ChevronUpInstUIIcon || (_ChevronUpInstUIIcon = (0, _jsxRuntime.jsx)(_uiIcons.ChevronUpInstUIIcon, {
+        color: "infoColor",
+        size: "sm"
+      }));
+    }
+    if (sortDirection === 'descending') {
+      return _ChevronDownInstUIIco || (_ChevronDownInstUIIco = (0, _jsxRuntime.jsx)(_uiIcons.ChevronDownInstUIIcon, {
+        color: "infoColor",
+        size: "sm"
+      }));
+    }
+    if (onRequestSort) {
+      return _ChevronsUpDownInstUI || (_ChevronsUpDownInstUI = (0, _jsxRuntime.jsx)(_uiIcons.ChevronsUpDownInstUIIcon, {
+        color: "baseColor",
+        size: "sm"
+      }));
+    }
+    return void 0;
+  }
+  render() {
+    const _this$props5 = this.props,
+      onRequestSort = _this$props5.onRequestSort,
+      width = _this$props5.width,
+      children = _this$props5.children,
+      sortDirection = _this$props5.sortDirection,
+      scope = _this$props5.scope,
+      styles = _this$props5.styles;
+    return (0, _jsxRuntime.jsxs)("th", {
+      ...(0, _omitProps.omitProps)(this.props, ColHeader.allowedProps),
+      css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
+      style: {
+        width
+      },
+      scope: scope,
+      "aria-sort": sortDirection,
+      children: [onRequestSort && (0, _jsxRuntime.jsx)("button", {
+        onClick: this.handleClick,
+        css: styles === null || styles === void 0 ? void 0 : styles.button,
+        children: (0, _jsxRuntime.jsxs)("div", {
+          css: styles === null || styles === void 0 ? void 0 : styles.buttonContent,
+          children: [(0, _callRenderProp.callRenderProp)(children), this.renderSortArrow()]
+        })
+      }), !onRequestSort && children, !onRequestSort && this.renderSortArrow()]
+    });
+  }
+}, _ColHeader.displayName = "ColHeader", _ColHeader.componentId = 'Table.ColHeader', _ColHeader.allowedProps = _props.allowedProps, _ColHeader.defaultProps = {
+  textAlign: 'start',
+  sortDirection: 'none',
+  children: null,
+  scope: 'col'
+}, _ColHeader)) || _class);
+var _default = exports.default = ColHeader;

package/lib/Table/v2/ColHeader/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['id', 'stackedSortByLabel', 'children', 'width', 'textAlign', 'sortDirection', 'onRequestSort', 'scope'];

package/lib/Table/v2/ColHeader/styles.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  const onRequestSort = props.onRequestSort,
+    textAlign = props.textAlign;
+  const headerStyle = {
+    color: componentTheme.color,
+    fontSize: componentTheme.fontSize,
+    fontFamily: componentTheme.fontFamily,
+    fontWeight: 'bold',
+    lineHeight: componentTheme.lineHeight,
+    padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`
+  };
+  const buttonTextAlignVariants = {
+    start: {
+      flexDirection: 'row'
+    },
+    center: {
+      justifyContent: 'center'
+    },
+    end: {
+      flexDirection: 'row-reverse'
+    }
+  };
+  return {
+    colHeader: {
+      label: 'colHeader',
+      background: componentTheme.background,
+      verticalAlign: 'middle',
+      boxSizing: 'border-box',
+      ...(!onRequestSort && headerStyle),
+      textAlign: textAlign
+    },
+    button: {
+      label: 'colHeader__button',
+      ...headerStyle,
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      border: 'none',
+      width: '100%',
+      height: '100%',
+      background: 'transparent',
+      cursor: 'pointer',
+      outline: 'none',
+      '&::-moz-focus-inner': {
+        border: 0
+      },
+      '&:focus': {
+        outline: `${sharedTokens.focusOutline.width} ${sharedTokens.focusOutline.style} ${sharedTokens.focusOutline.infoColor}`
+      },
+      ...(textAlign && buttonTextAlignVariants[textAlign])
+    },
+    buttonContent: {
+      label: 'colHeader__buttonContent',
+      display: 'flex',
+      alignItems: 'center'
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Table/v2/Head/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Head = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _latest = require("@instructure/ui-simple-select/latest");
+var _ScreenReaderContent2 = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _uiIcons = require("@instructure/ui-icons");
+var _console = require("@instructure/console");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _TableContext = _interopRequireDefault(require("../TableContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _Head, _ScreenReaderContent, _CheckInstUIIcon, _CheckInstUIIcon2, _CheckInstUIIcon3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: Table
+id: Table.Head
+---
+**/
+let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Head = class Head extends _react.Component {
+  /**
+   * Returns `true` if the first child's children have a `onRequestSort` prop
+   */
+  get isSortable() {
+    const _ref = _react.Children.toArray(this.props.children),
+      _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+      firstRow = _ref2[0];
+    let sortable = false;
+    if (firstRow && firstRow.props && firstRow.props.children) {
+      _react.Children.forEach(firstRow.props.children, grandchild => {
+        var _grandchild$props;
+        if (grandchild !== null && grandchild !== void 0 && (_grandchild$props = grandchild.props) !== null && _grandchild$props !== void 0 && _grandchild$props.onRequestSort) {
+          sortable = true;
+          return;
+        }
+      });
+    }
+    return sortable;
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    if (this.isSortable && typeof this.props.renderSortLabel === 'undefined') {
+      (0, _console.warn)(false, '[Table.Head] The `renderSortLabel` prop should be provided when Table is sortable.');
+    }
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+
+  /**
+   * This `Select` is used in `stacked` layout. It's populated by iterating
+   * through the first child's children (by default `ColHeader`) and reading
+   * there the `id`, `stackedSortByLabel`, `sortDirection`, `onRequestSort` props
+   */
+  renderSelect() {
+    var _firstRow$props;
+    const _this$props3 = this.props,
+      children = _this$props3.children,
+      renderSortLabel = _this$props3.renderSortLabel;
+    const _ref3 = _react.Children.toArray(children),
+      _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
+      firstRow = _ref4[0];
+    if (!(firstRow !== null && firstRow !== void 0 && (_firstRow$props = firstRow.props) !== null && _firstRow$props !== void 0 && _firstRow$props.children)) {
+      return null;
+    }
+    const options = [];
+    const clickHandlers = {};
+    let selectedOption;
+    let count = 0;
+    _react.Children.forEach(firstRow.props.children, grandchild => {
+      count += 1;
+      if (!(grandchild !== null && grandchild !== void 0 && grandchild.props)) return; // grandchild can be false
+      const _grandchild$props2 = grandchild.props,
+        id = _grandchild$props2.id,
+        stackedSortByLabel = _grandchild$props2.stackedSortByLabel,
+        sortDirection = _grandchild$props2.sortDirection,
+        onRequestSort = _grandchild$props2.onRequestSort;
+      if (id && onRequestSort) {
+        const label = stackedSortByLabel || id;
+        options.push({
+          id,
+          label
+        });
+        clickHandlers[id] = onRequestSort;
+        if (sortDirection !== 'none') {
+          selectedOption = id;
+        }
+      }
+    });
+    if (!options.length) {
+      return null;
+    }
+    const handleSelect = (event, {
+      value
+    }) => {
+      if (value && typeof clickHandlers[value] === 'function') {
+        clickHandlers[value](event, {
+          id: `${value}`
+        });
+      }
+    };
+    return (0, _jsxRuntime.jsx)("div", {
+      role: "rowgroup",
+      children: (0, _jsxRuntime.jsx)("div", {
+        role: "row",
+        children: (0, _jsxRuntime.jsx)("div", {
+          role: "cell",
+          "aria-colspan": count,
+          children: (0, _jsxRuntime.jsx)(_latest.SimpleSelect, {
+            renderLabel: renderSortLabel ? (0, _callRenderProp.callRenderProp)(renderSortLabel) : _ScreenReaderContent || (_ScreenReaderContent = (0, _jsxRuntime.jsx)(_ScreenReaderContent2.ScreenReaderContent, {})),
+            renderBeforeInput: selectedOption ? () => _CheckInstUIIcon || (_CheckInstUIIcon = (0, _jsxRuntime.jsx)(_uiIcons.CheckInstUIIcon, {})) : void 0,
+            value: selectedOption,
+            onChange: handleSelect,
+            children: options.map(({
+              id,
+              label
+            }) => (0, _jsxRuntime.jsx)(_latest.SimpleSelect.Option, {
+              id: id,
+              value: id,
+              renderBeforeLabel: id === selectedOption ? () => _CheckInstUIIcon2 || (_CheckInstUIIcon2 = (0, _jsxRuntime.jsx)(_uiIcons.CheckInstUIIcon, {})) : () => (0, _jsxRuntime.jsx)("span", {
+                style: {
+                  visibility: 'hidden'
+                },
+                children: _CheckInstUIIcon3 || (_CheckInstUIIcon3 = (0, _jsxRuntime.jsx)(_uiIcons.CheckInstUIIcon, {}))
+              }),
+              children: label
+            }, id))
+          })
+        })
+      })
+    });
+  }
+  render() {
+    const _this$props4 = this.props,
+      children = _this$props4.children,
+      styles = _this$props4.styles;
+    return this.context.isStacked ? this.renderSelect() : (0, _jsxRuntime.jsx)("thead", {
+      ...(0, _omitProps.omitProps)(this.props, Head.allowedProps),
+      css: styles === null || styles === void 0 ? void 0 : styles.head,
+      children: children
+    });
+  }
+}, _Head.displayName = "Head", _Head.componentId = 'Table.Head', _Head.contextType = _TableContext.default, _Head.allowedProps = _props.allowedProps, _Head.defaultProps = {
+  children: null
+}, _Head)) || _class);
+var _default = exports.default = Head;

package/lib/Table/v2/Head/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['children', 'renderSortLabel'];