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

package/lib/List/index.js

@@ -17,16 +17,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _View = require("@instructure/ui-view/lib/View");
 
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 
-var _Children = require("@instructure/ui-prop-types/lib/Children.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _ListItem = require("./ListItem");
@@ -37,6 +33,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 const _excluded = ["as", "margin", "isUnstyled", "elementRef", "styles"];
 
 var _dec, _dec2, _class, _class2, _temp;
@@ -77,7 +75,7 @@ let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           styles = _this$props.styles,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
-      css: styles.list,
+      css: styles === null || styles === void 0 ? void 0 : styles.list,
       as: as,
       margin: margin,
       elementRef: elementRef,
@@ -85,47 +83,11 @@ let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     }), this.renderChildren());
   }
 
-}, _class2.displayName = "List", _class2.componentId = 'List', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-
-  /**
-   * 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']),
-  elementRef: _propTypes.default.func
-}, _class2.defaultProps = {
+}, _class2.displayName = "List", _class2.componentId = 'List', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   children: null,
   as: 'ul',
   delimiter: 'none',
   isUnstyled: false,
-  margin: void 0,
   size: 'medium',
   itemSpacing: 'none',
   elementRef: el => {}

package/lib/List/props.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+
+var _emotion = require("@instructure/emotion");
+
+var _ListItem = require("./ListItem");
+
+/*
+ * 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 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']),
+  elementRef: _propTypes.default.func
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'as', 'delimiter', 'isUnstyled', 'margin', 'size', 'itemSpacing', 'elementRef'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-list",
-  "version": "8.8.0",
+  "version": "8.8.1-snapshot.63+ec21bbc1d",
   "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.8.0",
-    "@instructure/emotion": "8.8.0",
-    "@instructure/ui-prop-types": "8.8.0",
-    "@instructure/ui-react-utils": "8.8.0",
-    "@instructure/ui-testable": "8.8.0",
-    "@instructure/ui-view": "8.8.0",
+    "@instructure/console": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/emotion": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/shared-types": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-prop-types": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-react-utils": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-testable": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-view": "8.8.1-snapshot.63+ec21bbc1d",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/shared-types": "8.8.0",
-    "@instructure/ui-babel-preset": "8.8.0",
-    "@instructure/ui-color-utils": "8.8.0",
-    "@instructure/ui-test-locator": "8.8.0",
-    "@instructure/ui-test-utils": "8.8.0",
-    "@instructure/ui-themes": "8.8.0"
+    "@instructure/ui-babel-preset": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-color-utils": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-test-locator": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-test-utils": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-themes": "8.8.1-snapshot.63+ec21bbc1d"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -47,5 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "ec21bbc1dcdd8567b11f2c15f5fadd16709d7e3d"
 }

package/src/InlineList/InlineListItem/index.tsx

@@ -23,17 +23,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 { InlineListItemProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { InlineListItemProps } from './props'
 
 /**
 ---
@@ -46,49 +47,10 @@ id: InlineList.Item
 class InlineListItem extends Component<InlineListItemProps> {
   static readonly componentId = 'InlineList.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 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'
-    ]),
-    elementRef: PropTypes.func
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     padding: 'none',
-    margin: undefined,
     spacing: 'none',
     delimiter: 'none',
     size: 'medium',
@@ -123,7 +85,7 @@ class InlineListItem extends Component<InlineListItemProps> {
     return (
       <View
         {...passthroughProps(rest)}
-        css={styles.inlineListItem}
+        css={styles?.inlineListItem}
         as="li"
         margin={margin}
         padding={padding}
@@ -132,7 +94,7 @@ class InlineListItem extends Component<InlineListItemProps> {
         elementRef={elementRef}
       >
         {children}
-        <span css={styles.delimiter} aria-hidden="true" />
+        <span css={styles?.delimiter} aria-hidden="true" />
       </View>
     )
   }

package/src/InlineList/InlineListItem/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 InlineListItemOwnProps = {
+  children: React.ReactNode | ((...args: any[]) => React.ReactNode)
+  delimiter?: 'none' | 'pipe' | 'slash' | 'arrow'
+  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 InlineListItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type InlineListItemProps = InlineListItemOwnProps & WithStyleProps
+
+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',
+    '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 { InlineListItemProps }
+export { propTypes, allowedProps }

package/src/InlineList/InlineListItem/styles.ts

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

package/src/InlineList/InlineListItem/theme.ts

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

package/src/InlineList/index.tsx

@@ -22,16 +22,15 @@
  * SOFTWARE.
  */
 import React, { Children, Component, ReactElement } from 'react'
-import PropTypes from 'prop-types'
 
 import { View } from '@instructure/ui-view'
-import { ThemeablePropTypes } from '@instructure/emotion'
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import { testable } from '@instructure/ui-testable'
 
 import { InlineListItem } from './InlineListItem'
-import { InlineListProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { InlineListProps } from './props'
 
 /**
 ---
@@ -40,37 +39,8 @@ category: components
 **/
 @testable()
 class InlineList extends Component<InlineListProps> {
-  static 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'
-    ]),
-    elementRef: PropTypes.func
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     children: null,
     itemSpacing: 'none',