@instructure/ui-simple-select 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/lib/SimpleSelect/v2/index.js

@@ -1,12 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SimpleSelect = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
@@ -19,10 +17,7 @@ var _Option = require("./Option");
 var _Group = require("./Group");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
-  _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", "layout"];
-var _dec, _class, _SimpleSelect;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -52,137 +47,32 @@ category: components
 tags: form, field, dropdown
 ---
 **/
-let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec(_class = (_SimpleSelect = class SimpleSelect extends _react.Component {
+let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec(_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 defaultProps = {
+    size: 'medium',
+    isRequired: false,
+    isInline: false,
+    visibleOptionsCount: 8,
+    placement: 'bottom stretch',
+    constrain: 'window',
+    renderEmptyOption: '---',
+    isOptionContentAppliedToInput: false
+  };
+  ref = null;
+  _emptyOptionId;
   constructor(props) {
     super(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);
-      }
-      if (event.type.startsWith('key')) {
-        const keyboardEvent = event;
-        const children = _react.Children.toArray(this.props.children);
-        if (!this.state.inputValue && children.length > 0) {
-          const position = keyboardEvent.key === 'ArrowDown' ? 'first' : keyboardEvent.key === 'ArrowUp' ? 'last' : void 0;
-          if (position) {
-            var _this$getOptionByPosi;
-            const optionId = (_this$getOptionByPosi = this.getOptionByPosition(position)) === null || _this$getOptionByPosi === void 0 ? void 0 : _this$getOptionByPosi.props.id;
-            optionId && this.setState({
-              highlightedOptionId: optionId
-            });
-          }
-        }
-      }
-    };
-    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, {
-      id
-    }) => {
-      if (id === this._emptyOptionId) return;
-      this.setState({
-        highlightedOptionId: id,
-        inputValue: this.state.inputValue
-      });
-    };
-    this.handleSelectOption = (event, {
-      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;
-
-      // Focus needs to be reapplied to input
-      // after selecting an item to make sure VoiceOver behaves correctly on iOS
-      if (utils.isAndroidOrIOS()) {
-        this.blur();
-        this.focus();
-      }
-      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
+      highlightedOptionId: undefined,
+      selectedOptionId: option ? option.props.id : undefined
     };
     this._emptyOptionId = props.deterministicId('Select-EmptyOption');
   }
@@ -199,7 +89,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
     return this.ref ? this.ref.focused : false;
   }
   get id() {
-    return this.ref ? this.ref.id : void 0;
+    return this.ref ? this.ref.id : undefined;
   }
   get isControlled() {
     return typeof this.props.value !== 'undefined';
@@ -226,7 +116,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       // state.inputValue
       const option = this.getOption('children', this.state.inputValue);
       this.setState({
-        inputValue: option ? option.props.children : void 0,
+        inputValue: option ? option.props.children : undefined,
         selectedOptionId: option ? option.props.id : ''
       });
     }
@@ -245,8 +135,10 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
     }
   }
   getInitialOption(props) {
-    const value = props.value,
-      defaultValue = props.defaultValue;
+    const {
+      value,
+      defaultValue
+    } = props;
     const initialValue = value || defaultValue;
     if (typeof initialValue === 'string' || typeof initialValue === 'number') {
       // get option based on value or defaultValue, if provided
@@ -276,6 +168,29 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
     }
     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;
+  };
   getOptionByPosition(position) {
     const children = _react.Children.toArray(this.props.children);
 
@@ -284,7 +199,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
 
     // Check if child is an option or group
     const child = children[index];
-    if (!child) return void 0;
+    if (!child) return undefined;
 
     // If it's a regular option, return it
     if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Option.Option])) {
@@ -297,8 +212,104 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       const groupIndex = position === 'first' ? 0 : groupOptions.length - 1;
       return groupOptions[groupIndex];
     }
-    return void 0;
+    return undefined;
   }
