@instructure/ui-select 8.22.0 → 8.22.1-snapshot.23

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

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}