@tamagui/select 1.0.1-beta.117 → 1.0.1-beta.120
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/Select.js +36 -32
- package/dist/cjs/Select.js.map +2 -2
- package/dist/cjs/SelectContent.js +2 -1
- package/dist/cjs/SelectContent.js.map +2 -2
- package/dist/cjs/SelectImpl.js +154 -284
- package/dist/cjs/SelectImpl.js.map +2 -2
- package/dist/cjs/SelectScrollButton.js +54 -40
- package/dist/cjs/SelectScrollButton.js.map +2 -2
- package/dist/cjs/SelectViewport.js +10 -6
- package/dist/cjs/SelectViewport.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/Select.js +36 -32
- package/dist/esm/Select.js.map +2 -2
- package/dist/esm/SelectContent.js +3 -2
- package/dist/esm/SelectContent.js.map +2 -2
- package/dist/esm/SelectImpl.js +158 -286
- package/dist/esm/SelectImpl.js.map +2 -2
- package/dist/esm/SelectScrollButton.js +54 -40
- package/dist/esm/SelectScrollButton.js.map +2 -2
- package/dist/esm/SelectViewport.js +10 -6
- package/dist/esm/SelectViewport.js.map +2 -2
- package/dist/jsx/Select.js +34 -34
- package/dist/jsx/Select.js.map +2 -2
- package/dist/jsx/SelectContent.js +3 -2
- package/dist/jsx/SelectContent.js.map +2 -2
- package/dist/jsx/SelectImpl.js +128 -266
- package/dist/jsx/SelectImpl.js.map +2 -2
- package/dist/jsx/SelectScrollButton.js +53 -39
- package/dist/jsx/SelectScrollButton.js.map +2 -2
- package/dist/jsx/SelectViewport.js +10 -6
- package/dist/jsx/SelectViewport.js.map +2 -2
- package/package.json +15 -15
- package/src/Select.tsx +47 -49
- package/src/SelectContent.tsx +4 -2
- package/src/SelectImpl.tsx +179 -369
- package/src/SelectScrollButton.tsx +72 -54
- package/src/SelectViewport.tsx +12 -6
- package/src/types.tsx +9 -1
- package/types/Select.d.ts +15 -15
- package/types/Select.d.ts.map +1 -1
- package/types/SelectContent.d.ts +0 -1
- package/types/SelectContent.d.ts.map +1 -1
- package/types/SelectImpl.d.ts.map +1 -1
- package/types/SelectViewport.d.ts +3 -3
- package/types/SelectViewport.d.ts.map +1 -1
- package/types/types.d.ts +9 -1
- package/types/types.d.ts.map +1 -1
- package/types/constants.d.ts +0 -8
- package/types/constants.d.ts.map +0 -1
package/dist/cjs/Select.js
CHANGED
|
@@ -127,8 +127,6 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
|
|
|
127
127
|
} = props;
|
|
128
128
|
const context = (0, import_context.useSelectContext)(ITEM_NAME, __scopeSelect);
|
|
129
129
|
const isSelected = context.value === value;
|
|
130
|
-
const [textValue, setTextValue] = React.useState(textValueProp ?? "");
|
|
131
|
-
const [isFocused, setIsFocused] = React.useState(false);
|
|
132
130
|
const textId = (0, import_core3.useId)();
|
|
133
131
|
const {
|
|
134
132
|
selectedIndex,
|
|
@@ -137,9 +135,11 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
|
|
|
137
135
|
open,
|
|
138
136
|
setOpen,
|
|
139
137
|
onChange,
|
|
140
|
-
activeIndex,
|
|
141
138
|
setActiveIndex,
|
|
139
|
+
allowMouseUpRef,
|
|
140
|
+
allowSelectRef,
|
|
142
141
|
setValueAtIndex,
|
|
142
|
+
selectTimeoutRef,
|
|
143
143
|
dataRef
|
|
144
144
|
} = context;
|
|
145
145
|
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => {
|
|
@@ -154,37 +154,42 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
|
|
|
154
154
|
React.useEffect(() => {
|
|
155
155
|
setValueAtIndex(index, value);
|
|
156
156
|
}, [index, setValueAtIndex, value]);
|
|
157
|
-
const timeoutRef = React.useRef();
|
|
158
|
-
const [allowMouseUp, setAllowMouseUp] = React.useState(false);
|
|
159
157
|
function handleSelect() {
|
|
160
158
|
setSelectedIndex(index);
|
|
161
159
|
onChange(value);
|
|
162
160
|
setOpen(false);
|
|
163
161
|
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
162
|
+
const selectItemProps = context.interactions ? context.interactions.getItemProps({
|
|
163
|
+
onTouchStart() {
|
|
164
|
+
allowSelectRef.current = true;
|
|
165
|
+
allowMouseUpRef.current = false;
|
|
166
|
+
},
|
|
167
|
+
onKeyDown(event) {
|
|
168
|
+
if (event.key === "Enter" || event.key === " " && !(dataRef == null ? void 0 : dataRef.current.typing)) {
|
|
169
|
+
event.preventDefault();
|
|
170
|
+
handleSelect();
|
|
169
171
|
} else {
|
|
170
|
-
|
|
171
|
-
setAllowMouseUp(true);
|
|
172
|
-
}, 300);
|
|
172
|
+
allowSelectRef.current = true;
|
|
173
173
|
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
174
|
+
},
|
|
175
|
+
onClick() {
|
|
176
|
+
if (allowSelectRef.current) {
|
|
177
|
+
setSelectedIndex(index);
|
|
178
|
+
setOpen(false);
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
onMouseUp() {
|
|
182
|
+
if (!allowMouseUpRef.current) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
if (allowSelectRef.current) {
|
|
186
|
+
handleSelect();
|
|
187
|
+
}
|
|
188
|
+
clearTimeout(selectTimeoutRef.current);
|
|
189
|
+
selectTimeoutRef.current = setTimeout(() => {
|
|
190
|
+
allowSelectRef.current = true;
|
|
191
|
+
});
|
|
182
192
|
}
|
|
183
|
-
}
|
|
184
|
-
const selectItemProps = context.interactions ? context.interactions.getItemProps({
|
|
185
|
-
onClick: allowMouseUp ? handleSelect : void 0,
|
|
186
|
-
onMouseUp: allowMouseUp ? handleSelect : void 0,
|
|
187
|
-
onKeyDown: handleKeyDown
|
|
188
193
|
}) : {
|
|
189
194
|
onPress: handleSelect
|
|
190
195
|
};
|
|
@@ -192,10 +197,7 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
|
|
|
192
197
|
scope: __scopeSelect,
|
|
193
198
|
value,
|
|
194
199
|
textId: textId || "",
|
|
195
|
-
isSelected
|
|
196
|
-
onItemTextChange: React.useCallback((node) => {
|
|
197
|
-
setTextValue((prevTextValue) => prevTextValue || ((node == null ? void 0 : node.textContent) ?? "").trim());
|
|
198
|
-
}, [])
|
|
200
|
+
isSelected
|
|
199
201
|
}, /* @__PURE__ */ React.createElement(import_list_item.ListItem, {
|
|
200
202
|
backgrounded: true,
|
|
201
203
|
pressTheme: true,
|
|
@@ -203,7 +205,7 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
|
|
|
203
205
|
componentName: ITEM_NAME,
|
|
204
206
|
ref: composedRefs,
|
|
205
207
|
"aria-labelledby": textId,
|
|
206
|
-
"aria-selected": isSelected
|
|
208
|
+
"aria-selected": isSelected,
|
|
207
209
|
"data-state": isSelected ? "active" : "inactive",
|
|
208
210
|
"aria-disabled": disabled || void 0,
|
|
209
211
|
"data-disabled": disabled ? "" : void 0,
|
|
@@ -224,7 +226,7 @@ const SelectItemText = React.forwardRef((props, forwardedRef) => {
|
|
|
224
226
|
const context = (0, import_context.useSelectContext)(ITEM_TEXT_NAME, __scopeSelect);
|
|
225
227
|
const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
226
228
|
const ref = React.useRef(null);
|
|
227
|
-
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref
|
|
229
|
+
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
228
230
|
const isSelected = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren;
|
|
229
231
|
const contents = /* @__PURE__ */ React.createElement(SelectItemTextFrame, {
|
|
230
232
|
className,
|
|
@@ -370,7 +372,9 @@ const Select = (0, import_core2.withStaticProperties)((props) => {
|
|
|
370
372
|
});
|
|
371
373
|
return /* @__PURE__ */ React.createElement(import_context.SelectProvider, {
|
|
372
374
|
dir,
|
|
375
|
+
blockSelection: false,
|
|
373
376
|
size: sizeProp,
|
|
377
|
+
fallback: false,
|
|
374
378
|
selectedItem,
|
|
375
379
|
setSelectedItem,
|
|
376
380
|
forceUpdate,
|
package/dist/cjs/Select.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Select.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, useMedia } from '@tamagui/core'\nimport { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } 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 { Sheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { SELECT_NAME } from './constants'\nimport { SelectProvider, createSelectContext, useSelectContext } from './context'\nimport { SelectContent } from './SelectContent'\nimport { SelectImplProps, SelectInlineImpl } from './SelectImpl'\nimport { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton'\nimport { SelectViewport } from './SelectViewport'\nimport { ScopedProps, SelectContextValue, SelectProps } from './types'\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 {...(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 { __scopeSelect, children: childrenProp, placeholder }: 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 hasChildren = childrenProp !== undefined\n const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n React.useLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n const children = childrenProp ?? context.selectedItem\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 {context.value === undefined && placeholder !== undefined ? placeholder : children}\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 onItemTextChange(node: TamaguiElement | null): void\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 [textValue, setTextValue] = React.useState(textValueProp ?? '')\n const [isFocused, setIsFocused] = React.useState(false)\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n activeIndex,\n setActiveIndex,\n setValueAtIndex,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(\n forwardedRef,\n (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n }\n // isSelected ? context.onSelectedItemChange : undefined\n )\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n const timeoutRef = React.useRef<any>()\n const [allowMouseUp, setAllowMouseUp] = React.useState(false)\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n React.useLayoutEffect(() => {\n clearTimeout(timeoutRef.current)\n if (open) {\n if (selectedIndex !== index) {\n setAllowMouseUp(true)\n } else {\n timeoutRef.current = setTimeout(() => {\n setAllowMouseUp(true)\n }, 300)\n }\n } else {\n setAllowMouseUp(false)\n }\n }, [open, index, setActiveIndex, selectedIndex])\n\n function handleKeyDown(event: React.KeyboardEvent) {\n if (event.key === 'Enter' || (event.key === ' ' && !dataRef?.current.typing)) {\n event.preventDefault()\n handleSelect()\n }\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onClick: allowMouseUp ? handleSelect : undefined,\n onMouseUp: allowMouseUp ? handleSelect : undefined,\n onKeyDown: handleKeyDown,\n })\n : {\n onPress: handleSelect,\n }\n\n return (\n <SelectItemContextProvider\n scope={__scopeSelect}\n value={value}\n textId={textId || ''}\n isSelected={isSelected}\n onItemTextChange={React.useCallback((node) => {\n // @ts-ignore\n setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? '').trim())\n }, [])}\n >\n <ListItem\n backgrounded\n pressTheme\n focusTheme\n componentName={ITEM_NAME}\n ref={composedRefs}\n aria-labelledby={textId}\n // `isFocused` caveat fixes stuttering in VoiceOver\n aria-selected={isSelected && isFocused}\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(Paragraph, {\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, itemContext.onItemTextChange)\n const isSelected = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n\n const contents = (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n if (!isWeb) {\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected])\n }\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\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\nexport const useSelectBreakpointActive = (\n sheetBreakpoint: SelectContextValue['sheetBreakpoint']\n) => {\n const media = useMedia()\n return sheetBreakpoint ? media[sheetBreakpoint] : false\n}\n\nexport const useShowSelectSheet = (context: SelectContextValue) => {\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onChangeOpen: 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 onChangeOpen={(val) => {\n if (getShowSheet()) {\n props.onChangeOpen(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'SelectSheetContents'\n\nexport const SelectSheetContents = ({ __scopeSelect }: ScopedProps<{}>) => {\n const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect)\n return <PortalHost name={`${context.scopeKey}SheetContents`} />\n}\n\nSelectSheetContents.displayName = SHEET_CONTENTS_NAME\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 sheetBreakpoint = false,\n dir,\n } = props\n\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet ? 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 })\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue || '',\n onChange: onValueChange,\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 <SelectProvider\n dir={dir}\n size={sizeProp}\n selectedItem={selectedItem}\n setSelectedItem={setSelectedItem}\n forceUpdate={forceUpdate}\n valueNode={valueNode}\n onValueNodeChange={setValueNode}\n onValueNodeHasChildrenChange={setValueNodeHasChildren}\n valueNodeHasChildren={valueNodeHasChildren}\n scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ''}\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 onChangeOpen={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 )\n },\n {\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 SheetContents: SelectSheetContents,\n Sheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAgC;AAChC,kBAA0D;AAC1D,mBAAgF;AAChF,mBAAsB;AACtB,uBAAwC;AACxC,oBAA2B;AAC3B,uBAA0B;AAC1B,mBAAuC;AACvC,oBAA4C;AAC5C,kBAA0B;AAC1B,oCAAqC;AACrC,YAAuB;AACvB,eAA0B;AAE1B,uBAA4B;AAC5B,qBAAsE;AACtE,2BAA8B;AAC9B,wBAAkD;AAClD,gCAA6D;AAC7D,4BAA+B;AAO/B,MAAM,eAAe;AAId,MAAM,gBAAgB,MAAM,WACjC,CAAC,OAAwC,iBAAiB;AACxD,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IAEX,mBAAmB;AAAA,OAChB;AAAA,MACD;AACJ,QAAM,UAAU,qCAAiB,cAAc,aAAa;AAI5D,QAAM,aAAa;AAEnB,SACE,oCAAC;AAAA,IACC,eAAe;AAAA,IACf,cAAY;AAAA,IACZ,UAAQ;AAAA,IACR,YAAU;AAAA,IACV,YAAU;AAAA,IACV,YAAU;AAAA,IACV,WAAS;AAAA,IACT,aAAa;AAAA,IACb,MAAM,QAAQ;AAAA,IAEd,iBAAe,QAAQ;AAAA,IACvB,qBAAkB;AAAA,IAClB,mBAAiB;AAAA,IACjB,KAAK,QAAQ;AAAA,IACb;AAAA,IACA,iBAAe,WAAW,KAAK;AAAA,IAC9B,GAAG;AAAA,IACJ,KAAK;AAAA,IACJ,GAAI,QAAQ,eACT,QAAQ,aAAa,kBAAkB,IACvC;AAAA,MACE,UAAU;AACR,gBAAQ,QAAQ,CAAC,QAAQ,IAAI;AAAA,MAC/B;AAAA,IACF;AAAA,GACN;AAEJ,CACF;AAEA,cAAc,cAAc;AAM5B,MAAM,aAAa;AAEnB,MAAM,mBAAmB,yBAAO,uBAAW;AAAA,EACzC,MAAM;AAAA,EACN,YAAY;AACd,CAAC;AAMD,MAAM,cAAc,iBAAiB,YACnC,MAAM,WACJ,CACE,EAAE,eAAe,UAAU,cAAc,eACzC,iBACG;AAEH,QAAM,UAAU,qCAAiB,YAAY,aAAa;AAC1D,QAAM,EAAE,iCAAiC;AACzC,QAAM,cAAc,iBAAiB;AACrC,QAAM,eAAe,yCAAgB,cAAc,QAAQ,iBAAiB;AAE5E,QAAM,gBAAgB,MAAM;AAC1B,iCAA6B,WAAW;AAAA,EAC1C,GAAG,CAAC,8BAA8B,WAAW,CAAC;AAE9C,QAAM,WAAW,gBAAgB,QAAQ;AAEzC,SACE,oCAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IACd,KAAK;AAAA,IAGL,eAAc;AAAA,KAEb,QAAQ,UAAU,UAAa,gBAAgB,SAAY,cAAc,QAC5E;AAEJ,CACF,CACF;AAEA,YAAY,cAAc;AAMnB,MAAM,aAAa,yBAAO,sBAAQ;AAAA,EACvC,MAAM;AAAA,EAEN,eAAe;AAAA,EACf,UAAU,oCAAC,6BAAU,QAAC;AACxB,CAAC;AAMD,MAAM,YAAY;
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, useMedia } from '@tamagui/core'\nimport { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } 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 { Sheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { SELECT_NAME } from './constants'\nimport { SelectProvider, createSelectContext, useSelectContext } from './context'\nimport { SelectContent } from './SelectContent'\nimport { SelectImplProps, SelectInlineImpl } from './SelectImpl'\nimport { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton'\nimport { SelectViewport } from './SelectViewport'\nimport { ScopedProps, SelectContextValue, SelectProps } from './types'\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 {...(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 { __scopeSelect, children: childrenProp, placeholder }: 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 hasChildren = childrenProp !== undefined\n const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n React.useLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n const children = childrenProp ?? context.selectedItem\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 {context.value === undefined && placeholder !== undefined ? placeholder : children}\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 (event.key === 'Enter' || (event.key === ' ' && !dataRef?.current.typing)) {\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 focusTheme\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(Paragraph, {\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 = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n\n const contents = (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n if (!isWeb) {\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected])\n }\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\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\nexport const useSelectBreakpointActive = (\n sheetBreakpoint: SelectContextValue['sheetBreakpoint']\n) => {\n const media = useMedia()\n return sheetBreakpoint ? media[sheetBreakpoint] : false\n}\n\nexport const useShowSelectSheet = (context: SelectContextValue) => {\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onChangeOpen: 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 onChangeOpen={(val) => {\n if (getShowSheet()) {\n props.onChangeOpen(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'SelectSheetContents'\n\nexport const SelectSheetContents = ({ __scopeSelect }: ScopedProps<{}>) => {\n const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect)\n return <PortalHost name={`${context.scopeKey}SheetContents`} />\n}\n\nSelectSheetContents.displayName = SHEET_CONTENTS_NAME\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 sheetBreakpoint = false,\n dir,\n } = props\n\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet ? 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 })\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue || '',\n onChange: onValueChange,\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 <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={__scopeSelect ? Object.keys(__scopeSelect)[0] : ''}\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 onChangeOpen={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 )\n },\n {\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 SheetContents: SelectSheetContents,\n Sheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,11 +37,12 @@ const SelectContent = ({ children, __scopeSelect }) => {
|
|
|
37
37
|
const contents = /* @__PURE__ */ React.createElement(import_core.Theme, {
|
|
38
38
|
name: themeName
|
|
39
39
|
}, children);
|
|
40
|
+
const touch = (0, import_core.useIsTouchDevice)();
|
|
40
41
|
if (showSheet && context.open) {
|
|
41
42
|
return contents;
|
|
42
43
|
}
|
|
43
44
|
return /* @__PURE__ */ React.createElement(import_react_dom_interactions.FloatingPortal, null, context.open ? /* @__PURE__ */ React.createElement(import_react_dom_interactions.FloatingOverlay, {
|
|
44
|
-
lockScroll:
|
|
45
|
+
lockScroll: !touch
|
|
45
46
|
}, contents) : /* @__PURE__ */ React.createElement("div", {
|
|
46
47
|
style: { display: "none" }
|
|
47
48
|
}, contents));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useThemeName } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { useSelectContext } from './context'\nimport { useShowSelectSheet } from './Select'\nimport { SelectContentProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({ children, __scopeSelect }: SelectContentProps) => {\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\n if (showSheet && context.open) {\n return contents\n }\n\n return (\n <FloatingPortal>\n {context.open ? (\n <FloatingOverlay lockScroll>{contents}</FloatingOverlay>\n ) : (\n <div style={{ display: 'none' }}>{contents}</div>\n )}\n </FloatingPortal>\n )\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAAgD;AAChD,
|
|
4
|
+
"sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { useSelectContext } from './context'\nimport { useShowSelectSheet } from './Select'\nimport { SelectContentProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({ children, __scopeSelect }: SelectContentProps) => {\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 && context.open) {\n return contents\n }\n\n return (\n <FloatingPortal>\n {context.open ? (\n // TODO inside overlay <FloatingFocusManager context={context} preventTabbing>\n <FloatingOverlay lockScroll={!touch}>{contents}</FloatingOverlay>\n ) : (\n <div style={{ display: 'none' }}>{contents}</div>\n )}\n </FloatingPortal>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAAgD;AAChD,kBAAsD;AACtD,YAAuB;AAEvB,qBAAiC;AACjC,oBAAmC;AAOnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC,EAAE,UAAU,oBAAwC;AAChF,QAAM,UAAU,qCAAiB,cAAc,aAAa;AAC5D,QAAM,YAAY,8BAAa;AAC/B,QAAM,YAAY,sCAAmB,OAAO;AAC5C,QAAM,WAAW,oCAAC;AAAA,IAAM,MAAM;AAAA,KAAY,QAAS;AACnD,QAAM,QAAQ,kCAAiB;AAE/B,MAAI,aAAa,QAAQ,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,oCAAC,oDACE,QAAQ,OAEP,oCAAC;AAAA,IAAgB,YAAY,CAAC;AAAA,KAAQ,QAAS,IAE/C,oCAAC;AAAA,IAAI,OAAO,EAAE,SAAS,OAAO;AAAA,KAAI,QAAS,CAE/C;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|