@toptal/picasso-select 4.0.19-alpha-bill-optimize-select-performance-381ce8200.1 → 4.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-package/src/NonNativeSelectOption/NonNativeSelectOption.d.ts.map +1 -1
- package/dist-package/src/NonNativeSelectOption/NonNativeSelectOption.js +1 -9
- package/dist-package/src/NonNativeSelectOption/NonNativeSelectOption.js.map +1 -1
- package/dist-package/src/NonNativeSelectOptions/NonNativeSelectOptions.d.ts.map +1 -1
- package/dist-package/src/NonNativeSelectOptions/NonNativeSelectOptions.js +17 -36
- package/dist-package/src/NonNativeSelectOptions/NonNativeSelectOptions.js.map +1 -1
- package/package.json +18 -19
- package/src/NonNativeSelectOption/NonNativeSelectOption.tsx +22 -34
- package/src/NonNativeSelectOptions/NonNativeSelectOptions.tsx +24 -51
- package/LICENSE +0 -20
| @@ -1 +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; | 
| 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"}
         | 
| @@ -11,17 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) { | |
| 11 11 | 
             
            };
         | 
| 12 12 | 
             
            import React from 'react';
         | 
| 13 13 | 
             
            import { MenuItem } from '@toptal/picasso-menu';
         | 
| 14 | 
            -
            const  | 
| 14 | 
            +
            const NonNativeSelectOption = React.memo((_a) => {
         | 
| 15 15 | 
             
                var { option, selected, highlighted, description, children } = _a, itemProps = __rest(_a, ["option", "selected", "highlighted", "description", "children"]);
         | 
| 16 16 | 
             
                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));
         | 
| 17 | 
            -
            };
         | 
| 18 | 
            -
            const NonNativeSelectOption = React.memo(NonNativeSelectOptionComponent, (prevProps, nextProps) => {
         | 
| 19 | 
            -
                return (prevProps.selected === nextProps.selected &&
         | 
| 20 | 
            -
                    prevProps.highlighted === nextProps.highlighted &&
         | 
| 21 | 
            -
                    prevProps.option === nextProps.option &&
         | 
| 22 | 
            -
                    prevProps.option.disabled === nextProps.option.disabled &&
         | 
| 23 | 
            -
                    prevProps.description === nextProps.description &&
         | 
| 24 | 
            -
                    prevProps.children === nextProps.children);
         | 
| 25 17 | 
             
            });
         | 
| 26 18 | 
             
            NonNativeSelectOption.displayName = 'NonNativeSelectOption';
         | 
| 27 19 | 
             
            export default NonNativeSelectOption;
         | 
| @@ -1 +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, | 
| 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"}
         | 
| @@ -1 +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; | 
| 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"}
         | 
| @@ -22,13 +22,9 @@ const MenuGroup = (props) => { | |
| 22 22 | 
             
                        React.createElement(Typography, { size: 'xsmall', weight: 'semibold', color: 'dark-grey' }, group)),
         | 
| 23 23 | 
             
                    children));
         | 
| 24 24 | 
             
            };
         | 
| 25 | 
            -
            const MemoizedNonNativeSelectOption = React.memo(NonNativeSelectOption);
         | 
| 26 25 | 
             
            const renderOptions = ({ options, getItemProps, selection, highlightedIndex, offset = 0, renderOption, }) => {
         | 
| 27 26 | 
             
                return options.map((option, index) => {
         | 
| 28 | 
            -
                     | 
| 29 | 
            -
                    const isHighlighted = highlightedIndex === optionIndex;
         | 
| 30 | 
            -
                    const isSelected = selection.isOptionSelected(option);
         | 
| 31 | 
            -
                    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)));
         | 
| 27 | 
            +
                    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)));
         | 
| 32 28 | 
             
                });
         | 
| 33 29 | 
             
            };
         | 
