@tamagui/toggle-group 1.75.0 → 1.75.1
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 +31 -32
- package/dist/cjs/Toggle.js.map +1 -1
- package/dist/cjs/Toggle.native.js +31 -32
- package/dist/cjs/Toggle.native.js.map +1 -1
- package/dist/cjs/ToggleGroup.js +29 -57
- package/dist/cjs/ToggleGroup.js.map +1 -1
- package/dist/cjs/ToggleGroup.native.js +29 -57
- package/dist/cjs/ToggleGroup.native.js.map +1 -1
- package/dist/esm/Toggle.js +31 -32
- package/dist/esm/Toggle.js.map +1 -1
- package/dist/esm/Toggle.native.js +31 -32
- package/dist/esm/Toggle.native.js.map +1 -1
- package/dist/esm/ToggleGroup.js +29 -57
- package/dist/esm/ToggleGroup.js.map +1 -1
- package/dist/esm/ToggleGroup.native.js +29 -57
- package/dist/esm/ToggleGroup.native.js.map +1 -1
- package/dist/jsx/Toggle.js +29 -30
- package/dist/jsx/Toggle.js.map +1 -1
- package/dist/jsx/Toggle.native.js +29 -30
- package/dist/jsx/Toggle.native.js.map +1 -1
- package/dist/jsx/ToggleGroup.js +22 -39
- package/dist/jsx/ToggleGroup.js.map +1 -1
- package/dist/jsx/ToggleGroup.native.js +22 -39
- package/dist/jsx/ToggleGroup.native.js.map +1 -1
- package/package.json +13 -13
- package/src/Toggle.tsx +47 -56
- package/src/ToggleGroup.tsx +43 -57
- package/types/Toggle.d.ts +7 -5
- package/types/Toggle.d.ts.map +1 -1
- package/types/ToggleGroup.d.ts +0 -12
- package/types/ToggleGroup.d.ts.map +1 -1
package/dist/jsx/ToggleGroup.js
CHANGED
|
@@ -19,57 +19,40 @@ import { Toggle, ToggleFrame } from "./Toggle";
|
|
|
19
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(
|
|
20
20
|
React.forwardRef(
|
|
21
21
|
(props, forwardedRef) => {
|
|
22
|
-
const
|
|
22
|
+
const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup), context = useToggleGroupContext(props.__scopeToggleGroup), pressed = valueContext?.value.includes(props.value), disabled = context.disabled || props.disabled || !1, groupItemProps = useGroupItem({ disabled }), size = props.size ?? context.size, sizeProps = props.unstyled ? {} : {
|
|
23
23
|
width: void 0,
|
|
24
24
|
height: void 0,
|
|
25
25
|
padding: getVariableValue(size) * 0.6
|
|
26
|
-
}, 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 }
|
|
27
|
-
return <ToggleGroupItemProvider scope={__scopeToggleGroup}>{context.rovingFocus ? <RovingFocusGroup.Item
|
|
28
|
-
asChild="except-style"
|
|
29
|
-
__scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
30
|
-
focusable={!disabled}
|
|
31
|
-
active={pressed}
|
|
32
|
-
><ToggleFrame
|
|
33
|
-
asChild="except-style"
|
|
34
|
-
focusable={!disabled}
|
|
35
|
-
disabled={disabled}
|
|
36
|
-
ref={ref}
|
|
37
|
-
><ToggleGroupItemImpl
|
|
38
|
-
__scopeToggleGroup={__scopeToggleGroup}
|
|
26
|
+
}, 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 }, inner = <ToggleGroupItemImpl
|
|
39
27
|
{...commonProps}
|
|
40
28
|
ref={forwardedRef}
|
|
29
|
+
focusable={!disabled}
|
|
30
|
+
disabled={disabled}
|
|
41
31
|
{...groupItemProps}
|
|
42
|
-
|
|
32
|
+
/>;
|
|
33
|
+
return <ToggleGroupItemProvider scope={props.__scopeToggleGroup}>{context.rovingFocus ? <RovingFocusGroup.Item
|
|
43
34
|
asChild="except-style"
|
|
35
|
+
__scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
44
36
|
focusable={!disabled}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
><ToggleGroupItemImpl
|
|
48
|
-
__scopeToggleGroup={__scopeToggleGroup}
|
|
49
|
-
{...commonProps}
|
|
50
|
-
ref={forwardedRef}
|
|
51
|
-
/></ToggleFrame>}</ToggleGroupItemProvider>;
|
|
37
|
+
active={pressed}
|
|
38
|
+
>{inner}</RovingFocusGroup.Item> : inner}</ToggleGroupItemProvider>;
|
|
52
39
|
}
|
|
53
40
|
)
|
|
54
41
|
);
|
|
55
42
|
ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
|
|
56
|
-
const ToggleGroupItemImpl =
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
/>;
|
|
70
|
-
}
|
|
71
|
-
)
|
|
72
|
-
), ToggleGroup = withStaticProperties(
|
|
43
|
+
const ToggleGroupItemImpl = React.forwardRef((props, forwardedRef) => {
|
|
44
|
+
const { __scopeToggleGroup, value, ...itemProps } = props, valueContext = useToggleGroupValueContext(__scopeToggleGroup), singleProps = {
|
|
45
|
+
"aria-pressed": void 0
|
|
46
|
+
}, typeProps = valueContext.type === "single" ? singleProps : void 0;
|
|
47
|
+
return <Toggle
|
|
48
|
+
{...typeProps}
|
|
49
|
+
{...itemProps}
|
|
50
|
+
ref={forwardedRef}
|
|
51
|
+
onPressedChange={(pressed) => {
|
|
52
|
+
pressed ? valueContext.onItemActivate(value) : valueContext.onItemDeactivate(value);
|
|
53
|
+
}}
|
|
54
|
+
/>;
|
|
55
|
+
}), ToggleGroup = withStaticProperties(
|
|
73
56
|
React.forwardRef(
|
|
74
57
|
(props, forwardedRef) => {
|
|
75
58
|
const { type, ...toggleGroupProps } = props;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroup.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,OAAmB,oBAAoB;AAChD,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,WAAW;AAElB,SAAS,QAAQ,mBAAgC;AAEjD,MAAM,oBAAoB,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["value"]
|
|
6
6
|
}
|
|
@@ -19,57 +19,40 @@ import { Toggle, ToggleFrame } from "./Toggle";
|
|
|
19
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(
|
|
20
20
|
React.forwardRef(
|
|
21
21
|
(props, forwardedRef) => {
|
|
22
|
-
const
|
|
22
|
+
const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup), context = useToggleGroupContext(props.__scopeToggleGroup), pressed = valueContext == null ? void 0 : valueContext.value.includes(props.value), disabled = context.disabled || props.disabled || !1, groupItemProps = useGroupItem({ disabled }), size = props.size ?? context.size, sizeProps = props.unstyled ? {} : {
|
|
23
23
|
width: void 0,
|
|
24
24
|
height: void 0,
|
|
25
25
|
padding: getVariableValue(size) * 0.6
|
|
26
|
-
}, 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 }
|
|
27
|
-
return <ToggleGroupItemProvider scope={__scopeToggleGroup}>{context.rovingFocus ? <RovingFocusGroup.Item
|
|
28
|
-
asChild="except-style"
|
|
29
|
-
__scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
30
|
-
focusable={!disabled}
|
|
31
|
-
active={pressed}
|
|
32
|
-
><ToggleFrame
|
|
33
|
-
asChild="except-style"
|
|
34
|
-
focusable={!disabled}
|
|
35
|
-
disabled={disabled}
|
|
36
|
-
ref={ref}
|
|
37
|
-
><ToggleGroupItemImpl
|
|
38
|
-
__scopeToggleGroup={__scopeToggleGroup}
|
|
26
|
+
}, 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 }, inner = <ToggleGroupItemImpl
|
|
39
27
|
{...commonProps}
|
|
40
28
|
ref={forwardedRef}
|
|
29
|
+
focusable={!disabled}
|
|
30
|
+
disabled={disabled}
|
|
41
31
|
{...groupItemProps}
|
|
42
|
-
|
|
32
|
+
/>;
|
|
33
|
+
return <ToggleGroupItemProvider scope={props.__scopeToggleGroup}>{context.rovingFocus ? <RovingFocusGroup.Item
|
|
43
34
|
asChild="except-style"
|
|
35
|
+
__scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
44
36
|
focusable={!disabled}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
><ToggleGroupItemImpl
|
|
48
|
-
__scopeToggleGroup={__scopeToggleGroup}
|
|
49
|
-
{...commonProps}
|
|
50
|
-
ref={forwardedRef}
|
|
51
|
-
/></ToggleFrame>}</ToggleGroupItemProvider>;
|
|
37
|
+
active={pressed}
|
|
38
|
+
>{inner}</RovingFocusGroup.Item> : inner}</ToggleGroupItemProvider>;
|
|
52
39
|
}
|
|
53
40
|
)
|
|
54
41
|
);
|
|
55
42
|
ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
|
|
56
|
-
const ToggleGroupItemImpl =
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
/>;
|
|
70
|
-
}
|
|
71
|
-
)
|
|
72
|
-
), ToggleGroup = withStaticProperties(
|
|
43
|
+
const ToggleGroupItemImpl = React.forwardRef((props, forwardedRef) => {
|
|
44
|
+
const { __scopeToggleGroup, value, ...itemProps } = props, valueContext = useToggleGroupValueContext(__scopeToggleGroup), singleProps = {
|
|
45
|
+
"aria-pressed": void 0
|
|
46
|
+
}, typeProps = valueContext.type === "single" ? singleProps : void 0;
|
|
47
|
+
return <Toggle
|
|
48
|
+
{...typeProps}
|
|
49
|
+
{...itemProps}
|
|
50
|
+
ref={forwardedRef}
|
|
51
|
+
onPressedChange={(pressed) => {
|
|
52
|
+
pressed ? valueContext.onItemActivate(value) : valueContext.onItemDeactivate(value);
|
|
53
|
+
}}
|
|
54
|
+
/>;
|
|
55
|
+
}), ToggleGroup = withStaticProperties(
|
|
73
56
|
React.forwardRef(
|
|
74
57
|
(props, forwardedRef) => {
|
|
75
58
|
const { type, ...toggleGroupProps } = props;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroup.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,OAAmB,oBAAoB;AAChD,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,WAAW;AAElB,SAAS,QAAQ,mBAAgC;AAEjD,MAAM,oBAAoB,
|
|
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.75.
|
|
3
|
+
"version": "1.75.1",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -31,23 +31,23 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@tamagui/create-context": "1.75.
|
|
35
|
-
"@tamagui/focusable": "1.75.
|
|
36
|
-
"@tamagui/font-size": "1.75.
|
|
37
|
-
"@tamagui/get-token": "1.75.
|
|
38
|
-
"@tamagui/group": "1.75.
|
|
39
|
-
"@tamagui/helpers-tamagui": "1.75.
|
|
40
|
-
"@tamagui/roving-focus": "1.75.
|
|
41
|
-
"@tamagui/stacks": "1.75.
|
|
42
|
-
"@tamagui/use-controllable-state": "1.75.
|
|
43
|
-
"@tamagui/use-direction": "1.75.
|
|
44
|
-
"@tamagui/web": "1.75.
|
|
34
|
+
"@tamagui/create-context": "1.75.1",
|
|
35
|
+
"@tamagui/focusable": "1.75.1",
|
|
36
|
+
"@tamagui/font-size": "1.75.1",
|
|
37
|
+
"@tamagui/get-token": "1.75.1",
|
|
38
|
+
"@tamagui/group": "1.75.1",
|
|
39
|
+
"@tamagui/helpers-tamagui": "1.75.1",
|
|
40
|
+
"@tamagui/roving-focus": "1.75.1",
|
|
41
|
+
"@tamagui/stacks": "1.75.1",
|
|
42
|
+
"@tamagui/use-controllable-state": "1.75.1",
|
|
43
|
+
"@tamagui/use-direction": "1.75.1",
|
|
44
|
+
"@tamagui/web": "1.75.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": "*"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@tamagui/build": "1.75.
|
|
50
|
+
"@tamagui/build": "1.75.1",
|
|
51
51
|
"react": "^18.2.0"
|
|
52
52
|
},
|
|
53
53
|
"publishConfig": {
|
package/src/Toggle.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ThemeableStack } from '@tamagui/stacks'
|
|
2
2
|
import { useControllableState } from '@tamagui/use-controllable-state'
|
|
3
|
-
import { GetProps,
|
|
3
|
+
import { GetProps, composeEventHandlers, styled } from '@tamagui/web'
|
|
4
4
|
import * as React from 'react'
|
|
5
5
|
|
|
6
6
|
/* -------------------------------------------------------------------------------------------------
|
|
@@ -11,9 +11,9 @@ const NAME = 'Toggle'
|
|
|
11
11
|
|
|
12
12
|
type TamaguiButtonElement = HTMLButtonElement
|
|
13
13
|
|
|
14
|
-
type ToggleElement = TamaguiButtonElement
|
|
14
|
+
export type ToggleElement = TamaguiButtonElement
|
|
15
15
|
|
|
16
|
-
const ToggleFrame = styled(ThemeableStack, {
|
|
16
|
+
export const ToggleFrame = styled(ThemeableStack, {
|
|
17
17
|
name: NAME,
|
|
18
18
|
tag: 'button',
|
|
19
19
|
|
|
@@ -46,12 +46,14 @@ const ToggleFrame = styled(ThemeableStack, {
|
|
|
46
46
|
active: {
|
|
47
47
|
true: {
|
|
48
48
|
zIndex: 1,
|
|
49
|
+
|
|
49
50
|
hoverStyle: {
|
|
50
51
|
backgroundColor: '$background',
|
|
51
52
|
},
|
|
53
|
+
|
|
52
54
|
focusStyle: {
|
|
53
|
-
borderColor: '$
|
|
54
|
-
backgroundColor: '$
|
|
55
|
+
borderColor: '$borderColor',
|
|
56
|
+
backgroundColor: '$background',
|
|
55
57
|
},
|
|
56
58
|
},
|
|
57
59
|
},
|
|
@@ -67,6 +69,7 @@ const ToggleFrame = styled(ThemeableStack, {
|
|
|
67
69
|
},
|
|
68
70
|
},
|
|
69
71
|
} as const,
|
|
72
|
+
|
|
70
73
|
defaultVariants: {
|
|
71
74
|
unstyled: false,
|
|
72
75
|
},
|
|
@@ -74,7 +77,7 @@ const ToggleFrame = styled(ThemeableStack, {
|
|
|
74
77
|
|
|
75
78
|
type ToggleFrameProps = GetProps<typeof ToggleFrame>
|
|
76
79
|
|
|
77
|
-
type
|
|
80
|
+
type ToggleItemExtraProps = {
|
|
78
81
|
defaultValue?: string
|
|
79
82
|
disabled?: boolean
|
|
80
83
|
pressed?: boolean
|
|
@@ -82,56 +85,44 @@ type ToggleProps = ToggleFrameProps & {
|
|
|
82
85
|
onPressedChange?(pressed: boolean): void
|
|
83
86
|
}
|
|
84
87
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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
|
-
)
|
|
88
|
+
export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps
|
|
89
|
+
|
|
90
|
+
export const Toggle = React.forwardRef<ToggleElement, ToggleProps>(function Toggle(
|
|
91
|
+
props,
|
|
92
|
+
forwardedRef
|
|
93
|
+
) {
|
|
94
|
+
const {
|
|
95
|
+
pressed: pressedProp,
|
|
96
|
+
defaultPressed = false,
|
|
97
|
+
onPressedChange,
|
|
98
|
+
...buttonProps
|
|
99
|
+
} = props
|
|
100
|
+
|
|
101
|
+
const [pressed = false, setPressed] = useControllableState({
|
|
102
|
+
prop: pressedProp,
|
|
103
|
+
onChange: onPressedChange,
|
|
104
|
+
defaultProp: defaultPressed,
|
|
130
105
|
})
|
|
131
|
-
)
|
|
132
|
-
Toggle.displayName = NAME
|
|
133
106
|
|
|
134
|
-
|
|
107
|
+
return (
|
|
108
|
+
<ToggleFrame
|
|
109
|
+
{...(!props.unstyled && {
|
|
110
|
+
theme: pressed ? 'active' : null,
|
|
111
|
+
themeShallow: true,
|
|
112
|
+
})}
|
|
113
|
+
active={!props.unstyled ? pressed : undefined}
|
|
114
|
+
aria-pressed={pressed}
|
|
115
|
+
data-state={pressed ? 'on' : 'off'}
|
|
116
|
+
data-disabled={props.disabled ? '' : undefined}
|
|
117
|
+
{...buttonProps}
|
|
118
|
+
ref={forwardedRef}
|
|
119
|
+
onPress={composeEventHandlers(props.onPress ?? undefined, () => {
|
|
120
|
+
if (!props.disabled) {
|
|
121
|
+
setPressed(!pressed)
|
|
122
|
+
}
|
|
123
|
+
})}
|
|
124
|
+
/>
|
|
125
|
+
)
|
|
126
|
+
})
|
|
135
127
|
|
|
136
|
-
|
|
137
|
-
export type { ToggleProps }
|
|
128
|
+
/* ---------------------------------------------------------------------------------------------- */
|
package/src/ToggleGroup.tsx
CHANGED
|
@@ -22,6 +22,7 @@ import React from 'react'
|
|
|
22
22
|
import { Toggle, ToggleFrame, ToggleProps } from './Toggle'
|
|
23
23
|
|
|
24
24
|
const TOGGLE_GROUP_NAME = 'ToggleGroup'
|
|
25
|
+
|
|
25
26
|
/* -------------------------------------------------------------------------------------------------
|
|
26
27
|
* ToggleGroupItem
|
|
27
28
|
* -----------------------------------------------------------------------------------------------*/
|
|
@@ -53,12 +54,10 @@ type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
|
|
|
53
54
|
const ToggleGroupItem = ToggleFrame.extractable(
|
|
54
55
|
React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(
|
|
55
56
|
(props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {
|
|
56
|
-
const
|
|
57
|
-
const
|
|
58
|
-
const
|
|
59
|
-
const pressed = valueContext.value.includes(props.value)
|
|
57
|
+
const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup)
|
|
58
|
+
const context = useToggleGroupContext(props.__scopeToggleGroup)
|
|
59
|
+
const pressed = valueContext?.value.includes(props.value)
|
|
60
60
|
const disabled = context.disabled || props.disabled || false
|
|
61
|
-
const ref = React.useRef<HTMLDivElement>(null)
|
|
62
61
|
const groupItemProps = useGroupItem({ disabled })
|
|
63
62
|
const size = props.size ?? context.size
|
|
64
63
|
|
|
@@ -87,42 +86,29 @@ const ToggleGroupItem = ToggleFrame.extractable(
|
|
|
87
86
|
|
|
88
87
|
const commonProps = { pressed, disabled, ...sizeProps, ...props, children }
|
|
89
88
|
|
|
89
|
+
const inner = (
|
|
90
|
+
<ToggleGroupItemImpl
|
|
91
|
+
{...commonProps}
|
|
92
|
+
ref={forwardedRef}
|
|
93
|
+
focusable={!disabled}
|
|
94
|
+
disabled={disabled}
|
|
95
|
+
{...groupItemProps}
|
|
96
|
+
/>
|
|
97
|
+
)
|
|
98
|
+
|
|
90
99
|
return (
|
|
91
|
-
<ToggleGroupItemProvider scope={__scopeToggleGroup}>
|
|
100
|
+
<ToggleGroupItemProvider scope={props.__scopeToggleGroup}>
|
|
92
101
|
{context.rovingFocus ? (
|
|
93
102
|
<RovingFocusGroup.Item
|
|
94
103
|
asChild="except-style"
|
|
95
|
-
__scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
104
|
+
__scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
|
|
96
105
|
focusable={!disabled}
|
|
97
106
|
active={pressed}
|
|
98
107
|
>
|
|
99
|
-
|
|
100
|
-
asChild="except-style"
|
|
101
|
-
focusable={!disabled}
|
|
102
|
-
disabled={disabled}
|
|
103
|
-
ref={ref}
|
|
104
|
-
>
|
|
105
|
-
<ToggleGroupItemImpl
|
|
106
|
-
__scopeToggleGroup={__scopeToggleGroup}
|
|
107
|
-
{...commonProps}
|
|
108
|
-
ref={forwardedRef}
|
|
109
|
-
{...groupItemProps}
|
|
110
|
-
/>
|
|
111
|
-
</ToggleFrame>
|
|
108
|
+
{inner}
|
|
112
109
|
</RovingFocusGroup.Item>
|
|
113
110
|
) : (
|
|
114
|
-
|
|
115
|
-
asChild="except-style"
|
|
116
|
-
focusable={!disabled}
|
|
117
|
-
disabled={disabled}
|
|
118
|
-
ref={ref}
|
|
119
|
-
>
|
|
120
|
-
<ToggleGroupItemImpl
|
|
121
|
-
__scopeToggleGroup={__scopeToggleGroup}
|
|
122
|
-
{...commonProps}
|
|
123
|
-
ref={forwardedRef}
|
|
124
|
-
/>
|
|
125
|
-
</ToggleFrame>
|
|
111
|
+
inner
|
|
126
112
|
)}
|
|
127
113
|
</ToggleGroupItemProvider>
|
|
128
114
|
)
|
|
@@ -145,33 +131,33 @@ type ToggleGroupItemImplProps = Omit<
|
|
|
145
131
|
size?: SizeTokens
|
|
146
132
|
}
|
|
147
133
|
|
|
148
|
-
const ToggleGroupItemImpl =
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
const singleProps = {
|
|
154
|
-
'aria-pressed': undefined,
|
|
155
|
-
}
|
|
156
|
-
const typeProps = valueContext.type === 'single' ? singleProps : undefined
|
|
134
|
+
const ToggleGroupItemImpl = React.forwardRef<
|
|
135
|
+
ToggleGroupItemImplElement,
|
|
136
|
+
ScopedProps<ToggleGroupItemImplProps>
|
|
137
|
+
>((props: ScopedProps<ToggleGroupItemImplProps>, forwardedRef) => {
|
|
138
|
+
const { __scopeToggleGroup, value, ...itemProps } = props
|
|
157
139
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
140
|
+
const valueContext = useToggleGroupValueContext(__scopeToggleGroup)
|
|
141
|
+
const singleProps = {
|
|
142
|
+
'aria-pressed': undefined,
|
|
143
|
+
}
|
|
144
|
+
const typeProps = valueContext.type === 'single' ? singleProps : undefined
|
|
145
|
+
|
|
146
|
+
return (
|
|
147
|
+
<Toggle
|
|
148
|
+
{...typeProps}
|
|
149
|
+
{...itemProps}
|
|
150
|
+
ref={forwardedRef}
|
|
151
|
+
onPressedChange={(pressed) => {
|
|
152
|
+
if (pressed) {
|
|
153
|
+
valueContext.onItemActivate(value)
|
|
154
|
+
} else {
|
|
155
|
+
valueContext.onItemDeactivate(value)
|
|
156
|
+
}
|
|
157
|
+
}}
|
|
158
|
+
/>
|
|
173
159
|
)
|
|
174
|
-
)
|
|
160
|
+
})
|
|
175
161
|
|
|
176
162
|
/* -----------------------------------------------------------------------------------------------*/
|
|
177
163
|
|
package/types/Toggle.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { GetProps } from '@tamagui/web';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
|
|
3
|
+
type TamaguiButtonElement = HTMLButtonElement;
|
|
4
|
+
export type ToggleElement = TamaguiButtonElement;
|
|
5
|
+
export declare const ToggleFrame: import("@tamagui/web").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("@tamagui/web").WebOnlyPressEvents & import("@tamagui/web").TamaguiComponentPropsBaseBase & {
|
|
4
6
|
style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
|
|
5
7
|
} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>> & import("@tamagui/web").MediaProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>>> & {
|
|
6
8
|
onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
|
|
@@ -273,14 +275,14 @@ declare const ToggleFrame: import("@tamagui/web").TamaguiComponent<Omit<import("
|
|
|
273
275
|
};
|
|
274
276
|
}>;
|
|
275
277
|
type ToggleFrameProps = GetProps<typeof ToggleFrame>;
|
|
276
|
-
type
|
|
278
|
+
type ToggleItemExtraProps = {
|
|
277
279
|
defaultValue?: string;
|
|
278
280
|
disabled?: boolean;
|
|
279
281
|
pressed?: boolean;
|
|
280
282
|
defaultPressed?: boolean;
|
|
281
283
|
onPressedChange?(pressed: boolean): void;
|
|
282
284
|
};
|
|
283
|
-
|
|
284
|
-
export
|
|
285
|
-
export
|
|
285
|
+
export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps;
|
|
286
|
+
export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
287
|
+
export {};
|
|
286
288
|
//# sourceMappingURL=Toggle.d.ts.map
|
package/types/Toggle.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAgC,MAAM,cAAc,CAAA;AACrE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAA;AAEhD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DtB,CAAA;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAEjE,eAAO,MAAM,MAAM,oGAoCjB,CAAA"}
|
package/types/ToggleGroup.d.ts
CHANGED
|
@@ -98,9 +98,6 @@ declare const ToggleGroupImplElementFrame: import("@tamagui/web").TamaguiCompone
|
|
|
98
98
|
fullscreen?: boolean | undefined;
|
|
99
99
|
circular?: boolean | undefined;
|
|
100
100
|
hoverTheme?: boolean | undefined;
|
|
101
|
-
/**
|
|
102
|
-
* The callback that fires when the value of the toggle group changes.
|
|
103
|
-
*/
|
|
104
101
|
pressTheme?: boolean | undefined;
|
|
105
102
|
focusTheme?: boolean | undefined;
|
|
106
103
|
elevate?: boolean | undefined;
|
|
@@ -252,9 +249,6 @@ declare const ToggleGroupImplElementFrame: import("@tamagui/web").TamaguiCompone
|
|
|
252
249
|
fullscreen?: boolean | undefined;
|
|
253
250
|
circular?: boolean | undefined;
|
|
254
251
|
hoverTheme?: boolean | undefined;
|
|
255
|
-
/**
|
|
256
|
-
* The callback that fires when the value of the toggle group changes.
|
|
257
|
-
*/
|
|
258
252
|
pressTheme?: boolean | undefined;
|
|
259
253
|
focusTheme?: boolean | undefined;
|
|
260
254
|
elevate?: boolean | undefined;
|
|
@@ -406,9 +400,6 @@ declare const ToggleGroupImplElementFrame: import("@tamagui/web").TamaguiCompone
|
|
|
406
400
|
fullscreen?: boolean | undefined;
|
|
407
401
|
circular?: boolean | undefined;
|
|
408
402
|
hoverTheme?: boolean | undefined;
|
|
409
|
-
/**
|
|
410
|
-
* The callback that fires when the value of the toggle group changes.
|
|
411
|
-
*/
|
|
412
403
|
pressTheme?: boolean | undefined;
|
|
413
404
|
focusTheme?: boolean | undefined;
|
|
414
405
|
elevate?: boolean | undefined;
|
|
@@ -560,9 +551,6 @@ declare const ToggleGroupImplElementFrame: import("@tamagui/web").TamaguiCompone
|
|
|
560
551
|
fullscreen?: boolean | undefined;
|
|
561
552
|
circular?: boolean | undefined;
|
|
562
553
|
hoverTheme?: boolean | undefined;
|
|
563
|
-
/**
|
|
564
|
-
* The callback that fires when the value of the toggle group changes.
|
|
565
|
-
*/
|
|
566
554
|
pressTheme?: boolean | undefined;
|
|
567
555
|
focusTheme?: boolean | undefined;
|
|
568
556
|
elevate?: boolean | undefined;
|