+  handleRef = node => {
+    this.ref = node;
+  };
+  handleBlur = event => {
+    this.setState({
+      highlightedOptionId: undefined
+    });
+    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);
+    }
+    if (event.type.startsWith('key')) {
+      const keyboardEvent = event;
+      const children = _react.Children.toArray(this.props.children);
+      if (!this.state.inputValue && children.length > 0) {
+        const position = keyboardEvent.key === 'ArrowDown' ? 'first' : keyboardEvent.key === 'ArrowUp' ? 'last' : undefined;
+        if (position) {
+          const optionId = this.getOptionByPosition(position)?.props.id;
+          optionId && this.setState({
+            highlightedOptionId: optionId
+          });
+        }
+      }
+    }
+  };
+  handleHideOptions = event => {
+    this.setState(state => {
+      const option = this.getOption('id', state.selectedOptionId);
+      return {
+        isShowingOptions: false,
+        highlightedOptionId: undefined,
+        inputValue: option ? option.props.children : ''
+      };
+    });
+    if (typeof this.props.onHideOptions === 'function') {
+      this.props.onHideOptions(event);
+    }
+  };
+  handleHighlightOption = (_event, {
+    id
+  }) => {
+    if (id === this._emptyOptionId) return;
+    this.setState({
+      highlightedOptionId: id,
+      inputValue: this.state.inputValue
+    });
+  };
+  handleSelectOption = (event, {
+    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;
+
+    // Focus needs to be reapplied to input
+    // after selecting an item to make sure VoiceOver behaves correctly on iOS
+    if (utils.isAndroidOrIOS()) {
+      this.blur();
+      this.focus();
+    }
+    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);
     children = _react.Children.map(children, child => {
@@ -324,20 +335,19 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
     });
   }
   renderOption(option) {
-    var _option$props$isDisab;
-    const _option$props = option.props,
-      id = _option$props.id,
-      value = _option$props.value,
-      children = _option$props.children,
-      renderBeforeLabel = _option$props.renderBeforeLabel,
-      renderAfterLabel = _option$props.renderAfterLabel,
-      rest = (0, _objectWithoutProperties2.default)(_option$props, _excluded);
-    const isDisabled = (_option$props$isDisab = option.props.isDisabled) !== null && _option$props$isDisab !== void 0 ? _option$props$isDisab : false; // after the react 19 upgrade `isDisabled` is undefined instead of defaulting to false if not specified (but only in vitest env for some reason)
+    const {
+      id,
+      value,
+      children,
+      renderBeforeLabel,
+      renderAfterLabel,
+      ...rest
+    } = option.props;
+    const isDisabled = option.props.isDisabled ?? false; // after the react 19 upgrade `isDisabled` is undefined instead of defaulting to false if not specified (but only in vitest env for some reason)
     const isSelected = id === this.state.selectedOptionId;
     const isHighlighted = id === this.state.highlightedOptionId;
     const getRenderLabel = renderLabel => {
-      var _renderLabel$prototyp;
-      if (typeof renderLabel === 'function' && !(renderLabel !== null && renderLabel !== void 0 && (_renderLabel$prototyp = renderLabel.prototype) !== null && _renderLabel$prototyp !== void 0 && _renderLabel$prototyp.isReactComponent)) {
+      if (typeof renderLabel === 'function' && !renderLabel?.prototype?.isReactComponent) {
         return renderLabel.bind(null, {
           id,
           isDisabled,
@@ -361,11 +371,12 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
     }, option.key || id);
   }
   renderGroup(group) {
-    const _group$props = group.props,
-      id = _group$props.id,
-      renderLabel = _group$props.renderLabel,
-      children = _group$props.children,
-      rest = (0, _objectWithoutProperties2.default)(_group$props, _excluded2);
+    const {
+      id,
+      renderLabel,
+      children,
+      ...rest
+    } = group.props;
     return (0, _jsxRuntime.jsx)(_latest.Select.Group, {
       renderLabel: renderLabel,
       ...(0, _passthroughProps.passthroughProps)(rest),
@@ -373,37 +384,38 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
     }, group.key || id);
   }
   render() {
-    const _this$props = this.props,
-      renderLabel = _this$props.renderLabel,
-      value = _this$props.value,
-      defaultValue = _this$props.defaultValue,
-      id = _this$props.id,
-      size = _this$props.size,
-      assistiveText = _this$props.assistiveText,
-      placeholder = _this$props.placeholder,
-      interaction = _this$props.interaction,
-      isRequired = _this$props.isRequired,
-      isInline = _this$props.isInline,
-      width = _this$props.width,
-      optionsMaxWidth = _this$props.optionsMaxWidth,
-      optionsMaxHeight = _this$props.optionsMaxHeight,
-      visibleOptionsCount = _this$props.visibleOptionsCount,
-      messages = _this$props.messages,
-      placement = _this$props.placement,
-      constrain = _this$props.constrain,
-      mountNode = _this$props.mountNode,
-      inputRef = _this$props.inputRef,
-      listRef = _this$props.listRef,
-      renderEmptyOption = _this$props.renderEmptyOption,
-      renderBeforeInput = _this$props.renderBeforeInput,
-      renderAfterInput = _this$props.renderAfterInput,
-      onFocus = _this$props.onFocus,
-      onBlur = _this$props.onBlur,
-      onShowOptions = _this$props.onShowOptions,
-      onHideOptions = _this$props.onHideOptions,
-      children = _this$props.children,
-      layout = _this$props.layout,
-      rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded3);
+    const {
+      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,
+      layout,
+      ...rest
+    } = this.props;
     return (0, _jsxRuntime.jsx)(_latest.Select, {
       renderLabel: renderLabel,
       inputValue: this.state.inputValue,
@@ -441,14 +453,5 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       children: this.renderChildren()
     });
   }
-}, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = _Option.Option, _SimpleSelect.Group = _Group.Group, _SimpleSelect.allowedProps = _props.allowedProps, _SimpleSelect.defaultProps = {
-  size: 'medium',
-  isRequired: false,
-  isInline: false,
-  visibleOptionsCount: 8,
-  placement: 'bottom stretch',
-  constrain: 'window',
-  renderEmptyOption: '---',
-  isOptionContentAppliedToInput: false
-}, _SimpleSelect)) || _class);
+}) || _class);
 var _default = exports.default = SimpleSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "11.7.3-snapshot-7",