| 34 30 | 
             
            const renderGroups = ({ groups, getItemProps, selection, highlightedIndex, renderOption, }) => {
         | 
| @@ -60,42 +56,27 @@ const addOffsetToHighlightedIndex = (groups, highlightedIndex) => { | |
| 60 56 | 
             
            };
         | 
| 61 57 | 
             
            const NonNativeSelectOptions = ({ options, renderOption = () => null, highlightedIndex, getItemProps, onBlur, selection, filterOptionsValue, noOptionsText, fixedHeader, fixedFooter, testIds, }) => {
         | 
| 62 58 | 
             
                const flatOptions = useMemo(() => flattenOptions(options), [options]);
         | 
| 63 | 
            -
                 | 
| 64 | 
            -
                     | 
| 65 | 
            -
                         | 
| 66 | 
            -
             | 
| 67 | 
            -
             | 
| 68 | 
            -
                         | 
| 69 | 
            -
             | 
| 70 | 
            -
             | 
| 71 | 
            -
             | 
| 72 | 
            -
             | 
| 73 | 
            -
             | 
| 74 | 
            -
                         | 
| 75 | 
            -
             | 
| 76 | 
            -
                     | 
| 59 | 
            +
                if (!flatOptions.length && filterOptionsValue) {
         | 
| 60 | 
            +
                    return (React.createElement(SelectOptions, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.noOptions, role: 'listbox', fixedHeader: fixedHeader },
         | 
| 61 | 
            +
                        React.createElement(MenuItem, { titleCase: false, disabled: true }, noOptionsText)));
         | 
| 62 | 
            +
                }
         | 
| 63 | 
            +
                return (React.createElement(SelectOptions, { fixedHeader: fixedHeader, onBlur: onBlur, selectedIndex: isOptionsType(options)
         | 
| 64 | 
            +
                        ? highlightedIndex
         | 
| 65 | 
            +
                        : addOffsetToHighlightedIndex(options, highlightedIndex), fixedFooter: fixedFooter, role: 'listbox' }, isOptionsType(options)
         | 
| 66 | 
            +
                    ? renderOptions({
         | 
| 67 | 
            +
                        options,
         | 
| 68 | 
            +
                        getItemProps,
         | 
| 69 | 
            +
                        selection,
         | 
| 70 | 
            +
                        highlightedIndex,
         | 
| 71 | 
            +
                        renderOption,
         | 
| 72 | 
            +
                    })
         | 
| 73 | 
            +
                    : renderGroups({
         | 
| 77 74 | 
             
                        groups: options,
         | 
| 78 75 | 
             
                        getItemProps,
         | 
| 79 76 | 
             
                        selection,
         | 
| 80 77 | 
             
                        highlightedIndex,
         | 
| 81 78 | 
             
                        renderOption,
         | 
| 82 | 
            -
                    });
         | 
| 83 | 
            -
                }, [
         | 
| 84 | 
            -
                    options,
         | 
| 85 | 
            -
                    flatOptions,
         | 
| 86 | 
            -
                    filterOptionsValue,
         | 
| 87 | 
            -
                    getItemProps,
         | 
| 88 | 
            -
                    selection,
         | 
| 89 | 
            -
                    highlightedIndex,
         | 
| 90 | 
            -
                    renderOption,
         | 
| 91 | 
            -
                    noOptionsText,
         | 
| 92 | 
            -
                ]);
         | 
| 93 | 
            -
                if (!flatOptions.length && filterOptionsValue) {
         | 
| 94 | 
            -
                    return (React.createElement(SelectOptions, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.noOptions, role: 'listbox', fixedHeader: fixedHeader }, renderedContent));
         | 
| 95 | 
            -
                }
         | 
| 96 | 
            -
                return (React.createElement(SelectOptions, { fixedHeader: fixedHeader, onBlur: onBlur, selectedIndex: isOptionsType(options)
         | 
| 97 | 
            -
                        ? highlightedIndex
         | 
| 98 | 
            -
                        : addOffsetToHighlightedIndex(options, highlightedIndex), fixedFooter: fixedFooter, role: 'listbox' }, renderedContent));
         | 
| 79 | 
            +
                    })));
         | 
| 99 80 | 
             
            };
         | 
| 100 81 | 
             
            NonNativeSelectOptions.displayName = 'NonNativeSelectOptions';
         | 
| 101 82 | 
             
            export default NonNativeSelectOptions;
         | 
