@instructure/ui-list 8.8.0 → 8.8.1-snapshot.63

package/src/InlineList/props.ts

@@ -0,0 +1,102 @@
+/*
+ * 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 React from 'react'
+import PropTypes from 'prop-types'
+
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
+import { ThemeablePropTypes } from '@instructure/emotion'
+import { InlineListItem } from './InlineListItem'
+
+import type { Spacing } from '@instructure/emotion'
+import type { PropValidators } from '@instructure/shared-types'
+
+type InlineListOwnProps = {
+  children?: React.ReactNode // TODO: oneOf([InlineListItem])
+  as?: 'ul' | 'ol'
+  margin?: Spacing
+  size?: 'small' | 'medium' | 'large'
+  delimiter?: 'none' | 'pipe' | 'slash' | 'arrow'
+  itemSpacing?:
+    | 'none'
+    | 'xxx-small'
+    | 'xx-small'
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+  elementRef?: (...args: any[]) => any
+}
+
+type PropKeys = keyof InlineListOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type InlineListProps = 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',
+    'xx-small',
+    'x-small',
+    'small',
+    'medium',
+    'large',
+    'x-large',
+    'xx-large'
+  ]),
+  elementRef: PropTypes.func
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'as',
+  'margin',
+  'size',
+  'delimiter',
+  'itemSpacing',
+  'elementRef'
+]
+
+export type { InlineListProps }
+export { propTypes, allowedProps }

package/src/List/ListItem/index.tsx

@@ -24,17 +24,18 @@
 
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { View } from '@instructure/ui-view'
 import { testable } from '@instructure/ui-testable'
 import { passthroughProps } from '@instructure/ui-react-utils'
 
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { ListItemProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { ListItemProps } from './props'
 
 /**
 ---
@@ -47,49 +48,10 @@ id: List.Item
 class ListItem extends Component<ListItemProps> {
   static readonly componentId = 'List.Item'
 
-  static 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]).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'
-    ]),
-    elementRef: PropTypes.func
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     padding: 'none',
-    margin: undefined,
     spacing: 'none',
     delimiter: 'none',
     size: 'medium',
@@ -124,7 +86,7 @@ class ListItem extends Component<ListItemProps> {
     return (
       <View
         {...passthroughProps(rest)}
-        css={styles.listItem}
+        css={styles?.listItem}
         as="li"
         margin={margin}
         padding={padding}

package/src/List/ListItem/props.ts

@@ -0,0 +1,105 @@
+/*
+ * 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 React from 'react'
+import PropTypes from 'prop-types'
+
+import { ThemeablePropTypes } from '@instructure/emotion'
+
+import type { Spacing, WithStyleProps } from '@instructure/emotion'
+import type { PropValidators } from '@instructure/shared-types'
+
+type ListItemOwnProps = {
+  children: React.ReactNode | ((...args: any[]) => React.ReactNode)
+  delimiter?: 'none' | 'dashed' | 'solid'
+  size?: 'small' | 'medium' | 'large'
+  margin?: Spacing
+  padding?: Spacing
+  spacing?:
+    | 'none'
+    | 'xxx-small'
+    | 'xx-small'
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+  elementRef?: (...args: any[]) => any
+}
+
+type PropKeys = keyof ListItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ListItemProps = ListItemOwnProps & WithStyleProps
+
+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',
+    'xx-small',
+    'x-small',
+    'small',
+    'medium',
+    'large',
+    'x-large',
+    'xx-large'
+  ]),
+  elementRef: PropTypes.func
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'delimiter',
+  'size',
+  'margin',
+  'padding',
+  'spacing',
+  'elementRef'
+]
+
+export type { ListItemProps }
+export { propTypes, allowedProps }

package/src/List/ListItem/styles.ts

@@ -24,7 +24,7 @@
 
 import { logError as error } from '@instructure/console'
 import { ListItemTheme } from '@instructure/shared-types'
-import { ListItemProps } from './types'
+import { ListItemProps } from './props'
 
 /**
  * ---

package/src/List/ListItem/theme.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Theme, ThemeSpecificStyle } from '@instructure/ui-themes'
+import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes'
 import { ListItemTheme } from '@instructure/shared-types'
 
 /**

package/src/List/index.tsx

@@ -24,20 +24,20 @@
 
 /** @jsx jsx */
 import { Children, Component, ReactElement } from 'react'
-import PropTypes from 'prop-types'
 
 import { View } from '@instructure/ui-view'
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import { testable } from '@instructure/ui-testable'
 
 import { ListItem } from './ListItem'
 
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { ListProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { ListProps } from './props'
 
 /**
 ---
@@ -49,54 +49,13 @@ category: components
 class List extends Component<ListProps> {
   static readonly componentId = 'List'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    /**
-     * 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'
-    ]),
-    elementRef: PropTypes.func
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     children: null,
     as: 'ul',
     delimiter: 'none',
     isUnstyled: false,
-    margin: undefined,
     size: 'medium',
     itemSpacing: 'none',
     // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
@@ -135,7 +94,7 @@ class List extends Component<ListProps> {
     return (
       <View
         {...passthroughProps(rest)}
-        css={styles.list}
+        css={styles?.list}
         as={as}
         margin={margin}
         elementRef={elementRef}

package/src/List/props.ts

@@ -0,0 +1,111 @@
+/*
+ * 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'
+
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
+import { ThemeablePropTypes } from '@instructure/emotion'
+import { ListItem } from './ListItem'
+
+import type { Spacing, WithStyleProps } from '@instructure/emotion'
+import type { PropValidators } from '@instructure/shared-types'
+import React from 'react'
+
+type ListOwnProps = {
+  children?: React.ReactNode // TODO: oneOf([ListItem])
+  as?: 'ul' | 'ol'
+  delimiter?: 'none' | 'dashed' | 'solid'
+  isUnstyled?: boolean
+  margin?: Spacing
+  size?: 'small' | 'medium' | 'large'
+  itemSpacing?:
+    | 'none'
+    | 'xxx-small'
+    | 'xx-small'
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+  elementRef?: (...args: any[]) => any
+}
+
+type PropKeys = keyof ListOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ListProps = ListOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * 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'
+  ]),
+  elementRef: PropTypes.func
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'as',
+  'delimiter',
+  'isUnstyled',
+  'margin',
+  'size',
+  'itemSpacing',
+  'elementRef'
+]
+
+export type { ListProps }
+export { propTypes, allowedProps }