@instructure/ui-simple-select 8.25.1-snapshot-10 → 8.25.1-snapshot-15

package/lib/SimpleSelect/index.js

@@ -37,7 +37,7 @@ const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterL
       _excluded2 = ["id", "renderLabel", "children"],
       _excluded3 = ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "optionsMaxHeight", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -46,33 +46,141 @@ tags: form, field, dropdown
 ---
 @tsProps
 **/
-let SimpleSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class SimpleSelect extends _react.Component {
-  static displayName = "SimpleSelect";
-  static componentId = 'SimpleSelect';
-  static Option = _Option.Option;
-  static Group = _Group.Group;
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    size: 'medium',
-    isRequired: false,
-    isInline: false,
-    visibleOptionsCount: 8,
-    placement: 'bottom stretch',
-    constrain: 'window',
-    renderEmptyOption: '---'
-  };
-  ref = null;
-  _emptyOptionId;
-
+let SimpleSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class SimpleSelect extends _react.Component {
   constructor(props) {
     super(props);
-    const option = this.getInitialOption(props);
+    this.ref = null;
+    this._emptyOptionId = void 0;
+
+    this.getOption = (field, value) => {
+      const children = _react.Children.toArray(this.props.children);
+
+      let match;
+
+      for (let i = 0; i < children.length; ++i) {
+        const child = children[i];
+
+        if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Option.Option])) {
+          if (child.props[field] === value) {
+            match = child;
+          }
+        } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+          const groupChildren = _react.Children.toArray(child.props.children);
+
+          for (let j = 0; j < groupChildren.length; ++j) {
+            const groupChild = groupChildren[j];
+
+            if (groupChild.props[field] === value) {
+              match = groupChild;
+              break;
+            }
+          }
+        }
+
+        if (match) break;
+      }
+
+      return match;
+    };
+
+    this.handleRef = node => {
+      this.ref = node;
+    };
+
+    this.handleBlur = event => {
+      this.setState({
+        highlightedOptionId: void 0
+      });
+
+      if (typeof this.props.onBlur === 'function') {
+        this.props.onBlur(event);
+      }
+    };
+
+    this.handleShowOptions = event => {
+      this.setState({
+        isShowingOptions: true
+      });
+
+      if (typeof this.props.onShowOptions === 'function') {
+        this.props.onShowOptions(event);
+      }
+    };
+
+    this.handleHideOptions = event => {
+      this.setState(state => {
+        const option = this.getOption('id', state.selectedOptionId);
+        return {
+          isShowingOptions: false,
+          highlightedOptionId: void 0,
+          inputValue: option ? option.props.children : ''
+        };
+      });
+
+      if (typeof this.props.onHideOptions === 'function') {
+        this.props.onHideOptions(event);
+      }
+    };
+
+    this.handleHighlightOption = (event, _ref) => {
+      let id = _ref.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
+      });
+    };
+
+    this.handleSelectOption = (event, _ref2) => {
+      let id = _ref2.id;
+
+      if (id === this._emptyOptionId) {
+        // selected option is the empty option
+        this.setState({
+          isShowingOptions: false
+        });
+        return;
+      }
+
+      const option = this.getOption('id', id);
+      const value = option && option.props.value;
+
+      if (this.isControlled) {
+        this.setState({
+          isShowingOptions: false
+        });
+      } else {
+        this.setState(state => ({
+          isShowingOptions: false,
+          selectedOptionId: id,
+          inputValue: option ? option.props.children : state.inputValue
+        }));
+      } // fire onChange if selected option changed
+
+
+      if (option && typeof this.props.onChange === 'function') {
+        this.props.onChange(event, {
+          value,
+          id
+        });
+      } // hide options list whenever selection is made
+
+
+      if (typeof this.props.onHideOptions === 'function') {
+        this.props.onHideOptions(event);
+      }
+    };
+
+    const _option = this.getInitialOption(props);
+
     this.state = {
-      inputValue: option ? option.props.children : '',
+      inputValue: _option ? _option.props.children : '',
       isShowingOptions: false,
       highlightedOptionId: void 0,
-      selectedOptionId: option ? option.props.id : void 0
+      selectedOptionId: _option ? _option.props.id : void 0
     };
     this._emptyOptionId = props.deterministicId('Select-EmptyOption');
   }
