@tamagui/select 1.0.1-beta.99 → 1.0.1-rc.0

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.
Files changed (114) hide show
  1. package/dist/cjs/BubbleSelect.js +25 -33
  2. package/dist/cjs/BubbleSelect.js.map +1 -1
  3. package/dist/cjs/Select.js +391 -789
  4. package/dist/cjs/Select.js.map +3 -3
  5. package/dist/cjs/SelectContent.js +72 -0
  6. package/dist/cjs/SelectContent.js.map +7 -0
  7. package/dist/cjs/SelectContent.native.js +31 -0
  8. package/dist/cjs/SelectContent.native.js.map +7 -0
  9. package/dist/cjs/SelectImpl.js +288 -0
  10. package/dist/cjs/SelectImpl.js.map +7 -0
  11. package/dist/cjs/SelectScrollButton.js +157 -0
  12. package/dist/cjs/SelectScrollButton.js.map +7 -0
  13. package/dist/cjs/SelectScrollButton.native.js +32 -0
  14. package/dist/cjs/SelectScrollButton.native.js.map +7 -0
  15. package/dist/cjs/SelectViewport.js +125 -0
  16. package/dist/cjs/SelectViewport.js.map +7 -0
  17. package/dist/cjs/SelectViewport.native.js +41 -0
  18. package/dist/cjs/SelectViewport.native.js.map +7 -0
  19. package/dist/cjs/constants.js +47 -0
  20. package/dist/cjs/constants.js.map +7 -0
  21. package/dist/cjs/context.js +49 -0
  22. package/dist/cjs/context.js.map +7 -0
  23. package/dist/cjs/index.js +2 -0
  24. package/dist/cjs/index.js.map +2 -2
  25. package/dist/cjs/types.js +17 -0
  26. package/dist/cjs/types.js.map +7 -0
  27. package/dist/cjs/useSelectBreakpointActive.js +39 -0
  28. package/dist/cjs/useSelectBreakpointActive.js.map +7 -0
  29. package/dist/esm/BubbleSelect.js +20 -33
  30. package/dist/esm/BubbleSelect.js.map +1 -1
  31. package/dist/esm/Select.js +379 -803
  32. package/dist/esm/Select.js.map +3 -3
  33. package/dist/esm/SelectContent.js +48 -0
  34. package/dist/esm/SelectContent.js.map +7 -0
  35. package/dist/esm/SelectContent.native.js +7 -0
  36. package/dist/esm/SelectContent.native.js.map +7 -0
  37. package/dist/esm/SelectImpl.js +273 -0
  38. package/dist/esm/SelectImpl.js.map +7 -0
  39. package/dist/esm/SelectScrollButton.js +126 -0
  40. package/dist/esm/SelectScrollButton.js.map +7 -0
  41. package/dist/esm/SelectScrollButton.native.js +7 -0
  42. package/dist/esm/SelectScrollButton.native.js.map +7 -0
  43. package/dist/esm/SelectViewport.js +94 -0
  44. package/dist/esm/SelectViewport.js.map +7 -0
  45. package/dist/esm/SelectViewport.native.js +17 -0
  46. package/dist/esm/SelectViewport.native.js.map +7 -0
  47. package/dist/esm/constants.js +17 -0
  48. package/dist/esm/constants.js.map +7 -0
  49. package/dist/esm/context.js +21 -0
  50. package/dist/esm/context.js.map +7 -0
  51. package/dist/esm/index.js +1 -0
  52. package/dist/esm/index.js.map +2 -2
  53. package/dist/esm/types.js +1 -0
  54. package/dist/esm/types.js.map +7 -0
  55. package/dist/esm/useSelectBreakpointActive.js +14 -0
  56. package/dist/esm/useSelectBreakpointActive.js.map +7 -0
  57. package/dist/jsx/BubbleSelect.js +20 -18
  58. package/dist/jsx/BubbleSelect.js.map +1 -1
  59. package/dist/jsx/Select.js +259 -656
  60. package/dist/jsx/Select.js.map +3 -3
  61. package/dist/jsx/SelectContent.js +27 -0
  62. package/dist/jsx/SelectContent.js.map +7 -0
  63. package/dist/jsx/SelectContent.native.js +7 -0
  64. package/dist/jsx/SelectContent.native.js.map +7 -0
  65. package/dist/jsx/SelectImpl.js +246 -0
  66. package/dist/jsx/SelectImpl.js.map +7 -0
  67. package/dist/jsx/SelectScrollButton.js +99 -0
  68. package/dist/jsx/SelectScrollButton.js.map +7 -0
  69. package/dist/jsx/SelectScrollButton.native.js +7 -0
  70. package/dist/jsx/SelectScrollButton.native.js.map +7 -0
  71. package/dist/jsx/SelectViewport.js +72 -0
  72. package/dist/jsx/SelectViewport.js.map +7 -0
  73. package/dist/jsx/SelectViewport.native.js +13 -0
  74. package/dist/jsx/SelectViewport.native.js.map +7 -0
  75. package/dist/jsx/constants.js +17 -0
  76. package/dist/jsx/constants.js.map +7 -0
  77. package/dist/jsx/context.js +15 -0
  78. package/dist/jsx/context.js.map +7 -0
  79. package/dist/jsx/index.js +1 -0
  80. package/dist/jsx/index.js.map +2 -2
  81. package/dist/jsx/types.js +1 -0
  82. package/dist/jsx/types.js.map +7 -0
  83. package/dist/jsx/useSelectBreakpointActive.js +14 -0
  84. package/dist/jsx/useSelectBreakpointActive.js.map +7 -0
  85. package/package.json +26 -20
  86. package/src/Select.tsx +210 -906
  87. package/src/SelectContent.native.tsx +5 -0
  88. package/src/SelectContent.tsx +45 -0
  89. package/src/SelectImpl.tsx +344 -0
  90. package/src/SelectScrollButton.native.tsx +7 -0
  91. package/src/SelectScrollButton.tsx +168 -0
  92. package/src/SelectViewport.native.tsx +14 -0
  93. package/src/SelectViewport.tsx +104 -0
  94. package/src/constants.tsx +7 -0
  95. package/src/context.tsx +19 -0
  96. package/src/index.tsx +7 -0
  97. package/src/types.tsx +91 -0
  98. package/src/useSelectBreakpointActive.tsx +15 -0
  99. package/types/BubbleSelect.d.ts +2 -0
  100. package/types/Select.d.ts +449 -599
  101. package/types/SelectContent.d.ts +5 -0
  102. package/types/SelectContent.native.d.ts +4 -0
  103. package/types/SelectImpl.d.ts +9 -0
  104. package/types/SelectScrollButton.d.ts +6 -0
  105. package/types/SelectScrollButton.native.d.ts +4 -0
  106. package/types/SelectViewport.d.ts +127 -0
  107. package/types/SelectViewport.native.d.ts +7 -0
  108. package/types/constants.d.ts +8 -0
  109. package/types/context.d.ts +21 -0
  110. package/types/index.d.ts +2 -0
  111. package/types/types.d.ts +81 -0
  112. package/types/useSelectBreakpointActive.d.ts +4 -0
  113. package/types/Select.d.ts.map +0 -1
  114. package/types/index.d.ts.map +0 -1
