@korsolutions/ui 0.0.93 → 0.0.95
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/module/components/combobox/components/combobox-content.js +2 -0
- package/dist/module/components/combobox/components/combobox-content.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-list.js +8 -15
- package/dist/module/components/combobox/components/combobox-list.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-option.js +7 -2
- package/dist/module/components/combobox/components/combobox-option.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-overlay.js +9 -3
- package/dist/module/components/combobox/components/combobox-overlay.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-root.js +18 -71
- package/dist/module/components/combobox/components/combobox-root.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-trigger.js +11 -33
- package/dist/module/components/combobox/components/combobox-trigger.js.map +1 -1
- package/dist/module/components/combobox/context.js.map +1 -1
- package/dist/module/components/focus/focus-prevent.js +10 -0
- package/dist/module/components/focus/focus-prevent.js.map +1 -0
- package/dist/module/components/select/components/select-content.js +2 -3
- package/dist/module/components/select/components/select-content.js.map +1 -1
- package/dist/module/components/select/components/select-option.js +2 -2
- package/dist/module/components/select/components/select-option.js.map +1 -1
- package/dist/module/components/select/components/select-overlay.js +2 -3
- package/dist/module/components/select/components/select-overlay.js.map +1 -1
- package/dist/module/components/select/components/select-root.js +3 -3
- package/dist/module/components/select/components/select-root.js.map +1 -1
- package/dist/module/components/select/components/select-trigger.js +3 -4
- package/dist/module/components/select/components/select-trigger.js.map +1 -1
- package/dist/module/components/select/variants/default.js +0 -5
- package/dist/module/components/select/variants/default.js.map +1 -1
- package/dist/module/utils/calculate-styles.js +6 -0
- package/dist/module/utils/calculate-styles.js.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-content.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-list.d.ts +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-list.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-option.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-overlay.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-root.d.ts +8 -25
- package/dist/typescript/src/components/combobox/components/combobox-root.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-trigger.d.ts +2 -1
- package/dist/typescript/src/components/combobox/components/combobox-trigger.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/context.d.ts +9 -8
- package/dist/typescript/src/components/combobox/context.d.ts.map +1 -1
- package/dist/typescript/src/components/focus/focus-prevent.d.ts +6 -0
- package/dist/typescript/src/components/focus/focus-prevent.d.ts.map +1 -0
- package/dist/typescript/src/components/select/components/select-content.d.ts.map +1 -1
- package/dist/typescript/src/components/select/components/select-option.d.ts.map +1 -1
- package/dist/typescript/src/components/select/components/select-overlay.d.ts.map +1 -1
- package/dist/typescript/src/components/select/components/select-root.d.ts.map +1 -1
- package/dist/typescript/src/components/select/components/select-trigger.d.ts +2 -2
- package/dist/typescript/src/components/select/components/select-trigger.d.ts.map +1 -1
- package/dist/typescript/src/components/select/types.d.ts +2 -2
- package/dist/typescript/src/components/select/types.d.ts.map +1 -1
- package/dist/typescript/src/components/select/variants/default.d.ts.map +1 -1
- package/dist/typescript/src/utils/calculate-styles.d.ts +2 -0
- package/dist/typescript/src/utils/calculate-styles.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/combobox/components/combobox-content.tsx +2 -0
- package/src/components/combobox/components/combobox-list.tsx +9 -17
- package/src/components/combobox/components/combobox-option.tsx +7 -2
- package/src/components/combobox/components/combobox-overlay.tsx +10 -3
- package/src/components/combobox/components/combobox-root.tsx +33 -117
- package/src/components/combobox/components/combobox-trigger.tsx +13 -38
- package/src/components/combobox/context.ts +12 -9
- package/src/components/focus/focus-prevent.ts +8 -0
- package/src/components/select/components/select-content.tsx +6 -7
- package/src/components/select/components/select-option.tsx +5 -4
- package/src/components/select/components/select-overlay.tsx +6 -7
- package/src/components/select/components/select-root.tsx +14 -3
- package/src/components/select/components/select-trigger.tsx +12 -12
- package/src/components/select/types.ts +2 -2
- package/src/components/select/variants/default.tsx +0 -5
- package/src/utils/calculate-styles.ts +16 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { ScrollView, StyleSheet } from "react-native";
|
|
5
5
|
import { useRelativePosition } from "../../../hooks/use-relative-position.js";
|
|
6
|
+
import { focusPreventProps } from "../../focus/focus-prevent.js";
|
|
6
7
|
import { useCombobox } from "../context.js";
|
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
9
|
export function ComboboxContent(props) {
|
|
@@ -26,6 +27,7 @@ export function ComboboxContent(props) {
|
|
|
26
27
|
},
|
|
27
28
|
keyboardShouldPersistTaps: "handled",
|
|
28
29
|
nestedScrollEnabled: true,
|
|
30
|
+
...focusPreventProps,
|
|
29
31
|
children: props.children
|
|
30
32
|
});
|
|
31
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","ScrollView","StyleSheet","useRelativePosition","useCombobox","jsx","_jsx","ComboboxContent","props","combobox","composedStyles","flatten","styles","content","default","state","style","flatStyles","positionStyle","align","triggerPosition","contentLayout","alignOffset","preferredSide","sideOffset","width","onLayout","e","setContentLayout","nativeEvent","layout","keyboardShouldPersistTaps","nestedScrollEnabled","children"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-content.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,UAAU,QAAwC,cAAc;AACrF,SAASC,mBAAmB,QAAQ,yCAAsC;AAC1E,SAASC,WAAW,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOzC,OAAO,SAASC,eAAeA,CAACC,KAA2B,EAAE;EAC3D,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;EAC9B,MAAMM,cAAc,
|
|
1
|
+
{"version":3,"names":["React","ScrollView","StyleSheet","useRelativePosition","focusPreventProps","useCombobox","jsx","_jsx","ComboboxContent","props","combobox","composedStyles","flatten","styles","content","default","state","style","flatStyles","positionStyle","align","triggerPosition","contentLayout","alignOffset","preferredSide","sideOffset","width","onLayout","e","setContentLayout","nativeEvent","layout","keyboardShouldPersistTaps","nestedScrollEnabled","children"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-content.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,UAAU,QAAwC,cAAc;AACrF,SAASC,mBAAmB,QAAQ,yCAAsC;AAC1E,SAASC,iBAAiB,QAAQ,8BAA2B;AAC7D,SAASC,WAAW,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOzC,OAAO,SAASC,eAAeA,CAACC,KAA2B,EAAE;EAC3D,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;EAC9B,MAAMM,cAAc,GAAGT,UAAU,CAACU,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,MAAMC,UAAU,GAAGhB,UAAU,CAACU,OAAO,CAACD,cAAc,CAAC;EAErD,MAAMQ,aAAa,GAAGhB,mBAAmB,CAAC;IACxCiB,KAAK,EAAE,OAAO;IACdC,eAAe,EAAEX,QAAQ,CAACW,eAAe;IACzCC,aAAa,EAAEZ,QAAQ,CAACY,aAAa;IACrCC,WAAW,EAAE,CAAC;IACdC,aAAa,EAAE,QAAQ;IACvBC,UAAU,EAAE;EACd,CAAC,CAAC;EAEF,oBACElB,IAAA,CAACN,UAAU;IACTgB,KAAK,EAAE,CAACE,aAAa,EAAED,UAAU,EAAE;MAAEQ,KAAK,EAAEhB,QAAQ,CAACW,eAAe,CAACK;IAAM,CAAC,CAAE;IAC9EC,QAAQ,EAAGC,CAAC,IAAK;MACflB,QAAQ,CAACmB,gBAAgB,CAACD,CAAC,CAACE,WAAW,CAACC,MAAM,CAAC;IACjD,CAAE;IACFC,yBAAyB,EAAC,SAAS;IACnCC,mBAAmB;IAAA,GACf7B,iBAAiB;IAAA8B,QAAA,EAEpBzB,KAAK,CAACyB;EAAQ,CACL,CAAC;AAEjB","ignoreList":[]}
|
|
@@ -1,24 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
+
import { List } from "../../list/index.js";
|
|
4
5
|
import { useCombobox } from "../context.js";
|
|
5
|
-
import {
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
7
|
export function ComboboxList(props) {
|
|
7
8
|
const combobox = useCombobox();
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
return /*#__PURE__*/_jsx(_Fragment, {
|
|
16
|
-
children: items.map((item, index) => /*#__PURE__*/_jsxs(React.Fragment, {
|
|
17
|
-
children: [props.renderItem({
|
|
18
|
-
item,
|
|
19
|
-
index
|
|
20
|
-
}), index < items.length - 1 && props.renderSeparator?.()]
|
|
21
|
-
}, keyExtractor(item, index)))
|
|
9
|
+
return /*#__PURE__*/_jsx(List, {
|
|
10
|
+
data: combobox.items,
|
|
11
|
+
keyExtractor: props.keyExtractor,
|
|
12
|
+
renderItem: props.renderItem,
|
|
13
|
+
renderEmpty: props.renderEmpty,
|
|
14
|
+
renderSeparator: props.renderSeparator
|
|
22
15
|
});
|
|
23
16
|
}
|
|
24
17
|
//# sourceMappingURL=combobox-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","List","useCombobox","jsx","_jsx","ComboboxList","props","combobox","data","items","keyExtractor","renderItem","renderEmpty","renderSeparator"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-list.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,qBAAY;AACjC,SAASC,WAAW,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AASzC,OAAO,SAASC,YAAYA,CAAIC,KAA2B,EAAE;EAC3D,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;EAE9B,oBACEE,IAAA,CAACH,IAAI;IACHO,IAAI,EAAED,QAAQ,CAACE,KAAa;IAC5BC,YAAY,EAAEJ,KAAK,CAACI,YAAa;IACjCC,UAAU,EAAEL,KAAK,CAACK,UAAW;IAC7BC,WAAW,EAAEN,KAAK,CAACM,WAAY;IAC/BC,eAAe,EAAEP,KAAK,CAACO;EAAgB,CACxC,CAAC;AAEN","ignoreList":[]}
|
|
@@ -20,8 +20,13 @@ export function ComboboxOption(props) {
|
|
|
20
20
|
const optionStyles = combobox.styles?.option;
|
|
21
21
|
const composedStyles = StyleSheet.flatten([optionStyles?.default, optionStyles?.[optionState]]);
|
|
22
22
|
const handlePress = () => {
|
|
23
|
-
combobox.
|
|
24
|
-
combobox.
|
|
23
|
+
const itemLabel = combobox.getItemLabel(props.item);
|
|
24
|
+
combobox.onChange(props.item);
|
|
25
|
+
combobox.onInputChange?.(itemLabel);
|
|
26
|
+
combobox.inputRef.current?.blur();
|
|
27
|
+
requestAnimationFrame(() => {
|
|
28
|
+
combobox.setIsOpen(false);
|
|
29
|
+
});
|
|
25
30
|
};
|
|
26
31
|
return /*#__PURE__*/_jsx(Pressable, {
|
|
27
32
|
onPress: handlePress,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","Pressable","StyleSheet","useCombobox","jsx","_jsx","calculateState","comboboxState","hovered","selected","ComboboxOption","props","isHovered","setIsHovered","combobox","itemValue","getItemValue","item","selectedValue","value","undefined","isSelected","optionState","state","optionStyles","styles","option","composedStyles","flatten","default","handlePress","onChange","setIsOpen","onPress","onPointerEnter","onPointerLeave","style","children"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-option.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,EAAEC,UAAU,QAAwC,cAAc;AAEpF,SAASC,WAAW,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQzC,MAAMC,cAAc,GAAGA,CACrBC,aAA4B,EAC5BC,OAAgB,EAChBC,QAAiB,KACO;EACxB,IAAIF,aAAa,KAAK,UAAU,EAAE,OAAO,UAAU;EACnD,IAAIE,QAAQ,EAAE,OAAO,UAAU;EAC/B,IAAID,OAAO,EAAE,OAAO,SAAS;EAC7B,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASE,cAAcA,CAAIC,KAA6B,EAAE;EAC/D,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGb,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMc,QAAQ,GAAGX,WAAW,CAAC,CAAC;EAE9B,MAAMY,SAAS,GAAGD,QAAQ,CAACE,YAAY,CAACL,KAAK,CAACM,IAAI,CAAC;EACnD,MAAMC,aAAa,GAAGJ,QAAQ,CAACK,KAAK,IAAI,IAAI,GAAGL,QAAQ,CAACE,YAAY,CAACF,QAAQ,CAACK,KAAK,CAAC,GAAGC,SAAS;EAChG,MAAMC,UAAU,GAAGN,SAAS,KAAKG,aAAa;EAE9C,MAAMI,WAAW,GAAGhB,cAAc,CAACQ,QAAQ,CAACS,KAAK,EAAEX,SAAS,EAAES,UAAU,CAAC;EACzE,MAAMG,YAAY,GAAGV,QAAQ,CAACW,MAAM,EAAEC,MAAM;EAC5C,MAAMC,cAAc,GAAGzB,UAAU,CAAC0B,OAAO,CAAC,CAACJ,YAAY,EAAEK,OAAO,EAAEL,YAAY,GAAGF,WAAW,CAAC,CAAC,CAAC;EAE/F,MAAMQ,WAAW,GAAGA,CAAA,KAAM;
|
|
1
|
+
{"version":3,"names":["React","useState","Pressable","StyleSheet","useCombobox","jsx","_jsx","calculateState","comboboxState","hovered","selected","ComboboxOption","props","isHovered","setIsHovered","combobox","itemValue","getItemValue","item","selectedValue","value","undefined","isSelected","optionState","state","optionStyles","styles","option","composedStyles","flatten","default","handlePress","itemLabel","getItemLabel","onChange","onInputChange","inputRef","current","blur","requestAnimationFrame","setIsOpen","onPress","onPointerEnter","onPointerLeave","style","children"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-option.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,EAAEC,UAAU,QAAwC,cAAc;AAEpF,SAASC,WAAW,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQzC,MAAMC,cAAc,GAAGA,CACrBC,aAA4B,EAC5BC,OAAgB,EAChBC,QAAiB,KACO;EACxB,IAAIF,aAAa,KAAK,UAAU,EAAE,OAAO,UAAU;EACnD,IAAIE,QAAQ,EAAE,OAAO,UAAU;EAC/B,IAAID,OAAO,EAAE,OAAO,SAAS;EAC7B,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASE,cAAcA,CAAIC,KAA6B,EAAE;EAC/D,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGb,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMc,QAAQ,GAAGX,WAAW,CAAC,CAAC;EAE9B,MAAMY,SAAS,GAAGD,QAAQ,CAACE,YAAY,CAACL,KAAK,CAACM,IAAI,CAAC;EACnD,MAAMC,aAAa,GAAGJ,QAAQ,CAACK,KAAK,IAAI,IAAI,GAAGL,QAAQ,CAACE,YAAY,CAACF,QAAQ,CAACK,KAAK,CAAC,GAAGC,SAAS;EAChG,MAAMC,UAAU,GAAGN,SAAS,KAAKG,aAAa;EAE9C,MAAMI,WAAW,GAAGhB,cAAc,CAACQ,QAAQ,CAACS,KAAK,EAAEX,SAAS,EAAES,UAAU,CAAC;EACzE,MAAMG,YAAY,GAAGV,QAAQ,CAACW,MAAM,EAAEC,MAAM;EAC5C,MAAMC,cAAc,GAAGzB,UAAU,CAAC0B,OAAO,CAAC,CAACJ,YAAY,EAAEK,OAAO,EAAEL,YAAY,GAAGF,WAAW,CAAC,CAAC,CAAC;EAE/F,MAAMQ,WAAW,GAAGA,CAAA,KAAM;IACxB,MAAMC,SAAS,GAAGjB,QAAQ,CAACkB,YAAY,CAACrB,KAAK,CAACM,IAAI,CAAC;IACnDH,QAAQ,CAACmB,QAAQ,CAACtB,KAAK,CAACM,IAAI,CAAC;IAC7BH,QAAQ,CAACoB,aAAa,GAAGH,SAAS,CAAC;IACnCjB,QAAQ,CAACqB,QAAQ,CAACC,OAAO,EAAEC,IAAI,CAAC,CAAC;IACjCC,qBAAqB,CAAC,MAAM;MAC1BxB,QAAQ,CAACyB,SAAS,CAAC,KAAK,CAAC;IAC3B,CAAC,CAAC;EACJ,CAAC;EAED,oBACElC,IAAA,CAACJ,SAAS;IACRuC,OAAO,EAAEV,WAAY;IACrBW,cAAc,EAAEA,CAAA,KAAM5B,YAAY,CAAC,IAAI,CAAE;IACzC6B,cAAc,EAAEA,CAAA,KAAM7B,YAAY,CAAC,KAAK,CAAE;IAC1C8B,KAAK,EAAEhB,cAAuC;IAAAiB,QAAA,EAE7CjC,KAAK,CAACiC;EAAQ,CACN,CAAC;AAEhB","ignoreList":[]}
|
|
@@ -2,17 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { Pressable, StyleSheet } from "react-native";
|
|
5
|
+
import { focusPreventProps } from "../../focus/focus-prevent.js";
|
|
5
6
|
import { useCombobox } from "../context.js";
|
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
8
|
export function ComboboxOverlay(props) {
|
|
8
9
|
const combobox = useCombobox();
|
|
10
|
+
const onPress = () => {
|
|
11
|
+
combobox.inputRef.current?.blur();
|
|
12
|
+
requestAnimationFrame(() => {
|
|
13
|
+
combobox.setIsOpen(false);
|
|
14
|
+
});
|
|
15
|
+
};
|
|
9
16
|
const composedStyles = StyleSheet.flatten([combobox.styles?.overlay?.default, combobox.styles?.overlay?.[combobox.state], props.style]);
|
|
10
17
|
return /*#__PURE__*/_jsx(Pressable, {
|
|
11
|
-
onPress:
|
|
12
|
-
combobox.setIsOpen(false);
|
|
13
|
-
},
|
|
18
|
+
onPress: onPress,
|
|
14
19
|
pointerEvents: "auto",
|
|
15
20
|
style: [StyleSheet.absoluteFill, composedStyles],
|
|
21
|
+
...focusPreventProps,
|
|
16
22
|
children: props.children
|
|
17
23
|
});
|
|
18
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Pressable","StyleSheet","useCombobox","jsx","_jsx","ComboboxOverlay","props","combobox","composedStyles","flatten","styles","overlay","default","state","style","
|
|
1
|
+
{"version":3,"names":["React","Pressable","StyleSheet","focusPreventProps","useCombobox","jsx","_jsx","ComboboxOverlay","props","combobox","onPress","inputRef","current","blur","requestAnimationFrame","setIsOpen","composedStyles","flatten","styles","overlay","default","state","style","pointerEvents","absoluteFill","children"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-overlay.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAkBC,UAAU,QAAwB,cAAc;AACpF,SAASC,iBAAiB,QAAQ,8BAA2B;AAC7D,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,OAAO,GAAGA,CAAA,KAAM;IACpBD,QAAQ,CAACE,QAAQ,CAACC,OAAO,EAAEC,IAAI,CAAC,CAAC;IACjCC,qBAAqB,CAAC,MAAM;MAC1BL,QAAQ,CAACM,SAAS,CAAC,KAAK,CAAC;IAC3B,CAAC,CAAC;EACJ,CAAC;EAED,MAAMC,cAAc,GAAGd,UAAU,CAACe,OAAO,CAAC,CACxCR,QAAQ,CAACS,MAAM,EAAEC,OAAO,EAAEC,OAAO,EACjCX,QAAQ,CAACS,MAAM,EAAEC,OAAO,GAAGV,QAAQ,CAACY,KAAK,CAAC,EAC1Cb,KAAK,CAACc,KAAK,CACZ,CAAC;EAEF,oBACEhB,IAAA,CAACL,SAAS;IACRS,OAAO,EAAEA,OAAQ;IACjBa,aAAa,EAAC,MAAM;IACpBD,KAAK,EAAE,CAACpB,UAAU,CAACsB,YAAY,EAAER,cAAc,CAAE;IAAA,GAC7Cb,iBAAiB;IAAAsB,QAAA,EAEpBjB,KAAK,CAACiB;EAAQ,CACN,CAAC;AAEhB","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, {
|
|
3
|
+
import React, { useMemo, useRef, useState } from "react";
|
|
4
4
|
import { StyleSheet, View } from "react-native";
|
|
5
5
|
import { DEFAULT_LAYOUT, DEFAULT_POSITION } from "../../../hooks/index.js";
|
|
6
6
|
import { useComponentConfig } from "../../../themes/provider.js";
|
|
@@ -8,98 +8,45 @@ import { mergeStyles } from "../../../utils/calculate-styles.js";
|
|
|
8
8
|
import { ComboboxContext } from "../context.js";
|
|
9
9
|
import { ComboboxVariants } from "../variants/index.js";
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
-
const defaultGetItemValue = item => {
|
|
12
|
-
if (typeof item === "string") return item;
|
|
13
|
-
if (typeof item === "object" && item !== null && "value" in item) {
|
|
14
|
-
return String(item.value);
|
|
15
|
-
}
|
|
16
|
-
return String(item);
|
|
17
|
-
};
|
|
18
|
-
const defaultGetItemLabel = item => {
|
|
19
|
-
if (typeof item === "string") return item;
|
|
20
|
-
if (typeof item === "object" && item !== null && "label" in item) {
|
|
21
|
-
return String(item.label);
|
|
22
|
-
}
|
|
23
|
-
return defaultGetItemValue(item);
|
|
24
|
-
};
|
|
25
11
|
const calculateState = props => {
|
|
26
12
|
if (props.isDisabled) return "disabled";
|
|
27
13
|
return "default";
|
|
28
14
|
};
|
|
29
|
-
export function ComboboxRoot(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
getItemLabel = defaultGetItemLabel,
|
|
36
|
-
filter,
|
|
37
|
-
onInputChange,
|
|
38
|
-
variant = "default",
|
|
39
|
-
size = "md",
|
|
40
|
-
isDisabled = false
|
|
41
|
-
} = props;
|
|
15
|
+
export function ComboboxRoot({
|
|
16
|
+
variant = "default",
|
|
17
|
+
size = "md",
|
|
18
|
+
isDisabled = false,
|
|
19
|
+
...props
|
|
20
|
+
}) {
|
|
42
21
|
const variantStyles = ComboboxVariants[variant](size);
|
|
43
22
|
const globalStyles = useComponentConfig("combobox");
|
|
44
23
|
const mergedStyles = mergeStyles(variantStyles, globalStyles?.styles);
|
|
45
24
|
const [isOpen, setIsOpen] = useState(false);
|
|
46
25
|
const [contentLayout, setContentLayout] = useState(DEFAULT_LAYOUT);
|
|
47
26
|
const [triggerPosition, setTriggerPosition] = useState(DEFAULT_POSITION);
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
// Reset input value when closing
|
|
51
|
-
const prevOpen = useRef(isOpen);
|
|
52
|
-
useEffect(() => {
|
|
53
|
-
if (prevOpen.current && !isOpen) {
|
|
54
|
-
setInputValue("");
|
|
55
|
-
}
|
|
56
|
-
prevOpen.current = isOpen;
|
|
57
|
-
}, [isOpen]);
|
|
58
|
-
|
|
59
|
-
// Notify consumer when input value changes
|
|
60
|
-
const onInputChangeRef = useRef(onInputChange);
|
|
61
|
-
onInputChangeRef.current = onInputChange;
|
|
62
|
-
const isFirstRender = useRef(true);
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
if (isFirstRender.current) {
|
|
65
|
-
isFirstRender.current = false;
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
onInputChangeRef.current?.(inputValue);
|
|
69
|
-
}, [inputValue]);
|
|
70
|
-
const filteredItems = useMemo(() => {
|
|
71
|
-
if (filter === null) return items;
|
|
72
|
-
if (!inputValue) return items;
|
|
73
|
-
const filterFn = filter ?? ((item, query) => {
|
|
74
|
-
const label = getItemLabel(item);
|
|
75
|
-
return label.toLowerCase().includes(query.toLowerCase());
|
|
76
|
-
});
|
|
77
|
-
return items.filter(item => filterFn(item, inputValue));
|
|
78
|
-
}, [items, inputValue, filter, getItemLabel]);
|
|
27
|
+
const inputRef = useRef(null);
|
|
79
28
|
const state = calculateState(props);
|
|
80
29
|
const composedStyles = StyleSheet.flatten([mergedStyles?.root?.default, mergedStyles?.root?.[state], props.style]);
|
|
81
|
-
const handleChange = useCallback(item => {
|
|
82
|
-
onChange?.(item);
|
|
83
|
-
}, [onChange]);
|
|
84
30
|
const contextValue = useMemo(() => ({
|
|
85
|
-
items,
|
|
86
|
-
filteredItems,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
31
|
+
items: props.items,
|
|
32
|
+
filteredItems: props.items,
|
|
33
|
+
value: props.value,
|
|
34
|
+
onChange: props.onChange,
|
|
35
|
+
inputValue: props.inputValue,
|
|
36
|
+
onInputChange: props.onInputChange,
|
|
37
|
+
inputRef,
|
|
38
|
+
getItemValue: props.getItemValue,
|
|
39
|
+
getItemLabel: props.getItemLabel,
|
|
91
40
|
isOpen,
|
|
92
41
|
setIsOpen,
|
|
93
42
|
triggerPosition,
|
|
94
43
|
setTriggerPosition,
|
|
95
44
|
contentLayout,
|
|
96
45
|
setContentLayout,
|
|
97
|
-
inputValue,
|
|
98
|
-
setInputValue,
|
|
99
46
|
state,
|
|
100
47
|
isDisabled,
|
|
101
48
|
styles: mergedStyles
|
|
102
|
-
}), [items,
|
|
49
|
+
}), [props.items, props.value, props.onChange, props.inputValue, props.onInputChange, props.getItemValue, props.getItemLabel, isOpen, triggerPosition, contentLayout, state, isDisabled, mergedStyles]);
|
|
103
50
|
return /*#__PURE__*/_jsx(ComboboxContext.Provider, {
|
|
104
51
|
value: contextValue,
|
|
105
52
|
children: /*#__PURE__*/_jsx(View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useMemo","useRef","useState","StyleSheet","View","DEFAULT_LAYOUT","DEFAULT_POSITION","useComponentConfig","mergeStyles","ComboboxContext","ComboboxVariants","jsx","_jsx","calculateState","props","isDisabled","ComboboxRoot","variant","size","variantStyles","globalStyles","mergedStyles","styles","isOpen","setIsOpen","contentLayout","setContentLayout","triggerPosition","setTriggerPosition","inputRef","state","composedStyles","flatten","root","default","style","contextValue","items","filteredItems","value","onChange","inputValue","onInputChange","getItemValue","getItemLabel","Provider","children"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-root.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React
|
|
3
|
+
import React from "react";
|
|
4
4
|
import { StyleSheet, TextInput } from "react-native";
|
|
5
|
-
import { setInnerInputValue } from "../../../utils/input-utils.js";
|
|
6
5
|
import { measureLayoutPosition } from "../../../utils/normalize-layout.js";
|
|
7
6
|
import { useCombobox } from "../context.js";
|
|
8
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -16,42 +15,20 @@ export function ComboboxTrigger({
|
|
|
16
15
|
...props
|
|
17
16
|
}) {
|
|
18
17
|
const combobox = useCombobox();
|
|
19
|
-
const triggerRef = useRef(null);
|
|
20
18
|
const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
|
|
21
|
-
const selectedLabel = combobox.value != null ? combobox.getItemLabel(combobox.value) : "";
|
|
22
|
-
const displayValue = combobox.isOpen ? combobox.inputValue : selectedLabel;
|
|
23
19
|
const open = () => {
|
|
24
20
|
if (combobox.isDisabled) return;
|
|
25
|
-
combobox.setInputValue(selectedLabel);
|
|
26
21
|
requestAnimationFrame(() => {
|
|
27
|
-
measureLayoutPosition(
|
|
22
|
+
measureLayoutPosition(combobox.inputRef.current, layout => {
|
|
28
23
|
combobox.setTriggerPosition(layout);
|
|
29
24
|
combobox.setIsOpen(true);
|
|
30
25
|
});
|
|
31
26
|
});
|
|
32
27
|
};
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
if (!combobox.isOpen) open();
|
|
37
|
-
};
|
|
38
|
-
const onFocus = () => {
|
|
39
|
-
if (!combobox.isOpen) open();
|
|
40
|
-
};
|
|
41
|
-
const setInputValue = value => {
|
|
42
|
-
combobox.setInputValue(value);
|
|
43
|
-
if (triggerRef.current) {
|
|
44
|
-
setInnerInputValue(triggerRef.current, value);
|
|
45
|
-
}
|
|
28
|
+
const onFocus = e => {
|
|
29
|
+
props.onFocus?.(e);
|
|
30
|
+
open();
|
|
46
31
|
};
|
|
47
|
-
useEffect(() => {
|
|
48
|
-
setInputValue(displayValue);
|
|
49
|
-
}, [displayValue]);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
if (!combobox.isOpen) {
|
|
52
|
-
triggerRef.current?.blur();
|
|
53
|
-
}
|
|
54
|
-
}, [combobox.isOpen]);
|
|
55
32
|
const triggerStyles = combobox.styles?.trigger;
|
|
56
33
|
const composedProps = {
|
|
57
34
|
...triggerStyles?.default,
|
|
@@ -62,17 +39,18 @@ export function ComboboxTrigger({
|
|
|
62
39
|
const composedStyle = StyleSheet.flatten([triggerStyles?.default?.style, triggerStyles?.[triggerState]?.style, props.style]);
|
|
63
40
|
if (render) {
|
|
64
41
|
return render({
|
|
65
|
-
inputRef:
|
|
42
|
+
inputRef: combobox.inputRef,
|
|
66
43
|
open,
|
|
67
|
-
|
|
44
|
+
value: combobox.inputValue,
|
|
45
|
+
onChange: combobox.onInputChange
|
|
68
46
|
});
|
|
69
47
|
}
|
|
70
48
|
return /*#__PURE__*/_jsx(TextInput, {
|
|
71
49
|
...composedProps,
|
|
72
|
-
ref:
|
|
73
|
-
value:
|
|
50
|
+
ref: combobox.inputRef,
|
|
51
|
+
value: combobox.inputValue,
|
|
74
52
|
onChange: undefined,
|
|
75
|
-
onChangeText:
|
|
53
|
+
onChangeText: combobox.onInputChange,
|
|
76
54
|
onFocus: onFocus,
|
|
77
55
|
style: composedStyle
|
|
78
56
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","TextInput","measureLayoutPosition","useCombobox","jsx","_jsx","calculateState","isDisabled","isOpen","ComboboxTrigger","render","props","combobox","triggerState","open","requestAnimationFrame","inputRef","current","layout","setTriggerPosition","setIsOpen","onFocus","e","triggerStyles","styles","trigger","composedProps","default","style","flatten","composedStyle","value","inputValue","onChange","onInputChange","ref","undefined","onChangeText"],"sourceRoot":"../../../../../src","sources":["components/combobox/components/combobox-trigger.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,SAAS,QAA6B,cAAc;AAEzE,SAASC,qBAAqB,QAAQ,oCAAiC;AACvE,SAASC,WAAW,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgBzC,MAAMC,cAAc,GAAGA,CAACC,UAAmB,EAAEC,MAAe,KAA2B;EACrF,IAAID,UAAU,EAAE,OAAO,UAAU;EACjC,IAAIC,MAAM,EAAE,OAAO,SAAS;EAC5B,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASC,eAAeA,CAAC;EAAEC,MAAM;EAAE,GAAGC;AAA4B,CAAC,EAAE;EAC1E,MAAMC,QAAQ,GAAGT,WAAW,CAAC,CAAC;EAE9B,MAAMU,YAAY,GAAGP,cAAc,CAACM,QAAQ,CAACL,UAAU,EAAEK,QAAQ,CAACJ,MAAM,CAAC;EAEzE,MAAMM,IAAI,GAAGA,CAAA,KAAM;IACjB,IAAIF,QAAQ,CAACL,UAAU,EAAE;IACzBQ,qBAAqB,CAAC,MAAM;MAC1Bb,qBAAqB,CAACU,QAAQ,CAACI,QAAQ,CAACC,OAAO,EAAGC,MAAM,IAAK;QAC3DN,QAAQ,CAACO,kBAAkB,CAACD,MAAM,CAAC;QACnCN,QAAQ,CAACQ,SAAS,CAAC,IAAI,CAAC;MAC1B,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ,CAAC;EAED,MAAMC,OAAkC,GAAIC,CAAC,IAAK;IAChDX,KAAK,CAACU,OAAO,GAAGC,CAAC,CAAC;IAClBR,IAAI,CAAC,CAAC;EACR,CAAC;EAED,MAAMS,aAAa,GAAGX,QAAQ,CAACY,MAAM,EAAEC,OAAO;EAC9C,MAAMC,aAA6B,GAAG;IACpC,GAAGH,aAAa,EAAEI,OAAO;IACzB,GAAGJ,aAAa,GAAGV,YAAY,CAAC;IAChC,GAAGF,KAAK;IACRiB,KAAK,EAAE5B,UAAU,CAAC6B,OAAO,CAAC,CACxBN,aAAa,EAAEI,OAAO,EAAEC,KAAK,EAC7BL,aAAa,GAAGV,YAAY,CAAC,EAAEe,KAAK,CACrC;EACH,CAAC;EAED,MAAME,aAAa,GAAG9B,UAAU,CAAC6B,OAAO,CAAC,CACvCN,aAAa,EAAEI,OAAO,EAAEC,KAAK,EAC7BL,aAAa,GAAGV,YAAY,CAAC,EAAEe,KAAK,EACpCjB,KAAK,CAACiB,KAAK,CACZ,CAAC;EAEF,IAAIlB,MAAM,EAAE;IACV,OAAOA,MAAM,CAAC;MACZM,QAAQ,EAAEJ,QAAQ,CAACI,QAAQ;MAC3BF,IAAI;MACJiB,KAAK,EAAEnB,QAAQ,CAACoB,UAAU;MAC1BC,QAAQ,EAAErB,QAAQ,CAACsB;IACrB,CAAC,CAAC;EACJ;EAEA,oBACE7B,IAAA,CAACJ,SAAS;IAAA,GACJyB,aAAa;IACjBS,GAAG,EAAEvB,QAAQ,CAACI,QAAS;IACvBe,KAAK,EAAEnB,QAAQ,CAACoB,UAAW;IAC3BC,QAAQ,EAAEG,SAAU;IACpBC,YAAY,EAAEzB,QAAQ,CAACsB,aAAc;IACrCb,OAAO,EAAEA,OAAQ;IACjBO,KAAK,EAAEE;EAAc,CACtB,CAAC;AAEN","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;AAiChE,OAAO,MAAMC,eAAe,gBAAGF,aAAa,CAA8BG,SAAS,CAAC;AAEpF,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":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Platform","focusPreventProps","select","web","onMouseDown","e","preventDefault","default"],"sourceRoot":"../../../../src","sources":["components/focus/focus-prevent.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AAEvC,OAAO,MAAMC,iBAAiB,GAAGD,QAAQ,CAACE,MAAM,CAAC;EAC/CC,GAAG,EAAE;IACHC,WAAW,EAAGC,CAAmB,IAAKA,CAAC,CAACC,cAAc,CAAC;EACzD,CAAC;EACDC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { View } from "react-native";
|
|
4
|
+
import { StyleSheet, View } from "react-native";
|
|
5
5
|
import { useRelativePosition } from "../../../hooks/use-relative-position.js";
|
|
6
|
-
import { calculateComposedStyles } from "../../../utils/calculate-styles.js";
|
|
7
6
|
import { useSelect } from "../context.js";
|
|
8
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
8
|
export function SelectContent(props) {
|
|
10
9
|
const select = useSelect();
|
|
11
|
-
const composedStyles =
|
|
10
|
+
const composedStyles = StyleSheet.flatten([select.styles?.content?.default, select.styles?.content?.[select.state], props.style]);
|
|
12
11
|
const positionStyle = useRelativePosition({
|
|
13
12
|
align: "start",
|
|
14
13
|
triggerPosition: select.triggerPosition,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","View","useRelativePosition","useSelect","jsx","_jsx","SelectContent","props","select","composedStyles","flatten","styles","content","default","state","style","positionStyle","align","triggerPosition","contentLayout","alignOffset","preferredSide","sideOffset","Component","render","width","onLayout","e","setContentLayout","nativeEvent","layout","pointerEvents","children"],"sourceRoot":"../../../../../src","sources":["components/select/components/select-content.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyBC,UAAU,EAAEC,IAAI,QAAwB,cAAc;AAC/E,SAASC,mBAAmB,QAAQ,yCAAsC;AAC1E,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAUvC,OAAO,SAASC,aAAaA,CAACC,KAAyB,EAAE;EACvD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAE1B,MAAMM,cAAc,GAAGT,UAAU,CAACU,OAAO,CAAC,CACxCF,MAAM,CAACG,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAC/BL,MAAM,CAACG,MAAM,EAAEC,OAAO,GAAGJ,MAAM,CAACM,KAAK,CAAC,EACtCP,KAAK,CAACQ,KAAK,CACZ,CAAC;EAEF,MAAMC,aAAa,GAAGd,mBAAmB,CAAC;IACxCe,KAAK,EAAE,OAAO;IACdC,eAAe,EAAEV,MAAM,CAACU,eAAe;IACvCC,aAAa,EAAEX,MAAM,CAACW,aAAa;IACnCC,WAAW,EAAE,CAAC;IACdC,aAAa,EAAE,QAAQ;IACvBC,UAAU,EAAE;EACd,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAGhB,KAAK,CAACiB,MAAM,IAAIvB,IAAI;EACtC,oBACEI,IAAA,CAACkB,SAAS;IACRR,KAAK,EAAE,CAACC,aAAa,EAAEP,cAAc,EAAE;MAAEgB,KAAK,EAAEjB,MAAM,CAACU,eAAe,CAACO;IAAM,CAAC,CAAE;IAChFC,QAAQ,EAAGC,CAAC,IAAK;MACfnB,MAAM,CAACoB,gBAAgB,CAACD,CAAC,CAACE,WAAW,CAACC,MAAM,CAAC;IAC/C,CAAE;IACFC,aAAa,EAAC,UAAU;IAAAC,QAAA,EAEvBzB,KAAK,CAACyB;EAAQ,CACN,CAAC;AAEhB","ignoreList":[]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import React, { useEffect, useState } from "react";
|
|
4
4
|
import { Pressable, StyleSheet } from "react-native";
|
|
5
|
+
import { extractPressableStyles } from "../../../utils/calculate-styles.js";
|
|
5
6
|
import { useSelect } from "../context.js";
|
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
8
|
const calculateState = (selectState, hovered, selected) => {
|
|
@@ -21,7 +22,6 @@ export function SelectOption(props) {
|
|
|
21
22
|
const select = useSelect();
|
|
22
23
|
const isSelected = select.value === props.value;
|
|
23
24
|
const optionState = calculateState(select.state, isHovered, isSelected);
|
|
24
|
-
const optionStyles = select.styles?.option;
|
|
25
25
|
useEffect(() => {
|
|
26
26
|
select.setOptions(prev => {
|
|
27
27
|
if (prev.find(option => option.value === props.value)) {
|
|
@@ -43,7 +43,7 @@ export function SelectOption(props) {
|
|
|
43
43
|
onPress: handlePress,
|
|
44
44
|
onPointerEnter: handlePointerEnter,
|
|
45
45
|
onPointerLeave: handlePointerLeave,
|
|
46
|
-
style: styleProps => StyleSheet.flatten([
|
|
46
|
+
style: styleProps => StyleSheet.flatten([extractPressableStyles(select.styles?.option?.default, styleProps), extractPressableStyles(select.styles?.option?.[optionState], styleProps), extractPressableStyles(props.style, styleProps)]),
|
|
47
47
|
children: props.children
|
|
48
48
|
});
|
|
49
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useState","Pressable","StyleSheet","useSelect","jsx","_jsx","calculateState","selectState","hovered","selected","SelectOption","props","isHovered","setIsHovered","select","isSelected","value","optionState","state","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","Pressable","StyleSheet","extractPressableStyles","useSelect","jsx","_jsx","calculateState","selectState","hovered","selected","SelectOption","props","isHovered","setIsHovered","select","isSelected","value","optionState","state","setOptions","prev","find","option","label","children","handlePress","onChange","setIsOpen","handlePointerEnter","handlePointerLeave","onPress","onPointerEnter","onPointerLeave","style","styleProps","flatten","styles","default"],"sourceRoot":"../../../../../src","sources":["components/select/components/select-option.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,SAAS,EAAEC,UAAU,QAA6B,cAAc;AAEzE,SAASC,sBAAsB,QAAQ,oCAAiC;AACxE,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AASvC,MAAMC,cAAc,GAAGA,CACrBC,WAAwB,EACxBC,OAAgB,EAChBC,QAAiB,KACK;EACtB,IAAIF,WAAW,KAAK,UAAU,EAAE;IAC9B,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,YAAYA,CAACC,KAAwB,EAAsB;EACzE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMe,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1B,MAAMY,UAAU,GAAGD,MAAM,CAACE,KAAK,KAAKL,KAAK,CAACK,KAAK;EAE/C,MAAMC,WAAW,GAAGX,cAAc,CAACQ,MAAM,CAACI,KAAK,EAAEN,SAAS,EAAEG,UAAU,CAAC;EAEvEjB,SAAS,CAAC,MAAM;IACdgB,MAAM,CAACK,UAAU,CAAEC,IAAI,IAAK;MAC1B,IAAIA,IAAI,CAACC,IAAI,CAAEC,MAAM,IAAKA,MAAM,CAACN,KAAK,KAAKL,KAAK,CAACK,KAAK,CAAC,EAAE;QACvD,OAAOI,IAAI;MACb;MACA,OAAO,CAAC,GAAGA,IAAI,EAAE;QAAEJ,KAAK,EAAEL,KAAK,CAACK,KAAK;QAAEO,KAAK,EAAEZ,KAAK,CAACa;MAAS,CAAC,CAAC;IACjE,CAAC,CAAC;EACJ,CAAC,EAAE,CAACb,KAAK,CAACK,KAAK,EAAEL,KAAK,CAACa,QAAQ,CAAC,CAAC;EAEjC,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACxBX,MAAM,CAACY,QAAQ,GAAGf,KAAK,CAACK,KAAK,CAAC;IAC9BF,MAAM,CAACa,SAAS,CAAC,KAAK,CAAC;EACzB,CAAC;EACD,MAAMC,kBAAkB,GAAGA,CAAA,KAAMf,YAAY,CAAC,IAAI,CAAC;EACnD,MAAMgB,kBAAkB,GAAGA,CAAA,KAAMhB,YAAY,CAAC,KAAK,CAAC;EAEpD,oBACER,IAAA,CAACL,SAAS;IACR8B,OAAO,EAAEL,WAAY;IACrBM,cAAc,EAAEH,kBAAmB;IACnCI,cAAc,EAAEH,kBAAmB;IACnCI,KAAK,EAAGC,UAAU,IAChBjC,UAAU,CAACkC,OAAO,CAAC,CACjBjC,sBAAsB,CAACY,MAAM,CAACsB,MAAM,EAAEd,MAAM,EAAEe,OAAO,EAAEH,UAAU,CAAC,EAClEhC,sBAAsB,CAACY,MAAM,CAACsB,MAAM,EAAEd,MAAM,GAAGL,WAAW,CAAC,EAAEiB,UAAU,CAAC,EACxEhC,sBAAsB,CAACS,KAAK,CAACsB,KAAK,EAAEC,UAAU,CAAC,CAChD,CACF;IAAAV,QAAA,EAEAb,KAAK,CAACa;EAAQ,CACN,CAAC;AAEhB","ignoreList":[]}
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { calculateComposedStyles } from "../../../utils/calculate-styles.js";
|
|
4
3
|
import React from "react";
|
|
5
4
|
import { Pressable, StyleSheet } from "react-native";
|
|
6
5
|
import { useSelect } from "../context.js";
|
|
7
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
7
|
export function SelectOverlay(props) {
|
|
9
8
|
const select = useSelect();
|
|
10
|
-
const composedStyles =
|
|
9
|
+
const composedStyles = StyleSheet.flatten([select.styles?.overlay?.default, select.styles?.overlay?.[select.state], props.style, StyleSheet.absoluteFill]);
|
|
11
10
|
const Component = props.render ?? Pressable;
|
|
12
11
|
return /*#__PURE__*/_jsx(Component, {
|
|
13
12
|
onPress: () => {
|
|
14
13
|
select.setIsOpen(false);
|
|
15
14
|
},
|
|
16
15
|
pointerEvents: "auto",
|
|
17
|
-
style:
|
|
16
|
+
style: composedStyles,
|
|
18
17
|
children: props.children
|
|
19
18
|
});
|
|
20
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["React","Pressable","StyleSheet","useSelect","jsx","_jsx","SelectOverlay","props","select","composedStyles","flatten","styles","overlay","default","state","style","absoluteFill","Component","render","onPress","setIsOpen","pointerEvents","children"],"sourceRoot":"../../../../../src","sources":["components/select/components/select-overlay.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAkBC,UAAU,QAAwB,cAAc;AACpF,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAYvC,OAAO,SAASC,aAAaA,CAACC,KAAyB,EAAE;EACvD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAE1B,MAAMM,cAAc,GAAGP,UAAU,CAACQ,OAAO,CAAC,CACxCF,MAAM,CAACG,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAC/BL,MAAM,CAACG,MAAM,EAAEC,OAAO,GAAGJ,MAAM,CAACM,KAAK,CAAC,EACtCP,KAAK,CAACQ,KAAK,EACXb,UAAU,CAACc,YAAY,CACxB,CAAC;EAEF,MAAMC,SAAS,GAAGV,KAAK,CAACW,MAAM,IAAIjB,SAAS;EAC3C,oBACEI,IAAA,CAACY,SAAS;IACRE,OAAO,EAAEA,CAAA,KAAM;MACbX,MAAM,CAACY,SAAS,CAAC,KAAK,CAAC;IACzB,CAAE;IACFC,aAAa,EAAC,MAAM;IACpBN,KAAK,EAAEN,cAAe;IAAAa,QAAA,EAErBf,KAAK,CAACe;EAAQ,CACN,CAAC;AAEhB","ignoreList":[]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { useState } from "react";
|
|
4
|
-
import { View } from "react-native";
|
|
4
|
+
import { StyleSheet, View } from "react-native";
|
|
5
5
|
import { DEFAULT_LAYOUT, DEFAULT_POSITION } from "../../../hooks/index.js";
|
|
6
6
|
import { useComponentConfig } from "../../../themes/provider.js";
|
|
7
|
-
import {
|
|
7
|
+
import { mergeStyles } from "../../../utils/calculate-styles.js";
|
|
8
8
|
import { SelectContext } from "../context.js";
|
|
9
9
|
import { SelectVariants } from "../variants/index.js";
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -23,7 +23,7 @@ export function SelectRoot(props) {
|
|
|
23
23
|
const [triggerPosition, setTriggerPosition] = useState(DEFAULT_POSITION);
|
|
24
24
|
const [options, setOptions] = useState([]);
|
|
25
25
|
const state = calculateState(props);
|
|
26
|
-
const composedStyles =
|
|
26
|
+
const composedStyles = StyleSheet.flatten([mergedStyles?.root?.default, mergedStyles?.root?.[state], props.style]);
|
|
27
27
|
const Component = props.render ?? View;
|
|
28
28
|
return /*#__PURE__*/_jsx(SelectContext.Provider, {
|
|
29
29
|
value: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","View","DEFAULT_LAYOUT","DEFAULT_POSITION","useComponentConfig","
|
|
1
|
+
{"version":3,"names":["React","useState","StyleSheet","View","DEFAULT_LAYOUT","DEFAULT_POSITION","useComponentConfig","mergeStyles","SelectContext","SelectVariants","jsx","_jsx","calculateState","props","isDisabled","SelectRoot","variantStyles","variant","size","componentConfig","mergedStyles","styles","isOpen","setIsOpen","contentLayout","setContentLayout","triggerPosition","setTriggerPosition","options","setOptions","state","composedStyles","flatten","root","default","style","Component","render","Provider","value","onChange","children"],"sourceRoot":"../../../../../src","sources":["components/select/components/select-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAGEC,UAAU,EACVC,IAAI,QAEC,cAAc;AACrB,SAASC,cAAc,EAAEC,gBAAgB,QAA6B,yBAAgB;AACtF,SAASC,kBAAkB,QAAQ,6BAA0B;AAC7D,SAASC,WAAW,QAAQ,oCAAiC;AAE7D,SAASC,aAAa,QAAQ,eAAY;AAE1C,SAASC,cAAc,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAwB7C,MAAMC,cAAc,GAAIC,KAAsB,IAAkB;EAC9D,IAAIA,KAAK,CAACC,UAAU,EAAE;IACpB,OAAO,UAAU;EACnB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASC,UAAUA,CAACF,KAAsB,EAAE;EACjD,MAAMG,aAAa,GAAGP,cAAc,CAACI,KAAK,CAACI,OAAO,IAAI,SAAS,CAAC,CAACJ,KAAK,CAACK,IAAI,IAAI,IAAI,CAAC;EACpF,MAAMC,eAAe,GAAGb,kBAAkB,CAAC,QAAQ,CAAC;EACpD,MAAMc,YAAY,GAAGb,WAAW,CAACS,aAAa,EAAEG,eAAe,EAAEE,MAAM,CAAC;EAExE,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGtB,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAACuB,aAAa,EAAEC,gBAAgB,CAAC,GAAGxB,QAAQ,CAAkBG,cAAc,CAAC;EACnF,MAAM,CAACsB,eAAe,EAAEC,kBAAkB,CAAC,GAAG1B,QAAQ,CAAiBI,gBAAgB,CAAC;EACxF,MAAM,CAACuB,OAAO,EAAEC,UAAU,CAAC,GAAG5B,QAAQ,CAAsB,EAAE,CAAC;EAE/D,MAAM6B,KAAK,GAAGlB,cAAc,CAACC,KAAK,CAAC;EAEnC,MAAMkB,cAAc,GAAG7B,UAAU,CAAC8B,OAAO,CAAC,CACxCZ,YAAY,EAAEa,IAAI,EAAEC,OAAO,EAC3Bd,YAAY,EAAEa,IAAI,GAAGH,KAAK,CAAC,EAC3BjB,KAAK,CAACsB,KAAK,CACZ,CAAC;EAEF,MAAMC,SAAS,GAAGvB,KAAK,CAACwB,MAAM,IAAIlC,IAAI;EACtC,oBACEQ,IAAA,CAACH,aAAa,CAAC8B,QAAQ;IACrBC,KAAK,EAAE;MACLA,KAAK,EAAE1B,KAAK,CAAC0B,KAAK;MAClBC,QAAQ,EAAE3B,KAAK,CAAC2B,QAAQ;MACxBlB,MAAM;MACNC,SAAS;MACTG,eAAe;MACfC,kBAAkB;MAClBH,aAAa;MACbC,gBAAgB;MAChBG,OAAO;MACPC,UAAU;MACVC,KAAK;MACLhB,UAAU,EAAED,KAAK,CAACC,UAAU,IAAI,KAAK;MACrCO,MAAM,EAAED;IACV,CAAE;IAAAqB,QAAA,eAEF9B,IAAA,CAACyB,SAAS;MAACD,KAAK,EAAEJ,cAAe;MAAAU,QAAA,EAAE5B,KAAK,CAAC4B;IAAQ,CAAY;EAAC,CACxC,CAAC;AAE7B","ignoreList":[]}
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { useRef } from "react";
|
|
4
|
-
import { Pressable, Text } from "react-native";
|
|
5
|
-
import {
|
|
4
|
+
import { Pressable, StyleSheet, Text } from "react-native";
|
|
5
|
+
import { extractPressableStyles } from "../../../utils/calculate-styles.js";
|
|
6
6
|
import { measureLayoutPosition } from "../../../utils/normalize-layout.js";
|
|
7
7
|
import { useSelect } from "../context.js";
|
|
8
8
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
9
9
|
export function SelectTrigger(props) {
|
|
10
10
|
const select = useSelect();
|
|
11
11
|
const triggerRef = useRef(null);
|
|
12
|
-
const composedStyles = calculateComposedStyles(select.styles, select.state, "trigger", props.style);
|
|
13
12
|
const onTriggerPress = () => {
|
|
14
13
|
if (!select.isOpen) {
|
|
15
14
|
measureLayoutPosition(triggerRef.current, layout => {
|
|
@@ -24,7 +23,7 @@ export function SelectTrigger(props) {
|
|
|
24
23
|
ref: triggerRef,
|
|
25
24
|
onPress: onTriggerPress,
|
|
26
25
|
disabled: select.isDisabled,
|
|
27
|
-
style:
|
|
26
|
+
style: styleProp => StyleSheet.flatten([extractPressableStyles(select.styles?.trigger?.default, styleProp), extractPressableStyles(select.styles?.trigger?.[select.state], styleProp), extractPressableStyles(props.style, styleProp)]),
|
|
28
27
|
children: /*#__PURE__*/_jsx(SelectValue, {
|
|
29
28
|
placeholder: props.placeholder
|
|
30
29
|
})
|