| @@ -1 +1 @@ | |
| 1 | 
            -
            {"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, | 
| 1 | 
            +
            {"version":3,"file":"NonNativeSelectOptions.js","sourceRoot":"","sources":["../../../src/NonNativeSelectOptions/NonNativeSelectOptions.tsx"],"names":[],"mappings":"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"}
         | 
    
        package/package.json
    CHANGED
    
    | @@ -1,6 +1,6 @@ | |
| 1 1 | 
             
            {
         | 
| 2 2 | 
             
              "name": "@toptal/picasso-select",
         | 
| 3 | 
            -
              "version": "4.0.19 | 
| 3 | 
            +
              "version": "4.0.19",
         | 
| 4 4 | 
             
              "description": "Toptal UI components library - Select",
         | 
| 5 5 | 
             
              "publishConfig": {
         | 
| 6 6 | 
             
                "access": "public"
         | 
| @@ -22,18 +22,18 @@ | |
| 22 22 | 
             
              },
         | 
| 23 23 | 
             
              "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
         | 
| 24 24 | 
             
              "dependencies": {
         | 
| 25 | 
            -
                "@toptal/picasso-container": "3.1. | 
| 26 | 
            -
                "@toptal/picasso-form": "6. | 
| 27 | 
            -
                "@toptal/picasso-icons": "1.12. | 
| 28 | 
            -
                "@toptal/picasso-input": "4.0.19 | 
| 29 | 
            -
                "@toptal/picasso-input-adornment": "3.0. | 
| 30 | 
            -
                "@toptal/picasso-loader": "3.0. | 
| 31 | 
            -
                "@toptal/picasso-menu": "3.0. | 
| 32 | 
            -
                "@toptal/picasso-outlined-input": "4.0.19 | 
| 33 | 
            -
                "@toptal/picasso-popper": "1.0. | 
| 34 | 
            -
                "@toptal/picasso-shared": "15.0. | 
| 35 | 
            -
                "@toptal/picasso-typography": "4.0. | 
| 36 | 
            -
                "@toptal/picasso-utils": "3.0. | 
| 25 | 
            +
                "@toptal/picasso-container": "3.1.1",
         | 
| 26 | 
            +
                "@toptal/picasso-form": "6.2.0",
         | 
| 27 | 
            +
                "@toptal/picasso-icons": "1.12.0",
         | 
| 28 | 
            +
                "@toptal/picasso-input": "4.0.19",
         | 
| 29 | 
            +
                "@toptal/picasso-input-adornment": "3.0.9",
         | 
| 30 | 
            +
                "@toptal/picasso-loader": "3.0.2",
         | 
| 31 | 
            +
                "@toptal/picasso-menu": "3.0.14",
         | 
| 32 | 
            +
                "@toptal/picasso-outlined-input": "4.0.19",
         | 
| 33 | 
            +
                "@toptal/picasso-popper": "1.0.5",
         | 
| 34 | 
            +
                "@toptal/picasso-shared": "15.0.0",
         | 
| 35 | 
            +
                "@toptal/picasso-typography": "4.0.2",
         | 
| 36 | 
            +
                "@toptal/picasso-utils": "3.0.0",
         | 
| 37 37 | 
             
                "ap-style-title-case": "^1.1.2"
         | 
| 38 38 | 
             
              },
         | 
| 39 39 | 
             
              "sideEffects": [
         | 
| @@ -41,14 +41,14 @@ | |
| 41 41 | 
             
                "**/styles.js"
         | 
| 42 42 | 
             
              ],
         | 
| 43 43 | 
             
              "peerDependencies": {
         | 
| 44 | 
            -
                "@toptal/picasso-tailwind": ">=2.7",
         | 
| 45 44 | 
             
                "@toptal/picasso-tailwind-merge": "^2.0.0",
         | 
| 45 | 
            +
                "@toptal/picasso-tailwind": ">=2.7",
         | 
| 46 46 | 
             
                "react": ">=16.12.0 < 19.0.0"
         | 
| 47 47 | 
             
              },
         | 
| 48 48 | 
             
              "devDependencies": {
         | 
| 49 | 
            -
                "@toptal/picasso-tailwind": "3.0. | 
| 50 | 
            -
                "@toptal/picasso-tailwind-merge": "2.0. | 
| 51 | 
            -
                "@toptal/picasso-test-utils": "1.1. | 
| 49 | 
            +
                "@toptal/picasso-tailwind": "3.0.0",
         | 
| 50 | 
            +
                "@toptal/picasso-tailwind-merge": "2.0.2",
         | 
| 51 | 
            +
                "@toptal/picasso-test-utils": "1.1.1",
         | 
| 52 52 | 
             
                "popper.js": "^1.16.1"
         | 
| 53 53 | 
             
              },
         | 
| 54 54 | 
             
              "exports": {
         | 
| @@ -58,6 +58,5 @@ | |
| 58 58 | 
             
                "dist-package/**",
         | 
| 59 59 | 
             
                "!dist-package/tsconfig.tsbuildinfo",
         | 
| 60 60 | 
             
                "src"
         | 
| 61 | 
            -
              ] | 
| 62 | 
            -
              "gitHead": "381ce8200c401760a75f271244b2c2310970d0a3"
         | 
| 61 | 
            +
              ]
         | 
| 63 62 | 
             
            }
         | 
