@instructure/ui-select 8.17.1-snapshot.1 → 8.17.1-snapshot.18

package/es/Select/index.js

@@ -3,7 +3,7 @@ const _excluded = ["id", "renderLabel", "children"],
       _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions"],
       _excluded3 = ["ref"];
 
-var _dec, _dec2, _class, _class2, _temp, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
+var _dec, _dec2, _dec3, _class, _class2, _temp, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
 
 /*
  * The MIT License (MIT)
@@ -33,8 +33,7 @@ var _dec, _dec2, _class, _class2, _temp, _Options$Separator, _Options$Separator2
 import React, { Children, Component } from 'react';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { testable } from '@instructure/ui-testable';
-import { uid } from '@instructure/uid';
-import { matchComponentTypes, omitProps, getInteraction } from '@instructure/ui-react-utils';
+import { matchComponentTypes, omitProps, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
 import { getBoundingClientRect, isActiveElement } from '@instructure/ui-dom-utils';
 import { View } from '@instructure/ui-view';
 import { Selectable } from '@instructure/ui-selectable';
@@ -56,14 +55,14 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 @tsProps
 **/
-let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends Component {
+let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Select extends Component {
   constructor() {
     super(...arguments);
     this.state = {
       hasInputRef: false
     };
     this.ref = null;
-    this._defaultId = uid('Select');
+    this._defaultId = this.props.deterministicId();
     this._inputContainer = null;
     this._listView = null;
     this._optionIds = [];
@@ -582,6 +581,6 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   placement: 'bottom stretch',
   constrain: 'window',
   shouldNotWrap: false
-}, _class2.Option = Option, _class2.Group = Group, _temp)) || _class) || _class);
+}, _class2.Option = Option, _class2.Group = Group, _temp)) || _class) || _class) || _class);
 export default Select;
 export { Select };

package/lib/Select/index.js

@@ -17,14 +17,14 @@ var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFun
 
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
-var _uid = require("@instructure/uid");
-
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
 
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+
 var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
 
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
@@ -59,7 +59,7 @@ const _excluded = ["id", "renderLabel", "children"],
       _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions"],
       _excluded3 = ["ref"];
 
-var _dec, _dec2, _class, _class2, _temp, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
+var _dec, _dec2, _dec3, _class, _class2, _temp, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
 
 /**
 ---
@@ -68,14 +68,14 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 @tsProps
 **/
-let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends _react.Component {
+let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Select extends _react.Component {
   constructor() {
     super(...arguments);
     this.state = {
       hasInputRef: false
     };
     this.ref = null;
-    this._defaultId = (0, _uid.uid)('Select');
+    this._defaultId = this.props.deterministicId();
     this._inputContainer = null;
     this._listView = null;
     this._optionIds = [];
@@ -590,7 +590,7 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   placement: 'bottom stretch',
   constrain: 'window',
   shouldNotWrap: false
-}, _class2.Option = _Option.Option, _class2.Group = _Group.Group, _temp)) || _class) || _class);
+}, _class2.Option = _Option.Option, _class2.Group = _Group.Group, _temp)) || _class) || _class) || _class);
 exports.Select = Select;
 var _default = Select;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.17.1-snapshot.1+3eaf62445",
+  "version": "8.17.1-snapshot.18+9f145a7d2",
   "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.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-color-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-test-locator": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-themes": "8.17.1-snapshot.1+3eaf62445"
+    "@instructure/ui-babel-preset": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-color-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-test-locator": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-test-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-themes": "8.17.1-snapshot.18+9f145a7d2"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/shared-types": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-dom-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-form-field": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-icons": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-options": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-popover": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-position": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-prop-types": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-selectable": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-testable": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-text-input": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-view": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/uid": "8.17.1-snapshot.1+3eaf62445",
+    "@instructure/emotion": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/shared-types": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-dom-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-form-field": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-icons": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-options": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-popover": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-position": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-prop-types": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-react-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-selectable": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-testable": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-text-input": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-view": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/uid": "8.17.1-snapshot.18+9f145a7d2",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "3eaf62445635c7ef2927ddfcf610fb561a729fd1"
+  "gitHead": "9f145a7d2f84eda965b570fa5702e1fda0c92e58"
 }

package/src/Select/index.tsx

@@ -27,11 +27,11 @@ import React, { Children, Component } from 'react'
 
 import { createChainedFunction } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
-import { uid } from '@instructure/uid'
 import {
   matchComponentTypes,
   omitProps,
-  getInteraction
+  getInteraction,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
 import {
   getBoundingClientRect,
@@ -85,6 +85,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 @tsProps
 **/
+@withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
 class Select extends Component<SelectProps> {
@@ -124,10 +125,8 @@ class Select extends Component<SelectProps> {
   state = {
     hasInputRef: false
   }
-
   ref: HTMLInputElement | null = null
-
-  private _defaultId = uid('Select')
+  private _defaultId = this.props.deterministicId!()
   private _inputContainer: HTMLSpanElement | null = null
   private _listView: Element | null = null
   // temporarily stores actionable options
@@ -238,9 +237,9 @@ class Select extends Component<SelectProps> {
 
     // store option height to calculate list maxHeight
     if (node && node.querySelector('[role="option"]')) {
-      this._optionHeight = (
-        node.querySelector('[role="option"]') as HTMLElement
-      ).offsetHeight
+      this._optionHeight = (node.querySelector(
+        '[role="option"]'
+      ) as HTMLElement).offsetHeight
     }
   }
 

package/src/Select/props.ts

@@ -44,6 +44,7 @@ import type {
   PositionConstraint,
   PositionMountNode
 } from '@instructure/ui-position'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type SelectOwnProps = {
   /**
@@ -260,7 +261,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type SelectProps = SelectOwnProps &
   WithStyleProps<SelectTheme, SelectStyle> &
-  OtherHTMLAttributes<SelectOwnProps, InputHTMLAttributes<SelectOwnProps>>
+  OtherHTMLAttributes<SelectOwnProps, InputHTMLAttributes<SelectOwnProps>> & WithDeterministicIdProps
 
 type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText'>
 

package/tsconfig.build.json

@@ -21,12 +21,13 @@
     { "path": "../ui-popover/tsconfig.build.json" },
     { "path": "../ui-position/tsconfig.build.json" },
     { "path": "../ui-prop-types/tsconfig.build.json" },
-    { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-selectable/tsconfig.build.json" },
     { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-text-input/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" },
+    { "path": "../ui-utils/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../uid/tsconfig.build.json" }
   ]
 }