@tamagui/select 1.2.8 → 1.2.10

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.
Files changed (63) hide show
  1. package/dist/esm/BubbleSelect.mjs +25 -0
  2. package/dist/esm/BubbleSelect.mjs.map +7 -0
  3. package/dist/esm/Select.mjs +463 -0
  4. package/dist/esm/Select.mjs.map +7 -0
  5. package/dist/esm/SelectContent.mjs +31 -0
  6. package/dist/esm/SelectContent.mjs.map +7 -0
  7. package/dist/esm/SelectContent.native.mjs +7 -0
  8. package/dist/esm/SelectContent.native.mjs.map +7 -0
  9. package/dist/esm/SelectImpl.mjs +295 -0
  10. package/dist/esm/SelectImpl.mjs.map +7 -0
  11. package/dist/esm/SelectImpl.native.mjs +11 -0
  12. package/dist/esm/SelectImpl.native.mjs.map +7 -0
  13. package/dist/esm/SelectScrollButton.mjs +140 -0
  14. package/dist/esm/SelectScrollButton.mjs.map +7 -0
  15. package/dist/esm/SelectScrollButton.native.mjs +7 -0
  16. package/dist/esm/SelectScrollButton.native.mjs.map +7 -0
  17. package/dist/esm/SelectViewport.mjs +91 -0
  18. package/dist/esm/SelectViewport.mjs.map +7 -0
  19. package/dist/esm/SelectViewport.native.mjs +19 -0
  20. package/dist/esm/SelectViewport.native.mjs.map +7 -0
  21. package/dist/esm/constants.mjs +17 -0
  22. package/dist/esm/constants.mjs.map +7 -0
  23. package/dist/esm/context.mjs +16 -0
  24. package/dist/esm/context.mjs.map +7 -0
  25. package/dist/esm/index.mjs +3 -0
  26. package/dist/esm/index.mjs.map +7 -0
  27. package/dist/esm/types.mjs +1 -0
  28. package/dist/esm/types.mjs.map +7 -0
  29. package/dist/esm/useSelectBreakpointActive.mjs +18 -0
  30. package/dist/esm/useSelectBreakpointActive.mjs.map +7 -0
  31. package/dist/jsx/BubbleSelect.mjs +25 -0
  32. package/dist/jsx/BubbleSelect.mjs.map +7 -0
  33. package/dist/jsx/Select.mjs +427 -0
  34. package/dist/jsx/Select.mjs.map +7 -0
  35. package/dist/jsx/SelectContent.mjs +30 -0
  36. package/dist/jsx/SelectContent.mjs.map +7 -0
  37. package/dist/jsx/SelectContent.native.mjs +7 -0
  38. package/dist/jsx/SelectContent.native.mjs.map +7 -0
  39. package/dist/jsx/SelectImpl.mjs +287 -0
  40. package/dist/jsx/SelectImpl.mjs.map +7 -0
  41. package/dist/jsx/SelectImpl.native.mjs +10 -0
  42. package/dist/jsx/SelectImpl.native.mjs.map +7 -0
  43. package/dist/jsx/SelectScrollButton.mjs +126 -0
  44. package/dist/jsx/SelectScrollButton.mjs.map +7 -0
  45. package/dist/jsx/SelectScrollButton.native.mjs +7 -0
  46. package/dist/jsx/SelectScrollButton.native.mjs.map +7 -0
  47. package/dist/jsx/SelectViewport.mjs +83 -0
  48. package/dist/jsx/SelectViewport.mjs.map +7 -0
  49. package/dist/jsx/SelectViewport.native.mjs +18 -0
  50. package/dist/jsx/SelectViewport.native.mjs.map +7 -0
  51. package/dist/jsx/constants.mjs +17 -0
  52. package/dist/jsx/constants.mjs.map +7 -0
  53. package/dist/jsx/context.mjs +15 -0
  54. package/dist/jsx/context.mjs.map +7 -0
  55. package/dist/jsx/index.mjs +3 -0
  56. package/dist/jsx/index.mjs.map +7 -0
  57. package/dist/jsx/types.mjs +1 -0
  58. package/dist/jsx/types.mjs.map +7 -0
  59. package/dist/jsx/useSelectBreakpointActive.mjs +18 -0
  60. package/dist/jsx/useSelectBreakpointActive.mjs.map +7 -0
  61. package/package.json +16 -16
  62. package/types/context.d.ts +8 -2
  63. package/types/context.d.ts.map +1 -1
