@instructure/ui-select 11.2.1-snapshot-9 → 11.3.1-snapshot-0

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.2.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v11.2.0...v11.2.1-snapshot-9) (2025-12-04)
+## [11.3.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.3.0...v11.3.1-snapshot-0) (2026-01-15)
 
 **Note:** Version bump only for package @instructure/ui-select
 
@@ -11,6 +11,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+# [11.3.0](https://github.com/instructure/instructure-ui/compare/v11.2.0...v11.3.0) (2026-01-12)
+
+
+### Bug Fixes
+
+* **ui-selectable,ui-select:** fix typing of Select and Selectable event types and TypeScript errors in the examples ([bde40cc](https://github.com/instructure/instructure-ui/commit/bde40cc121674666cceb7eb24e116a50e1879445))
+
+
+
+
+
 # [11.2.0](https://github.com/instructure/instructure-ui/compare/v11.0.1...v11.2.0) (2025-11-06)
 
 

package/package.json

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

package/src/Select/README.md

@@ -44,13 +44,15 @@ type: example
       setIsShowingOptions(true)
       if (inputValue || selectedOptionId || options.length === 0) return
 
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, { id: options[0].id })
-        case 'ArrowUp':
-          return handleHighlightOption(event, {
-            id: options[options.length - 1].id
-          })
+      if ('key' in event) {
+        switch (event.key) {
+          case 'ArrowDown':
+            return handleHighlightOption(event, { id: options[0].id })
+          case 'ArrowUp':
+            return handleHighlightOption(event, {
+              id: options[options.length - 1].id
+            })
+        }
       }
     }
 
@@ -234,13 +236,15 @@ type: example
       )
       if (inputValue || selectedOptionId || options.length === 0) return
 
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, { id: options[0].id })
-        case 'ArrowUp':
-          return handleHighlightOption(event, {
-            id: options[options.length - 1].id
-          })
+      if ('key' in event) {
+        switch (event.key) {
+          case 'ArrowDown':
+            return handleHighlightOption(event, { id: options[0].id })
+          case 'ArrowUp':
+            return handleHighlightOption(event, {
+              id: options[options.length - 1].id
+            })
+        }
       }
     }
 
@@ -436,21 +440,23 @@ type: example
 
       if (inputValue || options.length === 0) return
 
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, {
-            id: options.find((option) => !selectedOptionId.includes(option.id))
-              .id
-          })
-        case 'ArrowUp':
-          // Highlight last non-selected option
-          return handleHighlightOption(event, {
-            id: options[
-              options.findLastIndex(
-                (option) => !selectedOptionId.includes(option.id)
-              )
-            ].id
-          })
+      if ('key' in event) {
+        switch (event.key) {
+          case 'ArrowDown':
+            return handleHighlightOption(event, {
+              id: options.find((option) => !selectedOptionId.includes(option.id))
+                .id
+            })
+          case 'ArrowUp':
+            // Highlight last non-selected option
+            return handleHighlightOption(event, {
+              id: options[
+                options.findLastIndex(
+                  (option) => !selectedOptionId.includes(option.id)
+                )
+              ].id
+            })
+        }
       }
     }
 
@@ -489,13 +495,13 @@ type: example
       const newOptions = filterOptions(value)
       setInputValue(value)
       setFilteredOptions(newOptions)
