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

package/es/Select/index.js

@@ -48,6 +48,7 @@ import generateComponentTheme from './theme';
 import { Group } from './Group';
 import { Option } from './Option';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
@@ -55,7 +56,6 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 @tsProps
 **/
-
 let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends Component {
   constructor() {
     super(...arguments);
@@ -120,6 +120,14 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     return this.ref;
   }
 
+  get childrenArray() {
+    return Children.toArray(this.props.children);
+  }
+
+  getGroupChildrenArray(group) {
+    return Children.toArray(group.props.children);
+  }
+
   get focused() {
     return this.ref ? isActiveElement(this.ref) : false;
   }
@@ -140,11 +148,10 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
 
   get highlightedOptionId() {
     let highlightedOptionId;
-    Children.toArray(this.props.children).forEach(child => {
+    this.childrenArray.forEach(child => {
       if (matchComponentTypes(child, [Group])) {
         // group found
-        ;
-        Children.toArray(child.props.children).forEach(option => {
+        this.getGroupChildrenArray(child).forEach(option => {
           // check options in group
           if (option.props.isHighlighted) {
             highlightedOptionId = option.props.id;
@@ -162,11 +169,10 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
 
   get selectedOptionId() {
     const selectedOptionId = [];
-    Children.toArray(this.props.children).forEach(child => {
+    this.childrenArray.forEach(child => {
       if (matchComponentTypes(child, [Group])) {
         // group found
-        ;
-        Children.toArray(child.props.children).forEach(option => {
+        this.getGroupChildrenArray(child).forEach(option => {
           // check options in group
           if (option.props.isSelected) {
             selectedOptionId.push(option.props.id);

package/lib/Select/index.js

@@ -132,6 +132,14 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     return this.ref;
   }
 
+  get childrenArray() {
+    return _react.Children.toArray(this.props.children);
+  }
+
+  getGroupChildrenArray(group) {
+    return _react.Children.toArray(group.props.children);
+  }
+
   get focused() {
     return this.ref ? (0, _isActiveElement.isActiveElement)(this.ref) : false;
   }
@@ -152,13 +160,10 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
 
   get highlightedOptionId() {
     let highlightedOptionId;
-
-    _react.Children.toArray(this.props.children).forEach(child => {
+    this.childrenArray.forEach(child => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
         // group found
-        ;
-
-        _react.Children.toArray(child.props.children).forEach(option => {
+        this.getGroupChildrenArray(child).forEach(option => {
           // check options in group
           if (option.props.isHighlighted) {
             highlightedOptionId = option.props.id;
@@ -171,19 +176,15 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
         }
       }
     });
-
     return highlightedOptionId;
   }
 
   get selectedOptionId() {
     const selectedOptionId = [];
-
-    _react.Children.toArray(this.props.children).forEach(child => {
+    this.childrenArray.forEach(child => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
         // group found
-        ;
-
-        _react.Children.toArray(child.props.children).forEach(option => {
+        this.getGroupChildrenArray(child).forEach(option => {
           // check options in group
           if (option.props.isSelected) {
             selectedOptionId.push(option.props.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.14.1-snapshot.63+2acf47d5b",
+  "version": "8.14.1-snapshot.66+ff0decd44",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,30 +24,30 @@
   },
   "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-dom-utils": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-form-field": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-icons": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-options": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-popover": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-position": "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-selectable": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-testable": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-text-input": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-utils": "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-dom-utils": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-form-field": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-icons": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-options": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-popover": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-position": "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-selectable": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-testable": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-text-input": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-utils": "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": {
@@ -57,5 +57,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "2acf47d5bc73bd07f4f5228bdc7654a3df997d3e"
+  "gitHead": "ff0decd44fd390bd7f50885610373d2c9c793053"
 }

package/src/Select/index.tsx

@@ -65,13 +65,19 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { Group } from './Group'
+import type { SelectGroupProps } from './Group/props'
 import { Option } from './Option'
+import type { SelectOptionProps } from './Option/props'
 
 import type { RenderSelectOptionLabel } from './Option/props'
 
 import type { SelectProps } from './props'
 import { allowedProps, propTypes } from './props'
 
+type GroupChild = React.ComponentElement<SelectGroupProps, Group>
+type OptionChild = React.ComponentElement<SelectOptionProps, Option>
+type SelectChildren = (GroupChild | OptionChild)[]
+
 /**
 ---
 category: components
@@ -141,6 +147,14 @@ class Select extends Component<SelectProps> {
     return this.ref
   }
 
+  get childrenArray() {
+    return Children.toArray(this.props.children) as SelectChildren
+  }
+
+  getGroupChildrenArray(group: GroupChild) {
+    return Children.toArray(group.props.children) as OptionChild[]
+  }
+
   get focused() {
     return this.ref ? isActiveElement(this.ref) : false
   }
@@ -160,12 +174,10 @@ class Select extends Component<SelectProps> {
   get highlightedOptionId(): string | undefined {
     let highlightedOptionId: string | undefined
 
-    Children.toArray(this.props.children).forEach((child) => {
-      if (matchComponentTypes(child, [Group])) {
+    this.childrenArray.forEach((child) => {
+      if (matchComponentTypes<GroupChild>(child, [Group])) {
         // group found
-        ;(
-          Children.toArray((child as Group).props.children) as Option[]
-        ).forEach((option) => {
+        this.getGroupChildrenArray(child).forEach((option) => {
           // check options in group
           if (option.props.isHighlighted) {
             highlightedOptionId = option.props.id
@@ -173,8 +185,8 @@ class Select extends Component<SelectProps> {
         })
       } else {
         // ungrouped option found
-        if ((child as Option).props.isHighlighted) {
-          highlightedOptionId = (child as Option).props.id
+        if (child.props.isHighlighted) {
+          highlightedOptionId = child.props.id
         }
       }
     })
@@ -185,12 +197,10 @@ class Select extends Component<SelectProps> {
   get selectedOptionId() {
     const selectedOptionId: string[] = []
 
-    Children.toArray(this.props.children).forEach((child) => {
-      if (matchComponentTypes(child, [Group])) {
+    this.childrenArray.forEach((child) => {
+      if (matchComponentTypes<GroupChild>(child, [Group])) {
         // group found
-        ;(
-          Children.toArray((child as Group).props.children) as Option[]
-        ).forEach((option) => {
+        this.getGroupChildrenArray(child).forEach((option) => {
           // check options in group
           if (option.props.isSelected) {
             selectedOptionId.push(option.props.id)
@@ -198,8 +208,8 @@ class Select extends Component<SelectProps> {
         })
       } else {
         // ungrouped option found
-        if ((child as Option).props.isSelected) {
-          selectedOptionId.push((child as Option).props.id)
+        if (child.props.isSelected) {
+          selectedOptionId.push(child.props.id)
         }
       }
     })
@@ -331,7 +341,7 @@ class Select extends Component<SelectProps> {
   }
 
   renderOption(
-    option: Option,
+    option: OptionChild,
     data: Pick<SelectableRender, 'getOptionProps' | 'getDisabledOptionProps'>
   ) {
     const { getOptionProps, getDisabledOptionProps } = data
@@ -390,7 +400,7 @@ class Select extends Component<SelectProps> {
   }
 
   renderGroup(
-    group: Group,
+    group: GroupChild,
     data: Pick<
       SelectableRender,
       'getOptionProps' | 'getDisabledOptionProps'
@@ -426,7 +436,7 @@ class Select extends Component<SelectProps> {
         renderLabel={renderLabel}
         {...omitProps(rest, [...Options.allowedProps, ...Group.allowedProps])}
       >
-        {Children.map(children as Option[], (child) => {
+        {Children.map(children as OptionChild[], (child) => {
           return this.renderOption(child, {
             getOptionProps,
             getDisabledOptionProps
@@ -471,21 +481,21 @@ class Select extends Component<SelectProps> {
           {...getListProps({ as: 'ul', elementRef: this.handleListRef })}
         >
           {isShowingOptions
-            ? Children.map(children, (child, index) => {
+            ? Children.map(children as SelectChildren, (child, index) => {
                 if (!child || !matchComponentTypes(child, [Group, Option])) {
                   return // ignore invalid children
                 }
-                if (matchComponentTypes(child, [Option])) {
+                if (matchComponentTypes<OptionChild>(child, [Option])) {
                   lastWasGroup = false
-                  return this.renderOption(child as Option, {
+                  return this.renderOption(child, {
                     getOptionProps,
                     getDisabledOptionProps
                   })
                 }
-                if (matchComponentTypes(child, [Group])) {
+                if (matchComponentTypes<GroupChild>(child, [Group])) {
                   const afterGroup = lastWasGroup
                   lastWasGroup = true
-                  return this.renderGroup(child as Group, {
+                  return this.renderGroup(child, {
                     getOptionProps,
                     getDisabledOptionProps,
                     // for rendering separators appropriately