@limonify/zest-ui 0.3.1 → 0.3.2
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/combobox/backdrop/ComboboxBackdrop.d.ts.map +1 -1
- package/lib/combobox/backdrop/ComboboxBackdrop.js +3 -1
- package/lib/combobox/backdrop/ComboboxBackdrop.js.map +1 -1
- package/lib/combobox/input/ComboboxInput.d.ts.map +1 -1
- package/lib/combobox/input/ComboboxInput.js +9 -3
- package/lib/combobox/input/ComboboxInput.js.map +1 -1
- package/lib/combobox/item/ComboboxItem.d.ts.map +1 -1
- package/lib/combobox/item/ComboboxItem.js +3 -1
- package/lib/combobox/item/ComboboxItem.js.map +1 -1
- package/lib/combobox/positioner/ComboboxPositioner.d.ts +5 -0
- package/lib/combobox/positioner/ComboboxPositioner.d.ts.map +1 -1
- package/lib/combobox/positioner/ComboboxPositioner.js +7 -2
- package/lib/combobox/positioner/ComboboxPositioner.js.map +1 -1
- package/lib/combobox/root/ComboboxRootContext.d.ts +11 -0
- package/lib/combobox/root/ComboboxRootContext.d.ts.map +1 -1
- package/lib/combobox/root/ComboboxRootContext.js.map +1 -1
- package/lib/combobox/root/useComboboxRoot.d.ts.map +1 -1
- package/lib/combobox/root/useComboboxRoot.js +8 -0
- package/lib/combobox/root/useComboboxRoot.js.map +1 -1
- package/lib/select/positioner/SelectPositioner.d.ts +5 -0
- package/lib/select/positioner/SelectPositioner.d.ts.map +1 -1
- package/lib/select/positioner/SelectPositioner.js +7 -1
- package/lib/select/positioner/SelectPositioner.js.map +1 -1
- package/lib/select/store/SelectStore.d.ts +5 -0
- package/lib/select/store/SelectStore.d.ts.map +1 -1
- package/lib/select/store/SelectStore.js +2 -0
- package/lib/select/store/SelectStore.js.map +1 -1
- package/lib/select/trigger/SelectTrigger.d.ts.map +1 -1
- package/lib/select/trigger/SelectTrigger.js +3 -1
- package/lib/select/trigger/SelectTrigger.js.map +1 -1
- package/package.json +1 -1
- package/src/combobox/backdrop/ComboboxBackdrop.tsx +2 -1
- package/src/combobox/input/ComboboxInput.tsx +13 -3
- package/src/combobox/item/ComboboxItem.tsx +2 -1
- package/src/combobox/positioner/ComboboxPositioner.tsx +12 -2
- package/src/combobox/root/ComboboxRootContext.ts +11 -0
- package/src/combobox/root/useComboboxRoot.ts +9 -0
- package/src/select/positioner/SelectPositioner.tsx +12 -1
- package/src/select/store/SelectStore.ts +6 -0
- package/src/select/trigger/SelectTrigger.tsx +4 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxBackdrop.d.ts","sourceRoot":"","sources":["../../../src/combobox/backdrop/ComboboxBackdrop.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA0C,MAAM,cAAc,CAAC;AAGjF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"ComboboxBackdrop.d.ts","sourceRoot":"","sources":["../../../src/combobox/backdrop/ComboboxBackdrop.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA0C,MAAM,cAAc,CAAC;AAGjF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,KAAK,8FAqBtE;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,qBACf,SAAQ,oBAAoB,CAAC,OAAO,SAAS,EAAE,qBAAqB,CAAC;CAAG;AAE1E,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,KAAK,GAAG,qBAAqB,CAAC;IAC1C,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC3C"}
|
|
@@ -11,7 +11,7 @@ const useRenderElement_1 = require("../../use-render/useRenderElement");
|
|
|
11
11
|
*/
|
|
12
12
|
function ComboboxBackdrop(componentProps) {
|
|
13
13
|
const { render, className, style, ref, ...elementProps } = componentProps;
|
|
14
|
-
const { open, setOpen } = (0, ComboboxRootContext_1.useComboboxRootContext)();
|
|
14
|
+
const { open, setOpen, inputRef } = (0, ComboboxRootContext_1.useComboboxRootContext)();
|
|
15
15
|
const state = { open };
|
|
16
16
|
return (0, useRenderElement_1.useRenderElement)(react_native_1.Pressable, componentProps, {
|
|
17
17
|
state,
|
|
@@ -20,7 +20,9 @@ function ComboboxBackdrop(componentProps) {
|
|
|
20
20
|
{
|
|
21
21
|
style: react_native_1.StyleSheet.absoluteFill,
|
|
22
22
|
onPress(event) {
|
|
23
|
+
var _a;
|
|
23
24
|
setOpen(false, event);
|
|
25
|
+
(_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
24
26
|
},
|
|
25
27
|
},
|
|
26
28
|
elementProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxBackdrop.js","sourceRoot":"","sources":["../../../src/combobox/backdrop/ComboboxBackdrop.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAUb,
|
|
1
|
+
{"version":3,"file":"ComboboxBackdrop.js","sourceRoot":"","sources":["../../../src/combobox/backdrop/ComboboxBackdrop.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAUb,4CAqBC;AA9BD,+CAAiF;AACjF,qEAAqE;AACrE,wEAAqE;AAGrE;;;GAGG;AACH,SAAgB,gBAAgB,CAAC,cAAsC;IACrE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,cAAc,CAAC;IAE1E,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAA,4CAAsB,GAAE,CAAC;IAE7D,MAAM,KAAK,GAA0B,EAAE,IAAI,EAAE,CAAC;IAE9C,OAAO,IAAA,mCAAgB,EAAC,wBAAS,EAAE,cAAc,EAAE;QACjD,KAAK;QACL,GAAG;QACH,KAAK,EAAE;YACL;gBACE,KAAK,EAAE,yBAAU,CAAC,YAAY;gBAC9B,OAAO,CAAC,KAA4B;;oBAClC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;oBACtB,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,IAAI,EAAE,CAAC;gBAC5B,CAAC;aACF;YACD,YAAY;SACb;KACF,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../src/combobox/input/ComboboxInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../src/combobox/input/ComboboxInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAA0B,MAAM,cAAc,CAAC;AAIjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC,KAAK,0EA2DhE;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,OAAO,SAAS,EAAE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAAG;AAEtF,yBAAiB,aAAa,CAAC;IAC7B,KAAY,KAAK,GAAG,kBAAkB,CAAC;IACvC,KAAY,KAAK,GAAG,kBAAkB,CAAC;CACxC"}
|
|
@@ -46,11 +46,15 @@ const useMergedRefs_1 = require("../../hooks/useMergedRefs");
|
|
|
46
46
|
*/
|
|
47
47
|
function ComboboxInput(componentProps) {
|
|
48
48
|
const { render, className, style, ref, ...elementProps } = componentProps;
|
|
49
|
-
const { open, setOpen, inputValue, setInputValue, disabled, openOnFocus, setTriggerNode, update, } = (0, ComboboxRootContext_1.useComboboxRootContext)();
|
|
49
|
+
const { open, setOpen, inputValue, setInputValue, disabled, openOnFocus, setTriggerNode, update, setInputRef, setTriggerWidth, } = (0, ComboboxRootContext_1.useComboboxRootContext)();
|
|
50
|
+
const internalRef = React.useRef(null);
|
|
51
|
+
React.useEffect(() => {
|
|
52
|
+
setInputRef(internalRef);
|
|
53
|
+
}, [setInputRef]);
|
|
50
54
|
const anchorRef = React.useCallback((node) => {
|
|
51
55
|
setTriggerNode(node);
|
|
52
56
|
}, [setTriggerNode]);
|
|
53
|
-
const mergedRef = (0, useMergedRefs_1.useMergedRefs)(ref, anchorRef);
|
|
57
|
+
const mergedRef = (0, useMergedRefs_1.useMergedRefs)(ref, anchorRef, internalRef);
|
|
54
58
|
const state = { open, disabled };
|
|
55
59
|
return (0, useRenderElement_1.useRenderElement)(react_native_1.TextInput, componentProps, {
|
|
56
60
|
state,
|
|
@@ -67,7 +71,9 @@ function ComboboxInput(componentProps) {
|
|
|
67
71
|
setOpen(true);
|
|
68
72
|
}
|
|
69
73
|
},
|
|
70
|
-
onLayout() {
|
|
74
|
+
onLayout(event) {
|
|
75
|
+
const { width } = event.nativeEvent.layout;
|
|
76
|
+
setTriggerWidth(width);
|
|
71
77
|
update === null || update === void 0 ? void 0 : update();
|
|
72
78
|
},
|
|
73
79
|
accessibilityRole: 'search',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxInput.js","sourceRoot":"","sources":["../../../src/combobox/input/ComboboxInput.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYb,
|
|
1
|
+
{"version":3,"file":"ComboboxInput.js","sourceRoot":"","sources":["../../../src/combobox/input/ComboboxInput.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYb,sCA2DC;AAtED,6CAA+B;AAC/B,+CAAiE;AACjE,qEAAqE;AACrE,wEAAqE;AACrE,6DAA0D;AAG1D;;;GAGG;AACH,SAAgB,aAAa,CAAC,cAAmC;IAC/D,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,cAAc,CAAC;IAE1E,MAAM,EACJ,IAAI,EACJ,OAAO,EACP,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,EACX,cAAc,EACd,MAAM,EACN,WAAW,EACX,eAAe,GAChB,GAAG,IAAA,4CAAsB,GAAE,CAAC;IAE7B,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAY,IAAI,CAAC,CAAC;IAElD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,WAAW,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,IAAa,EAAE,EAAE;QAChB,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IACF,MAAM,SAAS,GAAG,IAAA,6BAAa,EAAC,GAAG,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;IAE7D,MAAM,KAAK,GAAuB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;IAErD,OAAO,IAAA,mCAAgB,EAAC,wBAAS,EAAE,cAAc,EAAE;QACjD,KAAK;QACL,GAAG,EAAE,SAAS;QACd,KAAK,EAAE;YACL;gBACE,KAAK,EAAE,UAAU;gBACjB,QAAQ,EAAE,CAAC,QAAQ;gBACnB,YAAY,CAAC,IAAY;oBACvB,aAAa,CAAC,IAAI,CAAC,CAAC;gBACtB,CAAC;gBACD,OAAO;oBACL,IAAI,WAAW,EAAE,CAAC;wBAChB,OAAO,CAAC,IAAI,CAAC,CAAC;oBAChB,CAAC;gBACH,CAAC;gBACD,QAAQ,CAAC,KAAwB;oBAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;oBAC3C,eAAe,CAAC,KAAK,CAAC,CAAC;oBACvB,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;gBACb,CAAC;gBACD,iBAAiB,EAAE,QAAiB;gBACpC,eAAe,EAAE,IAAI;gBACrB,mBAAmB,EAAE,MAAe;aACrC;YACD,YAAY;SACb;KACF,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxItem.d.ts","sourceRoot":"","sources":["../../../src/combobox/item/ComboboxItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAA8B,MAAM,cAAc,CAAC;AACrE,OAAO,EAA0B,KAAK,YAAY,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAG5G,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,cAAc,EAAE,YAAY,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"ComboboxItem.d.ts","sourceRoot":"","sources":["../../../src/combobox/item/ComboboxItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAA8B,MAAM,cAAc,CAAC;AACrE,OAAO,EAA0B,KAAK,YAAY,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAG5G,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,cAAc,EAAE,YAAY,CAAC,KAAK,0EA+B9D;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,OAAO,SAAS,EAAE,iBAAiB,CAAC;IAClG;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;CACxB;AAED,yBAAiB,YAAY,CAAC;IAC5B,KAAY,KAAK,GAAG,iBAAiB,CAAC;IACtC,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACvC"}
|
|
@@ -46,7 +46,7 @@ const useCompositeListItem_1 = require("../../internals/composite/list/useCompos
|
|
|
46
46
|
*/
|
|
47
47
|
function ComboboxItem(componentProps) {
|
|
48
48
|
const { render, className, style, item, ref, ...elementProps } = componentProps;
|
|
49
|
-
const { selectedValue, selectItem } = (0, ComboboxRootContext_1.useComboboxRootContext)();
|
|
49
|
+
const { selectedValue, selectItem, inputRef } = (0, ComboboxRootContext_1.useComboboxRootContext)();
|
|
50
50
|
const { onLayout } = (0, useCompositeListItem_1.useCompositeListItem)();
|
|
51
51
|
const [pressed, setPressed] = React.useState(false);
|
|
52
52
|
const selected = selectedValue === item.value;
|
|
@@ -58,7 +58,9 @@ function ComboboxItem(componentProps) {
|
|
|
58
58
|
{
|
|
59
59
|
onLayout,
|
|
60
60
|
onPress(event) {
|
|
61
|
+
var _a;
|
|
61
62
|
selectItem(item, event);
|
|
63
|
+
(_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
62
64
|
},
|
|
63
65
|
onPressIn: () => setPressed(true),
|
|
64
66
|
onPressOut: () => setPressed(false),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxItem.js","sourceRoot":"","sources":["../../../src/combobox/item/ComboboxItem.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYb,
|
|
1
|
+
{"version":3,"file":"ComboboxItem.js","sourceRoot":"","sources":["../../../src/combobox/item/ComboboxItem.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYb,oCA+BC;AA1CD,6CAA+B;AAC/B,+CAAqE;AACrE,qEAA4G;AAC5G,wEAAqE;AACrE,8FAA2F;AAG3F;;;GAGG;AACH,SAAgB,YAAY,CAAC,cAAkC;IAC7D,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,cAAc,CAAC;IAEhF,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,IAAA,4CAAsB,GAAE,CAAC;IACzE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,2CAAoB,GAAE,CAAC;IAE5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,aAAa,KAAK,IAAI,CAAC,KAAK,CAAC;IAE9C,MAAM,KAAK,GAAsB,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IAEvD,OAAO,IAAA,mCAAgB,EAAC,wBAAS,EAAE,cAAc,EAAE;QACjD,KAAK;QACL,GAAG;QACH,KAAK,EAAE;YACL;gBACE,QAAQ;gBACR,OAAO,CAAC,KAA4B;;oBAClC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;oBACxB,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,IAAI,EAAE,CAAC;gBAC5B,CAAC;gBACD,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;gBACjC,UAAU,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;gBACnC,iBAAiB,EAAE,UAAmB;gBACtC,IAAI,EAAE,QAAiB;gBACvB,kBAAkB,EAAE,EAAE,QAAQ,EAAE;gBAChC,eAAe,EAAE,QAAQ;aAC1B;YACD,YAAY;SACb;KACF,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -10,6 +10,11 @@ export interface ComboboxPositionerState {
|
|
|
10
10
|
open: boolean;
|
|
11
11
|
side: Side;
|
|
12
12
|
align: Align;
|
|
13
|
+
/**
|
|
14
|
+
* The trigger's measured width, available for consumers to apply to the popup.
|
|
15
|
+
* This is the React Native equivalent of the web's `--anchor-width` CSS variable.
|
|
16
|
+
*/
|
|
17
|
+
triggerWidth: number | undefined;
|
|
13
18
|
}
|
|
14
19
|
export interface ComboboxPositionerProps extends UseAnchorPositioningSharedParameters, ZestUIComponentProps<typeof View, ComboboxPositionerState> {
|
|
15
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxPositioner.d.ts","sourceRoot":"","sources":["../../../src/combobox/positioner/ComboboxPositioner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKpC,OAAO,EAEL,KAAK,KAAK,EACV,KAAK,IAAI,EACT,KAAK,oCAAoC,EAC1C,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,kBAAkB,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"ComboboxPositioner.d.ts","sourceRoot":"","sources":["../../../src/combobox/positioner/ComboboxPositioner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKpC,OAAO,EAEL,KAAK,KAAK,EACV,KAAK,IAAI,EACT,KAAK,oCAAoC,EAC1C,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,kBAAkB,CAAC,KAAK,8FAqD1E;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb;;;OAGG;IACH,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAED,MAAM,WAAW,uBACf,SAAQ,oCAAoC,EAC1C,oBAAoB,CAAC,OAAO,IAAI,EAAE,uBAAuB,CAAC;CAAG;AAEjE,yBAAiB,kBAAkB,CAAC;IAClC,KAAY,KAAK,GAAG,uBAAuB,CAAC;IAC5C,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC7C"}
|
|
@@ -14,7 +14,7 @@ const useAnchorPositioning_1 = require("../../utils/useAnchorPositioning");
|
|
|
14
14
|
*/
|
|
15
15
|
function ComboboxPositioner(componentProps) {
|
|
16
16
|
const { align = 'start', alignOffset = 0, arrowPadding = 5, className, collisionPadding = 5, render, side = 'bottom', sideOffset = 4, sticky = false, style, ref, ...elementProps } = componentProps;
|
|
17
|
-
const { open, triggerNode, setUpdate } = (0, ComboboxRootContext_1.useComboboxRootContext)();
|
|
17
|
+
const { open, triggerNode, setUpdate, triggerWidth } = (0, ComboboxRootContext_1.useComboboxRootContext)();
|
|
18
18
|
const positioning = (0, useAnchorPositioning_1.useAnchorPositioning)({
|
|
19
19
|
align,
|
|
20
20
|
alignOffset,
|
|
@@ -33,7 +33,12 @@ function ComboboxPositioner(componentProps) {
|
|
|
33
33
|
return () => setUpdate(undefined);
|
|
34
34
|
}, [setUpdate, update]);
|
|
35
35
|
const mergedRef = (0, useMergedRefs_1.useMergedRefs)(ref, refs.setFloating);
|
|
36
|
-
const state = {
|
|
36
|
+
const state = {
|
|
37
|
+
open,
|
|
38
|
+
side: positioning.side,
|
|
39
|
+
align: positioning.align,
|
|
40
|
+
triggerWidth,
|
|
41
|
+
};
|
|
37
42
|
return (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
|
|
38
43
|
state,
|
|
39
44
|
ref: mergedRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxPositioner.js","sourceRoot":"","sources":["../../../src/combobox/positioner/ComboboxPositioner.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAkBb,
|
|
1
|
+
{"version":3,"file":"ComboboxPositioner.js","sourceRoot":"","sources":["../../../src/combobox/positioner/ComboboxPositioner.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAkBb,gDAqDC;AAtED,+CAAoC;AACpC,qEAAqE;AACrE,wEAAqE;AACrE,uEAAoE;AACpE,6DAA0D;AAC1D,2EAK0C;AAG1C;;;GAGG;AACH,SAAgB,kBAAkB,CAAC,cAAwC;IACzE,MAAM,EACJ,KAAK,GAAG,OAAO,EACf,WAAW,GAAG,CAAC,EACf,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,gBAAgB,GAAG,CAAC,EACpB,MAAM,EACN,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,CAAC,EACd,MAAM,GAAG,KAAK,EACd,KAAK,EACL,GAAG,EACH,GAAG,YAAY,EAChB,GAAG,cAAc,CAAC;IAEnB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,IAAA,4CAAsB,GAAE,CAAC;IAEhF,MAAM,WAAW,GAAG,IAAA,2CAAoB,EAAC;QACvC,KAAK;QACL,WAAW;QACX,YAAY;QACZ,gBAAgB;QAChB,IAAI;QACJ,UAAU;QACV,MAAM;KACP,CAAC,CAAC;IAEH,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC;IAEvD,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,IAAI,CAAC,YAAY,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAI,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExB,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,SAAS,CAAC,MAAM,CAAC,CAAC;QAClB,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAExB,MAAM,SAAS,GAAG,IAAA,6BAAa,EAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAEvD,MAAM,KAAK,GAA4B;QACrC,IAAI;QACJ,IAAI,EAAE,WAAW,CAAC,IAAI;QACtB,KAAK,EAAE,WAAW,CAAC,KAAK;QACxB,YAAY;KACb,CAAC;IAEF,OAAO,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QAC5C,KAAK;QACL,GAAG,EAAE,SAAS;QACd,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,YAAY,CAAC;KAC7E,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import type { TextInput } from 'react-native';
|
|
2
3
|
import type { ZestNativeEvent } from '../../utils/createChangeEventDetails';
|
|
3
4
|
export interface ComboboxItem {
|
|
4
5
|
value: unknown;
|
|
@@ -39,6 +40,16 @@ export interface ComboboxRootContext {
|
|
|
39
40
|
setTriggerNode: (node: unknown) => void;
|
|
40
41
|
update: (() => void) | undefined;
|
|
41
42
|
setUpdate: (fn: (() => void) | undefined) => void;
|
|
43
|
+
/**
|
|
44
|
+
* Ref to the input element for programmatic blur.
|
|
45
|
+
*/
|
|
46
|
+
inputRef: React.RefObject<TextInput | null> | undefined;
|
|
47
|
+
setInputRef: (ref: React.RefObject<TextInput | null>) => void;
|
|
48
|
+
/**
|
|
49
|
+
* The trigger's measured width, used to size the popup.
|
|
50
|
+
*/
|
|
51
|
+
triggerWidth: number | undefined;
|
|
52
|
+
setTriggerWidth: (width: number) => void;
|
|
42
53
|
}
|
|
43
54
|
export declare const ComboboxRootContext: React.Context<ComboboxRootContext | undefined>;
|
|
44
55
|
export declare function useComboboxRootContext(): ComboboxRootContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxRootContext.d.ts","sourceRoot":"","sources":["../../../src/combobox/root/ComboboxRootContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,EAAE,UAAU,GAAG,cAAc,CAAC;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACjC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxRootContext.d.ts","sourceRoot":"","sources":["../../../src/combobox/root/ComboboxRootContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,EAAE,UAAU,GAAG,cAAc,CAAC;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACjC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACxD,WAAW,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9D;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,mBAAmB,gDAAkE,CAAC;AAEnG,wBAAgB,sBAAsB,wBASrC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxRootContext.js","sourceRoot":"","sources":["../../../src/combobox/root/ComboboxRootContext.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ComboboxRootContext.js","sourceRoot":"","sources":["../../../src/combobox/root/ComboboxRootContext.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Db,wDASC;AAnED,6CAA+B;AAwDlB,QAAA,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAkC,SAAS,CAAC,CAAC;AAEnG,SAAgB,sBAAsB;IACpC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAmB,CAAC,CAAC;IACtD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,oHAAoH,CACrH,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComboboxRoot.d.ts","sourceRoot":"","sources":["../../../src/combobox/root/useComboboxRoot.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useComboboxRoot.d.ts","sourceRoot":"","sources":["../../../src/combobox/root/useComboboxRoot.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAYtF,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,UAAU,GAAG,cAAc,CAAC;IAClC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9E,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IACtE,QAAQ,EAAE,OAAO,CAAC;CACnB;AAKD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,yBAAyB,GAAG,mBAAmB,CAwJ1F"}
|
|
@@ -86,6 +86,8 @@ function useComboboxRoot(parameters) {
|
|
|
86
86
|
});
|
|
87
87
|
const [triggerNode, setTriggerNode] = React.useState(null);
|
|
88
88
|
const [update, setUpdate] = React.useState(undefined);
|
|
89
|
+
const [inputRef, setInputRef] = React.useState(undefined);
|
|
90
|
+
const [triggerWidth, setTriggerWidth] = React.useState(undefined);
|
|
89
91
|
const setOpen = (0, useStableCallback_1.useStableCallback)((nextOpen, event) => {
|
|
90
92
|
if (nextOpen === open) {
|
|
91
93
|
return;
|
|
@@ -150,6 +152,10 @@ function useComboboxRoot(parameters) {
|
|
|
150
152
|
setTriggerNode,
|
|
151
153
|
update,
|
|
152
154
|
setUpdate,
|
|
155
|
+
inputRef,
|
|
156
|
+
setInputRef,
|
|
157
|
+
triggerWidth,
|
|
158
|
+
setTriggerWidth,
|
|
153
159
|
}), [
|
|
154
160
|
mode,
|
|
155
161
|
open,
|
|
@@ -163,6 +169,8 @@ function useComboboxRoot(parameters) {
|
|
|
163
169
|
openOnFocus,
|
|
164
170
|
triggerNode,
|
|
165
171
|
update,
|
|
172
|
+
inputRef,
|
|
173
|
+
triggerWidth,
|
|
166
174
|
]);
|
|
167
175
|
}
|
|
168
176
|
//# sourceMappingURL=useComboboxRoot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComboboxRoot.js","sourceRoot":"","sources":["../../../src/combobox/root/useComboboxRoot.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useComboboxRoot.js","sourceRoot":"","sources":["../../../src/combobox/root/useComboboxRoot.ts"],"names":[],"mappings":"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"}
|
|
@@ -11,6 +11,11 @@ export interface SelectPositionerState {
|
|
|
11
11
|
open: boolean;
|
|
12
12
|
side: Side;
|
|
13
13
|
align: Align;
|
|
14
|
+
/**
|
|
15
|
+
* The trigger's measured width, available for consumers to apply to the popup.
|
|
16
|
+
* This is the React Native equivalent of the web's `--anchor-width` CSS variable.
|
|
17
|
+
*/
|
|
18
|
+
triggerWidth: number | undefined;
|
|
14
19
|
}
|
|
15
20
|
export interface SelectPositionerProps extends UseAnchorPositioningSharedParameters, ZestUIComponentProps<typeof View, SelectPositionerState> {
|
|
16
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectPositioner.d.ts","sourceRoot":"","sources":["../../../src/select/positioner/SelectPositioner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAMpC,OAAO,EAEL,KAAK,KAAK,EACV,KAAK,IAAI,EACT,KAAK,oCAAoC,EAC1C,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGxD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"SelectPositioner.d.ts","sourceRoot":"","sources":["../../../src/select/positioner/SelectPositioner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAMpC,OAAO,EAEL,KAAK,KAAK,EACV,KAAK,IAAI,EACT,KAAK,oCAAoC,EAC1C,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGxD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,KAAK,qBA8EtE;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb;;;OAGG;IACH,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAED,MAAM,WAAW,qBACf,SAAQ,oCAAoC,EAC1C,oBAAoB,CAAC,OAAO,IAAI,EAAE,qBAAqB,CAAC;CAAG;AAE/D,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,KAAK,GAAG,qBAAqB,CAAC;IAC1C,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC3C"}
|
|
@@ -55,6 +55,7 @@ function SelectPositioner(componentProps) {
|
|
|
55
55
|
const store = (0, SelectRootContext_1.useSelectRootContext)();
|
|
56
56
|
const open = store.useState('open');
|
|
57
57
|
const triggerNode = store.useState('triggerNode');
|
|
58
|
+
const triggerWidth = store.useState('triggerWidth');
|
|
58
59
|
const positioning = (0, useAnchorPositioning_1.useAnchorPositioning)({
|
|
59
60
|
align,
|
|
60
61
|
alignOffset,
|
|
@@ -75,7 +76,12 @@ function SelectPositioner(componentProps) {
|
|
|
75
76
|
};
|
|
76
77
|
}, [store, update]);
|
|
77
78
|
const mergedRef = (0, useMergedRefs_1.useMergedRefs)(ref, refs.setFloating);
|
|
78
|
-
const state = {
|
|
79
|
+
const state = {
|
|
80
|
+
open,
|
|
81
|
+
side: positioning.side,
|
|
82
|
+
align: positioning.align,
|
|
83
|
+
triggerWidth,
|
|
84
|
+
};
|
|
79
85
|
const contextValue = React.useMemo(() => ({ side: positioning.side, align: positioning.align, arrowRef, arrowStyles }), [positioning.side, positioning.align, arrowRef, arrowStyles]);
|
|
80
86
|
const element = (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
|
|
81
87
|
state,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectPositioner.js","sourceRoot":"","sources":["../../../src/select/positioner/SelectPositioner.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBb,
|
|
1
|
+
{"version":3,"file":"SelectPositioner.js","sourceRoot":"","sources":["../../../src/select/positioner/SelectPositioner.tsx"],"names":[],"mappings":"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"}
|
|
@@ -62,6 +62,10 @@ export type State = {
|
|
|
62
62
|
*/
|
|
63
63
|
labelId: string | undefined;
|
|
64
64
|
update: (() => void) | undefined;
|
|
65
|
+
/**
|
|
66
|
+
* The trigger's measured width, used to size the popup.
|
|
67
|
+
*/
|
|
68
|
+
triggerWidth: number | undefined;
|
|
65
69
|
};
|
|
66
70
|
type Context = {
|
|
67
71
|
onValueChange: ((value: any, eventDetails: SelectRoot.ChangeEventDetails) => void) | undefined;
|
|
@@ -79,6 +83,7 @@ declare const selectors: {
|
|
|
79
83
|
triggerNode: (state: State) => unknown;
|
|
80
84
|
labelId: (state: State) => string | undefined;
|
|
81
85
|
update: (state: State) => (() => void) | undefined;
|
|
86
|
+
triggerWidth: (state: State) => number | undefined;
|
|
82
87
|
};
|
|
83
88
|
export declare class SelectStore extends ReactStore<Readonly<State>, Context, typeof selectors> {
|
|
84
89
|
constructor(initialState?: Partial<State>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectStore.d.ts","sourceRoot":"","sources":["../../../src/select/store/SelectStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;GAGG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACtB,aAAa,CAAC;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAErD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,OAAO,GAChB,OAAO,CAMT;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,OAAO,GAChB,OAAO,CAUT;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,WAAW,GAAG,SAAS,EAC9B,aAAa,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,EACnC,KAAK,EAAE,OAAO,GACb,MAAM,GAAG,SAAS,CAgBpB;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACpC;;;;OAIG;IACH,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,aAAa,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,UAAU,CAAC,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/F,YAAY,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,CAAC,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAClG,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"SelectStore.d.ts","sourceRoot":"","sources":["../../../src/select/store/SelectStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;GAGG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACtB,aAAa,CAAC;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAErD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,OAAO,GAChB,OAAO,CAMT;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,OAAO,GAChB,OAAO,CAUT;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,WAAW,GAAG,SAAS,EAC9B,aAAa,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,EACnC,KAAK,EAAE,OAAO,GACb,MAAM,GAAG,SAAS,CAgBpB;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACpC;;;;OAIG;IACH,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,aAAa,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,UAAU,CAAC,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/F,YAAY,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,CAAC,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAClG,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;qCAZE,IAAI;;CA2BpB,CAAC;AAEF,qBAAa,WAAY,SAAQ,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,SAAS,CAAC;gBACzE,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC;IAwBlC,OAAO,GAAI,UAAU,OAAO,EAAE,cAAc,UAAU,CAAC,kBAAkB,UAY9E;IAEK,QAAQ,GAAI,WAAW,OAAO,EAAE,cAAc,UAAU,CAAC,kBAAkB,UAQhF;IAEK,aAAa,GAAI,OAAO,OAAO,EAAE,OAAO,MAAM,UASnD;CACH"}
|
|
@@ -62,6 +62,7 @@ const selectors = {
|
|
|
62
62
|
triggerNode: (0, createSelector_1.createSelector)((state) => state.triggerNode),
|
|
63
63
|
labelId: (0, createSelector_1.createSelector)((state) => state.labelId),
|
|
64
64
|
update: (0, createSelector_1.createSelector)((state) => state.update),
|
|
65
|
+
triggerWidth: (0, createSelector_1.createSelector)((state) => state.triggerWidth),
|
|
65
66
|
};
|
|
66
67
|
class SelectStore extends ReactStore_1.ReactStore {
|
|
67
68
|
constructor(initialState) {
|
|
@@ -79,6 +80,7 @@ class SelectStore extends ReactStore_1.ReactStore {
|
|
|
79
80
|
triggerNode: null,
|
|
80
81
|
labelId: undefined,
|
|
81
82
|
update: undefined,
|
|
83
|
+
triggerWidth: undefined,
|
|
82
84
|
...initialState,
|
|
83
85
|
}, { onValueChange: undefined, onOpenChange: undefined }, selectors);
|
|
84
86
|
this.setOpen = (nextOpen, eventDetails) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectStore.js","sourceRoot":"","sources":["../../../src/select/store/SelectStore.ts"],"names":[],"mappings":";;;AAgBA,sDAUC;AAMD,8CAcC;AAMD,gDAoBC;AAxED,+DAA4D;AAC5D,uDAAoD;AAWpD;;;GAGG;AACH,SAAgB,qBAAqB,CACnC,aAAsB,EACtB,KAAc,EACd,QAAiB;IAEjB,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,aAAa,KAAK,KAAK,CAAC;AACjC,CAAC;AAED;;;GAGG;AACH,SAAgB,iBAAiB,CAC/B,aAAsB,EACtB,KAAc,EACd,QAAiB;IAEjB,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,OAAO,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC5B,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC;QAC1C,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,CAAC;AAC1B,CAAC;AAED;;;GAGG;AACH,SAAgB,kBAAkB,CAChC,KAA8B,EAC9B,aAAmC,EACnC,KAAc;IAEd,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;YACzD,IAAI,KAAK,EAAE,CAAC;gBACV,OAAO,KAAK,CAAC,KAAK,CAAC;YACrB,CAAC;QACH,CAAC;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YACrC,MAAM,KAAK,GAAI,KAAgC,CAAC,KAAK,CAAC,CAAC;YACvD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAClC,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectStore.js","sourceRoot":"","sources":["../../../src/select/store/SelectStore.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/select/trigger/SelectTrigger.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/select/trigger/SelectTrigger.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAsD,MAAM,cAAc,CAAC;AAK7F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAIxD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC,KAAK,0EAmEhE;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBACf,SAAQ,oBAAoB,CAAC,OAAO,SAAS,EAAE,kBAAkB,CAAC;IAClE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAED,yBAAiB,aAAa,CAAC;IAC7B,KAAY,KAAK,GAAG,kBAAkB,CAAC;IACvC,KAAY,KAAK,GAAG,kBAAkB,CAAC;CACxC"}
|
|
@@ -80,8 +80,10 @@ function SelectTrigger(componentProps) {
|
|
|
80
80
|
onPressOut() {
|
|
81
81
|
setPressed(false);
|
|
82
82
|
},
|
|
83
|
-
onLayout() {
|
|
83
|
+
onLayout(event) {
|
|
84
84
|
var _a, _b;
|
|
85
|
+
const { width } = event.nativeEvent.layout;
|
|
86
|
+
store.set('triggerWidth', width);
|
|
85
87
|
(_b = (_a = store.state).update) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
86
88
|
},
|
|
87
89
|
accessibilityRole: 'combobox',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.js","sourceRoot":"","sources":["../../../src/select/trigger/SelectTrigger.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeb,
|
|
1
|
+
{"version":3,"file":"SelectTrigger.js","sourceRoot":"","sources":["../../../src/select/trigger/SelectTrigger.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeb,sCAmEC;AAjFD,6CAA+B;AAC/B,+CAA6F;AAC7F,iEAAiE;AACjE,wEAAqE;AACrE,oEAAiE;AACjE,6DAA0D;AAE1D,mFAAgF;AAChF,iDAA8C;AAE9C;;;GAGG;AACH,SAAgB,aAAa,CAAC,cAAmC;IAC/D,MAAM,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EAAE,YAAY,GAAG,KAAK,EAC9B,GAAG,EACH,GAAG,YAAY,EAChB,GAAG,cAAc,CAAC;IAEnB,MAAM,KAAK,GAAG,IAAA,wCAAoB,GAAE,CAAC;IACrC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACpC,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE1C,MAAM,QAAQ,GAAG,YAAY,IAAI,YAAY,CAAC;IAE9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,qBAAS,EAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAEnD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,IAAa,EAAE,EAAE;QAChB,KAAK,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IACF,MAAM,SAAS,GAAG,IAAA,6BAAa,EAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IAEhD,MAAM,KAAK,GAAuB,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAElF,OAAO,IAAA,mCAAgB,EAAC,wBAAS,EAAE,cAAc,EAAE;QACjD,KAAK;QACL,GAAG,EAAE,SAAS;QACd,KAAK,EAAE;YACL;gBACE,OAAO,CAAC,KAA4B;oBAClC,IAAI,QAAQ,EAAE,CAAC;wBACb,OAAO;oBACT,CAAC;oBAED,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,IAAA,mDAAwB,EAAC,iBAAO,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;gBAC9E,CAAC;gBACD,SAAS;oBACP,UAAU,CAAC,IAAI,CAAC,CAAC;gBACnB,CAAC;gBACD,UAAU;oBACR,UAAU,CAAC,KAAK,CAAC,CAAC;gBACpB,CAAC;gBACD,QAAQ,CAAC,KAAwB;;oBAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;oBAC3C,KAAK,CAAC,GAAG,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;oBACjC,MAAA,MAAA,KAAK,CAAC,KAAK,EAAC,MAAM,kDAAI,CAAC;gBACzB,CAAC;gBACD,iBAAiB,EAAE,UAAmB;gBACtC,uBAAuB,EAAE,OAAO;gBAChC,kBAAkB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE;gBACvE,eAAe,EAAE,SAAkB;gBACnC,eAAe,EAAE,QAAQ,IAAI,SAAS;gBACtC,eAAe,EAAE,QAAQ,IAAI,SAAS;aACvC;YACD,YAAY;YACZ,cAAc;SACf;KACF,CAAC,CAAC;AACL,CAAC"}
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@ import type { ZestUIComponentProps } from '../../types';
|
|
|
11
11
|
export function ComboboxBackdrop(componentProps: ComboboxBackdrop.Props) {
|
|
12
12
|
const { render, className, style, ref, ...elementProps } = componentProps;
|
|
13
13
|
|
|
14
|
-
const { open, setOpen } = useComboboxRootContext();
|
|
14
|
+
const { open, setOpen, inputRef } = useComboboxRootContext();
|
|
15
15
|
|
|
16
16
|
const state: ComboboxBackdropState = { open };
|
|
17
17
|
|
|
@@ -23,6 +23,7 @@ export function ComboboxBackdrop(componentProps: ComboboxBackdrop.Props) {
|
|
|
23
23
|
style: StyleSheet.absoluteFill,
|
|
24
24
|
onPress(event: GestureResponderEvent) {
|
|
25
25
|
setOpen(false, event);
|
|
26
|
+
inputRef?.current?.blur();
|
|
26
27
|
},
|
|
27
28
|
},
|
|
28
29
|
elementProps,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { TextInput } from 'react-native';
|
|
3
|
+
import { TextInput, type LayoutChangeEvent } from 'react-native';
|
|
4
4
|
import { useComboboxRootContext } from '../root/ComboboxRootContext';
|
|
5
5
|
import { useRenderElement } from '../../use-render/useRenderElement';
|
|
6
6
|
import { useMergedRefs } from '../../hooks/useMergedRefs';
|
|
@@ -22,15 +22,23 @@ export function ComboboxInput(componentProps: ComboboxInput.Props) {
|
|
|
22
22
|
openOnFocus,
|
|
23
23
|
setTriggerNode,
|
|
24
24
|
update,
|
|
25
|
+
setInputRef,
|
|
26
|
+
setTriggerWidth,
|
|
25
27
|
} = useComboboxRootContext();
|
|
26
28
|
|
|
29
|
+
const internalRef = React.useRef<TextInput>(null);
|
|
30
|
+
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
setInputRef(internalRef);
|
|
33
|
+
}, [setInputRef]);
|
|
34
|
+
|
|
27
35
|
const anchorRef = React.useCallback(
|
|
28
36
|
(node: unknown) => {
|
|
29
37
|
setTriggerNode(node);
|
|
30
38
|
},
|
|
31
39
|
[setTriggerNode],
|
|
32
40
|
);
|
|
33
|
-
const mergedRef = useMergedRefs(ref, anchorRef);
|
|
41
|
+
const mergedRef = useMergedRefs(ref, anchorRef, internalRef);
|
|
34
42
|
|
|
35
43
|
const state: ComboboxInputState = { open, disabled };
|
|
36
44
|
|
|
@@ -49,7 +57,9 @@ export function ComboboxInput(componentProps: ComboboxInput.Props) {
|
|
|
49
57
|
setOpen(true);
|
|
50
58
|
}
|
|
51
59
|
},
|
|
52
|
-
onLayout() {
|
|
60
|
+
onLayout(event: LayoutChangeEvent) {
|
|
61
|
+
const { width } = event.nativeEvent.layout;
|
|
62
|
+
setTriggerWidth(width);
|
|
53
63
|
update?.();
|
|
54
64
|
},
|
|
55
65
|
accessibilityRole: 'search' as const,
|
|
@@ -13,7 +13,7 @@ import type { ZestUIComponentProps } from '../../types';
|
|
|
13
13
|
export function ComboboxItem(componentProps: ComboboxItem.Props) {
|
|
14
14
|
const { render, className, style, item, ref, ...elementProps } = componentProps;
|
|
15
15
|
|
|
16
|
-
const { selectedValue, selectItem } = useComboboxRootContext();
|
|
16
|
+
const { selectedValue, selectItem, inputRef } = useComboboxRootContext();
|
|
17
17
|
const { onLayout } = useCompositeListItem();
|
|
18
18
|
|
|
19
19
|
const [pressed, setPressed] = React.useState(false);
|
|
@@ -29,6 +29,7 @@ export function ComboboxItem(componentProps: ComboboxItem.Props) {
|
|
|
29
29
|
onLayout,
|
|
30
30
|
onPress(event: GestureResponderEvent) {
|
|
31
31
|
selectItem(item, event);
|
|
32
|
+
inputRef?.current?.blur();
|
|
32
33
|
},
|
|
33
34
|
onPressIn: () => setPressed(true),
|
|
34
35
|
onPressOut: () => setPressed(false),
|
|
@@ -32,7 +32,7 @@ export function ComboboxPositioner(componentProps: ComboboxPositioner.Props) {
|
|
|
32
32
|
...elementProps
|
|
33
33
|
} = componentProps;
|
|
34
34
|
|
|
35
|
-
const { open, triggerNode, setUpdate } = useComboboxRootContext();
|
|
35
|
+
const { open, triggerNode, setUpdate, triggerWidth } = useComboboxRootContext();
|
|
36
36
|
|
|
37
37
|
const positioning = useAnchorPositioning({
|
|
38
38
|
align,
|
|
@@ -57,7 +57,12 @@ export function ComboboxPositioner(componentProps: ComboboxPositioner.Props) {
|
|
|
57
57
|
|
|
58
58
|
const mergedRef = useMergedRefs(ref, refs.setFloating);
|
|
59
59
|
|
|
60
|
-
const state: ComboboxPositionerState = {
|
|
60
|
+
const state: ComboboxPositionerState = {
|
|
61
|
+
open,
|
|
62
|
+
side: positioning.side,
|
|
63
|
+
align: positioning.align,
|
|
64
|
+
triggerWidth,
|
|
65
|
+
};
|
|
61
66
|
|
|
62
67
|
return useRenderElement(View, componentProps, {
|
|
63
68
|
state,
|
|
@@ -70,6 +75,11 @@ export interface ComboboxPositionerState {
|
|
|
70
75
|
open: boolean;
|
|
71
76
|
side: Side;
|
|
72
77
|
align: Align;
|
|
78
|
+
/**
|
|
79
|
+
* The trigger's measured width, available for consumers to apply to the popup.
|
|
80
|
+
* This is the React Native equivalent of the web's `--anchor-width` CSS variable.
|
|
81
|
+
*/
|
|
82
|
+
triggerWidth: number | undefined;
|
|
73
83
|
}
|
|
74
84
|
|
|
75
85
|
export interface ComboboxPositionerProps
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
import type { TextInput } from 'react-native';
|
|
3
4
|
import type { ZestNativeEvent } from '../../utils/createChangeEventDetails';
|
|
4
5
|
|
|
5
6
|
export interface ComboboxItem {
|
|
@@ -42,6 +43,16 @@ export interface ComboboxRootContext {
|
|
|
42
43
|
setTriggerNode: (node: unknown) => void;
|
|
43
44
|
update: (() => void) | undefined;
|
|
44
45
|
setUpdate: (fn: (() => void) | undefined) => void;
|
|
46
|
+
/**
|
|
47
|
+
* Ref to the input element for programmatic blur.
|
|
48
|
+
*/
|
|
49
|
+
inputRef: React.RefObject<TextInput | null> | undefined;
|
|
50
|
+
setInputRef: (ref: React.RefObject<TextInput | null>) => void;
|
|
51
|
+
/**
|
|
52
|
+
* The trigger's measured width, used to size the popup.
|
|
53
|
+
*/
|
|
54
|
+
triggerWidth: number | undefined;
|
|
55
|
+
setTriggerWidth: (width: number) => void;
|
|
45
56
|
}
|
|
46
57
|
|
|
47
58
|
export const ComboboxRootContext = React.createContext<ComboboxRootContext | undefined>(undefined);
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
import type { TextInput } from 'react-native';
|
|
3
4
|
import { useControlled } from '../../hooks/useControlled';
|
|
4
5
|
import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
|
|
5
6
|
import { useStableCallback } from '../../hooks/useStableCallback';
|
|
@@ -98,6 +99,8 @@ export function useComboboxRoot(parameters: UseComboboxRootParameters): Combobox
|
|
|
98
99
|
|
|
99
100
|
const [triggerNode, setTriggerNode] = React.useState<unknown>(null);
|
|
100
101
|
const [update, setUpdate] = React.useState<(() => void) | undefined>(undefined);
|
|
102
|
+
const [inputRef, setInputRef] = React.useState<React.RefObject<TextInput | null> | undefined>(undefined);
|
|
103
|
+
const [triggerWidth, setTriggerWidth] = React.useState<number | undefined>(undefined);
|
|
101
104
|
|
|
102
105
|
const setOpen = useStableCallback((nextOpen: boolean, event?: ZestNativeEvent) => {
|
|
103
106
|
if (nextOpen === open) {
|
|
@@ -171,6 +174,10 @@ export function useComboboxRoot(parameters: UseComboboxRootParameters): Combobox
|
|
|
171
174
|
setTriggerNode,
|
|
172
175
|
update,
|
|
173
176
|
setUpdate,
|
|
177
|
+
inputRef,
|
|
178
|
+
setInputRef,
|
|
179
|
+
triggerWidth,
|
|
180
|
+
setTriggerWidth,
|
|
174
181
|
}),
|
|
175
182
|
[
|
|
176
183
|
mode,
|
|
@@ -185,6 +192,8 @@ export function useComboboxRoot(parameters: UseComboboxRootParameters): Combobox
|
|
|
185
192
|
openOnFocus,
|
|
186
193
|
triggerNode,
|
|
187
194
|
update,
|
|
195
|
+
inputRef,
|
|
196
|
+
triggerWidth,
|
|
188
197
|
],
|
|
189
198
|
);
|
|
190
199
|
}
|
|
@@ -39,6 +39,7 @@ export function SelectPositioner(componentProps: SelectPositioner.Props) {
|
|
|
39
39
|
const store = useSelectRootContext();
|
|
40
40
|
const open = store.useState('open');
|
|
41
41
|
const triggerNode = store.useState('triggerNode');
|
|
42
|
+
const triggerWidth = store.useState('triggerWidth');
|
|
42
43
|
|
|
43
44
|
const positioning = useAnchorPositioning({
|
|
44
45
|
align,
|
|
@@ -65,7 +66,12 @@ export function SelectPositioner(componentProps: SelectPositioner.Props) {
|
|
|
65
66
|
|
|
66
67
|
const mergedRef = useMergedRefs(ref, refs.setFloating);
|
|
67
68
|
|
|
68
|
-
const state: SelectPositionerState = {
|
|
69
|
+
const state: SelectPositionerState = {
|
|
70
|
+
open,
|
|
71
|
+
side: positioning.side,
|
|
72
|
+
align: positioning.align,
|
|
73
|
+
triggerWidth,
|
|
74
|
+
};
|
|
69
75
|
|
|
70
76
|
const contextValue: SelectPositionerContext = React.useMemo(
|
|
71
77
|
() => ({ side: positioning.side, align: positioning.align, arrowRef, arrowStyles }),
|
|
@@ -97,6 +103,11 @@ export interface SelectPositionerState {
|
|
|
97
103
|
open: boolean;
|
|
98
104
|
side: Side;
|
|
99
105
|
align: Align;
|
|
106
|
+
/**
|
|
107
|
+
* The trigger's measured width, available for consumers to apply to the popup.
|
|
108
|
+
* This is the React Native equivalent of the web's `--anchor-width` CSS variable.
|
|
109
|
+
*/
|
|
110
|
+
triggerWidth: number | undefined;
|
|
100
111
|
}
|
|
101
112
|
|
|
102
113
|
export interface SelectPositionerProps
|
|
@@ -111,6 +111,10 @@ export type State = {
|
|
|
111
111
|
*/
|
|
112
112
|
labelId: string | undefined;
|
|
113
113
|
update: (() => void) | undefined;
|
|
114
|
+
/**
|
|
115
|
+
* The trigger's measured width, used to size the popup.
|
|
116
|
+
*/
|
|
117
|
+
triggerWidth: number | undefined;
|
|
114
118
|
};
|
|
115
119
|
|
|
116
120
|
type Context = {
|
|
@@ -132,6 +136,7 @@ const selectors = {
|
|
|
132
136
|
triggerNode: createSelector((state: State) => state.triggerNode),
|
|
133
137
|
labelId: createSelector((state: State) => state.labelId),
|
|
134
138
|
update: createSelector((state: State) => state.update),
|
|
139
|
+
triggerWidth: createSelector((state: State) => state.triggerWidth),
|
|
135
140
|
};
|
|
136
141
|
|
|
137
142
|
export class SelectStore extends ReactStore<Readonly<State>, Context, typeof selectors> {
|
|
@@ -151,6 +156,7 @@ export class SelectStore extends ReactStore<Readonly<State>, Context, typeof sel
|
|
|
151
156
|
triggerNode: null,
|
|
152
157
|
labelId: undefined,
|
|
153
158
|
update: undefined,
|
|
159
|
+
triggerWidth: undefined,
|
|
154
160
|
...initialState,
|
|
155
161
|
},
|
|
156
162
|
{ onValueChange: undefined, onOpenChange: undefined },
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { Pressable, type GestureResponderEvent } from 'react-native';
|
|
3
|
+
import { Pressable, type GestureResponderEvent, type LayoutChangeEvent } from 'react-native';
|
|
4
4
|
import { useSelectRootContext } from '../root/SelectRootContext';
|
|
5
5
|
import { useRenderElement } from '../../use-render/useRenderElement';
|
|
6
6
|
import { useButton } from '../../internals/use-button/useButton';
|
|
@@ -64,7 +64,9 @@ export function SelectTrigger(componentProps: SelectTrigger.Props) {
|
|
|
64
64
|
onPressOut() {
|
|
65
65
|
setPressed(false);
|
|
66
66
|
},
|
|
67
|
-
onLayout() {
|
|
67
|
+
onLayout(event: LayoutChangeEvent) {
|
|
68
|
+
const { width } = event.nativeEvent.layout;
|
|
69
|
+
store.set('triggerWidth', width);
|
|
68
70
|
store.state.update?.();
|
|
69
71
|
},
|
|
70
72
|
accessibilityRole: 'combobox' as const,
|