@@ -0,0 +1,99 @@
1
+ import { autoUpdate, offset, useFloating } from "@floating-ui/react-dom-interactions";
2
+ import { useComposedRefs } from "@tamagui/compose-refs";
3
+ import { useIsomorphicLayoutEffect } from "@tamagui/core";
4
+ import { YStack } from "@tamagui/stacks";
5
+ import * as React from "react";
6
+ import { flushSync } from "react-dom";
7
+ import { useSelectContext } from "./context";
8
+ const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
9
+ const SelectScrollUpButton = React.forwardRef(
10
+ (props, forwardedRef) => {
11
+ return <SelectScrollButtonImpl componentName={SCROLL_UP_BUTTON_NAME} {...props} dir="up" ref={forwardedRef} />;
12
+ }
13
+ );
14
+ SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
15
+ const SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
16
+ const SelectScrollDownButton = React.forwardRef(
17
+ (props, forwardedRef) => {
18
+ return <SelectScrollButtonImpl componentName={SCROLL_DOWN_BUTTON_NAME} {...props} dir="down" ref={forwardedRef} />;
19
+ }
20
+ );
21
+ SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
22
+ const SelectScrollButtonImpl = React.memo(
23
+ React.forwardRef(
24
+ (props, forwardedRef) => {
25
+ const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props;
26
+ const { floatingRef, forceUpdate, open, fallback, setScrollTop, setInnerOffset, ...context } = useSelectContext(componentName, __scopeSelect);
27
+ const [element, setElement] = React.useState(null);
28
+ const statusRef = React.useRef("idle");
29
+ const isVisible = context[dir === "down" ? "canScrollDown" : "canScrollUp"];
30
+ const frameRef = React.useRef();
31
+ const { x, y, reference, floating, strategy, update, refs } = useFloating({
32
+ strategy: "fixed",
33
+ placement: dir === "up" ? "top" : "bottom",
34
+ middleware: [offset(({ rects }) => -rects.floating.height)],
35
+ whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true })
36
+ });
37
+ const composedRef = useComposedRefs(forwardedRef, floating);
38
+ if (floatingRef) {
39
+ if (open) {
40
+ if (element !== floatingRef.current) {
41
+ setElement(floatingRef.current);
42
+ reference(floatingRef.current);
43
+ requestAnimationFrame(update);
44
+ }
45
+ } else {
46
+ cancelAnimationFrame(frameRef.current);
47
+ }
48
+ }
49
+ useIsomorphicLayoutEffect(() => {
50
+ return () => {
51
+ cancelAnimationFrame(frameRef.current);
52
+ };
53
+ }, []);
54
+ if (!isVisible || !floatingRef) {
55
+ return null;
56
+ }
57
+ const onScroll = (amount) => {
58
+ if (fallback) {
59
+ if (refs.floating.current) {
60
+ refs.floating.current.scrollTop -= amount;
61
+ flushSync(() => setScrollTop(refs.floating.current?.scrollTop ?? 0));
62
+ }
63
+ } else {
64
+ flushSync(() => setInnerOffset((value) => value - amount));
65
+ }
66
+ };
67
+ return <YStack ref={composedRef} componentName={componentName} aria-hidden {...scrollIndicatorProps} zIndex={1e3} position={strategy} left={x || 0} top={y || 0} width={`calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`} onPointerEnter={() => {
68
+ statusRef.current = "active";
69
+ let prevNow = Date.now();
70
+ function frame() {
71
+ if (element) {
72
+ const currentNow = Date.now();
73
+ const msElapsed = currentNow - prevNow;
74
+ prevNow = currentNow;
75
+ const pixelsToScroll = msElapsed / 2;
76
+ const remainingPixels = dir === "up" ? element.scrollTop : element.scrollHeight - element.clientHeight - element.scrollTop;
77
+ const scrollRemaining = dir === "up" ? element.scrollTop - pixelsToScroll > 0 : element.scrollTop + pixelsToScroll < element.scrollHeight - element.clientHeight;
78
+ onScroll(
79
+ dir === "up" ? Math.min(pixelsToScroll, remainingPixels) : Math.max(-pixelsToScroll, -remainingPixels)
80
+ );
81
+ if (scrollRemaining) {
82
+ frameRef.current = requestAnimationFrame(frame);
83
+ }
84
+ }
85
+ }
86
+ cancelAnimationFrame(frameRef.current);
87
+ frameRef.current = requestAnimationFrame(frame);
88
+ }} onPointerLeave={() => {
89
+ statusRef.current = "idle";
90
+ cancelAnimationFrame(frameRef.current);
91
+ }} />;
92
+ }
93
+ )
94
+ );
95
+ export {
96
+ SelectScrollDownButton,
97
+ SelectScrollUpButton
98
+ };
99
+ //# sourceMappingURL=SelectScrollButton.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/SelectScrollButton.tsx"],
4
+ "sourcesContent": ["import { autoUpdate, offset, useFloating } from '@floating-ui/react-dom-interactions'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { TamaguiElement, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { useSelectContext } from './context'\nimport { ScopedProps, SelectScrollButtonImplProps, SelectScrollButtonProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollUpButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'\n\nexport const SelectScrollUpButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(\n (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {\n return (\n <SelectScrollButtonImpl\n componentName={SCROLL_UP_BUTTON_NAME}\n {...props}\n dir=\"up\"\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollDownButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'\n\nexport const SelectScrollDownButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(\n (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {\n return (\n <SelectScrollButtonImpl\n componentName={SCROLL_DOWN_BUTTON_NAME}\n {...props}\n dir=\"down\"\n ref={forwardedRef}\n />\n )\n }\n)\n\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME\n\ntype SelectScrollButtonImplElement = TamaguiElement\n\nconst SelectScrollButtonImpl = React.memo(\n React.forwardRef<SelectScrollButtonImplElement, SelectScrollButtonImplProps>(\n (props: ScopedProps<SelectScrollButtonImplProps>, forwardedRef) => {\n const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props\n const { floatingRef, forceUpdate, open, fallback, setScrollTop, setInnerOffset, ...context } =\n useSelectContext(componentName, __scopeSelect)\n\n const [element, setElement] = React.useState<HTMLElement | null>(null)\n const statusRef = React.useRef<'idle' | 'active'>('idle')\n const isVisible = context[dir === 'down' ? 'canScrollDown' : 'canScrollUp']\n const frameRef = React.useRef<any>()\n\n const { x, y, reference, floating, strategy, update, refs } = useFloating({\n strategy: 'fixed',\n placement: dir === 'up' ? 'top' : 'bottom',\n middleware: [offset(({ rects }) => -rects.floating.height)],\n whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true }),\n })\n\n const composedRef = useComposedRefs(forwardedRef, floating)\n\n if (floatingRef) {\n if (open) {\n if (element !== floatingRef.current) {\n setElement(floatingRef.current)\n reference(floatingRef.current)\n requestAnimationFrame(update)\n }\n } else {\n cancelAnimationFrame(frameRef.current)\n }\n }\n\n useIsomorphicLayoutEffect(() => {\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n cancelAnimationFrame(frameRef.current)\n }\n }, [])\n\n if (!isVisible || !floatingRef) {\n return null\n }\n\n const onScroll = (amount: number) => {\n if (fallback) {\n if (refs.floating.current) {\n refs.floating.current.scrollTop -= amount\n flushSync(() => setScrollTop!(refs.floating.current?.scrollTop ?? 0))\n }\n } else {\n flushSync(() => setInnerOffset!((value) => value - amount))\n }\n }\n\n return (\n <YStack\n ref={composedRef}\n componentName={componentName}\n aria-hidden\n {...scrollIndicatorProps}\n zIndex={1000}\n // @ts-expect-error\n position={strategy}\n left={x || 0}\n top={y || 0}\n width={`calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`}\n onPointerEnter={() => {\n statusRef.current = 'active'\n let prevNow = Date.now()\n\n function frame() {\n if (element) {\n const currentNow = Date.now()\n const msElapsed = currentNow - prevNow\n prevNow = currentNow\n\n const pixelsToScroll = msElapsed / 2\n\n const remainingPixels =\n dir === 'up'\n ? element.scrollTop\n : element.scrollHeight - element.clientHeight - element.scrollTop\n\n const scrollRemaining =\n dir === 'up'\n ? element.scrollTop - pixelsToScroll > 0\n : element.scrollTop + pixelsToScroll <\n element.scrollHeight - element.clientHeight\n\n onScroll(\n dir === 'up'\n ? Math.min(pixelsToScroll, remainingPixels)\n : Math.max(-pixelsToScroll, -remainingPixels)\n )\n\n if (scrollRemaining) {\n frameRef.current = requestAnimationFrame(frame)\n }\n }\n }\n\n cancelAnimationFrame(frameRef.current)\n frameRef.current = requestAnimationFrame(frame)\n }}\n onPointerLeave={() => {\n statusRef.current = 'idle'\n cancelAnimationFrame(frameRef.current)\n }}\n />\n )\n }\n )\n)\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,7 @@
1
+ const SelectScrollUpButton = (_) => null;
2
+ const SelectScrollDownButton = (_) => null;
3
+ export {
4
+ SelectScrollDownButton,
5
+ SelectScrollUpButton
6
+ };
7
+ //# sourceMappingURL=SelectScrollButton.native.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/SelectScrollButton.native.tsx"],
4
+ "sourcesContent": ["import { ScopedProps, SelectScrollButtonProps } from './types'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const SelectScrollUpButton = (_: ScopedProps<SelectScrollButtonProps>) => null\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const SelectScrollDownButton = (_: ScopedProps<SelectScrollButtonProps>) => null\n"],
5
+ "mappings": "AAGO,MAAM,uBAAuB,CAAC,MAA4C;AAG1E,MAAM,yBAAyB,CAAC,MAA4C;",
6
+ "names": []
7
+ }
@@ -0,0 +1,72 @@
1
+ import { FloatingFocusManager } from "@floating-ui/react-dom-interactions";
2
+ import { isWeb } from "@tamagui/core";
3
+ import { styled } from "@tamagui/core";
4
+ import { PortalItem } from "@tamagui/portal";
5
+ import { ThemeableStack } from "@tamagui/stacks";
6
+ import * as React from "react";
7
+ import { VIEWPORT_NAME } from "./constants";
8
+ import { ForwardSelectContext, useSelectContext } from "./context";
9
+ import { useSelectBreakpointActive } from "./useSelectBreakpointActive";
10
+ const SelectViewportFrame = styled(ThemeableStack, {
11
+ name: VIEWPORT_NAME,
12
+ backgroundColor: "$background",
13
+ elevate: true,
14
+ bordered: true,
15
+ overflow: "scroll",
16
+ userSelect: "none",
17
+ variants: {
18
+ size: {
19
+ "...size": (val, { tokens }) => {
20
+ return {
21
+ borderRadius: tokens.radius[val] ?? val
22
+ };
23
+ }
24
+ }
25
+ },
26
+ defaultVariants: {
27
+ size: "$2"
28
+ }
29
+ });
30
+ const SelectViewport = React.forwardRef(
31
+ (props, forwardedRef) => {
32
+ const { __scopeSelect, children, ...viewportProps } = props;
33
+ const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
34
+ const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
35
+ if (breakpointActive || !isWeb) {
36
+ return <PortalItem hostName={`${context.scopeKey}SheetContents`}><ForwardSelectContext context={context}>{children}</ForwardSelectContext></PortalItem>;
37
+ }
38
+ if (!context.floatingContext) {
39
+ return null;
40
+ }
41
+ if (!context.open) {
42
+ return children;
43
+ }
44
+ const {
45
+ style: { scrollbarWidth, listStyleType, ...restStyle },
46
+ ...floatingProps
47
+ } = context.interactions.getFloatingProps();
48
+ return <>
49
+ <style dangerouslySetInnerHTML={{
50
+ __html: selectViewportCSS
51
+ }} />
52
+ <FloatingFocusManager context={context.floatingContext}><SelectViewportFrame size={context.size} role="presentation" {...viewportProps} ref={forwardedRef} {...floatingProps} {...restStyle}>{children}</SelectViewportFrame></FloatingFocusManager>
53
+ </>;
54
+ }
55
+ );
56
+ SelectViewport.displayName = VIEWPORT_NAME;
57
+ const selectViewportCSS = `
58
+ .is_SelectViewport {
59
+ scrollbar-width: none;
60
+ -webkit-overflow-scrolling: touch;
61
+ overscroll-behavior: contain;
62
+ }
63
+
64
+ .is_SelectViewport::-webkit-scrollbar{
65
+ display:none
66
+ }
67
+ `;
68
+ export {
69
+ SelectViewport,
70
+ SelectViewportFrame
71
+ };
72
+ //# sourceMappingURL=SelectViewport.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/SelectViewport.tsx"],
4
+ "sourcesContent": ["import { FloatingFocusManager } from '@floating-ui/react-dom-interactions'\nimport { TamaguiElement, isWeb } from '@tamagui/core'\nimport { styled } from '@tamagui/core'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { ForwardSelectContext, useSelectContext } from './context'\nimport { ScopedProps, SelectViewportProps } from './types'\nimport { useSelectBreakpointActive } from './useSelectBreakpointActive'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectViewportFrame = styled(ThemeableStack, {\n name: VIEWPORT_NAME,\n backgroundColor: '$background',\n elevate: true,\n bordered: true,\n overflow: 'scroll',\n userSelect: 'none',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n borderRadius: tokens.radius[val] ?? val,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$2',\n },\n})\n\nexport const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(\n (props: ScopedProps<SelectViewportProps>, forwardedRef) => {\n const { __scopeSelect, children, ...viewportProps } = props\n const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n\n if (breakpointActive || !isWeb) {\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n <ForwardSelectContext context={context}>{children}</ForwardSelectContext>\n </PortalItem>\n )\n }\n\n if (!context.floatingContext) {\n return null\n }\n\n if (!context.open) {\n return children\n }\n\n const {\n style: { scrollbarWidth, listStyleType, ...restStyle },\n ...floatingProps\n } = context.interactions!.getFloatingProps()\n\n return (\n <>\n <style\n dangerouslySetInnerHTML={{\n __html: selectViewportCSS,\n }}\n />\n <FloatingFocusManager context={context.floatingContext}>\n <SelectViewportFrame\n size={context.size}\n // @ts-ignore\n role=\"presentation\"\n {...viewportProps}\n ref={forwardedRef}\n {...floatingProps}\n {...restStyle}\n >\n {children}\n </SelectViewportFrame>\n </FloatingFocusManager>\n </>\n )\n }\n)\n\nSelectViewport.displayName = VIEWPORT_NAME\n\nconst selectViewportCSS = `\n.is_SelectViewport {\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n}\n\n.is_SelectViewport::-webkit-scrollbar{\n display:none\n}\n`\n"],
5
+ "mappings": "AAAA,SAAS,4BAA4B;AACrC,SAAyB,aAAa;AACtC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAEvB,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB,wBAAwB;AAEvD,SAAS,iCAAiC;AAMnC,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACxD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,OAAO,MAAM;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,OAAyC,iBAAiB;AACzD,UAAM,EAAE,eAAe,aAAa,cAAc,IAAI;AACtD,UAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,UAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAE1E,QAAI,oBAAoB,CAAC,OAAO;AAC9B,aACE,CAAC,WAAW,UAAU,GAAG,QAAQ,yBAC/B,CAAC,qBAAqB,SAAS,UAAU,SAAS,EAAjD,qBACH,EAFC;AAAA,IAIL;AAEA,QAAI,CAAC,QAAQ,iBAAiB;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,QAAQ,MAAM;AACjB,aAAO;AAAA,IACT;AAEA,UAAM;AAAA,MACJ,OAAO,EAAE,gBAAgB,kBAAkB,UAAU;AAAA,SAClD;AAAA,IACL,IAAI,QAAQ,aAAc,iBAAiB;AAE3C,WACE;AAAA,MACE,CAAC,MACC,yBAAyB;AAAA,QACvB,QAAQ;AAAA,MACV,GACF;AAAA,MACA,CAAC,qBAAqB,SAAS,QAAQ,iBACrC,CAAC,oBACC,MAAM,QAAQ,MAEd,KAAK,mBACD,eACJ,KAAK,kBACD,mBACA,YAEH,SACH,EAVC,oBAWH,EAZC;AAAA,IAaH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,13 @@
1
+ import { PortalItem } from "@tamagui/portal";
2
+ import { VIEWPORT_NAME } from "./constants";
3
+ import { useSelectContext } from "./context";
4
+ const SelectViewport = (props) => {
5
+ const { __scopeSelect, children } = props;
6
+ const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
7
+ return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>;
8
+ };
9
+ SelectViewport.displayName = VIEWPORT_NAME;
10
+ export {
11
+ SelectViewport
12
+ };
13
+ //# sourceMappingURL=SelectViewport.native.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/SelectViewport.native.tsx"],
4
+ "sourcesContent": ["import { PortalItem } from '@tamagui/portal'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { ScopedProps, SelectViewportProps } from './types'\n\nexport const SelectViewport = (props: ScopedProps<SelectViewportProps>) => {\n const { __scopeSelect, children } = props\n const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n}\n\nSelectViewport.displayName = VIEWPORT_NAME\n"],
5
+ "mappings": "AAAA,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,iBAAiB,CAAC,UAA4C;AACzE,QAAM,EAAE,eAAe,SAAS,IAAI;AACpC,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,SAAO,CAAC,WAAW,UAAU,GAAG,QAAQ,0BAA0B,SAAS,EAAnE;AACV;AAEA,eAAe,cAAc;",
6
+ "names": []
7
+ }
@@ -0,0 +1,17 @@
1
+ const SELECT_NAME = "Select";
2
+ const WINDOW_PADDING = 8;
3
+ const SCROLL_ARROW_VELOCITY = 8;
4
+ const SCROLL_ARROW_THRESHOLD = 8;
5
+ const MIN_HEIGHT = 80;
6
+ const FALLBACK_THRESHOLD = 16;
7
+ const VIEWPORT_NAME = "SelectViewport";
8
+ export {
9
+ FALLBACK_THRESHOLD,
10
+ MIN_HEIGHT,
11
+ SCROLL_ARROW_THRESHOLD,
12
+ SCROLL_ARROW_VELOCITY,
13
+ SELECT_NAME,
14
+ VIEWPORT_NAME,
15
+ WINDOW_PADDING
16
+ };
17
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/constants.tsx"],
4
+ "sourcesContent": ["export const SELECT_NAME = 'Select'\nexport const WINDOW_PADDING = 8\nexport const SCROLL_ARROW_VELOCITY = 8\nexport const SCROLL_ARROW_THRESHOLD = 8\nexport const MIN_HEIGHT = 80\nexport const FALLBACK_THRESHOLD = 16\nexport const VIEWPORT_NAME = 'SelectViewport'\n"],
5
+ "mappings": "AAAO,MAAM,cAAc;AACpB,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,aAAa;AACnB,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;",
6
+ "names": []
7
+ }
@@ -0,0 +1,15 @@
1
+ import { createContextScope } from "@tamagui/create-context";
2
+ import { SELECT_NAME } from "./constants";
3
+ const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME);
4
+ const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
5
+ const ForwardSelectContext = (props) => {
6
+ return <SelectProvider isInSheet scope={props.__scopeSelect} {...props.context}>{props.children}</SelectProvider>;
7
+ };
8
+ export {
9
+ ForwardSelectContext,
10
+ SelectProvider,
11
+ createSelectContext,
12
+ createSelectScope,
13
+ useSelectContext
14
+ };
15
+ //# sourceMappingURL=context.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/context.tsx"],
4
+ "sourcesContent": ["import { createContextScope } from '@tamagui/create-context'\n\nimport { SELECT_NAME } from './constants'\nimport { ScopedProps, SelectContextValue } from './types'\n\nexport const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME)\n\nexport const [SelectProvider, useSelectContext] =\n createSelectContext<SelectContextValue>(SELECT_NAME)\n\nexport const ForwardSelectContext = (\n props: ScopedProps<{ children?: any; context: SelectContextValue }>\n) => {\n return (\n <SelectProvider isInSheet scope={props.__scopeSelect} {...props.context}>\n {props.children}\n </SelectProvider>\n )\n}\n"],
5
+ "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB;AAGrB,MAAM,CAAC,qBAAqB,iBAAiB,IAAI,mBAAmB,WAAW;AAE/E,MAAM,CAAC,gBAAgB,gBAAgB,IAC5C,oBAAwC,WAAW;AAE9C,MAAM,uBAAuB,CAClC,UACG;AACH,SACE,CAAC,eAAe,UAAU,OAAO,MAAM,mBAAmB,MAAM,UAC7D,MAAM,SACT,EAFC;AAIL;",
6
+ "names": []
7
+ }
package/dist/jsx/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./Select";
2
+ export * from "./context";
2
3
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.tsx"],
4
- "sourcesContent": ["export * from './Select'\n"],
5
- "mappings": "AAAA;",
4
+ "sourcesContent": ["export * from './Select'\nexport type {\n SelectContentProps,\n SelectProps,\n SelectScrollButtonProps,\n SelectViewportProps,\n} from './types'\nexport * from './context'\n"],
5
+ "mappings": "AAAA,cAAc;AAOd,cAAc;",
6
6
  "names": []
