@tamagui/toggle-group 1.69.3 → 1.71.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.
- package/dist/cjs/Toggle.js +4 -2
- package/dist/cjs/Toggle.js.map +1 -1
- package/dist/cjs/Toggle.native.js +4 -2
- package/dist/cjs/Toggle.native.js.map +1 -1
- package/dist/cjs/ToggleGroup.js +42 -43
- package/dist/cjs/ToggleGroup.js.map +1 -1
- package/dist/cjs/ToggleGroup.native.js +42 -43
- package/dist/cjs/ToggleGroup.native.js.map +1 -1
- package/dist/esm/Toggle.js +5 -3
- package/dist/esm/Toggle.js.map +1 -1
- package/dist/esm/ToggleGroup.js +42 -42
- package/dist/esm/ToggleGroup.js.map +1 -1
- package/dist/jsx/Toggle.js +5 -3
- package/dist/jsx/Toggle.js.map +1 -1
- package/dist/jsx/Toggle.native.js +5 -3
- package/dist/jsx/Toggle.native.js.map +1 -1
- package/dist/jsx/ToggleGroup.js +42 -45
- package/dist/jsx/ToggleGroup.js.map +1 -1
- package/dist/jsx/ToggleGroup.native.js +42 -45
- package/dist/jsx/ToggleGroup.native.js.map +1 -1
- package/package.json +13 -13
- package/src/Toggle.tsx +28 -28
- package/src/ToggleGroup.tsx +55 -64
- package/types/ToggleGroup.d.ts +11 -9
- package/types/ToggleGroup.d.ts.map +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
2
1
|
import { registerFocusable } from "@tamagui/focusable";
|
|
3
2
|
import { getFontSize } from "@tamagui/font-size";
|
|
4
3
|
import { getSize } from "@tamagui/get-token";
|
|
5
4
|
import { Group, useGroupItem } from "@tamagui/group";
|
|
6
5
|
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
7
|
-
import { RovingFocusGroup
|
|
6
|
+
import { RovingFocusGroup } from "@tamagui/roving-focus";
|
|
8
7
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
9
8
|
import { useDirection } from "@tamagui/use-direction";
|
|
10
9
|
import {
|
|
10
|
+
createStyledContext,
|
|
11
11
|
getVariableValue,
|
|
12
12
|
isWeb,
|
|
13
13
|
styled,
|
|
@@ -16,19 +16,10 @@ import {
|
|
|
16
16
|
} from "@tamagui/web";
|
|
17
17
|
import React from "react";
|
|
18
18
|
import { Toggle, ToggleFrame } from "./Toggle";
|
|
19
|
-
const TOGGLE_GROUP_NAME = "ToggleGroup",
|
|
20
|
-
TOGGLE_GROUP_NAME,
|
|
21
|
-
[createRovingFocusGroupScope]
|
|
22
|
-
), TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem", [createToggleGroupItemContext, createToggleGroupItemScope] = createContextScope(TOGGLE_GROUP_ITEM_NAME), [ToggleGroupItemProvider, useToggleGroupItemContext] = createToggleGroupContext(TOGGLE_GROUP_NAME), useToggleGroupItemScope = createToggleGroupItemScope(), ToggleGroupItem = ToggleFrame.extractable(
|
|
19
|
+
const TOGGLE_GROUP_NAME = "ToggleGroup", TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem", TOGGLE_GROUP_CONTEXT = "ToggleGroup", { Provider: ToggleGroupItemProvider, useStyledContext: useToggleGroupItemContext } = createStyledContext(), { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } = createStyledContext(), ToggleGroupItem = ToggleFrame.extractable(
|
|
23
20
|
React.forwardRef(
|
|
24
21
|
(props, forwardedRef) => {
|
|
25
|
-
const valueContext = useToggleGroupValueContext(
|
|
26
|
-
TOGGLE_GROUP_ITEM_NAME,
|
|
27
|
-
props.__scopeToggleGroup
|
|
28
|
-
), context = useToggleGroupContext(
|
|
29
|
-
TOGGLE_GROUP_ITEM_NAME,
|
|
30
|
-
props.__scopeToggleGroup
|
|
31
|
-
), __scopeToggleGroup = props.__scopeToggleGroup, rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup), pressed = valueContext.value.includes(props.value), disabled = context.disabled || props.disabled || !1, ref = React.useRef(null), groupItemProps = useGroupItem({ disabled }), size = props.size ?? context.size, sizeProps = props.unstyled ? {} : {
|
|
22
|
+
const { __scopeToggleGroup, ...rest } = props, valueContext = useToggleGroupValueContext(__scopeToggleGroup), context = useToggleGroupContext(__scopeToggleGroup), pressed = valueContext.value.includes(props.value), disabled = context.disabled || props.disabled || !1, ref = React.useRef(null), groupItemProps = useGroupItem({ disabled }), size = props.size ?? context.size, sizeProps = props.unstyled ? {} : {
|
|
32
23
|
width: void 0,
|
|
33
24
|
height: void 0,
|
|
34
25
|
padding: getVariableValue(size) * 0.6
|
|
@@ -37,7 +28,7 @@ const TOGGLE_GROUP_NAME = "ToggleGroup", [createToggleGroupContext, createToggle
|
|
|
37
28
|
const iconSize = (typeof size == "number" ? size * 0.7 : getFontSize(size)) * 1.2, theme = useTheme(), getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color }), children = React.Children.toArray(props.children).map((child) => props.disablePassStyles || !React.isValidElement(child) ? child : getThemedIcon(child)), commonProps = { pressed, disabled, ...sizeProps, ...props, children };
|
|
38
29
|
return <ToggleGroupItemProvider scope={__scopeToggleGroup}>{context.rovingFocus ? <RovingFocusGroup.Item
|
|
39
30
|
asChild="except-style"
|
|
40
|
-
{
|
|
31
|
+
__scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
41
32
|
focusable={!disabled}
|
|
42
33
|
active={pressed}
|
|
43
34
|
><ToggleFrame
|
|
@@ -46,6 +37,7 @@ const TOGGLE_GROUP_NAME = "ToggleGroup", [createToggleGroupContext, createToggle
|
|
|
46
37
|
disabled={disabled}
|
|
47
38
|
ref={ref}
|
|
48
39
|
><ToggleGroupItemImpl
|
|
40
|
+
__scopeToggleGroup={__scopeToggleGroup}
|
|
49
41
|
{...commonProps}
|
|
50
42
|
ref={forwardedRef}
|
|
51
43
|
{...groupItemProps}
|
|
@@ -54,7 +46,11 @@ const TOGGLE_GROUP_NAME = "ToggleGroup", [createToggleGroupContext, createToggle
|
|
|
54
46
|
focusable={!disabled}
|
|
55
47
|
disabled={disabled}
|
|
56
48
|
ref={ref}
|
|
57
|
-
><ToggleGroupItemImpl
|
|
49
|
+
><ToggleGroupItemImpl
|
|
50
|
+
__scopeToggleGroup={__scopeToggleGroup}
|
|
51
|
+
{...commonProps}
|
|
52
|
+
ref={forwardedRef}
|
|
53
|
+
/></ToggleFrame>}</ToggleGroupItemProvider>;
|
|
58
54
|
}
|
|
59
55
|
)
|
|
60
56
|
);
|
|
@@ -62,10 +58,7 @@ ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
|
|
|
62
58
|
const ToggleGroupItemImpl = ToggleFrame.extractable(
|
|
63
59
|
React.forwardRef(
|
|
64
60
|
(props, forwardedRef) => {
|
|
65
|
-
const { __scopeToggleGroup, value, ...itemProps } = props, valueContext = useToggleGroupValueContext(
|
|
66
|
-
TOGGLE_GROUP_ITEM_NAME,
|
|
67
|
-
__scopeToggleGroup
|
|
68
|
-
), singleProps = {
|
|
61
|
+
const { __scopeToggleGroup, value, ...itemProps } = props, valueContext = useToggleGroupValueContext(__scopeToggleGroup), singleProps = {
|
|
69
62
|
"aria-pressed": void 0
|
|
70
63
|
}, typeProps = valueContext.type === "single" ? singleProps : void 0;
|
|
71
64
|
return <Toggle
|
|
@@ -78,33 +71,38 @@ const ToggleGroupItemImpl = ToggleFrame.extractable(
|
|
|
78
71
|
/>;
|
|
79
72
|
}
|
|
80
73
|
)
|
|
81
|
-
),
|
|
82
|
-
React.forwardRef(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
if (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
74
|
+
), ToggleGroup = withStaticProperties(
|
|
75
|
+
React.forwardRef(
|
|
76
|
+
(props, forwardedRef) => {
|
|
77
|
+
const { type, ...toggleGroupProps } = props;
|
|
78
|
+
if (isWeb || React.useEffect(() => {
|
|
79
|
+
if (props.id)
|
|
80
|
+
return registerFocusable(props.id, {
|
|
81
|
+
// TODO: would be nice to focus on the first child later - could be done with reforest
|
|
82
|
+
// for now leaving it empty
|
|
83
|
+
focus: () => {
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
}, [props.id]), type === "single") {
|
|
87
|
+
const singleProps = toggleGroupProps;
|
|
88
|
+
return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />;
|
|
89
|
+
}
|
|
90
|
+
if (type === "multiple") {
|
|
91
|
+
const multipleProps = toggleGroupProps;
|
|
92
|
+
return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />;
|
|
93
|
+
}
|
|
94
|
+
throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
|
|
99
95
|
}
|
|
100
|
-
|
|
101
|
-
}),
|
|
96
|
+
),
|
|
102
97
|
{
|
|
103
98
|
Item: ToggleGroupItem
|
|
104
99
|
}
|
|
105
100
|
);
|
|
106
101
|
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
107
|
-
const
|
|
102
|
+
const {
|
|
103
|
+
Provider: ToggleGroupValueProvider,
|
|
104
|
+
useStyledContext: useToggleGroupValueContext
|
|
105
|
+
} = createStyledContext(), ToggleGroupImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
108
106
|
const {
|
|
109
107
|
value: valueProp,
|
|
110
108
|
defaultValue,
|
|
@@ -156,7 +154,7 @@ const [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroup
|
|
|
156
154
|
><ToggleGroupImpl {...toggleGroupMultipleProps} ref={forwardedRef} /></ToggleGroupValueProvider>;
|
|
157
155
|
});
|
|
158
156
|
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
159
|
-
const
|
|
157
|
+
const ToggleGroupImplElementFrame = styled(Group, {
|
|
160
158
|
name: TOGGLE_GROUP_NAME,
|
|
161
159
|
variants: {
|
|
162
160
|
unstyled: {
|
|
@@ -192,7 +190,7 @@ const [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOG
|
|
|
192
190
|
size: sizeProp = "$true",
|
|
193
191
|
sizeAdjust = 0,
|
|
194
192
|
...toggleGroupProps
|
|
195
|
-
} = props,
|
|
193
|
+
} = props, direction = useDirection(dir), commonProps = {
|
|
196
194
|
role: "group",
|
|
197
195
|
dir: direction,
|
|
198
196
|
...toggleGroupProps
|
|
@@ -208,7 +206,7 @@ const [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOG
|
|
|
208
206
|
size={size}
|
|
209
207
|
>{rovingFocus ? <RovingFocusGroup
|
|
210
208
|
asChild="except-style"
|
|
211
|
-
{
|
|
209
|
+
__scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
212
210
|
orientation={orientation}
|
|
213
211
|
dir={direction}
|
|
214
212
|
loop={loop}
|
|
@@ -232,7 +230,6 @@ const [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOG
|
|
|
232
230
|
)
|
|
233
231
|
);
|
|
234
232
|
export {
|
|
235
|
-
ToggleGroup
|
|
236
|
-
createToggleGroupScope
|
|
233
|
+
ToggleGroup
|
|
237
234
|
};
|
|
238
235
|
//# sourceMappingURL=ToggleGroup.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroup.tsx"],
|
|
4
|
-
"mappings": "AAAA,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["value"]
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/toggle-group",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.71.0",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -31,23 +31,23 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@tamagui/create-context": "1.
|
|
35
|
-
"@tamagui/focusable": "1.
|
|
36
|
-
"@tamagui/font-size": "1.
|
|
37
|
-
"@tamagui/get-token": "1.
|
|
38
|
-
"@tamagui/group": "1.
|
|
39
|
-
"@tamagui/helpers-tamagui": "1.
|
|
40
|
-
"@tamagui/roving-focus": "1.
|
|
41
|
-
"@tamagui/stacks": "1.
|
|
42
|
-
"@tamagui/use-controllable-state": "1.
|
|
43
|
-
"@tamagui/use-direction": "1.
|
|
44
|
-
"@tamagui/web": "1.
|
|
34
|
+
"@tamagui/create-context": "1.71.0",
|
|
35
|
+
"@tamagui/focusable": "1.71.0",
|
|
36
|
+
"@tamagui/font-size": "1.71.0",
|
|
37
|
+
"@tamagui/get-token": "1.71.0",
|
|
38
|
+
"@tamagui/group": "1.71.0",
|
|
39
|
+
"@tamagui/helpers-tamagui": "1.71.0",
|
|
40
|
+
"@tamagui/roving-focus": "1.71.0",
|
|
41
|
+
"@tamagui/stacks": "1.71.0",
|
|
42
|
+
"@tamagui/use-controllable-state": "1.71.0",
|
|
43
|
+
"@tamagui/use-direction": "1.71.0",
|
|
44
|
+
"@tamagui/web": "1.71.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": "*"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@tamagui/build": "1.
|
|
50
|
+
"@tamagui/build": "1.71.0",
|
|
51
51
|
"react": "^18.2.0"
|
|
52
52
|
},
|
|
53
53
|
"publishConfig": {
|
package/src/Toggle.tsx
CHANGED
|
@@ -98,34 +98,34 @@ const Toggle = ToggleFrame.extractable(
|
|
|
98
98
|
})
|
|
99
99
|
|
|
100
100
|
return (
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
101
|
+
<ToggleFrame
|
|
102
|
+
theme={pressed ? 'active' : null}
|
|
103
|
+
themeShallow
|
|
104
|
+
active={!props.unstyled ? pressed : undefined}
|
|
105
|
+
aria-pressed={pressed}
|
|
106
|
+
data-state={pressed ? 'on' : 'off'}
|
|
107
|
+
data-disabled={props.disabled ? '' : undefined}
|
|
108
|
+
{...buttonProps}
|
|
109
|
+
ref={forwardedRef}
|
|
110
|
+
onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {
|
|
111
|
+
if (!props.disabled) {
|
|
112
|
+
setPressed(!pressed)
|
|
113
|
+
}
|
|
114
|
+
})}
|
|
115
|
+
// caught by onPress - no need for this
|
|
116
|
+
// {...(isWeb && {
|
|
117
|
+
// onKeyDown: composeEventHandlers(
|
|
118
|
+
// (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,
|
|
119
|
+
// (event) => {
|
|
120
|
+
// if ([' ', 'Enter'].includes(event.key)) {
|
|
121
|
+
// if (!props.disabled) {
|
|
122
|
+
// setPressed(!pressed)
|
|
123
|
+
// }
|
|
124
|
+
// }
|
|
125
|
+
// }
|
|
126
|
+
// ),
|
|
127
|
+
// })}
|
|
128
|
+
/>
|
|
129
129
|
)
|
|
130
130
|
})
|
|
131
131
|
)
|
package/src/ToggleGroup.tsx
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { Scope, createContextScope } from '@tamagui/create-context'
|
|
2
1
|
import { registerFocusable } from '@tamagui/focusable'
|
|
3
2
|
import { getFontSize } from '@tamagui/font-size'
|
|
4
3
|
import { getSize } from '@tamagui/get-token'
|
|
5
4
|
import { Group, GroupProps, useGroupItem } from '@tamagui/group'
|
|
6
5
|
import { useGetThemedIcon } from '@tamagui/helpers-tamagui'
|
|
7
|
-
import { RovingFocusGroup
|
|
6
|
+
import { RovingFocusGroup } from '@tamagui/roving-focus'
|
|
8
7
|
import { useControllableState } from '@tamagui/use-controllable-state'
|
|
9
8
|
import { useDirection } from '@tamagui/use-direction'
|
|
10
9
|
import {
|
|
11
10
|
FontSizeTokens,
|
|
12
11
|
GetProps,
|
|
13
12
|
SizeTokens,
|
|
13
|
+
createStyledContext,
|
|
14
14
|
getVariableValue,
|
|
15
15
|
isWeb,
|
|
16
16
|
styled,
|
|
@@ -22,23 +22,21 @@ import React from 'react'
|
|
|
22
22
|
import { Toggle, ToggleFrame, ToggleProps } from './Toggle'
|
|
23
23
|
|
|
24
24
|
const TOGGLE_GROUP_NAME = 'ToggleGroup'
|
|
25
|
-
const [createToggleGroupContext, createToggleGroupScope] = createContextScope(
|
|
26
|
-
TOGGLE_GROUP_NAME,
|
|
27
|
-
[createRovingFocusGroupScope]
|
|
28
|
-
)
|
|
29
25
|
/* -------------------------------------------------------------------------------------------------
|
|
30
26
|
* ToggleGroupItem
|
|
31
27
|
* -----------------------------------------------------------------------------------------------*/
|
|
32
28
|
|
|
33
29
|
const TOGGLE_GROUP_ITEM_NAME = 'ToggleGroupItem'
|
|
34
30
|
|
|
31
|
+
const TOGGLE_GROUP_CONTEXT = 'ToggleGroup'
|
|
32
|
+
|
|
35
33
|
type ToggleGroupItemContextValue = { disabled?: boolean }
|
|
36
34
|
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
const { Provider: ToggleGroupItemProvider, useStyledContext: useToggleGroupItemContext } =
|
|
36
|
+
createStyledContext<ToggleGroupItemContextValue>()
|
|
37
|
+
|
|
38
|
+
const { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } =
|
|
39
|
+
createStyledContext<ToggleGroupContextValue>()
|
|
42
40
|
|
|
43
41
|
type ToggleGroupItemElement = ToggleGroupItemImplElement
|
|
44
42
|
|
|
@@ -55,16 +53,9 @@ type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
|
|
|
55
53
|
const ToggleGroupItem = ToggleFrame.extractable(
|
|
56
54
|
React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(
|
|
57
55
|
(props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {
|
|
58
|
-
const
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
)
|
|
62
|
-
const context = useToggleGroupContext(
|
|
63
|
-
TOGGLE_GROUP_ITEM_NAME,
|
|
64
|
-
props.__scopeToggleGroup
|
|
65
|
-
)
|
|
66
|
-
const __scopeToggleGroup = props.__scopeToggleGroup
|
|
67
|
-
const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup)
|
|
56
|
+
const { __scopeToggleGroup, ...rest } = props
|
|
57
|
+
const valueContext = useToggleGroupValueContext(__scopeToggleGroup)
|
|
58
|
+
const context = useToggleGroupContext(__scopeToggleGroup)
|
|
68
59
|
const pressed = valueContext.value.includes(props.value)
|
|
69
60
|
const disabled = context.disabled || props.disabled || false
|
|
70
61
|
const ref = React.useRef<HTMLDivElement>(null)
|
|
@@ -109,7 +100,7 @@ const ToggleGroupItem = ToggleFrame.extractable(
|
|
|
109
100
|
{context.rovingFocus ? (
|
|
110
101
|
<RovingFocusGroup.Item
|
|
111
102
|
asChild="except-style"
|
|
112
|
-
{
|
|
103
|
+
__scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
113
104
|
focusable={!disabled}
|
|
114
105
|
active={pressed}
|
|
115
106
|
>
|
|
@@ -120,6 +111,7 @@ const ToggleGroupItem = ToggleFrame.extractable(
|
|
|
120
111
|
ref={ref}
|
|
121
112
|
>
|
|
122
113
|
<ToggleGroupItemImpl
|
|
114
|
+
__scopeToggleGroup={__scopeToggleGroup}
|
|
123
115
|
{...commonProps}
|
|
124
116
|
ref={forwardedRef}
|
|
125
117
|
{...groupItemProps}
|
|
@@ -133,7 +125,11 @@ const ToggleGroupItem = ToggleFrame.extractable(
|
|
|
133
125
|
disabled={disabled}
|
|
134
126
|
ref={ref}
|
|
135
127
|
>
|
|
136
|
-
<ToggleGroupItemImpl
|
|
128
|
+
<ToggleGroupItemImpl
|
|
129
|
+
__scopeToggleGroup={__scopeToggleGroup}
|
|
130
|
+
{...commonProps}
|
|
131
|
+
ref={forwardedRef}
|
|
132
|
+
/>
|
|
137
133
|
</ToggleFrame>
|
|
138
134
|
)}
|
|
139
135
|
</ToggleGroupItemProvider>
|
|
@@ -158,13 +154,10 @@ type ToggleGroupItemImplProps = Omit<
|
|
|
158
154
|
}
|
|
159
155
|
|
|
160
156
|
const ToggleGroupItemImpl = ToggleFrame.extractable(
|
|
161
|
-
React.forwardRef<ToggleGroupItemImplElement, ToggleGroupItemImplProps
|
|
157
|
+
React.forwardRef<ToggleGroupItemImplElement, ScopedProps<ToggleGroupItemImplProps>>(
|
|
162
158
|
(props: ScopedProps<ToggleGroupItemImplProps>, forwardedRef) => {
|
|
163
159
|
const { __scopeToggleGroup, value, ...itemProps } = props
|
|
164
|
-
const valueContext = useToggleGroupValueContext(
|
|
165
|
-
TOGGLE_GROUP_ITEM_NAME,
|
|
166
|
-
__scopeToggleGroup
|
|
167
|
-
)
|
|
160
|
+
const valueContext = useToggleGroupValueContext(__scopeToggleGroup)
|
|
168
161
|
const singleProps = {
|
|
169
162
|
'aria-pressed': undefined,
|
|
170
163
|
}
|
|
@@ -194,9 +187,7 @@ const ToggleGroupItemImpl = ToggleFrame.extractable(
|
|
|
194
187
|
* ToggleGroup
|
|
195
188
|
* -----------------------------------------------------------------------------------------------*/
|
|
196
189
|
|
|
197
|
-
type ScopedProps<P> = P & { __scopeToggleGroup?:
|
|
198
|
-
|
|
199
|
-
const useRovingFocusGroupScope = createRovingFocusGroupScope()
|
|
190
|
+
type ScopedProps<P> = P & { __scopeToggleGroup?: string }
|
|
200
191
|
|
|
201
192
|
type ToggleGroupElement = ToggleGroupImplSingleElement | ToggleGroupImplMultipleElement
|
|
202
193
|
interface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {
|
|
@@ -209,33 +200,35 @@ interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
|
|
|
209
200
|
type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps
|
|
210
201
|
|
|
211
202
|
const ToggleGroup = withStaticProperties(
|
|
212
|
-
React.forwardRef<ToggleGroupElement, ToggleGroupProps
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
203
|
+
React.forwardRef<ToggleGroupElement, ScopedProps<ToggleGroupProps>>(
|
|
204
|
+
(props, forwardedRef) => {
|
|
205
|
+
const { type, ...toggleGroupProps } = props
|
|
206
|
+
|
|
207
|
+
if (!isWeb) {
|
|
208
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
209
|
+
React.useEffect(() => {
|
|
210
|
+
if (!props.id) return
|
|
211
|
+
return registerFocusable(props.id, {
|
|
212
|
+
// TODO: would be nice to focus on the first child later - could be done with reforest
|
|
213
|
+
// for now leaving it empty
|
|
214
|
+
focus: () => {},
|
|
215
|
+
})
|
|
216
|
+
}, [props.id])
|
|
217
|
+
}
|
|
226
218
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
219
|
+
if (type === 'single') {
|
|
220
|
+
const singleProps = toggleGroupProps as ToggleGroupImplSingleProps
|
|
221
|
+
return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />
|
|
222
|
+
}
|
|
231
223
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
224
|
+
if (type === 'multiple') {
|
|
225
|
+
const multipleProps = toggleGroupProps as ToggleGroupImplMultipleProps
|
|
226
|
+
return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />
|
|
227
|
+
}
|
|
236
228
|
|
|
237
|
-
|
|
238
|
-
|
|
229
|
+
throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``)
|
|
230
|
+
}
|
|
231
|
+
),
|
|
239
232
|
{
|
|
240
233
|
Item: ToggleGroupItem,
|
|
241
234
|
}
|
|
@@ -253,8 +246,10 @@ type ToggleGroupValueContextValue = {
|
|
|
253
246
|
onItemDeactivate(value: string): void
|
|
254
247
|
}
|
|
255
248
|
|
|
256
|
-
const
|
|
257
|
-
|
|
249
|
+
const {
|
|
250
|
+
Provider: ToggleGroupValueProvider,
|
|
251
|
+
useStyledContext: useToggleGroupValueContext,
|
|
252
|
+
} = createStyledContext<ToggleGroupValueContextValue>()
|
|
258
253
|
|
|
259
254
|
type ToggleGroupImplSingleElement = ToggleGroupImplElement
|
|
260
255
|
interface ToggleGroupImplSingleProps extends ToggleGroupImplProps {
|
|
@@ -279,7 +274,7 @@ interface ToggleGroupImplSingleProps extends ToggleGroupImplProps {
|
|
|
279
274
|
|
|
280
275
|
const ToggleGroupImplSingle = React.forwardRef<
|
|
281
276
|
ToggleGroupImplSingleElement,
|
|
282
|
-
ToggleGroupImplSingleProps
|
|
277
|
+
ScopedProps<ToggleGroupImplSingleProps>
|
|
283
278
|
>((props: ScopedProps<ToggleGroupImplSingleProps>, forwardedRef) => {
|
|
284
279
|
const {
|
|
285
280
|
value: valueProp,
|
|
@@ -381,9 +376,6 @@ type ToggleGroupContextValue = {
|
|
|
381
376
|
size: SizeTokens
|
|
382
377
|
}
|
|
383
378
|
|
|
384
|
-
const [ToggleGroupContext, useToggleGroupContext] =
|
|
385
|
-
createToggleGroupContext<ToggleGroupContextValue>(TOGGLE_GROUP_NAME)
|
|
386
|
-
|
|
387
379
|
type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>
|
|
388
380
|
type TamaguiElement = HTMLElement
|
|
389
381
|
type ToggleGroupImplElement = TamaguiElement
|
|
@@ -438,7 +430,6 @@ const ToggleGroupImpl = ToggleGroupImplElementFrame.extractable(
|
|
|
438
430
|
sizeAdjust = 0,
|
|
439
431
|
...toggleGroupProps
|
|
440
432
|
} = props
|
|
441
|
-
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup)
|
|
442
433
|
const direction = useDirection(dir)
|
|
443
434
|
const commonProps: ToggleGroupImplProps = {
|
|
444
435
|
role: 'group',
|
|
@@ -462,7 +453,7 @@ const ToggleGroupImpl = ToggleGroupImplElementFrame.extractable(
|
|
|
462
453
|
{rovingFocus ? (
|
|
463
454
|
<RovingFocusGroup
|
|
464
455
|
asChild="except-style"
|
|
465
|
-
{
|
|
456
|
+
__scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
466
457
|
orientation={orientation}
|
|
467
458
|
dir={direction}
|
|
468
459
|
loop={loop}
|
|
@@ -493,7 +484,7 @@ const ToggleGroupImpl = ToggleGroupImplElementFrame.extractable(
|
|
|
493
484
|
)
|
|
494
485
|
)
|
|
495
486
|
|
|
496
|
-
export { ToggleGroup
|
|
487
|
+
export { ToggleGroup }
|
|
497
488
|
export type {
|
|
498
489
|
ToggleGroupItemProps,
|
|
499
490
|
ToggleGroupMultipleProps,
|