| @@ -12,42 +12,30 @@ export interface Props<T extends ValueType> extends ItemProps { | |
| 12 12 | 
             
              option: Option<T>
         | 
| 13 13 | 
             
            }
         | 
| 14 14 |  | 
| 15 | 
            -
            const NonNativeSelectOptionComponent = <T extends ValueType>({
         | 
| 16 | 
            -
              option,
         | 
| 17 | 
            -
              selected,
         | 
| 18 | 
            -
              highlighted,
         | 
| 19 | 
            -
              description,
         | 
| 20 | 
            -
              children,
         | 
| 21 | 
            -
              ...itemProps
         | 
| 22 | 
            -
            }: Props<T>) => {
         | 
| 23 | 
            -
              return (
         | 
| 24 | 
            -
                <MenuItem
         | 
| 25 | 
            -
                  value={option.value}
         | 
| 26 | 
            -
                  selected={highlighted}
         | 
| 27 | 
            -
                  checkmarked={selected}
         | 
| 28 | 
            -
                  titleCase={false}
         | 
| 29 | 
            -
                  description={description}
         | 
| 30 | 
            -
                  role='option'
         | 
| 31 | 
            -
                  aria-selected={selected}
         | 
| 32 | 
            -
                  data-highlighted={highlighted}
         | 
| 33 | 
            -
                  disabled={option.disabled}
         | 
| 34 | 
            -
                  {...itemProps}
         | 
| 35 | 
            -
                >
         | 
| 36 | 
            -
                  {children}
         | 
| 37 | 
            -
                </MenuItem>
         | 
| 38 | 
            -
              )
         | 
| 39 | 
            -
            }
         | 
| 40 | 
            -
             | 
| 41 15 | 
             
            const NonNativeSelectOption = React.memo(
         | 
| 42 | 
            -
               | 
| 43 | 
            -
             | 
| 16 | 
            +
              <T extends ValueType>({
         | 
| 17 | 
            +
                option,
         | 
| 18 | 
            +
                selected,
         | 
| 19 | 
            +
                highlighted,
         | 
| 20 | 
            +
                description,
         | 
| 21 | 
            +
                children,
         | 
| 22 | 
            +
                ...itemProps
         | 
| 23 | 
            +
              }: Props<T>) => {
         | 
| 44 24 | 
             
                return (
         | 
| 45 | 
            -
                   | 
| 46 | 
            -
             | 
| 47 | 
            -
             | 
| 48 | 
            -
             | 
| 49 | 
            -
             | 
| 50 | 
            -
             | 
| 25 | 
            +
                  <MenuItem
         | 
| 26 | 
            +
                    value={option.value}
         | 
| 27 | 
            +
                    selected={highlighted}
         | 
| 28 | 
            +
                    checkmarked={selected}
         | 
| 29 | 
            +
                    titleCase={false}
         | 
| 30 | 
            +
                    description={description}
         | 
| 31 | 
            +
                    role='option'
         | 
| 32 | 
            +
                    aria-selected={selected}
         | 
| 33 | 
            +
                    data-highlighted={highlighted}
         | 
| 34 | 
            +
                    disabled={option.disabled}
         | 
| 35 | 
            +
                    {...itemProps}
         | 
| 36 | 
            +
                  >
         | 
| 37 | 
            +
                    {children}
         | 
| 38 | 
            +
                  </MenuItem>
         | 
| 51 39 | 
             
                )
         | 
| 52 40 | 
             
              }
         | 
| 53 41 | 
             
            )
         | 
| @@ -16,7 +16,7 @@ import type { | |
| 16 16 | 
             
            } from '../SelectBase'
         | 
