@instructure/ui-select 8.38.2-snapshot-5 → 8.38.2-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.
 
-## [8.38.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.38.1...v8.38.2-snapshot-5) (2023-07-14)
+## [8.38.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.38.1...v8.38.2-snapshot-7) (2023-07-21)
 
 **Note:** Version bump only for package @instructure/ui-select
 

package/es/Select/SelectLocator.js

@@ -34,13 +34,8 @@ import { Select } from './index';
 
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const SelectLocator = locator(Select.selector, {
-  findInput: function () {
-    return locator('input').find(...arguments);
-  },
-  findOptionsList: async function (element) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
+  findInput: (...args) => locator('input').find(...args),
+  findOptionsList: async (element, ...args) => {
     const content = await PopoverLocator.findContent(element, ...args);
     return content ? OptionsLocator.find(content.getDOMNode()) : null;
   }

package/es/Select/index.js

@@ -76,8 +76,8 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 @tsProps
 **/
 let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Select extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     this.state = {
       hasInputRef: false
     };
@@ -236,9 +236,10 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       onRequestHideOptions: event => {
         onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
       },
-      onRequestHighlightOption: (event, _ref) => {
-        let id = _ref.id,
-          direction = _ref.direction;
+      onRequestHighlightOption: (event, {
+        id,
+        direction
+      }) => {
         if (!isShowingOptions) return;
         const highlightedOptionId = this.highlightedOptionId;
         // if id exists, use that
@@ -264,8 +265,9 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       onRequestHighlightLastOption: event => {
         this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
       },
-      onRequestSelectOption: (event, _ref2) => {
-        let id = _ref2.id;
+      onRequestSelectOption: (event, {
+        id
+      }) => {
         if (id && this._optionIds.indexOf(id) !== -1) {
           // only select if id exists as a valid option
           onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
@@ -514,37 +516,36 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       highlightedOptionId: highlightedOptionId,
       isShowingOptions: isShowingOptions,
       selectedOptionId: selectedOptionId
-    }, this.getEventHandlers()), _ref3 => {
-      let getRootProps = _ref3.getRootProps,
-        getInputProps = _ref3.getInputProps,
-        getTriggerProps = _ref3.getTriggerProps,
-        getListProps = _ref3.getListProps,
-        getOptionProps = _ref3.getOptionProps,
-        getDisabledOptionProps = _ref3.getDisabledOptionProps,
-        getDescriptionProps = _ref3.getDescriptionProps;
-      return jsx("span", Object.assign({}, getRootProps({
-        css: styles === null || styles === void 0 ? void 0 : styles.select
-      }), {
-        ref: el => this.ref = el
-      }), this.renderInput({
-        getInputProps,
-        getTriggerProps
-      }), jsx("span", Object.assign({}, getDescriptionProps(), {
-        css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
-      }), assistiveText), jsx(Popover, {
-        constrain: constrain,
-        placement: placement,
-        mountNode: mountNode,
-        positionTarget: this._inputContainer,
-        isShowingContent: isShowingOptions,
-        shouldReturnFocus: false,
-        withArrow: false
-      }, this.renderList({
-        getListProps,
-        getOptionProps,
-        getDisabledOptionProps
-      })));
-    });
+    }, this.getEventHandlers()), ({
+      getRootProps,
+      getInputProps,
+      getTriggerProps,
+      getListProps,
+      getOptionProps,
+      getDisabledOptionProps,
+      getDescriptionProps
+    }) => jsx("span", Object.assign({}, getRootProps({
+      css: styles === null || styles === void 0 ? void 0 : styles.select
+    }), {
+      ref: el => this.ref = el
+    }), this.renderInput({
+      getInputProps,
+      getTriggerProps
+    }), jsx("span", Object.assign({}, getDescriptionProps(), {
+      css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
+    }), assistiveText), jsx(Popover, {
+      constrain: constrain,
+      placement: placement,
+      mountNode: mountNode,
+      positionTarget: this._inputContainer,
+      isShowingContent: isShowingOptions,
+      shouldReturnFocus: false,
+      withArrow: false
+    }, this.renderList({
+      getListProps,
+      getOptionProps,
+      getDisabledOptionProps
+    }))));
   }
 }, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   inputValue: '',

package/lib/Select/SelectLocator.js

