@instructure/ui-select 8.22.1-snapshot.4 → 8.23.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.23.0](https://github.com/instructure/instructure-ui/compare/v8.22.0...v8.23.0) (2022-04-07)
+
+**Note:** Version bump only for package @instructure/ui-select
+
 # [8.22.0](https://github.com/instructure/instructure-ui/compare/v8.21.0...v8.22.0) (2022-03-31)
 
 **Note:** Version bump only for package @instructure/ui-select

package/es/Select/index.js

@@ -62,6 +62,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       hasInputRef: false
     };
     this.ref = null;
+    this._input = null;
     this._defaultId = this.props.deterministicId();
     this._inputContainer = null;
     this._listView = null;
@@ -78,7 +79,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
         });
       }
 
-      this.ref = node;
+      this._input = node;
       (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, node);
     };
 
@@ -112,11 +113,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
   }
 
   focus() {
-    this.ref && this.ref.focus();
-  }
-
-  get _input() {
-    return this.ref;
+    this._input && this._input.focus();
   }
 
   get childrenArray() {
@@ -128,7 +125,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
   }
 
   get focused() {
-    return this.ref ? isActiveElement(this.ref) : false;
+    return this._input ? isActiveElement(this._input) : false;
   }
 
   get id() {
@@ -548,8 +545,10 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
           getOptionProps = _ref3.getOptionProps,
           getDisabledOptionProps = _ref3.getDisabledOptionProps,
           getDescriptionProps = _ref3.getDescriptionProps;
-      return jsx("span", getRootProps({
+      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

package/lib/Select/index.js

@@ -75,6 +75,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
       hasInputRef: false
     };
     this.ref = null;
+    this._input = null;
     this._defaultId = this.props.deterministicId();
     this._inputContainer = null;
     this._listView = null;
@@ -91,7 +92,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
         });
       }
 
-      this.ref = node;
+      this._input = node;
       (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, node);
     };
 
@@ -125,11 +126,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
   }
 
   focus() {
-    this.ref && this.ref.focus();
-  }
-
-  get _input() {
-    return this.ref;
+    this._input && this._input.focus();
   }
 
   get childrenArray() {
@@ -141,7 +138,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
   }
 
   get focused() {
-    return this.ref ? (0, _isActiveElement.isActiveElement)(this.ref) : false;
+    return this._input ? (0, _isActiveElement.isActiveElement)(this._input) : false;
   }
 
   get id() {
@@ -557,8 +554,10 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
           getOptionProps = _ref3.getOptionProps,
           getDisabledOptionProps = _ref3.getDisabledOptionProps,
           getDescriptionProps = _ref3.getDescriptionProps;
-      return (0, _emotion.jsx)("span", getRootProps({
+      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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.22.1-snapshot.4+5809c01bc",
+  "version": "8.23.0",
   "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.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-color-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-test-locator": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-test-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-themes": "8.22.1-snapshot.4+5809c01bc"
+    "@instructure/ui-babel-preset": "8.23.0",
+    "@instructure/ui-color-utils": "8.23.0",
+    "@instructure/ui-test-locator": "8.23.0",
+    "@instructure/ui-test-utils": "8.23.0",
+    "@instructure/ui-themes": "8.23.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/shared-types": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-dom-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-form-field": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-icons": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-options": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-popover": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-position": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-prop-types": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-react-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-selectable": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-testable": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-text-input": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-view": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/uid": "8.22.1-snapshot.4+5809c01bc",
+    "@instructure/emotion": "8.23.0",
+    "@instructure/shared-types": "8.23.0",
+    "@instructure/ui-dom-utils": "8.23.0",
+    "@instructure/ui-form-field": "8.23.0",
+    "@instructure/ui-icons": "8.23.0",
+    "@instructure/ui-options": "8.23.0",
+    "@instructure/ui-popover": "8.23.0",
+    "@instructure/ui-position": "8.23.0",
+    "@instructure/ui-prop-types": "8.23.0",
+    "@instructure/ui-react-utils": "8.23.0",
+    "@instructure/ui-selectable": "8.23.0",
+    "@instructure/ui-testable": "8.23.0",
+    "@instructure/ui-text-input": "8.23.0",
+    "@instructure/ui-utils": "8.23.0",
+    "@instructure/ui-view": "8.23.0",
+    "@instructure/uid": "8.23.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -55,6 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "5809c01bc3fc6e7b468d18d44c22f364304561ed"
+  "sideEffects": false
 }

package/src/Select/index.tsx

@@ -125,7 +125,8 @@ class Select extends Component<SelectProps> {
   state = {
     hasInputRef: false
   }
-  ref: HTMLInputElement | null = null
+  ref: HTMLSpanElement | null = null
+  _input: HTMLInputElement | null = null
   private _defaultId = this.props.deterministicId!()
   private _inputContainer: HTMLSpanElement | null = null
   private _listView: Element | null = null
@@ -135,15 +136,7 @@ class Select extends Component<SelectProps> {
   private _optionHeight = 36
 
   focus() {
-    this.ref && this.ref.focus()
-  }
-
-  get _input() {
-    console.warn(
-      '_input property is deprecated and will be removed in v9, please use ref instead'
-    )
-
-    return this.ref
+    this._input && this._input.focus()
   }
 
   get childrenArray() {
@@ -155,7 +148,7 @@ class Select extends Component<SelectProps> {
   }
 
   get focused() {
-    return this.ref ? isActiveElement(this.ref) : false
+    return this._input ? isActiveElement(this._input) : false
   }
 
   get id() {
@@ -227,8 +220,7 @@ class Select extends Component<SelectProps> {
     if (!this.state.hasInputRef) {
       this.setState({ hasInputRef: true })
     }
-
-    this.ref = node
+    this._input = node
     this.props.inputRef?.(node)
   }
 
@@ -646,7 +638,10 @@ class Select extends Component<SelectProps> {
           getDisabledOptionProps,
           getDescriptionProps
         }) => (
-          <span {...getRootProps({ css: styles?.select })}>
+          <span
+            {...getRootProps({ css: styles?.select })}
+            ref={(el) => (this.ref = el)}
+          >
             {this.renderInput({ getInputProps, getTriggerProps })}
             <span {...getDescriptionProps()} css={styles?.assistiveText}>
               {assistiveText}