@instructure/ui-select 11.7.2-snapshot-54 → 11.7.2-snapshot-62

package/CHANGELOG.md

@@ -3,11 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.2-snapshot-54](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-54) (2026-04-23)
+## [11.7.2-snapshot-62](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-62) (2026-04-23)
 
 
 ### Features
 
+* **many:** fix issues ([9d623ed](https://github.com/instructure/instructure-ui/commit/9d623ed9ba2be49549b625d1e436edc230a4df41))
 * **many:** rework Select, SimpleSelect and TimeSelect ([fb95519](https://github.com/instructure/instructure-ui/commit/fb9551958326bdc8e95d55075c27c7e078c0c69c))
 
 

package/es/Select/v2/index.js

@@ -620,6 +620,7 @@ 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

@@ -35,6 +35,7 @@ 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,6 +631,7 @@ 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

@@ -41,6 +41,7 @@ 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.2-snapshot-54",
+  "version": "11.7.2-snapshot-62",
   "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/emotion": "11.7.2-snapshot-54",
-    "@instructure/shared-types": "11.7.2-snapshot-54",
-    "@instructure/ui-dom-utils": "11.7.2-snapshot-54",
-    "@instructure/ui-form-field": "11.7.2-snapshot-54",
-    "@instructure/ui-icons": "11.7.2-snapshot-54",
-    "@instructure/ui-options": "11.7.2-snapshot-54",
-    "@instructure/ui-popover": "11.7.2-snapshot-54",
-    "@instructure/ui-react-utils": "11.7.2-snapshot-54",
-    "@instructure/ui-selectable": "11.7.2-snapshot-54",
-    "@instructure/ui-position": "11.7.2-snapshot-54",
-    "@instructure/ui-text-input": "11.7.2-snapshot-54",
-    "@instructure/ui-utils": "11.7.2-snapshot-54",
-    "@instructure/ui-view": "11.7.2-snapshot-54",
-    "@instructure/uid": "11.7.2-snapshot-54"
+    "@instructure/emotion": "11.7.2-snapshot-62",
+    "@instructure/shared-types": "11.7.2-snapshot-62",
+    "@instructure/ui-dom-utils": "11.7.2-snapshot-62",
+    "@instructure/ui-form-field": "11.7.2-snapshot-62",
+    "@instructure/ui-icons": "11.7.2-snapshot-62",
+    "@instructure/ui-popover": "11.7.2-snapshot-62",
+    "@instructure/ui-position": "11.7.2-snapshot-62",
+    "@instructure/ui-options": "11.7.2-snapshot-62",
+    "@instructure/ui-react-utils": "11.7.2-snapshot-62",
+    "@instructure/ui-selectable": "11.7.2-snapshot-62",
+    "@instructure/ui-utils": "11.7.2-snapshot-62",
+    "@instructure/ui-view": "11.7.2-snapshot-62",
+    "@instructure/uid": "11.7.2-snapshot-62",
+    "@instructure/ui-text-input": "11.7.2-snapshot-62"
   },
   "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.2-snapshot-54",
-    "@instructure/ui-babel-preset": "11.7.2-snapshot-54",
-    "@instructure/ui-scripts": "11.7.2-snapshot-54",
-    "@instructure/ui-themes": "11.7.2-snapshot-54"
+    "@instructure/ui-babel-preset": "11.7.2-snapshot-62",
+    "@instructure/ui-color-utils": "11.7.2-snapshot-62",
+    "@instructure/ui-scripts": "11.7.2-snapshot-62",
+    "@instructure/ui-themes": "11.7.2-snapshot-62"
   },
   "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)
+          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
             }
-          },
-          onRequestHideOptions: (event) => {
-            onRequestHideOptions?.(event)
-          },
-          onRequestHighlightOption: (
+          }
+          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,
-            { 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 })
-            }
+            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,10 +811,11 @@ class Select extends Component<SelectProps> {
         suppressHydrationWarning
         {...(interaction === 'enabled' &&
           !isEditable && {
-            themeOverride: (componentTheme) => ({
-              backgroundReadonlyColor: componentTheme.backgroundColor
-            })
-          })}
+          themeOverride: (componentTheme) => ({
+            //@ts-expect-error TODO-theme-types
+            backgroundReadonlyColor: componentTheme.backgroundColor
+          })
+        })}
       />
     )
   }
@@ -871,8 +872,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,6 +282,7 @@ type PropKeys = keyof SelectOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type SelectProps = SelectOwnProps &
+  //@ts-expect-error TODO-theme-types
   WithStyleProps<NewComponentTypes['Select'], SelectStyle> &
   OtherHTMLAttributes<
     SelectOwnProps,

package/src/Select/v2/styles.ts

@@ -41,6 +41,7 @@ const generateStyle = (
       label: 'select__assistiveText',
       display: 'none'
     },
+    //@ts-expect-error TODO-theme-types
     popoverBorderWidth: componentTheme.popoverBorderWidth
   }
 }