| 17 17 | 
             
            import { flattenOptions, isOptionsType } from '../SelectBase'
         | 
| 18 18 |  | 
| 19 | 
            -
            // TODO: Replace with a real component as soon as it's implemented | 
| 19 | 
            +
            // TODO: Replace with a real component as soon as it's implemented
         | 
| 20 20 | 
             
            // https://toptal-core.atlassian.net/browse/FX-1479
         | 
| 21 21 | 
             
            // Note: In the current implementation children are siblings for the group node.
         | 
| 22 22 | 
             
            // If in the new MenuGroup children are inside the group node, that will
         | 
| @@ -64,8 +64,6 @@ export type Props = Pick< | |
| 64 64 | 
             
              }
         | 
| 65 65 | 
             
            }
         | 
| 66 66 |  | 
| 67 | 
            -
            const MemoizedNonNativeSelectOption = React.memo(NonNativeSelectOption)
         | 
| 68 | 
            -
             | 
| 69 67 | 
             
            const renderOptions = ({
         | 
| 70 68 | 
             
              options,
         | 
| 71 69 | 
             
              getItemProps,
         | 
| @@ -78,21 +76,17 @@ const renderOptions = ({ | |
| 78 76 | 
             
              'getItemProps' | 'selection' | 'highlightedIndex' | 'renderOption'
         | 
| 79 77 | 
             
            > & { options: Option[]; offset?: number }) => {
         | 
| 80 78 | 
             
              return options.map((option, index) => {
         | 
| 81 | 
            -
                const optionIndex = index + offset
         | 
| 82 | 
            -
                const isHighlighted = highlightedIndex === optionIndex
         | 
| 83 | 
            -
                const isSelected = selection.isOptionSelected(option)
         | 
| 84 | 
            -
             | 
| 85 79 | 
             
                return (
         | 
| 86 | 
            -
                  < | 
| 80 | 
            +
                  <NonNativeSelectOption
         | 
| 87 81 | 
             
                    key={option.key || option.value}
         | 
| 88 82 | 
             
                    option={option}
         | 
| 89 | 
            -
                    selected={ | 
| 90 | 
            -
                    highlighted={ | 
| 83 | 
            +
                    selected={selection.isOptionSelected(option)}
         | 
| 84 | 
            +
                    highlighted={highlightedIndex === index + offset}
         | 
| 91 85 | 
             
                    description={option.description}
         | 
| 92 | 
            -
                    {...getItemProps(option,  | 
| 86 | 
            +
                    {...getItemProps(option, index + offset)}
         | 
| 93 87 | 
             
                  >
         | 
| 94 88 | 
             
                    {renderOption?.(option)}
         | 
| 95 | 
            -
                  </ | 
| 89 | 
            +
                  </NonNativeSelectOption>
         | 
| 96 90 | 
             
                )
         | 
| 97 91 | 
             
              })
         | 
| 98 92 | 
             
            }
         | 
| @@ -168,43 +162,6 @@ const NonNativeSelectOptions = ({ | |
| 168 162 | 
             
                [options]
         | 
| 169 163 | 
             
              )
         | 
| 170 164 |  | 
| 171 | 
            -
              const renderedContent = useMemo(() => {
         | 
| 172 | 
            -
                if (!flatOptions.length && filterOptionsValue) {
         | 
| 173 | 
            -
                  return (
         | 
| 174 | 
            -
                    <MenuItem titleCase={false} disabled>
         | 
| 175 | 
            -
                      {noOptionsText}
         | 
| 176 | 
            -
                    </MenuItem>
         | 
| 177 | 
            -
                  )
         | 
| 178 | 
            -
                }
         | 
| 179 | 
            -
             | 
| 180 | 
            -
                if (isOptionsType(options)) {
         | 
| 181 | 
            -
                  return renderOptions({
         | 
| 182 | 
            -
                    options,
         | 
| 183 | 
            -
                    getItemProps,
         | 
| 184 | 
            -
                    selection,
         | 
| 185 | 
            -
                    highlightedIndex,
         | 
| 186 | 
            -
                    renderOption,
         | 
| 187 | 
            -
                  })
         | 
| 188 | 
            -
                }
         | 
| 189 | 
            -
             | 
| 190 | 
            -
                return renderGroups({
         | 
| 191 | 
            -
                  groups: options,
         | 
| 192 | 
            -
                  getItemProps,
         | 
| 193 | 
            -
                  selection,
         | 
| 194 | 
            -
                  highlightedIndex,
         | 
| 195 | 
            -
                  renderOption,
         | 
| 196 | 
            -
                })
         | 
| 197 | 
            -
              }, [
         | 
| 198 | 
            -
                options,
         | 
| 199 | 
            -
                flatOptions,
         | 
| 200 | 
            -
                filterOptionsValue,
         | 
| 201 | 
            -
                getItemProps,
         | 
| 202 | 
            -
                selection,
         | 
| 203 | 
            -
                highlightedIndex,
         | 
| 204 | 
            -
                renderOption,
         | 
| 205 | 
            -
                noOptionsText,
         | 
| 206 | 
            -
              ])
         | 
| 207 | 
            -
             | 
| 208 165 | 
             
              if (!flatOptions.length && filterOptionsValue) {
         | 
| 209 166 | 
             
                return (
         | 
| 210 167 | 
             
                  <SelectOptions
         | 
| @@ -212,7 +169,9 @@ const NonNativeSelectOptions = ({ | |
| 212 169 | 
             
                    role='listbox'
         | 
| 213 170 | 
             
                    fixedHeader={fixedHeader}
         | 
| 214 171 | 
             
                  >
         | 
| 215 | 
            -
                    { | 
| 172 | 
            +
                    <MenuItem titleCase={false} disabled>
         | 
| 173 | 
            +
                      {noOptionsText}
         | 
| 174 | 
            +
                    </MenuItem>
         | 
| 216 175 | 
             
                  </SelectOptions>
         | 
| 217 176 | 
             
                )
         | 
| 218 177 | 
             
              }
         | 
| @@ -229,7 +188,21 @@ const NonNativeSelectOptions = ({ | |
| 229 188 | 
             
                  fixedFooter={fixedFooter}
         | 
| 230 189 | 
             
                  role='listbox'
         | 
| 231 190 | 
             
                >
         | 
| 232 | 
            -
                  { | 
| 191 | 
            +
                  {isOptionsType(options)
         | 
| 192 | 
            +
                    ? renderOptions({
         | 
| 193 | 
            +
                        options,
         | 
| 194 | 
            +
                        getItemProps,
         | 
| 195 | 
            +
                        selection,
         | 
| 196 | 
            +
                        highlightedIndex,
         | 
| 197 | 
            +
                        renderOption,
         | 
| 198 | 
            +
                      })
         | 
| 199 | 
            +
                    : renderGroups({
         | 
| 200 | 
            +
                        groups: options,
         | 
| 201 | 
            +
                        getItemProps,
         | 
| 202 | 
            +
                        selection,
         | 
| 203 | 
            +
                        highlightedIndex,
         | 
| 204 | 
            +
                        renderOption,
         | 
| 205 | 
            +
                      })}
         | 
| 233 206 | 
             
                </SelectOptions>
         | 
| 234 207 | 
             
              )
         | 
| 235 208 | 
             
            }
         | 
    
        package/LICENSE
    DELETED
    
    | @@ -1,20 +0,0 @@ | |
| 1 | 
            -
            MIT License
         | 
| 2 | 
            -
             | 
| 3 | 
            -
            Copyright (c) 2021-2022 Toptal, LLC
         | 
| 4 | 
            -
             | 
| 5 | 
            -
            Permission is hereby granted, free of charge, to any person obtaining a copy of
         | 
| 6 | 
            -
            this software and associated documentation files (the “Software”), to deal in
         | 
| 7 | 
            -
            the Software without restriction, including without limitation the rights to
         | 
| 8 | 
            -
            use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
         | 
| 9 | 
            -
            the Software, and to permit persons to whom the Software is furnished to do so,
         | 
| 10 | 
            -
            subject to the following conditions:
         | 
| 11 | 
            -
             | 
| 12 | 
            -
            The above copyright notice and this permission notice shall be included in all
         | 
| 13 | 
            -
            copies or substantial portions of the Software.
         | 
| 14 | 
            -
             | 
| 15 | 
            -
            THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
         | 
| 16 | 
            -
            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
         | 
| 17 | 
            -
            FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
         | 
| 18 | 
            -
            COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
         | 
| 19 | 
            -
            IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
         | 
| 20 | 
            -
            CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
         |