@toptal/picasso-select 4.0.18-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.43 → 4.0.19-alpha-bill-optimize-select-performance-381ce8200.1

package/dist-package/src/NonNativeSelectOption/NonNativeSelectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NonNativeSelectOption.d.ts","sourceRoot":"","sources":["../../../src/NonNativeSelectOption/NonNativeSelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEjE,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,SAAS,CAAE,SAAQ,SAAS;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;CAClB;AAED,QAAA,MAAM,qBAAqB,qJA0B1B,CAAA;AAID,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"NonNativeSelectOption.d.ts","sourceRoot":"","sources":["../../../src/NonNativeSelectOption/NonNativeSelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEjE,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,SAAS,CAAE,SAAQ,SAAS;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;CAClB;AA4BD,QAAA,MAAM,qBAAqB,qJAY1B,CAAA;AAID,eAAe,qBAAqB,CAAA"}

package/dist-package/src/NonNativeSelectOption/NonNativeSelectOption.js

@@ -11,9 +11,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { MenuItem } from '@toptal/picasso-menu';
-const NonNativeSelectOption = React.memo((_a) => {
+const NonNativeSelectOptionComponent = (_a) => {
     var { option, selected, highlighted, description, children } = _a, itemProps = __rest(_a, ["option", "selected", "highlighted", "description", "children"]);
     return (React.createElement(MenuItem, Object.assign({ value: option.value, selected: highlighted, checkmarked: selected, titleCase: false, description: description, role: 'option', "aria-selected": selected, "data-highlighted": highlighted, disabled: option.disabled }, itemProps), children));
+};
+const NonNativeSelectOption = React.memo(NonNativeSelectOptionComponent, (prevProps, nextProps) => {
+    return (prevProps.selected === nextProps.selected &&
+        prevProps.highlighted === nextProps.highlighted &&
+        prevProps.option === nextProps.option &&
+        prevProps.option.disabled === nextProps.option.disabled &&
+        prevProps.description === nextProps.description &&
+        prevProps.children === nextProps.children);
 });
 NonNativeSelectOption.displayName = 'NonNativeSelectOption';
 export default NonNativeSelectOption;

package/dist-package/src/NonNativeSelectOption/NonNativeSelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"NonNativeSelectOption.js","sourceRoot":"","sources":["../../../src/NonNativeSelectOption/NonNativeSelectOption.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAY/C,MAAM,qBAAqB,GAAG,KAAK,CAAC,IAAI,CACtC,CAAsB,EAOX,EAAE,EAAE;QAPO,EACpB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,WAAW,EACX,QAAQ,OAEC,EADN,SAAS,cANQ,gEAOrB,CADa;IAEZ,OAAO,CACL,oBAAC,QAAQ,kBACP,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,QAAQ,EACrB,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,QAAQ,mBACE,QAAQ,sBACL,WAAW,EAC7B,QAAQ,EAAE,MAAM,CAAC,QAAQ,IACrB,SAAS,GAEZ,QAAQ,CACA,CACZ,CAAA;AACH,CAAC,CACF,CAAA;AAED,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAA;AAE3D,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"NonNativeSelectOption.js","sourceRoot":"","sources":["../../../src/NonNativeSelectOption/NonNativeSelectOption.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAY/C,MAAM,8BAA8B,GAAG,CAAsB,EAOlD,EAAE,EAAE;QAP8C,EAC3D,MAAM,EACN,QAAQ,EACR,WAAW,EACX,WAAW,EACX,QAAQ,OAEC,EADN,SAAS,cAN+C,gEAO5D,CADa;IAEZ,OAAO,CACL,oBAAC,QAAQ,kBACP,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,QAAQ,EACrB,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,QAAQ,mBACE,QAAQ,sBACL,WAAW,EAC7B,QAAQ,EAAE,MAAM,CAAC,QAAQ,IACrB,SAAS,GAEZ,QAAQ,CACA,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAG,KAAK,CAAC,IAAI,CACtC,8BAA8B,EAC9B,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE;IACvB,OAAO,CACL,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ;QACzC,SAAS,CAAC,WAAW,KAAK,SAAS,CAAC,WAAW;QAC/C,SAAS,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM;QACrC,SAAS,CAAC,MAAM,CAAC,QAAQ,KAAK,SAAS,CAAC,MAAM,CAAC,QAAQ;QACvD,SAAS,CAAC,WAAW,KAAK,SAAS,CAAC,WAAW;QAC/C,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ,CAC1C,CAAA;AACH,CAAC,CACF,CAAA;AAED,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAA;AAE3D,eAAe,qBAAqB,CAAA"}

package/dist-package/src/NonNativeSelectOptions/NonNativeSelectOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NonNativeSelectOptions.d.ts","sourceRoot":"","sources":["../../../src/NonNativeSelectOptions/NonNativeSelectOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,MAAM,EACN,YAAY,EACZ,WAAW,EACX,SAAS,EACV,MAAM,eAAe,CAAA;AAkCtB,oBAAY,KAAK,GAAG,IAAI,CACtB,WAAW,EACX,UAAU,GAAG,eAAe,GAAG,cAAc,CAC9C,GAAG;IACF,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,CAAA;IAChC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAC1D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF,CAAA;AAkFD,QAAA,MAAM,sBAAsB;0JAYzB,KAAK;;CAiDP,CAAA;AAID,eAAe,sBAAsB,CAAA"}
+{"version":3,"file":"NonNativeSelectOptions.d.ts","sourceRoot":"","sources":["../../../src/NonNativeSelectOptions/NonNativeSelectOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,MAAM,EACN,YAAY,EACZ,WAAW,EACX,SAAS,EACV,MAAM,eAAe,CAAA;AAkCtB,oBAAY,KAAK,GAAG,IAAI,CACtB,WAAW,EACX,UAAU,GAAG,eAAe,GAAG,cAAc,CAC9C,GAAG;IACF,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,CAAA;IAChC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAC1D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF,CAAA;AAwFD,QAAA,MAAM,sBAAsB;0JAYzB,KAAK;;CAsEP,CAAA;AAID,eAAe,sBAAsB,CAAA"}

package/dist-package/src/NonNativeSelectOptions/NonNativeSelectOptions.js

@@ -22,9 +22,13 @@ const MenuGroup = (props) => {
             React.createElement(Typography, { size: 'xsmall', weight: 'semibold', color: 'dark-grey' }, group)),
         children));
 };
+const MemoizedNonNativeSelectOption = React.memo(NonNativeSelectOption);
 const renderOptions = ({ options, getItemProps, selection, highlightedIndex, offset = 0, renderOption, }) => {
     return options.map((option, index) => {
-        return (React.createElement(NonNativeSelectOption, Object.assign({ key: option.key || option.value, option: option, selected: selection.isOptionSelected(option), highlighted: highlightedIndex === index + offset, description: option.description }, getItemProps(option, index + offset)), renderOption === null || renderOption === void 0 ? void 0 : renderOption(option)));
+        const optionIndex = index + offset;
+        const isHighlighted = highlightedIndex === optionIndex;
+        const isSelected = selection.isOptionSelected(option);
+        return (React.createElement(MemoizedNonNativeSelectOption, Object.assign({ key: option.key || option.value, option: option, selected: isSelected, highlighted: isHighlighted, description: option.description }, getItemProps(option, optionIndex)), renderOption === null || renderOption === void 0 ? void 0 : renderOption(option)));
     });
 };
 const renderGroups = ({ groups, getItemProps, selection, highlightedIndex, renderOption, }) => {
@@ -56,27 +60,42 @@ const addOffsetToHighlightedIndex = (groups, highlightedIndex) => {
 };
 const NonNativeSelectOptions = ({ options, renderOption = () => null, highlightedIndex, getItemProps, onBlur, selection, filterOptionsValue, noOptionsText, fixedHeader, fixedFooter, testIds, }) => {
     const flatOptions = useMemo(() => flattenOptions(options), [options]);
-    if (!flatOptions.length && filterOptionsValue) {
-        return (React.createElement(SelectOptions, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.noOptions, role: 'listbox', fixedHeader: fixedHeader },
-            React.createElement(MenuItem, { titleCase: false, disabled: true }, noOptionsText)));
-    }
-    return (React.createElement(SelectOptions, { fixedHeader: fixedHeader, onBlur: onBlur, selectedIndex: isOptionsType(options)
-            ? highlightedIndex
-            : addOffsetToHighlightedIndex(options, highlightedIndex), fixedFooter: fixedFooter, role: 'listbox' }, isOptionsType(options)
-        ? renderOptions({
-            options,
-            getItemProps,
-            selection,
-            highlightedIndex,
-            renderOption,
-        })
-        : renderGroups({
+    const renderedContent = useMemo(() => {
+        if (!flatOptions.length && filterOptionsValue) {
+            return (React.createElement(MenuItem, { titleCase: false, disabled: true }, noOptionsText));
+        }
+        if (isOptionsType(options)) {
+            return renderOptions({
+                options,
+                getItemProps,
+                selection,
+                highlightedIndex,
+                renderOption,
+            });
+        }
+        return renderGroups({
             groups: options,
             getItemProps,
             selection,
             highlightedIndex,
             renderOption,
-        })));
+        });
+    }, [
+        options,
+        flatOptions,
+        filterOptionsValue,
+        getItemProps,
+        selection,
+        highlightedIndex,
+        renderOption,
+        noOptionsText,
+    ]);
+    if (!flatOptions.length && filterOptionsValue) {
+        return (React.createElement(SelectOptions, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.noOptions, role: 'listbox', fixedHeader: fixedHeader }, renderedContent));
+    }
+    return (React.createElement(SelectOptions, { fixedHeader: fixedHeader, onBlur: onBlur, selectedIndex: isOptionsType(options)
+            ? highlightedIndex
+            : addOffsetToHighlightedIndex(options, highlightedIndex), fixedFooter: fixedFooter, role: 'listbox' }, renderedContent));
 };
 NonNativeSelectOptions.displayName = 'NonNativeSelectOptions';
 export default NonNativeSelectOptions;

