@instructure/ui-select 8.36.1-snapshot-0 → 8.36.1-snapshot-2

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.36.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-0) (2023-03-28)
+## [8.36.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-2) (2023-04-11)
 
-**Note:** Version bump only for package @instructure/ui-select
+
+### Performance Improvements
+
+* **ui-select:** improve perf for large amount of items ([396a13b](https://github.com/instructure/instructure-ui/commit/396a13b81b0471cfd19329817c563bcddc158828))
 
 
 

package/es/Select/index.js

@@ -28,7 +28,7 @@ var _dec, _dec2, _dec3, _class, _class2, _Options$Separator, _Options$Separator2
  */
 
 /** @jsx jsx */
-import React, { Children, Component } from 'react';
+import React, { Children, Component, memo } from 'react';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { testable } from '@instructure/ui-testable';
 import { matchComponentTypes, omitProps, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
@@ -45,6 +45,29 @@ import generateComponentTheme from './theme';
 import { Group } from './Group';
 import { Option } from './Option';
 import { allowedProps, propTypes } from './props';
+// This memoed Option component is used to prevent unnecessary re-renders of
+// Options.Item when the Select component is re-rendered. This is necessary
+// because the Select component is re-rendered on every prop change of the <Select.Option>
+// and with a large amount of options, this can cause a lot of unnecessary re-renders.
+const MemoedOption = /*#__PURE__*/memo(function Opt(props) {
+  const optionsItemProps = props.optionsItemProps,
+    children = props.children;
+  return (
+    // The main <Options> that renders this is always an "ul"
+    jsx(Options.Item, Object.assign({
+      as: "li"
+    }, optionsItemProps), children)
+  );
+},
+// This is a custom equality function that checks if the props of the
+// <Select.Option> have changed. If they haven't, then the Options.Item
+// doesn't need to be re-rendered.
+(prevProps, nextProps) => {
+  return prevProps.selectOption.props.isHighlighted === nextProps.selectOption.props.isHighlighted && prevProps.selectOption.props.isSelected === nextProps.selectOption.props.isSelected && prevProps.selectOption.props.isDisabled === nextProps.selectOption.props.isDisabled && prevProps.selectOption.props.children === nextProps.selectOption.props.children && prevProps.selectOption.props.id === nextProps.selectOption.props.id && prevProps.selectOption.props.renderBeforeLabel === nextProps.selectOption.props.renderBeforeLabel && prevProps.selectOption.props.renderAfterLabel === nextProps.selectOption.props.renderAfterLabel && prevProps.children === nextProps.children;
+});
+// This is needed so the propTypes in <Options> check are correct
+MemoedOption.displayName = 'Item';
+
 /**
 ---
 category: components
@@ -98,7 +121,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
 
     // scroll option into view if needed
-    this.scrollToOption(this.highlightedOptionId);
+    requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId));
   }
   focus() {
     this._input && this._input.focus();
@@ -199,11 +222,10 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       onRequestShowOptions = _this$props5.onRequestShowOptions,
       onRequestHideOptions = _this$props5.onRequestHideOptions,
       onRequestSelectOption = _this$props5.onRequestSelectOption;
-    const highlightedOptionId = this.highlightedOptionId;
-    const selectedOptionId = this.selectedOptionId;
     return this.interaction === 'enabled' ? {
       onRequestShowOptions: event => {
         onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
+        const selectedOptionId = this.selectedOptionId;
         if (selectedOptionId && !Array.isArray(selectedOptionId)) {
           // highlight selected option on show
           this.highlightOption(event, selectedOptionId);
@@ -216,6 +238,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
         let id = _ref.id,
           direction = _ref.direction;
         if (!isShowingOptions) return;
+        const highlightedOptionId = this.highlightedOptionId;
         // if id exists, use that
         let highlightId = this._optionIds.indexOf(id) > -1 ? id : void 0;
         if (!highlightId) {
@@ -299,7 +322,10 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       // track as valid option if not disabled
       this._optionIds.push(id);
     }
-    return jsx(Options.Item, optionProps, children);
+    return jsx(MemoedOption, {
+      optionsItemProps: optionProps,
+      selectOption: option
+    }, children);
   }
   renderGroup(group, data) {
     const getOptionProps = data.getOptionProps,

package/lib/Select/index.js

@@ -33,6 +33,29 @@ 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, _dec3, _class, _class2, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
+// This memoed Option component is used to prevent unnecessary re-renders of
+// Options.Item when the Select component is re-rendered. This is necessary
+// because the Select component is re-rendered on every prop change of the <Select.Option>
+// and with a large amount of options, this can cause a lot of unnecessary re-renders.
+const MemoedOption = /*#__PURE__*/(0, _react.memo)(function Opt(props) {
+  const optionsItemProps = props.optionsItemProps,
+    children = props.children;
+  return (
+    // The main <Options> that renders this is always an "ul"
+    (0, _emotion.jsx)(_Options.Options.Item, Object.assign({
+      as: "li"
+    }, optionsItemProps), children)
+  );
+},
+// This is a custom equality function that checks if the props of the
+// <Select.Option> have changed. If they haven't, then the Options.Item
+// doesn't need to be re-rendered.
+(prevProps, nextProps) => {
+  return prevProps.selectOption.props.isHighlighted === nextProps.selectOption.props.isHighlighted && prevProps.selectOption.props.isSelected === nextProps.selectOption.props.isSelected && prevProps.selectOption.props.isDisabled === nextProps.selectOption.props.isDisabled && prevProps.selectOption.props.children === nextProps.selectOption.props.children && prevProps.selectOption.props.id === nextProps.selectOption.props.id && prevProps.selectOption.props.renderBeforeLabel === nextProps.selectOption.props.renderBeforeLabel && prevProps.selectOption.props.renderAfterLabel === nextProps.selectOption.props.renderAfterLabel && prevProps.children === nextProps.children;
+});
+// This is needed so the propTypes in <Options> check are correct
+MemoedOption.displayName = 'Item';
+
 /**
 ---
 category: components
@@ -86,7 +109,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
     (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
 
     // scroll option into view if needed
-    this.scrollToOption(this.highlightedOptionId);
+    requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId));
   }
   focus() {
     this._input && this._input.focus();
@@ -187,11 +210,10 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
       onRequestShowOptions = _this$props5.onRequestShowOptions,
       onRequestHideOptions = _this$props5.onRequestHideOptions,
       onRequestSelectOption = _this$props5.onRequestSelectOption;
-    const highlightedOptionId = this.highlightedOptionId;
-    const selectedOptionId = this.selectedOptionId;
     return this.interaction === 'enabled' ? {
       onRequestShowOptions: event => {
         onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
+        const selectedOptionId = this.selectedOptionId;
         if (selectedOptionId && !Array.isArray(selectedOptionId)) {
           // highlight selected option on show
           this.highlightOption(event, selectedOptionId);
@@ -204,6 +226,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
         let id = _ref.id,
           direction = _ref.direction;
         if (!isShowingOptions) return;
+        const highlightedOptionId = this.highlightedOptionId;
         // if id exists, use that
         let highlightId = this._optionIds.indexOf(id) > -1 ? id : void 0;
         if (!highlightId) {
@@ -287,7 +310,10 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
       // track as valid option if not disabled
       this._optionIds.push(id);
     }
-    return (0, _emotion.jsx)(_Options.Options.Item, optionProps, children);
+    return (0, _emotion.jsx)(MemoedOption, {
+      optionsItemProps: optionProps,
+      selectOption: option
+    }, children);
   }
   renderGroup(group, data) {
     const getOptionProps = data.getOptionProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.36.1-snapshot-0",
+  "version": "8.36.1-snapshot-2",
   "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.36.1-snapshot-0",
-    "@instructure/ui-color-utils": "8.36.1-snapshot-0",
-    "@instructure/ui-test-locator": "8.36.1-snapshot-0",
-    "@instructure/ui-test-utils": "8.36.1-snapshot-0",
-    "@instructure/ui-themes": "8.36.1-snapshot-0"
+    "@instructure/ui-babel-preset": "8.36.1-snapshot-2",
+    "@instructure/ui-color-utils": "8.36.1-snapshot-2",
+    "@instructure/ui-test-locator": "8.36.1-snapshot-2",
+    "@instructure/ui-test-utils": "8.36.1-snapshot-2",
+    "@instructure/ui-themes": "8.36.1-snapshot-2"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@instructure/emotion": "8.36.1-snapshot-0",
-    "@instructure/shared-types": "8.36.1-snapshot-0",
-    "@instructure/ui-dom-utils": "8.36.1-snapshot-0",
-    "@instructure/ui-form-field": "8.36.1-snapshot-0",
-    "@instructure/ui-icons": "8.36.1-snapshot-0",
-    "@instructure/ui-options": "8.36.1-snapshot-0",
-    "@instructure/ui-popover": "8.36.1-snapshot-0",
-    "@instructure/ui-position": "8.36.1-snapshot-0",
-    "@instructure/ui-prop-types": "8.36.1-snapshot-0",
-    "@instructure/ui-react-utils": "8.36.1-snapshot-0",
-    "@instructure/ui-selectable": "8.36.1-snapshot-0",
-    "@instructure/ui-testable": "8.36.1-snapshot-0",
-    "@instructure/ui-text-input": "8.36.1-snapshot-0",
-    "@instructure/ui-utils": "8.36.1-snapshot-0",
-    "@instructure/ui-view": "8.36.1-snapshot-0",
-    "@instructure/uid": "8.36.1-snapshot-0",
+    "@instructure/emotion": "8.36.1-snapshot-2",
+    "@instructure/shared-types": "8.36.1-snapshot-2",
+    "@instructure/ui-dom-utils": "8.36.1-snapshot-2",
+    "@instructure/ui-form-field": "8.36.1-snapshot-2",
+    "@instructure/ui-icons": "8.36.1-snapshot-2",
+    "@instructure/ui-options": "8.36.1-snapshot-2",
+    "@instructure/ui-popover": "8.36.1-snapshot-2",
+    "@instructure/ui-position": "8.36.1-snapshot-2",
+    "@instructure/ui-prop-types": "8.36.1-snapshot-2",
+    "@instructure/ui-react-utils": "8.36.1-snapshot-2",
+    "@instructure/ui-selectable": "8.36.1-snapshot-2",
+    "@instructure/ui-testable": "8.36.1-snapshot-2",
+    "@instructure/ui-text-input": "8.36.1-snapshot-2",
+    "@instructure/ui-utils": "8.36.1-snapshot-2",
+    "@instructure/ui-view": "8.36.1-snapshot-2",
+    "@instructure/uid": "8.36.1-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Select/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import React, { Children, Component } from 'react'
+import React, { Children, Component, memo } from 'react'
 
 import { createChainedFunction } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
@@ -77,6 +77,51 @@ type GroupChild = React.ComponentElement<SelectGroupProps, Group>
 type OptionChild = React.ComponentElement<SelectOptionProps, Option>
 type SelectChildren = (GroupChild | OptionChild)[]
 
+type MemoedOptionProps = React.PropsWithChildren<{
+  selectOption: OptionChild
+  optionsItemProps: OptionsItemProps
+}>
+
+// This memoed Option component is used to prevent unnecessary re-renders of
+// Options.Item when the Select component is re-rendered. This is necessary
+// because the Select component is re-rendered on every prop change of the <Select.Option>
+// and with a large amount of options, this can cause a lot of unnecessary re-renders.
+const MemoedOption = memo(
+  function Opt(props: MemoedOptionProps) {
+    const { optionsItemProps, children } = props
+
+    return (
+      // The main <Options> that renders this is always an "ul"
+      <Options.Item as="li" {...optionsItemProps}>
+        {children}
+      </Options.Item>
+    )
+  },
+  // This is a custom equality function that checks if the props of the
+  // <Select.Option> have changed. If they haven't, then the Options.Item
+  // doesn't need to be re-rendered.
+  (prevProps, nextProps) => {
+    return (
+      prevProps.selectOption.props.isHighlighted ===
+        nextProps.selectOption.props.isHighlighted &&
+      prevProps.selectOption.props.isSelected ===
+        nextProps.selectOption.props.isSelected &&
+      prevProps.selectOption.props.isDisabled ===
+        nextProps.selectOption.props.isDisabled &&
+      prevProps.selectOption.props.children ===
+        nextProps.selectOption.props.children &&
+      prevProps.selectOption.props.id === nextProps.selectOption.props.id &&
+      prevProps.selectOption.props.renderBeforeLabel ===
+        nextProps.selectOption.props.renderBeforeLabel &&
+      prevProps.selectOption.props.renderAfterLabel ===
+        nextProps.selectOption.props.renderAfterLabel &&
+      prevProps.children === nextProps.children
+    )
+  }
+)
+// This is needed so the propTypes in <Options> check are correct
+MemoedOption.displayName = 'Item'
+
 /**
 ---
 category: components
@@ -118,7 +163,7 @@ class Select extends Component<SelectProps> {
     this.props.makeStyles?.()
 
     // scroll option into view if needed
-    this.scrollToOption(this.highlightedOptionId)
+    requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId))
   }
 
   state = {
@@ -273,13 +318,12 @@ class Select extends Component<SelectProps> {
       onRequestSelectOption
     } = this.props
 
-    const highlightedOptionId = this.highlightedOptionId
-    const selectedOptionId = this.selectedOptionId
-
     return this.interaction === 'enabled'
       ? {
           onRequestShowOptions: (event) => {
             onRequestShowOptions?.(event)
+            const selectedOptionId = this.selectedOptionId
+
             if (selectedOptionId && !Array.isArray(selectedOptionId)) {
               // highlight selected option on show
               this.highlightOption(event, selectedOptionId)
@@ -293,6 +337,8 @@ class Select extends Component<SelectProps> {
             { id, direction }: { id?: string; direction?: number }
           ) => {
             if (!isShowingOptions) return
+
+            const highlightedOptionId = this.highlightedOptionId
             // if id exists, use that
             let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined
             if (!highlightId) {
@@ -389,7 +435,11 @@ class Select extends Component<SelectProps> {
       this._optionIds.push(id)
     }
 
-    return <Options.Item {...optionProps}>{children}</Options.Item>
+    return (
+      <MemoedOption optionsItemProps={optionProps} selectOption={option}>
+        {children}
+      </MemoedOption>
+    )
   }
 
   renderGroup(