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

package/es/List/props.js

@@ -0,0 +1,60 @@
+/*
+ * 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';
+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']),
+  elementRef: PropTypes.func
+};
+const allowedProps = ['children', 'as', 'delimiter', 'isUnstyled', 'margin', 'size', 'itemSpacing', 'elementRef'];
+export { propTypes, allowedProps };

package/lib/InlineList/InlineListItem/index.js

@@ -11,8 +11,6 @@ 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 _testable = require("@instructure/ui-testable/lib/testable.js");
@@ -25,6 +23,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 const _excluded = ["delimiter", "size", "margin", "padding", "elementRef", "children", "spacing", "styles"];
 
 var _dec, _dec2, _class, _class2, _temp;
@@ -56,7 +56,7 @@ let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
           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.inlineListItem,
+      css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
       as: "li",
       margin: margin,
       padding: padding,
@@ -64,46 +64,13 @@ let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       maxWidth: "100%",
       elementRef: elementRef
     }), children, (0, _emotion.jsx)("span", {
-      css: styles.delimiter,
+      css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
       "aria-hidden": "true"
     }));
   }
 
-}, _class2.displayName = "InlineListItem", _class2.componentId = 'InlineList.Item', _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,
-  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']),
-  elementRef: _propTypes.default.func
-}, _class2.defaultProps = {
+}, _class2.displayName = "InlineListItem", _class2.componentId = 'InlineList.Item', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   padding: 'none',
-  margin: void 0,
   spacing: 'none',
   delimiter: 'none',
   size: 'medium',

package/lib/InlineList/InlineListItem/props.js

@@ -0,0 +1,68 @@
+"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 _emotion = require("@instructure/emotion");
+
+/*
+ * 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 = {
+  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']),
+  elementRef: _propTypes.default.func
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'delimiter', 'size', 'margin', 'padding', 'spacing', 'elementRef'];
+exports.allowedProps = allowedProps;

package/lib/InlineList/index.js

@@ -13,22 +13,18 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _View = require("@instructure/ui-view/lib/View");
 
-var _emotion = require("@instructure/emotion");
-
 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 _InlineListItem = require("./InlineListItem");
 
+var _props = require("./props");
+
 const _excluded = ["as", "margin", "elementRef"];
 
 var _dec, _class, _class2, _temp;
@@ -66,28 +62,7 @@ let InlineList = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
     }), this.renderChildren());
   }
 
-}, _class2.displayName = "InlineList", _class2.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']),
-  elementRef: _propTypes.default.func
-}, _class2.defaultProps = {
+}, _class2.displayName = "InlineList", _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   children: null,
   itemSpacing: 'none',
   elementRef: el => {},

package/lib/InlineList/props.js

@@ -0,0 +1,65 @@
+"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 _InlineListItem = require("./InlineListItem");
+
+/*
+ * 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 `<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']),
+  elementRef: _propTypes.default.func
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'as', 'margin', 'size', 'delimiter', 'itemSpacing', 'elementRef'];
+exports.allowedProps = allowedProps;

package/lib/List/ListItem/index.js

@@ -11,8 +11,6 @@ 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 _testable = require("@instructure/ui-testable/lib/testable.js");
@@ -25,6 +23,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 const _excluded = ["delimiter", "spacing", "size", "margin", "padding", "elementRef", "children", "styles"];
 
 var _dec, _dec2, _class, _class2, _temp;
@@ -56,7 +56,7 @@ let ListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
           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.listItem,
+      css: styles === null || styles === void 0 ? void 0 : styles.listItem,
       as: "li",
       margin: margin,
       padding: padding,
@@ -65,41 +65,8 @@ let ListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     }), children);
   }
 
-}, _class2.displayName = "ListItem", _class2.componentId = 'List.Item', _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,
-  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']),
-  elementRef: _propTypes.default.func
-}, _class2.defaultProps = {
+}, _class2.displayName = "ListItem", _class2.componentId = 'List.Item', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   padding: 'none',
-  margin: void 0,
   spacing: 'none',
   delimiter: 'none',
   size: 'medium',

package/lib/List/ListItem/props.js

@@ -0,0 +1,68 @@
+"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 _emotion = require("@instructure/emotion");
+
+/*
+ * 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 = {
+  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']),
+  elementRef: _propTypes.default.func
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'delimiter', 'size', 'margin', 'padding', 'spacing', 'elementRef'];
+exports.allowedProps = allowedProps;