@tamagui/select 1.0.1-beta.57 → 1.0.1-beta.61
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/package.json +11 -10
- package/src/BubbleSelect.tsx +46 -0
- package/src/Select.tsx +1364 -0
- package/src/index.tsx +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/select",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.61",
|
|
4
4
|
"sideEffects": true,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"module": "dist/esm",
|
|
9
9
|
"module:jsx": "dist/jsx",
|
|
10
10
|
"files": [
|
|
11
|
+
"src",
|
|
11
12
|
"types",
|
|
12
13
|
"dist"
|
|
13
14
|
],
|
|
@@ -23,14 +24,14 @@
|
|
|
23
24
|
"@floating-ui/react-native": "^0.7.0",
|
|
24
25
|
"@radix-ui/react-use-callback-ref": "^0.1.0",
|
|
25
26
|
"@radix-ui/react-use-previous": "^0.1.1",
|
|
26
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/list-item": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/separator": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/text": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
27
|
+
"@tamagui/compose-refs": "^1.0.1-beta.61",
|
|
28
|
+
"@tamagui/core": "^1.0.1-beta.61",
|
|
29
|
+
"@tamagui/create-context": "^1.0.1-beta.61",
|
|
30
|
+
"@tamagui/list-item": "^1.0.1-beta.61",
|
|
31
|
+
"@tamagui/separator": "^1.0.1-beta.61",
|
|
32
|
+
"@tamagui/stacks": "^1.0.1-beta.61",
|
|
33
|
+
"@tamagui/text": "^1.0.1-beta.61",
|
|
34
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.61"
|
|
34
35
|
},
|
|
35
36
|
"peerDependencies": {
|
|
36
37
|
"react": "*",
|
|
@@ -38,7 +39,7 @@
|
|
|
38
39
|
"react-native": "*"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
42
|
+
"@tamagui/build": "^1.0.1-beta.61",
|
|
42
43
|
"@types/react-native": "^0.67.3",
|
|
43
44
|
"react": "*",
|
|
44
45
|
"react-dom": "*",
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { usePrevious } from '@radix-ui/react-use-previous'
|
|
2
|
+
import { useComposedRefs } from '@tamagui/compose-refs'
|
|
3
|
+
import * as React from 'react'
|
|
4
|
+
|
|
5
|
+
/* -----------------------------------------------------------------------------------------------*/
|
|
6
|
+
const BubbleSelect = React.forwardRef<HTMLSelectElement, React.ComponentPropsWithoutRef<'select'>>(
|
|
7
|
+
(props, forwardedRef) => {
|
|
8
|
+
const { value, ...selectProps } = props
|
|
9
|
+
const ref = React.useRef<HTMLSelectElement>(null)
|
|
10
|
+
const composedRefs = useComposedRefs(forwardedRef, ref)
|
|
11
|
+
const prevValue = usePrevious(value)
|
|
12
|
+
|
|
13
|
+
// Bubble value change to parents (e.g form change event)
|
|
14
|
+
React.useEffect(() => {
|
|
15
|
+
const select = ref.current!
|
|
16
|
+
const selectProto = window.HTMLSelectElement.prototype
|
|
17
|
+
const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value') as PropertyDescriptor
|
|
18
|
+
const setValue = descriptor.set
|
|
19
|
+
if (prevValue !== value && setValue) {
|
|
20
|
+
const event = new Event('change', { bubbles: true })
|
|
21
|
+
setValue.call(select, value)
|
|
22
|
+
select.dispatchEvent(event)
|
|
23
|
+
}
|
|
24
|
+
}, [prevValue, value])
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* We purposefully use a `select` here to support form autofill as much
|
|
28
|
+
* as possible.
|
|
29
|
+
*
|
|
30
|
+
* We purposefully do not add the `value` attribute here to allow the value
|
|
31
|
+
* to be set programatically and bubble to any parent form `onChange` event.
|
|
32
|
+
* Adding the `value` will cause React to consider the programatic
|
|
33
|
+
* dispatch a duplicate and it will get swallowed.
|
|
34
|
+
*
|
|
35
|
+
* We use `VisuallyHidden` rather than `display: "none"` because Safari autofill
|
|
36
|
+
* won't work otherwise.
|
|
37
|
+
*/
|
|
38
|
+
// TODO
|
|
39
|
+
return null
|
|
40
|
+
// return (
|
|
41
|
+
// <VisuallyHidden asChild>
|
|
42
|
+
// <select {...selectProps} ref={composedRefs} defaultValue={value} />
|
|
43
|
+
// </VisuallyHidden>
|
|
44
|
+
// )
|
|
45
|
+
}
|
|
46
|
+
)
|