@instructure/ui-simple-select 10.19.2-snapshot-8 → 10.19.2-snapshot-10

package/CHANGELOG.md

@@ -3,12 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.19.2-snapshot-8](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.19.2-snapshot-8) (2025-06-13)
+## [10.19.2-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.19.2-snapshot-10) (2025-06-13)
 
 
 ### Bug Fixes
 
 * **many:** update dependencies, browsersdb and moment timezone database ([3813636](https://github.com/instructure/instructure-ui/commit/3813636458c901ad4bc74a4d5ae015cb55defcb2))
+* **ui-time-select,ui-simple-select,ui-select:** add missing keyboard interactions and fix duplicate SR announcements ([0f7ffa5](https://github.com/instructure/instructure-ui/commit/0f7ffa5b263b0b287ca1c2387e0b902189706cb2))
 
 
 

package/es/SimpleSelect/index.js

@@ -88,6 +88,20 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
       if (typeof this.props.onShowOptions === 'function') {
         this.props.onShowOptions(event);
       }
+      if (event.type.startsWith('key')) {
+        const keyboardEvent = event;
+        const children = Children.toArray(this.props.children);
+        if (!this.state.inputValue && children.length > 0) {
+          const position = keyboardEvent.key === 'ArrowDown' ? 'first' : keyboardEvent.key === 'ArrowUp' ? 'last' : void 0;
+          if (position) {
+            var _this$getOptionByPosi;
+            const optionId = (_this$getOptionByPosi = this.getOptionByPosition(position)) === null || _this$getOptionByPosi === void 0 ? void 0 : _this$getOptionByPosi.props.id;
+            optionId && this.setState({
+              highlightedOptionId: optionId
+            });
+          }
+        }
+      }
     };
     this.handleHideOptions = event => {
       this.setState(state => {
@@ -102,16 +116,13 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
         this.props.onHideOptions(event);
       }
     };
-    this.handleHighlightOption = (event, {
+    this.handleHighlightOption = (_event, {
       id
     }) => {
       if (id === this._emptyOptionId) return;
-      const option = this.getOption('id', id);
-      const label = option === null || option === void 0 ? void 0 : option.props.children;
-      const inputValue = event.type === 'keydown' ? label : this.state.inputValue;
       this.setState({
         highlightedOptionId: id,
-        inputValue
+        inputValue: this.state.inputValue
       });
     };
     this.handleSelectOption = (event, {
@@ -255,6 +266,29 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
     }
     return match;
   }
+  getOptionByPosition(position) {
+    const children = Children.toArray(this.props.children);
+
+    // Determine where to start looking based on position
+    const index = position === 'first' ? 0 : children.length - 1;
+
+    // Check if child is an option or group
+    const child = children[index];
+    if (!child) return void 0;
+
+    // If it's a regular option, return it
+    if (matchComponentTypes(child, [Option])) {
+      return child;
+    }
+
+    // If it's a group, get its options
+    if (matchComponentTypes(child, [Group])) {
+      const groupOptions = Children.toArray(child.props.children);
+      const groupIndex = position === 'first' ? 0 : groupOptions.length - 1;
+      return groupOptions[groupIndex];
+    }
+    return void 0;
+  }
   renderChildren() {
     let children = Children.toArray(this.props.children);
     children = Children.map(children, child => {

package/lib/SimpleSelect/index.js

@@ -99,6 +99,20 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       if (typeof this.props.onShowOptions === 'function') {
         this.props.onShowOptions(event);
       }
+      if (event.type.startsWith('key')) {
+        const keyboardEvent = event;
+        const children = _react.Children.toArray(this.props.children);
+        if (!this.state.inputValue && children.length > 0) {
+          const position = keyboardEvent.key === 'ArrowDown' ? 'first' : keyboardEvent.key === 'ArrowUp' ? 'last' : void 0;
+          if (position) {
+            var _this$getOptionByPosi;
+            const optionId = (_this$getOptionByPosi = this.getOptionByPosition(position)) === null || _this$getOptionByPosi === void 0 ? void 0 : _this$getOptionByPosi.props.id;
+            optionId && this.setState({
+              highlightedOptionId: optionId
+            });
+          }
+        }
+      }
     };
     this.handleHideOptions = event => {
       this.setState(state => {
@@ -113,16 +127,13 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
         this.props.onHideOptions(event);
       }
     };
-    this.handleHighlightOption = (event, {
+    this.handleHighlightOption = (_event, {
       id
     }) => {
       if (id === this._emptyOptionId) return;
-      const option = this.getOption('id', id);
-      const label = option === null || option === void 0 ? void 0 : option.props.children;
-      const inputValue = event.type === 'keydown' ? label : this.state.inputValue;
       this.setState({
         highlightedOptionId: id,
-        inputValue
+        inputValue: this.state.inputValue
       });
     };
     this.handleSelectOption = (event, {
@@ -266,6 +277,29 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
     }
     return match;
   }
+  getOptionByPosition(position) {
+    const children = _react.Children.toArray(this.props.children);
+
+    // Determine where to start looking based on position
+    const index = position === 'first' ? 0 : children.length - 1;
+
+    // Check if child is an option or group
+    const child = children[index];
+    if (!child) return void 0;
+
+    // If it's a regular option, return it
+    if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Option.Option])) {
+      return child;
+    }
+
+    // If it's a group, get its options
+    if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+      const groupOptions = _react.Children.toArray(child.props.children);
+      const groupIndex = position === 'first' ? 0 : groupOptions.length - 1;
+      return groupOptions[groupIndex];
+    }
+    return void 0;
+  }
   renderChildren() {
     let children = _react.Children.toArray(this.props.children);
     children = _react.Children.map(children, child => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "10.19.2-snapshot-8",
+  "version": "10.19.2-snapshot-10",
   "description": "A component for standard select element behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,23 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.19.2-snapshot-8",
-    "@instructure/shared-types": "10.19.2-snapshot-8",
-    "@instructure/ui-form-field": "10.19.2-snapshot-8",
-    "@instructure/ui-position": "10.19.2-snapshot-8",
-    "@instructure/ui-prop-types": "10.19.2-snapshot-8",
-    "@instructure/ui-react-utils": "10.19.2-snapshot-8",
-    "@instructure/ui-select": "10.19.2-snapshot-8",
-    "@instructure/ui-testable": "10.19.2-snapshot-8",
+    "@instructure/console": "10.19.2-snapshot-10",
+    "@instructure/shared-types": "10.19.2-snapshot-10",
+    "@instructure/ui-form-field": "10.19.2-snapshot-10",
+    "@instructure/ui-position": "10.19.2-snapshot-10",
+    "@instructure/ui-prop-types": "10.19.2-snapshot-10",
+    "@instructure/ui-react-utils": "10.19.2-snapshot-10",
+    "@instructure/ui-select": "10.19.2-snapshot-10",
+    "@instructure/ui-testable": "10.19.2-snapshot-10",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.19.2-snapshot-8",
-    "@instructure/ui-babel-preset": "10.19.2-snapshot-8",
-    "@instructure/ui-color-utils": "10.19.2-snapshot-8",
-    "@instructure/ui-icons": "10.19.2-snapshot-8",
-    "@instructure/ui-test-utils": "10.19.2-snapshot-8",
-    "@instructure/ui-utils": "10.19.2-snapshot-8",
+    "@instructure/ui-axe-check": "10.19.2-snapshot-10",
+    "@instructure/ui-babel-preset": "10.19.2-snapshot-10",
+    "@instructure/ui-color-utils": "10.19.2-snapshot-10",
+    "@instructure/ui-icons": "10.19.2-snapshot-10",
+    "@instructure/ui-test-utils": "10.19.2-snapshot-10",
+    "@instructure/ui-utils": "10.19.2-snapshot-10",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",

package/src/SimpleSelect/index.tsx

@@ -248,6 +248,31 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
     return match
   }
 
+  getOptionByPosition(position: 'first' | 'last'): OptionChild | undefined {
+    const children = Children.toArray(this.props.children)
+
+    // Determine where to start looking based on position
+    const index = position === 'first' ? 0 : children.length - 1
+
+    // Check if child is an option or group
+    const child = children[index]
+    if (!child) return undefined
+
+    // If it's a regular option, return it
+    if (matchComponentTypes<OptionChild>(child, [Option])) {
+      return child
+    }
+
+    // If it's a group, get its options
+    if (matchComponentTypes<GroupChild>(child, [Group])) {
+      const groupOptions = Children.toArray(child.props.children)
+      const groupIndex = position === 'first' ? 0 : groupOptions.length - 1
+      return groupOptions[groupIndex] as OptionChild
+    }
+
+    return undefined
+  }
+
   handleRef = (node: Select) => {
     this.ref = node
   }
@@ -264,6 +289,30 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
     if (typeof this.props.onShowOptions === 'function') {
       this.props.onShowOptions(event)
     }
+
+    if (event.type.startsWith('key')) {
+      const keyboardEvent = event as React.KeyboardEvent
+      const children = Children.toArray(this.props.children) as (
+        | OptionChild
+        | GroupChild
+      )[]
+
+      if (!this.state.inputValue && children.length > 0) {
+        const position =
+          keyboardEvent.key === 'ArrowDown'
+            ? 'first'
+            : keyboardEvent.key === 'ArrowUp'
+            ? 'last'
+            : undefined
+        if (position) {
+          const optionId = this.getOptionByPosition(position)?.props.id
+          optionId &&
+            this.setState({
+              highlightedOptionId: optionId
+            })
+        }
+      }
+    }
   }
 
   handleHideOptions: SelectProps['onRequestHideOptions'] = (event) => {
@@ -281,18 +330,14 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
   }
 
   handleHighlightOption: SelectProps['onRequestHighlightOption'] = (
-    event,
+    _event,
     { id }
   ) => {
     if (id === this._emptyOptionId) return
 
-    const option = this.getOption('id', id)
-    const label = option?.props.children
-    const inputValue = event.type === 'keydown' ? label : this.state.inputValue
-
     this.setState({
       highlightedOptionId: id,
-      inputValue
+      inputValue: this.state.inputValue
     })
   }