@tamagui/select 1.0.1-beta.216 → 1.0.1-beta.218
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Select.js +1 -1
- package/dist/cjs/Select.js.map +2 -2
- package/dist/cjs/SelectImpl.js +15 -13
- package/dist/cjs/SelectImpl.js.map +2 -2
- package/dist/esm/Select.js +2 -2
- package/dist/esm/Select.js.map +2 -2
- package/dist/esm/SelectImpl.js +16 -14
- package/dist/esm/SelectImpl.js.map +2 -2
- package/dist/jsx/Select.js +2 -2
- package/dist/jsx/Select.js.map +2 -2
- package/dist/jsx/SelectImpl.js +16 -14
- package/dist/jsx/SelectImpl.js.map +2 -2
- package/package.json +18 -18
- package/src/Select.tsx +2 -2
- package/src/SelectImpl.tsx +14 -12
- package/types/Select.d.ts +1 -101
package/dist/cjs/Select.js
CHANGED
|
@@ -233,7 +233,7 @@ const SelectItem = React.forwardRef(
|
|
|
233
233
|
);
|
|
234
234
|
SelectItem.displayName = ITEM_NAME;
|
|
235
235
|
const ITEM_TEXT_NAME = "SelectItemText";
|
|
236
|
-
const SelectItemTextFrame = (0, import_core2.styled)(import_text.
|
|
236
|
+
const SelectItemTextFrame = (0, import_core2.styled)(import_text.SizableText, {
|
|
237
237
|
name: ITEM_TEXT_NAME,
|
|
238
238
|
selectable: false
|
|
239
239
|
});
|
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, isClient, isWeb } 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 { ControlledSheet, 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, SelectProps } from './types'\nimport { useSelectBreakpointActive, useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(process.env.TAMAGUI_TARGET === 'web' && context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __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 composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n const children = childrenProp ?? context.selectedItem\n const hasChildren = !!children\n const selectValueChildren =\n context.value === undefined && placeholder !== undefined ? placeholder : children\n\n useIsomorphicLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {selectValueChildren}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (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 cursor=\"\"\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 = Boolean(itemContext.isSelected && context.valueNode)\n\n const contents = React.useMemo(\n () => (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [props, context.size, className, itemContext.textId]\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected, contents])\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {/* this needs some extra stability between renders */}\n {/* {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null} */}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\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 const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\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={scopeKey}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\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: ControlledSheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CM;AA/CN,0BAAgC;AAChC,kBAA0D;AAC1D,IAAAA,eAAgF;AAChF,IAAAA,eAAsB;AACtB,uBAAwC;AACxC,oBAA2B;AAC3B,uBAA0B;AAC1B,mBAAiD;AACjD,oBAA4C;AAC5C,
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isClient, isWeb } 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 { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph, SizableText } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\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, SelectProps } from './types'\nimport { useSelectBreakpointActive, useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(process.env.TAMAGUI_TARGET === 'web' && context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __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 composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n const children = childrenProp ?? context.selectedItem\n const hasChildren = !!children\n const selectValueChildren =\n context.value === undefined && placeholder !== undefined ? placeholder : children\n\n useIsomorphicLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {selectValueChildren}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (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 cursor=\"\"\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(SizableText, {\n name: ITEM_TEXT_NAME,\n selectable: false,\n})\n\ntype SelectItemTextProps = GetProps<typeof SelectItemTextFrame>\n\nconst SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(\n (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n const { __scopeSelect, className, ...itemTextProps } = props\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n const ref = React.useRef<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const isSelected = Boolean(itemContext.isSelected && context.valueNode)\n\n const contents = React.useMemo(\n () => (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [props, context.size, className, itemContext.textId]\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected, contents])\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {/* this needs some extra stability between renders */}\n {/* {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null} */}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\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 const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\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={scopeKey}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\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: ControlledSheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_core", "value"]
|
|
7
7
|
}
|
package/dist/cjs/SelectImpl.js
CHANGED
|
@@ -68,19 +68,21 @@ const SelectInlineImpl = (props) => {
|
|
|
68
68
|
cancelAnimationFrame(frame);
|
|
69
69
|
};
|
|
70
70
|
}, [open, setActiveIndex]);
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
71
|
+
if (import_core.isWeb) {
|
|
72
|
+
React.useEffect(() => {
|
|
73
|
+
if (!open)
|
|
74
|
+
return;
|
|
75
|
+
const mouseUp = (e) => {
|
|
76
|
+
if (state.current.isMouseOutside) {
|
|
77
|
+
setOpen(false);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
document.addEventListener("mouseup", mouseUp);
|
|
81
|
+
return () => {
|
|
82
|
+
document.removeEventListener("mouseup", mouseUp);
|
|
83
|
+
};
|
|
84
|
+
}, [open]);
|
|
85
|
+
}
|
|
84
86
|
const updateFloatingSize = (0, import_react_dom_interactions.size)({
|
|
85
87
|
apply({
|
|
86
88
|
availableHeight,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { 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, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (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 state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !refs.floating.current?.contains(target) &&\n !upArrowRef.current?.contains(target) &&\n !downArrowRef.current?.contains(target)\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { 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 if (isWeb) {\n React.useEffect(() => {\n if (!open) return\n const mouseUp = (e: MouseEvent) => {\n if (state.current.isMouseOutside) {\n setOpen(false)\n }\n }\n document.addEventListener('mouseup', mouseUp)\n return () => {\n document.removeEventListener('mouseup', mouseUp)\n }\n }, [open])\n }\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n whileElementsMounted: autoUpdate,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (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 state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !refs.floating.current?.contains(target) &&\n !upArrowRef.current?.contains(target) &&\n !downArrowRef.current?.contains(target)\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/esm/Select.js
CHANGED
|
@@ -8,7 +8,7 @@ import { PortalHost } from "@tamagui/portal";
|
|
|
8
8
|
import { Separator } from "@tamagui/separator";
|
|
9
9
|
import { ControlledSheet, SheetController } from "@tamagui/sheet";
|
|
10
10
|
import { XStack, YStack } from "@tamagui/stacks";
|
|
11
|
-
import { Paragraph } from "@tamagui/text";
|
|
11
|
+
import { Paragraph, SizableText } from "@tamagui/text";
|
|
12
12
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
13
13
|
import * as React from "react";
|
|
14
14
|
import { SELECT_NAME } from "./constants";
|
|
@@ -197,7 +197,7 @@ const SelectItem = React.forwardRef(
|
|
|
197
197
|
);
|
|
198
198
|
SelectItem.displayName = ITEM_NAME;
|
|
199
199
|
const ITEM_TEXT_NAME = "SelectItemText";
|
|
200
|
-
const SelectItemTextFrame = styled(
|
|
200
|
+
const SelectItemTextFrame = styled(SizableText, {
|
|
201
201
|
name: ITEM_TEXT_NAME,
|
|
202
202
|
selectable: false
|
|
203
203
|
});
|
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, isClient, isWeb } 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 { ControlledSheet, 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, SelectProps } from './types'\nimport { useSelectBreakpointActive, useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(process.env.TAMAGUI_TARGET === 'web' && context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __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 composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n const children = childrenProp ?? context.selectedItem\n const hasChildren = !!children\n const selectValueChildren =\n context.value === undefined && placeholder !== undefined ? placeholder : children\n\n useIsomorphicLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {selectValueChildren}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (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 cursor=\"\"\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 = Boolean(itemContext.isSelected && context.valueNode)\n\n const contents = React.useMemo(\n () => (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [props, context.size, className, itemContext.textId]\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected, contents])\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {/* this needs some extra stability between renders */}\n {/* {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null} */}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\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 const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\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={scopeKey}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\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: ControlledSheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
-
"mappings": "AA+CM,SA2RA,UA3RA;AA/CN,SAAS,uBAAuB;AAChC,SAA6C,aAAa;AAC1D,SAAS,QAAQ,QAAQ,2BAA2B,4BAA4B;AAChF,SAAS,aAAa;AACtB,SAAS,gBAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,QAAQ,cAA2B;AAC5C,SAAS,
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isClient, isWeb } 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 { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph, SizableText } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\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, SelectProps } from './types'\nimport { useSelectBreakpointActive, useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(process.env.TAMAGUI_TARGET === 'web' && context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __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 composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n const children = childrenProp ?? context.selectedItem\n const hasChildren = !!children\n const selectValueChildren =\n context.value === undefined && placeholder !== undefined ? placeholder : children\n\n useIsomorphicLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {selectValueChildren}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (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 cursor=\"\"\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(SizableText, {\n name: ITEM_TEXT_NAME,\n selectable: false,\n})\n\ntype SelectItemTextProps = GetProps<typeof SelectItemTextFrame>\n\nconst SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(\n (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n const { __scopeSelect, className, ...itemTextProps } = props\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n const ref = React.useRef<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const isSelected = Boolean(itemContext.isSelected && context.valueNode)\n\n const contents = React.useMemo(\n () => (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [props, context.size, className, itemContext.textId]\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected, contents])\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {/* this needs some extra stability between renders */}\n {/* {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null} */}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\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 const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\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={scopeKey}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\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: ControlledSheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["value"]
|
|
7
7
|
}
|
package/dist/esm/SelectImpl.js
CHANGED
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
useRole,
|
|
16
16
|
useTypeahead
|
|
17
17
|
} from "@floating-ui/react-dom-interactions";
|
|
18
|
-
import { useIsTouchDevice, useIsomorphicLayoutEffect } from "@tamagui/core";
|
|
18
|
+
import { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from "@tamagui/core";
|
|
19
19
|
import * as React from "react";
|
|
20
20
|
import { flushSync } from "react-dom";
|
|
21
21
|
import { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from "./constants";
|
|
@@ -54,19 +54,21 @@ const SelectInlineImpl = (props) => {
|
|
|
54
54
|
cancelAnimationFrame(frame);
|
|
55
55
|
};
|
|
56
56
|
}, [open, setActiveIndex]);
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
57
|
+
if (isWeb) {
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (!open)
|
|
60
|
+
return;
|
|
61
|
+
const mouseUp = (e) => {
|
|
62
|
+
if (state.current.isMouseOutside) {
|
|
63
|
+
setOpen(false);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
document.addEventListener("mouseup", mouseUp);
|
|
67
|
+
return () => {
|
|
68
|
+
document.removeEventListener("mouseup", mouseUp);
|
|
69
|
+
};
|
|
70
|
+
}, [open]);
|
|
71
|
+
}
|
|
70
72
|
const updateFloatingSize = size({
|
|
71
73
|
apply({
|
|
72
74
|
availableHeight,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { 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, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (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 state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !refs.floating.current?.contains(target) &&\n !upArrowRef.current?.contains(target) &&\n !downArrowRef.current?.contains(target)\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { 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 if (isWeb) {\n React.useEffect(() => {\n if (!open) return\n const mouseUp = (e: MouseEvent) => {\n if (state.current.isMouseOutside) {\n setOpen(false)\n }\n }\n document.addEventListener('mouseup', mouseUp)\n return () => {\n document.removeEventListener('mouseup', mouseUp)\n }\n }, [open])\n }\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n whileElementsMounted: autoUpdate,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (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 state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !refs.floating.current?.contains(target) &&\n !upArrowRef.current?.contains(target) &&\n !downArrowRef.current?.contains(target)\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/jsx/Select.js
CHANGED
|
@@ -7,7 +7,7 @@ import { PortalHost } from "@tamagui/portal";
|
|
|
7
7
|
import { Separator } from "@tamagui/separator";
|
|
8
8
|
import { ControlledSheet, SheetController } from "@tamagui/sheet";
|
|
9
9
|
import { XStack, YStack } from "@tamagui/stacks";
|
|
10
|
-
import { Paragraph } from "@tamagui/text";
|
|
10
|
+
import { Paragraph, SizableText } from "@tamagui/text";
|
|
11
11
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
12
12
|
import * as React from "react";
|
|
13
13
|
import { SELECT_NAME } from "./constants";
|
|
@@ -148,7 +148,7 @@ const SelectItem = React.forwardRef(
|
|
|
148
148
|
);
|
|
149
149
|
SelectItem.displayName = ITEM_NAME;
|
|
150
150
|
const ITEM_TEXT_NAME = "SelectItemText";
|
|
151
|
-
const SelectItemTextFrame = styled(
|
|
151
|
+
const SelectItemTextFrame = styled(SizableText, {
|
|
152
152
|
name: ITEM_TEXT_NAME,
|
|
153
153
|
selectable: false
|
|
154
154
|
});
|
package/dist/jsx/Select.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Select.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isClient, isWeb } 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 { ControlledSheet, 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, SelectProps } from './types'\nimport { useSelectBreakpointActive, useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(process.env.TAMAGUI_TARGET === 'web' && context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __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 composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n const children = childrenProp ?? context.selectedItem\n const hasChildren = !!children\n const selectValueChildren =\n context.value === undefined && placeholder !== undefined ? placeholder : children\n\n useIsomorphicLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {selectValueChildren}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (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 cursor=\"\"\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 = Boolean(itemContext.isSelected && context.valueNode)\n\n const contents = React.useMemo(\n () => (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [props, context.size, className, itemContext.textId]\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected, contents])\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {/* this needs some extra stability between renders */}\n {/* {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null} */}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\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 const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\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={scopeKey}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\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: ControlledSheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,uBAAuB;AAChC,SAA6C,aAAa;AAC1D,SAAS,QAAQ,QAAQ,2BAA2B,4BAA4B;AAChF,SAAS,aAAa;AACtB,SAAS,gBAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,QAAQ,cAA2B;AAC5C,SAAS,
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isClient, isWeb } 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 { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { Paragraph, SizableText } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\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, SelectProps } from './types'\nimport { useSelectBreakpointActive, useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\nexport type SelectTriggerProps = ListItemProps\n\nexport const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(\n (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n const {\n __scopeSelect,\n disabled = false,\n // @ts-ignore\n 'aria-labelledby': ariaLabelledby,\n ...triggerProps\n } = props\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n // const getItems = useCollection(__scopeSelect)\n // const labelId = useLabelContext(context.trigger)\n const labelledBy = ariaLabelledby // || labelId\n\n return (\n <ListItem\n componentName={TRIGGER_NAME}\n backgrounded\n radiused\n hoverTheme\n pressTheme\n focusTheme\n focusable\n borderWidth={1}\n size={context.size}\n // aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-autocomplete=\"none\"\n aria-labelledby={labelledBy}\n dir={context.dir}\n disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...triggerProps}\n ref={forwardedRef}\n {...(process.env.TAMAGUI_TARGET === 'web' && context.interactions\n ? context.interactions.getReferenceProps()\n : {\n onPress() {\n context.setOpen(!context.open)\n },\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\nconst SelectValueFrame = styled(Paragraph, {\n name: VALUE_NAME,\n selectable: false,\n})\n\ntype SelectValueProps = GetProps<typeof SelectValueFrame> & {\n placeholder?: React.ReactNode\n}\n\nconst SelectValue = SelectValueFrame.extractable(\n React.forwardRef<TamaguiElement, SelectValueProps>(\n (\n { __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 composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n const children = childrenProp ?? context.selectedItem\n const hasChildren = !!children\n const selectValueChildren =\n context.value === undefined && placeholder !== undefined ? placeholder : children\n\n useIsomorphicLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren)\n }, [onValueNodeHasChildrenChange, hasChildren])\n\n return (\n <SelectValueFrame\n size={context.size}\n ref={composedRefs}\n // we don't want events from the portalled `SelectValue` children to bubble\n // through the item they came from\n pointerEvents=\"none\"\n >\n {selectValueChildren}\n </SelectValueFrame>\n )\n }\n )\n)\n\nSelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectIcon = styled(XStack, {\n name: 'SelectIcon',\n // @ts-ignore\n 'aria-hidden': true,\n children: <Paragraph>\u25BC</Paragraph>,\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\nexport interface SelectItemProps extends YStackProps {\n value: string\n index: number\n disabled?: boolean\n textValue?: string\n}\n\nexport const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n index,\n ...itemProps\n } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const textId = useId()\n\n const {\n selectedIndex,\n setSelectedIndex,\n listRef,\n open,\n setOpen,\n onChange,\n setActiveIndex,\n allowMouseUpRef,\n allowSelectRef,\n setValueAtIndex,\n selectTimeoutRef,\n dataRef,\n } = context\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => {\n if (!isWeb) return\n if (node instanceof HTMLElement) {\n if (listRef) {\n listRef.current[index] = node\n }\n }\n })\n\n React.useEffect(() => {\n setValueAtIndex(index, value)\n }, [index, setValueAtIndex, value])\n\n function handleSelect() {\n setSelectedIndex(index)\n onChange(value)\n setOpen(false)\n }\n\n const selectItemProps = context.interactions\n ? context.interactions.getItemProps({\n onTouchStart() {\n allowSelectRef!.current = true\n allowMouseUpRef!.current = false\n },\n onKeyDown(event) {\n if (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 cursor=\"\"\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(SizableText, {\n name: ITEM_TEXT_NAME,\n selectable: false,\n})\n\ntype SelectItemTextProps = GetProps<typeof SelectItemTextFrame>\n\nconst SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(\n (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n const { __scopeSelect, className, ...itemTextProps } = props\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n const ref = React.useRef<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const isSelected = Boolean(itemContext.isSelected && context.valueNode)\n\n const contents = React.useMemo(\n () => (\n <SelectItemTextFrame\n className={className}\n size={context.size}\n id={itemContext.textId}\n {...itemTextProps}\n ref={composedRefs}\n />\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [props, context.size, className, itemContext.textId]\n )\n\n // until portals work in sub-trees on RN, use this just for native:\n React.useEffect(() => {\n if (isSelected) {\n context.setSelectedItem(contents)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSelected, contents])\n\n return (\n <>\n {contents}\n\n {/* Portal the select item text into the trigger value node */}\n {/* this needs some extra stability between renders */}\n {/* {isWeb && isSelected\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)\n : null} */}\n\n {/* Portal an option in the bubble select */}\n {/* {context.bubbleSelect\n ? ReactDOM.createPortal(\n // we use `.textContent` because `option` only support `string` or `number`\n <option value={itemContext.value}>{ref.current?.textContent}</option>,\n context.bubbleSelect\n )\n : null} */}\n </>\n )\n }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\nconst SelectItemIndicatorFrame = styled(XStack, {\n name: ITEM_TEXT_NAME,\n})\n\ntype SelectItemIndicatorProps = GetProps<typeof SelectItemIndicatorFrame>\n\nconst SelectItemIndicator = React.forwardRef<TamaguiElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\nexport const SelectGroupFrame = styled(YStack, {\n name: GROUP_NAME,\n width: '100%',\n})\n\ntype SelectGroupProps = GetProps<typeof SelectGroupFrame>\n\nconst SelectGroup = React.forwardRef<TamaguiElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ''}>\n <SelectGroupFrame\n // @ts-ignore\n role=\"group\"\n aria-labelledby={groupId}\n {...groupProps}\n ref={forwardedRef}\n />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\nexport type SelectLabelProps = ListItemProps\n\nconst SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const context = useSelectContext(LABEL_NAME, __scopeSelect)\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return (\n <ListItem\n componentName={LABEL_NAME}\n fontWeight=\"800\"\n id={groupContext.id}\n size={context.size}\n {...labelProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectSeparator = styled(Separator, {\n name: 'SelectSeparator',\n})\n\nconst SelectSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useSelectContext('SelectSheetController', props.__scopeSelect)\n const showSheet = useShowSelectSheet(context)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\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 const id = useId()\n const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id\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={scopeKey}\n sheetBreakpoint={sheetBreakpoint}\n scope={__scopeSelect}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n activeIndex={activeIndex}\n onChange={setValue}\n selectedIndex={selectedIndex}\n setActiveIndex={setActiveIndex}\n setOpen={setOpen}\n setSelectedIndex={setSelectedIndex}\n value={value}\n open={open}\n >\n <SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}>\n <SelectImpl\n activeIndexRef={activeIndexRef}\n listContentRef={listContentRef}\n selectedIndexRef={selectedIndexRef}\n {...props}\n open={open}\n value={value}\n >\n {children}\n </SelectImpl>\n </SelectSheetController>\n </SelectProvider>\n )\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: ControlledSheet,\n }\n)\n\n// @ts-ignore\nSelect.displayName = SELECT_NAME\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["value"]
|
|
7
7
|
}
|
package/dist/jsx/SelectImpl.js
CHANGED
|
@@ -14,7 +14,7 @@ import {
|
|
|
14
14
|
useRole,
|
|
15
15
|
useTypeahead
|
|
16
16
|
} from "@floating-ui/react-dom-interactions";
|
|
17
|
-
import { useIsTouchDevice, useIsomorphicLayoutEffect } from "@tamagui/core";
|
|
17
|
+
import { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from "@tamagui/core";
|
|
18
18
|
import * as React from "react";
|
|
19
19
|
import { flushSync } from "react-dom";
|
|
20
20
|
import { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from "./constants";
|
|
@@ -53,19 +53,21 @@ const SelectInlineImpl = (props) => {
|
|
|
53
53
|
cancelAnimationFrame(frame);
|
|
54
54
|
};
|
|
55
55
|
}, [open, setActiveIndex]);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
56
|
+
if (isWeb) {
|
|
57
|
+
React.useEffect(() => {
|
|
58
|
+
if (!open)
|
|
59
|
+
return;
|
|
60
|
+
const mouseUp = (e) => {
|
|
61
|
+
if (state.current.isMouseOutside) {
|
|
62
|
+
setOpen(false);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
document.addEventListener("mouseup", mouseUp);
|
|
66
|
+
return () => {
|
|
67
|
+
document.removeEventListener("mouseup", mouseUp);
|
|
68
|
+
};
|
|
69
|
+
}, [open]);
|
|
70
|
+
}
|
|
69
71
|
const updateFloatingSize = size({
|
|
70
72
|
apply({
|
|
71
73
|
availableHeight,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { 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, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (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 state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !refs.floating.current?.contains(target) &&\n !upArrowRef.current?.contains(target) &&\n !downArrowRef.current?.contains(target)\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB,iCAAiC;
|
|
4
|
+
"sourcesContent": ["import {\n SideObject,\n autoUpdate,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { 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 if (isWeb) {\n React.useEffect(() => {\n if (!open) return\n const mouseUp = (e: MouseEvent) => {\n if (state.current.isMouseOutside) {\n setOpen(false)\n }\n }\n document.addEventListener('mouseup', mouseUp)\n return () => {\n document.removeEventListener('mouseup', mouseUp)\n }\n }, [open])\n }\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n whileElementsMounted: autoUpdate,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { event: 'mousedown' }),\n useDismiss(context, { outsidePress: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (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 state.current.isMouseOutside = false\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n useIsomorphicLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n useIsomorphicLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !refs.floating.current?.contains(target) &&\n !upArrowRef.current?.contains(target) &&\n !downArrowRef.current?.contains(target)\n ) {\n setOpen(false)\n setControlledScrolling(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n useIsomorphicLayoutEffect(() => {\n if (open && controlledScrolling) {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n useIsomorphicLayoutEffect(() => {\n if (open && fallback) {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n useIsomorphicLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/select",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.218",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -27,29 +27,29 @@
|
|
|
27
27
|
"@floating-ui/react-dom-interactions": "^0.10.3",
|
|
28
28
|
"@floating-ui/react-native": "^0.8.0",
|
|
29
29
|
"@radix-ui/react-use-previous": "^0.1.1",
|
|
30
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/dismissable": "^1.0.1-beta.
|
|
34
|
-
"@tamagui/focus-scope": "^1.0.1-beta.
|
|
35
|
-
"@tamagui/list-item": "^1.0.1-beta.
|
|
36
|
-
"@tamagui/portal": "^1.0.1-beta.
|
|
37
|
-
"@tamagui/separator": "^1.0.1-beta.
|
|
38
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
39
|
-
"@tamagui/text": "^1.0.1-beta.
|
|
40
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
41
|
-
"@tamagui/use-event": "^1.0.1-beta.
|
|
30
|
+
"@tamagui/compose-refs": "^1.0.1-beta.218",
|
|
31
|
+
"@tamagui/core": "^1.0.1-beta.218",
|
|
32
|
+
"@tamagui/create-context": "^1.0.1-beta.218",
|
|
33
|
+
"@tamagui/dismissable": "^1.0.1-beta.218",
|
|
34
|
+
"@tamagui/focus-scope": "^1.0.1-beta.218",
|
|
35
|
+
"@tamagui/list-item": "^1.0.1-beta.218",
|
|
36
|
+
"@tamagui/portal": "^1.0.1-beta.218",
|
|
37
|
+
"@tamagui/separator": "^1.0.1-beta.218",
|
|
38
|
+
"@tamagui/stacks": "^1.0.1-beta.218",
|
|
39
|
+
"@tamagui/text": "^1.0.1-beta.218",
|
|
40
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.218",
|
|
41
|
+
"@tamagui/use-event": "^1.0.1-beta.218"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"react": "
|
|
45
|
-
"react-dom": "
|
|
44
|
+
"react": ">=18",
|
|
45
|
+
"react-dom": ">=18",
|
|
46
46
|
"react-native": "*"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
49
|
+
"@tamagui/build": "^1.0.1-beta.218",
|
|
50
50
|
"@types/react-native": "^0.69.2",
|
|
51
|
-
"react": "
|
|
52
|
-
"react-dom": "
|
|
51
|
+
"react": ">=18",
|
|
52
|
+
"react-dom": ">=18",
|
|
53
53
|
"react-native": "*"
|
|
54
54
|
},
|
|
55
55
|
"publishConfig": {
|
package/src/Select.tsx
CHANGED
|
@@ -7,7 +7,7 @@ import { PortalHost } from '@tamagui/portal'
|
|
|
7
7
|
import { Separator } from '@tamagui/separator'
|
|
8
8
|
import { ControlledSheet, SheetController } from '@tamagui/sheet'
|
|
9
9
|
import { XStack, YStack, YStackProps } from '@tamagui/stacks'
|
|
10
|
-
import { Paragraph } from '@tamagui/text'
|
|
10
|
+
import { Paragraph, SizableText } from '@tamagui/text'
|
|
11
11
|
import { useControllableState } from '@tamagui/use-controllable-state'
|
|
12
12
|
import * as React from 'react'
|
|
13
13
|
import * as ReactDOM from 'react-dom'
|
|
@@ -289,7 +289,7 @@ SelectItem.displayName = ITEM_NAME
|
|
|
289
289
|
|
|
290
290
|
const ITEM_TEXT_NAME = 'SelectItemText'
|
|
291
291
|
|
|
292
|
-
export const SelectItemTextFrame = styled(
|
|
292
|
+
export const SelectItemTextFrame = styled(SizableText, {
|
|
293
293
|
name: ITEM_TEXT_NAME,
|
|
294
294
|
selectable: false,
|
|
295
295
|
})
|
package/src/SelectImpl.tsx
CHANGED
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
useRole,
|
|
16
16
|
useTypeahead,
|
|
17
17
|
} from '@floating-ui/react-dom-interactions'
|
|
18
|
-
import { useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'
|
|
18
|
+
import { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'
|
|
19
19
|
import * as React from 'react'
|
|
20
20
|
import { flushSync } from 'react-dom'
|
|
21
21
|
|
|
@@ -73,18 +73,20 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
|
|
|
73
73
|
}, [open, setActiveIndex])
|
|
74
74
|
|
|
75
75
|
// close when mouseup outside select
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
76
|
+
if (isWeb) {
|
|
77
|
+
React.useEffect(() => {
|
|
78
|
+
if (!open) return
|
|
79
|
+
const mouseUp = (e: MouseEvent) => {
|
|
80
|
+
if (state.current.isMouseOutside) {
|
|
81
|
+
setOpen(false)
|
|
82
|
+
}
|
|
81
83
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
}
|
|
84
|
+
document.addEventListener('mouseup', mouseUp)
|
|
85
|
+
return () => {
|
|
86
|
+
document.removeEventListener('mouseup', mouseUp)
|
|
87
|
+
}
|
|
88
|
+
}, [open])
|
|
89
|
+
}
|
|
88
90
|
|
|
89
91
|
const updateFloatingSize = size({
|
|
90
92
|
apply({
|
package/types/Select.d.ts
CHANGED
|
@@ -138,64 +138,12 @@ export declare const SelectItemTextFrame: import("@tamagui/core").TamaguiCompone
|
|
|
138
138
|
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
139
139
|
}, string | number> & {
|
|
140
140
|
[x: string]: undefined;
|
|
141
|
-
}>>)
|
|
142
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
143
|
-
} | ({
|
|
144
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
145
|
-
} & {
|
|
146
|
-
[x: string]: undefined;
|
|
147
|
-
}), string | number> & {
|
|
148
|
-
[x: string]: undefined;
|
|
149
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
141
|
+
}>>), TamaguiElement, import("@tamagui/core").TextPropsBase, {
|
|
150
142
|
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
151
143
|
} | ({
|
|
152
144
|
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
153
145
|
} & {
|
|
154
146
|
[x: string]: undefined;
|
|
155
|
-
}), string | number> & {
|
|
156
|
-
[x: string]: undefined;
|
|
157
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
158
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
159
|
-
} | ({
|
|
160
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
161
|
-
} & {
|
|
162
|
-
[x: string]: undefined;
|
|
163
|
-
}), string | number> & {
|
|
164
|
-
[x: string]: undefined;
|
|
165
|
-
}>>) | (Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
166
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
167
|
-
} | ({
|
|
168
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
169
|
-
} & {
|
|
170
|
-
[x: string]: undefined;
|
|
171
|
-
}), string | number> & {
|
|
172
|
-
[x: string]: undefined;
|
|
173
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
174
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
175
|
-
} | ({
|
|
176
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
177
|
-
} & {
|
|
178
|
-
[x: string]: undefined;
|
|
179
|
-
}), string | number> & {
|
|
180
|
-
[x: string]: undefined;
|
|
181
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
182
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
183
|
-
} | ({
|
|
184
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
185
|
-
} & {
|
|
186
|
-
[x: string]: undefined;
|
|
187
|
-
}), string | number> & {
|
|
188
|
-
[x: string]: undefined;
|
|
189
|
-
}>>), TamaguiElement, import("@tamagui/core").TextPropsBase, ({
|
|
190
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
191
|
-
} | ({
|
|
192
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
193
|
-
} & {
|
|
194
|
-
[x: string]: undefined;
|
|
195
|
-
})) & ({} | {
|
|
196
|
-
[x: string]: undefined;
|
|
197
|
-
} | {
|
|
198
|
-
[x: string]: undefined;
|
|
199
147
|
})>;
|
|
200
148
|
export declare const SelectGroupFrame: import("@tamagui/core").TamaguiComponent<(Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
201
149
|
readonly fullscreen?: boolean | undefined;
|
|
@@ -369,54 +317,6 @@ export declare const Select: ((props: ScopedProps<SelectProps>) => JSX.Element)
|
|
|
369
317
|
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
370
318
|
}, string | number> & {
|
|
371
319
|
[x: string]: undefined;
|
|
372
|
-
}>>, string | number> | Pick<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
373
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
374
|
-
} | ({
|
|
375
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
376
|
-
} & {
|
|
377
|
-
[x: string]: undefined;
|
|
378
|
-
}), string | number> & {
|
|
379
|
-
[x: string]: undefined;
|
|
380
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
381
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
382
|
-
} | ({
|
|
383
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
384
|
-
} & {
|
|
385
|
-
[x: string]: undefined;
|
|
386
|
-
}), string | number> & {
|
|
387
|
-
[x: string]: undefined;
|
|
388
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
389
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
390
|
-
} | ({
|
|
391
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
392
|
-
} & {
|
|
393
|
-
[x: string]: undefined;
|
|
394
|
-
}), string | number> & {
|
|
395
|
-
[x: string]: undefined;
|
|
396
|
-
}>>, string | number> | Pick<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
397
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
398
|
-
} | ({
|
|
399
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
400
|
-
} & {
|
|
401
|
-
[x: string]: undefined;
|
|
402
|
-
}), string | number> & {
|
|
403
|
-
[x: string]: undefined;
|
|
404
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
405
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
406
|
-
} | ({
|
|
407
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
408
|
-
} & {
|
|
409
|
-
[x: string]: undefined;
|
|
410
|
-
}), string | number> & {
|
|
411
|
-
[x: string]: undefined;
|
|
412
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
|
|
413
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
414
|
-
} | ({
|
|
415
|
-
readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
|
|
416
|
-
} & {
|
|
417
|
-
[x: string]: undefined;
|
|
418
|
-
}), string | number> & {
|
|
419
|
-
[x: string]: undefined;
|
|
420
320
|
}>>, string | number>) & React.RefAttributes<TamaguiElement>>;
|
|
421
321
|
Label: React.ForwardRefExoticComponent<Omit<import("@tamagui/text").TextParentStyles, "TextComponent" | "noTextWrap"> & Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
422
322
|
readonly fullscreen?: boolean | undefined;
|