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

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.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-simple-select
 

package/es/SimpleSelect/Group/index.js

@@ -32,7 +32,13 @@ id: SimpleSelect.Group
 **/
 
 class Group extends Component {
+  static displayName = "Group";
+  static componentId = 'SimpleSelect.Group';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {};
   /* istanbul ignore next */
+
   render() {
     // this component is only used for prop validation. Select.Group children
     // are parsed in Select and rendered as Options components
@@ -41,10 +47,5 @@ class Group extends Component {
 
 }
 
-Group.displayName = "Group";
-Group.componentId = 'SimpleSelect.Group';
-Group.allowedProps = allowedProps;
-Group.propTypes = propTypes;
-Group.defaultProps = {};
 export default Group;
 export { Group };

package/es/SimpleSelect/Option/index.js

@@ -32,7 +32,15 @@ id: SimpleSelect.Option
 **/
 
 class Option extends Component {
+  static displayName = "Option";
+  static componentId = 'SimpleSelect.Option';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    isDisabled: false
+  };
   /* istanbul ignore next */
+
   render() {
     // this component is only used for prop validation. SimpleSelect.Option children
     // are parsed in Select and rendered as Options.Item components
@@ -41,12 +49,5 @@ class Option extends Component {
 
 }
 
-Option.displayName = "Option";
-Option.componentId = 'SimpleSelect.Option';
-Option.allowedProps = allowedProps;
-Option.propTypes = propTypes;
-Option.defaultProps = {
-  isDisabled: false
-};
 export default Option;
 export { Option };

package/es/SimpleSelect/index.js

@@ -3,7 +3,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, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -43,140 +43,33 @@ tags: form, field, dropdown
 ---
 @tsProps
 **/
-let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class SimpleSelect extends Component {
+let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = class SimpleSelect extends Component {
+  static displayName = "SimpleSelect";
+  static componentId = 'SimpleSelect';
+  static Option = Option;
+  static Group = Group;
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    size: 'medium',
+    isRequired: false,
+    isInline: false,
+    visibleOptionsCount: 8,
+    placement: 'bottom stretch',
+    constrain: 'window',
+    renderEmptyOption: '---'
+  };
+  ref = null;
+  _emptyOptionId;
+
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._emptyOptionId = void 0;
-
-    this.getOption = (field, value) => {
-      const children = Children.toArray(this.props.children);
-      let match;
-
-      for (let i = 0; i < children.length; ++i) {
-        const child = children[i];
-
-        if (matchComponentTypes(child, [Option])) {
-          if (child.props[field] === value) {
-            match = child;
-          }
-        } else if (matchComponentTypes(child, [Group])) {
-          const groupChildren = 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);
-
+    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');
   }
@@ -264,6 +157,121 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
     return match;
   }
 
+  getOption = (field, value) => {
+    const children = Children.toArray(this.props.children);
+    let match;
+
+    for (let i = 0; i < children.length; ++i) {
+      const child = children[i];
+
+      if (matchComponentTypes(child, [Option])) {
+        if (child.props[field] === value) {
+          match = child;
+        }
+      } else if (matchComponentTypes(child, [Group])) {
+        const groupChildren = 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 = Children.toArray(this.props.children);
     children = Children.map(children, child => {
@@ -407,14 +415,6 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
     }, passthroughProps(rest)), this.renderChildren());
   }
 
-}, _class2.displayName = "SimpleSelect", _class2.componentId = 'SimpleSelect', _class2.Option = Option, _class2.Group = Group, _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  size: 'medium',
-  isRequired: false,
-  isInline: false,
-  visibleOptionsCount: 8,
-  placement: 'bottom stretch',
-  constrain: 'window',
-  renderEmptyOption: '---'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export { SimpleSelect };
 export default SimpleSelect;

package/lib/SimpleSelect/Group/index.js

@@ -41,7 +41,13 @@ id: SimpleSelect.Group
 @tsProps
 **/
 class Group extends _react.Component {
+  static displayName = "Group";
+  static componentId = 'SimpleSelect.Group';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {};
   /* istanbul ignore next */
+
   render() {
     // this component is only used for prop validation. Select.Group children
     // are parsed in Select and rendered as Options components
@@ -51,10 +57,5 @@ class Group extends _react.Component {
 }
 
 exports.Group = Group;
-Group.displayName = "Group";
-Group.componentId = 'SimpleSelect.Group';
-Group.allowedProps = _props.allowedProps;
-Group.propTypes = _props.propTypes;
-Group.defaultProps = {};
 var _default = Group;
 exports.default = _default;

package/lib/SimpleSelect/Option/index.js

@@ -41,7 +41,15 @@ id: SimpleSelect.Option
 @tsProps
 **/
 class Option extends _react.Component {
+  static displayName = "Option";
+  static componentId = 'SimpleSelect.Option';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {
+    isDisabled: false
+  };
   /* istanbul ignore next */
+
   render() {
     // this component is only used for prop validation. SimpleSelect.Option children
     // are parsed in Select and rendered as Options.Item components
@@ -51,12 +59,5 @@ class Option extends _react.Component {
 }
 
 exports.Option = Option;
-Option.displayName = "Option";
-Option.componentId = 'SimpleSelect.Option';
-Option.allowedProps = _props.allowedProps;
-Option.propTypes = _props.propTypes;
-Option.defaultProps = {
-  isDisabled: false
-};
 var _default = Option;
 exports.default = _default;