7
7
  }
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,14 @@
1
+ import { useMedia } from "@tamagui/core";
2
+ const useSelectBreakpointActive = (sheetBreakpoint) => {
3
+ const media = useMedia();
4
+ return sheetBreakpoint ? media[sheetBreakpoint] : false;
5
+ };
6
+ const useShowSelectSheet = (context) => {
7
+ const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
8
+ return context.open === false ? false : breakpointActive;
9
+ };
10
+ export {
11
+ useSelectBreakpointActive,
12
+ useShowSelectSheet
13
+ };
14
+ //# sourceMappingURL=useSelectBreakpointActive.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/useSelectBreakpointActive.tsx"],
4
+ "sourcesContent": ["import { useMedia } from '@tamagui/core'\n\nimport { SelectContextValue } from './types'\n\nexport const useSelectBreakpointActive = (\n sheetBreakpoint: SelectContextValue['sheetBreakpoint']\n) => {\n const media = useMedia()\n return sheetBreakpoint ? media[sheetBreakpoint] : false\n}\n\nexport const useShowSelectSheet = (context: SelectContextValue) => {\n const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
5
+ "mappings": "AAAA,SAAS,gBAAgB;AAIlB,MAAM,4BAA4B,CACvC,oBACG;AACH,QAAM,QAAQ,SAAS;AACvB,SAAO,kBAAkB,MAAM,mBAAmB;AACpD;AAEO,MAAM,qBAAqB,CAAC,YAAgC;AACjE,QAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAC1E,SAAO,QAAQ,SAAS,QAAQ,QAAQ;AAC1C;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/select",
3
- "version": "1.0.1-beta.99",
3
+ "version": "1.0.1-rc.0",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -18,33 +18,39 @@
18
18
  "build": "tamagui-build",
19
19
  "watch": "tamagui-build --watch",
20
20
  "clean": "tamagui-build clean",
21
- "clean:build": "tamagui-build clean:build"
21
+ "clean:build": "tamagui-build clean:build",
22
+ "lint": "eslint src",
23
+ "lint:fix": "yarn lint --fix"
22
24
  },