@@ -0,0 +1,25 @@
1
+ import { usePrevious } from "@radix-ui/react-use-previous";
2
+ import { useComposedRefs } from "@tamagui/compose-refs";
3
+ import * as React from "react";
4
+ const BubbleSelect = React.forwardRef((props, forwardedRef) => {
5
+ const { value, ...selectProps } = props;
6
+ const ref = React.useRef(null);
7
+ const composedRefs = useComposedRefs(forwardedRef, ref);
8
+ const prevValue = usePrevious(value);
9
+ React.useEffect(() => {
10
+ const select = ref.current;
11
+ const selectProto = window.HTMLSelectElement.prototype;
12
+ const descriptor = Object.getOwnPropertyDescriptor(
13
+ selectProto,
14
+ "value"
15
+ );
16
+ const setValue = descriptor.set;
17
+ if (prevValue !== value && setValue) {
18
+ const event = new Event("change", { bubbles: true });
19
+ setValue.call(select, value);
20
+ select.dispatchEvent(event);
21
+ }
22
+ }, [prevValue, value]);
23
+ return null;
24
+ });
25
+ //# sourceMappingURL=BubbleSelect.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/BubbleSelect.tsx"],
4
+ "sourcesContent": ["import { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\n/* -----------------------------------------------------------------------------------------------*/\nconst BubbleSelect = React.forwardRef<\n HTMLSelectElement,\n React.ComponentPropsWithoutRef<'select'>\n>((props, forwardedRef) => {\n const { value, ...selectProps } = props\n const ref = React.useRef<HTMLSelectElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const prevValue = usePrevious(value)\n\n // Bubble value change to parents (e.g form change event)\n React.useEffect(() => {\n const select = ref.current!\n const selectProto = window.HTMLSelectElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n selectProto,\n 'value',\n ) as PropertyDescriptor\n const setValue = descriptor.set\n if (prevValue !== value && setValue) {\n const event = new Event('change', { bubbles: true })\n setValue.call(select, value)\n select.dispatchEvent(event)\n }\n }, [prevValue, value])\n\n /**\n * We purposefully use a `select` here to support form autofill as much\n * as possible.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programatically and bubble to any parent form `onChange` event.\n * Adding the `value` will cause React to consider the programatic\n * dispatch a duplicate and it will get swallowed.\n *\n * We use `VisuallyHidden` rather than `display: \"none\"` because Safari autofill\n * won't work otherwise.\n */\n // TODO\n return null\n // return (\n // <VisuallyHidden asChild>\n // <select {...selectProps} ref={composedRefs} defaultValue={value} />\n // </VisuallyHidden>\n // )\n})\n"],
5
+ "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,YAAY,WAAW;AAGvB,MAAM,eAAe,MAAM,WAGzB,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,QAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,QAAM,YAAY,YAAY,KAAK;AAGnC,QAAM,UAAU,MAAM;AACpB,UAAM,SAAS,IAAI;AACnB,UAAM,cAAc,OAAO,kBAAkB;AAC7C,UAAM,aAAa,OAAO;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AACA,UAAM,WAAW,WAAW;AAC5B,QAAI,cAAc,SAAS,UAAU;AACnC,YAAM,QAAQ,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC;AACnD,eAAS,KAAK,QAAQ,KAAK;AAC3B,aAAO,cAAc,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAerB,SAAO;AAMT,CAAC;",
6
+ "names": []
7
+ }
@@ -0,0 +1,463 @@
1
+ import { Fragment, jsx } from "react/jsx-runtime";
2
+ import { Adapt, useAdaptParent } from "@tamagui/adapt";
3
+ import { useComposedRefs } from "@tamagui/compose-refs";
4
+ import { isWeb } from "@tamagui/core";
5
+ import {
6
+ styled,
7
+ useGet,
8
+ useIsomorphicLayoutEffect,
9
+ withStaticProperties
10
+ } from "@tamagui/core";
11
+ import { useId } from "@tamagui/core";
12
+ import { ListItem } from "@tamagui/list-item";
13
+ import { PortalHost } from "@tamagui/portal";
14
+ import { Separator } from "@tamagui/separator";
15
+ import { ControlledSheet, SheetController } from "@tamagui/sheet";
16
+ import { XStack, YStack } from "@tamagui/stacks";
17
+ import { Paragraph, SizableText } from "@tamagui/text";
18
+ import { useControllableState } from "@tamagui/use-controllable-state";
19
+ import * as React from "react";
20
+ import { SELECT_NAME } from "./constants";
21
+ import { SelectProvider, createSelectContext, useSelectContext } from "./context";
22
+ import { SelectContent } from "./SelectContent";
23
+ import { SelectInlineImpl } from "./SelectImpl";
24
+ import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButton";
25
+ import { SelectViewport } from "./SelectViewport";
26
+ import {
27
+ useSelectBreakpointActive,
28
+ useShowSelectSheet
29
+ } from "./useSelectBreakpointActive";
30
+ const TRIGGER_NAME = "SelectTrigger";
31
+ const SelectTrigger = React.forwardRef(
32
+ (props, forwardedRef) => {
33
+ const {
34
+ __scopeSelect,
35
+ disabled = false,
36
+ // @ts-ignore
37
+ "aria-labelledby": ariaLabelledby,
38
+ ...triggerProps
39
+ } = props;
40
+ const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
41
+ const labelledBy = ariaLabelledby;
42
+ return /* @__PURE__ */ jsx(
43
+ ListItem,
44
+ {
45
+ componentName: TRIGGER_NAME,
46
+ backgrounded: true,
47
+ radiused: true,
48
+ hoverTheme: true,
49
+ pressTheme: true,
50
+ focusTheme: true,
51
+ focusable: true,
52
+ borderWidth: 1,
53
+ size: context.size,
54
+ "aria-expanded": context.open,
55
+ "aria-autocomplete": "none",
56
+ "aria-labelledby": labelledBy,
57
+ dir: context.dir,
58
+ disabled,
59
+ "data-disabled": disabled ? "" : void 0,
60
+ ...triggerProps,
61
+ ref: forwardedRef,
62
+ ...process.env.TAMAGUI_TARGET === "web" && context.interactions ? context.interactions.getReferenceProps() : {
63
+ onPress() {
64
+ context.setOpen(!context.open);
65
+ }
66
+ }
67
+ }
68
+ );
69
+ }
70
+ );
71
+ SelectTrigger.displayName = TRIGGER_NAME;
72
+ const VALUE_NAME = "SelectValue";
73
+ const SelectValueFrame = styled(Paragraph, {
74
+ name: VALUE_NAME,
75
+ userSelect: "none"
76
+ });
77
+ const SelectValue = SelectValueFrame.extractable(
78
+ React.forwardRef(
79
+ ({
80
+ __scopeSelect,
81
+ children: childrenProp,
82
+ placeholder
83
+ }, forwardedRef) => {
84
+ const context = useSelectContext(VALUE_NAME, __scopeSelect);
85
+ const { onValueNodeHasChildrenChange } = context;
86
+ const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
87
+ const children = childrenProp ?? context.selectedItem;
88
+ const hasChildren = !!children;
89
+ const selectValueChildren = context.value === void 0 && placeholder !== void 0 ? placeholder : children;
90
+ useIsomorphicLayoutEffect(() => {
91
+ onValueNodeHasChildrenChange(hasChildren);
92
+ }, [onValueNodeHasChildrenChange, hasChildren]);
93
+ return /* @__PURE__ */ jsx(
94
+ SelectValueFrame,
95
+ {
96
+ size: context.size,
97
+ ref: composedRefs,
98
+ pointerEvents: "none",
99
+ children: selectValueChildren
100
+ }
101
+ );
102
+ }
103
+ )
104
+ );
105
+ SelectValue.displayName = VALUE_NAME;
106
+ const SelectIcon = styled(XStack, {
107
+ name: "SelectIcon",
108
+ // @ts-ignore
109
+ "aria-hidden": true,
110
+ children: /* @__PURE__ */ jsx(Paragraph, { children: "\u25BC" })
111
+ });
112
+ const ITEM_NAME = "SelectItem";
113
+ const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
114
+ const SelectItem = React.forwardRef(
115
+ (props, forwardedRef) => {
116
+ const {
117
+ __scopeSelect,
118
+ value,
119
+ disabled = false,
120
+ textValue: textValueProp,
121
+ index,
122
+ ...itemProps
123
+ } = props;
124
+ const context = useSelectContext(ITEM_NAME, __scopeSelect);
125
+ const isSelected = context.value === value;
126
+ const textId = useId();
127
+ const {
128
+ selectedIndex,
129
+ setSelectedIndex,
130
+ listRef,
131
+ open,
132
+ setOpen,
133
+ onChange,
134
+ setActiveIndex,
135
+ allowMouseUpRef,
136
+ allowSelectRef,
137
+ setValueAtIndex,
138
+ selectTimeoutRef,
139
+ dataRef
140
+ } = context;
141
+ const composedRefs = useComposedRefs(forwardedRef, (node) => {
142
+ if (!isWeb)
143
+ return;
144
+ if (node instanceof HTMLElement) {
145
+ if (listRef) {
146
+ listRef.current[index] = node;
147
+ }
148
+ }
149
+ });
150
+ React.useEffect(() => {
151
+ setValueAtIndex(index, value);
152
+ }, [index, setValueAtIndex, value]);
153
+ function handleSelect() {
154
+ setSelectedIndex(index);
155
+ onChange(value);
156
+ setOpen(false);
157
+ }
158
+ const selectItemProps = context.interactions ? context.interactions.getItemProps({
159
+ onTouchStart() {
160
+ allowSelectRef.current = true;
161
+ allowMouseUpRef.current = false;
162
+ },
163
+ onKeyDown(event) {
164
+ if (event.key === "Enter" || event.key === " " && !(dataRef == null ? void 0 : dataRef.current.typing)) {
165
+ event.preventDefault();
166
+ handleSelect();
167
+ } else {
168
+ allowSelectRef.current = true;
169
+ }
170
+ },
171
+ onClick() {
172
+ if (allowSelectRef.current) {
173
+ setSelectedIndex(index);
174
+ setOpen(false);
175
+ }
176
+ },
177
+ onMouseUp() {
178
+ if (!allowMouseUpRef.current) {
179
+ return;
180
+ }
181
+ if (allowSelectRef.current) {
182
+ handleSelect();
183
+ }
184
+ clearTimeout(selectTimeoutRef.current);
185
+ selectTimeoutRef.current = setTimeout(() => {
186
+ allowSelectRef.current = true;
187
+ });
188
+ }
189
+ }) : {
190
+ onPress: handleSelect
191
+ };
192
+ return /* @__PURE__ */ jsx(
193
+ SelectItemContextProvider,
194
+ {
195
+ scope: __scopeSelect,
196
+ value,
197
+ textId: textId || "",
198
+ isSelected,
199
+ children: /* @__PURE__ */ jsx(
200
+ ListItem,
201
+ {
202
+ tag: "div",
203
+ backgrounded: true,
204
+ pressTheme: true,
205
+ cursor: "",
206
+ focusTheme: true,
207
+ outlineWidth: 0,
208
+ componentName: ITEM_NAME,
209
+ ref: composedRefs,
210
+ "aria-labelledby": textId,
211
+ "aria-selected": isSelected,
212
+ "data-state": isSelected ? "active" : "inactive",
213
+ "aria-disabled": disabled || void 0,
214
+ "data-disabled": disabled ? "" : void 0,
215
+ tabIndex: disabled ? void 0 : -1,
216
+ size: context.size,
217
+ ...itemProps,
218
+ ...selectItemProps
219
+ }
220
+ )
221
+ }
222
+ );
223
+ }
224
+ );
225
+ SelectItem.displayName = ITEM_NAME;
226
+ const ITEM_TEXT_NAME = "SelectItemText";
227
+ const SelectItemTextFrame = styled(SizableText, {
228
+ name: ITEM_TEXT_NAME,
229
+ userSelect: "none"
230
+ });
231
+ const SelectItemText = React.forwardRef(
232
+ (props, forwardedRef) => {
233
+ const { __scopeSelect, className, ...itemTextProps } = props;
234
+ const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
235
+ const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
236
+ const ref = React.useRef(null);
237
+ const composedRefs = useComposedRefs(forwardedRef, ref);
238
+ const isSelected = Boolean(itemContext.isSelected && context.valueNode);
239
+ const contents = React.useMemo(
240
+ () => /* @__PURE__ */ jsx(
241
+ SelectItemTextFrame,
242
+ {
243
+ className,
244
+ size: context.size,
245
+ id: itemContext.textId,
246
+ ...itemTextProps,
247
+ ref: composedRefs
248
+ }
249
+ ),
250
+ // eslint-disable-next-line react-hooks/exhaustive-deps
251
+ [props, context.size, className, itemContext.textId]
252
+ );
253
+ useIsomorphicLayoutEffect(() => {
254
+ if (isSelected) {
255
+ context.setSelectedItem(contents);
256
+ }
257
+ }, [isSelected, contents]);
258
+ return /* @__PURE__ */ jsx(Fragment, { children: contents });
259
+ }
260
+ );
261
+ SelectItemText.displayName = ITEM_TEXT_NAME;
262
+ const ITEM_INDICATOR_NAME = "SelectItemIndicator";
263
+ const SelectItemIndicatorFrame = styled(XStack, {
264
+ name: ITEM_TEXT_NAME
265
+ });
266
+ const SelectItemIndicator = React.forwardRef(
267
+ (props, forwardedRef) => {
268
+ const { __scopeSelect, ...itemIndicatorProps } = props;
269
+ const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
270
+ return itemContext.isSelected ? /* @__PURE__ */ jsx(SelectItemIndicatorFrame, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
271
+ }
272
+ );
273
+ SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
274
+ const GROUP_NAME = "SelectGroup";
275
+ const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
276
+ const SelectGroupFrame = styled(YStack, {
277
+ name: GROUP_NAME,
278
+ width: "100%"
279
+ });
280
+ const SelectGroup = React.forwardRef(
281
+ (props, forwardedRef) => {
282
+ const { __scopeSelect, ...groupProps } = props;
283
+ const groupId = useId();
284
+ return /* @__PURE__ */ jsx(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId || "", children: /* @__PURE__ */ jsx(
285
+ SelectGroupFrame,
286
+ {
287
+ role: "group",
288
+ "aria-labelledby": groupId,
289
+ ...groupProps,
290
+ ref: forwardedRef
291
+ }
292
+ ) });
293
+ }
294
+ );
295
+ SelectGroup.displayName = GROUP_NAME;
296
+ const LABEL_NAME = "SelectLabel";
297
+ const SelectLabel = React.forwardRef(
298
+ (props, forwardedRef) => {
299
+ const { __scopeSelect, ...labelProps } = props;
300
+ const context = useSelectContext(LABEL_NAME, __scopeSelect);
301
+ const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
302
+ return /* @__PURE__ */ jsx(
303
+ ListItem,
304
+ {
305
+ tag: "div",
306
+ componentName: LABEL_NAME,
307
+ fontWeight: "800",
308
+ id: groupContext.id,
309
+ size: context.size,
310
+ ...labelProps,
311
+ ref: forwardedRef
312
+ }
313
+ );
314
+ }
315
+ );
316
+ SelectLabel.displayName = LABEL_NAME;
317
+ const SelectSeparator = styled(Separator, {
318
+ name: "SelectSeparator"
319
+ });
320
+ const SelectSheetController = (props) => {
321
+ const context = useSelectContext("SelectSheetController", props.__scopeSelect);
322
+ const showSheet = useShowSelectSheet(context);
323
+ const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
324
+ const getShowSheet = useGet(showSheet);
325
+ return /* @__PURE__ */ jsx(
326
+ SheetController,
327
+ {
328
+ onOpenChange: (val) => {
329
+ if (getShowSheet()) {
330
+ props.onOpenChange(val);
331
+ }
332
+ },
333
+ open: context.open,
334
+ hidden: breakpointActive === false,
335
+ children: props.children
336
+ }
337
+ );
338
+ };
339
+ const SelectSheetImpl = (props) => {
340
+ return /* @__PURE__ */ jsx(Fragment, { children: props.children });
341
+ };
342
+ const Select = withStaticProperties(
343
+ (props) => {
344
+ const {
345
+ __scopeSelect,
346
+ children,
347
+ open: openProp,
348
+ defaultOpen,
349
+ onOpenChange,
350
+ value: valueProp,
351
+ defaultValue,
352
+ onValueChange,
353
+ size: sizeProp = "$true",
354
+ dir
355
+ } = props;
356
+ const id = useId();
357
+ const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id;
358
+ const { when, AdaptProvider } = useAdaptParent({
359
+ Contents: React.useCallback(
360
+ () => /* @__PURE__ */ jsx(PortalHost, { name: `${scopeKey}SheetContents` }),
361
+ [scopeKey]
362
+ )
363
+ });
364
+ const sheetBreakpoint = when;
365
+ const isSheet = useSelectBreakpointActive(sheetBreakpoint);
366
+ const SelectImpl = isSheet || !isWeb ? SelectSheetImpl : SelectInlineImpl;
367
+ const forceUpdate = React.useReducer(() => ({}), {})[1];
368
+ const [selectedItem, setSelectedItem] = React.useState(null);
369
+ const [open, setOpen] = useControllableState({
370
+ prop: openProp,
371
+ defaultProp: defaultOpen || false,
372
+ onChange: onOpenChange,
373
+ strategy: "most-recent-wins"
374
+ });
375
+ const [value, setValue] = useControllableState({
376
+ prop: valueProp,
377
+ defaultProp: defaultValue || "",
378
+ onChange: onValueChange,
379
+ strategy: "most-recent-wins",
380
+ transition: true
381
+ });
382
+ const [activeIndex, setActiveIndex] = React.useState(0);
383
+ const selectedIndexRef = React.useRef(null);
384
+ const activeIndexRef = React.useRef(null);
385
+ const listContentRef = React.useRef([]);
386
+ const [selectedIndex, setSelectedIndex] = React.useState(0);
387
+ const [valueNode, setValueNode] = React.useState(null);
388
+ const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
389
+ useIsomorphicLayoutEffect(() => {
390
+ selectedIndexRef.current = selectedIndex;
391
+ activeIndexRef.current = activeIndex;
392
+ });
393
+ return /* @__PURE__ */ jsx(AdaptProvider, { children: /* @__PURE__ */ jsx(
394
+ SelectProvider,
395
+ {
396
+ dir,
397
+ blockSelection: false,
398
+ size: sizeProp,
399
+ fallback: false,
400
+ selectedItem,
401
+ setSelectedItem,
402
+ forceUpdate,
403
+ valueNode,
404
+ onValueNodeChange: setValueNode,
405
+ onValueNodeHasChildrenChange: setValueNodeHasChildren,
406
+ valueNodeHasChildren,
407
+ scopeKey,
408
+ sheetBreakpoint,
409
+ scope: __scopeSelect,
410
+ setValueAtIndex: (index, value2) => {
411
+ listContentRef.current[index] = value2;
412
+ },
413
+ activeIndex,
414
+ onChange: setValue,
415
+ selectedIndex,
416
+ setActiveIndex,
417
+ setOpen,
418
+ setSelectedIndex,
419
+ value,
420
+ open,
421
+ children: /* @__PURE__ */ jsx(SelectSheetController, { onOpenChange: setOpen, __scopeSelect, children: /* @__PURE__ */ jsx(
422
+ SelectImpl,
423
+ {
424
+ activeIndexRef,
425
+ listContentRef,
426
+ selectedIndexRef,
427
+ ...props,
428
+ open,
429
+ value,
430
+ children
431
+ }
432
+ ) })
433
+ }
434
+ ) });
435
+ },
436
+ {
437
+ Adapt,
438
+ Content: SelectContent,
439
+ Group: SelectGroup,
440
+ Icon: SelectIcon,
441
+ Item: SelectItem,
442
+ ItemIndicator: SelectItemIndicator,
443
+ ItemText: SelectItemText,
444
+ Label: SelectLabel,
445
+ ScrollDownButton: SelectScrollDownButton,
446
+ ScrollUpButton: SelectScrollUpButton,
447
+ Trigger: SelectTrigger,
448
+ Value: SelectValue,
449
+ Viewport: SelectViewport,
450
+ Sheet: ControlledSheet
451
+ }
452
+ );
453
+ Select.displayName = SELECT_NAME;
454
+ export {
455
+ Select,
456
+ SelectGroupFrame,
457
+ SelectIcon,
458
+ SelectItem,
459
+ SelectItemTextFrame,
460
+ SelectSeparator,
461
+ SelectTrigger
462
+ };
463
+ //# sourceMappingURL=Select.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/Select.tsx"],
4
+ "sourcesContent": ["import { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isClient, isWeb } from '@tamagui/core'\nimport {\n styled,\n useGet,\n useIsomorphicLayoutEffect,\n withStaticProperties,\n} from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { ListItem, ListItemProps } from '@tamagui/list-item'\nimport { PortalHost } from '@tamagui/portal'\nimport { Separator } from '@tamagui/separator'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph, SizableText } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nimport { SELECT_NAME } from './constants'\nimport { SelectProvider, createSelectContext, useSelectContext } from './context'\nimport { SelectContent } from './SelectContent'\nimport { SelectInlineImpl } from './SelectImpl'\nimport { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton'\nimport { SelectViewport } from './SelectViewport'\nimport { ScopedProps, SelectImplProps, SelectProps } from './types'\nimport {\n useSelectBreakpointActive,\n useShowSelectSheet,\n} from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(process.env.TAMAGUI_TARGET === 'web' && context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n userSelect: 'none',\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n {\n __scopeSelect,\n children: childrenProp,\n placeholder,\n }: ScopedProps<SelectValueProps>,\n forwardedRef\n ) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const context = useSelectContext(VALUE_NAME, __scopeSelect)\n const { onValueNodeHasChildrenChange } = context\n const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n const children = childrenProp ?? context.selectedItem\n const hasChildren = !!children\n const selectValueChildren =\n context.value === undefined && placeholder !== undefined ? placeholder : children\n\n useIsomorphicLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {selectValueChildren}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends ListItemProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (\n event.key === 'Enter' ||\n (event.key === ' ' && !dataRef?.current.typing)\n ) {\n event.preventDefault()\n handleSelect()\n } else {\n allowSelectRef!.current = true\n }\n },\n onClick() {\n if (allowSelectRef!.current) {\n setSelectedIndex(index)\n setOpen(false)\n }\n },\n onMouseUp() {\n if (!allowMouseUpRef!.current) {\n return\n }\n\n if (allowSelectRef!.current) {\n handleSelect()\n }\n\n // On touch devices, prevent the element from\n // immediately closing `onClick` by deferring it\n clearTimeout(selectTimeoutRef!.current)\n selectTimeoutRef!.current = setTimeout(() => {\n allowSelectRef!.current = true\n })\n },\n })\n : {\n onPress: handleSelect,\n }\n\n return (\n <SelectItemContextProvider\n scope={__scopeSelect}\n value={value}\n textId={textId || ''}\n isSelected={isSelected}\n >\n <ListItem\n tag=\"div\"\n backgrounded\n pressTheme\n cursor=\"\"\n focusTheme\n outlineWidth={0}\n componentName={ITEM_NAME}\n ref={composedRefs}\n aria-labelledby={textId}\n aria-selected={isSelected}\n data-state={isSelected ? 'active' : 'inactive'}\n aria-disabled={disabled || undefined}\n data-disabled={disabled ? '' : undefined}\n tabIndex={disabled ? undefined : -1}\n size={context.size}\n {...itemProps}\n {...selectItemProps}\n />\n </SelectItemContextProvider>\n )\n }\n)\n\nSelectItem.displayName = ITEM_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText'\n\nexport const SelectItemTextFrame = styled(SizableText, {\n name: ITEM_TEXT_NAME,\n userSelect: 'none',\n})\n\ntype SelectItemTextProps = GetProps<typeof SelectItemTextFrame>\n\nconst SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(\n (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n const { __scopeSelect, className, ...itemTextProps } = props\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n const ref = React.useRef<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const isSelected = Boolean(itemContext.isSelected && context.valueNode)\n\n const contents = React.useMemo(\n () => (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [props, context.size, className, itemContext.textId]\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n useIsomorphicLayoutEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected, contents])\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {/* this needs some extra stability between renders */}\n {/* {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null} */}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n tag=\"div\"\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst SelectSheetImpl = (props: SelectImplProps) => {\n return <>{props.children}</>\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Select = withStaticProperties(\n (props: ScopedProps<SelectProps>) => {\n const {\n __scopeSelect,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n value: valueProp,\n defaultValue,\n onValueChange,\n size: sizeProp = '$true',\n dir,\n } = props\n\n const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(\n () => <PortalHost name={`${scopeKey}SheetContents`} />,\n [scopeKey]\n ),\n })\n const sheetBreakpoint = when\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet || !isWeb ? SelectSheetImpl : SelectInlineImpl\n const forceUpdate = React.useReducer(() => ({}), {})[1]\n const [selectedItem, setSelectedItem] = React.useState<React.ReactNode>(null)\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n strategy: 'most-recent-wins',\n })\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue || '',\n onChange: onValueChange,\n strategy: 'most-recent-wins',\n transition: true,\n })\n\n const [activeIndex, setActiveIndex] = React.useState<number | null>(0)\n const selectedIndexRef = React.useRef<number | null>(null)\n const activeIndexRef = React.useRef<number | null>(null)\n const listContentRef = React.useRef<string[]>([])\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n const [valueNode, setValueNode] = React.useState<HTMLElement | null>(null)\n const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false)\n\n useIsomorphicLayoutEffect(() => {\n selectedIndexRef.current = selectedIndex\n activeIndexRef.current = activeIndex\n })\n\n return (\n <AdaptProvider>\n <SelectProvider\n dir={dir}\n blockSelection={false}\n size={sizeProp}\n fallback={false}\n selectedItem={selectedItem}\n setSelectedItem={setSelectedItem}\n forceUpdate={forceUpdate}\n valueNode={valueNode}\n onValueNodeChange={setValueNode}\n onValueNodeHasChildrenChange={setValueNodeHasChildren}\n valueNodeHasChildren={valueNodeHasChildren}\n scopeKey={scopeKey}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n </AdaptProvider>\n )\n },\n {\n Adapt,\n Content: SelectContent,\n Group: SelectGroup,\n Icon: SelectIcon,\n Item: SelectItem,\n ItemIndicator: SelectItemIndicator,\n ItemText: SelectItemText,\n Label: SelectLabel,\n ScrollDownButton: SelectScrollDownButton,\n ScrollUpButton: SelectScrollUpButton,\n Trigger: SelectTrigger,\n Value: SelectValue,\n Viewport: SelectViewport,\n Sheet: ControlledSheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
5
+ "mappings": "AAuDM,SAoSA,UApSA;AAvDN,SAAS,OAAO,sBAAsB;AACtC,SAAS,uBAAuB;AAChC,SAA6C,aAAa;AAC1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,gBAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,QAAQ,cAA2B;AAC5C,SAAS,WAAW,mBAAmB;AACvC,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,qBAAqB,wBAAwB;AACtE,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,sBAAsB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMP,MAAM,eAAe;AAId,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,OAAwC,iBAAiB;AACxD,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA;AAAA,MAEX,mBAAmB;AAAA,MACnB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,UAAU,iBAAiB,cAAc,aAAa;AAI5D,UAAM,aAAa;AAEnB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe;AAAA,QACf,cAAY;AAAA,QACZ,UAAQ;AAAA,QACR,YAAU;AAAA,QACV,YAAU;AAAA,QACV,YAAU;AAAA,QACV,WAAS;AAAA,QACT,aAAa;AAAA,QACb,MAAM,QAAQ;AAAA,QAEd,iBAAe,QAAQ;AAAA,QACvB,qBAAkB;AAAA,QAClB,mBAAiB;AAAA,QACjB,KAAK,QAAQ;AAAA,QACb;AAAA,QACA,iBAAe,WAAW,KAAK;AAAA,QAC9B,GAAG;AAAA,QACJ,KAAK;AAAA,QACJ,GAAI,QAAQ,IAAI,mBAAmB,SAAS,QAAQ,eACjD,QAAQ,aAAa,kBAAkB,IACvC;AAAA,UACE,UAAU;AACR,oBAAQ,QAAQ,CAAC,QAAQ,IAAI;AAAA,UAC/B;AAAA,QACF;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAM5B,MAAM,aAAa;AAEnB,MAAM,mBAAmB,OAAO,WAAW;AAAA,EACzC,MAAM;AAAA,EACN,YAAY;AACd,CAAC;AAMD,MAAM,cAAc,iBAAiB;AAAA,EACnC,MAAM;AAAA,IACJ,CACE;AAAA,MACE;AAAA,MACA,UAAU;AAAA,MACV;AAAA,IACF,GACA,iBACG;AAEH,YAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,YAAM,EAAE,6BAA6B,IAAI;AACzC,YAAM,eAAe,gBAAgB,cAAc,QAAQ,iBAAiB;AAE5E,YAAM,WAAW,gBAAgB,QAAQ;AACzC,YAAM,cAAc,CAAC,CAAC;AACtB,YAAM,sBACJ,QAAQ,UAAU,UAAa,gBAAgB,SAAY,cAAc;AAE3E,gCAA0B,MAAM;AAC9B,qCAA6B,WAAW;AAAA,MAC1C,GAAG,CAAC,8BAA8B,WAAW,CAAC;AAE9C,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,QAAQ;AAAA,UACd,KAAK;AAAA,UAGL,eAAc;AAAA,UAEb;AAAA;AAAA,MACH;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,YAAY,cAAc;AAMnB,MAAM,aAAa,OAAO,QAAQ;AAAA,EACvC,MAAM;AAAA;AAAA,EAEN,eAAe;AAAA,EACf,UAAU,oBAAC,aAAU,oBAAC;AACxB,CAAC;AAMD,MAAM,YAAY;AAQlB,MAAM,CAAC,2BAA2B,oBAAoB,IACpD,oBAA4C,SAAS;AAShD,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,OAAqC,iBAAiB;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,UAAU,iBAAiB,WAAW,aAAa;AACzD,UAAM,aAAa,QAAQ,UAAU;AACrC,UAAM,SAAS,MAAM;AAErB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,UAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS;AAC3D,UAAI,CAAC;AAAO;AACZ,UAAI,gBAAgB,aAAa;AAC/B,YAAI,SAAS;AACX,kBAAQ,QAAQ,KAAK,IAAI;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,sBAAgB,OAAO,KAAK;AAAA,IAC9B,GAAG,CAAC,OAAO,iBAAiB,KAAK,CAAC;AAElC,aAAS,eAAe;AACtB,uBAAiB,KAAK;AACtB,eAAS,KAAK;AACd,cAAQ,KAAK;AAAA,IACf;AAEA,UAAM,kBAAkB,QAAQ,eAC5B,QAAQ,aAAa,aAAa;AAAA,MAChC,eAAe;AACb,uBAAgB,UAAU;AAC1B,wBAAiB,UAAU;AAAA,MAC7B;AAAA,MACA,UAAU,OAAO;AACf,YACE,MAAM,QAAQ,WACb,MAAM,QAAQ,OAAO,EAAC,mCAAS,QAAQ,SACxC;AACA,gBAAM,eAAe;AACrB,uBAAa;AAAA,QACf,OAAO;AACL,yBAAgB,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,UAAU;AACR,YAAI,eAAgB,SAAS;AAC3B,2BAAiB,KAAK;AACtB,kBAAQ,KAAK;AAAA,QACf;AAAA,MACF;AAAA,MACA,YAAY;AACV,YAAI,CAAC,gBAAiB,SAAS;AAC7B;AAAA,QACF;AAEA,YAAI,eAAgB,SAAS;AAC3B,uBAAa;AAAA,QACf;AAIA,qBAAa,iBAAkB,OAAO;AACtC,yBAAkB,UAAU,WAAW,MAAM;AAC3C,yBAAgB,UAAU;AAAA,QAC5B,CAAC;AAAA,MACH;AAAA,IACF,CAAC,IACD;AAAA,MACE,SAAS;AAAA,IACX;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,QAAQ,UAAU;AAAA,QAClB;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,KAAI;AAAA,YACJ,cAAY;AAAA,YACZ,YAAU;AAAA,YACV,QAAO;AAAA,YACP,YAAU;AAAA,YACV,cAAc;AAAA,YACd,eAAe;AAAA,YACf,KAAK;AAAA,YACL,mBAAiB;AAAA,YACjB,iBAAe;AAAA,YACf,cAAY,aAAa,WAAW;AAAA,YACpC,iBAAe,YAAY;AAAA,YAC3B,iBAAe,WAAW,KAAK;AAAA,YAC/B,UAAU,WAAW,SAAY;AAAA,YACjC,MAAM,QAAQ;AAAA,YACb,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAMzB,MAAM,iBAAiB;AAEhB,MAAM,sBAAsB,OAAO,aAAa;AAAA,EACrD,MAAM;AAAA,EACN,YAAY;AACd,CAAC;AAID,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,OAAyC,iBAAiB;AACzD,UAAM,EAAE,eAAe,WAAW,GAAG,cAAc,IAAI;AACvD,UAAM,UAAU,iBAAiB,gBAAgB,aAAa;AAC9D,UAAM,cAAc,qBAAqB,gBAAgB,aAAa;AACtE,UAAM,MAAM,MAAM,OAA8B,IAAI;AACpD,UAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,UAAM,aAAa,QAAQ,YAAY,cAAc,QAAQ,SAAS;AAEtE,UAAM,WAAW,MAAM;AAAA,MACrB,MACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM,QAAQ;AAAA,UACd,IAAI,YAAY;AAAA,UACf,GAAG;AAAA,UACJ,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,MAGF,CAAC,OAAO,QAAQ,MAAM,WAAW,YAAY,MAAM;AAAA,IACrD;AAGA,8BAA0B,MAAM;AAC9B,UAAI,YAAY;AACd,gBAAQ,gBAAgB,QAAQ;AAAA,MAClC;AAAA,IAEF,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,WACE,gCACG,oBAgBH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAM7B,MAAM,sBAAsB;AAE5B,MAAM,2BAA2B,OAAO,QAAQ;AAAA,EAC9C,MAAM;AACR,CAAC;AAID,MAAM,sBAAsB,MAAM;AAAA,EAChC,CAAC,OAA8C,iBAAiB;AAC9D,UAAM,EAAE,eAAe,GAAG,mBAAmB,IAAI;AACjD,UAAM,cAAc,qBAAqB,qBAAqB,aAAa;AAC3E,WAAO,YAAY,aACjB,oBAAC,4BAAyB,eAAW,MAAE,GAAG,oBAAoB,KAAK,cAAc,IAC/E;AAAA,EACN;AACF;AAEA,oBAAoB,cAAc;AAMlC,MAAM,aAAa;AAInB,MAAM,CAAC,4BAA4B,qBAAqB,IACtD,oBAA6C,UAAU;AAElD,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAID,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM,EAAE,eAAe,GAAG,WAAW,IAAI;AACzC,UAAM,UAAU,MAAM;AACtB,WACE,oBAAC,8BAA2B,OAAO,eAAe,IAAI,WAAW,IAC/D;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,mBAAiB;AAAA,QAChB,GAAG;AAAA,QACJ,KAAK;AAAA;AAAA,IACP,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAM1B,MAAM,aAAa;AAInB,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM,EAAE,eAAe,GAAG,WAAW,IAAI;AACzC,UAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,UAAM,eAAe,sBAAsB,YAAY,aAAa;AACpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,eAAe;AAAA,QACf,YAAW;AAAA,QACX,IAAI,aAAa;AAAA,QACjB,MAAM,QAAQ;AAAA,QACb,GAAG;AAAA,QACJ,KAAK;AAAA;AAAA,IACP;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAMnB,MAAM,kBAAkB,OAAO,WAAW;AAAA,EAC/C,MAAM;AACR,CAAC;AAED,MAAM,wBAAwB,CAC5B,UAIG;AACH,QAAM,UAAU,iBAAiB,yBAAyB,MAAM,aAAa;AAC7E,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAC1E,QAAM,eAAe,OAAO,SAAS;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc,CAAC,QAAQ;AACrB,YAAI,aAAa,GAAG;AAClB,gBAAM,aAAa,GAAG;AAAA,QACxB;AAAA,MACF;AAAA,MACA,MAAM,QAAQ;AAAA,MACd,QAAQ,qBAAqB;AAAA,MAE5B,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,MAAM,kBAAkB,CAAC,UAA2B;AAClD,SAAO,gCAAG,gBAAM,UAAS;AAC3B;AAMO,MAAM,SAAS;AAAA,EACpB,CAAC,UAAoC;AACnC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,MAAM,WAAW;AAAA,MACjB;AAAA,IACF,IAAI;AAEJ,UAAM,KAAK,MAAM;AACjB,UAAM,WAAW,gBAAgB,OAAO,KAAK,aAAa,EAAE,CAAC,KAAK,KAAK;AAEvE,UAAM,EAAE,MAAM,cAAc,IAAI,eAAe;AAAA,MAC7C,UAAU,MAAM;AAAA,QACd,MAAM,oBAAC,cAAW,MAAM,GAAG,yBAAyB;AAAA,QACpD,CAAC,QAAQ;AAAA,MACX;AAAA,IACF,CAAC;AACD,UAAM,kBAAkB;AACxB,UAAM,UAAU,0BAA0B,eAAe;AACzD,UAAM,aAAa,WAAW,CAAC,QAAQ,kBAAkB;AACzD,UAAM,cAAc,MAAM,WAAW,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;AACtD,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAA0B,IAAI;AAE5E,UAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,MAC3C,MAAM;AAAA,MACN,aAAa,eAAe;AAAA,MAC5B,UAAU;AAAA,MACV,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C,MAAM;AAAA,MACN,aAAa,gBAAgB;AAAA,MAC7B,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,IACd,CAAC;AAED,UAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAwB,CAAC;AACrE,UAAM,mBAAmB,MAAM,OAAsB,IAAI;AACzD,UAAM,iBAAiB,MAAM,OAAsB,IAAI;AACvD,UAAM,iBAAiB,MAAM,OAAiB,CAAC,CAAC;AAChD,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,CAAC;AAC1D,UAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAA6B,IAAI;AACzE,UAAM,CAAC,sBAAsB,uBAAuB,IAAI,MAAM,SAAS,KAAK;AAE5E,8BAA0B,MAAM;AAC9B,uBAAiB,UAAU;AAC3B,qBAAe,UAAU;AAAA,IAC3B,CAAC;AAED,WACE,oBAAC,iBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,gBAAgB;AAAA,QAChB,MAAM;AAAA,QACN,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,mBAAmB;AAAA,QACnB,8BAA8B;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,iBAAiB,CAAC,OAAOA,WAAU;AACjC,yBAAe,QAAQ,KAAK,IAAIA;AAAA,QAClC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,8BAAC,yBAAsB,cAAc,SAAS,eAC5C;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH,GACF;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AAAA,EACA;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAGA,OAAO,cAAc;",
6
+ "names": ["value"]
7
+ }
@@ -0,0 +1,31 @@
1
+ import { Fragment, jsx } from "react/jsx-runtime";
2
+ import { FloatingOverlay, FloatingPortal } from "@floating-ui/react-dom-interactions";
3
+ import { Theme, useIsTouchDevice, useThemeName } from "@tamagui/core";
4
+ import { Dismissable } from "@tamagui/dismissable";
5
+ import { FocusScope } from "@tamagui/focus-scope";
6
+ import { useSelectContext } from "./context";
7
+ import { useShowSelectSheet } from "./useSelectBreakpointActive";
8
+ const CONTENT_NAME = "SelectContent";
9
+ const SelectContent = ({
10
+ children,
11
+ __scopeSelect,
12
+ zIndex = 1e3,
13
+ ...focusScopeProps
14
+ }) => {
15
+ const context = useSelectContext(CONTENT_NAME, __scopeSelect);
16
+ const themeName = useThemeName();
17
+ const showSheet = useShowSelectSheet(context);
18
+ const contents = /* @__PURE__ */ jsx(Theme, { forceClassName: true, name: themeName, children });
19
+ const touch = useIsTouchDevice();
20
+ if (showSheet) {
21
+ if (!context.open) {
22
+ return null;
23
+ }
24
+ return /* @__PURE__ */ jsx(Fragment, { children: contents });
25
+ }
26
+ return /* @__PURE__ */ jsx(FloatingPortal, { children: context.open ? /* @__PURE__ */ jsx(FloatingOverlay, { style: { zIndex }, lockScroll: !touch, children: /* @__PURE__ */ jsx(FocusScope, { loop: true, trapped: true, ...focusScopeProps, children: /* @__PURE__ */ jsx(Dismissable, { children: contents }) }) }) : /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: contents }) });
27
+ };
28
+ export {
29
+ SelectContent
30
+ };
31
+ //# sourceMappingURL=SelectContent.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/SelectContent.tsx"],
4
+ "sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport { Dismissable } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\n\nimport { useSelectContext } from './context'\nimport { SelectContentProps } from './types'\nimport { useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({\n children,\n __scopeSelect,\n zIndex = 1000,\n ...focusScopeProps\n}: SelectContentProps & FocusScopeProps) => {\n const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n const themeName = useThemeName()\n const showSheet = useShowSelectSheet(context)\n const contents = (\n <Theme forceClassName name={themeName}>\n {children}\n </Theme>\n )\n const touch = useIsTouchDevice()\n\n if (showSheet) {\n if (!context.open) {\n return null\n }\n return <>{contents}</>\n }\n\n return (\n <FloatingPortal>\n {context.open ? (\n <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>\n <FocusScope loop trapped {...focusScopeProps}>\n <Dismissable>{contents}</Dismissable>\n </FocusScope>\n </FloatingOverlay>\n ) : (\n <div style={{ display: 'none' }}>{contents}</div>\n )}\n </FloatingPortal>\n )\n}\n"],
5
+ "mappings": "AAyBI,SAUO,UAVP;AAzBJ,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,OAAO,kBAAkB,oBAAoB;AACtD,SAAS,mBAAmB;AAC5B,SAAS,kBAAmC;AAE5C,SAAS,wBAAwB;AAEjC,SAAS,0BAA0B;AAMnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAA4C;AAC1C,QAAM,UAAU,iBAAiB,cAAc,aAAa;AAC5D,QAAM,YAAY,aAAa;AAC/B,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,WACJ,oBAAC,SAAM,gBAAc,MAAC,MAAM,WACzB,UACH;AAEF,QAAM,QAAQ,iBAAiB;AAE/B,MAAI,WAAW;AACb,QAAI,CAAC,QAAQ,MAAM;AACjB,aAAO;AAAA,IACT;AACA,WAAO,gCAAG,oBAAS;AAAA,EACrB;AAEA,SACE,oBAAC,kBACE,kBAAQ,OACP,oBAAC,mBAAgB,OAAO,EAAE,OAAO,GAAG,YAAY,CAAC,OAC/C,8BAAC,cAAW,MAAI,MAAC,SAAO,MAAE,GAAG,iBAC3B,8BAAC,eAAa,oBAAS,GACzB,GACF,IAEA,oBAAC,SAAI,OAAO,EAAE,SAAS,OAAO,GAAI,oBAAS,GAE/C;AAEJ;",
6
+ "names": []
7
+ }
@@ -0,0 +1,7 @@
1
+ const SelectContent = ({ children }) => {
2
+ return children;
3
+ };
4
+ export {
5
+ SelectContent
6
+ };
7
+ //# sourceMappingURL=SelectContent.native.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/SelectContent.native.tsx"],
4
+ "sourcesContent": ["import { SelectContentProps } from './types'\n\nexport const SelectContent = ({ children }: SelectContentProps) => {\n return children\n}\n"],
5
+ "mappings": "AAEO,MAAM,gBAAgB,CAAC,EAAE,SAAS,MAA0B;AACjE,SAAO;AACT;",
6
+ "names": []
7
+ }