@@ -41,13 +41,8 @@ var _index = require("./index");
 
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const SelectLocator = (0, _locator.locator)(_index.Select.selector, {
-  findInput: function () {
-    return (0, _locator.locator)('input').find(...arguments);
-  },
-  findOptionsList: async function (element) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
+  findInput: (...args) => (0, _locator.locator)('input').find(...args),
+  findOptionsList: async (element, ...args) => {
     const content = await _PopoverLocator.PopoverLocator.findContent(element, ...args);
     return content ? _OptionsLocator.OptionsLocator.find(content.getDOMNode()) : null;
   }

package/lib/Select/index.js

@@ -88,8 +88,8 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 @tsProps
 **/
 let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Select extends _react.Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     this.state = {
       hasInputRef: false
     };
@@ -248,9 +248,10 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
       onRequestHideOptions: event => {
         onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
       },
-      onRequestHighlightOption: (event, _ref) => {
-        let id = _ref.id,
-          direction = _ref.direction;
+      onRequestHighlightOption: (event, {
+        id,
+        direction
+      }) => {
         if (!isShowingOptions) return;
         const highlightedOptionId = this.highlightedOptionId;
         // if id exists, use that
@@ -276,8 +277,9 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
       onRequestHighlightLastOption: event => {
         this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
       },
-      onRequestSelectOption: (event, _ref2) => {
-        let id = _ref2.id;
+      onRequestSelectOption: (event, {
+        id
+      }) => {
         if (id && this._optionIds.indexOf(id) !== -1) {
           // only select if id exists as a valid option
           onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
@@ -526,37 +528,36 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
       highlightedOptionId: highlightedOptionId,
       isShowingOptions: isShowingOptions,
       selectedOptionId: selectedOptionId
-    }, this.getEventHandlers()), _ref3 => {
-      let getRootProps = _ref3.getRootProps,
-        getInputProps = _ref3.getInputProps,
-        getTriggerProps = _ref3.getTriggerProps,
-        getListProps = _ref3.getListProps,
-        getOptionProps = _ref3.getOptionProps,
-        getDisabledOptionProps = _ref3.getDisabledOptionProps,
-        getDescriptionProps = _ref3.getDescriptionProps;
-      return (0, _emotion.jsx)("span", Object.assign({}, getRootProps({
-        css: styles === null || styles === void 0 ? void 0 : styles.select
-      }), {
-        ref: el => this.ref = el
-      }), this.renderInput({
-        getInputProps,
-        getTriggerProps
-      }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
-        css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
-      }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
-        constrain: constrain,
-        placement: placement,
-        mountNode: mountNode,
-        positionTarget: this._inputContainer,
-        isShowingContent: isShowingOptions,
-        shouldReturnFocus: false,
-        withArrow: false
-      }, this.renderList({
-        getListProps,
-        getOptionProps,
-        getDisabledOptionProps
-      })));
-    });
+    }, this.getEventHandlers()), ({
+      getRootProps,
+      getInputProps,
+      getTriggerProps,
+      getListProps,
+      getOptionProps,
+      getDisabledOptionProps,
+      getDescriptionProps
+    }) => (0, _emotion.jsx)("span", Object.assign({}, getRootProps({
+      css: styles === null || styles === void 0 ? void 0 : styles.select
+    }), {
+      ref: el => this.ref = el
+    }), this.renderInput({
+      getInputProps,
+      getTriggerProps
+    }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
+      css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
+    }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
+      constrain: constrain,
+      placement: placement,
+      mountNode: mountNode,
+      positionTarget: this._inputContainer,
+      isShowingContent: isShowingOptions,
+      shouldReturnFocus: false,
+      withArrow: false
+    }, this.renderList({
+      getListProps,
+      getOptionProps,
+      getDisabledOptionProps
+    }))));
   }
 }, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   inputValue: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.38.2-snapshot-5",
+  "version": "8.38.2-snapshot-7",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,30 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.38.2-snapshot-5",
-    "@instructure/ui-color-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-test-locator": "8.38.2-snapshot-5",
-    "@instructure/ui-test-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-themes": "8.38.2-snapshot-5"
+    "@instructure/ui-babel-preset": "8.38.2-snapshot-7",
+    "@instructure/ui-color-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-test-locator": "8.38.2-snapshot-7",
+    "@instructure/ui-test-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-themes": "8.38.2-snapshot-7"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.5",
-    "@instructure/emotion": "8.38.2-snapshot-5",
-    "@instructure/shared-types": "8.38.2-snapshot-5",
-    "@instructure/ui-dom-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-form-field": "8.38.2-snapshot-5",
-    "@instructure/ui-icons": "8.38.2-snapshot-5",
-    "@instructure/ui-options": "8.38.2-snapshot-5",
-    "@instructure/ui-popover": "8.38.2-snapshot-5",
-    "@instructure/ui-position": "8.38.2-snapshot-5",
-    "@instructure/ui-prop-types": "8.38.2-snapshot-5",
-    "@instructure/ui-react-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-selectable": "8.38.2-snapshot-5",
-    "@instructure/ui-testable": "8.38.2-snapshot-5",
-    "@instructure/ui-text-input": "8.38.2-snapshot-5",
-    "@instructure/ui-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-view": "8.38.2-snapshot-5",
-    "@instructure/uid": "8.38.2-snapshot-5",
+    "@babel/runtime": "^7.22.6",
+    "@instructure/emotion": "8.38.2-snapshot-7",
+    "@instructure/shared-types": "8.38.2-snapshot-7",
+    "@instructure/ui-dom-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-form-field": "8.38.2-snapshot-7",
+    "@instructure/ui-icons": "8.38.2-snapshot-7",
+    "@instructure/ui-options": "8.38.2-snapshot-7",
+    "@instructure/ui-popover": "8.38.2-snapshot-7",
+    "@instructure/ui-position": "8.38.2-snapshot-7",
+    "@instructure/ui-prop-types": "8.38.2-snapshot-7",
+    "@instructure/ui-react-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-selectable": "8.38.2-snapshot-7",
+    "@instructure/ui-testable": "8.38.2-snapshot-7",
+    "@instructure/ui-text-input": "8.38.2-snapshot-7",
+    "@instructure/ui-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-view": "8.38.2-snapshot-7",
+    "@instructure/uid": "8.38.2-snapshot-7",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Select/README.md

@@ -1208,3 +1208,5 @@ render(
 #### Providing assistive text for screen readers
 
 It's important to ensure screen reader users receive instruction and feedback while interacting with a `Select`, but screen reader support for the `combobox` role varies. The `assistiveText` prop should always be used to explain how a keyboard user can make a selection. Additionally, a live region should be updated with feedback as the component is interacted with, such as when options are filtered or highlighted. Using an [Alert](#Alert) with the `screenReaderOnly` prop is the easiest way to do this.
+
+> Note: This component uses a native `input` field to render the selected value. When it's included in a native HTML `form`, the text value will be sent to the backend instead of anything specified in the `value` field of the `Select.Option`-s. We do not recommend to use this component this way, rather write your own code that collects information and sends it to the backend.