@tamagui/select 1.0.3 → 1.0.5
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 +1 -1
- package/dist/cjs/Select.js.map +1 -1
- package/dist/cjs/SelectContent.js +1 -0
- package/dist/cjs/SelectContent.js.map +2 -2
- package/dist/cjs/SelectImpl.js +1 -1
- package/dist/cjs/SelectImpl.js.map +2 -2
- package/dist/esm/Select.js +1 -1
- package/dist/esm/Select.js.map +1 -1
- package/dist/esm/SelectContent.js +1 -0
- package/dist/esm/SelectContent.js.map +2 -2
- package/dist/esm/SelectImpl.js +1 -1
- package/dist/esm/SelectImpl.js.map +2 -2
- package/dist/jsx/Select.js +1 -1
- package/dist/jsx/Select.js.map +1 -1
- package/dist/jsx/SelectContent.js +1 -1
- package/dist/jsx/SelectContent.js.map +2 -2
- package/dist/jsx/SelectImpl.js +1 -1
- package/dist/jsx/SelectImpl.js.map +2 -2
- package/package.json +15 -15
- package/src/Select.tsx +1 -1
- package/src/SelectContent.tsx +5 -1
- package/src/SelectImpl.tsx +1 -1
package/dist/cjs/Select.js
CHANGED
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 { 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"],
|
|
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 = '$true',\n dir,\n } = props\n\n const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(\n () => <PortalHost name={`${scopeKey}SheetContents`} />,\n [scopeKey]\n ),\n })\n const sheetBreakpoint = when\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet || !isWeb ? SelectSheetImpl : SelectInlineImpl\n const forceUpdate = React.useReducer(() => ({}), {})[1]\n const [selectedItem, setSelectedItem] = React.useState<React.ReactNode>(null)\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n strategy: 'most-recent-wins',\n })\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue || '',\n onChange: onValueChange,\n strategy: 'most-recent-wins',\n transition: true,\n })\n\n const [activeIndex, setActiveIndex] = React.useState<number | null>(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
5
|
"mappings": "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",
|
|
6
6
|
"names": ["import_core", "value"]
|
|
7
7
|
}
|
|
@@ -39,6 +39,7 @@ const SelectContent = ({
|
|
|
39
39
|
const themeName = (0, import_core.useThemeName)();
|
|
40
40
|
const showSheet = (0, import_useSelectBreakpointActive.useShowSelectSheet)(context);
|
|
41
41
|
const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
|
|
42
|
+
forceClassName: true,
|
|
42
43
|
name: themeName,
|
|
43
44
|
children
|
|
44
45
|
});
|
|
@@ -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, 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}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport { Dismissable } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\n\nimport { useSelectContext } from './context'\nimport { SelectContentProps } from './types'\nimport { useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({\n children,\n __scopeSelect,\n zIndex = 1000,\n ...focusScopeProps\n}: SelectContentProps & FocusScopeProps) => {\n const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n const themeName = useThemeName()\n const showSheet = useShowSelectSheet(context)\n const contents = (\n <Theme forceClassName name={themeName}>\n {children}\n </Theme>\n )\n const touch = useIsTouchDevice()\n\n if (showSheet) {\n if (!context.open) {\n return null\n }\n return <>{contents}</>\n }\n\n return (\n <FloatingPortal>\n {context.open ? (\n <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>\n <FocusScope loop trapped {...focusScopeProps}>\n <Dismissable>{contents}</Dismissable>\n </FocusScope>\n </FloatingOverlay>\n ) : (\n <div style={{ display: 'none' }}>{contents}</div>\n )}\n </FloatingPortal>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBI;AAzBJ,oCAAgD;AAChD,kBAAsD;AACtD,yBAA4B;AAC5B,yBAA4C;AAE5C,qBAAiC;AAEjC,uCAAmC;AAMnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,KACN;AACL,MAA4C;AAC1C,QAAM,cAAU,iCAAiB,cAAc,aAAa;AAC5D,QAAM,gBAAY,0BAAa;AAC/B,QAAM,gBAAY,qDAAmB,OAAO;AAC5C,QAAM,WACJ,4CAAC;AAAA,IAAM,gBAAc;AAAA,IAAC,MAAM;AAAA,IACzB;AAAA,GACH;AAEF,QAAM,YAAQ,8BAAiB;AAE/B,MAAI,WAAW;AACb,QAAI,CAAC,QAAQ,MAAM;AACjB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,MAAG;AAAA,KAAS;AAAA,EACrB;AAEA,SACE,4CAAC;AAAA,IACE,kBAAQ,OACP,4CAAC;AAAA,MAAgB,OAAO,EAAE,OAAO;AAAA,MAAG,YAAY,CAAC;AAAA,MAC/C,sDAAC;AAAA,QAAW,MAAI;AAAA,QAAC,SAAO;AAAA,QAAE,GAAG;AAAA,QAC3B,sDAAC;AAAA,UAAa;AAAA,SAAS;AAAA,OACzB;AAAA,KACF,IAEA,4CAAC;AAAA,MAAI,OAAO,EAAE,SAAS,OAAO;AAAA,MAAI;AAAA,KAAS;AAAA,GAE/C;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/SelectImpl.js
CHANGED
|
@@ -113,7 +113,7 @@ const SelectInlineImpl = (props) => {
|
|
|
113
113
|
const { x, y, reference, floating, strategy, context, refs } = (0, import_react_dom_interactions.useFloating)({
|
|
114
114
|
open,
|
|
115
115
|
onOpenChange: setOpen,
|
|
116
|
-
whileElementsMounted: import_react_dom_interactions.autoUpdate,
|
|
116
|
+
whileElementsMounted: open ? import_react_dom_interactions.autoUpdate : void 0,
|
|
117
117
|
placement: "bottom-start",
|
|
118
118
|
middleware: fallback ? [
|
|
119
119
|
(0, import_react_dom_interactions.offset)(5),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { SelectImplProps } from './types'\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const {\n __scopeSelect,\n children,\n open = false,\n selectedIndexRef,\n listContentRef,\n } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const {\n setActiveIndex,\n setOpen,\n setSelectedIndex,\n selectedIndex,\n activeIndex,\n forceUpdate,\n } = selectContext\n const [scrollTop, setScrollTop] = React.useState(0)\n const touch = useIsTouchDevice()\n\n const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n const overflowRef = React.useRef<null | SideObject>(null)\n const upArrowRef = React.useRef<HTMLDivElement | null>(null)\n const downArrowRef = React.useRef<HTMLDivElement | null>(null)\n const allowSelectRef = React.useRef(false)\n const allowMouseUpRef = React.useRef(true)\n const selectTimeoutRef = React.useRef<any>()\n const state = React.useRef({\n isMouseOutside: false,\n })\n\n const [controlledScrolling, setControlledScrolling] = React.useState(false)\n const [fallback, setFallback] = React.useState(false)\n const [innerOffset, setInnerOffset] = React.useState(0)\n const [blockSelection, setBlockSelection] = React.useState(false)\n const floatingStyle = React.useRef({})\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n if (!open) {\n setScrollTop(0)\n setFallback(false)\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => {\n cancelAnimationFrame(frame)\n }\n }, [open, setActiveIndex])\n\n // close when mouseup outside select\n if (isWeb) {\n React.useEffect(() => {\n if (!open) return\n const mouseUp = (e: MouseEvent) => {\n if (state.current.isMouseOutside) {\n setOpen(false)\n }\n }\n document.addEventListener('mouseup', mouseUp)\n return () => {\n document.removeEventListener('mouseup', mouseUp)\n }\n }, [open])\n }\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n whileElementsMounted: autoUpdate,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight -\n floatingRef.current.clientHeight -\n SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (\n event.key === 'Enter' ||\n (event.key === ' ' && !context.dataRef.current.typing)\n ) {\n event.preventDefault()\n setOpen(true)\n }\n },\n })\n },\n getFloatingProps(props) {\n return interactions.getFloatingProps({\n ref: floating,\n className: 'Select',\n ...props,\n style: {\n position: strategy,\n top: y ?? '',\n left: x ?? '',\n outline: 0,\n listStyleType: 'none',\n scrollbarWidth: 'none',\n ...floatingStyle.current,\n ...props?.style,\n },\n onPointerEnter() {\n setControlledScrolling(false)\n state.current.isMouseOutside = false\n },\n onPointerLeave() {\n state.current.isMouseOutside = true\n },\n onPointerMove() {\n state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !(\n refs.floating.current?.contains(target) ||\n upArrowRef.current?.contains(target) ||\n downArrowRef.current?.contains(target)\n )\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyTI;AAzTJ,oCAgBO;AACP,kBAAmE;AACnE,YAAuB;AACvB,uBAA0B;AAE1B,uBAAuD;AACvD,qBAAiD;AAI1C,MAAM,mBAAmB,CAAC,UAA2B;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,oBAAgB,iCAAiB,mBAAmB,aAAa;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,CAAC;AAClD,QAAM,YAAQ,8BAAiB;AAE/B,QAAM,eAAe,MAAM,OAAkC,CAAC,CAAC;AAC/D,QAAM,cAAc,MAAM,OAA0B,IAAI;AACxD,QAAM,aAAa,MAAM,OAA8B,IAAI;AAC3D,QAAM,eAAe,MAAM,OAA8B,IAAI;AAC7D,QAAM,iBAAiB,MAAM,OAAO,KAAK;AACzC,QAAM,kBAAkB,MAAM,OAAO,IAAI;AACzC,QAAM,mBAAmB,MAAM,OAAY;AAC3C,QAAM,QAAQ,MAAM,OAAO;AAAA,IACzB,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,MAAM,SAAS,KAAK;AAC1E,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AACpD,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,CAAC;AACtD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM,SAAS,KAAK;AAChE,QAAM,gBAAgB,MAAM,OAAO,CAAC,CAAC;AAIrC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,sBAAsB,MAAM;AACxC,UAAI,CAAC,MAAM;AACT,qBAAa,CAAC;AACd,oBAAY,KAAK;AACjB,uBAAe,IAAI;AACnB,+BAAuB,KAAK;AAAA,MAC9B;AAAA,IACF,CAAC;AACD,WAAO,MAAM;AACX,2BAAqB,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,MAAM,cAAc,CAAC;AAGzB,MAAI,mBAAO;AACT,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC;AAAM;AACX,YAAM,UAAU,CAAC,MAAkB;AACjC,YAAI,MAAM,QAAQ,gBAAgB;AAChC,kBAAQ,KAAK;AAAA,QACf;AAAA,MACF;AACA,eAAS,iBAAiB,WAAW,OAAO;AAC5C,aAAO,MAAM;AACX,iBAAS,oBAAoB,WAAW,OAAO;AAAA,MACjD;AAAA,IACF,GAAG,CAAC,IAAI,CAAC;AAAA,EACX;AAEA,QAAM,yBAAqB,oCAAK;AAAA,IAC9B,MAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACL,WAAW,EAAE,MAAM;AAAA,MACrB;AAAA,IACF,GAAG;AACD,oBAAc,UAAU;AAAA,QACtB;AAAA,QACA,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,EAAE,GAAG,GAAG,WAAW,UAAU,UAAU,SAAS,KAAK,QAAI,2CAAY;AAAA,IACzE;AAAA,IACA,cAAc;AAAA,IACd,sBAAsB;AAAA,
|
|
4
|
+
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { SelectImplProps } from './types'\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const {\n __scopeSelect,\n children,\n open = false,\n selectedIndexRef,\n listContentRef,\n } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const {\n setActiveIndex,\n setOpen,\n setSelectedIndex,\n selectedIndex,\n activeIndex,\n forceUpdate,\n } = selectContext\n const [scrollTop, setScrollTop] = React.useState(0)\n const touch = useIsTouchDevice()\n\n const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n const overflowRef = React.useRef<null | SideObject>(null)\n const upArrowRef = React.useRef<HTMLDivElement | null>(null)\n const downArrowRef = React.useRef<HTMLDivElement | null>(null)\n const allowSelectRef = React.useRef(false)\n const allowMouseUpRef = React.useRef(true)\n const selectTimeoutRef = React.useRef<any>()\n const state = React.useRef({\n isMouseOutside: false,\n })\n\n const [controlledScrolling, setControlledScrolling] = React.useState(false)\n const [fallback, setFallback] = React.useState(false)\n const [innerOffset, setInnerOffset] = React.useState(0)\n const [blockSelection, setBlockSelection] = React.useState(false)\n const floatingStyle = React.useRef({})\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n if (!open) {\n setScrollTop(0)\n setFallback(false)\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => {\n cancelAnimationFrame(frame)\n }\n }, [open, setActiveIndex])\n\n // close when mouseup outside select\n if (isWeb) {\n React.useEffect(() => {\n if (!open) return\n const mouseUp = (e: MouseEvent) => {\n if (state.current.isMouseOutside) {\n setOpen(false)\n }\n }\n document.addEventListener('mouseup', mouseUp)\n return () => {\n document.removeEventListener('mouseup', mouseUp)\n }\n }, [open])\n }\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n whileElementsMounted: open ? autoUpdate : undefined,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight -\n floatingRef.current.clientHeight -\n SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (\n event.key === 'Enter' ||\n (event.key === ' ' && !context.dataRef.current.typing)\n ) {\n event.preventDefault()\n setOpen(true)\n }\n },\n })\n },\n getFloatingProps(props) {\n return interactions.getFloatingProps({\n ref: floating,\n className: 'Select',\n ...props,\n style: {\n position: strategy,\n top: y ?? '',\n left: x ?? '',\n outline: 0,\n listStyleType: 'none',\n scrollbarWidth: 'none',\n ...floatingStyle.current,\n ...props?.style,\n },\n onPointerEnter() {\n setControlledScrolling(false)\n state.current.isMouseOutside = false\n },\n onPointerLeave() {\n state.current.isMouseOutside = true\n },\n onPointerMove() {\n state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !(\n refs.floating.current?.contains(target) ||\n upArrowRef.current?.contains(target) ||\n downArrowRef.current?.contains(target)\n )\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/esm/Select.js
CHANGED
package/dist/esm/Select.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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"],
|
|
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 = '$true',\n dir,\n } = props\n\n const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(\n () => <PortalHost name={`${scopeKey}SheetContents`} />,\n [scopeKey]\n ),\n })\n const sheetBreakpoint = when\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet || !isWeb ? SelectSheetImpl : SelectInlineImpl\n const forceUpdate = React.useReducer(() => ({}), {})[1]\n const [selectedItem, setSelectedItem] = React.useState<React.ReactNode>(null)\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n strategy: 'most-recent-wins',\n })\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue || '',\n onChange: onValueChange,\n strategy: 'most-recent-wins',\n transition: true,\n })\n\n const [activeIndex, setActiveIndex] = React.useState<number | null>(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
5
|
"mappings": "AAuDM,SAmSA,UAnSA;AAvDN,SAAS,OAAO,sBAAsB;AACtC,SAAS,uBAAuB;AAChC,SAA6C,aAAa;AAC1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,gBAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,QAAQ,cAA2B;AAC5C,SAAS,WAAW,mBAAmB;AACvC,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,qBAAqB,wBAAwB;AACtE,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,sBAAsB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMP,MAAM,eAAe;AAId,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,OAAwC,iBAAiB;AACxD,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,mBAAmB;AAAA,SAChB;AAAA,IACL,IAAI;AACJ,UAAM,UAAU,iBAAiB,cAAc,aAAa;AAI5D,UAAM,aAAa;AAEnB,WACE,oBAAC;AAAA,MACC,eAAe;AAAA,MACf,cAAY;AAAA,MACZ,UAAQ;AAAA,MACR,YAAU;AAAA,MACV,YAAU;AAAA,MACV,YAAU;AAAA,MACV,WAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM,QAAQ;AAAA,MAEd,iBAAe,QAAQ;AAAA,MACvB,qBAAkB;AAAA,MAClB,mBAAiB;AAAA,MACjB,KAAK,QAAQ;AAAA,MACb;AAAA,MACA,iBAAe,WAAW,KAAK;AAAA,MAC9B,GAAG;AAAA,MACJ,KAAK;AAAA,MACJ,GAAI,QAAQ,IAAI,mBAAmB,SAAS,QAAQ,eACjD,QAAQ,aAAa,kBAAkB,IACvC;AAAA,QACE,UAAU;AACR,kBAAQ,QAAQ,CAAC,QAAQ,IAAI;AAAA,QAC/B;AAAA,MACF;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAM5B,MAAM,aAAa;AAEnB,MAAM,mBAAmB,OAAO,WAAW;AAAA,EACzC,MAAM;AAAA,EACN,YAAY;AACd,CAAC;AAMD,MAAM,cAAc,iBAAiB;AAAA,EACnC,MAAM;AAAA,IACJ,CACE;AAAA,MACE;AAAA,MACA,UAAU;AAAA,MACV;AAAA,IACF,GACA,iBACG;AAEH,YAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,YAAM,EAAE,6BAA6B,IAAI;AACzC,YAAM,eAAe,gBAAgB,cAAc,QAAQ,iBAAiB;AAE5E,YAAM,WAAW,gBAAgB,QAAQ;AACzC,YAAM,cAAc,CAAC,CAAC;AACtB,YAAM,sBACJ,QAAQ,UAAU,UAAa,gBAAgB,SAAY,cAAc;AAE3E,gCAA0B,MAAM;AAC9B,qCAA6B,WAAW;AAAA,MAC1C,GAAG,CAAC,8BAA8B,WAAW,CAAC;AAE9C,aACE,oBAAC;AAAA,QACC,MAAM,QAAQ;AAAA,QACd,KAAK;AAAA,QAGL,eAAc;AAAA,QAEb;AAAA,OACH;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,YAAY,cAAc;AAMnB,MAAM,aAAa,OAAO,QAAQ;AAAA,EACvC,MAAM;AAAA,EAEN,eAAe;AAAA,EACf,UAAU,oBAAC;AAAA,IAAU;AAAA,GAAC;AACxB,CAAC;AAMD,MAAM,YAAY;AAQlB,MAAM,CAAC,2BAA2B,oBAAoB,IACpD,oBAA4C,SAAS;AAShD,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,OAAqC,iBAAiB;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,SACG;AAAA,IACL,IAAI;AACJ,UAAM,UAAU,iBAAiB,WAAW,aAAa;AACzD,UAAM,aAAa,QAAQ,UAAU;AACrC,UAAM,SAAS,MAAM;AAErB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,UAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS;AAC3D,UAAI,CAAC;AAAO;AACZ,UAAI,gBAAgB,aAAa;AAC/B,YAAI,SAAS;AACX,kBAAQ,QAAQ,SAAS;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,sBAAgB,OAAO,KAAK;AAAA,IAC9B,GAAG,CAAC,OAAO,iBAAiB,KAAK,CAAC;AAElC,aAAS,eAAe;AACtB,uBAAiB,KAAK;AACtB,eAAS,KAAK;AACd,cAAQ,KAAK;AAAA,IACf;AAEA,UAAM,kBAAkB,QAAQ,eAC5B,QAAQ,aAAa,aAAa;AAAA,MAChC,eAAe;AACb,uBAAgB,UAAU;AAC1B,wBAAiB,UAAU;AAAA,MAC7B;AAAA,MACA,UAAU,OAAO;AACf,YACE,MAAM,QAAQ,WACb,MAAM,QAAQ,OAAO,EAAC,mCAAS,QAAQ,SACxC;AACA,gBAAM,eAAe;AACrB,uBAAa;AAAA,QACf,OAAO;AACL,yBAAgB,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,UAAU;AACR,YAAI,eAAgB,SAAS;AAC3B,2BAAiB,KAAK;AACtB,kBAAQ,KAAK;AAAA,QACf;AAAA,MACF;AAAA,MACA,YAAY;AACV,YAAI,CAAC,gBAAiB,SAAS;AAC7B;AAAA,QACF;AAEA,YAAI,eAAgB,SAAS;AAC3B,uBAAa;AAAA,QACf;AAIA,qBAAa,iBAAkB,OAAO;AACtC,yBAAkB,UAAU,WAAW,MAAM;AAC3C,yBAAgB,UAAU;AAAA,QAC5B,CAAC;AAAA,MACH;AAAA,IACF,CAAC,IACD;AAAA,MACE,SAAS;AAAA,IACX;AAEJ,WACE,oBAAC;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ,UAAU;AAAA,MAClB;AAAA,MAEA,8BAAC;AAAA,QACC,cAAY;AAAA,QACZ,YAAU;AAAA,QACV,QAAO;AAAA,QACP,YAAU;AAAA,QACV,cAAc;AAAA,QACd,eAAe;AAAA,QACf,KAAK;AAAA,QACL,mBAAiB;AAAA,QACjB,iBAAe;AAAA,QACf,cAAY,aAAa,WAAW;AAAA,QACpC,iBAAe,YAAY;AAAA,QAC3B,iBAAe,WAAW,KAAK;AAAA,QAC/B,UAAU,WAAW,SAAY;AAAA,QACjC,MAAM,QAAQ;AAAA,QACb,GAAG;AAAA,QACH,GAAG;AAAA,OACN;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAMzB,MAAM,iBAAiB;AAEhB,MAAM,sBAAsB,OAAO,aAAa;AAAA,EACrD,MAAM;AAAA,EACN,YAAY;AACd,CAAC;AAID,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,OAAyC,iBAAiB;AACzD,UAAM,EAAE,eAAe,cAAc,cAAc,IAAI;AACvD,UAAM,UAAU,iBAAiB,gBAAgB,aAAa;AAC9D,UAAM,cAAc,qBAAqB,gBAAgB,aAAa;AACtE,UAAM,MAAM,MAAM,OAA8B,IAAI;AACpD,UAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,UAAM,aAAa,QAAQ,YAAY,cAAc,QAAQ,SAAS;AAEtE,UAAM,WAAW,MAAM;AAAA,MACrB,MACE,oBAAC;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,IAAI,YAAY;AAAA,QACf,GAAG;AAAA,QACJ,KAAK;AAAA,OACP;AAAA,MAGF,CAAC,OAAO,QAAQ,MAAM,WAAW,YAAY,MAAM;AAAA,IACrD;AAGA,UAAM,UAAU,MAAM;AACpB,UAAI,YAAY;AACd,gBAAQ,gBAAgB,QAAQ;AAAA,MAClC;AAAA,IAEF,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,WACE;AAAA,MACG;AAAA,KAgBH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAM7B,MAAM,sBAAsB;AAE5B,MAAM,2BAA2B,OAAO,QAAQ;AAAA,EAC9C,MAAM;AACR,CAAC;AAID,MAAM,sBAAsB,MAAM;AAAA,EAChC,CAAC,OAA8C,iBAAiB;AAC9D,UAAM,EAAE,kBAAkB,mBAAmB,IAAI;AACjD,UAAM,cAAc,qBAAqB,qBAAqB,aAAa;AAC3E,WAAO,YAAY,aACjB,oBAAC;AAAA,MAAyB,eAAW;AAAA,MAAE,GAAG;AAAA,MAAoB,KAAK;AAAA,KAAc,IAC/E;AAAA,EACN;AACF;AAEA,oBAAoB,cAAc;AAMlC,MAAM,aAAa;AAInB,MAAM,CAAC,4BAA4B,qBAAqB,IACtD,oBAA6C,UAAU;AAElD,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAID,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM,EAAE,kBAAkB,WAAW,IAAI;AACzC,UAAM,UAAU,MAAM;AACtB,WACE,oBAAC;AAAA,MAA2B,OAAO;AAAA,MAAe,IAAI,WAAW;AAAA,MAC/D,8BAAC;AAAA,QAEC,MAAK;AAAA,QACL,mBAAiB;AAAA,QAChB,GAAG;AAAA,QACJ,KAAK;AAAA,OACP;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAM1B,MAAM,aAAa;AAInB,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM,EAAE,kBAAkB,WAAW,IAAI;AACzC,UAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,UAAM,eAAe,sBAAsB,YAAY,aAAa;AACpE,WACE,oBAAC;AAAA,MACC,eAAe;AAAA,MACf,YAAW;AAAA,MACX,IAAI,aAAa;AAAA,MACjB,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA,MACJ,KAAK;AAAA,KACP;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAMnB,MAAM,kBAAkB,OAAO,WAAW;AAAA,EAC/C,MAAM;AACR,CAAC;AAED,MAAM,wBAAwB,CAC5B,UAIG;AACH,QAAM,UAAU,iBAAiB,yBAAyB,MAAM,aAAa;AAC7E,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAC1E,QAAM,eAAe,OAAO,SAAS;AAErC,SACE,oBAAC;AAAA,IACC,cAAc,CAAC,QAAQ;AACrB,UAAI,aAAa,GAAG;AAClB,cAAM,aAAa,GAAG;AAAA,MACxB;AAAA,IACF;AAAA,IACA,MAAM,QAAQ;AAAA,IACd,QAAQ,qBAAqB;AAAA,IAE5B,gBAAM;AAAA,GACT;AAEJ;AAEA,MAAM,kBAAkB,CAAC,UAA2B;AAClD,SAAO;AAAA,IAAG,gBAAM;AAAA,GAAS;AAC3B;AAMO,MAAM,SAAS;AAAA,EACpB,CAAC,UAAoC;AACnC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,MAAM,WAAW;AAAA,MACjB;AAAA,IACF,IAAI;AAEJ,UAAM,KAAK,MAAM;AACjB,UAAM,WAAW,gBAAgB,OAAO,KAAK,aAAa,EAAE,MAAM,KAAK;AAEvE,UAAM,EAAE,MAAM,cAAc,IAAI,eAAe;AAAA,MAC7C,UAAU,MAAM;AAAA,QACd,MAAM,oBAAC;AAAA,UAAW,MAAM,GAAG;AAAA,SAAyB;AAAA,QACpD,CAAC,QAAQ;AAAA,MACX;AAAA,IACF,CAAC;AACD,UAAM,kBAAkB;AACxB,UAAM,UAAU,0BAA0B,eAAe;AACzD,UAAM,aAAa,WAAW,CAAC,QAAQ,kBAAkB;AACzD,UAAM,cAAc,MAAM,WAAW,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE;AACrD,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAA0B,IAAI;AAE5E,UAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,MAC3C,MAAM;AAAA,MACN,aAAa,eAAe;AAAA,MAC5B,UAAU;AAAA,MACV,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C,MAAM;AAAA,MACN,aAAa,gBAAgB;AAAA,MAC7B,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,IACd,CAAC;AAED,UAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAwB,IAAI;AACxE,UAAM,mBAAmB,MAAM,OAAsB,IAAI;AACzD,UAAM,iBAAiB,MAAM,OAAsB,IAAI;AAEvD,UAAM,iBAAiB,MAAM,OAAiB,CAAC,CAAC;AAEhD,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM;AAAA,MAC9C,KAAK,IAAI,GAAG,eAAe,QAAQ,QAAQ,KAAK,CAAC;AAAA,IACnD;AAEA,UAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAA6B,IAAI;AACzE,UAAM,CAAC,sBAAsB,uBAAuB,IAAI,MAAM,SAAS,KAAK;AAE5E,8BAA0B,MAAM;AAC9B,uBAAiB,UAAU;AAC3B,qBAAe,UAAU;AAAA,IAC3B,CAAC;AAED,WACE,oBAAC;AAAA,MACC,8BAAC;AAAA,QACC;AAAA,QACA,gBAAgB;AAAA,QAChB,MAAM;AAAA,QACN,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,mBAAmB;AAAA,QACnB,8BAA8B;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,iBAAiB,CAAC,OAAOA,WAAU;AACjC,yBAAe,QAAQ,SAASA;AAAA,QAClC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,8BAAC;AAAA,UAAsB,cAAc;AAAA,UAAS;AAAA,UAC5C,8BAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YAEC;AAAA,WACH;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,EAEJ;AAAA,EACA;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAGA,OAAO,cAAc;",
|
|
6
6
|
"names": ["value"]
|
|
7
7
|
}
|
|
@@ -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, 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}
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport { Dismissable } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\n\nimport { useSelectContext } from './context'\nimport { SelectContentProps } from './types'\nimport { useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({\n children,\n __scopeSelect,\n zIndex = 1000,\n ...focusScopeProps\n}: SelectContentProps & FocusScopeProps) => {\n const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n const themeName = useThemeName()\n const showSheet = useShowSelectSheet(context)\n const contents = (\n <Theme forceClassName name={themeName}>\n {children}\n </Theme>\n )\n const touch = useIsTouchDevice()\n\n if (showSheet) {\n if (!context.open) {\n return null\n }\n return <>{contents}</>\n }\n\n return (\n <FloatingPortal>\n {context.open ? (\n <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>\n <FocusScope loop trapped {...focusScopeProps}>\n <Dismissable>{contents}</Dismissable>\n </FocusScope>\n </FloatingOverlay>\n ) : (\n <div style={{ display: 'none' }}>{contents}</div>\n )}\n </FloatingPortal>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAyBI,SAUO,UAVP;AAzBJ,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,OAAO,kBAAkB,oBAAoB;AACtD,SAAS,mBAAmB;AAC5B,SAAS,kBAAmC;AAE5C,SAAS,wBAAwB;AAEjC,SAAS,0BAA0B;AAMnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,KACN;AACL,MAA4C;AAC1C,QAAM,UAAU,iBAAiB,cAAc,aAAa;AAC5D,QAAM,YAAY,aAAa;AAC/B,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,WACJ,oBAAC;AAAA,IAAM,gBAAc;AAAA,IAAC,MAAM;AAAA,IACzB;AAAA,GACH;AAEF,QAAM,QAAQ,iBAAiB;AAE/B,MAAI,WAAW;AACb,QAAI,CAAC,QAAQ,MAAM;AACjB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,MAAG;AAAA,KAAS;AAAA,EACrB;AAEA,SACE,oBAAC;AAAA,IACE,kBAAQ,OACP,oBAAC;AAAA,MAAgB,OAAO,EAAE,OAAO;AAAA,MAAG,YAAY,CAAC;AAAA,MAC/C,8BAAC;AAAA,QAAW,MAAI;AAAA,QAAC,SAAO;AAAA,QAAE,GAAG;AAAA,QAC3B,8BAAC;AAAA,UAAa;AAAA,SAAS;AAAA,OACzB;AAAA,KACF,IAEA,oBAAC;AAAA,MAAI,OAAO,EAAE,SAAS,OAAO;AAAA,MAAI;AAAA,KAAS;AAAA,GAE/C;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SelectImpl.js
CHANGED
|
@@ -99,7 +99,7 @@ const SelectInlineImpl = (props) => {
|
|
|
99
99
|
const { x, y, reference, floating, strategy, context, refs } = useFloating({
|
|
100
100
|
open,
|
|
101
101
|
onOpenChange: setOpen,
|
|
102
|
-
whileElementsMounted: autoUpdate,
|
|
102
|
+
whileElementsMounted: open ? autoUpdate : void 0,
|
|
103
103
|
placement: "bottom-start",
|
|
104
104
|
middleware: fallback ? [
|
|
105
105
|
offset(5),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { SelectImplProps } from './types'\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const {\n __scopeSelect,\n children,\n open = false,\n selectedIndexRef,\n listContentRef,\n } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const {\n setActiveIndex,\n setOpen,\n setSelectedIndex,\n selectedIndex,\n activeIndex,\n forceUpdate,\n } = selectContext\n const [scrollTop, setScrollTop] = React.useState(0)\n const touch = useIsTouchDevice()\n\n const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n const overflowRef = React.useRef<null | SideObject>(null)\n const upArrowRef = React.useRef<HTMLDivElement | null>(null)\n const downArrowRef = React.useRef<HTMLDivElement | null>(null)\n const allowSelectRef = React.useRef(false)\n const allowMouseUpRef = React.useRef(true)\n const selectTimeoutRef = React.useRef<any>()\n const state = React.useRef({\n isMouseOutside: false,\n })\n\n const [controlledScrolling, setControlledScrolling] = React.useState(false)\n const [fallback, setFallback] = React.useState(false)\n const [innerOffset, setInnerOffset] = React.useState(0)\n const [blockSelection, setBlockSelection] = React.useState(false)\n const floatingStyle = React.useRef({})\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n if (!open) {\n setScrollTop(0)\n setFallback(false)\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => {\n cancelAnimationFrame(frame)\n }\n }, [open, setActiveIndex])\n\n // close when mouseup outside select\n if (isWeb) {\n React.useEffect(() => {\n if (!open) return\n const mouseUp = (e: MouseEvent) => {\n if (state.current.isMouseOutside) {\n setOpen(false)\n }\n }\n document.addEventListener('mouseup', mouseUp)\n return () => {\n document.removeEventListener('mouseup', mouseUp)\n }\n }, [open])\n }\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n whileElementsMounted: autoUpdate,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight -\n floatingRef.current.clientHeight -\n SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (\n event.key === 'Enter' ||\n (event.key === ' ' && !context.dataRef.current.typing)\n ) {\n event.preventDefault()\n setOpen(true)\n }\n },\n })\n },\n getFloatingProps(props) {\n return interactions.getFloatingProps({\n ref: floating,\n className: 'Select',\n ...props,\n style: {\n position: strategy,\n top: y ?? '',\n left: x ?? '',\n outline: 0,\n listStyleType: 'none',\n scrollbarWidth: 'none',\n ...floatingStyle.current,\n ...props?.style,\n },\n onPointerEnter() {\n setControlledScrolling(false)\n state.current.isMouseOutside = false\n },\n onPointerLeave() {\n state.current.isMouseOutside = true\n },\n onPointerMove() {\n state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !(\n refs.floating.current?.contains(target) ||\n upArrowRef.current?.contains(target) ||\n downArrowRef.current?.contains(target)\n )\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
-
"mappings": "AAyTI;AAzTJ;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,OAAO,kBAAkB,iCAAiC;AACnE,YAAY,WAAW;AACvB,SAAS,iBAAiB;AAE1B,SAAS,wBAAwB,sBAAsB;AACvD,SAAS,gBAAgB,wBAAwB;AAI1C,MAAM,mBAAmB,CAAC,UAA2B;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,iBAAiB,mBAAmB,aAAa;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,CAAC;AAClD,QAAM,QAAQ,iBAAiB;AAE/B,QAAM,eAAe,MAAM,OAAkC,CAAC,CAAC;AAC/D,QAAM,cAAc,MAAM,OAA0B,IAAI;AACxD,QAAM,aAAa,MAAM,OAA8B,IAAI;AAC3D,QAAM,eAAe,MAAM,OAA8B,IAAI;AAC7D,QAAM,iBAAiB,MAAM,OAAO,KAAK;AACzC,QAAM,kBAAkB,MAAM,OAAO,IAAI;AACzC,QAAM,mBAAmB,MAAM,OAAY;AAC3C,QAAM,QAAQ,MAAM,OAAO;AAAA,IACzB,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,MAAM,SAAS,KAAK;AAC1E,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AACpD,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,CAAC;AACtD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM,SAAS,KAAK;AAChE,QAAM,gBAAgB,MAAM,OAAO,CAAC,CAAC;AAIrC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,sBAAsB,MAAM;AACxC,UAAI,CAAC,MAAM;AACT,qBAAa,CAAC;AACd,oBAAY,KAAK;AACjB,uBAAe,IAAI;AACnB,+BAAuB,KAAK;AAAA,MAC9B;AAAA,IACF,CAAC;AACD,WAAO,MAAM;AACX,2BAAqB,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,MAAM,cAAc,CAAC;AAGzB,MAAI,OAAO;AACT,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC;AAAM;AACX,YAAM,UAAU,CAAC,MAAkB;AACjC,YAAI,MAAM,QAAQ,gBAAgB;AAChC,kBAAQ,KAAK;AAAA,QACf;AAAA,MACF;AACA,eAAS,iBAAiB,WAAW,OAAO;AAC5C,aAAO,MAAM;AACX,iBAAS,oBAAoB,WAAW,OAAO;AAAA,MACjD;AAAA,IACF,GAAG,CAAC,IAAI,CAAC;AAAA,EACX;AAEA,QAAM,qBAAqB,KAAK;AAAA,IAC9B,MAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACL,WAAW,EAAE,MAAM;AAAA,MACrB;AAAA,IACF,GAAG;AACD,oBAAc,UAAU;AAAA,QACtB;AAAA,QACA,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,EAAE,GAAG,GAAG,WAAW,UAAU,UAAU,SAAS,KAAK,IAAI,YAAY;AAAA,IACzE;AAAA,IACA,cAAc;AAAA,IACd,sBAAsB;AAAA,
|
|
4
|
+
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { SelectImplProps } from './types'\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const {\n __scopeSelect,\n children,\n open = false,\n selectedIndexRef,\n listContentRef,\n } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const {\n setActiveIndex,\n setOpen,\n setSelectedIndex,\n selectedIndex,\n activeIndex,\n forceUpdate,\n } = selectContext\n const [scrollTop, setScrollTop] = React.useState(0)\n const touch = useIsTouchDevice()\n\n const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n const overflowRef = React.useRef<null | SideObject>(null)\n const upArrowRef = React.useRef<HTMLDivElement | null>(null)\n const downArrowRef = React.useRef<HTMLDivElement | null>(null)\n const allowSelectRef = React.useRef(false)\n const allowMouseUpRef = React.useRef(true)\n const selectTimeoutRef = React.useRef<any>()\n const state = React.useRef({\n isMouseOutside: false,\n })\n\n const [controlledScrolling, setControlledScrolling] = React.useState(false)\n const [fallback, setFallback] = React.useState(false)\n const [innerOffset, setInnerOffset] = React.useState(0)\n const [blockSelection, setBlockSelection] = React.useState(false)\n const floatingStyle = React.useRef({})\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n if (!open) {\n setScrollTop(0)\n setFallback(false)\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => {\n cancelAnimationFrame(frame)\n }\n }, [open, setActiveIndex])\n\n // close when mouseup outside select\n if (isWeb) {\n React.useEffect(() => {\n if (!open) return\n const mouseUp = (e: MouseEvent) => {\n if (state.current.isMouseOutside) {\n setOpen(false)\n }\n }\n document.addEventListener('mouseup', mouseUp)\n return () => {\n document.removeEventListener('mouseup', mouseUp)\n }\n }, [open])\n }\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n whileElementsMounted: open ? autoUpdate : undefined,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight -\n floatingRef.current.clientHeight -\n SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (\n event.key === 'Enter' ||\n (event.key === ' ' && !context.dataRef.current.typing)\n ) {\n event.preventDefault()\n setOpen(true)\n }\n },\n })\n },\n getFloatingProps(props) {\n return interactions.getFloatingProps({\n ref: floating,\n className: 'Select',\n ...props,\n style: {\n position: strategy,\n top: y ?? '',\n left: x ?? '',\n outline: 0,\n listStyleType: 'none',\n scrollbarWidth: 'none',\n ...floatingStyle.current,\n ...props?.style,\n },\n onPointerEnter() {\n setControlledScrolling(false)\n state.current.isMouseOutside = false\n },\n onPointerLeave() {\n state.current.isMouseOutside = true\n },\n onPointerMove() {\n state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !(\n refs.floating.current?.contains(target) ||\n upArrowRef.current?.contains(target) ||\n downArrowRef.current?.contains(target)\n )\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/jsx/Select.js
CHANGED
package/dist/jsx/Select.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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"],
|
|
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 = '$true',\n dir,\n } = props\n\n const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(\n () => <PortalHost name={`${scopeKey}SheetContents`} />,\n [scopeKey]\n ),\n })\n const sheetBreakpoint = when\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet || !isWeb ? SelectSheetImpl : SelectInlineImpl\n const forceUpdate = React.useReducer(() => ({}), {})[1]\n const [selectedItem, setSelectedItem] = React.useState<React.ReactNode>(null)\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n strategy: 'most-recent-wins',\n })\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue || '',\n onChange: onValueChange,\n strategy: 'most-recent-wins',\n transition: true,\n })\n\n const [activeIndex, setActiveIndex] = React.useState<number | null>(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
5
|
"mappings": "AAAA,SAAS,OAAO,sBAAsB;AACtC,SAAS,uBAAuB;AAChC,SAA6C,aAAa;AAC1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,gBAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,QAAQ,cAA2B;AAC5C,SAAS,WAAW,mBAAmB;AACvC,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,qBAAqB,wBAAwB;AACtE,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,sBAAsB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMP,MAAM,eAAe;AAId,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,OAAwC,iBAAiB;AACxD,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,mBAAmB;AAAA,SAChB;AAAA,IACL,IAAI;AACJ,UAAM,UAAU,iBAAiB,cAAc,aAAa;AAI5D,UAAM,aAAa;AAEnB,WACE,CAAC,SACC,eAAe,cACf,aACA,SACA,WACA,WACA,WACA,UACA,aAAa,GACb,MAAM,QAAQ,MAEd,eAAe,QAAQ,MACvB,kBAAkB,OAClB,iBAAiB,YACjB,KAAK,QAAQ,KACb,UAAU,UACV,eAAe,WAAW,KAAK,YAC3B,cACJ,KAAK,kBACA,QAAQ,IAAI,mBAAmB,SAAS,QAAQ,eACjD,QAAQ,aAAa,kBAAkB,IACvC;AAAA,MACE,UAAU;AACR,gBAAQ,QAAQ,CAAC,QAAQ,IAAI;AAAA,MAC/B;AAAA,IACF,GACN;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAM5B,MAAM,aAAa;AAEnB,MAAM,mBAAmB,OAAO,WAAW;AAAA,EACzC,MAAM;AAAA,EACN,YAAY;AACd,CAAC;AAMD,MAAM,cAAc,iBAAiB;AAAA,EACnC,MAAM;AAAA,IACJ,CACE;AAAA,MACE;AAAA,MACA,UAAU;AAAA,MACV;AAAA,IACF,GACA,iBACG;AAEH,YAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,YAAM,EAAE,6BAA6B,IAAI;AACzC,YAAM,eAAe,gBAAgB,cAAc,QAAQ,iBAAiB;AAE5E,YAAM,WAAW,gBAAgB,QAAQ;AACzC,YAAM,cAAc,CAAC,CAAC;AACtB,YAAM,sBACJ,QAAQ,UAAU,UAAa,gBAAgB,SAAY,cAAc;AAE3E,gCAA0B,MAAM;AAC9B,qCAA6B,WAAW;AAAA,MAC1C,GAAG,CAAC,8BAA8B,WAAW,CAAC;AAE9C,aACE,CAAC,iBACC,MAAM,QAAQ,MACd,KAAK,cAGL,cAAc,QAEb,oBACH,EARC;AAAA,IAUL;AAAA,EACF;AACF;AAEA,YAAY,cAAc;AAMnB,MAAM,aAAa,OAAO,QAAQ;AAAA,EACvC,MAAM;AAAA,EAEN,eAAe;AAAA,EACf,UAAU,CAAC,WAAU,SAAC,EAAX;AACb,CAAC;AAMD,MAAM,YAAY;AAQlB,MAAM,CAAC,2BAA2B,oBAAoB,IACpD,oBAA4C,SAAS;AAShD,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,OAAqC,iBAAiB;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,SACG;AAAA,IACL,IAAI;AACJ,UAAM,UAAU,iBAAiB,WAAW,aAAa;AACzD,UAAM,aAAa,QAAQ,UAAU;AACrC,UAAM,SAAS,MAAM;AAErB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,UAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS;AAC3D,UAAI,CAAC;AAAO;AACZ,UAAI,gBAAgB,aAAa;AAC/B,YAAI,SAAS;AACX,kBAAQ,QAAQ,SAAS;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,sBAAgB,OAAO,KAAK;AAAA,IAC9B,GAAG,CAAC,OAAO,iBAAiB,KAAK,CAAC;AAElC,aAAS,eAAe;AACtB,uBAAiB,KAAK;AACtB,eAAS,KAAK;AACd,cAAQ,KAAK;AAAA,IACf;AAEA,UAAM,kBAAkB,QAAQ,eAC5B,QAAQ,aAAa,aAAa;AAAA,MAChC,eAAe;AACb,uBAAgB,UAAU;AAC1B,wBAAiB,UAAU;AAAA,MAC7B;AAAA,MACA,UAAU,OAAO;AACf,YACE,MAAM,QAAQ,WACb,MAAM,QAAQ,OAAO,CAAC,SAAS,QAAQ,QACxC;AACA,gBAAM,eAAe;AACrB,uBAAa;AAAA,QACf,OAAO;AACL,yBAAgB,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,UAAU;AACR,YAAI,eAAgB,SAAS;AAC3B,2BAAiB,KAAK;AACtB,kBAAQ,KAAK;AAAA,QACf;AAAA,MACF;AAAA,MACA,YAAY;AACV,YAAI,CAAC,gBAAiB,SAAS;AAC7B;AAAA,QACF;AAEA,YAAI,eAAgB,SAAS;AAC3B,uBAAa;AAAA,QACf;AAIA,qBAAa,iBAAkB,OAAO;AACtC,yBAAkB,UAAU,WAAW,MAAM;AAC3C,yBAAgB,UAAU;AAAA,QAC5B,CAAC;AAAA,MACH;AAAA,IACF,CAAC,IACD;AAAA,MACE,SAAS;AAAA,IACX;AAEJ,WACE,CAAC,0BACC,OAAO,eACP,OAAO,OACP,QAAQ,UAAU,IAClB,YAAY,YAEZ,CAAC,SACC,aACA,WACA,OAAO,GACP,WACA,cAAc,GACd,eAAe,WACf,KAAK,cACL,iBAAiB,QACjB,eAAe,YACf,YAAY,aAAa,WAAW,YACpC,eAAe,YAAY,QAC3B,eAAe,WAAW,KAAK,QAC/B,UAAU,WAAW,SAAY,IACjC,MAAM,QAAQ,UACV,eACA,iBACN,EACF,EAxBC;AAAA,EA0BL;AACF;AAEA,WAAW,cAAc;AAMzB,MAAM,iBAAiB;AAEhB,MAAM,sBAAsB,OAAO,aAAa;AAAA,EACrD,MAAM;AAAA,EACN,YAAY;AACd,CAAC;AAID,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,OAAyC,iBAAiB;AACzD,UAAM,EAAE,eAAe,cAAc,cAAc,IAAI;AACvD,UAAM,UAAU,iBAAiB,gBAAgB,aAAa;AAC9D,UAAM,cAAc,qBAAqB,gBAAgB,aAAa;AACtE,UAAM,MAAM,MAAM,OAA8B,IAAI;AACpD,UAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,UAAM,aAAa,QAAQ,YAAY,cAAc,QAAQ,SAAS;AAEtE,UAAM,WAAW,MAAM;AAAA,MACrB,MACE,CAAC,oBACC,WAAW,WACX,MAAM,QAAQ,MACd,IAAI,YAAY,YACZ,eACJ,KAAK,cACP;AAAA,MAGF,CAAC,OAAO,QAAQ,MAAM,WAAW,YAAY,MAAM;AAAA,IACrD;AAGA,UAAM,UAAU,MAAM;AACpB,UAAI,YAAY;AACd,gBAAQ,gBAAgB,QAAQ;AAAA,MAClC;AAAA,IAEF,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,WACE,GACG,SAgBH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAM7B,MAAM,sBAAsB;AAE5B,MAAM,2BAA2B,OAAO,QAAQ;AAAA,EAC9C,MAAM;AACR,CAAC;AAID,MAAM,sBAAsB,MAAM;AAAA,EAChC,CAAC,OAA8C,iBAAiB;AAC9D,UAAM,EAAE,kBAAkB,mBAAmB,IAAI;AACjD,UAAM,cAAc,qBAAqB,qBAAqB,aAAa;AAC3E,WAAO,YAAY,aACjB,CAAC,yBAAyB,gBAAgB,oBAAoB,KAAK,cAAc,KAC/E;AAAA,EACN;AACF;AAEA,oBAAoB,cAAc;AAMlC,MAAM,aAAa;AAInB,MAAM,CAAC,4BAA4B,qBAAqB,IACtD,oBAA6C,UAAU;AAElD,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAID,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM,EAAE,kBAAkB,WAAW,IAAI;AACzC,UAAM,UAAU,MAAM;AACtB,WACE,CAAC,2BAA2B,OAAO,eAAe,IAAI,WAAW,IAC/D,CAAC,iBAEC,KAAK,QACL,iBAAiB,aACb,YACJ,KAAK,cACP,EACF,EARC;AAAA,EAUL;AACF;AAEA,YAAY,cAAc;AAM1B,MAAM,aAAa;AAInB,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM,EAAE,kBAAkB,WAAW,IAAI;AACzC,UAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,UAAM,eAAe,sBAAsB,YAAY,aAAa;AACpE,WACE,CAAC,SACC,eAAe,YACf,WAAW,MACX,IAAI,aAAa,IACjB,MAAM,QAAQ,UACV,YACJ,KAAK,cACP;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAMnB,MAAM,kBAAkB,OAAO,WAAW;AAAA,EAC/C,MAAM;AACR,CAAC;AAED,MAAM,wBAAwB,CAC5B,UAIG;AACH,QAAM,UAAU,iBAAiB,yBAAyB,MAAM,aAAa;AAC7E,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAC1E,QAAM,eAAe,OAAO,SAAS;AAErC,SACE,CAAC,gBACC,cAAc,CAAC,QAAQ;AACrB,QAAI,aAAa,GAAG;AAClB,YAAM,aAAa,GAAG;AAAA,IACxB;AAAA,EACF,GACA,MAAM,QAAQ,MACd,QAAQ,qBAAqB,QAE5B,MAAM,SACT,EAVC;AAYL;AAEA,MAAM,kBAAkB,CAAC,UAA2B;AAClD,SAAO,GAAG,MAAM,SAAS;AAC3B;AAMO,MAAM,SAAS;AAAA,EACpB,CAAC,UAAoC;AACnC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,MAAM,WAAW;AAAA,MACjB;AAAA,IACF,IAAI;AAEJ,UAAM,KAAK,MAAM;AACjB,UAAM,WAAW,gBAAgB,OAAO,KAAK,aAAa,EAAE,MAAM,KAAK;AAEvE,UAAM,EAAE,MAAM,cAAc,IAAI,eAAe;AAAA,MAC7C,UAAU,MAAM;AAAA,QACd,MAAM,CAAC,WAAW,MAAM,GAAG,yBAAyB;AAAA,QACpD,CAAC,QAAQ;AAAA,MACX;AAAA,IACF,CAAC;AACD,UAAM,kBAAkB;AACxB,UAAM,UAAU,0BAA0B,eAAe;AACzD,UAAM,aAAa,WAAW,CAAC,QAAQ,kBAAkB;AACzD,UAAM,cAAc,MAAM,WAAW,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE;AACrD,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAA0B,IAAI;AAE5E,UAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,MAC3C,MAAM;AAAA,MACN,aAAa,eAAe;AAAA,MAC5B,UAAU;AAAA,MACV,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C,MAAM;AAAA,MACN,aAAa,gBAAgB;AAAA,MAC7B,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,IACd,CAAC;AAED,UAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAwB,IAAI;AACxE,UAAM,mBAAmB,MAAM,OAAsB,IAAI;AACzD,UAAM,iBAAiB,MAAM,OAAsB,IAAI;AAEvD,UAAM,iBAAiB,MAAM,OAAiB,CAAC,CAAC;AAEhD,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM;AAAA,MAC9C,KAAK,IAAI,GAAG,eAAe,QAAQ,QAAQ,KAAK,CAAC;AAAA,IACnD;AAEA,UAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAA6B,IAAI;AACzE,UAAM,CAAC,sBAAsB,uBAAuB,IAAI,MAAM,SAAS,KAAK;AAE5E,8BAA0B,MAAM;AAC9B,uBAAiB,UAAU;AAC3B,qBAAe,UAAU;AAAA,IAC3B,CAAC;AAED,WACE,CAAC,cACC,CAAC,eACC,KAAK,KACL,gBAAgB,OAChB,MAAM,UACN,UAAU,OACV,cAAc,cACd,iBAAiB,iBACjB,aAAa,aACb,WAAW,WACX,mBAAmB,cACnB,8BAA8B,yBAC9B,sBAAsB,sBACtB,UAAU,UACV,iBAAiB,iBACjB,OAAO,eACP,iBAAiB,CAAC,OAAOA,WAAU;AACjC,qBAAe,QAAQ,SAASA;AAAA,IAClC,GACA,aAAa,aACb,UAAU,UACV,eAAe,eACf,gBAAgB,gBAChB,SAAS,SACT,kBAAkB,kBAClB,OAAO,OACP,MAAM,MAEN,CAAC,sBAAsB,cAAc,SAAS,eAAe,eAC3D,CAAC,WACC,gBAAgB,gBAChB,gBAAgB,gBAChB,kBAAkB,sBACd,OACJ,MAAM,MACN,OAAO,QAEN,SACH,EATC,WAUH,EAXC,sBAYH,EAvCC,eAwCH,EAzCC;AAAA,EA2CL;AAAA,EACA;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAGA,OAAO,cAAc;",
|
|
6
6
|
"names": ["value"]
|
|
7
7
|
}
|
|
@@ -14,7 +14,7 @@ const SelectContent = ({
|
|
|
14
14
|
const context = useSelectContext(CONTENT_NAME, __scopeSelect);
|
|
15
15
|
const themeName = useThemeName();
|
|
16
16
|
const showSheet = useShowSelectSheet(context);
|
|
17
|
-
const contents = <Theme name={themeName}>{children}</Theme>;
|
|
17
|
+
const contents = <Theme forceClassName name={themeName}>{children}</Theme>;
|
|
18
18
|
const touch = useIsTouchDevice();
|
|
19
19
|
if (showSheet) {
|
|
20
20
|
if (!context.open) {
|
|
@@ -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, 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}
|
|
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,
|
|
4
|
+
"sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport { Dismissable } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\n\nimport { useSelectContext } from './context'\nimport { SelectContentProps } from './types'\nimport { useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({\n children,\n __scopeSelect,\n zIndex = 1000,\n ...focusScopeProps\n}: SelectContentProps & FocusScopeProps) => {\n const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n const themeName = useThemeName()\n const showSheet = useShowSelectSheet(context)\n const contents = (\n <Theme forceClassName name={themeName}>\n {children}\n </Theme>\n )\n const touch = useIsTouchDevice()\n\n if (showSheet) {\n if (!context.open) {\n return null\n }\n return <>{contents}</>\n }\n\n return (\n <FloatingPortal>\n {context.open ? (\n <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>\n <FocusScope loop trapped {...focusScopeProps}>\n <Dismissable>{contents}</Dismissable>\n </FocusScope>\n </FloatingOverlay>\n ) : (\n <div style={{ display: 'none' }}>{contents}</div>\n )}\n </FloatingPortal>\n )\n}\n"],
|
|
5
|
+
"mappings": "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,WACJ,CAAC,MAAM,eAAe,MAAM,YACzB,SACH,EAFC;AAIH,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
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/SelectImpl.js
CHANGED
|
@@ -98,7 +98,7 @@ const SelectInlineImpl = (props) => {
|
|
|
98
98
|
const { x, y, reference, floating, strategy, context, refs } = useFloating({
|
|
99
99
|
open,
|
|
100
100
|
onOpenChange: setOpen,
|
|
101
|
-
whileElementsMounted: autoUpdate,
|
|
101
|
+
whileElementsMounted: open ? autoUpdate : void 0,
|
|
102
102
|
placement: "bottom-start",
|
|
103
103
|
middleware: fallback ? [
|
|
104
104
|
offset(5),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { SelectImplProps } from './types'\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const {\n __scopeSelect,\n children,\n open = false,\n selectedIndexRef,\n listContentRef,\n } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const {\n setActiveIndex,\n setOpen,\n setSelectedIndex,\n selectedIndex,\n activeIndex,\n forceUpdate,\n } = selectContext\n const [scrollTop, setScrollTop] = React.useState(0)\n const touch = useIsTouchDevice()\n\n const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n const overflowRef = React.useRef<null | SideObject>(null)\n const upArrowRef = React.useRef<HTMLDivElement | null>(null)\n const downArrowRef = React.useRef<HTMLDivElement | null>(null)\n const allowSelectRef = React.useRef(false)\n const allowMouseUpRef = React.useRef(true)\n const selectTimeoutRef = React.useRef<any>()\n const state = React.useRef({\n isMouseOutside: false,\n })\n\n const [controlledScrolling, setControlledScrolling] = React.useState(false)\n const [fallback, setFallback] = React.useState(false)\n const [innerOffset, setInnerOffset] = React.useState(0)\n const [blockSelection, setBlockSelection] = React.useState(false)\n const floatingStyle = React.useRef({})\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n if (!open) {\n setScrollTop(0)\n setFallback(false)\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => {\n cancelAnimationFrame(frame)\n }\n }, [open, setActiveIndex])\n\n // close when mouseup outside select\n if (isWeb) {\n React.useEffect(() => {\n if (!open) return\n const mouseUp = (e: MouseEvent) => {\n if (state.current.isMouseOutside) {\n setOpen(false)\n }\n }\n document.addEventListener('mouseup', mouseUp)\n return () => {\n document.removeEventListener('mouseup', mouseUp)\n }\n }, [open])\n }\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n whileElementsMounted: autoUpdate,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight -\n floatingRef.current.clientHeight -\n SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (\n event.key === 'Enter' ||\n (event.key === ' ' && !context.dataRef.current.typing)\n ) {\n event.preventDefault()\n setOpen(true)\n }\n },\n })\n },\n getFloatingProps(props) {\n return interactions.getFloatingProps({\n ref: floating,\n className: 'Select',\n ...props,\n style: {\n position: strategy,\n top: y ?? '',\n left: x ?? '',\n outline: 0,\n listStyleType: 'none',\n scrollbarWidth: 'none',\n ...floatingStyle.current,\n ...props?.style,\n },\n onPointerEnter() {\n setControlledScrolling(false)\n state.current.isMouseOutside = false\n },\n onPointerLeave() {\n state.current.isMouseOutside = true\n },\n onPointerMove() {\n state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !(\n refs.floating.current?.contains(target) ||\n upArrowRef.current?.contains(target) ||\n downArrowRef.current?.contains(target)\n )\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,OAAO,kBAAkB,iCAAiC;AACnE,YAAY,WAAW;AACvB,SAAS,iBAAiB;AAE1B,SAAS,wBAAwB,sBAAsB;AACvD,SAAS,gBAAgB,wBAAwB;AAI1C,MAAM,mBAAmB,CAAC,UAA2B;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,iBAAiB,mBAAmB,aAAa;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,CAAC;AAClD,QAAM,QAAQ,iBAAiB;AAE/B,QAAM,eAAe,MAAM,OAAkC,CAAC,CAAC;AAC/D,QAAM,cAAc,MAAM,OAA0B,IAAI;AACxD,QAAM,aAAa,MAAM,OAA8B,IAAI;AAC3D,QAAM,eAAe,MAAM,OAA8B,IAAI;AAC7D,QAAM,iBAAiB,MAAM,OAAO,KAAK;AACzC,QAAM,kBAAkB,MAAM,OAAO,IAAI;AACzC,QAAM,mBAAmB,MAAM,OAAY;AAC3C,QAAM,QAAQ,MAAM,OAAO;AAAA,IACzB,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,MAAM,SAAS,KAAK;AAC1E,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AACpD,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,CAAC;AACtD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM,SAAS,KAAK;AAChE,QAAM,gBAAgB,MAAM,OAAO,CAAC,CAAC;AAIrC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,sBAAsB,MAAM;AACxC,UAAI,CAAC,MAAM;AACT,qBAAa,CAAC;AACd,oBAAY,KAAK;AACjB,uBAAe,IAAI;AACnB,+BAAuB,KAAK;AAAA,MAC9B;AAAA,IACF,CAAC;AACD,WAAO,MAAM;AACX,2BAAqB,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,MAAM,cAAc,CAAC;AAGzB,MAAI,OAAO;AACT,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC;AAAM;AACX,YAAM,UAAU,CAAC,MAAkB;AACjC,YAAI,MAAM,QAAQ,gBAAgB;AAChC,kBAAQ,KAAK;AAAA,QACf;AAAA,MACF;AACA,eAAS,iBAAiB,WAAW,OAAO;AAC5C,aAAO,MAAM;AACX,iBAAS,oBAAoB,WAAW,OAAO;AAAA,MACjD;AAAA,IACF,GAAG,CAAC,IAAI,CAAC;AAAA,EACX;AAEA,QAAM,qBAAqB,KAAK;AAAA,IAC9B,MAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACL,WAAW,EAAE,MAAM;AAAA,MACrB;AAAA,IACF,GAAG;AACD,oBAAc,UAAU;AAAA,QACtB;AAAA,QACA,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,EAAE,GAAG,GAAG,WAAW,UAAU,UAAU,SAAS,KAAK,IAAI,YAAY;AAAA,IACzE;AAAA,IACA,cAAc;AAAA,IACd,sBAAsB;AAAA,
|
|
4
|
+
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { SelectImplProps } from './types'\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const {\n __scopeSelect,\n children,\n open = false,\n selectedIndexRef,\n listContentRef,\n } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const {\n setActiveIndex,\n setOpen,\n setSelectedIndex,\n selectedIndex,\n activeIndex,\n forceUpdate,\n } = selectContext\n const [scrollTop, setScrollTop] = React.useState(0)\n const touch = useIsTouchDevice()\n\n const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n const overflowRef = React.useRef<null | SideObject>(null)\n const upArrowRef = React.useRef<HTMLDivElement | null>(null)\n const downArrowRef = React.useRef<HTMLDivElement | null>(null)\n const allowSelectRef = React.useRef(false)\n const allowMouseUpRef = React.useRef(true)\n const selectTimeoutRef = React.useRef<any>()\n const state = React.useRef({\n isMouseOutside: false,\n })\n\n const [controlledScrolling, setControlledScrolling] = React.useState(false)\n const [fallback, setFallback] = React.useState(false)\n const [innerOffset, setInnerOffset] = React.useState(0)\n const [blockSelection, setBlockSelection] = React.useState(false)\n const floatingStyle = React.useRef({})\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n if (!open) {\n setScrollTop(0)\n setFallback(false)\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => {\n cancelAnimationFrame(frame)\n }\n }, [open, setActiveIndex])\n\n // close when mouseup outside select\n if (isWeb) {\n React.useEffect(() => {\n if (!open) return\n const mouseUp = (e: MouseEvent) => {\n if (state.current.isMouseOutside) {\n setOpen(false)\n }\n }\n document.addEventListener('mouseup', mouseUp)\n return () => {\n document.removeEventListener('mouseup', mouseUp)\n }\n }, [open])\n }\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n whileElementsMounted: open ? autoUpdate : undefined,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight -\n floatingRef.current.clientHeight -\n SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (\n event.key === 'Enter' ||\n (event.key === ' ' && !context.dataRef.current.typing)\n ) {\n event.preventDefault()\n setOpen(true)\n }\n },\n })\n },\n getFloatingProps(props) {\n return interactions.getFloatingProps({\n ref: floating,\n className: 'Select',\n ...props,\n style: {\n position: strategy,\n top: y ?? '',\n left: x ?? '',\n outline: 0,\n listStyleType: 'none',\n scrollbarWidth: 'none',\n ...floatingStyle.current,\n ...props?.style,\n },\n onPointerEnter() {\n setControlledScrolling(false)\n state.current.isMouseOutside = false\n },\n onPointerLeave() {\n state.current.isMouseOutside = true\n },\n onPointerMove() {\n state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !(\n refs.floating.current?.contains(target) ||\n upArrowRef.current?.contains(target) ||\n downArrowRef.current?.contains(target)\n )\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/select",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -27,19 +27,19 @@
|
|
|
27
27
|
"@floating-ui/react-dom-interactions": "^0.13.3",
|
|
28
28
|
"@floating-ui/react-native": "^0.8.2",
|
|
29
29
|
"@radix-ui/react-use-previous": "^0.1.1",
|
|
30
|
-
"@tamagui/adapt": "^1.0.
|
|
31
|
-
"@tamagui/compose-refs": "^1.0.
|
|
32
|
-
"@tamagui/core": "^1.0.
|
|
33
|
-
"@tamagui/create-context": "^1.0.
|
|
34
|
-
"@tamagui/dismissable": "^1.0.
|
|
35
|
-
"@tamagui/focus-scope": "^1.0.
|
|
36
|
-
"@tamagui/list-item": "^1.0.
|
|
37
|
-
"@tamagui/portal": "^1.0.
|
|
38
|
-
"@tamagui/separator": "^1.0.
|
|
39
|
-
"@tamagui/stacks": "^1.0.
|
|
40
|
-
"@tamagui/text": "^1.0.
|
|
41
|
-
"@tamagui/use-controllable-state": "^1.0.
|
|
42
|
-
"@tamagui/use-event": "^1.0.
|
|
30
|
+
"@tamagui/adapt": "^1.0.5",
|
|
31
|
+
"@tamagui/compose-refs": "^1.0.5",
|
|
32
|
+
"@tamagui/core": "^1.0.5",
|
|
33
|
+
"@tamagui/create-context": "^1.0.5",
|
|
34
|
+
"@tamagui/dismissable": "^1.0.5",
|
|
35
|
+
"@tamagui/focus-scope": "^1.0.5",
|
|
36
|
+
"@tamagui/list-item": "^1.0.5",
|
|
37
|
+
"@tamagui/portal": "^1.0.5",
|
|
38
|
+
"@tamagui/separator": "^1.0.5",
|
|
39
|
+
"@tamagui/stacks": "^1.0.5",
|
|
40
|
+
"@tamagui/text": "^1.0.5",
|
|
41
|
+
"@tamagui/use-controllable-state": "^1.0.5",
|
|
42
|
+
"@tamagui/use-event": "^1.0.5"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": "*",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"react-native": "*"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@tamagui/build": "^1.0.
|
|
50
|
+
"@tamagui/build": "^1.0.5",
|
|
51
51
|
"react": "^18.2.0",
|
|
52
52
|
"react-dom": "^18.2.0",
|
|
53
53
|
"react-native": "*"
|
package/src/Select.tsx
CHANGED
package/src/SelectContent.tsx
CHANGED
|
@@ -22,7 +22,11 @@ export const SelectContent = ({
|
|
|
22
22
|
const context = useSelectContext(CONTENT_NAME, __scopeSelect)
|
|
23
23
|
const themeName = useThemeName()
|
|
24
24
|
const showSheet = useShowSelectSheet(context)
|
|
25
|
-
const contents =
|
|
25
|
+
const contents = (
|
|
26
|
+
<Theme forceClassName name={themeName}>
|
|
27
|
+
{children}
|
|
28
|
+
</Theme>
|
|
29
|
+
)
|
|
26
30
|
const touch = useIsTouchDevice()
|
|
27
31
|
|
|
28
32
|
if (showSheet) {
|
package/src/SelectImpl.tsx
CHANGED
|
@@ -112,7 +112,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
|
|
|
112
112
|
const { x, y, reference, floating, strategy, context, refs } = useFloating({
|
|
113
113
|
open,
|
|
114
114
|
onOpenChange: setOpen,
|
|
115
|
-
whileElementsMounted: autoUpdate,
|
|
115
|
+
whileElementsMounted: open ? autoUpdate : undefined,
|
|
116
116
|
placement: 'bottom-start',
|
|
117
117
|
middleware: fallback
|
|
118
118
|
? [
|