@instructure/ui-table 8.8.1-snapshot.8 → 8.9.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.9.0](https://github.com/instructure/instructure-ui/compare/v8.8.0...v8.9.0) (2021-09-15)
+
+### Bug Fixes
+
+- fix shared-types TS errors ([7b83164](https://github.com/instructure/instructure-ui/commit/7b83164f4c5872f3a217e010563f59bf584ae4fc))
+
 # [8.8.0](https://github.com/instructure/instructure-ui/compare/v8.7.0...v8.8.0) (2021-08-27)
 
 **Note:** Version bump only for package @instructure/ui-table

package/es/Table/Body/index.js

@@ -26,43 +26,43 @@ var _dec, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component, Children } from 'react';
-import PropTypes from 'prop-types';
 import { matchComponentTypes, safeCloneElement, omitProps } from '@instructure/ui-react-utils';
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { View } from '@instructure/ui-view';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { Row } from '../Row';
-
+import { allowedProps, propTypes } from './props';
 /**
 ---
 parent: Table
 id: Table.Body
 ---
 **/
-let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Body extends Component {
-  /* eslint-disable react/require-default-props */
 
-  /* eslint-enable react/require-default-props */
+let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Body extends Component {
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+    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$props = this.props,
-          children = _this$props.children,
-          hover = _this$props.hover,
-          isStacked = _this$props.isStacked,
-          headers = _this$props.headers,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          hover = _this$props3.hover,
+          isStacked = _this$props3.isStacked,
+          headers = _this$props3.headers,
+          styles = _this$props3.styles;
     return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Body.propTypes), Body), {
       as: isStacked ? 'div' : 'tbody',
-      css: styles.body,
+      css: styles === null || styles === void 0 ? void 0 : styles.body,
       role: isStacked ? 'rowgroup' : void 0
     }), Children.map(children, child => matchComponentTypes(child, [Row]) ? safeCloneElement(child, {
       key: child.props.name,
@@ -72,19 +72,7 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     }) : null));
   }
 
-}, _class2.displayName = "Body", _class2.componentId = 'Table.Body', _class2.propTypes = {
-  /**
-   * `Table.Row`
-   */
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-  children: ChildrenPropTypes.oneOf([Row]),
-  hover: PropTypes.bool,
-  isStacked: PropTypes.bool,
-  headers: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.func]))
-}, _class2.defaultProps = {
+}, _class2.displayName = "Body", _class2.componentId = 'Table.Body', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   children: null
 }, _temp)) || _class);
 export default Body;

package/{src/Table/Cell/types.ts → es/Table/Body/props.js}

@@ -21,11 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export type TableCellProps = {
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-  isStacked?: boolean
-  header?: React.ReactNode | ((...args: any[]) => any)
-  textAlign?: 'start' | 'center' | 'end'
-}
+import PropTypes from 'prop-types';
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
+import { Row } from '../Row';
+const propTypes = {
+  /**
+   * `Table.Row`
+   */
+  children: ChildrenPropTypes.oneOf([Row]),
+  hover: PropTypes.bool,
+  isStacked: PropTypes.bool,
+  headers: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.func]))
+};
+const allowedProps = ['children', 'hover', 'isStacked', 'headers'];
+export { propTypes, allowedProps };

package/es/Table/Cell/index.js

@@ -26,58 +26,46 @@ var _dec, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-
+import { allowedProps, propTypes } from './props';
 /**
 ---
 parent: Table
 id: Table.Cell
 ---
 **/
-let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Cell extends Component {
-  /* eslint-disable react/require-default-props */
 
-  /* eslint-enable react/require-default-props */
+let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Cell extends Component {
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  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$props = this.props,
-          children = _this$props.children,
-          styles = _this$props.styles,
-          isStacked = _this$props.isStacked,
-          header = _this$props.header;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles,
+          isStacked = _this$props3.isStacked,
+          header = _this$props3.header;
     return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Cell.propTypes), Cell), {
       as: isStacked ? 'div' : 'td',
-      css: styles.cell,
+      css: styles === null || styles === void 0 ? void 0 : styles.cell,
       role: isStacked ? 'cell' : void 0
     }), header && callRenderProp(header), header && ': ', callRenderProp(children));
   }
 
