@instructure/ui-simple-select 8.14.1-snapshot.17 → 8.14.1-snapshot.27

package/es/SimpleSelect/Group/index.js

@@ -28,6 +28,7 @@ import { allowedProps, propTypes } from './props';
 parent: SimpleSelect
 id: SimpleSelect.Group
 ---
+@tsProps
 **/
 
 class Group extends Component {
@@ -44,8 +45,6 @@ Group.displayName = "Group";
 Group.componentId = 'SimpleSelect.Group';
 Group.allowedProps = allowedProps;
 Group.propTypes = propTypes;
-Group.defaultProps = {
-  children: null
-};
+Group.defaultProps = {};
 export default Group;
 export { Group };

package/es/SimpleSelect/Group/props.js

@@ -25,14 +25,7 @@ import PropTypes from 'prop-types';
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { Option } from '../Option';
 const propTypes = {
-  /**
-   * The label associated with the group options.
-   */
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
-  /**
-   * Children of type `<SimpleSelect.Option />` that will be considered part of the group.
-   */
   children: ChildrenPropTypes.oneOf([Option])
 };
 const allowedProps = ['renderLabel', 'children'];

package/es/SimpleSelect/Option/index.js

@@ -28,6 +28,7 @@ import { allowedProps, propTypes } from './props';
 parent: SimpleSelect
 id: SimpleSelect.Option
 ---
+@tsProps
 **/
 
 class Option extends Component {
@@ -45,8 +46,7 @@ Option.componentId = 'SimpleSelect.Option';
 Option.allowedProps = allowedProps;
 Option.propTypes = propTypes;
 Option.defaultProps = {
-  isDisabled: false,
-  children: null
+  isDisabled: false
 };
 export default Option;
 export { Option };

package/es/SimpleSelect/Option/props.js

@@ -23,34 +23,11 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  /**
-   * The id for the option.
-   */
   id: PropTypes.string.isRequired,
-
-  /**
-   * The value for the option.
-   */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-
-  /**
-   * Whether or not this option is disabled.
-   */
   isDisabled: PropTypes.bool,
-
-  /**
-   * Content to display before the option label, such as an icon.
-   */
   renderBeforeLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Content to display after the option label, such as an icon.
-   */
   renderAfterLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Content to display as the option label.
-   */
   children: PropTypes.string
 };
 const allowedProps = ['id', 'value', 'isDisabled', 'renderBeforeLabel', 'renderAfterLabel', 'children'];

package/es/SimpleSelect/SimpleSelectLocator.js

@@ -23,11 +23,13 @@
  */
 import { locator } from '@instructure/ui-test-locator';
 /* eslint-disable no-restricted-imports */
+// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
 
 import { SelectLocator } from '@instructure/ui-select/es/Select/SelectLocator';
 /* eslint-enable no-restricted-imports */
 
-import { SimpleSelect } from './index';
+import { SimpleSelect } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const SimpleSelectLocator = locator(SimpleSelect.selector, {
   findInput: SelectLocator.findInput,
   // TODO these dont work because TS doesnt find its type declarations,

package/es/SimpleSelect/index.js

@@ -36,18 +36,48 @@ import { Select } from '@instructure/ui-select';
 import { Option } from './Option';
 import { Group } from './Group';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 tags: form, field, dropdown
 ---
+@tsProps
 **/
-
 let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class SimpleSelect extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
-    this._emptyOptionId = uid('Select-EmptyOption');
+    this._emptyOptionId = void 0;
+
+    this.getOption = (field, value) => {
+      let match;
+
+      for (let i = 0; i < this.childrenArray.length; ++i) {
+        const child = this.childrenArray[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;
@@ -55,16 +85,22 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
 
     this.handleBlur = event => {
       this.setState({
-        highlightedOptionId: null
+        highlightedOptionId: void 0
       });
-      this.props.onBlur(event);
+
+      if (typeof this.props.onBlur === 'function') {
+        this.props.onBlur(event);
+      }
     };
 
     this.handleShowOptions = event => {
       this.setState({
         isShowingOptions: true
       });
-      this.props.onShowOptions(event);
+
+      if (typeof this.props.onShowOptions === 'function') {
+        this.props.onShowOptions(event);
+      }
     };
 
     this.handleHideOptions = event => {
@@ -72,18 +108,21 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
         const option = this.getOption('id', state.selectedOptionId);
         return {
           isShowingOptions: false,
-          highlightedOptionId: null,
+          highlightedOptionId: void 0,
           inputValue: option ? option.props.children : ''
         };
       });
-      this.props.onHideOptions(event);
+
+      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.props.children;
+      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,
@@ -118,12 +157,17 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
       } // fire onChange if selected option changed
 
 
-      option && this.props.onChange(event, {
-        value,
-        id
-      }); // hide options list whenever selection is made
+      if (option && typeof this.props.onChange === 'function') {
+        this.props.onChange(event, {
+          value,
+          id
+        });
+      } // hide options list whenever selection is made
 
-      this.props.onHideOptions(event);
+
+      if (typeof this.props.onHideOptions === 'function') {
+        this.props.onHideOptions(event);
+      }
     };
 
     const _option = this.getInitialOption(props);
@@ -131,25 +175,30 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
     this.state = {
       inputValue: _option ? _option.props.children : '',
       isShowingOptions: false,
-      highlightedOptionId: null,
-      selectedOptionId: _option ? _option.props.id : null
+      highlightedOptionId: void 0,
+      selectedOptionId: _option ? _option.props.id : void 0
     };
+    this._emptyOptionId = uid('Select-EmptyOption');
   }
 
   get _select() {
     return this.ref;
   }
 
+  get childrenArray() {
+    return Children.toArray(this.props.children);
+  }
+
   focus() {
     this.ref && this.ref.focus();
   }
 
   get focused() {
-    return this.ref && this.ref.focused;
+    return this.ref ? this.ref.focused : false;
   }
 
   get id() {
-    return this.ref && this.ref.id;
+    return this.ref ? this.ref.id : void 0;
   }
 
   get isControlled() {
@@ -189,7 +238,7 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
     } // otherwise get the first option
 
 
-    return this.getOptionByIndex(0);
+    return this.getFirstOption();
   }
 
   getOptionLabelById(id) {
@@ -197,12 +246,11 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
     return option ? option.props.children : '';
   }
 
-  getOptionByIndex(index) {
-    const children = Children.toArray(this.props.children);
-    let match = null;
+  getFirstOption() {
+    let match;
 
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
+    for (let i = 0; i < this.childrenArray.length; i++) {
+      const child = this.childrenArray[i];
 
       if (matchComponentTypes(child, [Option])) {
         match = child;
@@ -219,39 +267,8 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
     return match;
   }
 
-  getOption(field, value) {
-    const children = Children.toArray(this.props.children);
-    let match = null;
-
-    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;
-  }
-
   renderChildren() {
-    let children = Children.toArray(this.props.children);
-    children = Children.map(children, child => {
+    const children = Children.map(this.childrenArray, child => {
       if (matchComponentTypes(child, [Option])) {
         return this.renderOption(child);
       } else if (matchComponentTypes(child, [Group])) {
@@ -385,28 +402,17 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
       onRequestHideOptions: this.handleHideOptions,
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption
-    }, passthroughProps(rest)), this.renderChildren(children));
+    }, 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',
-  placeholder: null,
   isRequired: false,
   isInline: false,
   visibleOptionsCount: 8,
   placement: 'bottom stretch',
   constrain: 'window',
-  onChange: (event, data) => {},
-  onFocus: event => {},
-  onBlur: event => {},
-  onShowOptions: event => {},
-  onHideOptions: event => {},
-  inputRef: node => {},
-  listRef: node => {},
-  renderEmptyOption: '---',
-  renderBeforeInput: null,
-  renderAfterInput: null,
-  children: null
+  renderEmptyOption: '---'
 }, _temp)) || _class);
 export { SimpleSelect };
 export default SimpleSelect;

package/es/SimpleSelect/props.js

@@ -28,164 +28,34 @@ import { PositionPropTypes } from '@instructure/ui-position';
 import { Group } from './Group';
 import { Option } from './Option';
 const propTypes = {
-  /**
-   * The form field label.
-   */
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
-  /**
-   * The value corresponding to the value of the selected option. If defined,
-   * the component will act controlled and will not manage its own state.
-   */
   // TODO: it was using the "controllable" util, in the TS migration mimic that behaviour
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * The value of the option to select by default, when uncontrolled.
-   */
   defaultValue: PropTypes.string,
-
-  /**
-   * The id of the text input. One is generated if not supplied.
-   */
   id: PropTypes.string,
-
-  /**
-   * The size of the text input.
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Additional helpful text to provide to screen readers about the operation
-   * of the component. Provided via aria-describedby.
-   */
   assistiveText: PropTypes.string,
-
-  /**
-   * Html placeholder text to display when the input has no value. This should
-   * be hint text, not a label replacement.
-   */
   placeholder: PropTypes.string,
-
-  /**
-   * Specifies if interaction with the input is enabled, disabled, or readonly.
-   * When "disabled", the input changes visibly to indicate that it cannot
-   * receive user interactions. When "readonly" the input still cannot receive
-   * user interactions but it keeps the same styles as if it were enabled.
-   */
   interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-
-  /**
-   * Whether or not the text input is required.
-   */
   isRequired: PropTypes.bool,
-
-  /**
-   * Whether the input is rendered inline with other elements or if it
-   * is rendered as a block level element.
-   */
   isInline: PropTypes.bool,
-
-  /**
-   * The width of the text input.
-   */
   width: PropTypes.string,
-
-  /**
-   * The max width the options list can be before option text wraps. If not
-   * set, the list will only display as wide as the text input.
-   */
   optionsMaxWidth: PropTypes.string,
-
-  /**
-   * The number of options that should be visible before having to scroll.
-   */
   visibleOptionsCount: PropTypes.number,
-
-  /**
-   * Displays messages and validation for the input. It should be an object
-   * with the following shape:
-   * `{
-   *   text: PropTypes.node,
-   *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   * }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
-
-  /**
-   * The placement of the options list.
-   */
   placement: PositionPropTypes.placement,
-
-  /**
-   * The parent in which to constrain the placement.
-   */
   constrain: PositionPropTypes.constrain,
-
-  /**
-   * An element or a function returning an element to use mount the options
-   * list to in the DOM (defaults to `document.body`)
-   */
   mountNode: PositionPropTypes.mountNode,
-
-  /**
-   * Callback fired when a new option is selected.
-   * @param {Object} event - the event object
-   * @param {Object} data - additional data
-   * @param data.value - the value of selected option
-   * @param data.id - the id of the selected option
-   */
   onChange: PropTypes.func,
-
-  /**
-   * Callback fired when text input receives focus.
-   */
   onFocus: PropTypes.func,
-
-  /**
-   * Callback fired when text input loses focus.
-   */
   onBlur: PropTypes.func,
-
-  /**
-   * Callback fired when the options list is shown.
-   */
   onShowOptions: PropTypes.func,
-
-  /**
-   * Callback fired when the options list is hidden.
-   */
   onHideOptions: PropTypes.func,
-
-  /**
-   * A ref to the html `input` element.
-   */
   inputRef: PropTypes.func,
-
-  /**
-   * A ref to the html `ul` element.
-   */
   listRef: PropTypes.func,
-
-  /**
-   * Content to display in the list when no options are available.
-   */
   renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Content to display before the text input. This will commonly be an icon.
-   */
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Content to display after the text input. This content will replace the
-   * default arrow icons.
-   */
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Children of type `<SimpleSelect.Option />` or `<SimpleSelect.Group />`.
-   */
   children: ChildrenPropTypes.oneOf([Group, Option])
 };
 const allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children'];

package/lib/SimpleSelect/Group/index.js

@@ -38,6 +38,7 @@ var _props = require("./props");
 parent: SimpleSelect
 id: SimpleSelect.Group
 ---
+@tsProps
 **/
 class Group extends _react.Component {
   /* istanbul ignore next */
@@ -54,8 +55,6 @@ Group.displayName = "Group";
 Group.componentId = 'SimpleSelect.Group';
 Group.allowedProps = _props.allowedProps;
 Group.propTypes = _props.propTypes;
-Group.defaultProps = {
-  children: null
-};
+Group.defaultProps = {};
 var _default = Group;
 exports.default = _default;

package/lib/SimpleSelect/Group/props.js

@@ -37,14 +37,7 @@ var _Option = require("../Option");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The label associated with the group options.
-   */
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-
-  /**
-   * Children of type `<SimpleSelect.Option />` that will be considered part of the group.
-   */
   children: _Children.Children.oneOf([_Option.Option])
 };
 exports.propTypes = propTypes;

package/lib/SimpleSelect/Option/index.js

@@ -38,6 +38,7 @@ var _props = require("./props");
 parent: SimpleSelect
 id: SimpleSelect.Option
 ---
+@tsProps
 **/
 class Option extends _react.Component {
   /* istanbul ignore next */
@@ -55,8 +56,7 @@ Option.componentId = 'SimpleSelect.Option';
 Option.allowedProps = _props.allowedProps;
 Option.propTypes = _props.propTypes;
 Option.defaultProps = {
-  isDisabled: false,
-  children: null
+  isDisabled: false
 };
 var _default = Option;
 exports.default = _default;

package/lib/SimpleSelect/Option/props.js

@@ -33,34 +33,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The id for the option.
-   */
   id: _propTypes.default.string.isRequired,
-
-  /**
-   * The value for the option.
-   */
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-
-  /**
-   * Whether or not this option is disabled.
-   */
   isDisabled: _propTypes.default.bool,
-
-  /**
-   * Content to display before the option label, such as an icon.
-   */
   renderBeforeLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Content to display after the option label, such as an icon.
-   */
   renderAfterLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Content to display as the option label.
-   */
   children: _propTypes.default.string
 };
 exports.propTypes = propTypes;

package/lib/SimpleSelect/SimpleSelectLocator.js

@@ -36,8 +36,10 @@ var _index = require("./index");
  */
 
 /* eslint-disable no-restricted-imports */
+// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
 
 /* eslint-enable no-restricted-imports */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const SimpleSelectLocator = (0, _locator.locator)(_index.SimpleSelect.selector, {
   findInput: _SelectLocator.SelectLocator.findInput,
   // TODO these dont work because TS doesnt find its type declarations,