-      sethHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
+      setHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
       setIsShowingOptions(true)
       setAnnouncement(getOptionsChangedMessage(newOptions))
     }
 
     const handleKeyDown = (event) => {
-      if (event.keyCode === 8) {
+      if ('keyCode' in event && event.keyCode === 8) {
         // when backspace key is pressed
         if (inputValue === '' && selectedOptionId.length > 0) {
           // remove last selected option, if input has no entered text
@@ -660,17 +666,19 @@ const GroupSelectExample = ({ options }) => {
   const handleShowOptions = (event) => {
     setIsShowingOptions(true)
     setHighlightedOptionId(null)
-    if (inputValue || selectedOptionId || options.length === 0) return
+    if (inputValue || selectedOptionId || Object.keys(options).length === 0) return
 
-    switch (event.key) {
-      case 'ArrowDown':
-        return handleHighlightOption(event, {
-          id: options[Object.keys(options)[0]][0].id
-        })
-      case 'ArrowUp':
-        return handleHighlightOption(event, {
-          id: Object.values(options).at(-1)?.at(-1)?.id
-        })
+    if ('key' in event) {
+      switch (event.key) {
+        case 'ArrowDown':
+          return handleHighlightOption(event, {
+            id: options[Object.keys(options)[0]][0].id
+          })
+        case 'ArrowUp':
+          return handleHighlightOption(event, {
+            id: Object.values(options).at(-1)?.at(-1)?.id
+          })
+      }
     }
   }
 
@@ -840,17 +848,19 @@ const GroupSelectAutocompleteExample = ({ options }) => {
     setIsShowingOptions(true)
     setHighlightedOptionId(null)
 
-    if (inputValue || selectedOptionId || options.length === 0) return
+    if (inputValue || selectedOptionId || Object.keys(options).length === 0) return
 
-    switch (event.key) {
-      case 'ArrowDown':
-        return handleHighlightOption(event, {
-          id: options[Object.keys(options)[0]][0].id
-        })
-      case 'ArrowUp':
-        return handleHighlightOption(event, {
-          id: Object.values(options).at(-1)?.at(-1)?.id
-        })
+    if ('key' in event) {
+      switch (event.key) {
+        case 'ArrowDown':
+          return handleHighlightOption(event, {
+            id: options[Object.keys(options)[0]][0].id
+          })
+        case 'ArrowUp':
+          return handleHighlightOption(event, {
+            id: Object.values(options).at(-1)?.at(-1)?.id
+          })
+      }
     }
   }
 
@@ -1205,13 +1215,15 @@ const SingleSelectExample = ({ options }) => {
 
     if (inputValue || selectedOptionId || options.length === 0) return
 
-    switch (event.key) {
-      case 'ArrowDown':
-        return handleHighlightOption(event, { id: options[0].id })
-      case 'ArrowUp':
-        return handleHighlightOption(event, {
-          id: options[options.length - 1].id
-        })
+    if ('key' in event) {
+      switch (event.key) {
+        case 'ArrowDown':
+          return handleHighlightOption(event, { id: options[0].id })
+        case 'ArrowUp':
+          return handleHighlightOption(event, {
+            id: options[options.length - 1].id
+          })
+      }
     }
   }
 

package/src/Select/index.tsx

@@ -308,7 +308,7 @@ class Select extends Component<SelectProps> {
     }
   }
 
-  highlightOption(event: React.SyntheticEvent, id: string) {
+  highlightOption(event: React.KeyboardEvent | React.MouseEvent, id: string) {
     const { onRequestHighlightOption } = this.props
     if (id) {
       onRequestHighlightOption?.(event, { id })

package/src/Select/props.ts

@@ -142,18 +142,20 @@ type PropsFromSelectable = {
   /**
    * Callback fired requesting that the options list be shown.
    */
-  onRequestShowOptions?: (event: React.SyntheticEvent) => void
+  onRequestShowOptions?: (event: React.KeyboardEvent | React.MouseEvent) => void
 
   /**
    * Callback fired requesting that the options list be hidden.
    */
-  onRequestHideOptions?: (event: React.SyntheticEvent) => void
+  onRequestHideOptions?: (
+    event: React.KeyboardEvent | React.MouseEvent | React.FocusEvent
+  ) => void
 
   /**
    * Callback fired requesting a particular option be highlighted.
    */
   onRequestHighlightOption?: (
-    event: React.SyntheticEvent,
+    event: React.KeyboardEvent | React.MouseEvent,
     data: { id?: string; direction?: 1 | -1 }
   ) => void
 
@@ -161,7 +163,7 @@ type PropsFromSelectable = {
    * Callback fired requesting a particular option be selected.
    */
   onRequestSelectOption?: (
-    event: React.SyntheticEvent,
+    event: React.KeyboardEvent | React.MouseEvent,
     data: { id?: string }
   ) => void
 }