-}, _class2.displayName = "Cell", _class2.componentId = 'Table.Cell', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  isStacked: PropTypes.bool,
-  header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Control the text alignment in cell
-   */
-  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
-}, _class2.defaultProps = {
+}, _class2.displayName = "Cell", _class2.componentId = 'Table.Cell', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   textAlign: 'start',
   children: null
 }, _temp)) || _class);

package/{src/Table/types.ts → es/Table/Cell/props.js}

@@ -21,15 +21,16 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import PropTypes from 'prop-types';
+const propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  isStacked: PropTypes.bool,
+  header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 
-import type { Spacing } from '@instructure/emotion'
-
-export type TableProps = {
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-  caption: React.ReactNode
-  margin?: Spacing
-  elementRef?: (...args: any[]) => any
-  hover?: boolean
-  layout?: 'auto' | 'fixed' | 'stacked'
-}
+  /**
+   * Control the text alignment in cell
+   */
+  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
+};
+const allowedProps = ['children', 'isStacked', 'header', 'textAlign'];
+export { propTypes, allowedProps };

package/es/Table/ColHeader/index.js

@@ -26,19 +26,19 @@ var _dec, _class, _class2, _temp, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
 import { IconMiniArrowUpLine, IconMiniArrowDownLine } from '@instructure/ui-icons';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-
+import { allowedProps, propTypes } from './props';
 /**
 ---
 parent: Table
 id: Table.ColHeader
 ---
 **/
+
 let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class ColHeader extends Component {
   constructor(...args) {
     super(...args);
@@ -54,17 +54,21 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  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$props2 = this.props,
-          sortDirection = _this$props2.sortDirection,
-          onRequestSort = _this$props2.onRequestSort;
+    const _this$props4 = this.props,
+          sortDirection = _this$props4.sortDirection,
+          onRequestSort = _this$props4.onRequestSort;
 
     if (sortDirection === 'ascending') {
       return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = jsx(IconMiniArrowUpLine, null));
@@ -87,15 +91,15 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   }
 
   render() {
-    const _this$props3 = this.props,
-          onRequestSort = _this$props3.onRequestSort,
-          width = _this$props3.width,
-          children = _this$props3.children,
-          sortDirection = _this$props3.sortDirection,
-          scope = _this$props3.scope,
-          styles = _this$props3.styles;
+    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 jsx("th", Object.assign({}, omitProps(this.props, ColHeader.propTypes), {
-      css: styles.colHeader,
+      css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
       style: {
         width
       },
@@ -103,58 +107,13 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       "aria-sort": sortDirection
     }), onRequestSort && jsx("button", {
       onClick: this.handleClick,
-      css: styles.button
+      css: styles === null || styles === void 0 ? void 0 : styles.button
     }, jsx("div", null, callRenderProp(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
   }
 
-}, _class2.displayName = "ColHeader", _class2.componentId = 'Table.ColHeader', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-
-  /**
-   * A unique id for this column. The `id` is also used as option in combobox,
-   * when sortable table is in stacked layout,
-   * and no `stackedSortByLabel` is provided.
-   */
-  id: PropTypes.string.isRequired,
-
-  /**
-   * A custom string to display as option text in the combobox (instead of
-   * using the `id` prop), when sortable table is in stacked layout.
-   */
-  stackedSortByLabel: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Control the width of column.
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Control the text alignment in column header
-   */
-  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-
-  /**
-   * The string of sorting direction
-   */
-  sortDirection: PropTypes.oneOf(['none', 'ascending', 'descending']),
-
-  /**
-   * Callback fired when column header is clicked. Parameters: `(event, { id })`
-   */
-  onRequestSort: PropTypes.func,
-
-  /**
-   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
-   */
-  scope: PropTypes.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
-}, _class2.defaultProps = {
+}, _class2.displayName = "ColHeader", _class2.componentId = 'Table.ColHeader', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   textAlign: 'start',
   sortDirection: 'none',
-  stackedSortByLabel: void 0,
   children: null,
   scope: 'col'
 }, _temp)) || _class);

