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

package/lib/List/ListItem/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 List component.
-   */
   delimiter: _propTypes.default.oneOf(['none', 'dashed', 'solid']),
   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 List 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/List/ListLocator.js

@@ -32,7 +32,9 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const ListItemLocator = (0, _locator.locator)(_index.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
+const ListItemLocator = (0, _locator.locator)(_index.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
+
 const ListLocator = (0, _locator.locator)(_index.List.selector, {
   findAllItems: function () {
     return ListItemLocator.findAll(...arguments);

package/lib/List/__examples__/List.examples.js

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

package/lib/List/index.js

@@ -44,6 +44,7 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class List extends _react.Component {
   constructor() {
@@ -61,11 +62,15 @@ let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   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() {
@@ -82,13 +87,13 @@ let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   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 = (0, _objectWithoutProperties2.default)(_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 = (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.list,
       as: as,
@@ -99,13 +104,11 @@ let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
 }, _class2.displayName = "List", _class2.componentId = 'List', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  children: null,
   as: 'ul',
   delimiter: 'none',
   isUnstyled: false,
   size: 'medium',
-  itemSpacing: 'none',
-  elementRef: el => {}
+  itemSpacing: 'none'
 }, _class2.Item = _ListItem.ListItem, _temp)) || _class) || _class);
 exports.List = List;
 var _default = List;

package/lib/List/props.js

@@ -39,38 +39,13 @@ var _ListItem = require("./ListItem");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * Only accepts `<List.Item>` as a child
-   */
   children: _Children.Children.oneOf([_ListItem.ListItem]),
   as: _propTypes.default.oneOf(['ul', 'ol']),
-
-  /**
-   * One of: none, dashed, solid
-   */
   delimiter: _propTypes.default.oneOf(['none', 'dashed', 'solid']),
-
-  /**
-   * When set, renders the List Items without a list style type.
-   */
   isUnstyled: _propTypes.default.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: _emotion.ThemeablePropTypes.spacing,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-list",
-  "version": "8.13.1-snapshot.9+f32ba918e",
+  "version": "8.14.1-snapshot.6+44559fbd7",
   "description": "Components for displaying vertical or horizontal lists.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,21 +25,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-prop-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-testable": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-view": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/console": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/emotion": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/shared-types": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-prop-types": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-testable": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-view": "8.14.1-snapshot.6+44559fbd7",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-color-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-themes": "8.13.1-snapshot.9+f32ba918e"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-color-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-test-locator": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-themes": "8.14.1-snapshot.6+44559fbd7"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
+  "gitHead": "44559fbd71344c571d339f20cf74491c6fd1dd2f"
 }

package/src/InlineList/InlineListItem/index.tsx

@@ -41,6 +41,7 @@ import type { InlineListItemProps } from './props'
 parent: InlineList
 id: InlineList.Item
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -53,9 +54,7 @@ class InlineListItem extends Component<InlineListItemProps> {
     padding: 'none',
     spacing: 'none',
     delimiter: 'none',
-    size: 'medium',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {}
+    size: 'medium'
   }
 
   ref: Element | null = null
@@ -71,14 +70,11 @@ class InlineListItem extends Component<InlineListItemProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   render() {

package/src/InlineList/InlineListItem/props.ts

@@ -39,11 +39,27 @@ import type {
 } from '@instructure/shared-types'
 
 type InlineListItemOwnProps = {
-  children: React.ReactNode | ((...args: any[]) => React.ReactNode)
+  children: React.ReactNode | (() => React.ReactNode)
+  /**
+   * Inherits delimiter from the parent InlineList component
+   */
   delimiter?: 'none' | 'pipe' | 'slash' | 'arrow'
   size?: '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?: 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?: Spacing
+  /**
+   * Inherits itemSpacing from the parent InlineList component
+   */
   spacing?:
     | 'none'
     | 'xxx-small'
@@ -54,6 +70,9 @@ type InlineListItemOwnProps = {
     | 'large'
     | 'x-large'
     | 'xx-large'
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef?: (element: Element | null) => void
 }
 
@@ -69,26 +88,10 @@ type InlineListItemStyle = ComponentStyle<'inlineListItem' | 'delimiter'>
 
 const propTypes: PropValidators<PropKeys> = {
   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',
@@ -100,9 +103,6 @@ const propTypes: PropValidators<PropKeys> = {
     'x-large',
     'xx-large'
   ]),
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 }
 

package/src/InlineList/__examples__/InlineList.examples.tsx

@@ -21,13 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react'
+
 import { InlineList } from '../index'
 
+import type { StoryConfig } from '@instructure/ui-test-utils'
+import type { InlineListProps } from '../props'
+
 export default {
   sectionProp: 'size',
-  // @ts-expect-error ts-migrate(6133) FIXME: 'props' is declared but its value is never read.
-  getComponentProps: (props) => {
+  getComponentProps: () => {
     return {
       children: [
         <InlineList.Item key="1">Oranges</InlineList.Item>,
@@ -36,7 +40,6 @@ export default {
       ]
     }
   },
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
   filter: (props) => {
     return (
       // itemSpacing has no affect on the list if the delimiter prop is set
@@ -44,4 +47,4 @@ export default {
       props.delimiter !== 'none' && props.itemSpacing !== 'none'
     )
   }
-}
+} as StoryConfig<InlineListProps>

package/src/InlineList/index.tsx

@@ -36,16 +36,14 @@ import type { InlineListProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 @testable()
 class InlineList extends Component<InlineListProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     itemSpacing: 'none',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {},
     as: 'ul',
     margin: 'none',
     delimiter: 'none',

package/src/InlineList/props.ts

@@ -36,11 +36,23 @@ import type {
 } from '@instructure/shared-types'
 
 type InlineListOwnProps = {
-  children?: React.ReactNode // TODO: oneOf([InlineListItem])
+  /**
+   * Only accepts `<InlineList.Item>` as a child
+   */
+  //TODO type children better e.g.:ChildrenPropTypes.oneOf([InlineListItem])
+  children?: React.ReactNode
   as?: '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?: Spacing
   size?: 'small' | 'medium' | 'large'
   delimiter?: 'none' | 'pipe' | 'slash' | 'arrow'
+  /**
+   * Sets the margin separating each ListItem.
+   */
   itemSpacing?:
     | 'none'
     | 'xxx-small'
@@ -51,6 +63,9 @@ type InlineListOwnProps = {
     | 'large'
     | 'x-large'
     | 'xx-large'
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef?: (element: Element | null) => void
 }
 
@@ -62,22 +77,11 @@ type InlineListProps = InlineListOwnProps &
   OtherHTMLAttributes<InlineListOwnProps>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * 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',
@@ -89,9 +93,6 @@ const propTypes: PropValidators<PropKeys> = {
     'x-large',
     'xx-large'
   ]),
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 }
 

package/src/List/ListItem/index.tsx

@@ -42,6 +42,7 @@ import type { ListItemProps } from './props'
 parent: List
 id: List.Item
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -54,9 +55,7 @@ class ListItem extends Component<ListItemProps> {
     padding: 'none',
     spacing: 'none',
     delimiter: 'none',
-    size: 'medium',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {}
+    size: 'medium'
   }
 
   ref: Element | null = null
@@ -72,14 +71,11 @@ class ListItem extends Component<ListItemProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   render() {

package/src/List/ListItem/props.ts

@@ -39,11 +39,27 @@ import type {
 } from '@instructure/shared-types'
 
 type ListItemOwnProps = {
-  children: React.ReactNode | ((...args: any[]) => React.ReactNode)
+  children: React.ReactNode | (() => React.ReactNode)
+  /**
+   * Inherits delimiter from the parent List component.
+   */
   delimiter?: 'none' | 'dashed' | 'solid'
   size?: '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?: 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?: Spacing
+  /**
+   * Inherits itemSpacing from the parent List component
+   */
   spacing?:
     | 'none'
     | 'xxx-small'
@@ -54,6 +70,9 @@ type ListItemOwnProps = {
     | 'large'
     | 'x-large'
     | 'xx-large'
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef?: (element: Element | null) => void
 }
 
@@ -69,26 +88,10 @@ type ListItemStyle = ComponentStyle<'listItem'>
 
 const propTypes: PropValidators<PropKeys> = {
   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',
@@ -100,9 +103,6 @@ const propTypes: PropValidators<PropKeys> = {
     'x-large',
     'xx-large'
   ]),
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 }
 

package/src/List/__examples__/List.examples.tsx

@@ -21,13 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react'
+
 import { List } from '../index'
 
+import type { StoryConfig } from '@instructure/ui-test-utils'
+import type { ListProps } from '../props'
+
 export default {
   sectionProp: 'size',
-  // @ts-expect-error ts-migrate(6133) FIXME: 'props' is declared but its value is never read.
-  getComponentProps: (props) => {
+  getComponentProps: () => {
     return {
       children: [
         <List.Item key="1">Oranges</List.Item>,
@@ -36,11 +40,10 @@ export default {
       ]
     }
   },
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
   filter: (props) => {
     return (
-      (['dashed', 'solid'].includes(props.delimiter) && props.as === 'ol') ||
+      (['dashed', 'solid'].includes(props.delimiter!) && props.as === 'ol') ||
       (props.delimiter !== 'none' && props.itemSpacing !== 'none')
     )
   }
-}
+} as StoryConfig<ListProps>

package/src/List/index.tsx

@@ -43,6 +43,7 @@ import type { ListProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -52,14 +53,11 @@ class List extends Component<ListProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     as: 'ul',
     delimiter: 'none',
     isUnstyled: false,
     size: 'medium',
-    itemSpacing: 'none',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {}
+    itemSpacing: 'none'
   }
 
   static Item = ListItem
@@ -77,14 +75,11 @@ class List extends Component<ListProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   renderChildren() {