@instructure/ui-list 8.13.1-snapshot.9 → 8.14.1-snapshot.15

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
+
+**Note:** Version bump only for package @instructure/ui-list
+
 # [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
 
 **Note:** Version bump only for package @instructure/ui-list

package/es/InlineList/InlineListItem/InlineListItemLocator.js

@@ -23,7 +23,8 @@
  */
 import { locator } from '@instructure/ui-test-locator';
 import { InlineListLocator } from '../InlineListLocator';
-import { InlineListItem } from './index';
+import { InlineListItem } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const InlineListItemLocator = locator(InlineListItem.selector, {
   findNestedOptions: function () {
     return InlineListLocator.find(...arguments);

package/es/InlineList/InlineListItem/index.js

@@ -42,6 +42,7 @@ import { propTypes, allowedProps } from './props';
 parent: InlineList
 id: InlineList.Item
 ---
+@tsProps
 **/
 let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class InlineListItem extends Component {
   constructor() {
@@ -59,24 +60,28 @@ let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   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,
-          delimiter = _this$props.delimiter,
-          size = _this$props.size,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          elementRef = _this$props.elementRef,
-          children = _this$props.children,
-          spacing = _this$props.spacing,
-          styles = _this$props.styles,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          delimiter = _this$props3.delimiter,
+          size = _this$props3.size,
+          margin = _this$props3.margin,
+          padding = _this$props3.padding,
+          elementRef = _this$props3.elementRef,
+          children = _this$props3.children,
+          spacing = _this$props3.spacing,
+          styles = _this$props3.styles,
+          rest = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx(View, Object.assign({}, passthroughProps(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
@@ -96,8 +101,7 @@ let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
   padding: 'none',
   spacing: 'none',
   delimiter: 'none',
-  size: 'medium',
-  elementRef: el => {}
+  size: 'medium'
 }, _temp)) || _class) || _class);
 export default InlineListItem;
 export { InlineListItem };

package/es/InlineList/InlineListItem/props.js

@@ -25,35 +25,11 @@ import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
-  /**
-   * Inherits delimiter from the parent InlineList component
-   */
   delimiter: PropTypes.oneOf(['none', 'pipe', 'slash', 'arrow']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
-   */
   padding: ThemeablePropTypes.spacing,
-
-  /**
-   * Inherits itemSpacing from the parent InlineList component
-   */
   spacing: PropTypes.oneOf(['none', 'xxx-small', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['children', 'delimiter', 'size', 'margin', 'padding', 'spacing', 'elementRef'];

package/es/InlineList/InlineListLocator.js

@@ -23,7 +23,8 @@
  */
 import { locator } from '@instructure/ui-test-locator';
 import { InlineList } from './index';
-import { InlineListItemLocator } from './InlineListItem/InlineListItemLocator';
+import { InlineListItemLocator } from './InlineListItem/InlineListItemLocator'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const InlineListLocator = locator(InlineList.selector, {
   findAllItems: function () {
     return InlineListItemLocator.findAll(...arguments);

package/es/InlineList/__examples__/InlineList.examples.js

@@ -27,7 +27,7 @@ import React from 'react';
 import { InlineList } from '../index';
 export default {
   sectionProp: 'size',
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       children: [_InlineList$Item || (_InlineList$Item = /*#__PURE__*/React.createElement(InlineList.Item, {
         key: "1"

package/es/InlineList/index.js

@@ -37,6 +37,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let InlineList = (_dec = testable(), _dec(_class = (_temp = _class2 = class InlineList extends Component {
   constructor() {
@@ -82,9 +83,7 @@ let InlineList = (_dec = testable(), _dec(_class = (_temp = _class2 = class Inli
   }
 
 }, _class2.displayName = "InlineList", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  children: null,
   itemSpacing: 'none',
-  elementRef: el => {},
   as: 'ul',
   margin: 'none',
   delimiter: 'none',

package/es/InlineList/props.js

@@ -26,29 +26,12 @@ import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 import { InlineListItem } from './InlineListItem';
 const propTypes = {
-  /**
-   * Only accepts `<InlineList.Item>` as a child
-   */
   children: ChildrenPropTypes.oneOf([InlineListItem]),
   as: PropTypes.oneOf(['ul', 'ol']),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   delimiter: PropTypes.oneOf(['none', 'pipe', 'slash', 'arrow']),
-
-  /**
-   * Sets the margin separating each ListItem.
-   */
   itemSpacing: PropTypes.oneOf(['none', 'xxx-small', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['children', 'as', 'margin', 'size', 'delimiter', 'itemSpacing', 'elementRef'];

package/es/List/ListItem/index.js

@@ -42,6 +42,7 @@ import { propTypes, allowedProps } from './props';
 parent: List
 id: List.Item
 ---
+@tsProps
 **/
 let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ListItem extends Component {
   constructor() {
@@ -59,24 +60,28 @@ let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   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,
-          delimiter = _this$props.delimiter,
-          spacing = _this$props.spacing,
-          size = _this$props.size,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          elementRef = _this$props.elementRef,
-          children = _this$props.children,
-          styles = _this$props.styles,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          delimiter = _this$props3.delimiter,
+          spacing = _this$props3.spacing,
+          size = _this$props3.size,
+          margin = _this$props3.margin,
+          padding = _this$props3.padding,
+          elementRef = _this$props3.elementRef,
+          children = _this$props3.children,
+          styles = _this$props3.styles,
+          rest = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx(View, Object.assign({}, passthroughProps(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.listItem,
@@ -92,8 +97,7 @@ let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   padding: 'none',
   spacing: 'none',
   delimiter: 'none',
-  size: 'medium',
-  elementRef: el => {}
+  size: 'medium'
 }, _temp)) || _class) || _class);
 export default ListItem;
 export { ListItem };

package/es/List/ListItem/props.js

@@ -25,35 +25,11 @@ import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
-  /**
-   * Inherits delimiter from the parent List component.
-   */
   delimiter: PropTypes.oneOf(['none', 'dashed', 'solid']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
-   */
   padding: ThemeablePropTypes.spacing,
-
-  /**
-   * Inherits itemSpacing from the parent List component
-   */
   spacing: PropTypes.oneOf(['none', 'xxx-small', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['children', 'delimiter', 'size', 'margin', 'padding', 'spacing', 'elementRef'];

package/es/List/ListLocator.js

@@ -22,8 +22,10 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { List } from './index';
-const ListItemLocator = locator(List.Item.selector);
+import { List } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+const ListItemLocator = locator(List.Item.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const ListLocator = locator(List.selector, {
   findAllItems: function () {
     return ListItemLocator.findAll(...arguments);

package/es/List/__examples__/List.examples.js

@@ -27,7 +27,7 @@ import React from 'react';
 import { List } from '../index';
 export default {
   sectionProp: 'size',
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       children: [_List$Item || (_List$Item = /*#__PURE__*/React.createElement(List.Item, {
         key: "1"

package/es/List/index.js

@@ -42,6 +42,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let List = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class List extends Component {
   constructor() {
@@ -59,11 +60,15 @@ let List = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   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);
   }
 
   renderChildren() {
@@ -80,13 +85,13 @@ let List = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   render() {
-    const _this$props = this.props,
-          as = _this$props.as,
-          margin = _this$props.margin,
-          isUnstyled = _this$props.isUnstyled,
-          elementRef = _this$props.elementRef,
-          styles = _this$props.styles,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          as = _this$props3.as,
+          margin = _this$props3.margin,
+          isUnstyled = _this$props3.isUnstyled,
+          elementRef = _this$props3.elementRef,
+          styles = _this$props3.styles,
+          rest = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx(View, Object.assign({}, passthroughProps(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.list,
@@ -98,13 +103,11 @@ let List = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
 }, _class2.displayName = "List", _class2.componentId = 'List', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  children: null,
   as: 'ul',
   delimiter: 'none',
   isUnstyled: false,
   size: 'medium',
-  itemSpacing: 'none',
-  elementRef: el => {}
+  itemSpacing: 'none'
 }, _class2.Item = ListItem, _temp)) || _class) || _class);
 export default List;
 export { List, ListItem };

package/es/List/props.js

@@ -26,38 +26,13 @@ import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 import { ListItem } from './ListItem';
 const propTypes = {
-  /**
-   * Only accepts `<List.Item>` as a child
-   */
   children: ChildrenPropTypes.oneOf([ListItem]),
   as: PropTypes.oneOf(['ul', 'ol']),
-
-  /**
-   * One of: none, dashed, solid
-   */
   delimiter: PropTypes.oneOf(['none', 'dashed', 'solid']),
-
-  /**
-   * When set, renders the List Items without a list style type.
-   */
   isUnstyled: PropTypes.bool,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Sets the margin separating each ListItem.
-   */
   itemSpacing: PropTypes.oneOf(['none', 'xxx-small', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['children', 'as', 'delimiter', 'isUnstyled', 'margin', 'size', 'itemSpacing', 'elementRef'];

package/lib/InlineList/InlineListItem/InlineListItemLocator.js

@@ -34,6 +34,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const InlineListItemLocator = (0, _locator.locator)(_index.InlineListItem.selector, {
   findNestedOptions: function () {
     return _InlineListLocator.InlineListLocator.find(...arguments);

package/lib/InlineList/InlineListItem/index.js

@@ -34,6 +34,7 @@ var _dec, _dec2, _class, _class2, _temp;
 parent: InlineList
 id: InlineList.Item
 ---
+@tsProps
 **/
 let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class InlineListItem extends _react.Component {
   constructor() {
@@ -51,24 +52,28 @@ let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   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,
-          delimiter = _this$props.delimiter,
-          size = _this$props.size,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          elementRef = _this$props.elementRef,
-          children = _this$props.children,
-          spacing = _this$props.spacing,
-          styles = _this$props.styles,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          delimiter = _this$props3.delimiter,
+          size = _this$props3.size,
+          margin = _this$props3.margin,
+          padding = _this$props3.padding,
+          elementRef = _this$props3.elementRef,
+          children = _this$props3.children,
+          spacing = _this$props3.spacing,
+          styles = _this$props3.styles,
+          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
       as: "li",
@@ -87,8 +92,7 @@ let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   padding: 'none',
   spacing: 'none',
   delimiter: 'none',
-  size: 'medium',
-  elementRef: el => {}
+  size: 'medium'
 }, _temp)) || _class) || _class);
 exports.InlineListItem = InlineListItem;
 var _default = InlineListItem;

package/lib/InlineList/InlineListItem/props.js

@@ -36,35 +36,11 @@ var _emotion = require("@instructure/emotion");
  */
 const propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-
-  /**
-   * Inherits delimiter from the parent InlineList component
-   */
   delimiter: _propTypes.default.oneOf(['none', 'pipe', 'slash', 'arrow']),
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
-   */
   padding: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Inherits itemSpacing from the parent InlineList component
-   */
   spacing: _propTypes.default.oneOf(['none', 'xxx-small', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/lib/InlineList/InlineListLocator.js

@@ -34,6 +34,7 @@ var _InlineListItemLocator = require("./InlineListItem/InlineListItemLocator");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const InlineListLocator = (0, _locator.locator)(_index.InlineList.selector, {
   findAllItems: function () {
     return _InlineListItemLocator.InlineListItemLocator.findAll(...arguments);

package/lib/InlineList/__examples__/InlineList.examples.js

@@ -15,7 +15,7 @@ var _InlineList$Item, _InlineList$Item2, _InlineList$Item3;
 
 var _default = {
   sectionProp: 'size',
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       children: [_InlineList$Item || (_InlineList$Item = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, {
         key: "1"

package/lib/InlineList/index.js

@@ -33,6 +33,7 @@ var _dec, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let InlineList = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class InlineList extends _react.Component {
   constructor() {
@@ -77,9 +78,7 @@ let InlineList = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
   }
 
 }, _class2.displayName = "InlineList", _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  children: null,
   itemSpacing: 'none',
-  elementRef: el => {},
   as: 'ul',
   margin: 'none',
   delimiter: 'none',

package/lib/InlineList/props.js

@@ -39,29 +39,12 @@ var _InlineListItem = require("./InlineListItem");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * Only accepts `<InlineList.Item>` as a child
-   */
   children: _Children.Children.oneOf([_InlineListItem.InlineListItem]),
   as: _propTypes.default.oneOf(['ul', 'ol']),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   delimiter: _propTypes.default.oneOf(['none', 'pipe', 'slash', 'arrow']),
-
-  /**
-   * Sets the margin separating each ListItem.
-   */
   itemSpacing: _propTypes.default.oneOf(['none', 'xxx-small', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/lib/List/ListItem/index.js

@@ -34,6 +34,7 @@ var _dec, _dec2, _class, _class2, _temp;
 parent: List
 id: List.Item
 ---
+@tsProps
 **/
 let ListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class ListItem extends _react.Component {
   constructor() {
@@ -51,24 +52,28 @@ let ListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   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,
-          delimiter = _this$props.delimiter,
-          spacing = _this$props.spacing,
-          size = _this$props.size,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          elementRef = _this$props.elementRef,
-          children = _this$props.children,
-          styles = _this$props.styles,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          delimiter = _this$props3.delimiter,
+          spacing = _this$props3.spacing,
+          size = _this$props3.size,
+          margin = _this$props3.margin,
+          padding = _this$props3.padding,
+          elementRef = _this$props3.elementRef,
+          children = _this$props3.children,
+          styles = _this$props3.styles,
+          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.listItem,
       as: "li",
@@ -83,8 +88,7 @@ let ListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   padding: 'none',
   spacing: 'none',
   delimiter: 'none',
-  size: 'medium',
-  elementRef: el => {}
+  size: 'medium'
 }, _temp)) || _class) || _class);
 exports.ListItem = ListItem;
 var _default = ListItem;