23
25
  "dependencies": {
24
- "@floating-ui/react-dom": "0.7.0",
25
- "@floating-ui/react-dom-interactions": "^0.5.0",
26
- "@floating-ui/react-native": "^0.7.0",
27
- "@radix-ui/react-use-callback-ref": "^0.1.0",
26
+ "@floating-ui/react-dom": "^1.0.0",
27
+ "@floating-ui/react-dom-interactions": "^0.10.3",
28
+ "@floating-ui/react-native": "^0.8.0",
28
29
  "@radix-ui/react-use-previous": "^0.1.1",
29
- "@tamagui/compose-refs": "^1.0.1-beta.99",
30
- "@tamagui/core": "^1.0.1-beta.99",
31
- "@tamagui/create-context": "^1.0.1-beta.99",
32
- "@tamagui/list-item": "^1.0.1-beta.99",
33
- "@tamagui/separator": "^1.0.1-beta.99",
34
- "@tamagui/stacks": "^1.0.1-beta.99",
35
- "@tamagui/text": "^1.0.1-beta.99",
36
- "@tamagui/use-controllable-state": "^1.0.1-beta.99"
30
+ "@tamagui/adapt": "^1.0.1-rc.0",
31
+ "@tamagui/compose-refs": "^1.0.1-rc.0",
32
+ "@tamagui/core": "^1.0.1-rc.0",
33
+ "@tamagui/create-context": "^1.0.1-rc.0",
34
+ "@tamagui/dismissable": "^1.0.1-rc.0",
35
+ "@tamagui/focus-scope": "^1.0.1-rc.0",
36
+ "@tamagui/list-item": "^1.0.1-rc.0",
37
+ "@tamagui/portal": "^1.0.1-rc.0",
38
+ "@tamagui/separator": "^1.0.1-rc.0",
39
+ "@tamagui/stacks": "^1.0.1-rc.0",
40
+ "@tamagui/text": "^1.0.1-rc.0",
41
+ "@tamagui/use-controllable-state": "^1.0.1-rc.0",
42
+ "@tamagui/use-event": "^1.0.1-rc.0"
37
43
  },
38
44
  "peerDependencies": {
39
- "react": "*",
40
- "react-dom": "*",
45
+ "react": ">=18",
46
+ "react-dom": ">=18",
41
47
  "react-native": "*"
42
48
  },
43
49
  "devDependencies": {
44
- "@tamagui/build": "^1.0.1-beta.99",
45
- "@types/react-native": "^0.67.3",
46
- "react": "*",
47
- "react-dom": "*",
50
+ "@tamagui/build": "^1.0.1-rc.0",
51
+ "@types/react-native": "^0.69.2",
52
+ "react": ">=18",
53
+ "react-dom": ">=18",
48
54
  "react-native": "*"
49
55
  },
50
56
  "publishConfig": {