@instructure/ui-select 11.7.3-snapshot-33 → 11.7.3-snapshot-38

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-33](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-33) (2026-05-07)
+## [11.7.3-snapshot-38](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-38) (2026-05-07)
 
 
 ### Bug Fixes

package/es/Select/v1/index.js

@@ -34,7 +34,7 @@ import { Popover } from '@instructure/ui-popover/v11_6';
 import { TextInput } from '@instructure/ui-text-input/v11_6';
 import { Options } from '@instructure/ui-options/v11_6';
 import { IconArrowOpenDownLine, IconArrowOpenUpLine } from '@instructure/ui-icons';
-import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { Group } from "./Group/index.js";

package/es/Select/v2/index.js

@@ -34,7 +34,7 @@ import { Popover } from '@instructure/ui-popover/latest';
 import { TextInput } from '@instructure/ui-text-input/latest';
 import { Options } from '@instructure/ui-options/latest';
 import { ChevronDownInstUIIcon, ChevronUpInstUIIcon } from '@instructure/ui-icons';
-import { withStyle } from '@instructure/emotion';
+import { withStyleNew } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import { Group } from "./Group/index.js";
 import { Option } from "./Option/index.js";
@@ -78,7 +78,7 @@ category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
-let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = class Select extends Component {
+let Select = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle), _dec(_class = _dec2(_class = class Select extends Component {
   static displayName = "Select";
   static componentId = 'Select';
   SCROLL_TOLERANCE = 0.5;

package/lib/Select/v1/index.js

@@ -86,7 +86,7 @@ category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
-let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Select extends _react.Component {
+let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Select extends _react.Component {
   static displayName = "Select";
   static componentId = 'Select';
   SCROLL_TOLERANCE = 0.5;

package/lib/Select/v2/index.js

@@ -89,7 +89,7 @@ category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
-let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = class Select extends _react.Component {
+let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class Select extends _react.Component {
   static displayName = "Select";
   static componentId = 'Select';
   SCROLL_TOLERANCE = 0.5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "11.7.3-snapshot-33",
+  "version": "11.7.3-snapshot-38",
   "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.29.2",
-    "@instructure/emotion": "11.7.3-snapshot-33",
-    "@instructure/shared-types": "11.7.3-snapshot-33",
-    "@instructure/ui-dom-utils": "11.7.3-snapshot-33",
-    "@instructure/ui-form-field": "11.7.3-snapshot-33",
-    "@instructure/ui-icons": "11.7.3-snapshot-33",
-    "@instructure/ui-options": "11.7.3-snapshot-33",
-    "@instructure/ui-position": "11.7.3-snapshot-33",
-    "@instructure/ui-popover": "11.7.3-snapshot-33",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-33",
-    "@instructure/ui-selectable": "11.7.3-snapshot-33",
-    "@instructure/ui-text-input": "11.7.3-snapshot-33",
-    "@instructure/ui-utils": "11.7.3-snapshot-33",
-    "@instructure/ui-themes": "11.7.3-snapshot-33",
-    "@instructure/ui-view": "11.7.3-snapshot-33",
-    "@instructure/uid": "11.7.3-snapshot-33"
+    "@instructure/emotion": "11.7.3-snapshot-38",
+    "@instructure/shared-types": "11.7.3-snapshot-38",
+    "@instructure/ui-dom-utils": "11.7.3-snapshot-38",
+    "@instructure/ui-form-field": "11.7.3-snapshot-38",
+    "@instructure/ui-icons": "11.7.3-snapshot-38",
+    "@instructure/ui-options": "11.7.3-snapshot-38",
+    "@instructure/ui-popover": "11.7.3-snapshot-38",
+    "@instructure/ui-position": "11.7.3-snapshot-38",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-38",
+    "@instructure/ui-text-input": "11.7.3-snapshot-38",
+    "@instructure/ui-selectable": "11.7.3-snapshot-38",
+    "@instructure/ui-themes": "11.7.3-snapshot-38",
+    "@instructure/ui-utils": "11.7.3-snapshot-38",
+    "@instructure/ui-view": "11.7.3-snapshot-38",
+    "@instructure/uid": "11.7.3-snapshot-38"
   },
   "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-babel-preset": "11.7.3-snapshot-33",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-33",
-    "@instructure/ui-scripts": "11.7.3-snapshot-33"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-38",
+    "@instructure/ui-color-utils": "11.7.3-snapshot-38",
+    "@instructure/ui-scripts": "11.7.3-snapshot-38"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Select/v1/index.tsx

@@ -59,7 +59,7 @@ import type {
   SelectableRender
 } from '@instructure/ui-selectable'
 
-import { withStyleLegacy as withStyle, BorderWidth } from '@instructure/emotion'
+import { withStyle, BorderWidth } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Select/v2/index.tsx

@@ -59,7 +59,7 @@ import type {
   SelectableRender
 } from '@instructure/ui-selectable'
 
-import { withStyle, BorderWidth } from '@instructure/emotion'
+import { withStyleNew, BorderWidth } from '@instructure/emotion'
 
 import generateStyle from './styles'
 
@@ -111,18 +111,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
     )
   }
@@ -137,7 +137,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
 @withDeterministicId()
-@withStyle(generateStyle)
+@withStyleNew(generateStyle)
 class Select extends Component<SelectProps> {
   static readonly componentId = 'Select'
   private readonly SCROLL_TOLERANCE = 0.5
@@ -333,59 +333,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 })
           }
         }
+      }
       : {}
   }
 
@@ -412,12 +412,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)
     }
 
@@ -531,18 +531,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 (
@@ -552,30 +552,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>
@@ -614,8 +614,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 {
@@ -624,8 +624,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()
         }
       }
     }
@@ -722,26 +722,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']) {
@@ -788,8 +788,8 @@ class Select extends Component<SelectProps> {
         typeof onInputChange === 'function'
           ? onInputChange
           : inputValue
-          ? () => {}
-          : undefined,
+            ? () => { }
+            : undefined,
 
       onFocus,
       onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
@@ -803,10 +803,10 @@ class Select extends Component<SelectProps> {
         suppressHydrationWarning
         {...(interaction === 'enabled' &&
           !isEditable && {
-            themeOverride: (componentTheme) => ({
-              backgroundReadonlyColor: componentTheme.backgroundColor
-            })
-          })}
+          themeOverride: (componentTheme) => ({
+            backgroundReadonlyColor: componentTheme.backgroundColor
+          })
+        })}
       />
     )
   }
@@ -863,8 +863,8 @@ class Select extends Component<SelectProps> {
                 mountNode !== undefined
                   ? mountNode
                   : utils.isAndroidOrIOS()
-                  ? this.ref
-                  : undefined
+                    ? this.ref
+                    : undefined
               }
               positionTarget={this._inputContainer}
               isShowingContent={isShowingOptions}