@rescui/select 0.14.4-RUI-286-Fix-tooltip-stacking-f4145b01.1 → 0.15.1-RUI-280-Update-select-component-026338d06.52
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/lib/_virtual/index.css.js +12 -12
- package/lib/common-prop-types.d.ts +9 -14
- package/lib/common-prop-types.js +4 -3
- package/lib/constants.d.ts +7 -0
- package/lib/constants.js +8 -0
- package/lib/hooks/use-css-context-transfer.d.ts +14 -0
- package/lib/hooks/use-css-context-transfer.js +40 -0
- package/lib/hooks/use-label-focus.d.ts +11 -0
- package/lib/hooks/use-label-focus.js +28 -0
- package/lib/hooks/use-multi-option-serialization.d.ts +10 -0
- package/lib/hooks/use-multi-option-serialization.js +82 -0
- package/lib/hooks/use-option-serialization.d.ts +10 -0
- package/lib/hooks/use-option-serialization.js +59 -0
- package/lib/index.css +1700 -705
- package/lib/index.d.ts +4 -6
- package/lib/index.js +3 -3
- package/lib/multiselect.d.ts +29 -0
- package/lib/multiselect.js +239 -0
- package/lib/native-select.d.ts +4 -0
- package/lib/native-select.js +182 -0
- package/lib/parts/foldable.js +5 -7
- package/lib/parts/form-trigger-wrapper.d.ts +21 -3
- package/lib/parts/form-trigger-wrapper.js +30 -40
- package/lib/parts/icons.d.ts +17 -0
- package/lib/parts/icons.js +75 -0
- package/lib/parts/list-box.d.ts +19 -0
- package/lib/parts/list-box.js +146 -0
- package/lib/parts/multi-trigger.d.ts +11 -0
- package/lib/parts/multi-trigger.js +62 -0
- package/lib/parts/native-select-options-with-groups.d.ts +8 -0
- package/lib/parts/native-select-options-with-groups.js +76 -0
- package/lib/parts/native-select-trigger.d.ts +18 -0
- package/lib/parts/native-select-trigger.js +54 -0
- package/lib/parts/popover.d.ts +12 -0
- package/lib/parts/popover.js +62 -0
- package/lib/parts/popup-content.d.ts +19 -0
- package/lib/parts/popup-content.js +76 -0
- package/lib/public-api.p.css +401 -1022
- package/lib/public-api.pcss +401 -1022
- package/lib/select-basic.d.ts +3 -0
- package/lib/select-basic.js +143 -0
- package/lib/select-searchable.d.ts +3 -0
- package/lib/select-searchable.js +168 -0
- package/lib/select.d.ts +27 -86
- package/lib/select.js +58 -352
- package/lib/styles/common.p.module.css.js +27 -0
- package/lib/styles/form-trigger.p.module.css.js +15 -0
- package/lib/styles/list-box.p.module.css.js +16 -0
- package/lib/styles/native-select-trigger.p.module.css.js +17 -0
- package/lib/styles/native-select.p.module.css.js +9 -0
- package/lib/styles/popover.p.module.css.js +10 -0
- package/lib/types.d.ts +167 -4
- package/lib/utils/calculate-max-height-by-items.d.ts +13 -0
- package/lib/utils/calculate-max-height-by-items.js +22 -0
- package/lib/utils/convert-options.d.ts +3 -0
- package/lib/utils/convert-options.js +52 -0
- package/lib/utils/convert-placement.d.ts +3 -0
- package/lib/utils/convert-placement.js +22 -0
- package/lib/utils/css-vars-utils.d.ts +3 -0
- package/lib/utils/css-vars-utils.js +20 -0
- package/lib/utils/get-empty-message.d.ts +6 -0
- package/lib/utils/get-empty-message.js +32 -0
- package/lib/utils/get-option-value.d.ts +2 -0
- package/lib/utils/get-option-value.js +11 -0
- package/lib/utils/get-real-items-cnt.d.ts +2 -0
- package/lib/utils/get-real-items-cnt.js +21 -0
- package/lib/utils/get-text-from-nodes.d.ts +2 -0
- package/lib/utils/get-text-from-nodes.js +28 -0
- package/lib/utils/is-option-a-group.d.ts +2 -0
- package/lib/utils/is-option-a-group.js +5 -0
- package/lib/utils/throttle.d.ts +1 -0
- package/package.json +12 -8
- package/lib/_virtual/warning.js +0 -106
- package/lib/key-codes.d.ts +0 -7
- package/lib/key-codes.js +0 -8
- package/lib/parts/common-select.p.module.css.js +0 -15
- package/lib/parts/form-trigger.p.module.css.js +0 -13
- package/lib/parts/multiselect.d.ts +0 -81
- package/lib/parts/multiselect.js +0 -441
- package/lib/parts/native-select.d.ts +0 -30
- package/lib/parts/native-select.js +0 -244
- package/lib/parts/native-select.p.module.css.js +0 -9
- package/lib/parts/throttle.d.ts +0 -1
- package/lib/parts/trigger.d.ts +0 -37
- package/lib/parts/trigger.js +0 -255
- package/lib/parts/trigger.p.module.css.js +0 -31
- package/lib/utils.d.ts +0 -22
- package/lib/utils.js +0 -201
- /package/lib/{parts → hooks}/use-observable-force-rerender.d.ts +0 -0
- /package/lib/{parts → hooks}/use-observable-force-rerender.js +0 -0
- /package/lib/{parts → utils}/throttle.js +0 -0
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"icon": "
|
|
3
|
-
"sizeXS": "
|
|
4
|
-
"sizeS": "
|
|
5
|
-
"sizeM": "
|
|
6
|
-
"sizeL": "
|
|
7
|
-
"light": "
|
|
8
|
-
"dark": "
|
|
9
|
-
"allVariants": "
|
|
10
|
-
"variant16": "
|
|
11
|
-
"variant20": "
|
|
12
|
-
"variant24": "
|
|
13
|
-
"variant28": "
|
|
2
|
+
"icon": "_icon_10fdwmx_4",
|
|
3
|
+
"sizeXS": "_sizeXS_10fdwmx_14",
|
|
4
|
+
"sizeS": "_sizeS_10fdwmx_18",
|
|
5
|
+
"sizeM": "_sizeM_10fdwmx_22",
|
|
6
|
+
"sizeL": "_sizeL_10fdwmx_26",
|
|
7
|
+
"light": "_light_10fdwmx_30",
|
|
8
|
+
"dark": "_dark_10fdwmx_34",
|
|
9
|
+
"allVariants": "_allVariants_10fdwmx_48",
|
|
10
|
+
"variant16": "_variant16_10fdwmx_53",
|
|
11
|
+
"variant20": "_variant20_10fdwmx_54",
|
|
12
|
+
"variant24": "_variant24_10fdwmx_55",
|
|
13
|
+
"variant28": "_variant28_10fdwmx_58"
|
|
14
14
|
};
|
|
15
15
|
export { styles as default };
|
|
@@ -1,18 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import PropTypes from 'prop-types';
|
|
3
|
+
import type { NoOptionsMessage, NoOptionsMessageConfig } from './types';
|
|
4
|
+
export declare const keyType: PropTypes.Requireable<string | number>;
|
|
2
5
|
export declare const optionType: PropTypes.Requireable<PropTypes.InferProps<{
|
|
3
6
|
label: PropTypes.Validator<PropTypes.ReactNodeLike>;
|
|
4
|
-
value: PropTypes.Requireable<string>;
|
|
7
|
+
value: PropTypes.Requireable<string | number>;
|
|
5
8
|
}>>;
|
|
6
9
|
export declare const optionsGroupType: PropTypes.Requireable<PropTypes.InferProps<{
|
|
7
10
|
label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
8
11
|
options: PropTypes.Requireable<PropTypes.InferProps<{
|
|
9
12
|
label: PropTypes.Validator<PropTypes.ReactNodeLike>;
|
|
10
|
-
value: PropTypes.Requireable<string>;
|
|
13
|
+
value: PropTypes.Requireable<string | number>;
|
|
11
14
|
}>[]>;
|
|
12
15
|
}>>;
|
|
13
16
|
export declare const nativeOptionType: PropTypes.Requireable<PropTypes.InferProps<{
|
|
14
17
|
label: PropTypes.Validator<string>;
|
|
15
|
-
value: PropTypes.Requireable<string>;
|
|
18
|
+
value: PropTypes.Requireable<string | number>;
|
|
16
19
|
disabled: PropTypes.Requireable<boolean>;
|
|
17
20
|
}>>;
|
|
18
21
|
export declare const nativeOptionsGroupType: PropTypes.Requireable<PropTypes.InferProps<{
|
|
@@ -20,16 +23,8 @@ export declare const nativeOptionsGroupType: PropTypes.Requireable<PropTypes.Inf
|
|
|
20
23
|
disabled: PropTypes.Requireable<boolean>;
|
|
21
24
|
options: PropTypes.Requireable<PropTypes.InferProps<{
|
|
22
25
|
label: PropTypes.Validator<PropTypes.ReactNodeLike>;
|
|
23
|
-
value: PropTypes.Requireable<string>;
|
|
26
|
+
value: PropTypes.Requireable<string | number>;
|
|
24
27
|
}>[]>;
|
|
25
28
|
}>>;
|
|
26
|
-
export declare const noOptionsMessageConfigType:
|
|
27
|
-
|
|
28
|
-
nothingFound: PropTypes.Requireable<string>;
|
|
29
|
-
loading: PropTypes.Requireable<string>;
|
|
30
|
-
}>>;
|
|
31
|
-
export declare const noOptionsMessageType: PropTypes.Requireable<string | PropTypes.InferProps<{
|
|
32
|
-
noOptions: PropTypes.Validator<string>;
|
|
33
|
-
nothingFound: PropTypes.Requireable<string>;
|
|
34
|
-
loading: PropTypes.Requireable<string>;
|
|
35
|
-
}>>;
|
|
29
|
+
export declare const noOptionsMessageConfigType: React.Validator<NoOptionsMessageConfig>;
|
|
30
|
+
export declare const noOptionsMessageType: React.Validator<NoOptionsMessage>;
|
package/lib/common-prop-types.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
+
const keyType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
|
|
2
3
|
const optionType = PropTypes.shape({
|
|
3
4
|
label: PropTypes.node.isRequired,
|
|
4
|
-
value:
|
|
5
|
+
value: keyType
|
|
5
6
|
});
|
|
6
7
|
const optionsGroupType = PropTypes.shape({
|
|
7
8
|
label: PropTypes.node,
|
|
@@ -9,7 +10,7 @@ const optionsGroupType = PropTypes.shape({
|
|
|
9
10
|
});
|
|
10
11
|
const nativeOptionType = PropTypes.shape({
|
|
11
12
|
label: PropTypes.string.isRequired,
|
|
12
|
-
value:
|
|
13
|
+
value: keyType,
|
|
13
14
|
disabled: PropTypes.bool
|
|
14
15
|
});
|
|
15
16
|
const nativeOptionsGroupType = PropTypes.shape({
|
|
@@ -23,4 +24,4 @@ const noOptionsMessageConfigType = PropTypes.shape({
|
|
|
23
24
|
loading: PropTypes.string
|
|
24
25
|
});
|
|
25
26
|
const noOptionsMessageType = PropTypes.oneOfType([PropTypes.string, noOptionsMessageConfigType]);
|
|
26
|
-
export { nativeOptionType, nativeOptionsGroupType, noOptionsMessageConfigType, noOptionsMessageType, optionType, optionsGroupType };
|
|
27
|
+
export { keyType, nativeOptionType, nativeOptionsGroupType, noOptionsMessageConfigType, noOptionsMessageType, optionType, optionsGroupType };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const VIRTUAL_ITEMS_SECTION_KEY = "\0__rs_hidden_section_virtual_items__";
|
|
2
|
+
export declare const NO_OPTIONS_VALUE = "\0__rs_select_no_options__";
|
|
3
|
+
export declare const DEFAULT_NO_OPTIONS_MESSAGES: {
|
|
4
|
+
noOptions: string;
|
|
5
|
+
nothingFound: string;
|
|
6
|
+
loading: string;
|
|
7
|
+
};
|
package/lib/constants.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
const VIRTUAL_ITEMS_SECTION_KEY = `\0__rs_hidden_section_virtual_items__`;
|
|
2
|
+
const NO_OPTIONS_VALUE = '\0__rs_select_no_options__';
|
|
3
|
+
const DEFAULT_NO_OPTIONS_MESSAGES = {
|
|
4
|
+
noOptions: 'No options',
|
|
5
|
+
nothingFound: 'Nothing found',
|
|
6
|
+
loading: 'Loading...'
|
|
7
|
+
};
|
|
8
|
+
export { DEFAULT_NO_OPTIONS_MESSAGES, NO_OPTIONS_VALUE, VIRTUAL_ITEMS_SECTION_KEY };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type Theme } from '@rescui/ui-contexts';
|
|
3
|
+
import type { SelectSize } from '../types';
|
|
4
|
+
export declare type useCssContextTransferArgs = {
|
|
5
|
+
triggerRef: React.RefObject<HTMLElement>;
|
|
6
|
+
isOpen: boolean;
|
|
7
|
+
themeFromProps: Theme;
|
|
8
|
+
sizeFromProps: SelectSize;
|
|
9
|
+
};
|
|
10
|
+
export declare const useCssContextTransfer: ({ triggerRef, isOpen, themeFromProps, sizeFromProps }: useCssContextTransferArgs) => {
|
|
11
|
+
size: SelectSize;
|
|
12
|
+
theme: Theme;
|
|
13
|
+
primaryColors: Record<string, string>;
|
|
14
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
|
2
|
+
import { useContext } from 'react';
|
|
3
|
+
import { ThemeContext } from '@rescui/ui-contexts';
|
|
4
|
+
import { extractThemeFromCss, extractPrimaryColors } from '../utils/css-vars-utils.js';
|
|
5
|
+
|
|
6
|
+
const useCssContextTransfer = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
triggerRef,
|
|
9
|
+
isOpen,
|
|
10
|
+
themeFromProps,
|
|
11
|
+
sizeFromProps
|
|
12
|
+
} = _ref;
|
|
13
|
+
let sizeFromCss = null;
|
|
14
|
+
let themeFromCss = 'light';
|
|
15
|
+
let primaryColors = {};
|
|
16
|
+
|
|
17
|
+
if (triggerRef.current && isOpen) {
|
|
18
|
+
var _context;
|
|
19
|
+
|
|
20
|
+
const triggerFormWrapperStyles = getComputedStyle(triggerRef.current);
|
|
21
|
+
const rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
|
|
22
|
+
sizeFromCss = _includesInstanceProperty(_context = ['s', 'm', 'l']).call(_context, rawSizeFromCss) ? rawSizeFromCss : null;
|
|
23
|
+
themeFromCss = extractThemeFromCss(triggerFormWrapperStyles);
|
|
24
|
+
primaryColors = extractPrimaryColors(triggerFormWrapperStyles);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const size = sizeFromCss || sizeFromProps;
|
|
28
|
+
const {
|
|
29
|
+
theme: themeFromContext,
|
|
30
|
+
noProvider
|
|
31
|
+
} = useContext(ThemeContext);
|
|
32
|
+
const theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
|
|
33
|
+
return {
|
|
34
|
+
size,
|
|
35
|
+
theme,
|
|
36
|
+
primaryColors
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export { useCssContextTransfer };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const useLabelFocus: (triggerRef: React.RefObject<HTMLElement>) => {
|
|
3
|
+
isFocusedByLabel: boolean;
|
|
4
|
+
triggerFocusProps: {
|
|
5
|
+
onFocus: () => void;
|
|
6
|
+
onBlur: () => void;
|
|
7
|
+
};
|
|
8
|
+
labelClickProps: {
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useRef, useState } from 'react';
|
|
2
|
+
|
|
3
|
+
const useLabelFocus = triggerRef => {
|
|
4
|
+
const isLabelClick = useRef(false);
|
|
5
|
+
const [isFocusedByLabel, setIsFocusedByLabel] = useState(false);
|
|
6
|
+
const triggerFocusProps = {
|
|
7
|
+
onFocus: () => {
|
|
8
|
+
setIsFocusedByLabel(isLabelClick.current);
|
|
9
|
+
},
|
|
10
|
+
onBlur: () => {
|
|
11
|
+
setIsFocusedByLabel(false);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
const labelClickProps = {
|
|
15
|
+
onClick: () => {
|
|
16
|
+
isLabelClick.current = true;
|
|
17
|
+
triggerRef.current.focus();
|
|
18
|
+
isLabelClick.current = false;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
return {
|
|
22
|
+
isFocusedByLabel,
|
|
23
|
+
triggerFocusProps,
|
|
24
|
+
labelClickProps
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { useLabelFocus };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { SelectOption, SelectOptionOrGroup, Key } from '../types';
|
|
2
|
+
export declare function useMultiOptionSerialization(options: SelectOptionOrGroup[], value?: SelectOption[] | null): {
|
|
3
|
+
optionsMap: Map<Key, {
|
|
4
|
+
option: SelectOption;
|
|
5
|
+
isVirtual: boolean;
|
|
6
|
+
}>;
|
|
7
|
+
selectedKeys: Key[];
|
|
8
|
+
findOptionsByKeys: (keys: Key[]) => SelectOption[];
|
|
9
|
+
virtualOptions: SelectOption[];
|
|
10
|
+
};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { isOptionAGroup } from '../utils/is-option-a-group.js';
|
|
3
|
+
import { getOptionValue } from '../utils/get-option-value.js';
|
|
4
|
+
|
|
5
|
+
function useMultiOptionSerialization(options, value) {
|
|
6
|
+
// Create a map of keys to option objects for O(1) lookup
|
|
7
|
+
const optionsMap = useMemo(() => {
|
|
8
|
+
const map = new Map();
|
|
9
|
+
options.forEach(item => {
|
|
10
|
+
if (isOptionAGroup(item)) {
|
|
11
|
+
item.options.forEach(option => {
|
|
12
|
+
const key = getOptionValue(option);
|
|
13
|
+
map.set(key, {
|
|
14
|
+
option,
|
|
15
|
+
isVirtual: false
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
} else {
|
|
19
|
+
const key = getOptionValue(item);
|
|
20
|
+
map.set(key, {
|
|
21
|
+
option: item,
|
|
22
|
+
isVirtual: false
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
if (value && Array.isArray(value)) {
|
|
28
|
+
value.forEach(option => {
|
|
29
|
+
const key = getOptionValue(option);
|
|
30
|
+
|
|
31
|
+
if (!map.has(key)) {
|
|
32
|
+
map.set(key, {
|
|
33
|
+
option,
|
|
34
|
+
isVirtual: true
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return map;
|
|
41
|
+
}, [options, value]); // Convert selected option objects array to Set of keys
|
|
42
|
+
|
|
43
|
+
const selectedKeys = [];
|
|
44
|
+
const virtualOptions = [];
|
|
45
|
+
|
|
46
|
+
if (value && Array.isArray(value)) {
|
|
47
|
+
value.forEach(option => {
|
|
48
|
+
const key = getOptionValue(option);
|
|
49
|
+
selectedKeys.push(key);
|
|
50
|
+
const {
|
|
51
|
+
isVirtual
|
|
52
|
+
} = optionsMap.get(key);
|
|
53
|
+
|
|
54
|
+
if (isVirtual) {
|
|
55
|
+
virtualOptions.push(option);
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
} // Helper function to find options by Set of keys
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
const findOptionsByKeys = keys => {
|
|
62
|
+
const foundOptions = [];
|
|
63
|
+
keys.forEach(key => {
|
|
64
|
+
if (optionsMap.has(key)) {
|
|
65
|
+
const {
|
|
66
|
+
option
|
|
67
|
+
} = optionsMap.get(key);
|
|
68
|
+
foundOptions.push(option);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
return foundOptions;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
return {
|
|
75
|
+
optionsMap,
|
|
76
|
+
selectedKeys,
|
|
77
|
+
findOptionsByKeys,
|
|
78
|
+
virtualOptions
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export { useMultiOptionSerialization };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { SelectOption, SelectOptionOrGroup, Key } from '../types';
|
|
2
|
+
export declare function useOptionSerialization(options: SelectOptionOrGroup[], value?: SelectOption | null): {
|
|
3
|
+
optionsMap: Map<Key, {
|
|
4
|
+
option: SelectOption;
|
|
5
|
+
isVirtual: boolean;
|
|
6
|
+
}>;
|
|
7
|
+
selectedKey: Key;
|
|
8
|
+
findOptionByKey: (key: Key | null) => SelectOption | null;
|
|
9
|
+
virtualOption: SelectOption;
|
|
10
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { isOptionAGroup } from '../utils/is-option-a-group.js';
|
|
3
|
+
import { getOptionValue } from '../utils/get-option-value.js';
|
|
4
|
+
|
|
5
|
+
function useOptionSerialization(options, value) {
|
|
6
|
+
// Create a map of keys to option objects for O(1) lookup
|
|
7
|
+
const optionsMap = useMemo(() => {
|
|
8
|
+
const map = new Map();
|
|
9
|
+
options.forEach(item => {
|
|
10
|
+
if (isOptionAGroup(item)) {
|
|
11
|
+
item.options.forEach(option => {
|
|
12
|
+
const key = getOptionValue(option);
|
|
13
|
+
map.set(key, {
|
|
14
|
+
option,
|
|
15
|
+
isVirtual: false
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
} else {
|
|
19
|
+
const key = getOptionValue(item);
|
|
20
|
+
map.set(key, {
|
|
21
|
+
option: item,
|
|
22
|
+
isVirtual: false
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
if (value) {
|
|
28
|
+
const key = getOptionValue(value);
|
|
29
|
+
|
|
30
|
+
if (!map.has(key)) {
|
|
31
|
+
map.set(key, {
|
|
32
|
+
option: value,
|
|
33
|
+
isVirtual: true
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return map;
|
|
39
|
+
}, [options, value]); // Convert selected option object to key
|
|
40
|
+
|
|
41
|
+
const selectedKey = value ? getOptionValue(value) : null;
|
|
42
|
+
const virtualOption = value && optionsMap.get(selectedKey).isVirtual ? value : null; // Helper function to find option by key
|
|
43
|
+
|
|
44
|
+
const findOptionByKey = key => {
|
|
45
|
+
var _optionsMap$get;
|
|
46
|
+
|
|
47
|
+
if (key === null) return null;
|
|
48
|
+
return ((_optionsMap$get = optionsMap.get(key)) === null || _optionsMap$get === void 0 ? void 0 : _optionsMap$get.option) || null;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
return {
|
|
52
|
+
optionsMap,
|
|
53
|
+
selectedKey,
|
|
54
|
+
findOptionByKey,
|
|
55
|
+
virtualOption
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export { useOptionSerialization };
|