@instructure/ui-options 8.14.1-snapshot.63 → 8.14.1-snapshot.66

package/es/Options/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react';
+import React, { Component, Children } from 'react';
 import { omitProps, matchComponentTypes, callRenderProp, safeCloneElement } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { uid } from '@instructure/uid';
@@ -36,13 +36,13 @@ import generateComponentTheme from './theme';
 import { Item } from './Item';
 import { Separator } from './Separator';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 let Options = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Options extends Component {
   constructor() {
     super(...arguments);
@@ -89,13 +89,13 @@ let Options = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 =
     }, callRenderProp(renderLabel));
   }
 
-  renderSubList(children) {
+  renderSubList(subOptions) {
     const styles = this.props.styles;
     return jsx(Item, {
       as: this.childAs,
       role: "presentation",
       css: styles === null || styles === void 0 ? void 0 : styles.label
-    }, children);
+    }, subOptions);
   }
 
   renderChildren() {

package/lib/Options/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Options = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _uiReactUtils = require("@instructure/ui-react-utils");
 
@@ -83,13 +85,13 @@ let Options = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     }, (0, _uiReactUtils.callRenderProp)(renderLabel));
   }
 
-  renderSubList(children) {
+  renderSubList(subOptions) {
     const styles = this.props.styles;
     return (0, _emotion.jsx)(_Item.Item, {
       as: this.childAs,
       role: "presentation",
       css: styles === null || styles === void 0 ? void 0 : styles.label
-    }, children);
+    }, subOptions);
   }
 
   renderChildren() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.14.1-snapshot.63+2acf47d5b",
+  "version": "8.14.1-snapshot.66+ff0decd44",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,22 +24,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-color-utils": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-test-locator": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-test-utils": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-themes": "8.14.1-snapshot.63+2acf47d5b"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-color-utils": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-test-locator": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-themes": "8.14.1-snapshot.66+ff0decd44"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/shared-types": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-icons": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-prop-types": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-react-utils": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-testable": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-view": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/uid": "8.14.1-snapshot.63+2acf47d5b",
+    "@instructure/emotion": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/shared-types": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-icons": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-prop-types": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-testable": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-view": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/uid": "8.14.1-snapshot.66+ff0decd44",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "2acf47d5bc73bd07f4f5228bdc7654a3df997d3e"
+  "gitHead": "ff0decd44fd390bd7f50885610373d2c9c793053"
 }

package/src/Options/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import React, { Component, Children } from 'react'
 
 import {
   omitProps,
@@ -42,10 +42,18 @@ import generateStyles from './styles'
 import generateComponentTheme from './theme'
 
 import { Item } from './Item'
+import type { OptionsItemProps } from './Item/props'
 import { Separator } from './Separator'
+import type { OptionsSeparatorProps } from './Separator/props'
+
 import type { OptionsProps } from './props'
 import { allowedProps, propTypes } from './props'
 
+type ItemChild = React.ComponentElement<OptionsItemProps, Item>
+type SeparatorChild = React.ComponentElement<OptionsSeparatorProps, Separator>
+type OptionsChild = React.ComponentElement<OptionsProps, Options>
+type OptionsChildren = (ItemChild | SeparatorChild | OptionsChild)[]
+
 /**
 ---
 category: components
@@ -109,11 +117,11 @@ class Options extends Component<OptionsProps> {
     )
   }
 
-  renderSubList(children: React.ReactNode) {
+  renderSubList(subOptions: OptionsChild) {
     const { styles } = this.props
     return (
       <Item as={this.childAs} role="presentation" css={styles?.label}>
-        {children}
+        {subOptions}
       </Item>
     )
   }
@@ -121,12 +129,12 @@ class Options extends Component<OptionsProps> {
   renderChildren() {
     const { children } = this.props
 
-    return Children.map(children, (child) => {
-      if (matchComponentTypes(child, ['Options'])) {
+    return Children.map(children as OptionsChildren, (child) => {
+      if (matchComponentTypes<OptionsChild>(child, ['Options'])) {
         return this.renderSubList(child)
       }
       if (matchComponentTypes(child, ['Item', 'Separator'])) {
-        return safeCloneElement(child as ReactElement, { as: this.childAs })
+        return safeCloneElement(child, { as: this.childAs })
       }
       return undefined
     })