@korsolutions/ui 0.0.70 → 0.0.72
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/README.md +1 -2
- package/dist/module/components/combobox/components/combobox-empty.js +1 -10
- package/dist/module/components/combobox/components/combobox-empty.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-option.js +1 -15
- package/dist/module/components/combobox/components/combobox-option.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-overlay.js +1 -1
- package/dist/module/components/combobox/components/combobox-overlay.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-root.js +9 -31
- package/dist/module/components/combobox/components/combobox-root.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-trigger.js +3 -3
- package/dist/module/components/combobox/components/combobox-trigger.js.map +1 -1
- package/dist/module/components/combobox/context.js.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-empty.d.ts +3 -3
- package/dist/typescript/src/components/combobox/components/combobox-empty.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-option.d.ts +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-option.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-root.d.ts +2 -6
- package/dist/typescript/src/components/combobox/components/combobox-root.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/context.d.ts +3 -6
- package/dist/typescript/src/components/combobox/context.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/types.d.ts +0 -5
- package/dist/typescript/src/components/combobox/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/combobox/components/combobox-empty.tsx +2 -14
- package/src/components/combobox/components/combobox-option.tsx +5 -24
- package/src/components/combobox/components/combobox-overlay.tsx +1 -1
- package/src/components/combobox/components/combobox-root.tsx +13 -59
- package/src/components/combobox/components/combobox-trigger.tsx +3 -3
- package/src/components/combobox/context.ts +3 -7
- package/src/components/combobox/types.ts +0 -6
- package/nodemon.json +0 -14
package/README.md
CHANGED
|
@@ -3,18 +3,9 @@
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { StyleSheet, Text } from "react-native";
|
|
5
5
|
import { useCombobox } from "../context.js";
|
|
6
|
-
import {
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
export function ComboboxEmpty(props) {
|
|
8
8
|
const combobox = useCombobox();
|
|
9
|
-
const hasVisibleOptions = combobox.options.some(option => combobox.filter(option.value, combobox.searchQuery));
|
|
10
|
-
if (hasVisibleOptions) {
|
|
11
|
-
return null;
|
|
12
|
-
}
|
|
13
|
-
if (props.render) {
|
|
14
|
-
return /*#__PURE__*/_jsx(_Fragment, {
|
|
15
|
-
children: props.render()
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
9
|
const composedStyles = StyleSheet.flatten([combobox.styles.empty?.default, combobox.styles.empty?.[combobox.state]]);
|
|
19
10
|
return /*#__PURE__*/_jsx(Text, {
|
|
20
11
|
style: composedStyles,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","Text","useCombobox","
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","Text","useCombobox","jsx","_jsx","ComboboxEmpty","props","combobox","composedStyles","flatten","styles","empty","default","state","style","children"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-empty.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,SAASC,WAAW,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMzC,OAAO,SAASC,aAAaA,CAACC,KAAyB,EAAE;EACvD,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;EAE9B,MAAMM,cAAc,GAAGR,UAAU,CAACS,OAAO,CAAC,CACxCF,QAAQ,CAACG,MAAM,CAACC,KAAK,EAAEC,OAAO,EAC9BL,QAAQ,CAACG,MAAM,CAACC,KAAK,GAAGJ,QAAQ,CAACM,KAAK,CAAC,CACxC,CAAC;EAEF,oBAAOT,IAAA,CAACH,IAAI;IAACa,KAAK,EAAEN,cAAe;IAAAO,QAAA,EAAET,KAAK,CAACS;EAAQ,CAAO,CAAC;AAC7D","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, {
|
|
3
|
+
import React, { useState } from "react";
|
|
4
4
|
import { Pressable, StyleSheet, Text } from "react-native";
|
|
5
5
|
import { useCombobox } from "../context.js";
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -22,20 +22,6 @@ export function ComboboxOption(props) {
|
|
|
22
22
|
const isSelected = combobox.value === props.value;
|
|
23
23
|
const optionState = calculateState(combobox.state, isHovered, isSelected);
|
|
24
24
|
const composedStyles = StyleSheet.flatten([combobox.styles?.option?.default, combobox.styles?.option?.[optionState]]);
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
combobox.setOptions(prev => {
|
|
27
|
-
if (prev.find(option => option.value === props.value)) {
|
|
28
|
-
return prev;
|
|
29
|
-
}
|
|
30
|
-
return [...prev, {
|
|
31
|
-
value: props.value,
|
|
32
|
-
label: props.label ?? props.children
|
|
33
|
-
}];
|
|
34
|
-
});
|
|
35
|
-
}, [props.value, props.label, props.children]);
|
|
36
|
-
if (!combobox.filter(props.value, combobox.searchQuery)) {
|
|
37
|
-
return null;
|
|
38
|
-
}
|
|
39
25
|
const Component = typeof props.children === "string" ? Text : Pressable;
|
|
40
26
|
return /*#__PURE__*/_jsx(Component, {
|
|
41
27
|
onPress: () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useState","Pressable","StyleSheet","Text","useCombobox","jsx","_jsx","calculateState","comboboxState","hovered","selected","ComboboxOption","props","isHovered","setIsHovered","combobox","isSelected","value","optionState","state","composedStyles","flatten","styles","option","default","Component","children","onPress","label","onChange","setIsOpen","onPointerEnter","onPointerLeave","style"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-option.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC1D,SAASC,WAAW,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AASzC,MAAMC,cAAc,GAAGA,CACrBC,aAA4B,EAC5BC,OAAgB,EAChBC,QAAiB,KACO;EACxB,IAAIF,aAAa,KAAK,UAAU,EAAE;IAChC,OAAO,UAAU;EACnB;EACA,IAAIE,QAAQ,EAAE;IACZ,OAAO,UAAU;EACnB;EACA,IAAID,OAAO,EAAE;IACX,OAAO,SAAS;EAClB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASE,cAAcA,CAACC,KAA0B,EAAE;EACzD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMe,QAAQ,GAAGX,WAAW,CAAC,CAAC;EAC9B,MAAMY,UAAU,GAAGD,QAAQ,CAACE,KAAK,KAAKL,KAAK,CAACK,KAAK;EAEjD,MAAMC,WAAW,GAAGX,cAAc,CAACQ,QAAQ,CAACI,KAAK,EAAEN,SAAS,EAAEG,UAAU,CAAC;EACzE,MAAMI,cAAc,GAAGlB,UAAU,CAACmB,OAAO,CAAC,CACxCN,QAAQ,CAACO,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAChCT,QAAQ,CAACO,MAAM,EAAEC,MAAM,GAAGL,WAAW,CAAC,CACvC,CAAC;EAEF,MAAMO,SAAS,GAAG,OAAOb,KAAK,CAACc,QAAQ,KAAK,QAAQ,GAAGvB,IAAI,GAAGF,SAAS;EAEvE,oBACEK,IAAA,CAACmB,SAAS;IACRE,OAAO,EAAEA,CAAA,KAAM;MACb,MAAMC,KAAK,GACThB,KAAK,CAACgB,KAAK,KACV,OAAOhB,KAAK,CAACc,QAAQ,KAAK,QAAQ,GAAGd,KAAK,CAACc,QAAQ,GAAGd,KAAK,CAACK,KAAK,CAAC;MACrEF,QAAQ,CAACc,QAAQ,GAAGD,KAAK,CAAC;MAC1Bb,QAAQ,CAACe,SAAS,CAAC,KAAK,CAAC;IAC3B,CAAE;IACFC,cAAc,EAAEA,CAAA,KAAM;MACpBjB,YAAY,CAAC,IAAI,CAAC;IACpB,CAAE;IACFkB,cAAc,EAAEA,CAAA,KAAM;MACpBlB,YAAY,CAAC,KAAK,CAAC;IACrB,CAAE;IACFmB,KAAK,EAAEb,cAAe;IAAAM,QAAA,EAErBd,KAAK,CAACc;EAAQ,CACN,CAAC;AAEhB","ignoreList":[]}
|
|
@@ -9,7 +9,7 @@ export function ComboboxOverlay(props) {
|
|
|
9
9
|
const composedStyles = StyleSheet.flatten([combobox.styles?.overlay?.default, combobox.styles?.overlay?.[combobox.state], props.style]);
|
|
10
10
|
return /*#__PURE__*/_jsx(Pressable, {
|
|
11
11
|
onPress: () => {
|
|
12
|
-
combobox.onChange?.(combobox.
|
|
12
|
+
combobox.onChange?.(combobox.inputValue);
|
|
13
13
|
combobox.setIsOpen(false);
|
|
14
14
|
},
|
|
15
15
|
pointerEvents: "auto",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Pressable","StyleSheet","useCombobox","jsx","_jsx","ComboboxOverlay","props","combobox","composedStyles","flatten","styles","overlay","default","state","style","onPress","onChange","
|
|
1
|
+
{"version":3,"names":["React","Pressable","StyleSheet","useCombobox","jsx","_jsx","ComboboxOverlay","props","combobox","composedStyles","flatten","styles","overlay","default","state","style","onPress","onChange","inputValue","setIsOpen","pointerEvents","absoluteFill","children"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-overlay.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,SAAS,EAETC,UAAU,QAEL,cAAc;AACrB,SAASC,WAAW,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOzC,OAAO,SAASC,eAAeA,CAACC,KAA2B,EAAE;EAC3D,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;EAE9B,MAAMM,cAAc,GAAGP,UAAU,CAACQ,OAAO,CAAC,CACxCF,QAAQ,CAACG,MAAM,EAAEC,OAAO,EAAEC,OAAO,EACjCL,QAAQ,CAACG,MAAM,EAAEC,OAAO,GAAGJ,QAAQ,CAACM,KAAK,CAAC,EAC1CP,KAAK,CAACQ,KAAK,CACZ,CAAC;EAEF,oBACEV,IAAA,CAACJ,SAAS;IACRe,OAAO,EAAEA,CAAA,KAAM;MACbR,QAAQ,CAACS,QAAQ,GAAGT,QAAQ,CAACU,UAAU,CAAC;MACxCV,QAAQ,CAACW,SAAS,CAAC,KAAK,CAAC;IAC3B,CAAE;IACFC,aAAa,EAAC,MAAM;IACpBL,KAAK,EAAE,CAACb,UAAU,CAACmB,YAAY,EAAEZ,cAAc,CAAE;IAAAa,QAAA,EAEhDf,KAAK,CAACe;EAAQ,CACN,CAAC;AAEhB","ignoreList":[]}
|
|
@@ -12,42 +12,23 @@ const calculateState = props => {
|
|
|
12
12
|
}
|
|
13
13
|
return "default";
|
|
14
14
|
};
|
|
15
|
-
const defaultFilter = (value, query, options) => {
|
|
16
|
-
if (!query) return true;
|
|
17
|
-
const lowerQuery = query.toLowerCase();
|
|
18
|
-
const option = options.find(o => o.value === value);
|
|
19
|
-
if (!option) return true;
|
|
20
|
-
if (option.keywords) {
|
|
21
|
-
return option.keywords.some(kw => kw.toLowerCase().includes(lowerQuery));
|
|
22
|
-
}
|
|
23
|
-
if (typeof option.label === "string") {
|
|
24
|
-
return option.label.toLowerCase().includes(lowerQuery);
|
|
25
|
-
}
|
|
26
|
-
return true;
|
|
27
|
-
};
|
|
28
15
|
export function ComboboxRoot(props) {
|
|
29
16
|
const variantStyles = ComboboxVariants[props.variant ?? "default"]();
|
|
30
17
|
const [isOpen, setIsOpen] = useState(false);
|
|
31
18
|
const [contentLayout, setContentLayout] = useState(DEFAULT_LAYOUT);
|
|
32
19
|
const [triggerPosition, setTriggerPosition] = useState(DEFAULT_POSITION);
|
|
33
|
-
const [
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
setSearchQueryInternal(prev => {
|
|
20
|
+
const [inputValue, setInputValueInternal] = useState("");
|
|
21
|
+
const onInputChangeRef = useRef(props.onInputChange);
|
|
22
|
+
onInputChangeRef.current = props.onInputChange;
|
|
23
|
+
const setInputValue = useCallback(action => {
|
|
24
|
+
setInputValueInternal(prev => {
|
|
39
25
|
const next = typeof action === "function" ? action(prev) : action;
|
|
40
26
|
if (next !== prev) {
|
|
41
|
-
|
|
27
|
+
onInputChangeRef.current?.(next);
|
|
42
28
|
}
|
|
43
29
|
return next;
|
|
44
30
|
});
|
|
45
31
|
}, []);
|
|
46
|
-
const filterRef = useRef(props.filter);
|
|
47
|
-
filterRef.current = props.filter;
|
|
48
|
-
const optionsRef = useRef(options);
|
|
49
|
-
optionsRef.current = options;
|
|
50
|
-
const filter = useCallback((value, query) => filterRef.current ? filterRef.current(value, query) : defaultFilter(value, query, optionsRef.current), []);
|
|
51
32
|
const state = calculateState(props);
|
|
52
33
|
const composedStyles = StyleSheet.flatten([variantStyles?.root?.default, variantStyles?.root?.[state], props.style]);
|
|
53
34
|
const contextValue = useMemo(() => ({
|
|
@@ -59,15 +40,12 @@ export function ComboboxRoot(props) {
|
|
|
59
40
|
setTriggerPosition,
|
|
60
41
|
contentLayout,
|
|
61
42
|
setContentLayout,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
searchQuery,
|
|
65
|
-
setSearchQuery,
|
|
66
|
-
filter,
|
|
43
|
+
inputValue,
|
|
44
|
+
setInputValue,
|
|
67
45
|
state,
|
|
68
46
|
isDisabled: props.isDisabled ?? false,
|
|
69
47
|
styles: variantStyles
|
|
70
|
-
}), [props.value, props.onChange, isOpen, triggerPosition, contentLayout,
|
|
48
|
+
}), [props.value, props.onChange, isOpen, triggerPosition, contentLayout, inputValue, setInputValue, state, props.isDisabled, variantStyles]);
|
|
71
49
|
return /*#__PURE__*/_jsx(ComboboxContext.Provider, {
|
|
72
50
|
value: contextValue,
|
|
73
51
|
children: /*#__PURE__*/_jsx(View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useMemo","useRef","useState","StyleSheet","View","DEFAULT_LAYOUT","DEFAULT_POSITION","ComboboxContext","ComboboxVariants","jsx","_jsx","calculateState","props","isDisabled","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","useRef","useState","StyleSheet","View","DEFAULT_LAYOUT","DEFAULT_POSITION","ComboboxContext","ComboboxVariants","jsx","_jsx","calculateState","props","isDisabled","ComboboxRoot","variantStyles","variant","isOpen","setIsOpen","contentLayout","setContentLayout","triggerPosition","setTriggerPosition","inputValue","setInputValueInternal","onInputChangeRef","onInputChange","current","setInputValue","action","prev","next","state","composedStyles","flatten","root","default","style","contextValue","value","onChange","styles","Provider","children"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACrE,SAGEC,UAAU,EACVC,IAAI,QAEC,cAAc;AACrB,SACEC,cAAc,EACdC,gBAAgB,QAEX,yBAAgB;AACvB,SAASC,eAAe,QAAQ,eAAY;AAE5C,SAASC,gBAAgB,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiB/C,MAAMC,cAAc,GAAIC,KAAwB,IAAoB;EAClE,IAAIA,KAAK,CAACC,UAAU,EAAE;IACpB,OAAO,UAAU;EACnB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASC,YAAYA,CAACF,KAAwB,EAAE;EACrD,MAAMG,aAAa,GAAGP,gBAAgB,CAACI,KAAK,CAACI,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC;EAEpE,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAACiB,aAAa,EAAEC,gBAAgB,CAAC,GACrClB,QAAQ,CAAkBG,cAAc,CAAC;EAC3C,MAAM,CAACgB,eAAe,EAAEC,kBAAkB,CAAC,GACzCpB,QAAQ,CAAiBI,gBAAgB,CAAC;EAC5C,MAAM,CAACiB,UAAU,EAAEC,qBAAqB,CAAC,GAAGtB,QAAQ,CAAC,EAAE,CAAC;EAExD,MAAMuB,gBAAgB,GAAGxB,MAAM,CAACW,KAAK,CAACc,aAAa,CAAC;EACpDD,gBAAgB,CAACE,OAAO,GAAGf,KAAK,CAACc,aAAa;EAE9C,MAAME,aAA2D,GAC/D7B,WAAW,CAAE8B,MAAM,IAAK;IACtBL,qBAAqB,CAAEM,IAAI,IAAK;MAC9B,MAAMC,IAAI,GAAG,OAAOF,MAAM,KAAK,UAAU,GAAGA,MAAM,CAACC,IAAI,CAAC,GAAGD,MAAM;MACjE,IAAIE,IAAI,KAAKD,IAAI,EAAE;QACjBL,gBAAgB,CAACE,OAAO,GAAGI,IAAI,CAAC;MAClC;MACA,OAAOA,IAAI;IACb,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAER,MAAMC,KAAK,GAAGrB,cAAc,CAACC,KAAK,CAAC;EACnC,MAAMqB,cAAc,GAAG9B,UAAU,CAAC+B,OAAO,CAAC,CACxCnB,aAAa,EAAEoB,IAAI,EAAEC,OAAO,EAC5BrB,aAAa,EAAEoB,IAAI,GAAGH,KAAK,CAAC,EAC5BpB,KAAK,CAACyB,KAAK,CACZ,CAAC;EAEF,MAAMC,YAA6B,GAAGtC,OAAO,CAC3C,OAAO;IACLuC,KAAK,EAAE3B,KAAK,CAAC2B,KAAK;IAClBC,QAAQ,EAAE5B,KAAK,CAAC4B,QAAQ;IACxBvB,MAAM;IACNC,SAAS;IACTG,eAAe;IACfC,kBAAkB;IAClBH,aAAa;IACbC,gBAAgB;IAChBG,UAAU;IACVK,aAAa;IACbI,KAAK;IACLnB,UAAU,EAAED,KAAK,CAACC,UAAU,IAAI,KAAK;IACrC4B,MAAM,EAAE1B;EACV,CAAC,CAAC,EACF,CACEH,KAAK,CAAC2B,KAAK,EACX3B,KAAK,CAAC4B,QAAQ,EACdvB,MAAM,EACNI,eAAe,EACfF,aAAa,EACbI,UAAU,EACVK,aAAa,EACbI,KAAK,EACLpB,KAAK,CAACC,UAAU,EAChBE,aAAa,CAEjB,CAAC;EAED,oBACEL,IAAA,CAACH,eAAe,CAACmC,QAAQ;IAACH,KAAK,EAAED,YAAa;IAAAK,QAAA,eAC5CjC,IAAA,CAACN,IAAI;MAACiC,KAAK,EAAEJ,cAAe;MAAAU,QAAA,EAAE/B,KAAK,CAAC+B;IAAQ,CAAO;EAAC,CAC5B,CAAC;AAE/B","ignoreList":[]}
|
|
@@ -15,10 +15,10 @@ export function ComboboxTrigger(props) {
|
|
|
15
15
|
const combobox = useCombobox();
|
|
16
16
|
const triggerRef = useRef(null);
|
|
17
17
|
const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
|
|
18
|
-
const displayValue = combobox.isOpen ? combobox.
|
|
18
|
+
const displayValue = combobox.isOpen ? combobox.inputValue : combobox.value ?? "";
|
|
19
19
|
const open = () => {
|
|
20
20
|
if (combobox.isDisabled) return;
|
|
21
|
-
combobox.
|
|
21
|
+
combobox.setInputValue(combobox.value ?? "");
|
|
22
22
|
requestAnimationFrame(() => {
|
|
23
23
|
measureLayoutPosition(triggerRef.current, layout => {
|
|
24
24
|
combobox.setTriggerPosition(layout);
|
|
@@ -50,7 +50,7 @@ export function ComboboxTrigger(props) {
|
|
|
50
50
|
onChange: undefined,
|
|
51
51
|
onChangeText: text => {
|
|
52
52
|
if (combobox.isDisabled) return;
|
|
53
|
-
combobox.
|
|
53
|
+
combobox.setInputValue(text);
|
|
54
54
|
if (!combobox.isOpen) {
|
|
55
55
|
open();
|
|
56
56
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useRef","StyleSheet","TextInput","setInnerInputValue","measureLayoutPosition","useCombobox","jsx","_jsx","calculateState","isDisabled","isOpen","ComboboxTrigger","props","combobox","triggerRef","triggerState","displayValue","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","StyleSheet","TextInput","setInnerInputValue","measureLayoutPosition","useCombobox","jsx","_jsx","calculateState","isDisabled","isOpen","ComboboxTrigger","props","combobox","triggerRef","triggerState","displayValue","inputValue","value","open","setInputValue","requestAnimationFrame","current","layout","setTriggerPosition","setIsOpen","blur","triggerStyles","styles","trigger","composedProps","default","style","flatten","composedStyle","ref","undefined","onChange","onChangeText","text","onFocus"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-trigger.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContext","ComboboxContext","undefined","useCombobox","context","Error"],"sourceRoot":"../../../../src","sources":["components/combobox/context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAiBC,UAAU,QAAQ,OAAO;
|
|
1
|
+
{"version":3,"names":["createContext","useContext","ComboboxContext","undefined","useCombobox","context","Error"],"sourceRoot":"../../../../src","sources":["components/combobox/context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAiBC,UAAU,QAAQ,OAAO;AAyBhE,OAAO,MAAMC,eAAe,gBAAGF,aAAa,CAC1CG,SACF,CAAC;AAED,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC/B,MAAMC,OAAO,GAAGJ,UAAU,CAACC,eAAe,CAAC;EAC3C,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,oDAAoD,CAAC;EACvE;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import type { TextChildren } from "../../../types/element.types";
|
|
2
3
|
export interface ComboboxEmptyProps {
|
|
3
|
-
children?:
|
|
4
|
-
render: () => React.ReactNode;
|
|
4
|
+
children?: TextChildren;
|
|
5
5
|
}
|
|
6
|
-
export declare function ComboboxEmpty(props: ComboboxEmptyProps): React.JSX.Element
|
|
6
|
+
export declare function ComboboxEmpty(props: ComboboxEmptyProps): React.JSX.Element;
|
|
7
7
|
//# sourceMappingURL=combobox-empty.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-empty.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-empty.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"combobox-empty.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-empty.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGjE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAStD"}
|
|
@@ -4,5 +4,5 @@ export type ComboboxOptionProps = {
|
|
|
4
4
|
label?: string;
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
};
|
|
7
|
-
export declare function ComboboxOption(props: ComboboxOptionProps): React.
|
|
7
|
+
export declare function ComboboxOption(props: ComboboxOptionProps): React.JSX.Element;
|
|
8
8
|
//# sourceMappingURL=combobox-option.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-option.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-option.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"combobox-option.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmBF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAiCxD"}
|
|
@@ -5,12 +5,8 @@ export interface ComboboxRootProps {
|
|
|
5
5
|
variant?: keyof typeof ComboboxVariants;
|
|
6
6
|
value?: string;
|
|
7
7
|
onChange?: (value: string) => void;
|
|
8
|
-
/** Called when the
|
|
9
|
-
|
|
10
|
-
/** Custom filter function. Receives option value and search query, returns whether to show the option.
|
|
11
|
-
* Default: case-insensitive match against option label/keywords.
|
|
12
|
-
* For async/remote filtering, pass `() => true` to show all options. */
|
|
13
|
-
filter?: (value: string, query: string) => boolean;
|
|
8
|
+
/** Called when the text input value changes. Use this to filter options on the consumer side. */
|
|
9
|
+
onInputChange?: (text: string) => void;
|
|
14
10
|
isDisabled?: boolean;
|
|
15
11
|
children?: React.ReactNode;
|
|
16
12
|
style?: StyleProp<ViewStyle>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAEL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IAExC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,
|
|
1
|
+
{"version":3,"file":"combobox-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAEL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IAExC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,iGAAiG;IACjG,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AASD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAkEpD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type Dispatch } from "react";
|
|
2
2
|
import type { LayoutRectangle } from "react-native";
|
|
3
3
|
import type { LayoutPosition } from "../../hooks";
|
|
4
|
-
import type {
|
|
4
|
+
import type { ComboboxState, ComboboxStyles } from "./types";
|
|
5
5
|
export interface ComboboxContext {
|
|
6
6
|
value?: string;
|
|
7
7
|
onChange?: (value: string) => void;
|
|
@@ -11,11 +11,8 @@ export interface ComboboxContext {
|
|
|
11
11
|
setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
|
|
12
12
|
contentLayout: LayoutRectangle;
|
|
13
13
|
setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
searchQuery: string;
|
|
17
|
-
setSearchQuery: Dispatch<React.SetStateAction<string>>;
|
|
18
|
-
filter: (value: string, query: string) => boolean;
|
|
14
|
+
inputValue: string;
|
|
15
|
+
setInputValue: Dispatch<React.SetStateAction<string>>;
|
|
19
16
|
isDisabled: boolean;
|
|
20
17
|
state: ComboboxState;
|
|
21
18
|
styles: ComboboxStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/combobox/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,QAAQ,EAAc,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/combobox/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,QAAQ,EAAc,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,eAAe,EAAE,cAAc,CAAC;IAChC,kBAAkB,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,eAAe,CAAC;IAC/B,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAElE,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtD,UAAU,EAAE,OAAO,CAAC;IAEpB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,sDAE3B,CAAC;AAEF,eAAO,MAAM,WAAW,uBAMvB,CAAC"}
|
|
@@ -13,9 +13,4 @@ export interface ComboboxStyles {
|
|
|
13
13
|
option?: Partial<Record<ComboboxOptionState, TextStyle>>;
|
|
14
14
|
empty?: Partial<Record<ComboboxState, TextStyle>>;
|
|
15
15
|
}
|
|
16
|
-
export interface ComboboxOption {
|
|
17
|
-
value: string;
|
|
18
|
-
label: React.ReactNode;
|
|
19
|
-
keywords?: string[];
|
|
20
|
-
}
|
|
21
16
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AACnD,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAAG,SAAS,CAAC;AAC7D,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzE,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,cAAc,CAAC,CAAC,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,CAAC;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;CACnD
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AACnD,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAAG,SAAS,CAAC;AAC7D,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzE,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,cAAc,CAAC,CAAC,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,CAAC;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;CACnD"}
|
package/package.json
CHANGED
|
@@ -1,27 +1,15 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { StyleSheet, Text } from "react-native";
|
|
3
|
+
import type { TextChildren } from "../../../types/element.types";
|
|
3
4
|
import { useCombobox } from "../context";
|
|
4
5
|
|
|
5
6
|
export interface ComboboxEmptyProps {
|
|
6
|
-
children?:
|
|
7
|
-
render: () => React.ReactNode;
|
|
7
|
+
children?: TextChildren;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export function ComboboxEmpty(props: ComboboxEmptyProps) {
|
|
11
11
|
const combobox = useCombobox();
|
|
12
12
|
|
|
13
|
-
const hasVisibleOptions = combobox.options.some((option) =>
|
|
14
|
-
combobox.filter(option.value, combobox.searchQuery),
|
|
15
|
-
);
|
|
16
|
-
|
|
17
|
-
if (hasVisibleOptions) {
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
if (props.render) {
|
|
22
|
-
return <>{props.render()}</>;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
13
|
const composedStyles = StyleSheet.flatten([
|
|
26
14
|
combobox.styles.empty?.default,
|
|
27
15
|
combobox.styles.empty?.[combobox.state],
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import { Pressable, StyleSheet, Text } from "react-native";
|
|
3
3
|
import { useCombobox } from "../context";
|
|
4
4
|
import type { ComboboxOptionState, ComboboxState } from "../types";
|
|
@@ -26,9 +26,7 @@ const calculateState = (
|
|
|
26
26
|
return "default";
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
export function ComboboxOption(
|
|
30
|
-
props: ComboboxOptionProps,
|
|
31
|
-
): React.ReactElement | null {
|
|
29
|
+
export function ComboboxOption(props: ComboboxOptionProps) {
|
|
32
30
|
const [isHovered, setIsHovered] = useState(false);
|
|
33
31
|
const combobox = useCombobox();
|
|
34
32
|
const isSelected = combobox.value === props.value;
|
|
@@ -39,31 +37,14 @@ export function ComboboxOption(
|
|
|
39
37
|
combobox.styles?.option?.[optionState],
|
|
40
38
|
]);
|
|
41
39
|
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
combobox.setOptions((prev) => {
|
|
44
|
-
if (prev.find((option) => option.value === props.value)) {
|
|
45
|
-
return prev;
|
|
46
|
-
}
|
|
47
|
-
return [
|
|
48
|
-
...prev,
|
|
49
|
-
{
|
|
50
|
-
value: props.value,
|
|
51
|
-
label: props.label ?? props.children,
|
|
52
|
-
},
|
|
53
|
-
];
|
|
54
|
-
});
|
|
55
|
-
}, [props.value, props.label, props.children]);
|
|
56
|
-
|
|
57
|
-
if (!combobox.filter(props.value, combobox.searchQuery)) {
|
|
58
|
-
return null;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
40
|
const Component = typeof props.children === "string" ? Text : Pressable;
|
|
62
41
|
|
|
63
42
|
return (
|
|
64
43
|
<Component
|
|
65
44
|
onPress={() => {
|
|
66
|
-
const label =
|
|
45
|
+
const label =
|
|
46
|
+
props.label ??
|
|
47
|
+
(typeof props.children === "string" ? props.children : props.value);
|
|
67
48
|
combobox.onChange?.(label);
|
|
68
49
|
combobox.setIsOpen(false);
|
|
69
50
|
}}
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
type LayoutPosition,
|
|
13
13
|
} from "../../../hooks";
|
|
14
14
|
import { ComboboxContext } from "../context";
|
|
15
|
-
import type {
|
|
15
|
+
import type { ComboboxState } from "../types";
|
|
16
16
|
import { ComboboxVariants } from "../variants";
|
|
17
17
|
|
|
18
18
|
export interface ComboboxRootProps {
|
|
@@ -21,13 +21,8 @@ export interface ComboboxRootProps {
|
|
|
21
21
|
value?: string;
|
|
22
22
|
onChange?: (value: string) => void;
|
|
23
23
|
|
|
24
|
-
/** Called when the
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
/** Custom filter function. Receives option value and search query, returns whether to show the option.
|
|
28
|
-
* Default: case-insensitive match against option label/keywords.
|
|
29
|
-
* For async/remote filtering, pass `() => true` to show all options. */
|
|
30
|
-
filter?: (value: string, query: string) => boolean;
|
|
24
|
+
/** Called when the text input value changes. Use this to filter options on the consumer side. */
|
|
25
|
+
onInputChange?: (text: string) => void;
|
|
31
26
|
|
|
32
27
|
isDisabled?: boolean;
|
|
33
28
|
|
|
@@ -42,27 +37,6 @@ const calculateState = (props: ComboboxRootProps): ComboboxState => {
|
|
|
42
37
|
return "default";
|
|
43
38
|
};
|
|
44
39
|
|
|
45
|
-
const defaultFilter = (
|
|
46
|
-
value: string,
|
|
47
|
-
query: string,
|
|
48
|
-
options: Array<ComboboxOption>,
|
|
49
|
-
): boolean => {
|
|
50
|
-
if (!query) return true;
|
|
51
|
-
const lowerQuery = query.toLowerCase();
|
|
52
|
-
const option = options.find((o) => o.value === value);
|
|
53
|
-
if (!option) return true;
|
|
54
|
-
|
|
55
|
-
if (option.keywords) {
|
|
56
|
-
return option.keywords.some((kw) => kw.toLowerCase().includes(lowerQuery));
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
if (typeof option.label === "string") {
|
|
60
|
-
return option.label.toLowerCase().includes(lowerQuery);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
return true;
|
|
64
|
-
};
|
|
65
|
-
|
|
66
40
|
export function ComboboxRoot(props: ComboboxRootProps) {
|
|
67
41
|
const variantStyles = ComboboxVariants[props.variant ?? "default"]();
|
|
68
42
|
|
|
@@ -71,37 +45,22 @@ export function ComboboxRoot(props: ComboboxRootProps) {
|
|
|
71
45
|
useState<LayoutRectangle>(DEFAULT_LAYOUT);
|
|
72
46
|
const [triggerPosition, setTriggerPosition] =
|
|
73
47
|
useState<LayoutPosition>(DEFAULT_POSITION);
|
|
74
|
-
const [
|
|
75
|
-
const [searchQuery, setSearchQueryInternal] = useState("");
|
|
48
|
+
const [inputValue, setInputValueInternal] = useState("");
|
|
76
49
|
|
|
77
|
-
const
|
|
78
|
-
|
|
50
|
+
const onInputChangeRef = useRef(props.onInputChange);
|
|
51
|
+
onInputChangeRef.current = props.onInputChange;
|
|
79
52
|
|
|
80
|
-
const
|
|
53
|
+
const setInputValue: React.Dispatch<React.SetStateAction<string>> =
|
|
81
54
|
useCallback((action) => {
|
|
82
|
-
|
|
55
|
+
setInputValueInternal((prev) => {
|
|
83
56
|
const next = typeof action === "function" ? action(prev) : action;
|
|
84
57
|
if (next !== prev) {
|
|
85
|
-
|
|
58
|
+
onInputChangeRef.current?.(next);
|
|
86
59
|
}
|
|
87
60
|
return next;
|
|
88
61
|
});
|
|
89
62
|
}, []);
|
|
90
63
|
|
|
91
|
-
const filterRef = useRef(props.filter);
|
|
92
|
-
filterRef.current = props.filter;
|
|
93
|
-
|
|
94
|
-
const optionsRef = useRef(options);
|
|
95
|
-
optionsRef.current = options;
|
|
96
|
-
|
|
97
|
-
const filter = useCallback(
|
|
98
|
-
(value: string, query: string) =>
|
|
99
|
-
filterRef.current
|
|
100
|
-
? filterRef.current(value, query)
|
|
101
|
-
: defaultFilter(value, query, optionsRef.current),
|
|
102
|
-
[],
|
|
103
|
-
);
|
|
104
|
-
|
|
105
64
|
const state = calculateState(props);
|
|
106
65
|
const composedStyles = StyleSheet.flatten([
|
|
107
66
|
variantStyles?.root?.default,
|
|
@@ -119,11 +78,8 @@ export function ComboboxRoot(props: ComboboxRootProps) {
|
|
|
119
78
|
setTriggerPosition,
|
|
120
79
|
contentLayout,
|
|
121
80
|
setContentLayout,
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
searchQuery,
|
|
125
|
-
setSearchQuery,
|
|
126
|
-
filter,
|
|
81
|
+
inputValue,
|
|
82
|
+
setInputValue,
|
|
127
83
|
state,
|
|
128
84
|
isDisabled: props.isDisabled ?? false,
|
|
129
85
|
styles: variantStyles,
|
|
@@ -134,10 +90,8 @@ export function ComboboxRoot(props: ComboboxRootProps) {
|
|
|
134
90
|
isOpen,
|
|
135
91
|
triggerPosition,
|
|
136
92
|
contentLayout,
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
setSearchQuery,
|
|
140
|
-
filter,
|
|
93
|
+
inputValue,
|
|
94
|
+
setInputValue,
|
|
141
95
|
state,
|
|
142
96
|
props.isDisabled,
|
|
143
97
|
variantStyles,
|
|
@@ -26,12 +26,12 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
|
|
|
26
26
|
const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
|
|
27
27
|
|
|
28
28
|
const displayValue = combobox.isOpen
|
|
29
|
-
? combobox.
|
|
29
|
+
? combobox.inputValue
|
|
30
30
|
: combobox.value ?? "";
|
|
31
31
|
|
|
32
32
|
const open = () => {
|
|
33
33
|
if (combobox.isDisabled) return;
|
|
34
|
-
combobox.
|
|
34
|
+
combobox.setInputValue(combobox.value ?? "");
|
|
35
35
|
requestAnimationFrame(() => {
|
|
36
36
|
measureLayoutPosition(triggerRef.current, (layout) => {
|
|
37
37
|
combobox.setTriggerPosition(layout);
|
|
@@ -75,7 +75,7 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
|
|
|
75
75
|
onChange={undefined}
|
|
76
76
|
onChangeText={(text) => {
|
|
77
77
|
if (combobox.isDisabled) return;
|
|
78
|
-
combobox.
|
|
78
|
+
combobox.setInputValue(text);
|
|
79
79
|
if (!combobox.isOpen) {
|
|
80
80
|
open();
|
|
81
81
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createContext, type Dispatch, useContext } from "react";
|
|
2
2
|
import type { LayoutRectangle } from "react-native";
|
|
3
3
|
import type { LayoutPosition } from "../../hooks";
|
|
4
|
-
import type {
|
|
4
|
+
import type { ComboboxState, ComboboxStyles } from "./types";
|
|
5
5
|
|
|
6
6
|
export interface ComboboxContext {
|
|
7
7
|
value?: string;
|
|
@@ -13,13 +13,9 @@ export interface ComboboxContext {
|
|
|
13
13
|
setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
|
|
14
14
|
contentLayout: LayoutRectangle;
|
|
15
15
|
setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
|
|
16
|
-
options: Array<ComboboxOption>;
|
|
17
|
-
setOptions: Dispatch<React.SetStateAction<Array<ComboboxOption>>>;
|
|
18
16
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
filter: (value: string, query: string) => boolean;
|
|
17
|
+
inputValue: string;
|
|
18
|
+
setInputValue: Dispatch<React.SetStateAction<string>>;
|
|
23
19
|
|
|
24
20
|
isDisabled: boolean;
|
|
25
21
|
|
|
@@ -15,9 +15,3 @@ export interface ComboboxStyles {
|
|
|
15
15
|
option?: Partial<Record<ComboboxOptionState, TextStyle>>;
|
|
16
16
|
empty?: Partial<Record<ComboboxState, TextStyle>>;
|
|
17
17
|
}
|
|
18
|
-
|
|
19
|
-
export interface ComboboxOption {
|
|
20
|
-
value: string;
|
|
21
|
-
label: React.ReactNode;
|
|
22
|
-
keywords?: string[];
|
|
23
|
-
}
|