@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.
@@ -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, createRovingFocusGroupScope } from "@tamagui/roving-focus";
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", [createToggleGroupContext, createToggleGroupScope] = createContextScope(
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
- {...rovingFocusGroupScope}
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 {...commonProps} ref={forwardedRef} /></ToggleFrame>}</ToggleGroupItemProvider>;
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
- ), useRovingFocusGroupScope = createRovingFocusGroupScope(), ToggleGroup = withStaticProperties(
82
- React.forwardRef((props, forwardedRef) => {
83
- const { type, ...toggleGroupProps } = props;
84
- if (isWeb || React.useEffect(() => {
85
- if (props.id)
86
- return registerFocusable(props.id, {
87
- // TODO: would be nice to focus on the first child later - could be done with reforest
88
- // for now leaving it empty
89
- focus: () => {
90
- }
91
- });
92
- }, [props.id]), type === "single") {
93
- const singleProps = toggleGroupProps;
94
- return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />;
95
- }
96
- if (type === "multiple") {
97
- const multipleProps = toggleGroupProps;
98
- return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />;
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
- throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
101
- }),
96
+ ),
102
97
  {
103
98
  Item: ToggleGroupItem
104
99
  }
105
100
  );
106
101
  ToggleGroup.displayName = TOGGLE_GROUP_NAME;
107
- const [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME), ToggleGroupImplSingle = React.forwardRef((props, forwardedRef) => {
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 [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME), ToggleGroupImplElementFrame = styled(Group, {
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, rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup), direction = useDirection(dir), commonProps = {
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
- {...rovingFocusGroupScope}
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": "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",
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.69.3",
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.69.3",
35
- "@tamagui/focusable": "1.69.3",
36
- "@tamagui/font-size": "1.69.3",
37
- "@tamagui/get-token": "1.69.3",
38
- "@tamagui/group": "1.69.3",
39
- "@tamagui/helpers-tamagui": "1.69.3",
40
- "@tamagui/roving-focus": "1.69.3",
41
- "@tamagui/stacks": "1.69.3",
42
- "@tamagui/use-controllable-state": "1.69.3",
43
- "@tamagui/use-direction": "1.69.3",
44
- "@tamagui/web": "1.69.3"
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.69.3",
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
- <Theme name={pressed ? 'active' : null}>
102
- <ToggleFrame
103
- active={!props.unstyled ? pressed : undefined}
104
- aria-pressed={pressed}
105
- data-state={pressed ? 'on' : 'off'}
106
- data-disabled={props.disabled ? '' : undefined}
107
- {...buttonProps}
108
- ref={forwardedRef}
109
- onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {
110
- if (!props.disabled) {
111
- setPressed(!pressed)
112
- }
113
- })}
114
- // caught by onPress - no need for this
115
- // {...(isWeb && {
116
- // onKeyDown: composeEventHandlers(
117
- // (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,
118
- // (event) => {
119
- // if ([' ', 'Enter'].includes(event.key)) {
120
- // if (!props.disabled) {
121
- // setPressed(!pressed)
122
- // }
123
- // }
124
- // }
125
- // ),
126
- // })}
127
- />
128
- </Theme>
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
  )
@@ -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, createRovingFocusGroupScope } from '@tamagui/roving-focus'
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 [createToggleGroupItemContext, createToggleGroupItemScope] =
38
- createContextScope(TOGGLE_GROUP_ITEM_NAME)
39
- const [ToggleGroupItemProvider, useToggleGroupItemContext] =
40
- createToggleGroupContext<ToggleGroupItemContextValue>(TOGGLE_GROUP_NAME)
41
- const useToggleGroupItemScope = createToggleGroupItemScope()
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 valueContext = useToggleGroupValueContext(
59
- TOGGLE_GROUP_ITEM_NAME,
60
- props.__scopeToggleGroup
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
- {...rovingFocusGroupScope}
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 {...commonProps} ref={forwardedRef} />
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?: Scope }
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>((props, forwardedRef) => {
213
- const { type, ...toggleGroupProps } = props
214
-
215
- if (!isWeb) {
216
- // eslint-disable-next-line react-hooks/rules-of-hooks
217
- React.useEffect(() => {
218
- if (!props.id) return
219
- return registerFocusable(props.id, {
220
- // TODO: would be nice to focus on the first child later - could be done with reforest
221
- // for now leaving it empty
222
- focus: () => {},
223
- })
224
- }, [props.id])
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
- if (type === 'single') {
228
- const singleProps = toggleGroupProps as ToggleGroupImplSingleProps
229
- return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />
230
- }
219
+ if (type === 'single') {
220
+ const singleProps = toggleGroupProps as ToggleGroupImplSingleProps
221
+ return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />
222
+ }
231
223
 
232
- if (type === 'multiple') {
233
- const multipleProps = toggleGroupProps as ToggleGroupImplMultipleProps
234
- return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />
235
- }
224
+ if (type === 'multiple') {
225
+ const multipleProps = toggleGroupProps as ToggleGroupImplMultipleProps
226
+ return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />
227
+ }
236
228
 
237
- throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``)
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 [ToggleGroupValueProvider, useToggleGroupValueContext] =
257
- createToggleGroupContext<ToggleGroupValueContextValue>(TOGGLE_GROUP_NAME)
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
- {...rovingFocusGroupScope}
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, createToggleGroupScope }
487
+ export { ToggleGroup }
497
488
  export type {
498
489
  ToggleGroupItemProps,
499
490
  ToggleGroupMultipleProps,