package/dist-package/src/NonNativeSelectOptions/NonNativeSelectOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"NonNativeSelectOptions.js","sourceRoot":"","sources":["../../../src/NonNativeSelectOptions/NonNativeSelectOptions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NonNativeSelectOptions.js","sourceRoot":"","sources":["../../../src/NonNativeSelectOptions/NonNativeSelectOptions.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAShD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAY7D,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAApC,qBAA4B,CAAQ,CAAA;IAE1C,OAAO,CACL;QACE,oBAAC,QAAQ,kBACP,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,KAAK,EAChB,aAAa,QACb,SAAS,EAAC,qBAAqB,IAC3B,IAAI;YAER,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,UAAU,EAAC,KAAK,EAAC,WAAW,IAC1D,KAAK,CACK,CACJ;QACV,QAAQ,CACR,CACJ,CAAA;AACH,CAAC,CAAA;AAmBD,MAAM,6BAA6B,GAAG,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;AAEvE,MAAM,aAAa,GAAG,CAAC,EACrB,OAAO,EACP,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,MAAM,GAAG,CAAC,EACV,YAAY,GAI4B,EAAE,EAAE;IAC5C,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAA;QAClC,MAAM,aAAa,GAAG,gBAAgB,KAAK,WAAW,CAAA;QACtD,MAAM,UAAU,GAAG,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;QAErD,OAAO,CACL,oBAAC,6BAA6B,kBAC5B,GAAG,EAAE,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,KAAK,EAC/B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,UAAU,EACpB,WAAW,EAAE,aAAa,EAC1B,WAAW,EAAE,MAAM,CAAC,WAAW,IAC3B,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,GAEpC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,MAAM,CAAC,CACO,CACjC,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,EACpB,MAAM,EACN,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,YAAY,GAIc,EAAE,EAAE;IAC9B,IAAI,YAAY,GAAG,CAAC,CAAA;IAEpB,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACrC,MAAM,UAAU,GAAG,CACjB,oBAAC,SAAS,IAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IAChC,aAAa,CAAC;YACb,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC;YACtB,YAAY;YACZ,SAAS;YACT,gBAAgB;YAChB,MAAM,EAAE,YAAY;YACpB,YAAY;SACb,CAAC,CACQ,CACb,CAAA;QAED,YAAY,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAA;QAEpC,OAAO,UAAU,CAAA;IACnB,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,2BAA2B,GAAG,CAClC,MAAoB,EACpB,gBAA+B,EAC/B,EAAE;IACF,IAAI,CAAC,gBAAgB,EAAE;QACrB,OAAO,gBAAgB,CAAA;KACxB;IAED,IAAI,YAAY,GAAG,CAAC,CAAA;IAEpB,MAAM,MAAM,GACV,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;QACtC,YAAY,IAAI,KAAK,CAAC,MAAM,CAAA;QAC5B,MAAM,0BAA0B,GAAG,gBAAgB,GAAG,YAAY,CAAA;QAElE,OAAO,0BAA0B,CAAA;IACnC,CAAC,CAAC,GAAG,CAAC,CAAA;IAER,OAAO,gBAAgB,GAAG,MAAM,CAAA;AAClC,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,CAAC,EAC9B,OAAO,EACP,YAAY,GAAG,GAAG,EAAE,CAAC,IAAI,EACzB,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,WAAW,EACX,OAAO,GACD,EAAE,EAAE;IACV,MAAM,WAAW,GAAa,OAAO,CACnC,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,CAAC,OAAO,CAAC,CACV,CAAA;IAED,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,kBAAkB,EAAE;YAC7C,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,UACjC,aAAa,CACL,CACZ,CAAA;SACF;QAED,IAAI,aAAa,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,aAAa,CAAC;gBACnB,OAAO;gBACP,YAAY;gBACZ,SAAS;gBACT,gBAAgB;gBAChB,YAAY;aACb,CAAC,CAAA;SACH;QAED,OAAO,YAAY,CAAC;YAClB,MAAM,EAAE,OAAO;YACf,YAAY;YACZ,SAAS;YACT,gBAAgB;YAChB,YAAY;SACb,CAAC,CAAA;IACJ,CAAC,EAAE;QACD,OAAO;QACP,WAAW;QACX,kBAAkB;QAClB,YAAY;QACZ,SAAS;QACT,gBAAgB;QAChB,YAAY;QACZ,aAAa;KACd,CAAC,CAAA;IAEF,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,kBAAkB,EAAE;QAC7C,OAAO,CACL,oBAAC,aAAa,mBACC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAC/B,IAAI,EAAC,SAAS,EACd,WAAW,EAAE,WAAW,IAEvB,eAAe,CACF,CACjB,CAAA;KACF;IAED,OAAO,CACL,oBAAC,aAAa,IACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,aAAa,EACX,aAAa,CAAC,OAAO,CAAC;YACpB,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,2BAA2B,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAE5D,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,SAAS,IAEb,eAAe,CACF,CACjB,CAAA;AACH,CAAC,CAAA;AAED,sBAAsB,CAAC,WAAW,GAAG,wBAAwB,CAAA;AAE7D,eAAe,sBAAsB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-select",
-  "version": "4.0.18-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.43+1b2e25b97",
+  "version": "4.0.19-alpha-bill-optimize-select-performance-381ce8200.1+381ce8200",
   "description": "Toptal UI components library - Select",
   "publishConfig": {
     "access": "public"
@@ -22,18 +22,18 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "3.1.2-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.83+1b2e25b97",
-    "@toptal/picasso-form": "6.1.8-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.59+1b2e25b97",
-    "@toptal/picasso-icons": "1.11.1-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.59+1b2e25b97",
-    "@toptal/picasso-input": "4.0.18-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.43+1b2e25b97",
-    "@toptal/picasso-input-adornment": "3.0.9-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.59+1b2e25b97",
-    "@toptal/picasso-loader": "3.0.3-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.83+1b2e25b97",
-    "@toptal/picasso-menu": "3.0.14-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.59+1b2e25b97",
-    "@toptal/picasso-outlined-input": "4.0.18-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.43+1b2e25b97",
-    "@toptal/picasso-popper": "1.0.6-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.83+1b2e25b97",
-    "@toptal/picasso-shared": "15.0.1-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.336+1b2e25b97",
-    "@toptal/picasso-typography": "4.0.3-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.83+1b2e25b97",
-    "@toptal/picasso-utils": "3.0.1-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.83+1b2e25b97",
+    "@toptal/picasso-container": "3.1.2-alpha-bill-optimize-select-performance-381ce8200.83+381ce8200",
+    "@toptal/picasso-form": "6.1.9-alpha-bill-optimize-select-performance-381ce8200.1+381ce8200",
+    "@toptal/picasso-icons": "1.12.1-alpha-bill-optimize-select-performance-381ce8200.1+381ce8200",
+    "@toptal/picasso-input": "4.0.19-alpha-bill-optimize-select-performance-381ce8200.1+381ce8200",
+    "@toptal/picasso-input-adornment": "3.0.10-alpha-bill-optimize-select-performance-381ce8200.1+381ce8200",
+    "@toptal/picasso-loader": "3.0.3-alpha-bill-optimize-select-performance-381ce8200.83+381ce8200",
+    "@toptal/picasso-menu": "3.0.15-alpha-bill-optimize-select-performance-381ce8200.1+381ce8200",
+    "@toptal/picasso-outlined-input": "4.0.19-alpha-bill-optimize-select-performance-381ce8200.1+381ce8200",
+    "@toptal/picasso-popper": "1.0.6-alpha-bill-optimize-select-performance-381ce8200.83+381ce8200",
+    "@toptal/picasso-shared": "15.0.1-alpha-bill-optimize-select-performance-381ce8200.336+381ce8200",
+    "@toptal/picasso-typography": "4.0.3-alpha-bill-optimize-select-performance-381ce8200.83+381ce8200",
+    "@toptal/picasso-utils": "3.0.1-alpha-bill-optimize-select-performance-381ce8200.83+381ce8200",
     "ap-style-title-case": "^1.1.2"
   },
   "sideEffects": [
@@ -46,9 +46,9 @@
     "react": ">=16.12.0 < 19.0.0"
   },
   "devDependencies": {
-    "@toptal/picasso-tailwind": "3.0.1-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.123+1b2e25b97",
-    "@toptal/picasso-tailwind-merge": "2.0.3-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.83+1b2e25b97",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-FF-4-migrate-icons-to-tw-1b2e25b97.336+1b2e25b97",
+    "@toptal/picasso-tailwind": "3.0.1-alpha-bill-optimize-select-performance-381ce8200.123+381ce8200",
+    "@toptal/picasso-tailwind-merge": "2.0.3-alpha-bill-optimize-select-performance-381ce8200.83+381ce8200",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-bill-optimize-select-performance-381ce8200.336+381ce8200",
     "popper.js": "^1.16.1"
   },
   "exports": {
@@ -59,5 +59,5 @@
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "1b2e25b972648340794d6105110e86a036165edb"
+  "gitHead": "381ce8200c401760a75f271244b2c2310970d0a3"
 }

package/src/NonNativeSelectOption/NonNativeSelectOption.tsx

@@ -12,30 +12,42 @@ export interface Props<T extends ValueType> extends ItemProps {
   option: Option<T>
 }
 
+const NonNativeSelectOptionComponent = <T extends ValueType>({
+  option,
+  selected,
+  highlighted,
+  description,
+  children,
+  ...itemProps
+}: Props<T>) => {
+  return (
+    <MenuItem
+      value={option.value}
+      selected={highlighted}
+      checkmarked={selected}
+      titleCase={false}
+      description={description}
+      role='option'
+      aria-selected={selected}
+      data-highlighted={highlighted}
+      disabled={option.disabled}
+      {...itemProps}
+    >
+      {children}
+    </MenuItem>
+  )
+}
+
 const NonNativeSelectOption = React.memo(
-  <T extends ValueType>({
-    option,
-    selected,
-    highlighted,
-    description,
-    children,
-    ...itemProps
-  }: Props<T>) => {
+  NonNativeSelectOptionComponent,
+  (prevProps, nextProps) => {
     return (
-      <MenuItem
-        value={option.value}
-        selected={highlighted}
-        checkmarked={selected}
-        titleCase={false}
-        description={description}
-        role='option'
-        aria-selected={selected}
-        data-highlighted={highlighted}
-        disabled={option.disabled}
-        {...itemProps}
-      >
-        {children}
-      </MenuItem>
+      prevProps.selected === nextProps.selected &&
+      prevProps.highlighted === nextProps.highlighted &&
+      prevProps.option === nextProps.option &&
+      prevProps.option.disabled === nextProps.option.disabled &&
+      prevProps.description === nextProps.description &&
+      prevProps.children === nextProps.children
     )
   }
 )

package/src/NonNativeSelectOptions/NonNativeSelectOptions.tsx

@@ -16,7 +16,7 @@ import type {
 } from '../SelectBase'
 import { flattenOptions, isOptionsType } from '../SelectBase'
 
-// TODO: Replace with a real component as soon as it's implemented
+// TODO: Replace with a real component as soon as it's implemented [FX-1479]
 // https://toptal-core.atlassian.net/browse/FX-1479
 // Note: In the current implementation children are siblings for the group node.
 // If in the new MenuGroup children are inside the group node, that will
@@ -64,6 +64,8 @@ export type Props = Pick<
   }
 }
 
+const MemoizedNonNativeSelectOption = React.memo(NonNativeSelectOption)
+
 const renderOptions = ({
   options,
   getItemProps,
@@ -76,17 +78,21 @@ const renderOptions = ({
   'getItemProps' | 'selection' | 'highlightedIndex' | 'renderOption'
 > & { options: Option[]; offset?: number }) => {
   return options.map((option, index) => {
+    const optionIndex = index + offset
+    const isHighlighted = highlightedIndex === optionIndex
+    const isSelected = selection.isOptionSelected(option)
+
     return (
-      <NonNativeSelectOption
+      <MemoizedNonNativeSelectOption
         key={option.key || option.value}
         option={option}
-        selected={selection.isOptionSelected(option)}
-        highlighted={highlightedIndex === index + offset}
+        selected={isSelected}
+        highlighted={isHighlighted}
         description={option.description}
-        {...getItemProps(option, index + offset)}
+        {...getItemProps(option, optionIndex)}
       >
         {renderOption?.(option)}
-      </NonNativeSelectOption>
+      </MemoizedNonNativeSelectOption>
     )
   })
 }
@@ -162,6 +168,43 @@ const NonNativeSelectOptions = ({
     [options]
   )
 
+  const renderedContent = useMemo(() => {
+    if (!flatOptions.length && filterOptionsValue) {
+      return (
+        <MenuItem titleCase={false} disabled>
+          {noOptionsText}
+        </MenuItem>
+      )
+    }
+
+    if (isOptionsType(options)) {
+      return renderOptions({
+        options,
+        getItemProps,
+        selection,
+        highlightedIndex,
+        renderOption,
+      })
+    }
+
+    return renderGroups({
+      groups: options,
+      getItemProps,
+      selection,
+      highlightedIndex,
+      renderOption,
+    })
+  }, [
+    options,
+    flatOptions,
+    filterOptionsValue,
+    getItemProps,
+    selection,
+    highlightedIndex,
+    renderOption,
+    noOptionsText,
+  ])
+
   if (!flatOptions.length && filterOptionsValue) {
     return (
       <SelectOptions
@@ -169,9 +212,7 @@ const NonNativeSelectOptions = ({
         role='listbox'
         fixedHeader={fixedHeader}
       >
-        <MenuItem titleCase={false} disabled>
-          {noOptionsText}
-        </MenuItem>
+        {renderedContent}
       </SelectOptions>
     )
   }
@@ -188,21 +229,7 @@ const NonNativeSelectOptions = ({
       fixedFooter={fixedFooter}
       role='listbox'
     >
-      {isOptionsType(options)
-        ? renderOptions({
-            options,
-            getItemProps,
-            selection,
-            highlightedIndex,
-            renderOption,
-          })
-        : renderGroups({
-            groups: options,
-            getItemProps,
-            selection,
-            highlightedIndex,
-            renderOption,
-          })}
+      {renderedContent}
     </SelectOptions>
   )
 }