package/es/Table/ColHeader/props.js

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+import PropTypes from 'prop-types';
+const propTypes = {
+  /**
+   * A unique id for this column. The `id` is also used as option in combobox,
+   * when sortable table is in stacked layout,
+   * and no `stackedSortByLabel` is provided.
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * A custom string to display as option text in the combobox (instead of
+   * using the `id` prop), when sortable table is in stacked layout.
+   */
+  stackedSortByLabel: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+
+  /**
+   * Control the width of column.
+   */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Control the text alignment in column header
+   */
+  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * The string of sorting direction
+   */
+  sortDirection: PropTypes.oneOf(['none', 'ascending', 'descending']),
+
+  /**
+   * Callback fired when column header is clicked. Parameters: `(event, { id })`
+   */
+  onRequestSort: PropTypes.func,
+
+  /**
+   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+   */
+  scope: PropTypes.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
+};
+const allowedProps = ['id', 'stackedSortByLabel', 'children', 'width', 'textAlign', 'sortDirection', 'onRequestSort', 'scope'];
+export { propTypes, allowedProps };

package/es/Table/Head/index.js

@@ -28,9 +28,7 @@ var _dec, _class, _class2, _temp, _ScreenReaderContent;
 
 /** @jsx jsx */
 import { Component, Children } from 'react';
-import PropTypes from 'prop-types';
 import { omitProps, matchComponentTypes, callRenderProp } from '@instructure/ui-react-utils';
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconCheckLine } from '@instructure/ui-icons';
@@ -40,17 +38,15 @@ import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { Row } from '../Row';
 import { ColHeader } from '../ColHeader';
-
+import { allowedProps, propTypes } from './props';
 /**
 ---
 parent: Table
 id: Table.Head
 ---
 **/
-let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Head extends Component {
-  /* eslint-disable react/require-default-props */
 
-  /* eslint-enable react/require-default-props */
+let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Head extends Component {
   get isSortable() {
     const _Children$toArray = Children.toArray(this.props.children),
           _Children$toArray2 = _slicedToArray(_Children$toArray, 1),
@@ -70,21 +66,25 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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') {
       warn(false, '[Table.Head] The `renderSortLabel` prop should be provided when Table is sortable.');
     }
 
-    this.props.makeStyles();
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   renderSelect() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          renderSortLabel = _this$props.renderSortLabel;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          renderSortLabel = _this$props3.renderSortLabel;
 
     const _Children$toArray3 = Children.toArray(children),
           _Children$toArray4 = _slicedToArray(_Children$toArray3, 1),
@@ -96,7 +96,7 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
 
     const options = [];
     const clickHandlers = {};
-    let selectedOption = null;
+    let selectedOption = void 0;
     let count = 0;
     Children.forEach(row.props.children, colHeader => {
       count += 1;
@@ -163,27 +163,16 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   }
 
   render() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          isStacked = _this$props2.isStacked,
-          styles = _this$props2.styles;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          isStacked = _this$props4.isStacked,
+          styles = _this$props4.styles;
     return isStacked ? this.renderSelect() : jsx("thead", Object.assign({}, omitProps(this.props, Head.propTypes), {
-      css: styles.head
+      css: styles === null || styles === void 0 ? void 0 : styles.head
     }), Children.map(children, child => matchComponentTypes(child, [Row]) ? child : null));
   }
 
-}, _class2.displayName = "Head", _class2.componentId = 'Table.Head', _class2.propTypes = {
-  /**
-   * `Table.Row`
-   */
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-  children: ChildrenPropTypes.oneOf([Row]),
-  isStacked: PropTypes.bool,
-  renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-}, _class2.defaultProps = {
+}, _class2.displayName = "Head", _class2.componentId = 'Table.Head', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   children: null
 }, _temp)) || _class);
 export default Head;