@tamagui/linear-gradient 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/BubbleSelect.js +44 -0
- package/dist/cjs/BubbleSelect.js.map +7 -0
- package/dist/cjs/LinearGradient.js +74 -0
- package/dist/cjs/LinearGradient.js.map +7 -0
- package/dist/cjs/Select.js +480 -0
- package/dist/cjs/Select.js.map +7 -0
- package/dist/cjs/SelectContent.js +76 -0
- package/dist/cjs/SelectContent.js.map +7 -0
- package/dist/cjs/SelectContent.native.js +31 -0
- package/dist/cjs/SelectContent.native.js.map +7 -0
- package/dist/cjs/SelectImpl.js +301 -0
- package/dist/cjs/SelectImpl.js.map +7 -0
- package/dist/cjs/SelectImpl.native.js +37 -0
- package/dist/cjs/SelectImpl.native.js.map +7 -0
- package/dist/cjs/SelectScrollButton.js +161 -0
- package/dist/cjs/SelectScrollButton.js.map +7 -0
- package/dist/cjs/SelectScrollButton.native.js +32 -0
- package/dist/cjs/SelectScrollButton.native.js.map +7 -0
- package/dist/cjs/SelectViewport.js +126 -0
- package/dist/cjs/SelectViewport.js.map +7 -0
- package/dist/cjs/SelectViewport.native.js +62 -0
- package/dist/cjs/SelectViewport.native.js.map +7 -0
- package/dist/cjs/constants.js +47 -0
- package/dist/cjs/constants.js.map +7 -0
- package/dist/cjs/context.js +49 -0
- package/dist/cjs/context.js.map +7 -0
- package/dist/cjs/index.js +19 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/linear-gradient.js +29 -0
- package/dist/cjs/linear-gradient.js.map +7 -0
- package/dist/cjs/types.js +17 -0
- package/dist/cjs/types.js.map +7 -0
- package/dist/cjs/useSelectBreakpointActive.js +39 -0
- package/dist/cjs/useSelectBreakpointActive.js.map +7 -0
- package/dist/esm/BubbleSelect.js +25 -0
- package/dist/esm/BubbleSelect.js.map +7 -0
- package/dist/esm/LinearGradient.js +51 -0
- package/dist/esm/LinearGradient.js.map +7 -0
- package/dist/esm/Select.js +452 -0
- package/dist/esm/Select.js.map +7 -0
- package/dist/esm/SelectContent.js +52 -0
- package/dist/esm/SelectContent.js.map +7 -0
- package/dist/esm/SelectContent.native.js +7 -0
- package/dist/esm/SelectContent.native.js.map +7 -0
- package/dist/esm/SelectImpl.js +286 -0
- package/dist/esm/SelectImpl.js.map +7 -0
- package/dist/esm/SelectImpl.native.js +13 -0
- package/dist/esm/SelectImpl.native.js.map +7 -0
- package/dist/esm/SelectScrollButton.js +130 -0
- package/dist/esm/SelectScrollButton.js.map +7 -0
- package/dist/esm/SelectScrollButton.native.js +7 -0
- package/dist/esm/SelectScrollButton.native.js.map +7 -0
- package/dist/esm/SelectViewport.js +95 -0
- package/dist/esm/SelectViewport.js.map +7 -0
- package/dist/esm/SelectViewport.native.js +32 -0
- package/dist/esm/SelectViewport.native.js.map +7 -0
- package/dist/esm/constants.js +17 -0
- package/dist/esm/constants.js.map +7 -0
- package/dist/esm/context.js +21 -0
- package/dist/esm/context.js.map +7 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/linear-gradient.js +5 -0
- package/dist/esm/linear-gradient.js.map +7 -0
- package/dist/esm/types.js +1 -0
- package/dist/esm/types.js.map +7 -0
- package/dist/esm/useSelectBreakpointActive.js +14 -0
- package/dist/esm/useSelectBreakpointActive.js.map +7 -0
- package/dist/jsx/BubbleSelect.js +25 -0
- package/dist/jsx/BubbleSelect.js.map +7 -0
- package/dist/jsx/LinearGradient.js +39 -0
- package/dist/jsx/LinearGradient.js.map +7 -0
- package/dist/jsx/Select.js +326 -0
- package/dist/jsx/Select.js.map +7 -0
- package/dist/jsx/SelectContent.js +30 -0
- package/dist/jsx/SelectContent.js.map +7 -0
- package/dist/jsx/SelectContent.native.js +7 -0
- package/dist/jsx/SelectContent.native.js.map +7 -0
- package/dist/jsx/SelectImpl.js +259 -0
- package/dist/jsx/SelectImpl.js.map +7 -0
- package/dist/jsx/SelectImpl.native.js +10 -0
- package/dist/jsx/SelectImpl.native.js.map +7 -0
- package/dist/jsx/SelectScrollButton.js +103 -0
- package/dist/jsx/SelectScrollButton.js.map +7 -0
- package/dist/jsx/SelectScrollButton.native.js +7 -0
- package/dist/jsx/SelectScrollButton.native.js.map +7 -0
- package/dist/jsx/SelectViewport.js +73 -0
- package/dist/jsx/SelectViewport.js.map +7 -0
- package/dist/jsx/SelectViewport.native.js +18 -0
- package/dist/jsx/SelectViewport.native.js.map +7 -0
- package/dist/jsx/constants.js +17 -0
- package/dist/jsx/constants.js.map +7 -0
- package/dist/jsx/context.js +15 -0
- package/dist/jsx/context.js.map +7 -0
- package/dist/jsx/index.js +2 -0
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/linear-gradient.js +5 -0
- package/dist/jsx/linear-gradient.js.map +7 -0
- package/dist/jsx/types.js +1 -0
- package/dist/jsx/types.js.map +7 -0
- package/dist/jsx/useSelectBreakpointActive.js +14 -0
- package/dist/jsx/useSelectBreakpointActive.js.map +7 -0
- package/package.json +43 -0
- package/src/LinearGradient.tsx +64 -0
- package/src/index.ts +1 -0
- package/src/linear-gradient.d.ts +3 -0
- package/src/linear-gradient.d.ts.map +1 -0
- package/src/linear-gradient.ts +2 -0
- package/types/LinearGradient.d.ts +10 -0
- package/types/index.d.ts +2 -0
- package/types/linear-gradient.d.ts +3 -0
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
import { Adapt, useAdaptParent } from "@tamagui/adapt";
|
|
2
|
+
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
3
|
+
import { isWeb } from "@tamagui/core";
|
|
4
|
+
import {
|
|
5
|
+
styled,
|
|
6
|
+
useGet,
|
|
7
|
+
useIsomorphicLayoutEffect,
|
|
8
|
+
withStaticProperties
|
|
9
|
+
} from "@tamagui/core";
|
|
10
|
+
import { useId } from "@tamagui/core";
|
|
11
|
+
import { ListItem } from "@tamagui/list-item";
|
|
12
|
+
import { PortalHost } from "@tamagui/portal";
|
|
13
|
+
import { Separator } from "@tamagui/separator";
|
|
14
|
+
import { ControlledSheet, SheetController } from "@tamagui/sheet";
|
|
15
|
+
import { XStack, YStack } from "@tamagui/stacks";
|
|
16
|
+
import { Paragraph, SizableText } from "@tamagui/text";
|
|
17
|
+
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
18
|
+
import * as React from "react";
|
|
19
|
+
import { SELECT_NAME } from "./constants";
|
|
20
|
+
import { SelectProvider, createSelectContext, useSelectContext } from "./context";
|
|
21
|
+
import { SelectContent } from "./SelectContent";
|
|
22
|
+
import { SelectInlineImpl } from "./SelectImpl";
|
|
23
|
+
import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButton";
|
|
24
|
+
import { SelectViewport } from "./SelectViewport";
|
|
25
|
+
import {
|
|
26
|
+
useSelectBreakpointActive,
|
|
27
|
+
useShowSelectSheet
|
|
28
|
+
} from "./useSelectBreakpointActive";
|
|
29
|
+
const TRIGGER_NAME = "SelectTrigger";
|
|
30
|
+
const SelectTrigger = React.forwardRef(
|
|
31
|
+
(props, forwardedRef) => {
|
|
32
|
+
const {
|
|
33
|
+
__scopeSelect,
|
|
34
|
+
disabled = false,
|
|
35
|
+
"aria-labelledby": ariaLabelledby,
|
|
36
|
+
...triggerProps
|
|
37
|
+
} = props;
|
|
38
|
+
const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
|
|
39
|
+
const labelledBy = ariaLabelledby;
|
|
40
|
+
return <ListItem componentName={TRIGGER_NAME} backgrounded radiused hoverTheme pressTheme focusTheme focusable borderWidth={1} size={context.size} aria-expanded={context.open} aria-autocomplete="none" aria-labelledby={labelledBy} dir={context.dir} disabled={disabled} data-disabled={disabled ? "" : void 0} {...triggerProps} ref={forwardedRef} {...process.env.TAMAGUI_TARGET === "web" && context.interactions ? context.interactions.getReferenceProps() : {
|
|
41
|
+
onPress() {
|
|
42
|
+
context.setOpen(!context.open);
|
|
43
|
+
}
|
|
44
|
+
}} />;
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
SelectTrigger.displayName = TRIGGER_NAME;
|
|
48
|
+
const VALUE_NAME = "SelectValue";
|
|
49
|
+
const SelectValueFrame = styled(Paragraph, {
|
|
50
|
+
name: VALUE_NAME,
|
|
51
|
+
selectable: false
|
|
52
|
+
});
|
|
53
|
+
const SelectValue = SelectValueFrame.extractable(
|
|
54
|
+
React.forwardRef(
|
|
55
|
+
({
|
|
56
|
+
__scopeSelect,
|
|
57
|
+
children: childrenProp,
|
|
58
|
+
placeholder
|
|
59
|
+
}, forwardedRef) => {
|
|
60
|
+
const context = useSelectContext(VALUE_NAME, __scopeSelect);
|
|
61
|
+
const { onValueNodeHasChildrenChange } = context;
|
|
62
|
+
const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
|
|
63
|
+
const children = childrenProp ?? context.selectedItem;
|
|
64
|
+
const hasChildren = !!children;
|
|
65
|
+
const selectValueChildren = context.value === void 0 && placeholder !== void 0 ? placeholder : children;
|
|
66
|
+
useIsomorphicLayoutEffect(() => {
|
|
67
|
+
onValueNodeHasChildrenChange(hasChildren);
|
|
68
|
+
}, [onValueNodeHasChildrenChange, hasChildren]);
|
|
69
|
+
return <SelectValueFrame size={context.size} ref={composedRefs} pointerEvents="none">{selectValueChildren}</SelectValueFrame>;
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
);
|
|
73
|
+
SelectValue.displayName = VALUE_NAME;
|
|
74
|
+
const SelectIcon = styled(XStack, {
|
|
75
|
+
name: "SelectIcon",
|
|
76
|
+
"aria-hidden": true,
|
|
77
|
+
children: <Paragraph>{"\u25BC"}</Paragraph>
|
|
78
|
+
});
|
|
79
|
+
const ITEM_NAME = "SelectItem";
|
|
80
|
+
const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
|
|
81
|
+
const SelectItem = React.forwardRef(
|
|
82
|
+
(props, forwardedRef) => {
|
|
83
|
+
const {
|
|
84
|
+
__scopeSelect,
|
|
85
|
+
value,
|
|
86
|
+
disabled = false,
|
|
87
|
+
textValue: textValueProp,
|
|
88
|
+
index,
|
|
89
|
+
...itemProps
|
|
90
|
+
} = props;
|
|
91
|
+
const context = useSelectContext(ITEM_NAME, __scopeSelect);
|
|
92
|
+
const isSelected = context.value === value;
|
|
93
|
+
const textId = useId();
|
|
94
|
+
const {
|
|
95
|
+
selectedIndex,
|
|
96
|
+
setSelectedIndex,
|
|
97
|
+
listRef,
|
|
98
|
+
open,
|
|
99
|
+
setOpen,
|
|
100
|
+
onChange,
|
|
101
|
+
setActiveIndex,
|
|
102
|
+
allowMouseUpRef,
|
|
103
|
+
allowSelectRef,
|
|
104
|
+
setValueAtIndex,
|
|
105
|
+
selectTimeoutRef,
|
|
106
|
+
dataRef
|
|
107
|
+
} = context;
|
|
108
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => {
|
|
109
|
+
if (!isWeb)
|
|
110
|
+
return;
|
|
111
|
+
if (node instanceof HTMLElement) {
|
|
112
|
+
if (listRef) {
|
|
113
|
+
listRef.current[index] = node;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
React.useEffect(() => {
|
|
118
|
+
setValueAtIndex(index, value);
|
|
119
|
+
}, [index, setValueAtIndex, value]);
|
|
120
|
+
function handleSelect() {
|
|
121
|
+
setSelectedIndex(index);
|
|
122
|
+
onChange(value);
|
|
123
|
+
setOpen(false);
|
|
124
|
+
}
|
|
125
|
+
const selectItemProps = context.interactions ? context.interactions.getItemProps({
|
|
126
|
+
onTouchStart() {
|
|
127
|
+
allowSelectRef.current = true;
|
|
128
|
+
allowMouseUpRef.current = false;
|
|
129
|
+
},
|
|
130
|
+
onKeyDown(event) {
|
|
131
|
+
if (event.key === "Enter" || event.key === " " && !dataRef?.current.typing) {
|
|
132
|
+
event.preventDefault();
|
|
133
|
+
handleSelect();
|
|
134
|
+
} else {
|
|
135
|
+
allowSelectRef.current = true;
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
onClick() {
|
|
139
|
+
if (allowSelectRef.current) {
|
|
140
|
+
setSelectedIndex(index);
|
|
141
|
+
setOpen(false);
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
onMouseUp() {
|
|
145
|
+
if (!allowMouseUpRef.current) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
if (allowSelectRef.current) {
|
|
149
|
+
handleSelect();
|
|
150
|
+
}
|
|
151
|
+
clearTimeout(selectTimeoutRef.current);
|
|
152
|
+
selectTimeoutRef.current = setTimeout(() => {
|
|
153
|
+
allowSelectRef.current = true;
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
}) : {
|
|
157
|
+
onPress: handleSelect
|
|
158
|
+
};
|
|
159
|
+
return <SelectItemContextProvider scope={__scopeSelect} value={value} textId={textId || ""} isSelected={isSelected}><ListItem backgrounded pressTheme cursor="" focusTheme outlineWidth={0} componentName={ITEM_NAME} ref={composedRefs} aria-labelledby={textId} aria-selected={isSelected} data-state={isSelected ? "active" : "inactive"} aria-disabled={disabled || void 0} data-disabled={disabled ? "" : void 0} tabIndex={disabled ? void 0 : -1} size={context.size} {...itemProps} {...selectItemProps} /></SelectItemContextProvider>;
|
|
160
|
+
}
|
|
161
|
+
);
|
|
162
|
+
SelectItem.displayName = ITEM_NAME;
|
|
163
|
+
const ITEM_TEXT_NAME = "SelectItemText";
|
|
164
|
+
const SelectItemTextFrame = styled(SizableText, {
|
|
165
|
+
name: ITEM_TEXT_NAME,
|
|
166
|
+
selectable: false
|
|
167
|
+
});
|
|
168
|
+
const SelectItemText = React.forwardRef(
|
|
169
|
+
(props, forwardedRef) => {
|
|
170
|
+
const { __scopeSelect, className, ...itemTextProps } = props;
|
|
171
|
+
const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
172
|
+
const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
173
|
+
const ref = React.useRef(null);
|
|
174
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
175
|
+
const isSelected = Boolean(itemContext.isSelected && context.valueNode);
|
|
176
|
+
const contents = React.useMemo(
|
|
177
|
+
() => <SelectItemTextFrame className={className} size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />,
|
|
178
|
+
[props, context.size, className, itemContext.textId]
|
|
179
|
+
);
|
|
180
|
+
React.useEffect(() => {
|
|
181
|
+
if (isSelected) {
|
|
182
|
+
context.setSelectedItem(contents);
|
|
183
|
+
}
|
|
184
|
+
}, [isSelected, contents]);
|
|
185
|
+
return <>{contents}</>;
|
|
186
|
+
}
|
|
187
|
+
);
|
|
188
|
+
SelectItemText.displayName = ITEM_TEXT_NAME;
|
|
189
|
+
const ITEM_INDICATOR_NAME = "SelectItemIndicator";
|
|
190
|
+
const SelectItemIndicatorFrame = styled(XStack, {
|
|
191
|
+
name: ITEM_TEXT_NAME
|
|
192
|
+
});
|
|
193
|
+
const SelectItemIndicator = React.forwardRef(
|
|
194
|
+
(props, forwardedRef) => {
|
|
195
|
+
const { __scopeSelect, ...itemIndicatorProps } = props;
|
|
196
|
+
const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
|
|
197
|
+
return itemContext.isSelected ? <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} /> : null;
|
|
198
|
+
}
|
|
199
|
+
);
|
|
200
|
+
SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
|
|
201
|
+
const GROUP_NAME = "SelectGroup";
|
|
202
|
+
const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
|
|
203
|
+
const SelectGroupFrame = styled(YStack, {
|
|
204
|
+
name: GROUP_NAME,
|
|
205
|
+
width: "100%"
|
|
206
|
+
});
|
|
207
|
+
const SelectGroup = React.forwardRef(
|
|
208
|
+
(props, forwardedRef) => {
|
|
209
|
+
const { __scopeSelect, ...groupProps } = props;
|
|
210
|
+
const groupId = useId();
|
|
211
|
+
return <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ""}><SelectGroupFrame role="group" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} /></SelectGroupContextProvider>;
|
|
212
|
+
}
|
|
213
|
+
);
|
|
214
|
+
SelectGroup.displayName = GROUP_NAME;
|
|
215
|
+
const LABEL_NAME = "SelectLabel";
|
|
216
|
+
const SelectLabel = React.forwardRef(
|
|
217
|
+
(props, forwardedRef) => {
|
|
218
|
+
const { __scopeSelect, ...labelProps } = props;
|
|
219
|
+
const context = useSelectContext(LABEL_NAME, __scopeSelect);
|
|
220
|
+
const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
|
|
221
|
+
return <ListItem componentName={LABEL_NAME} fontWeight="800" id={groupContext.id} size={context.size} {...labelProps} ref={forwardedRef} />;
|
|
222
|
+
}
|
|
223
|
+
);
|
|
224
|
+
SelectLabel.displayName = LABEL_NAME;
|
|
225
|
+
const SelectSeparator = styled(Separator, {
|
|
226
|
+
name: "SelectSeparator"
|
|
227
|
+
});
|
|
228
|
+
const SelectSheetController = (props) => {
|
|
229
|
+
const context = useSelectContext("SelectSheetController", props.__scopeSelect);
|
|
230
|
+
const showSheet = useShowSelectSheet(context);
|
|
231
|
+
const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
|
|
232
|
+
const getShowSheet = useGet(showSheet);
|
|
233
|
+
return <SheetController onOpenChange={(val) => {
|
|
234
|
+
if (getShowSheet()) {
|
|
235
|
+
props.onOpenChange(val);
|
|
236
|
+
}
|
|
237
|
+
}} open={context.open} hidden={breakpointActive === false}>{props.children}</SheetController>;
|
|
238
|
+
};
|
|
239
|
+
const SelectSheetImpl = (props) => {
|
|
240
|
+
return <>{props.children}</>;
|
|
241
|
+
};
|
|
242
|
+
const Select = withStaticProperties(
|
|
243
|
+
(props) => {
|
|
244
|
+
const {
|
|
245
|
+
__scopeSelect,
|
|
246
|
+
children,
|
|
247
|
+
open: openProp,
|
|
248
|
+
defaultOpen,
|
|
249
|
+
onOpenChange,
|
|
250
|
+
value: valueProp,
|
|
251
|
+
defaultValue,
|
|
252
|
+
onValueChange,
|
|
253
|
+
size: sizeProp = "$4",
|
|
254
|
+
dir
|
|
255
|
+
} = props;
|
|
256
|
+
const id = useId();
|
|
257
|
+
const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id;
|
|
258
|
+
const { when, AdaptProvider } = useAdaptParent({
|
|
259
|
+
Contents: React.useCallback(
|
|
260
|
+
() => <PortalHost name={`${scopeKey}SheetContents`} />,
|
|
261
|
+
[scopeKey]
|
|
262
|
+
)
|
|
263
|
+
});
|
|
264
|
+
const sheetBreakpoint = when;
|
|
265
|
+
const isSheet = useSelectBreakpointActive(sheetBreakpoint);
|
|
266
|
+
const SelectImpl = isSheet || !isWeb ? SelectSheetImpl : SelectInlineImpl;
|
|
267
|
+
const forceUpdate = React.useReducer(() => ({}), {})[1];
|
|
268
|
+
const [selectedItem, setSelectedItem] = React.useState(null);
|
|
269
|
+
const [open, setOpen] = useControllableState({
|
|
270
|
+
prop: openProp,
|
|
271
|
+
defaultProp: defaultOpen || false,
|
|
272
|
+
onChange: onOpenChange,
|
|
273
|
+
strategy: "most-recent-wins"
|
|
274
|
+
});
|
|
275
|
+
const [value, setValue] = useControllableState({
|
|
276
|
+
prop: valueProp,
|
|
277
|
+
defaultProp: defaultValue || "",
|
|
278
|
+
onChange: onValueChange,
|
|
279
|
+
strategy: "most-recent-wins",
|
|
280
|
+
transition: true
|
|
281
|
+
});
|
|
282
|
+
const [activeIndex, setActiveIndex] = React.useState(null);
|
|
283
|
+
const selectedIndexRef = React.useRef(null);
|
|
284
|
+
const activeIndexRef = React.useRef(null);
|
|
285
|
+
const listContentRef = React.useRef([]);
|
|
286
|
+
const [selectedIndex, setSelectedIndex] = React.useState(
|
|
287
|
+
Math.max(0, listContentRef.current.indexOf(value))
|
|
288
|
+
);
|
|
289
|
+
const [valueNode, setValueNode] = React.useState(null);
|
|
290
|
+
const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
|
|
291
|
+
useIsomorphicLayoutEffect(() => {
|
|
292
|
+
selectedIndexRef.current = selectedIndex;
|
|
293
|
+
activeIndexRef.current = activeIndex;
|
|
294
|
+
});
|
|
295
|
+
return <AdaptProvider><SelectProvider dir={dir} blockSelection={false} size={sizeProp} fallback={false} selectedItem={selectedItem} setSelectedItem={setSelectedItem} forceUpdate={forceUpdate} valueNode={valueNode} onValueNodeChange={setValueNode} onValueNodeHasChildrenChange={setValueNodeHasChildren} valueNodeHasChildren={valueNodeHasChildren} scopeKey={scopeKey} sheetBreakpoint={sheetBreakpoint} scope={__scopeSelect} setValueAtIndex={(index, value2) => {
|
|
296
|
+
listContentRef.current[index] = value2;
|
|
297
|
+
}} activeIndex={activeIndex} onChange={setValue} selectedIndex={selectedIndex} setActiveIndex={setActiveIndex} setOpen={setOpen} setSelectedIndex={setSelectedIndex} value={value} open={open}><SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}><SelectImpl activeIndexRef={activeIndexRef} listContentRef={listContentRef} selectedIndexRef={selectedIndexRef} {...props} open={open} value={value}>{children}</SelectImpl></SelectSheetController></SelectProvider></AdaptProvider>;
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
Adapt,
|
|
301
|
+
Content: SelectContent,
|
|
302
|
+
Group: SelectGroup,
|
|
303
|
+
Icon: SelectIcon,
|
|
304
|
+
Item: SelectItem,
|
|
305
|
+
ItemIndicator: SelectItemIndicator,
|
|
306
|
+
ItemText: SelectItemText,
|
|
307
|
+
Label: SelectLabel,
|
|
308
|
+
ScrollDownButton: SelectScrollDownButton,
|
|
309
|
+
ScrollUpButton: SelectScrollUpButton,
|
|
310
|
+
Trigger: SelectTrigger,
|
|
311
|
+
Value: SelectValue,
|
|
312
|
+
Viewport: SelectViewport,
|
|
313
|
+
Sheet: ControlledSheet
|
|
314
|
+
}
|
|
315
|
+
);
|
|
316
|
+
Select.displayName = SELECT_NAME;
|
|
317
|
+
export {
|
|
318
|
+
Select,
|
|
319
|
+
SelectGroupFrame,
|
|
320
|
+
SelectIcon,
|
|
321
|
+
SelectItem,
|
|
322
|
+
SelectItemTextFrame,
|
|
323
|
+
SelectSeparator,
|
|
324
|
+
SelectTrigger
|
|
325
|
+
};
|
|
326
|
+
//# sourceMappingURL=Select.js.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 selectable: false,\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 YStackProps {\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 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 selectable: false,\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 React.useEffect(() => {\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 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 = '$4',\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>(null)\n const selectedIndexRef = React.useRef<number | null>(null)\n const activeIndexRef = React.useRef<number | null>(null)\n\n const listContentRef = React.useRef<string[]>([])\n\n const [selectedIndex, setSelectedIndex] = React.useState(\n Math.max(0, listContentRef.current.indexOf(value))\n )\n\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": "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",
|
|
6
|
+
"names": ["value"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { FloatingOverlay, FloatingPortal } from "@floating-ui/react-dom-interactions";
|
|
2
|
+
import { Theme, useIsTouchDevice, useThemeName } from "@tamagui/core";
|
|
3
|
+
import { Dismissable } from "@tamagui/dismissable";
|
|
4
|
+
import { FocusScope } from "@tamagui/focus-scope";
|
|
5
|
+
import { useSelectContext } from "./context";
|
|
6
|
+
import { useShowSelectSheet } from "./useSelectBreakpointActive";
|
|
7
|
+
const CONTENT_NAME = "SelectContent";
|
|
8
|
+
const SelectContent = ({
|
|
9
|
+
children,
|
|
10
|
+
__scopeSelect,
|
|
11
|
+
zIndex = 1e3,
|
|
12
|
+
...focusScopeProps
|
|
13
|
+
}) => {
|
|
14
|
+
const context = useSelectContext(CONTENT_NAME, __scopeSelect);
|
|
15
|
+
const themeName = useThemeName();
|
|
16
|
+
const showSheet = useShowSelectSheet(context);
|
|
17
|
+
const contents = <Theme name={themeName}>{children}</Theme>;
|
|
18
|
+
const touch = useIsTouchDevice();
|
|
19
|
+
if (showSheet) {
|
|
20
|
+
if (!context.open) {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
return <>{contents}</>;
|
|
24
|
+
}
|
|
25
|
+
return <FloatingPortal>{context.open ? <FloatingOverlay style={{ zIndex }} lockScroll={!touch}><FocusScope loop trapped {...focusScopeProps}><Dismissable>{contents}</Dismissable></FocusScope></FloatingOverlay> : <div style={{ display: "none" }}>{contents}</div>}</FloatingPortal>;
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
SelectContent
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=SelectContent.js.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 = <Theme name={themeName}>{children}</Theme>\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": "AAAA,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,KACN;AACL,MAA4C;AAC1C,QAAM,UAAU,iBAAiB,cAAc,aAAa;AAC5D,QAAM,YAAY,aAAa;AAC/B,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,WAAW,CAAC,MAAM,MAAM,YAAY,SAAS,EAAjC;AAClB,QAAM,QAAQ,iBAAiB;AAE/B,MAAI,WAAW;AACb,QAAI,CAAC,QAAQ,MAAM;AACjB,aAAO;AAAA,IACT;AACA,WAAO,GAAG,SAAS;AAAA,EACrB;AAEA,SACE,CAAC,gBACE,QAAQ,OACP,CAAC,gBAAgB,OAAO,EAAE,OAAO,GAAG,YAAY,CAAC,OAC/C,CAAC,WAAW,KAAK,YAAY,iBAC3B,CAAC,aAAa,SAAS,EAAtB,YACH,EAFC,WAGH,EAJC,mBAMD,CAAC,IAAI,OAAO,EAAE,SAAS,OAAO,IAAI,SAAS,EAA1C,KAEL,EAVC;AAYL;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -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
|
+
}
|