@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.
|