@tamagui/select 1.0.1-beta.121 → 1.0.1-beta.124
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 +4 -2
- package/dist/cjs/Select.js.map +2 -2
- package/dist/cjs/SelectImpl.js +21 -0
- package/dist/cjs/SelectImpl.js.map +2 -2
- package/dist/cjs/SelectViewport.js +5 -1
- package/dist/cjs/SelectViewport.js.map +2 -2
- package/dist/esm/Select.js +4 -2
- package/dist/esm/Select.js.map +2 -2
- package/dist/esm/SelectImpl.js +22 -0
- package/dist/esm/SelectImpl.js.map +2 -2
- package/dist/esm/SelectViewport.js +5 -1
- package/dist/esm/SelectViewport.js.map +2 -2
- package/dist/jsx/Select.js +4 -2
- package/dist/jsx/Select.js.map +2 -2
- package/dist/jsx/SelectImpl.js +22 -0
- package/dist/jsx/SelectImpl.js.map +2 -2
- package/dist/jsx/SelectViewport.js +5 -1
- package/dist/jsx/SelectViewport.js.map +2 -2
- package/package.json +12 -12
- package/src/Select.tsx +2 -0
- package/src/SelectImpl.tsx +25 -4
- package/src/SelectViewport.tsx +5 -1
- package/types/Select.d.ts +3 -3
- package/types/SelectImpl.d.ts +0 -1
- package/types/SelectViewport.d.ts +3 -3
- package/types/Select.d.ts.map +0 -1
- package/types/SelectContent.d.ts.map +0 -1
- package/types/SelectContent.native.d.ts.map +0 -1
- package/types/SelectImpl.d.ts.map +0 -1
- package/types/SelectScrollButton.d.ts.map +0 -1
- package/types/SelectScrollButton.native.d.ts.map +0 -1
- package/types/SelectViewport.d.ts.map +0 -1
- package/types/SelectViewport.native.d.ts.map +0 -1
- package/types/context.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
- package/types/types.d.ts.map +0 -1
package/dist/cjs/Select.js
CHANGED
|
@@ -352,12 +352,14 @@ const Select = (0, import_core2.withStaticProperties)((props) => {
|
|
|
352
352
|
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
353
353
|
prop: openProp,
|
|
354
354
|
defaultProp: defaultOpen || false,
|
|
355
|
-
onChange: onOpenChange
|
|
355
|
+
onChange: onOpenChange,
|
|
356
|
+
strategy: "most-recent-wins"
|
|
356
357
|
});
|
|
357
358
|
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
358
359
|
prop: valueProp,
|
|
359
360
|
defaultProp: defaultValue || "",
|
|
360
|
-
onChange: onValueChange
|
|
361
|
+
onChange: onValueChange,
|
|
362
|
+
strategy: "most-recent-wins"
|
|
361
363
|
});
|
|
362
364
|
const [activeIndex, setActiveIndex] = React.useState(null);
|
|
363
365
|
const selectedIndexRef = React.useRef(null);
|
package/dist/cjs/Select.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Select.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, useMedia } from '@tamagui/core'\nimport { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { ListItem, ListItemProps } from '@tamagui/list-item'\nimport { PortalHost } from '@tamagui/portal'\nimport { Separator } from '@tamagui/separator'\nimport { Sheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { SELECT_NAME } from './constants'\nimport { SelectProvider, createSelectContext, useSelectContext } from './context'\nimport { SelectContent } from './SelectContent'\nimport { SelectImplProps, SelectInlineImpl } from './SelectImpl'\nimport { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton'\nimport { SelectViewport } from './SelectViewport'\nimport { ScopedProps, SelectContextValue, SelectProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __scopeSelect, children: childrenProp, placeholder }: ScopedProps<SelectValueProps>,\n forwardedRef\n ) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const context = useSelectContext(VALUE_NAME, __scopeSelect)\n const { onValueNodeHasChildrenChange } = context\n const hasChildren = childrenProp !== undefined\n const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n React.useLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n const children = childrenProp ?? context.selectedItem\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {context.value === undefined && placeholder !== undefined ? placeholder : children}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (event.key === 'Enter' || (event.key === ' ' && !dataRef?.current.typing)) {\n event.preventDefault()\n handleSelect()\n } else {\n allowSelectRef!.current = true\n }\n },\n onClick() {\n if (allowSelectRef!.current) {\n setSelectedIndex(index)\n setOpen(false)\n }\n },\n onMouseUp() {\n if (!allowMouseUpRef!.current) {\n return\n }\n\n if (allowSelectRef!.current) {\n handleSelect()\n }\n\n // On touch devices, prevent the element from\n // immediately closing `onClick` by deferring it\n clearTimeout(selectTimeoutRef!.current)\n selectTimeoutRef!.current = setTimeout(() => {\n allowSelectRef!.current = true\n })\n },\n })\n : {\n onPress: handleSelect,\n }\n\n return (\n <SelectItemContextProvider\n scope={__scopeSelect}\n value={value}\n textId={textId || ''}\n isSelected={isSelected}\n >\n <ListItem\n backgrounded\n pressTheme\n focusTheme\n componentName={ITEM_NAME}\n ref={composedRefs}\n aria-labelledby={textId}\n aria-selected={isSelected}\n data-state={isSelected ? 'active' : 'inactive'}\n aria-disabled={disabled || undefined}\n data-disabled={disabled ? '' : undefined}\n tabIndex={disabled ? undefined : -1}\n size={context.size}\n {...itemProps}\n {...selectItemProps}\n />\n </SelectItemContextProvider>\n )\n }\n)\n\nSelectItem.displayName = ITEM_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText'\n\nexport const SelectItemTextFrame = styled(Paragraph, {\n name: ITEM_TEXT_NAME,\n selectable: false,\n})\n\ntype SelectItemTextProps = GetProps<typeof SelectItemTextFrame>\n\nconst SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(\n (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n const { __scopeSelect, className, ...itemTextProps } = props\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n const ref = React.useRef<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const isSelected = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n\n const contents = (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n if (!isWeb) {\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected])\n }\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nexport const useSelectBreakpointActive = (\n sheetBreakpoint: SelectContextValue['sheetBreakpoint']\n) => {\n const media = useMedia()\n return sheetBreakpoint ? media[sheetBreakpoint] : false\n}\n\nexport const useShowSelectSheet = (context: SelectContextValue) => {\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onChangeOpen: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onChangeOpen={(val) => {\n if (getShowSheet()) {\n props.onChangeOpen(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'SelectSheetContents'\n\nexport const SelectSheetContents = ({ __scopeSelect }: ScopedProps<{}>) => {\n const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect)\n return <PortalHost name={`${context.scopeKey}SheetContents`} />\n}\n\nSelectSheetContents.displayName = SHEET_CONTENTS_NAME\n\nconst SelectSheetImpl = (props: SelectImplProps) => {\n return <>{props.children}</>\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Select = withStaticProperties(\n (props: ScopedProps<SelectProps>) => {\n const {\n __scopeSelect,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n value: valueProp,\n defaultValue,\n onValueChange,\n size: sizeProp = '$4',\n sheetBreakpoint = false,\n dir,\n } = props\n\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl\n const forceUpdate = React.useReducer(() => ({}), {})[1]\n const [selectedItem, setSelectedItem] = React.useState<React.ReactNode>(null)\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n })\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue || '',\n onChange: onValueChange,\n })\n\n const [activeIndex, setActiveIndex] = React.useState<number | null>(null)\n const selectedIndexRef = React.useRef<number | null>(null)\n const activeIndexRef = React.useRef<number | null>(null)\n\n const listContentRef = React.useRef<string[]>([])\n\n const [selectedIndex, setSelectedIndex] = React.useState(\n Math.max(0, listContentRef.current.indexOf(value))\n )\n\n const [valueNode, setValueNode] = React.useState<HTMLElement | null>(null)\n const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false)\n\n useIsomorphicLayoutEffect(() => {\n selectedIndexRef.current = selectedIndex\n activeIndexRef.current = activeIndex\n })\n\n return (\n <SelectProvider\n dir={dir}\n blockSelection={false}\n size={sizeProp}\n fallback={false}\n selectedItem={selectedItem}\n setSelectedItem={setSelectedItem}\n forceUpdate={forceUpdate}\n valueNode={valueNode}\n onValueNodeChange={setValueNode}\n onValueNodeHasChildrenChange={setValueNodeHasChildren}\n valueNodeHasChildren={valueNodeHasChildren}\n scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onChangeOpen={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\n },\n {\n Content: SelectContent,\n Group: SelectGroup,\n Icon: SelectIcon,\n Item: SelectItem,\n ItemIndicator: SelectItemIndicator,\n ItemText: SelectItemText,\n Label: SelectLabel,\n ScrollDownButton: SelectScrollDownButton,\n ScrollUpButton: SelectScrollUpButton,\n Trigger: SelectTrigger,\n Value: SelectValue,\n Viewport: SelectViewport,\n SheetContents: SelectSheetContents,\n Sheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, useMedia } from '@tamagui/core'\nimport { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { ListItem, ListItemProps } from '@tamagui/list-item'\nimport { PortalHost } from '@tamagui/portal'\nimport { Separator } from '@tamagui/separator'\nimport { Sheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { SELECT_NAME } from './constants'\nimport { SelectProvider, createSelectContext, useSelectContext } from './context'\nimport { SelectContent } from './SelectContent'\nimport { SelectImplProps, SelectInlineImpl } from './SelectImpl'\nimport { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton'\nimport { SelectViewport } from './SelectViewport'\nimport { ScopedProps, SelectContextValue, SelectProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __scopeSelect, children: childrenProp, placeholder }: ScopedProps<SelectValueProps>,\n forwardedRef\n ) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const context = useSelectContext(VALUE_NAME, __scopeSelect)\n const { onValueNodeHasChildrenChange } = context\n const hasChildren = childrenProp !== undefined\n const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n React.useLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n const children = childrenProp ?? context.selectedItem\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {context.value === undefined && placeholder !== undefined ? placeholder : children}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (event.key === 'Enter' || (event.key === ' ' && !dataRef?.current.typing)) {\n event.preventDefault()\n handleSelect()\n } else {\n allowSelectRef!.current = true\n }\n },\n onClick() {\n if (allowSelectRef!.current) {\n setSelectedIndex(index)\n setOpen(false)\n }\n },\n onMouseUp() {\n if (!allowMouseUpRef!.current) {\n return\n }\n\n if (allowSelectRef!.current) {\n handleSelect()\n }\n\n // On touch devices, prevent the element from\n // immediately closing `onClick` by deferring it\n clearTimeout(selectTimeoutRef!.current)\n selectTimeoutRef!.current = setTimeout(() => {\n allowSelectRef!.current = true\n })\n },\n })\n : {\n onPress: handleSelect,\n }\n\n return (\n <SelectItemContextProvider\n scope={__scopeSelect}\n value={value}\n textId={textId || ''}\n isSelected={isSelected}\n >\n <ListItem\n backgrounded\n pressTheme\n focusTheme\n componentName={ITEM_NAME}\n ref={composedRefs}\n aria-labelledby={textId}\n aria-selected={isSelected}\n data-state={isSelected ? 'active' : 'inactive'}\n aria-disabled={disabled || undefined}\n data-disabled={disabled ? '' : undefined}\n tabIndex={disabled ? undefined : -1}\n size={context.size}\n {...itemProps}\n {...selectItemProps}\n />\n </SelectItemContextProvider>\n )\n }\n)\n\nSelectItem.displayName = ITEM_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText'\n\nexport const SelectItemTextFrame = styled(Paragraph, {\n name: ITEM_TEXT_NAME,\n selectable: false,\n})\n\ntype SelectItemTextProps = GetProps<typeof SelectItemTextFrame>\n\nconst SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(\n (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n const { __scopeSelect, className, ...itemTextProps } = props\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n const ref = React.useRef<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const isSelected = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n\n const contents = (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n if (!isWeb) {\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected])\n }\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nexport const useSelectBreakpointActive = (\n sheetBreakpoint: SelectContextValue['sheetBreakpoint']\n) => {\n const media = useMedia()\n return sheetBreakpoint ? media[sheetBreakpoint] : false\n}\n\nexport const useShowSelectSheet = (context: SelectContextValue) => {\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onChangeOpen: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onChangeOpen={(val) => {\n if (getShowSheet()) {\n props.onChangeOpen(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'SelectSheetContents'\n\nexport const SelectSheetContents = ({ __scopeSelect }: ScopedProps<{}>) => {\n const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect)\n return <PortalHost name={`${context.scopeKey}SheetContents`} />\n}\n\nSelectSheetContents.displayName = SHEET_CONTENTS_NAME\n\nconst SelectSheetImpl = (props: SelectImplProps) => {\n return <>{props.children}</>\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Select = withStaticProperties(\n (props: ScopedProps<SelectProps>) => {\n const {\n __scopeSelect,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n value: valueProp,\n defaultValue,\n onValueChange,\n size: sizeProp = '$4',\n sheetBreakpoint = false,\n dir,\n } = props\n\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl\n const forceUpdate = React.useReducer(() => ({}), {})[1]\n const [selectedItem, setSelectedItem] = React.useState<React.ReactNode>(null)\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n 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 })\n\n const [activeIndex, setActiveIndex] = React.useState<number | null>(null)\n const selectedIndexRef = React.useRef<number | null>(null)\n const activeIndexRef = React.useRef<number | null>(null)\n\n const listContentRef = React.useRef<string[]>([])\n\n const [selectedIndex, setSelectedIndex] = React.useState(\n Math.max(0, listContentRef.current.indexOf(value))\n )\n\n const [valueNode, setValueNode] = React.useState<HTMLElement | null>(null)\n const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false)\n\n useIsomorphicLayoutEffect(() => {\n selectedIndexRef.current = selectedIndex\n activeIndexRef.current = activeIndex\n })\n\n return (\n <SelectProvider\n dir={dir}\n blockSelection={false}\n size={sizeProp}\n fallback={false}\n selectedItem={selectedItem}\n setSelectedItem={setSelectedItem}\n forceUpdate={forceUpdate}\n valueNode={valueNode}\n onValueNodeChange={setValueNode}\n onValueNodeHasChildrenChange={setValueNodeHasChildren}\n valueNodeHasChildren={valueNodeHasChildren}\n scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onChangeOpen={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\n },\n {\n Content: SelectContent,\n Group: SelectGroup,\n Icon: SelectIcon,\n Item: SelectItem,\n ItemIndicator: SelectItemIndicator,\n ItemText: SelectItemText,\n Label: SelectLabel,\n ScrollDownButton: SelectScrollDownButton,\n ScrollUpButton: SelectScrollUpButton,\n Trigger: SelectTrigger,\n Value: SelectValue,\n Viewport: SelectViewport,\n SheetContents: SelectSheetContents,\n Sheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/SelectImpl.js
CHANGED
|
@@ -43,6 +43,9 @@ const SelectInlineImpl = (props) => {
|
|
|
43
43
|
const allowSelectRef = React.useRef(false);
|
|
44
44
|
const allowMouseUpRef = React.useRef(true);
|
|
45
45
|
const selectTimeoutRef = React.useRef();
|
|
46
|
+
const state = React.useRef({
|
|
47
|
+
isMouseOutside: false
|
|
48
|
+
});
|
|
46
49
|
const [controlledScrolling, setControlledScrolling] = React.useState(false);
|
|
47
50
|
const [fallback, setFallback] = React.useState(false);
|
|
48
51
|
const [innerOffset, setInnerOffset] = React.useState(0);
|
|
@@ -61,6 +64,19 @@ const SelectInlineImpl = (props) => {
|
|
|
61
64
|
cancelAnimationFrame(frame);
|
|
62
65
|
};
|
|
63
66
|
}, [open, setActiveIndex]);
|
|
67
|
+
React.useEffect(() => {
|
|
68
|
+
if (!open)
|
|
69
|
+
return;
|
|
70
|
+
const mouseUp = (e) => {
|
|
71
|
+
if (state.current.isMouseOutside) {
|
|
72
|
+
setOpen(false);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
document.addEventListener("mouseup", mouseUp);
|
|
76
|
+
return () => {
|
|
77
|
+
document.removeEventListener("mouseup", mouseUp);
|
|
78
|
+
};
|
|
79
|
+
}, [open]);
|
|
64
80
|
const updateFloatingSize = (0, import_react_dom_interactions.size)({
|
|
65
81
|
apply({
|
|
66
82
|
availableHeight,
|
|
@@ -78,6 +94,7 @@ const SelectInlineImpl = (props) => {
|
|
|
78
94
|
const { x, y, reference, floating, strategy, context, refs } = (0, import_react_dom_interactions.useFloating)({
|
|
79
95
|
open,
|
|
80
96
|
onOpenChange: setOpen,
|
|
97
|
+
whileElementsMounted: import_react_dom_interactions.autoUpdate,
|
|
81
98
|
placement: "bottom-start",
|
|
82
99
|
middleware: fallback ? [
|
|
83
100
|
(0, import_react_dom_interactions.offset)(5),
|
|
@@ -155,6 +172,10 @@ const SelectInlineImpl = (props) => {
|
|
|
155
172
|
},
|
|
156
173
|
onPointerEnter() {
|
|
157
174
|
setControlledScrolling(false);
|
|
175
|
+
state.current.isMouseOutside = false;
|
|
176
|
+
},
|
|
177
|
+
onPointerLeave() {
|
|
178
|
+
state.current.isMouseOutside = true;
|
|
158
179
|
},
|
|
159
180
|
onPointerMove() {
|
|
160
181
|
setControlledScrolling(false);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n SideObject,\n detectOverflow,\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 { usePrevious } from '@radix-ui/react-use-previous'\nimport { useForceUpdate, useIsTouchDevice } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { FALLBACK_THRESHOLD, MIN_HEIGHT, SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { ScopedProps, SelectProps } from './types'\n\nexport type SelectImplProps = ScopedProps<SelectProps> & {\n activeIndexRef: any\n selectedIndexRef: any\n listContentRef: any\n}\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const { __scopeSelect, children, open = false, selectedIndexRef, listContentRef } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, 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\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 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 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 - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { pointerDown: true }),\n useDismiss(context, { outsidePointerDown: 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 (event.key === 'Enter' || (event.key === ' ' && !context.dataRef.current.typing)) {\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 },\n onPointerMove() {\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 React.useLayoutEffect(() => {\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 React.useLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !refs.floating.current?.contains(target) &&\n !upArrowRef.current?.contains(target) &&\n !downArrowRef.current?.contains(target)\n ) {\n setOpen(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 React.useLayoutEffect(() => {\n if (open && controlledScrolling) {\n requestAnimationFrame(() => {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\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 React.useLayoutEffect(() => {\n if (open && fallback) {\n requestAnimationFrame(() => {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\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 React.useLayoutEffect(() => {\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) || ''\nconst isFirefox = userAgent.toLowerCase().includes('firefox')\n\nfunction getVisualOffsetTop() {\n return !/^((?!chrome|android).)*safari/i.test(userAgent) ? visualViewport?.offsetTop ?? 0 : 0\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAgBO;
|
|
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 { useIsTouchDevice } 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 { ScopedProps, SelectProps } from './types'\n\nexport type SelectImplProps = ScopedProps<SelectProps> & {\n activeIndexRef: any\n selectedIndexRef: any\n listContentRef: any\n}\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const { __scopeSelect, children, open = false, selectedIndexRef, listContentRef } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, 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 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 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 - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { pointerDown: true }),\n useDismiss(context, { outsidePointerDown: 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 (event.key === 'Enter' || (event.key === ' ' && !context.dataRef.current.typing)) {\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 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 React.useLayoutEffect(() => {\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 React.useLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !refs.floating.current?.contains(target) &&\n !upArrowRef.current?.contains(target) &&\n !downArrowRef.current?.contains(target)\n ) {\n setOpen(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 React.useLayoutEffect(() => {\n if (open && controlledScrolling) {\n requestAnimationFrame(() => {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\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 React.useLayoutEffect(() => {\n if (open && fallback) {\n requestAnimationFrame(() => {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\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 React.useLayoutEffect(() => {\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) || ''\nconst isFirefox = userAgent.toLowerCase().includes('firefox')\n\nfunction getVisualOffsetTop() {\n return !/^((?!chrome|android).)*safari/i.test(userAgent) ? visualViewport?.offsetTop ?? 0 : 0\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAgBO;AACP,kBAAiC;AACjC,YAAuB;AACvB,uBAA0B;AAE1B,uBAAuD;AACvD,qBAAiD;AAU1C,MAAM,mBAAmB,CAAC,UAA2B;AAC1D,QAAM,EAAE,eAAe,UAAU,OAAO,OAAO,kBAAkB,mBAAmB;AAEpF,QAAM,gBAAgB,qCAAiB,mBAAmB,aAAa;AACvE,QAAM,EAAE,gBAAgB,SAAS,kBAAkB,eAAe,aAAa,gBAC7E;AACF,QAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,CAAC;AAClD,QAAM,QAAQ,kCAAiB;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,0BAA0B,MAAM,SAAS,KAAK;AAC1E,QAAM,CAAC,UAAU,eAAe,MAAM,SAAS,KAAK;AACpD,QAAM,CAAC,aAAa,kBAAkB,MAAM,SAAS,CAAC;AACtD,QAAM,CAAC,gBAAgB,qBAAqB,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,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC;AAAM;AACX,UAAM,UAAU,CAAC,MAAkB;AACjC,UAAI,MAAM,QAAQ,gBAAgB;AAChC,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AACA,aAAS,iBAAiB,WAAW,OAAO;AAC5C,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,OAAO;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,qBAAqB,wCAAK;AAAA,IAC9B,MAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACL,WAAW,EAAE;AAAA;AAAA,OAEd;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,SAAS,+CAAY;AAAA,IACzE;AAAA,IACA,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,YAAY,WACR;AAAA,MACE,0CAAO,CAAC;AAAA,MACR,GAAG;AAAA,QACD,QACI,yCAAM,EAAE,WAAW,MAAM,SAAS,gCAAe,CAAC,IAClD,wCAAK,EAAE,SAAS,gCAAe,CAAC;AAAA,MACtC;AAAA,MACA;AAAA,IACF,IACA;AAAA,MACE,yCAAM;AAAA,QACJ,SAAS;AAAA,QACT;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,SAAS;AAAA,QACT,iBAAiB,QAAQ,KAAK;AAAA,QAC9B,4BAA4B;AAAA,MAC9B,CAAC;AAAA,MACD;AAAA,IACF;AAAA,EACN,CAAC;AAED,QAAM,cAAc,KAAK;AAEzB,QAAM,cAAc,QAAQ,YAAY;AACxC,QAAM,gBACJ,QACA,YAAY,WACZ,YACE,YAAY,QAAQ,eAAe,YAAY,QAAQ,eAAe;AAE1E,QAAM,eAAe,mDAAgB;AAAA,IACnC,4CAAS,SAAS,EAAE,aAAa,KAAK,CAAC;AAAA,IACvC,8CAAW,SAAS,EAAE,oBAAoB,MAAM,CAAC;AAAA,IACjD,2CAAQ,SAAS,EAAE,MAAM,UAAU,CAAC;AAAA,IACpC,kDAAe,SAAS;AAAA,MACtB,SAAS,CAAC;AAAA,MACV,UAAU;AAAA,MACV;AAAA,IACF,CAAC;AAAA,IACD,qDAAkB,SAAS;AAAA,MACzB,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,YAAY;AAAA,IACd,CAAC;AAAA,IACD,gDAAa,SAAS;AAAA,MACpB,SAAS;AAAA,MACT,SAAS,OAAO,iBAAiB;AAAA,MACjC;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,QAAM,sBAAsB;AAAA,IAC1B,GAAG;AAAA,IACH,oBAAoB;AAClB,aAAO,aAAa,kBAAkB;AAAA,QACpC,KAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU,OAAO;AACf,cAAI,MAAM,QAAQ,WAAY,MAAM,QAAQ,OAAO,CAAC,QAAQ,QAAQ,QAAQ,QAAS;AACnF,kBAAM,eAAe;AACrB,oBAAQ,IAAI;AAAA,UACd;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,iBAAiB,QAAO;AACtB,aAAO,aAAa,iBAAiB;AAAA,QACnC,KAAK;AAAA,QACL,WAAW;AAAA,QACX,GAAG;AAAA,QACH,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK,KAAK;AAAA,UACV,MAAM,KAAK;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,gBAAgB;AAAA,UAChB,GAAG,cAAc;AAAA,UACjB,GAAG,iCAAO;AAAA,QACZ;AAAA,QACA,iBAAiB;AACf,iCAAuB,KAAK;AAC5B,gBAAM,QAAQ,iBAAiB;AAAA,QACjC;AAAA,QACA,iBAAiB;AACf,gBAAM,QAAQ,iBAAiB;AAAA,QACjC;AAAA,QACA,gBAAgB;AACd,iCAAuB,KAAK;AAAA,QAC9B;AAAA,QACA,YAAY;AACV,iCAAuB,IAAI;AAAA,QAC7B;AAAA,QACA,cAAc,GAAG;AACf,YAAE,eAAe;AAAA,QACnB;AAAA,QACA,SAAS,OAAO;AAGd,0CAAU,MAAM,aAAa,MAAM,cAAc,SAAS,CAAC;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAIA,QAAM,gBAAgB,MAAM;AAC1B,QAAI,MAAM;AACR,uBAAiB,UAAU,WAAW,MAAM;AAC1C,uBAAe,UAAU;AAAA,MAC3B,GAAG,GAAG;AAEN,aAAO,MAAM;AACX,qBAAa,iBAAiB,OAAO;AAAA,MACvC;AAAA,IACF,OAAO;AACL,qBAAe,UAAU;AACzB,sBAAgB,UAAU;AAC1B,qBAAe,CAAC;AAChB,kBAAY,KAAK;AACjB,wBAAkB,KAAK;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAIT,QAAM,gBAAgB,MAAM;AAC1B,2BAAuB,GAAiB;AAlP5C;AAmPM,YAAM,SAAS,EAAE;AACjB,UACE,CAAC,YAAK,SAAS,YAAd,mBAAuB,SAAS,YACjC,CAAC,kBAAW,YAAX,mBAAoB,SAAS,YAC9B,CAAC,oBAAa,YAAb,mBAAsB,SAAS,UAChC;AACA,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,QAAI,MAAM;AACR,eAAS,iBAAiB,eAAe,aAAa;AACtD,aAAO,MAAM;AACX,iBAAS,oBAAoB,eAAe,aAAa;AAAA,MAC3D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,OAAO,CAAC;AAIxB,QAAM,gBAAgB,MAAM;AAvQ9B;AAwQI,QAAI,QAAQ,qBAAqB;AAC/B,4BAAsB,MAAM;AAzQlC;AA0QQ,YAAI,eAAe,MAAM;AACvB,8BAAa,QAAQ,iBAArB,oBAAmC,eAAe,EAAE,OAAO,UAAU;AAAA,QACvE;AAAA,MACF,CAAC;AAAA,IACH;AAEA,iBAAa,YAAK,SAAS,YAAd,mBAAuB,cAAa,CAAC;AAAA,EACpD,GAAG,CAAC,MAAM,MAAM,qBAAqB,WAAW,CAAC;AAGjD,QAAM,gBAAgB,MAAM;AAC1B,QAAI,QAAQ,UAAU;AACpB,4BAAsB,MAAM;AAtRlC;AAuRQ,YAAI,iBAAiB,MAAM;AACzB,6BAAa,QAAQ,mBAArB,mBAAqC,eAAe,EAAE,OAAO,UAAU;AAAA,QACzE;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,aAAa,CAAC;AAIlC,QAAM,gBAAgB,MAAM;AAC1B,QAAI,KAAK,SAAS,WAAW,UAAU;AACrC,WAAK,SAAS,QAAQ,MAAM,YAAY;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,CAAC;AAOnB,SACE,oCAAC;AAAA,IACC,OAAO;AAAA,IACN,GAAI;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,CAAC,OAAO,UAAU;AACjC,qBAAe,QAAQ,SAAS;AAAA,IAClC;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA,eAAe,CAAC,CAAC;AAAA,IACjB,aAAa,CAAC,CAAC;AAAA,IACf,qBAAmB;AAAA,IACnB,SAAS,QAAQ;AAAA,IACjB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,QAaH;AAEJ;AAGA,MAAM,YAAa,OAAO,cAAc,eAAe,UAAU,aAAc;AAC/E,MAAM,YAAY,UAAU,YAAY,EAAE,SAAS,SAAS;AAE5D,8BAA8B;AAC5B,SAAO,CAAC,iCAAiC,KAAK,SAAS,IAAI,kDAAgB,cAAa,IAAI;AAC9F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -91,7 +91,11 @@ const SelectViewport = React.forwardRef((props, forwardedRef) => {
|
|
|
91
91
|
}, children)));
|
|
92
92
|
});
|
|
93
93
|
SelectViewport.displayName = import_constants.VIEWPORT_NAME;
|
|
94
|
-
const disableScrollbarCSS = `[data-tamagui-select-viewport]{
|
|
94
|
+
const disableScrollbarCSS = `[data-tamagui-select-viewport]{
|
|
95
|
+
scrollbar-width:none;-webkit-overflow-scrolling:touch;
|
|
96
|
+
overscroll-behavior: contain;
|
|
97
|
+
}
|
|
98
|
+
[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`;
|
|
95
99
|
// Annotate the CommonJS export names for ESM import in node:
|
|
96
100
|
0 && (module.exports = {
|
|
97
101
|
SelectViewport,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectViewport.tsx"],
|
|
4
|
-
"sourcesContent": ["import { FloatingFocusManager } from '@floating-ui/react-dom-interactions'\nimport { TamaguiElement, isWeb } from '@tamagui/core'\nimport { styled } from '@tamagui/core'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { useSelectBreakpointActive } from './Select'\nimport { ScopedProps, SelectViewportProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectViewportFrame = styled(ThemeableStack, {\n name: VIEWPORT_NAME,\n backgroundColor: '$background',\n elevate: true,\n bordered: true,\n overflow: 'scroll',\n userSelect: 'none',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n borderRadius: tokens.radius[val] ?? val,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$2',\n },\n})\n\nexport const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(\n (props: ScopedProps<SelectViewportProps>, forwardedRef) => {\n const { __scopeSelect, children, ...viewportProps } = props\n const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n\n if (breakpointActive || !isWeb) {\n return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n }\n\n if (!context.floatingContext) {\n return null\n }\n\n if (!context.open) {\n return children\n }\n\n const {\n style: { scrollbarWidth, listStyleType, ...restStyle },\n ...floatingProps\n } = context.interactions!.getFloatingProps()\n\n return (\n <>\n {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n <style\n dangerouslySetInnerHTML={{\n __html: disableScrollbarCSS,\n }}\n />\n <FloatingFocusManager context={context.floatingContext} preventTabbing>\n <SelectViewportFrame\n size={context.size}\n data-tamagui-select-viewport=\"\"\n // @ts-ignore\n role=\"presentation\"\n {...viewportProps}\n ref={forwardedRef}\n {...floatingProps}\n {...restStyle}\n >\n {children}\n </SelectViewportFrame>\n </FloatingFocusManager>\n </>\n )\n }\n)\n\nSelectViewport.displayName = VIEWPORT_NAME\n\nconst disableScrollbarCSS = `[data-tamagui-select-viewport]{scrollbar-width:none;-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAAqC;AACrC,kBAAsC;AACtC,mBAAuB;AACvB,oBAA2B;AAC3B,oBAA+B;AAC/B,YAAuB;AAEvB,uBAA8B;AAC9B,qBAAiC;AACjC,oBAA0C;AAOnC,MAAM,sBAAsB,yBAAO,8BAAgB;AAAA,EACxD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAAyC,iBAAiB;AACzD,QAAM,EAAE,eAAe,aAAa,kBAAkB;AACtD,QAAM,UAAU,qCAAiB,gCAAe,aAAa;AAC7D,QAAM,mBAAmB,6CAA0B,QAAQ,eAAe;AAE1E,MAAI,oBAAoB,CAAC,mBAAO;AAC9B,WAAO,oCAAC;AAAA,MAAW,UAAU,GAAG,QAAQ;AAAA,OAA0B,QAAS;AAAA,EAC7E;AAEA,MAAI,CAAC,QAAQ,iBAAiB;AAC5B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,MAAM;AACjB,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,kBAAkB;AAAA,OACxC;AAAA,MACD,QAAQ,aAAc,iBAAiB;AAE3C,SACE,0DAEE,oCAAC;AAAA,IACC,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV;AAAA,GACF,GACA,oCAAC;AAAA,IAAqB,SAAS,QAAQ;AAAA,IAAiB,gBAAc;AAAA,KACpE,oCAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IACd,gCAA6B;AAAA,IAE7B,MAAK;AAAA,IACJ,GAAG;AAAA,IACJ,KAAK;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,KAEH,QACH,CACF,CACF;AAEJ,CACF;AAEA,eAAe,cAAc;AAE7B,MAAM,sBAAsB;",
|
|
4
|
+
"sourcesContent": ["import { FloatingFocusManager } from '@floating-ui/react-dom-interactions'\nimport { TamaguiElement, isWeb } from '@tamagui/core'\nimport { styled } from '@tamagui/core'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { useSelectBreakpointActive } from './Select'\nimport { ScopedProps, SelectViewportProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectViewportFrame = styled(ThemeableStack, {\n name: VIEWPORT_NAME,\n backgroundColor: '$background',\n elevate: true,\n bordered: true,\n overflow: 'scroll',\n userSelect: 'none',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n borderRadius: tokens.radius[val] ?? val,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$2',\n },\n})\n\nexport const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(\n (props: ScopedProps<SelectViewportProps>, forwardedRef) => {\n const { __scopeSelect, children, ...viewportProps } = props\n const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n\n if (breakpointActive || !isWeb) {\n return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n }\n\n if (!context.floatingContext) {\n return null\n }\n\n if (!context.open) {\n return children\n }\n\n const {\n style: { scrollbarWidth, listStyleType, ...restStyle },\n ...floatingProps\n } = context.interactions!.getFloatingProps()\n\n return (\n <>\n {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n <style\n dangerouslySetInnerHTML={{\n __html: disableScrollbarCSS,\n }}\n />\n <FloatingFocusManager context={context.floatingContext} preventTabbing>\n <SelectViewportFrame\n size={context.size}\n data-tamagui-select-viewport=\"\"\n // @ts-ignore\n role=\"presentation\"\n {...viewportProps}\n ref={forwardedRef}\n {...floatingProps}\n {...restStyle}\n >\n {children}\n </SelectViewportFrame>\n </FloatingFocusManager>\n </>\n )\n }\n)\n\nSelectViewport.displayName = VIEWPORT_NAME\n\nconst disableScrollbarCSS = `[data-tamagui-select-viewport]{\n scrollbar-width:none;-webkit-overflow-scrolling:touch;\n overscroll-behavior: contain;\n}\n[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAAqC;AACrC,kBAAsC;AACtC,mBAAuB;AACvB,oBAA2B;AAC3B,oBAA+B;AAC/B,YAAuB;AAEvB,uBAA8B;AAC9B,qBAAiC;AACjC,oBAA0C;AAOnC,MAAM,sBAAsB,yBAAO,8BAAgB;AAAA,EACxD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAAyC,iBAAiB;AACzD,QAAM,EAAE,eAAe,aAAa,kBAAkB;AACtD,QAAM,UAAU,qCAAiB,gCAAe,aAAa;AAC7D,QAAM,mBAAmB,6CAA0B,QAAQ,eAAe;AAE1E,MAAI,oBAAoB,CAAC,mBAAO;AAC9B,WAAO,oCAAC;AAAA,MAAW,UAAU,GAAG,QAAQ;AAAA,OAA0B,QAAS;AAAA,EAC7E;AAEA,MAAI,CAAC,QAAQ,iBAAiB;AAC5B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,MAAM;AACjB,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,kBAAkB;AAAA,OACxC;AAAA,MACD,QAAQ,aAAc,iBAAiB;AAE3C,SACE,0DAEE,oCAAC;AAAA,IACC,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV;AAAA,GACF,GACA,oCAAC;AAAA,IAAqB,SAAS,QAAQ;AAAA,IAAiB,gBAAc;AAAA,KACpE,oCAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IACd,gCAA6B;AAAA,IAE7B,MAAK;AAAA,IACJ,GAAG;AAAA,IACJ,KAAK;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,KAEH,QACH,CACF,CACF;AAEJ,CACF;AAEA,eAAe,cAAc;AAE7B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Select.js
CHANGED
|
@@ -317,12 +317,14 @@ const Select = withStaticProperties((props) => {
|
|
|
317
317
|
const [open, setOpen] = useControllableState({
|
|
318
318
|
prop: openProp,
|
|
319
319
|
defaultProp: defaultOpen || false,
|
|
320
|
-
onChange: onOpenChange
|
|
320
|
+
onChange: onOpenChange,
|
|
321
|
+
strategy: "most-recent-wins"
|
|
321
322
|
});
|
|
322
323
|
const [value, setValue] = useControllableState({
|
|
323
324
|
prop: valueProp,
|
|
324
325
|
defaultProp: defaultValue || "",
|
|
325
|
-
onChange: onValueChange
|
|
326
|
+
onChange: onValueChange,
|
|
327
|
+
strategy: "most-recent-wins"
|
|
326
328
|
});
|
|
327
329
|
const [activeIndex, setActiveIndex] = React.useState(null);
|
|
328
330
|
const selectedIndexRef = React.useRef(null);
|
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 { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, useMedia } from '@tamagui/core'\nimport { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { ListItem, ListItemProps } from '@tamagui/list-item'\nimport { PortalHost } from '@tamagui/portal'\nimport { Separator } from '@tamagui/separator'\nimport { Sheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { SELECT_NAME } from './constants'\nimport { SelectProvider, createSelectContext, useSelectContext } from './context'\nimport { SelectContent } from './SelectContent'\nimport { SelectImplProps, SelectInlineImpl } from './SelectImpl'\nimport { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton'\nimport { SelectViewport } from './SelectViewport'\nimport { ScopedProps, SelectContextValue, SelectProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __scopeSelect, children: childrenProp, placeholder }: ScopedProps<SelectValueProps>,\n forwardedRef\n ) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const context = useSelectContext(VALUE_NAME, __scopeSelect)\n const { onValueNodeHasChildrenChange } = context\n const hasChildren = childrenProp !== undefined\n const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n React.useLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n const children = childrenProp ?? context.selectedItem\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {context.value === undefined && placeholder !== undefined ? placeholder : children}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (event.key === 'Enter' || (event.key === ' ' && !dataRef?.current.typing)) {\n event.preventDefault()\n handleSelect()\n } else {\n allowSelectRef!.current = true\n }\n },\n onClick() {\n if (allowSelectRef!.current) {\n setSelectedIndex(index)\n setOpen(false)\n }\n },\n onMouseUp() {\n if (!allowMouseUpRef!.current) {\n return\n }\n\n if (allowSelectRef!.current) {\n handleSelect()\n }\n\n // On touch devices, prevent the element from\n // immediately closing `onClick` by deferring it\n clearTimeout(selectTimeoutRef!.current)\n selectTimeoutRef!.current = setTimeout(() => {\n allowSelectRef!.current = true\n })\n },\n })\n : {\n onPress: handleSelect,\n }\n\n return (\n <SelectItemContextProvider\n scope={__scopeSelect}\n value={value}\n textId={textId || ''}\n isSelected={isSelected}\n >\n <ListItem\n backgrounded\n pressTheme\n focusTheme\n componentName={ITEM_NAME}\n ref={composedRefs}\n aria-labelledby={textId}\n aria-selected={isSelected}\n data-state={isSelected ? 'active' : 'inactive'}\n aria-disabled={disabled || undefined}\n data-disabled={disabled ? '' : undefined}\n tabIndex={disabled ? undefined : -1}\n size={context.size}\n {...itemProps}\n {...selectItemProps}\n />\n </SelectItemContextProvider>\n )\n }\n)\n\nSelectItem.displayName = ITEM_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText'\n\nexport const SelectItemTextFrame = styled(Paragraph, {\n name: ITEM_TEXT_NAME,\n selectable: false,\n})\n\ntype SelectItemTextProps = GetProps<typeof SelectItemTextFrame>\n\nconst SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(\n (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n const { __scopeSelect, className, ...itemTextProps } = props\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n const ref = React.useRef<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const isSelected = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n\n const contents = (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n if (!isWeb) {\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected])\n }\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nexport const useSelectBreakpointActive = (\n sheetBreakpoint: SelectContextValue['sheetBreakpoint']\n) => {\n const media = useMedia()\n return sheetBreakpoint ? media[sheetBreakpoint] : false\n}\n\nexport const useShowSelectSheet = (context: SelectContextValue) => {\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onChangeOpen: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onChangeOpen={(val) => {\n if (getShowSheet()) {\n props.onChangeOpen(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'SelectSheetContents'\n\nexport const SelectSheetContents = ({ __scopeSelect }: ScopedProps<{}>) => {\n const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect)\n return <PortalHost name={`${context.scopeKey}SheetContents`} />\n}\n\nSelectSheetContents.displayName = SHEET_CONTENTS_NAME\n\nconst SelectSheetImpl = (props: SelectImplProps) => {\n return <>{props.children}</>\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Select = withStaticProperties(\n (props: ScopedProps<SelectProps>) => {\n const {\n __scopeSelect,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n value: valueProp,\n defaultValue,\n onValueChange,\n size: sizeProp = '$4',\n sheetBreakpoint = false,\n dir,\n } = props\n\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl\n const forceUpdate = React.useReducer(() => ({}), {})[1]\n const [selectedItem, setSelectedItem] = React.useState<React.ReactNode>(null)\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n })\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue || '',\n onChange: onValueChange,\n })\n\n const [activeIndex, setActiveIndex] = React.useState<number | null>(null)\n const selectedIndexRef = React.useRef<number | null>(null)\n const activeIndexRef = React.useRef<number | null>(null)\n\n const listContentRef = React.useRef<string[]>([])\n\n const [selectedIndex, setSelectedIndex] = React.useState(\n Math.max(0, listContentRef.current.indexOf(value))\n )\n\n const [valueNode, setValueNode] = React.useState<HTMLElement | null>(null)\n const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false)\n\n useIsomorphicLayoutEffect(() => {\n selectedIndexRef.current = selectedIndex\n activeIndexRef.current = activeIndex\n })\n\n return (\n <SelectProvider\n dir={dir}\n blockSelection={false}\n size={sizeProp}\n fallback={false}\n selectedItem={selectedItem}\n setSelectedItem={setSelectedItem}\n forceUpdate={forceUpdate}\n valueNode={valueNode}\n onValueNodeChange={setValueNode}\n onValueNodeHasChildrenChange={setValueNodeHasChildren}\n valueNodeHasChildren={valueNodeHasChildren}\n scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onChangeOpen={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\n },\n {\n Content: SelectContent,\n Group: SelectGroup,\n Icon: SelectIcon,\n Item: SelectItem,\n ItemIndicator: SelectItemIndicator,\n ItemText: SelectItemText,\n Label: SelectLabel,\n ScrollDownButton: SelectScrollDownButton,\n ScrollUpButton: SelectScrollUpButton,\n Trigger: SelectTrigger,\n Value: SelectValue,\n Viewport: SelectViewport,\n SheetContents: SelectSheetContents,\n Sheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, useMedia } from '@tamagui/core'\nimport { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { ListItem, ListItemProps } from '@tamagui/list-item'\nimport { PortalHost } from '@tamagui/portal'\nimport { Separator } from '@tamagui/separator'\nimport { Sheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { SELECT_NAME } from './constants'\nimport { SelectProvider, createSelectContext, useSelectContext } from './context'\nimport { SelectContent } from './SelectContent'\nimport { SelectImplProps, SelectInlineImpl } from './SelectImpl'\nimport { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton'\nimport { SelectViewport } from './SelectViewport'\nimport { ScopedProps, SelectContextValue, SelectProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __scopeSelect, children: childrenProp, placeholder }: ScopedProps<SelectValueProps>,\n forwardedRef\n ) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const context = useSelectContext(VALUE_NAME, __scopeSelect)\n const { onValueNodeHasChildrenChange } = context\n const hasChildren = childrenProp !== undefined\n const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n React.useLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n const children = childrenProp ?? context.selectedItem\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {context.value === undefined && placeholder !== undefined ? placeholder : children}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (event.key === 'Enter' || (event.key === ' ' && !dataRef?.current.typing)) {\n event.preventDefault()\n handleSelect()\n } else {\n allowSelectRef!.current = true\n }\n },\n onClick() {\n if (allowSelectRef!.current) {\n setSelectedIndex(index)\n setOpen(false)\n }\n },\n onMouseUp() {\n if (!allowMouseUpRef!.current) {\n return\n }\n\n if (allowSelectRef!.current) {\n handleSelect()\n }\n\n // On touch devices, prevent the element from\n // immediately closing `onClick` by deferring it\n clearTimeout(selectTimeoutRef!.current)\n selectTimeoutRef!.current = setTimeout(() => {\n allowSelectRef!.current = true\n })\n },\n })\n : {\n onPress: handleSelect,\n }\n\n return (\n <SelectItemContextProvider\n scope={__scopeSelect}\n value={value}\n textId={textId || ''}\n isSelected={isSelected}\n >\n <ListItem\n backgrounded\n pressTheme\n focusTheme\n componentName={ITEM_NAME}\n ref={composedRefs}\n aria-labelledby={textId}\n aria-selected={isSelected}\n data-state={isSelected ? 'active' : 'inactive'}\n aria-disabled={disabled || undefined}\n data-disabled={disabled ? '' : undefined}\n tabIndex={disabled ? undefined : -1}\n size={context.size}\n {...itemProps}\n {...selectItemProps}\n />\n </SelectItemContextProvider>\n )\n }\n)\n\nSelectItem.displayName = ITEM_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText'\n\nexport const SelectItemTextFrame = styled(Paragraph, {\n name: ITEM_TEXT_NAME,\n selectable: false,\n})\n\ntype SelectItemTextProps = GetProps<typeof SelectItemTextFrame>\n\nconst SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(\n (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n const { __scopeSelect, className, ...itemTextProps } = props\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n const ref = React.useRef<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const isSelected = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n\n const contents = (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n if (!isWeb) {\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected])\n }\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nexport const useSelectBreakpointActive = (\n sheetBreakpoint: SelectContextValue['sheetBreakpoint']\n) => {\n const media = useMedia()\n return sheetBreakpoint ? media[sheetBreakpoint] : false\n}\n\nexport const useShowSelectSheet = (context: SelectContextValue) => {\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onChangeOpen: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onChangeOpen={(val) => {\n if (getShowSheet()) {\n props.onChangeOpen(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'SelectSheetContents'\n\nexport const SelectSheetContents = ({ __scopeSelect }: ScopedProps<{}>) => {\n const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect)\n return <PortalHost name={`${context.scopeKey}SheetContents`} />\n}\n\nSelectSheetContents.displayName = SHEET_CONTENTS_NAME\n\nconst SelectSheetImpl = (props: SelectImplProps) => {\n return <>{props.children}</>\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Select = withStaticProperties(\n (props: ScopedProps<SelectProps>) => {\n const {\n __scopeSelect,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n value: valueProp,\n defaultValue,\n onValueChange,\n size: sizeProp = '$4',\n sheetBreakpoint = false,\n dir,\n } = props\n\n const isSheet = useSelectBreakpointActive(sheetBreakpoint)\n const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl\n const forceUpdate = React.useReducer(() => ({}), {})[1]\n const [selectedItem, setSelectedItem] = React.useState<React.ReactNode>(null)\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n 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 })\n\n const [activeIndex, setActiveIndex] = React.useState<number | null>(null)\n const selectedIndexRef = React.useRef<number | null>(null)\n const activeIndexRef = React.useRef<number | null>(null)\n\n const listContentRef = React.useRef<string[]>([])\n\n const [selectedIndex, setSelectedIndex] = React.useState(\n Math.max(0, listContentRef.current.indexOf(value))\n )\n\n const [valueNode, setValueNode] = React.useState<HTMLElement | null>(null)\n const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false)\n\n useIsomorphicLayoutEffect(() => {\n selectedIndexRef.current = selectedIndex\n activeIndexRef.current = activeIndex\n })\n\n return (\n <SelectProvider\n dir={dir}\n blockSelection={false}\n size={sizeProp}\n fallback={false}\n selectedItem={selectedItem}\n setSelectedItem={setSelectedItem}\n forceUpdate={forceUpdate}\n valueNode={valueNode}\n onValueNodeChange={setValueNode}\n onValueNodeHasChildrenChange={setValueNodeHasChildren}\n valueNodeHasChildren={valueNodeHasChildren}\n scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onChangeOpen={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\n },\n {\n Content: SelectContent,\n Group: SelectGroup,\n Icon: SelectIcon,\n Item: SelectItem,\n ItemIndicator: SelectItemIndicator,\n ItemText: SelectItemText,\n Label: SelectLabel,\n ScrollDownButton: SelectScrollDownButton,\n ScrollUpButton: SelectScrollUpButton,\n Trigger: SelectTrigger,\n Value: SelectValue,\n Viewport: SelectViewport,\n SheetContents: SelectSheetContents,\n Sheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SelectImpl.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
+
autoUpdate,
|
|
2
3
|
flip,
|
|
3
4
|
inner,
|
|
4
5
|
offset,
|
|
@@ -31,6 +32,9 @@ const SelectInlineImpl = (props) => {
|
|
|
31
32
|
const allowSelectRef = React.useRef(false);
|
|
32
33
|
const allowMouseUpRef = React.useRef(true);
|
|
33
34
|
const selectTimeoutRef = React.useRef();
|
|
35
|
+
const state = React.useRef({
|
|
36
|
+
isMouseOutside: false
|
|
37
|
+
});
|
|
34
38
|
const [controlledScrolling, setControlledScrolling] = React.useState(false);
|
|
35
39
|
const [fallback, setFallback] = React.useState(false);
|
|
36
40
|
const [innerOffset, setInnerOffset] = React.useState(0);
|
|
@@ -49,6 +53,19 @@ const SelectInlineImpl = (props) => {
|
|
|
49
53
|
cancelAnimationFrame(frame);
|
|
50
54
|
};
|
|
51
55
|
}, [open, setActiveIndex]);
|
|
56
|
+
React.useEffect(() => {
|
|
57
|
+
if (!open)
|
|
58
|
+
return;
|
|
59
|
+
const mouseUp = (e) => {
|
|
60
|
+
if (state.current.isMouseOutside) {
|
|
61
|
+
setOpen(false);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
document.addEventListener("mouseup", mouseUp);
|
|
65
|
+
return () => {
|
|
66
|
+
document.removeEventListener("mouseup", mouseUp);
|
|
67
|
+
};
|
|
68
|
+
}, [open]);
|
|
52
69
|
const updateFloatingSize = size({
|
|
53
70
|
apply({
|
|
54
71
|
availableHeight,
|
|
@@ -66,6 +83,7 @@ const SelectInlineImpl = (props) => {
|
|
|
66
83
|
const { x, y, reference, floating, strategy, context, refs } = useFloating({
|
|
67
84
|
open,
|
|
68
85
|
onOpenChange: setOpen,
|
|
86
|
+
whileElementsMounted: autoUpdate,
|
|
69
87
|
placement: "bottom-start",
|
|
70
88
|
middleware: fallback ? [
|
|
71
89
|
offset(5),
|
|
@@ -143,6 +161,10 @@ const SelectInlineImpl = (props) => {
|
|
|
143
161
|
},
|
|
144
162
|
onPointerEnter() {
|
|
145
163
|
setControlledScrolling(false);
|
|
164
|
+
state.current.isMouseOutside = false;
|
|
165
|
+
},
|
|
166
|
+
onPointerLeave() {
|
|
167
|
+
state.current.isMouseOutside = true;
|
|
146
168
|
},
|
|
147
169
|
onPointerMove() {
|
|
148
170
|
setControlledScrolling(false);
|