@instructure/ui-select 11.7.3-snapshot-4 → 11.7.3-snapshot-7

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-4](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-4) (2026-04-28)
+## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
 
 **Note:** Version bump only for package @instructure/ui-select
 

package/es/Select/v2/index.js

@@ -620,7 +620,6 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
       suppressHydrationWarning: true,
       ...(interaction === 'enabled' && !isEditable && {
         themeOverride: componentTheme => ({
-          //@ts-expect-error TODO-theme-types
           backgroundReadonlyColor: componentTheme.backgroundColor
         })
       })

package/es/Select/v2/styles.js

@@ -25,8 +25,7 @@
 /**
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} _props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, _props) => {
@@ -35,7 +34,6 @@ const generateStyle = (componentTheme, _props) => {
       label: 'select__assistiveText',
       display: 'none'
     },
-    //@ts-expect-error TODO-theme-types
     popoverBorderWidth: componentTheme.popoverBorderWidth
   };
 };

package/lib/Select/v2/index.js

@@ -631,7 +631,6 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       suppressHydrationWarning: true,
       ...(interaction === 'enabled' && !isEditable && {
         themeOverride: componentTheme => ({
-          //@ts-expect-error TODO-theme-types
           backgroundReadonlyColor: componentTheme.backgroundColor
         })
       })

package/lib/Select/v2/styles.js

@@ -31,8 +31,7 @@ exports.default = void 0;
 /**
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} _props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, _props) => {
@@ -41,7 +40,6 @@ const generateStyle = (componentTheme, _props) => {
       label: 'select__assistiveText',
       display: 'none'
     },
-    //@ts-expect-error TODO-theme-types
     popoverBorderWidth: componentTheme.popoverBorderWidth
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "11.7.3-snapshot-4",
+  "version": "11.7.3-snapshot-7",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,30 +15,30 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/ui-dom-utils": "11.7.3-snapshot-4",
-    "@instructure/ui-form-field": "11.7.3-snapshot-4",
-    "@instructure/shared-types": "11.7.3-snapshot-4",
-    "@instructure/ui-icons": "11.7.3-snapshot-4",
-    "@instructure/emotion": "11.7.3-snapshot-4",
-    "@instructure/ui-options": "11.7.3-snapshot-4",
-    "@instructure/ui-popover": "11.7.3-snapshot-4",
-    "@instructure/ui-position": "11.7.3-snapshot-4",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-4",
-    "@instructure/ui-selectable": "11.7.3-snapshot-4",
-    "@instructure/ui-text-input": "11.7.3-snapshot-4",
-    "@instructure/ui-utils": "11.7.3-snapshot-4",
-    "@instructure/ui-view": "11.7.3-snapshot-4",
-    "@instructure/uid": "11.7.3-snapshot-4"
+    "@instructure/emotion": "11.7.3-snapshot-7",
+    "@instructure/shared-types": "11.7.3-snapshot-7",
+    "@instructure/ui-dom-utils": "11.7.3-snapshot-7",
+    "@instructure/ui-form-field": "11.7.3-snapshot-7",
+    "@instructure/ui-icons": "11.7.3-snapshot-7",
+    "@instructure/ui-options": "11.7.3-snapshot-7",
+    "@instructure/ui-popover": "11.7.3-snapshot-7",
+    "@instructure/ui-position": "11.7.3-snapshot-7",
+    "@instructure/ui-text-input": "11.7.3-snapshot-7",
+    "@instructure/ui-selectable": "11.7.3-snapshot-7",
+    "@instructure/ui-themes": "11.7.3-snapshot-7",
+    "@instructure/ui-utils": "11.7.3-snapshot-7",
+    "@instructure/ui-view": "11.7.3-snapshot-7",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-7",
+    "@instructure/uid": "11.7.3-snapshot-7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-4",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-4",
-    "@instructure/ui-scripts": "11.7.3-snapshot-4",
-    "@instructure/ui-themes": "11.7.3-snapshot-4"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-7",
+    "@instructure/ui-color-utils": "11.7.3-snapshot-7",
+    "@instructure/ui-scripts": "11.7.3-snapshot-7"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Select/v2/index.tsx

@@ -112,18 +112,18 @@ const MemoedOption = memo(
   (prevProps, nextProps) => {
     return (
       prevProps.selectOption.props.isHighlighted ===
-      nextProps.selectOption.props.isHighlighted &&
+        nextProps.selectOption.props.isHighlighted &&
       prevProps.selectOption.props.isSelected ===
-      nextProps.selectOption.props.isSelected &&
+        nextProps.selectOption.props.isSelected &&
       prevProps.selectOption.props.isDisabled ===
-      nextProps.selectOption.props.isDisabled &&
+        nextProps.selectOption.props.isDisabled &&
       prevProps.selectOption.props.children ===
-      nextProps.selectOption.props.children &&
+        nextProps.selectOption.props.children &&
       prevProps.selectOption.props.id === nextProps.selectOption.props.id &&
       prevProps.selectOption.props.renderBeforeLabel ===
-      nextProps.selectOption.props.renderBeforeLabel &&
+        nextProps.selectOption.props.renderBeforeLabel &&
       prevProps.selectOption.props.renderAfterLabel ===
-      nextProps.selectOption.props.renderAfterLabel &&
+        nextProps.selectOption.props.renderAfterLabel &&
       prevProps.children === nextProps.children
     )
   }
@@ -334,59 +334,59 @@ class Select extends Component<SelectProps> {
 
     return this.interaction === 'enabled'
       ? {
-        onRequestShowOptions: (event) => {
-          onRequestShowOptions?.(event)
-          const selectedOptionId = this.selectedOptionId
+          onRequestShowOptions: (event) => {
+            onRequestShowOptions?.(event)
+            const selectedOptionId = this.selectedOptionId
 
-          if (selectedOptionId && !Array.isArray(selectedOptionId)) {
-            // highlight selected option on show
-            this.highlightOption(event, selectedOptionId)
-          }
-        },
-        onRequestHideOptions: (event) => {
-          onRequestHideOptions?.(event)
-        },
-        onRequestHighlightOption: (
-          event,
-          { id, direction }: { id?: string; direction?: number }
-        ) => {
-          if (!isShowingOptions) return
-
-          const highlightedOptionId = this.highlightedOptionId
-          // if id exists, use that
-          let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined
-          if (!highlightId) {
-            if (!highlightedOptionId) {
-              // nothing highlighted yet, highlight first option
-              highlightId = this._optionIds[0]
-            } else {
-              // find next id based on direction
-              const index = this._optionIds.indexOf(highlightedOptionId)
-              highlightId =
-                index > -1 ? this._optionIds[index + direction!] : undefined
+            if (selectedOptionId && !Array.isArray(selectedOptionId)) {
+              // highlight selected option on show
+              this.highlightOption(event, selectedOptionId)
             }
-          }
-          if (highlightId) {
-            // only highlight if id exists as a valid option
-            this.highlightOption(event, highlightId)
-          }
-        },
-        onRequestHighlightFirstOption: (event) => {
-          this.highlightOption(event, this._optionIds[0])
-        },
-        onRequestHighlightLastOption: (event) => {
-          this.highlightOption(
+          },
+          onRequestHideOptions: (event) => {
+            onRequestHideOptions?.(event)
+          },
+          onRequestHighlightOption: (
             event,
-            this._optionIds[this._optionIds.length - 1]
-          )
-        },
-        onRequestSelectOption: (event, { id }) => {
-          if (id && this._optionIds.indexOf(id) !== -1) {
-            // only select if id exists as a valid option
-            onRequestSelectOption?.(event, { id })
+            { id, direction }: { id?: string; direction?: number }
+          ) => {
+            if (!isShowingOptions) return
+
+            const highlightedOptionId = this.highlightedOptionId
+            // if id exists, use that
+            let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined
+            if (!highlightId) {
+              if (!highlightedOptionId) {
+                // nothing highlighted yet, highlight first option
+                highlightId = this._optionIds[0]
+              } else {
+                // find next id based on direction
+                const index = this._optionIds.indexOf(highlightedOptionId)
+                highlightId =
+                  index > -1 ? this._optionIds[index + direction!] : undefined
+              }
+            }
+            if (highlightId) {
+              // only highlight if id exists as a valid option
+              this.highlightOption(event, highlightId)
+            }
+          },
+          onRequestHighlightFirstOption: (event) => {
+            this.highlightOption(event, this._optionIds[0])
+          },
+          onRequestHighlightLastOption: (event) => {
+            this.highlightOption(
+              event,
+              this._optionIds[this._optionIds.length - 1]
+            )
+          },
+          onRequestSelectOption: (event, { id }) => {
+            if (id && this._optionIds.indexOf(id) !== -1) {
+              // only select if id exists as a valid option
+              onRequestSelectOption?.(event, { id })
+            }
           }
         }
-      }
       : {}
   }
 
@@ -413,12 +413,12 @@ class Select extends Component<SelectProps> {
       return typeof renderOptionLabel === 'function' &&
         !renderOptionLabel?.prototype?.isReactComponent
         ? (renderOptionLabel as any).bind(null, {
-          id,
-          isDisabled,
-          isSelected,
-          isHighlighted,
-          children
-        })
+            id,
+            isDisabled,
+            isSelected,
+            isHighlighted,
+            children
+          })
         : (renderOptionLabel as React.ReactNode)
     }
 
@@ -539,18 +539,18 @@ class Select extends Component<SelectProps> {
 
     const viewProps: Partial<ViewProps> = isShowingOptions
       ? {
-        display: 'block',
-        overflowY: 'auto',
-        maxHeight:
-          optionsMaxHeight ||
-          this._optionHeight * visibleOptionsCount! -
-          // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
-          (utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
-        maxWidth: optionsMaxWidth || this.width,
-        background: 'primary',
-        elementRef: (node: Element | null) => (this._listView = node),
-        borderRadius: 'inherit'
-      }
+          display: 'block',
+          overflowY: 'auto',
+          maxHeight:
+            optionsMaxHeight ||
+            this._optionHeight * visibleOptionsCount! -
+              // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+              (utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
+          maxWidth: optionsMaxWidth || this.width,
+          background: 'primary',
+          elementRef: (node: Element | null) => (this._listView = node),
+          borderRadius: 'inherit'
+        }
       : { maxHeight: 0 }
 
     return (
@@ -560,30 +560,30 @@ class Select extends Component<SelectProps> {
         >
           {isShowingOptions
             ? Children.map(children as SelectChildren, (child, index) => {
-              if (!child || !matchComponentTypes(child, [Group, Option])) {
-                return // ignore invalid children
-              }
-              if (matchComponentTypes<OptionChild>(child, [Option])) {
-                lastWasGroup = false
-                return this.renderOption(child, {
-                  getOptionProps,
-                  getDisabledOptionProps
-                })
-              }
-              if (matchComponentTypes<GroupChild>(child, [Group])) {
-                const afterGroup = lastWasGroup
-                lastWasGroup = true
-                return this.renderGroup(child, {
-                  getOptionProps,
-                  getDisabledOptionProps,
-                  // for rendering separators appropriately
-                  isFirstChild: index === 0,
-                  isLastChild: index === Children.count(children) - 1,
-                  afterGroup
-                })
-              }
-              return
-            })
+                if (!child || !matchComponentTypes(child, [Group, Option])) {
+                  return // ignore invalid children
+                }
+                if (matchComponentTypes<OptionChild>(child, [Option])) {
+                  lastWasGroup = false
+                  return this.renderOption(child, {
+                    getOptionProps,
+                    getDisabledOptionProps
+                  })
+                }
+                if (matchComponentTypes<GroupChild>(child, [Group])) {
+                  const afterGroup = lastWasGroup
+                  lastWasGroup = true
+                  return this.renderGroup(child, {
+                    getOptionProps,
+                    getDisabledOptionProps,
+                    // for rendering separators appropriately
+                    isFirstChild: index === 0,
+                    isLastChild: index === Children.count(children) - 1,
+                    afterGroup
+                  })
+                }
+                return
+              })
             : null}
         </Options>
       </View>
@@ -622,8 +622,8 @@ class Select extends Component<SelectProps> {
             return position === 'before'
               ? option.props.renderBeforeLabel
               : option.props.renderAfterLabel
-                ? option.props.renderAfterLabel
-                : this.renderIcon()
+              ? option.props.renderAfterLabel
+              : this.renderIcon()
           }
         }
       } else {
@@ -632,8 +632,8 @@ class Select extends Component<SelectProps> {
           return position === 'before'
             ? child.props.renderBeforeLabel
             : child.props.renderAfterLabel
-              ? child.props.renderAfterLabel
-              : this.renderIcon()
+            ? child.props.renderAfterLabel
+            : this.renderIcon()
         }
       }
     }
@@ -730,26 +730,26 @@ class Select extends Component<SelectProps> {
     // popup buttons rather than comboboxes.
     const overrideProps: Partial<TextInputProps> = !isEditable
       ? {
-        // We need role="combobox" for the 'open list' button shortcut to work
-        // with desktop screenreaders.
-        // But desktop Safari with Voiceover does not support proper combobox
-        // handling, a 'button' role is set as a workaround.
-        // See https://bugs.webkit.org/show_bug.cgi?id=236881
-        // Also on iOS Chrome with role='combobox' it announces unnecessarily
-        // that its 'read-only' and that this is a 'textfield', see INSTUI-4500
-        role:
-          utils.isSafari() ||
+          // We need role="combobox" for the 'open list' button shortcut to work
+          // with desktop screenreaders.
+          // But desktop Safari with Voiceover does not support proper combobox
+          // handling, a 'button' role is set as a workaround.
+          // See https://bugs.webkit.org/show_bug.cgi?id=236881
+          // Also on iOS Chrome with role='combobox' it announces unnecessarily
+          // that its 'read-only' and that this is a 'textfield', see INSTUI-4500
+          role:
+            utils.isSafari() ||
             utils.isAndroidOrIOS() ||
             (interaction === 'disabled' && utils.isChromium())
-            ? 'button'
-            : 'combobox',
-        title: inputValue,
-        'aria-autocomplete': undefined,
-        'aria-readonly': true
-      }
+              ? 'button'
+              : 'combobox',
+          title: inputValue,
+          'aria-autocomplete': undefined,
+          'aria-readonly': true
+        }
       : interaction === 'disabled' && utils.isChromium()
-        ? { role: 'button' }
-        : {}
+      ? { role: 'button' }
+      : {}
 
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {
@@ -796,8 +796,8 @@ class Select extends Component<SelectProps> {
         typeof onInputChange === 'function'
           ? onInputChange
           : inputValue
-            ? () => { }
-            : undefined,
+          ? () => {}
+          : undefined,
 
       onFocus,
       onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
@@ -811,11 +811,10 @@ class Select extends Component<SelectProps> {
         suppressHydrationWarning
         {...(interaction === 'enabled' &&
           !isEditable && {
-          themeOverride: (componentTheme) => ({
-            //@ts-expect-error TODO-theme-types
-            backgroundReadonlyColor: componentTheme.backgroundColor
-          })
-        })}
+            themeOverride: (componentTheme) => ({
+              backgroundReadonlyColor: componentTheme.backgroundColor
+            })
+          })}
       />
     )
   }
@@ -872,8 +871,8 @@ class Select extends Component<SelectProps> {
                 mountNode !== undefined
                   ? mountNode
                   : utils.isAndroidOrIOS()
-                    ? this.ref
-                    : undefined
+                  ? this.ref
+                  : undefined
               }
               positionTarget={this._inputContainer}
               isShowingContent={isShowingOptions}

package/src/Select/v2/props.ts

@@ -282,8 +282,7 @@ type PropKeys = keyof SelectOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type SelectProps = SelectOwnProps &
-  //@ts-expect-error TODO-theme-types
-  WithStyleProps<NewComponentTypes['Select'], SelectStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Select']>, SelectStyle> &
   OtherHTMLAttributes<
     SelectOwnProps,
     InputHTMLAttributes<SelectOwnProps & Element>

package/src/Select/v2/styles.ts

@@ -28,12 +28,11 @@ import type { SelectProps, SelectStyle } from './props'
 /**
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} _props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: NewComponentTypes['Select'],
+  componentTheme: ReturnType<NewComponentTypes['Select']>,
   _props: SelectProps
 ): SelectStyle => {
   return {
@@ -41,7 +40,6 @@ const generateStyle = (
       label: 'select__assistiveText',
       display: 'none'
     },
-    //@ts-expect-error TODO-theme-types
     popoverBorderWidth: componentTheme.popoverBorderWidth
   }
 }