+  "version": "11.7.3-snapshot-26",
   "description": "A component for standard select element behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -14,23 +14,23 @@
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.7.3-snapshot-7",
-    "@instructure/shared-types": "11.7.3-snapshot-7",
-    "@instructure/ui-position": "11.7.3-snapshot-7",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-7",
-    "@instructure/ui-form-field": "11.7.3-snapshot-7",
-    "@instructure/ui-select": "11.7.3-snapshot-7"
+    "@babel/runtime": "^7.29.2",
+    "@instructure/console": "11.7.3-snapshot-26",
+    "@instructure/ui-form-field": "11.7.3-snapshot-26",
+    "@instructure/ui-position": "11.7.3-snapshot-26",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-26",
+    "@instructure/shared-types": "11.7.3-snapshot-26",
+    "@instructure/ui-select": "11.7.3-snapshot-26"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-7",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-7",
-    "@instructure/ui-icons": "11.7.3-snapshot-7",
-    "@instructure/ui-utils": "11.7.3-snapshot-7"
+    "@instructure/ui-color-utils": "11.7.3-snapshot-26",
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-26",
+    "@instructure/ui-icons": "11.7.3-snapshot-26",
+    "@instructure/ui-utils": "11.7.3-snapshot-26"
   },
   "peerDependencies": {
     "react": ">=18 <=19"