@tamagui/select 1.0.1-beta.21 → 1.0.1-beta.210
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/BubbleSelect.js +43 -0
- package/dist/cjs/BubbleSelect.js.map +7 -0
- package/dist/cjs/Select.js +412 -390
- package/dist/cjs/Select.js.map +3 -3
- package/dist/cjs/SelectContent.js +72 -0
- package/dist/cjs/SelectContent.js.map +7 -0
- package/dist/cjs/SelectContent.native.js +31 -0
- package/dist/cjs/SelectContent.native.js.map +7 -0
- package/dist/cjs/SelectImpl.js +286 -0
- package/dist/cjs/SelectImpl.js.map +7 -0
- package/dist/cjs/SelectScrollButton.js +157 -0
- package/dist/cjs/SelectScrollButton.js.map +7 -0
- package/dist/cjs/SelectScrollButton.native.js +32 -0
- package/dist/cjs/SelectScrollButton.native.js.map +7 -0
- package/dist/cjs/SelectViewport.js +126 -0
- package/dist/cjs/SelectViewport.js.map +7 -0
- package/dist/cjs/SelectViewport.native.js +41 -0
- package/dist/cjs/SelectViewport.native.js.map +7 -0
- package/dist/cjs/constants.js +47 -0
- package/dist/cjs/constants.js.map +7 -0
- package/dist/cjs/context.js +49 -0
- package/dist/cjs/context.js.map +7 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/types.js +17 -0
- package/dist/cjs/types.js.map +7 -0
- package/dist/cjs/useSelectBreakpointActive.js +39 -0
- package/dist/cjs/useSelectBreakpointActive.js.map +7 -0
- package/dist/esm/BubbleSelect.js +24 -0
- package/dist/esm/BubbleSelect.js.map +7 -0
- package/dist/esm/Select.js +403 -358
- package/dist/esm/Select.js.map +3 -3
- package/dist/esm/SelectContent.js +48 -0
- package/dist/esm/SelectContent.js.map +7 -0
- package/dist/esm/SelectContent.native.js +7 -0
- package/dist/esm/SelectContent.native.js.map +7 -0
- package/dist/esm/SelectImpl.js +271 -0
- package/dist/esm/SelectImpl.js.map +7 -0
- package/dist/esm/SelectScrollButton.js +126 -0
- package/dist/esm/SelectScrollButton.js.map +7 -0
- package/dist/esm/SelectScrollButton.native.js +7 -0
- package/dist/esm/SelectScrollButton.native.js.map +7 -0
- package/dist/esm/SelectViewport.js +95 -0
- package/dist/esm/SelectViewport.js.map +7 -0
- package/dist/esm/SelectViewport.native.js +17 -0
- package/dist/esm/SelectViewport.native.js.map +7 -0
- package/dist/esm/constants.js +17 -0
- package/dist/esm/constants.js.map +7 -0
- package/dist/esm/context.js +21 -0
- package/dist/esm/context.js.map +7 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/types.js +1 -0
- package/dist/esm/types.js.map +7 -0
- package/dist/esm/useSelectBreakpointActive.js +14 -0
- package/dist/esm/useSelectBreakpointActive.js.map +7 -0
- package/dist/jsx/BubbleSelect.js +24 -0
- package/dist/jsx/BubbleSelect.js.map +7 -0
- package/dist/jsx/Select.js +283 -271
- package/dist/jsx/Select.js.map +7 -0
- package/dist/jsx/SelectContent.js +27 -0
- package/dist/jsx/SelectContent.js.map +7 -0
- package/dist/jsx/SelectContent.native.js +7 -0
- package/dist/jsx/SelectContent.native.js.map +7 -0
- package/dist/jsx/SelectImpl.js +244 -0
- package/dist/jsx/SelectImpl.js.map +7 -0
- package/dist/jsx/SelectScrollButton.js +99 -0
- package/dist/jsx/SelectScrollButton.js.map +7 -0
- package/dist/jsx/SelectScrollButton.native.js +7 -0
- package/dist/jsx/SelectScrollButton.native.js.map +7 -0
- package/dist/jsx/SelectViewport.js +72 -0
- package/dist/jsx/SelectViewport.js.map +7 -0
- package/dist/jsx/SelectViewport.native.js +13 -0
- package/dist/jsx/SelectViewport.native.js.map +7 -0
- package/dist/jsx/constants.js +17 -0
- package/dist/jsx/constants.js.map +7 -0
- package/dist/jsx/context.js +15 -0
- package/dist/jsx/context.js.map +7 -0
- package/dist/jsx/index.js +2 -0
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/types.js +1 -0
- package/dist/jsx/types.js.map +7 -0
- package/dist/jsx/useSelectBreakpointActive.js +14 -0
- package/dist/jsx/useSelectBreakpointActive.js.map +7 -0
- package/package.json +26 -16
- package/src/BubbleSelect.tsx +46 -0
- package/src/Select.tsx +618 -0
- package/src/SelectContent.native.tsx +5 -0
- package/src/SelectContent.tsx +45 -0
- package/src/SelectImpl.tsx +342 -0
- package/src/SelectScrollButton.native.tsx +7 -0
- package/src/SelectScrollButton.tsx +168 -0
- package/src/SelectViewport.native.tsx +14 -0
- package/src/SelectViewport.tsx +104 -0
- package/src/constants.tsx +7 -0
- package/src/context.tsx +19 -0
- package/src/index.tsx +8 -0
- package/src/types.tsx +94 -0
- package/src/useSelectBreakpointActive.tsx +15 -0
- package/types/BubbleSelect.d.ts +2 -0
- package/types/Select.d.ts +753 -0
- package/types/SelectContent.d.ts +5 -0
- package/types/SelectContent.native.d.ts +4 -0
- package/types/SelectImpl.d.ts +9 -0
- package/types/SelectScrollButton.d.ts +6 -0
- package/types/SelectScrollButton.native.d.ts +4 -0
- package/types/SelectViewport.d.ts +127 -0
- package/types/SelectViewport.native.d.ts +7 -0
- package/types/constants.d.ts +8 -0
- package/types/context.d.ts +21 -0
- package/types/index.d.ts +2 -0
- package/types/types.d.ts +84 -0
- package/types/useSelectBreakpointActive.d.ts +4 -0
- package/types/index.d.ts.map +0 -1
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 {\n ContextData,\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n autoUpdate,\n detectOverflow,\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers, useIsomorphicLayoutEffect } from '@tamagui/core'\n// import { useDirection } from '@tamagui/react-direction'\n// import { DismissableLayer } from '@tamagui/react-dismissable-layer'\n// import { FocusScope } from '@tamagui/react-focus-scope'\nimport { useId } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport type { Scope } from '@tamagui/create-context'\nimport { clamp } from '@tamagui/helpers'\n// import { useLabelContext } from '@tamagui/react-label'\nimport { Portal } from '@tamagui/portal'\nimport { Separator } from '@tamagui/separator'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\n// import { Primitive } from '@tamagui/react-primitive'\n// import type * as Radix from '@tamagui/react-primitive'\nimport { useControllableState } from '@tamagui/use-controllable-state'\n// import { useLayoutEffect } from '@tamagui/react-use-layout-effect'\n// import { usePrevious } from '@tamagui/react-use-previous'\n// import { VisuallyHidden } from '@tamagui/core'\n// import { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport { View } from 'react-native'\n\n// import { RemoveScroll } from 'react-remove-scroll'\n\n// upsides:\n// could virtualize in the future\n// should be a decent amount faster\n// no having to set keys\n// no internal awkward traversal of children, impossible on native\n\n// downsides:\n// have to have a hook with a new type of pattern\n\n// alternate is just to require passing index={}\n\n// const select = useSelect()\n//\n// <Select items={[]}>\n// <SelectTrigger>\n// <SelectIcon />\n// <SelectValue />\n// </SelectTrigger>\n//\n// <SelectContent>\n// <SelectScrollUpButton />\n// <SelectScrollDownButton />\n//\n// can optionally include group\n// <SelectItemGroup>\n// <SelectItemGroupLabel />\n// </SelectItemGroup>\n//\n// <SelectItem>\n// <SelectItemText>\n// {select.text}\n// </SelectItemText>\n// <SelectItemIndicator />\n// </SelectItem>\n// </SelectItemGroup>\n//\n// </SelectContent>\n// </Select>\n\ntype GenericElement = HTMLElement | View\n\ntype Direction = 'ltr' | 'rtl'\n\nconst OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown']\nconst SELECTION_KEYS = [' ', 'Enter']\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nconst SELECT_NAME = 'Select'\n\nconst WINDOW_PADDING = 8\nconst SCROLL_ARROW_VELOCITY = 8\nconst SCROLL_ARROW_THRESHOLD = 8\nconst MIN_HEIGHT = 80\nconst FALLBACK_THRESHOLD = 16\n\ninterface SelectContextValue {\n selectedIndex: number\n setSelectedIndex: (index: number) => void\n activeIndex: number | null\n setActiveIndex: (index: number | null) => void\n listRef: React.MutableRefObject<Array<HTMLLIElement | null>>\n open: boolean\n setOpen: (open: boolean) => void\n onChange: (value: string) => void\n dataRef: React.MutableRefObject<ContextData>\n getItemProps: (userProps?: React.HTMLProps<HTMLElement>) => any\n controlledScrolling: boolean\n canScrollUp: boolean\n canScrollDown: boolean\n}\n\n// type SelectContentContextValue = {\n// contentWrapper: HTMLDivElement | null\n// content: SelectContentElement | null\n// viewport: SelectViewportElement | null\n// onViewportChange(node: SelectViewportElement | null): void\n// selectedItem: SelectItemElement | null\n// onSelectedItemChange(node: SelectItemElement | null): void\n// selectedItemText: SelectItemTextElement | null\n// onSelectedItemTextChange(node: SelectItemTextElement | null): void\n// onScrollButtonChange(node: SelectScrollButtonImplElement | null): void\n// onItemLeave(): void\n// isPositioned: boolean\n// shouldExpandOnScrollRef: React.RefObject<boolean>\n// searchRef: React.RefObject<string>\n// }\n\n// const [SelectContentContextProvider, useSelectContentContext] =\n// createSelectContext<SelectContentContextValue>(CONTENT_NAME)\n\n// const SelectContext = React.createContext({} as SelectContextValue)\n\ntype ScopedProps<P> = P & { __scopeSelect?: Scope }\n\nconst [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME)\nconst [SelectProvider, useSelectContext] = createSelectContext<SelectContextValue>(SELECT_NAME)\n\ninterface SelectProps {\n children?: React.ReactNode\n value?: string\n defaultValue?: string\n onValueChange?(value: string): void\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n dir?: Direction\n name?: string\n autoComplete?: string\n}\n\nconst Select: React.FC<SelectProps> = (props: ScopedProps<SelectProps>) => {\n const {\n __scopeSelect,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n value: valueProp,\n defaultValue,\n onValueChange,\n dir,\n name,\n autoComplete,\n } = props\n // const [trigger, setTrigger] = React.useState<SelectTriggerElement | null>(null)\n // const [valueNode, setValueNode] = React.useState<SelectValueElement | null>(null)\n // const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false)\n // const direction = useDirection(dir)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n })\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue || '',\n onChange: onValueChange,\n })\n\n // const listContentRef = useRef([\n // \"Select...\",\n // ...(Children.map(children, (child) =>\n // Children.map(\n // isValidElement(child) && child.props.children,\n // (child) => child.props.value\n // )\n // ) ?? [])\n // ]);\n\n const selectedIndexRef = React.useRef<number | null>(null)\n const activeIndexRef = React.useRef<number | null>(null)\n const prevActiveIndex = usePrevious<number | null>(activeIndex)\n\n const [showArrows, setShowArrows] = React.useState(false)\n const [scrollTop, setScrollTop] = React.useState(0)\n const [activeIndex, setActiveIndex] = React.useState<number | null>(null)\n const [selectedIndex, setSelectedIndex] = React.useState(\n Math.max(0, listContentRef.current.indexOf(value))\n )\n\n useIsomorphicLayoutEffect(() => {\n selectedIndexRef.current = selectedIndex\n activeIndexRef.current = activeIndex\n })\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n useEffect(() => {\n const frame = requestAnimationFrame(() => {\n setShowArrows(open)\n\n if (!open) {\n setScrollTop(0)\n setMiddlewareType('align')\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => cancelAnimationFrame(frame)\n }, [open])\n\n const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n showArrows &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\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 // trigger={trigger}\n // onTriggerChange={setTrigger}\n // valueNode={valueNode}\n // onValueNodeChange={setValueNode}\n // valueNodeHasChildren={valueNodeHasChildren}\n // onValueNodeHasChildrenChange={setValueNodeHasChildren}\n // contentId={useId() || ''}\n // value={value}\n // onValueChange={setValue}\n open={open}\n // onOpenChange={setOpen}\n // TODO\n // dir={'rtl'} //direction}\n // bubbleSelect={bubbleSelect}\n // triggerPointerDownPosRef={triggerPointerDownPosRef}\n >\n {/* <Collection.Provider scope={__scopeSelect}>{children}</Collection.Provider> */}\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\nSelect.displayName = SELECT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\ntype SelectTriggerElement = GenericElement\ntype SelectTriggerProps = YStackProps\n\nconst SelectTrigger = React.forwardRef<SelectTriggerElement, 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 // const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {\n // const enabledItems = getItems().filter((item) => !item.disabled)\n // const currentItem = enabledItems.find((item) => item.value === context.value)\n // const nextItem = findNextItem(enabledItems, search, currentItem)\n // if (nextItem !== undefined) {\n // context.onValueChange(nextItem.value)\n // }\n // })\n\n const handleOpen = () => {\n if (!disabled) {\n context.onOpenChange(true)\n // reset typeahead when we open\n resetTypeahead()\n }\n }\n\n return (\n <Primitive.button\n type=\"button\"\n role=\"combobox\"\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={composedRefs}\n onPointerDown={composeEventHandlers(triggerProps.onPointerDown, (event) => {\n // prevent implicit pointer capture\n // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n ;(event.target as HTMLElement).releasePointerCapture(event.pointerId)\n\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (event.button === 0 && event.ctrlKey === false) {\n handleOpen()\n context.triggerPointerDownPosRef.current = {\n x: Math.round(event.pageX),\n y: Math.round(event.pageY),\n }\n // prevent trigger from stealing focus from the active item after opening.\n event.preventDefault()\n }\n })}\n onKeyDown={composeEventHandlers(triggerProps.onKeyDown, (event) => {\n const isTypingAhead = searchRef.current !== ''\n const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key)\n if (isTypingAhead && event.key === ' ') return\n if (OPEN_KEYS.includes(event.key)) {\n handleOpen()\n event.preventDefault()\n }\n })}\n />\n )\n }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\ntype SelectValueElement = GenericElement\ntype SelectValueProps = YStackProps\n\nconst SelectValue = React.forwardRef<SelectValueElement, SelectValueProps>(\n (props: ScopedProps<SelectValueProps>, forwardedRef) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const { __scopeSelect, className, style, ...valueProps } = props\n // const context = useSelectContext(VALUE_NAME, __scopeSelect)\n // const { onValueNodeHasChildrenChange } = context\n // const hasChildren = props.children !== undefined\n // const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n // React.useEffect(() => {\n // onValueNodeHasChildrenChange(hasChildren)\n // }, [onValueNodeHasChildrenChange, hasChildren])\n\n return (\n <XStack\n {...valueProps}\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 )\n }\n)\n\n// SelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst ICON_NAME = 'SelectIcon'\n\ntype SelectIconProps = YStackProps\ntype SelectIconElement = GenericElement\n\nconst SelectIcon = React.forwardRef<SelectIconElement, SelectIconProps>(\n (props: ScopedProps<SelectIconProps>, forwardedRef) => {\n const { __scopeSelect, children, ...iconProps } = props\n return (\n <XStack aria-hidden {...iconProps} ref={forwardedRef}>\n {children || '\u25BC'}\n </XStack>\n )\n }\n)\n\nSelectIcon.displayName = ICON_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\ntype SelectContentElement = any\ntype SelectContentProps = any\n\nconst SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(\n (props: ScopedProps<SelectContentProps>, forwardedRef) => {\n const context = useSelectContext(CONTENT_NAME, props.__scopeSelect)\n return props.children\n }\n)\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\ntype SelectGroupElement = React.ElementRef<typeof Primitive.div>\ninterface SelectGroupProps extends PrimitiveDivProps {}\n\nconst SelectGroup = React.forwardRef<SelectGroupElement, SelectGroupProps>(\n (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props\n const groupId = useId()\n return (\n <SelectGroupContextProvider scope={__scopeSelect} id={groupId}>\n <Primitive.div role=\"group\" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} />\n </SelectGroupContextProvider>\n )\n }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\ntype SelectLabelElement = React.ElementRef<typeof Primitive.div>\ninterface SelectLabelProps extends PrimitiveDivProps {}\n\nconst SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(\n (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n return <Primitive.div id={groupContext.id} {...labelProps} ref={forwardedRef} />\n }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n value: string\n textId: string\n isSelected: boolean\n onItemTextChange(node: SelectItemTextElement | null): void\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\ntype SelectItemElement = React.ElementRef<typeof Primitive.div>\ninterface SelectItemProps extends PrimitiveDivProps {\n value: string\n disabled?: boolean\n textValue?: string\n}\n\nconst SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>(\n (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n const { __scopeSelect, value, disabled = false, textValue: textValueProp, ...itemProps } = props\n const context = useSelectContext(ITEM_NAME, __scopeSelect)\n const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect)\n const isSelected = context.value === value\n const [textValue, setTextValue] = React.useState(textValueProp ?? '')\n const [isFocused, setIsFocused] = React.useState(false)\n const composedRefs = useComposedRefs(\n forwardedRef,\n isSelected ? contentContext.onSelectedItemChange : undefined\n )\n const textId = useId()\n\n const handleSelect = () => {\n if (!disabled) {\n context.onValueChange(value)\n context.onOpenChange(false)\n }\n }\n\n return (\n <SelectItemContextProvider\n scope={__scopeSelect}\n value={value}\n textId={textId}\n isSelected={isSelected}\n onItemTextChange={React.useCallback((node) => {\n setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? '').trim())\n }, [])}\n >\n <Collection.ItemSlot\n scope={__scopeSelect}\n value={value}\n disabled={disabled}\n textValue={textValue}\n >\n <Primitive.div\n role=\"option\"\n aria-labelledby={textId}\n // `isFocused` caveat fixes stuttering in VoiceOver\n aria-selected={isSelected && isFocused}\n data-state={isSelected ? 'active' : 'inactive'}\n aria-disabled={disabled || undefined}\n data-disabled={disabled ? '' : undefined}\n tabIndex={disabled ? undefined : -1}\n {...itemProps}\n ref={composedRefs}\n onFocus={composeEventHandlers(itemProps.onFocus, () => setIsFocused(true))}\n onBlur={composeEventHandlers(itemProps.onBlur, () => setIsFocused(false))}\n onPointerUp={composeEventHandlers(itemProps.onPointerUp, handleSelect)}\n onPointerMove={composeEventHandlers(itemProps.onPointerMove, (event) => {\n if (disabled) {\n contentContext.onItemLeave()\n } else {\n // even though safari doesn't support this option, it's acceptable\n // as it only means it might scroll a few pixels when using the pointer.\n event.currentTarget.focus({ preventScroll: true })\n }\n })}\n onPointerLeave={composeEventHandlers(itemProps.onPointerLeave, (event) => {\n if (event.currentTarget === document.activeElement) {\n contentContext.onItemLeave()\n }\n })}\n onKeyDown={composeEventHandlers(itemProps.onKeyDown, (event) => {\n const isTypingAhead = contentContext.searchRef.current !== ''\n if (isTypingAhead && event.key === ' ') return\n if (SELECTION_KEYS.includes(event.key)) handleSelect()\n // prevent page scroll if using the space key to select an item\n if (event.key === ' ') event.preventDefault()\n })}\n />\n </Collection.ItemSlot>\n </SelectItemContextProvider>\n )\n }\n)\n\nSelectItem.displayName = ITEM_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText'\n\ntype SelectItemTextElement = React.ElementRef<typeof Primitive.span>\ninterface SelectItemTextProps extends PrimitiveSpanProps {}\n\nconst SelectItemText = React.forwardRef<SelectItemTextElement, SelectItemTextProps>(\n (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const { __scopeSelect, className, style, ...itemTextProps } = props\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect)\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n const ref = React.useRef<SelectItemTextElement | null>(null)\n const composedRefs = useComposedRefs(\n forwardedRef,\n ref,\n itemContext.onItemTextChange,\n itemContext.isSelected ? contentContext.onSelectedItemTextChange : undefined\n )\n\n return (\n <>\n <Primitive.span id={itemContext.textId} {...itemTextProps} ref={composedRefs} />\n\n {/* Portal the select item text into the trigger value node */}\n {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\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\ntype SelectItemIndicatorElement = React.ElementRef<typeof Primitive.span>\ninterface SelectItemIndicatorProps extends PrimitiveSpanProps {}\n\nconst SelectItemIndicator = React.forwardRef<SelectItemIndicatorElement, SelectItemIndicatorProps>(\n (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n return itemContext.isSelected ? (\n <Primitive.span aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n ) : null\n }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollUpButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'\n\ntype SelectScrollUpButtonElement = SelectScrollButtonImplElement\ninterface SelectScrollUpButtonProps extends Omit<SelectScrollButtonImplProps, 'onAutoScroll'> {}\n\nconst SelectScrollUpButton = React.forwardRef<\n SelectScrollUpButtonElement,\n SelectScrollUpButtonProps\n>((props: ScopedProps<SelectScrollUpButtonProps>, forwardedRef) => {\n const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect)\n const [canScrollUp, setCanScrollUp] = React.useState(false)\n const composedRefs = useComposedRefs(forwardedRef, contentContext.onScrollButtonChange)\n\n // useLayoutEffect(() => {\n // if (contentContext.viewport && contentContext.isPositioned) {\n // const viewport = contentContext.viewport\n // function handleScroll() {\n // const canScrollUp = viewport.scrollTop > 0\n // setCanScrollUp(canScrollUp)\n // }\n // handleScroll()\n // viewport.addEventListener('scroll', handleScroll)\n // return () => viewport.removeEventListener('scroll', handleScroll)\n // }\n // }, [contentContext.viewport, contentContext.isPositioned])\n\n return canScrollUp ? (\n <SelectScrollButtonImpl\n {...props}\n ref={composedRefs}\n onAutoScroll={() => {\n const { viewport, selectedItem } = contentContext\n if (viewport && selectedItem) {\n viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight\n }\n }}\n />\n ) : null\n})\n\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollDownButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'\n\ntype SelectScrollDownButtonElement = SelectScrollButtonImplElement\ninterface SelectScrollDownButtonProps extends Omit<SelectScrollButtonImplProps, 'onAutoScroll'> {}\n\nconst SelectScrollDownButton = React.forwardRef<\n SelectScrollDownButtonElement,\n SelectScrollDownButtonProps\n>((props: ScopedProps<SelectScrollDownButtonProps>, forwardedRef) => {\n const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect)\n const [canScrollDown, setCanScrollDown] = React.useState(false)\n const composedRefs = useComposedRefs(forwardedRef, contentContext.onScrollButtonChange)\n\n // useLayoutEffect(() => {\n // if (contentContext.viewport && contentContext.isPositioned) {\n // const viewport = contentContext.viewport\n // function handleScroll() {\n // const maxScroll = viewport.scrollHeight - viewport.clientHeight\n // // we use Math.ceil here because if the UI is zoomed-in\n // // `scrollTop` is not always reported as an integer\n // const canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll\n // setCanScrollDown(canScrollDown)\n // }\n // handleScroll()\n // viewport.addEventListener('scroll', handleScroll)\n // return () => viewport.removeEventListener('scroll', handleScroll)\n // }\n // }, [contentContext.viewport, contentContext.isPositioned])\n\n return canScrollDown ? (\n <SelectScrollButtonImpl\n {...props}\n ref={composedRefs}\n onAutoScroll={() => {\n const { viewport, selectedItem } = contentContext\n if (viewport && selectedItem) {\n viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight\n }\n }}\n />\n ) : null\n})\n\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME\n\ntype SelectScrollButtonImplElement = React.ElementRef<typeof Primitive.div>\ninterface SelectScrollButtonImplProps extends PrimitiveDivProps {\n onAutoScroll(): void\n}\n\nconst SelectScrollButtonImpl = React.forwardRef<\n SelectScrollButtonImplElement,\n SelectScrollButtonImplProps\n>((props: ScopedProps<SelectScrollButtonImplProps>, forwardedRef) => {\n const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props\n const contentContext = useSelectContentContext('SelectScrollButton', __scopeSelect)\n const autoScrollTimerRef = React.useRef<number | null>(null)\n\n const intervalRef = React.useRef<any>()\n const loopingRef = React.useRef(false)\n\n const { x, y, reference, floating, strategy, update, refs } = useFloating({\n strategy: 'fixed',\n placement: dir === 'up' ? 'top' : 'bottom',\n middleware: [offset(({ floating }) => -floating.height)],\n })\n\n return (\n <Primitive.div\n aria-hidden\n {...scrollIndicatorProps}\n ref={forwardedRef}\n style={{ flexShrink: 0, ...scrollIndicatorProps.style }}\n onPointerMove={composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {\n contentContext.onItemLeave()\n if (autoScrollTimerRef.current === null) {\n autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50)\n }\n })}\n onPointerLeave={composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {\n clearAutoScrollTimer()\n })}\n />\n )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'SelectSeparator'\n\ntype SelectSeparatorElement = React.ElementRef<typeof Primitive.div>\ninterface SelectSeparatorProps extends PrimitiveDivProps {}\n\nconst SelectSeparator = Separator\n// React.forwardRef<SelectSeparatorElement, SelectSeparatorProps>(\n// (props: ScopedProps<SelectSeparatorProps>, forwardedRef) => {\n// const { __scopeSelect, ...separatorProps } = props\n// return <Primitive.div aria-hidden {...separatorProps} ref={forwardedRef} />\n// }\n// )\n\nSelectSeparator.displayName = SEPARATOR_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst BubbleSelect = React.forwardRef<HTMLSelectElement, React.ComponentPropsWithoutRef<'select'>>(\n (props, forwardedRef) => {\n const { value, ...selectProps } = props\n const ref = React.useRef<HTMLSelectElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const prevValue = usePrevious(value)\n\n // Bubble value change to parents (e.g form change event)\n React.useEffect(() => {\n const select = ref.current!\n const selectProto = window.HTMLSelectElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value') as PropertyDescriptor\n const setValue = descriptor.set\n if (prevValue !== value && setValue) {\n const event = new Event('change', { bubbles: true })\n setValue.call(select, value)\n select.dispatchEvent(event)\n }\n }, [prevValue, value])\n\n /**\n * We purposefully use a `select` here to support form autofill as much\n * as possible.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programatically and bubble to any parent form `onChange` event.\n * Adding the `value` will cause React to consider the programatic\n * dispatch a duplicate and it will get swallowed.\n *\n * We use `VisuallyHidden` rather than `display: \"none\"` because Safari autofill\n * won't work otherwise.\n */\n // TODO\n return null\n return (\n <VisuallyHidden asChild>\n <select {...selectProps} ref={composedRefs} defaultValue={value} />\n </VisuallyHidden>\n )\n }\n)\n\n// const Root = Select\n// const Trigger = SelectTrigger\n// const Value = SelectValue\n// const Icon = SelectIcon\n// const Content = SelectContent\n// const Viewport = SelectViewport\n// const Group = SelectGroup\n// const Label = SelectLabel\n// const Item = SelectItem\n// const ItemText = SelectItemText\n// const ItemIndicator = SelectItemIndicator\n// const ScrollUpButton = SelectScrollUpButton\n// const ScrollDownButton = SelectScrollDownButton\n// const Separator = SelectSeparator\n\nexport {\n createSelectScope,\n //\n Select,\n SelectTrigger,\n SelectValue,\n SelectIcon,\n SelectContent,\n // SelectViewport,\n SelectGroup,\n SelectLabel,\n SelectItem,\n SelectItemText,\n SelectItemIndicator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n SelectSeparator,\n //\n // Root,\n // Trigger,\n // Value,\n // Icon,\n // Content,\n // Viewport,\n // Group,\n // Label,\n // Item,\n // ItemText,\n // ItemIndicator,\n // ScrollUpButton,\n // ScrollDownButton,\n // Separator,\n}\nexport type {\n SelectProps,\n SelectTriggerProps,\n SelectValueProps,\n SelectIconProps,\n SelectContentProps,\n SelectViewportProps,\n SelectGroupProps,\n SelectLabelProps,\n SelectItemProps,\n SelectItemTextProps,\n SelectItemIndicatorProps,\n SelectScrollUpButtonProps,\n SelectScrollDownButtonProps,\n SelectSeparatorProps,\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
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": "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",
|
|
6
|
+
"names": ["value"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FloatingOverlay, FloatingPortal } from "@floating-ui/react-dom-interactions";
|
|
3
|
+
import { Theme, useIsTouchDevice, useThemeName } from "@tamagui/core";
|
|
4
|
+
import { Dismissable } from "@tamagui/dismissable";
|
|
5
|
+
import { FocusScope } from "@tamagui/focus-scope";
|
|
6
|
+
import { useSelectContext } from "./context";
|
|
7
|
+
import { useShowSelectSheet } from "./useSelectBreakpointActive";
|
|
8
|
+
const CONTENT_NAME = "SelectContent";
|
|
9
|
+
const SelectContent = ({
|
|
10
|
+
children,
|
|
11
|
+
__scopeSelect,
|
|
12
|
+
zIndex = 1e3,
|
|
13
|
+
...focusScopeProps
|
|
14
|
+
}) => {
|
|
15
|
+
const context = useSelectContext(CONTENT_NAME, __scopeSelect);
|
|
16
|
+
const themeName = useThemeName();
|
|
17
|
+
const showSheet = useShowSelectSheet(context);
|
|
18
|
+
const contents = /* @__PURE__ */ jsx(Theme, {
|
|
19
|
+
name: themeName,
|
|
20
|
+
children
|
|
21
|
+
});
|
|
22
|
+
const touch = useIsTouchDevice();
|
|
23
|
+
if (showSheet && context.open) {
|
|
24
|
+
return contents;
|
|
25
|
+
}
|
|
26
|
+
return /* @__PURE__ */ jsx(FloatingPortal, {
|
|
27
|
+
children: context.open ? /* @__PURE__ */ jsx(FloatingOverlay, {
|
|
28
|
+
style: { zIndex },
|
|
29
|
+
lockScroll: !touch,
|
|
30
|
+
children: /* @__PURE__ */ jsx(FocusScope, {
|
|
31
|
+
loop: true,
|
|
32
|
+
trapped: true,
|
|
33
|
+
...focusScopeProps,
|
|
34
|
+
children: /* @__PURE__ */ jsx(Dismissable, {
|
|
35
|
+
disableOutsidePointerEvents: true,
|
|
36
|
+
children: contents
|
|
37
|
+
})
|
|
38
|
+
})
|
|
39
|
+
}) : /* @__PURE__ */ jsx("div", {
|
|
40
|
+
style: { display: "none" },
|
|
41
|
+
children: contents
|
|
42
|
+
})
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
export {
|
|
46
|
+
SelectContent
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=SelectContent.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/SelectContent.tsx"],
|
|
4
|
+
"sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport { Dismissable } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\n\nimport { useSelectContext } from './context'\nimport { SelectContentProps } from './types'\nimport { useShowSelectSheet } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({\n children,\n __scopeSelect,\n zIndex = 1000,\n ...focusScopeProps\n}: SelectContentProps & FocusScopeProps) => {\n const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n const themeName = useThemeName()\n const showSheet = useShowSelectSheet(context)\n const contents = <Theme name={themeName}>{children}</Theme>\n const touch = useIsTouchDevice()\n\n if (showSheet && context.open) {\n return contents\n }\n\n return (\n <FloatingPortal>\n {context.open ? (\n <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>\n <FocusScope loop trapped {...focusScopeProps}>\n <Dismissable disableOutsidePointerEvents>{contents}</Dismissable>\n </FocusScope>\n </FloatingOverlay>\n ) : (\n <div style={{ display: 'none' }}>{contents}</div>\n )}\n </FloatingPortal>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAwBmB;AAxBnB,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,OAAO,kBAAkB,oBAAoB;AACtD,SAAS,mBAAmB;AAC5B,SAAS,kBAAmC;AAE5C,SAAS,wBAAwB;AAEjC,SAAS,0BAA0B;AAMnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,KACN;AACL,MAA4C;AAC1C,QAAM,UAAU,iBAAiB,cAAc,aAAa;AAC5D,QAAM,YAAY,aAAa;AAC/B,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,WAAW,oBAAC;AAAA,IAAM,MAAM;AAAA,IAAY;AAAA,GAAS;AACnD,QAAM,QAAQ,iBAAiB;AAE/B,MAAI,aAAa,QAAQ,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC;AAAA,IACE,kBAAQ,OACP,oBAAC;AAAA,MAAgB,OAAO,EAAE,OAAO;AAAA,MAAG,YAAY,CAAC;AAAA,MAC/C,8BAAC;AAAA,QAAW,MAAI;AAAA,QAAC,SAAO;AAAA,QAAE,GAAG;AAAA,QAC3B,8BAAC;AAAA,UAAY,6BAA2B;AAAA,UAAE;AAAA,SAAS;AAAA,OACrD;AAAA,KACF,IAEA,oBAAC;AAAA,MAAI,OAAO,EAAE,SAAS,OAAO;AAAA,MAAI;AAAA,KAAS;AAAA,GAE/C;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/SelectContent.native.tsx"],
|
|
4
|
+
"sourcesContent": ["import { SelectContentProps } from './types'\n\nexport const SelectContent = ({ children }: SelectContentProps) => {\n return children\n}\n"],
|
|
5
|
+
"mappings": "AAEO,MAAM,gBAAgB,CAAC,EAAE,SAAS,MAA0B;AACjE,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import {
|
|
3
|
+
autoUpdate,
|
|
4
|
+
flip,
|
|
5
|
+
inner,
|
|
6
|
+
offset,
|
|
7
|
+
shift,
|
|
8
|
+
size,
|
|
9
|
+
useClick,
|
|
10
|
+
useDismiss,
|
|
11
|
+
useFloating,
|
|
12
|
+
useInnerOffset,
|
|
13
|
+
useInteractions,
|
|
14
|
+
useListNavigation,
|
|
15
|
+
useRole,
|
|
16
|
+
useTypeahead
|
|
17
|
+
} from "@floating-ui/react-dom-interactions";
|
|
18
|
+
import { useIsTouchDevice, useIsomorphicLayoutEffect } from "@tamagui/core";
|
|
19
|
+
import * as React from "react";
|
|
20
|
+
import { flushSync } from "react-dom";
|
|
21
|
+
import { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from "./constants";
|
|
22
|
+
import { SelectProvider, useSelectContext } from "./context";
|
|
23
|
+
const SelectInlineImpl = (props) => {
|
|
24
|
+
const { __scopeSelect, children, open = false, selectedIndexRef, listContentRef } = props;
|
|
25
|
+
const selectContext = useSelectContext("SelectSheetImpl", __scopeSelect);
|
|
26
|
+
const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } = selectContext;
|
|
27
|
+
const [scrollTop, setScrollTop] = React.useState(0);
|
|
28
|
+
const touch = useIsTouchDevice();
|
|
29
|
+
const listItemsRef = React.useRef([]);
|
|
30
|
+
const overflowRef = React.useRef(null);
|
|
31
|
+
const upArrowRef = React.useRef(null);
|
|
32
|
+
const downArrowRef = React.useRef(null);
|
|
33
|
+
const allowSelectRef = React.useRef(false);
|
|
34
|
+
const allowMouseUpRef = React.useRef(true);
|
|
35
|
+
const selectTimeoutRef = React.useRef();
|
|
36
|
+
const state = React.useRef({
|
|
37
|
+
isMouseOutside: false
|
|
38
|
+
});
|
|
39
|
+
const [controlledScrolling, setControlledScrolling] = React.useState(false);
|
|
40
|
+
const [fallback, setFallback] = React.useState(false);
|
|
41
|
+
const [innerOffset, setInnerOffset] = React.useState(0);
|
|
42
|
+
const [blockSelection, setBlockSelection] = React.useState(false);
|
|
43
|
+
const floatingStyle = React.useRef({});
|
|
44
|
+
React.useEffect(() => {
|
|
45
|
+
const frame = requestAnimationFrame(() => {
|
|
46
|
+
if (!open) {
|
|
47
|
+
setScrollTop(0);
|
|
48
|
+
setFallback(false);
|
|
49
|
+
setActiveIndex(null);
|
|
50
|
+
setControlledScrolling(false);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
return () => {
|
|
54
|
+
cancelAnimationFrame(frame);
|
|
55
|
+
};
|
|
56
|
+
}, [open, setActiveIndex]);
|
|
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
|
+
const updateFloatingSize = size({
|
|
71
|
+
apply({
|
|
72
|
+
availableHeight,
|
|
73
|
+
rects: {
|
|
74
|
+
reference: { width }
|
|
75
|
+
}
|
|
76
|
+
}) {
|
|
77
|
+
floatingStyle.current = {
|
|
78
|
+
width,
|
|
79
|
+
maxHeight: availableHeight
|
|
80
|
+
};
|
|
81
|
+
},
|
|
82
|
+
padding: WINDOW_PADDING
|
|
83
|
+
});
|
|
84
|
+
const { x, y, reference, floating, strategy, context, refs } = useFloating({
|
|
85
|
+
open,
|
|
86
|
+
onOpenChange: setOpen,
|
|
87
|
+
whileElementsMounted: autoUpdate,
|
|
88
|
+
placement: "bottom-start",
|
|
89
|
+
middleware: fallback ? [
|
|
90
|
+
offset(5),
|
|
91
|
+
...[
|
|
92
|
+
touch ? shift({ crossAxis: true, padding: WINDOW_PADDING }) : flip({ padding: WINDOW_PADDING })
|
|
93
|
+
],
|
|
94
|
+
updateFloatingSize
|
|
95
|
+
] : [
|
|
96
|
+
inner({
|
|
97
|
+
listRef: listItemsRef,
|
|
98
|
+
overflowRef,
|
|
99
|
+
index: selectedIndex,
|
|
100
|
+
offset: innerOffset,
|
|
101
|
+
onFallbackChange: setFallback,
|
|
102
|
+
padding: 10,
|
|
103
|
+
minItemsVisible: touch ? 10 : 4,
|
|
104
|
+
referenceOverflowThreshold: 20
|
|
105
|
+
}),
|
|
106
|
+
updateFloatingSize
|
|
107
|
+
]
|
|
108
|
+
});
|
|
109
|
+
const floatingRef = refs.floating;
|
|
110
|
+
const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD;
|
|
111
|
+
const showDownArrow = open && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
|
|
112
|
+
const interactions = useInteractions([
|
|
113
|
+
useClick(context, { pointerDown: true }),
|
|
114
|
+
useDismiss(context, { outsidePointerDown: false }),
|
|
115
|
+
useRole(context, { role: "listbox" }),
|
|
116
|
+
useInnerOffset(context, {
|
|
117
|
+
enabled: !fallback,
|
|
118
|
+
onChange: setInnerOffset,
|
|
119
|
+
overflowRef
|
|
120
|
+
}),
|
|
121
|
+
useListNavigation(context, {
|
|
122
|
+
listRef: listItemsRef,
|
|
123
|
+
activeIndex,
|
|
124
|
+
selectedIndex,
|
|
125
|
+
onNavigate: setActiveIndex
|
|
126
|
+
}),
|
|
127
|
+
useTypeahead(context, {
|
|
128
|
+
listRef: listContentRef,
|
|
129
|
+
onMatch: open ? setActiveIndex : setSelectedIndex,
|
|
130
|
+
selectedIndex,
|
|
131
|
+
activeIndex
|
|
132
|
+
})
|
|
133
|
+
]);
|
|
134
|
+
const interactionsContext = {
|
|
135
|
+
...interactions,
|
|
136
|
+
getReferenceProps() {
|
|
137
|
+
return interactions.getReferenceProps({
|
|
138
|
+
ref: reference,
|
|
139
|
+
className: "SelectTrigger",
|
|
140
|
+
onKeyDown(event) {
|
|
141
|
+
if (event.key === "Enter" || event.key === " " && !context.dataRef.current.typing) {
|
|
142
|
+
event.preventDefault();
|
|
143
|
+
setOpen(true);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
},
|
|
148
|
+
getFloatingProps(props2) {
|
|
149
|
+
return interactions.getFloatingProps({
|
|
150
|
+
ref: floating,
|
|
151
|
+
className: "Select",
|
|
152
|
+
...props2,
|
|
153
|
+
style: {
|
|
154
|
+
position: strategy,
|
|
155
|
+
top: y ?? "",
|
|
156
|
+
left: x ?? "",
|
|
157
|
+
outline: 0,
|
|
158
|
+
listStyleType: "none",
|
|
159
|
+
scrollbarWidth: "none",
|
|
160
|
+
...floatingStyle.current,
|
|
161
|
+
...props2 == null ? void 0 : props2.style
|
|
162
|
+
},
|
|
163
|
+
onPointerEnter() {
|
|
164
|
+
setControlledScrolling(false);
|
|
165
|
+
state.current.isMouseOutside = false;
|
|
166
|
+
},
|
|
167
|
+
onPointerLeave() {
|
|
168
|
+
state.current.isMouseOutside = true;
|
|
169
|
+
},
|
|
170
|
+
onPointerMove() {
|
|
171
|
+
state.current.isMouseOutside = false;
|
|
172
|
+
setControlledScrolling(false);
|
|
173
|
+
},
|
|
174
|
+
onKeyDown() {
|
|
175
|
+
setControlledScrolling(true);
|
|
176
|
+
},
|
|
177
|
+
onContextMenu(e) {
|
|
178
|
+
e.preventDefault();
|
|
179
|
+
},
|
|
180
|
+
onScroll(event) {
|
|
181
|
+
flushSync(() => setScrollTop(event.currentTarget.scrollTop));
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
useIsomorphicLayoutEffect(() => {
|
|
187
|
+
if (open) {
|
|
188
|
+
selectTimeoutRef.current = setTimeout(() => {
|
|
189
|
+
allowSelectRef.current = true;
|
|
190
|
+
}, 300);
|
|
191
|
+
return () => {
|
|
192
|
+
clearTimeout(selectTimeoutRef.current);
|
|
193
|
+
};
|
|
194
|
+
} else {
|
|
195
|
+
allowSelectRef.current = false;
|
|
196
|
+
allowMouseUpRef.current = true;
|
|
197
|
+
setInnerOffset(0);
|
|
198
|
+
setFallback(false);
|
|
199
|
+
setBlockSelection(false);
|
|
200
|
+
}
|
|
201
|
+
}, [open]);
|
|
202
|
+
useIsomorphicLayoutEffect(() => {
|
|
203
|
+
function onPointerDown(e) {
|
|
204
|
+
var _a, _b, _c;
|
|
205
|
+
const target = e.target;
|
|
206
|
+
if (!((_a = refs.floating.current) == null ? void 0 : _a.contains(target)) && !((_b = upArrowRef.current) == null ? void 0 : _b.contains(target)) && !((_c = downArrowRef.current) == null ? void 0 : _c.contains(target))) {
|
|
207
|
+
setOpen(false);
|
|
208
|
+
setControlledScrolling(false);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
if (open) {
|
|
212
|
+
document.addEventListener("pointerdown", onPointerDown);
|
|
213
|
+
return () => {
|
|
214
|
+
document.removeEventListener("pointerdown", onPointerDown);
|
|
215
|
+
};
|
|
216
|
+
}
|
|
217
|
+
}, [open, refs, setOpen]);
|
|
218
|
+
useIsomorphicLayoutEffect(() => {
|
|
219
|
+
var _a, _b;
|
|
220
|
+
if (open && controlledScrolling) {
|
|
221
|
+
if (activeIndex != null) {
|
|
222
|
+
(_a = listItemsRef.current[activeIndex]) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
setScrollTop(((_b = refs.floating.current) == null ? void 0 : _b.scrollTop) ?? 0);
|
|
226
|
+
}, [open, refs, controlledScrolling, activeIndex]);
|
|
227
|
+
useIsomorphicLayoutEffect(() => {
|
|
228
|
+
var _a;
|
|
229
|
+
if (open && fallback) {
|
|
230
|
+
if (selectedIndex != null) {
|
|
231
|
+
(_a = listItemsRef.current[selectedIndex]) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
}, [open, fallback, selectedIndex]);
|
|
235
|
+
useIsomorphicLayoutEffect(() => {
|
|
236
|
+
if (refs.floating.current && fallback) {
|
|
237
|
+
refs.floating.current.style.maxHeight = "";
|
|
238
|
+
}
|
|
239
|
+
}, [refs, fallback]);
|
|
240
|
+
return /* @__PURE__ */ jsx(SelectProvider, {
|
|
241
|
+
scope: __scopeSelect,
|
|
242
|
+
...selectContext,
|
|
243
|
+
setScrollTop,
|
|
244
|
+
setInnerOffset,
|
|
245
|
+
floatingRef,
|
|
246
|
+
setValueAtIndex: (index, value) => {
|
|
247
|
+
listContentRef.current[index] = value;
|
|
248
|
+
},
|
|
249
|
+
fallback,
|
|
250
|
+
interactions: interactionsContext,
|
|
251
|
+
floatingContext: context,
|
|
252
|
+
activeIndex,
|
|
253
|
+
canScrollDown: !!showDownArrow,
|
|
254
|
+
canScrollUp: !!showUpArrow,
|
|
255
|
+
controlledScrolling: true,
|
|
256
|
+
dataRef: context.dataRef,
|
|
257
|
+
listRef: listItemsRef,
|
|
258
|
+
blockSelection,
|
|
259
|
+
allowMouseUpRef,
|
|
260
|
+
upArrowRef,
|
|
261
|
+
downArrowRef,
|
|
262
|
+
selectTimeoutRef,
|
|
263
|
+
allowSelectRef,
|
|
264
|
+
children
|
|
265
|
+
});
|
|
266
|
+
};
|
|
267
|
+
const userAgent = typeof navigator !== "undefined" && navigator.userAgent || "";
|
|
268
|
+
export {
|
|
269
|
+
SelectInlineImpl
|
|
270
|
+
};
|
|
271
|
+
//# sourceMappingURL=SelectImpl.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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, { pointerDown: true }),\n useDismiss(context, { outsidePointerDown: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (event.key === 'Enter' || (event.key === ' ' && !context.dataRef.current.typing)) {\n event.preventDefault()\n setOpen(true)\n }\n },\n })\n },\n getFloatingProps(props) {\n return interactions.getFloatingProps({\n ref: floating,\n className: 'Select',\n ...props,\n style: {\n position: strategy,\n top: y ?? '',\n left: x ?? '',\n outline: 0,\n listStyleType: 'none',\n scrollbarWidth: 'none',\n ...floatingStyle.current,\n ...props?.style,\n },\n onPointerEnter() {\n setControlledScrolling(false)\n state.current.isMouseOutside = false\n },\n onPointerLeave() {\n state.current.isMouseOutside = true\n },\n onPointerMove() {\n 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
|
+
"names": ["props"]
|
|
7
|
+
}
|