@@ -161,122 +269,6 @@ let SimpleSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
     return match;
   }
 
-  getOption = (field, value) => {
-    const children = _react.Children.toArray(this.props.children);
-
-    let match;
-
-    for (let i = 0; i < children.length; ++i) {
-      const child = children[i];
-
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Option.Option])) {
-        if (child.props[field] === value) {
-          match = child;
-        }
-      } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
-        const groupChildren = _react.Children.toArray(child.props.children);
-
-        for (let j = 0; j < groupChildren.length; ++j) {
-          const groupChild = groupChildren[j];
-
-          if (groupChild.props[field] === value) {
-            match = groupChild;
-            break;
-          }
-        }
-      }
-
-      if (match) break;
-    }
-
-    return match;
-  };
-  handleRef = node => {
-    this.ref = node;
-  };
-  handleBlur = event => {
-    this.setState({
-      highlightedOptionId: void 0
-    });
-
-    if (typeof this.props.onBlur === 'function') {
-      this.props.onBlur(event);
-    }
-  };
-  handleShowOptions = event => {
-    this.setState({
-      isShowingOptions: true
-    });
-
-    if (typeof this.props.onShowOptions === 'function') {
-      this.props.onShowOptions(event);
-    }
-  };
-  handleHideOptions = event => {
-    this.setState(state => {
-      const option = this.getOption('id', state.selectedOptionId);
-      return {
-        isShowingOptions: false,
-        highlightedOptionId: void 0,
-        inputValue: option ? option.props.children : ''
-      };
-    });
-
-    if (typeof this.props.onHideOptions === 'function') {
-      this.props.onHideOptions(event);
-    }
-  };
-  handleHighlightOption = (event, _ref) => {
-    let id = _ref.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
-    });
-  };
-  handleSelectOption = (event, _ref2) => {
-    let id = _ref2.id;
-
-    if (id === this._emptyOptionId) {
-      // selected option is the empty option
-      this.setState({
-        isShowingOptions: false
-      });
-      return;
-    }
-
-    const option = this.getOption('id', id);
-    const value = option && option.props.value;
-
-    if (this.isControlled) {
-      this.setState({
-        isShowingOptions: false
-      });
-    } else {
-      this.setState(state => ({
-        isShowingOptions: false,
-        selectedOptionId: id,
-        inputValue: option ? option.props.children : state.inputValue
-      }));
-    } // fire onChange if selected option changed
-
-
-    if (option && typeof this.props.onChange === 'function') {
-      this.props.onChange(event, {
-        value,
-        id
-      });
-    } // hide options list whenever selection is made
-
-
-    if (typeof this.props.onHideOptions === 'function') {
-      this.props.onHideOptions(event);
-    }
-  };
-
   renderChildren() {
     let children = _react.Children.toArray(this.props.children);
 
@@ -418,7 +410,15 @@ let SimpleSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
     }, (0, _passthroughProps.passthroughProps)(rest)), this.renderChildren());
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "SimpleSelect", _class2.componentId = 'SimpleSelect', _class2.Option = _Option.Option, _class2.Group = _Group.Group, _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  size: 'medium',
+  isRequired: false,
+  isInline: false,
+  visibleOptionsCount: 8,
+  placement: 'bottom stretch',
+  constrain: 'window',
+  renderEmptyOption: '---'
+}, _class2)) || _class) || _class);
 exports.SimpleSelect = SimpleSelect;
 var _default = SimpleSelect;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-15",
   "description": "A component for standard select element behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,22 +24,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-form-field": "8.25.1-snapshot-10",
-    "@instructure/ui-position": "8.25.1-snapshot-10",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-select": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
+    "@instructure/console": "8.25.1-snapshot-15",
+    "@instructure/shared-types": "8.25.1-snapshot-15",
+    "@instructure/ui-form-field": "8.25.1-snapshot-15",
+    "@instructure/ui-position": "8.25.1-snapshot-15",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-15",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-15",
+    "@instructure/ui-select": "8.25.1-snapshot-15",
+    "@instructure/ui-testable": "8.25.1-snapshot-15",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-icons": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-15",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-15",
+    "@instructure/ui-icons": "8.25.1-snapshot-15",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-15",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-15"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"