@radix-ui/react-toggle-group 1.1.0-rc.1 → 1.1.0-rc.3

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 (5) hide show
  1. package/dist/index.js +194 -185
  2. package/dist/index.js.map +4 -4
  3. package/dist/index.mjs +2 -0
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +8 -8
package/dist/index.js CHANGED
@@ -1,198 +1,207 @@
1
1
  "use strict";
2
- (() => {
3
- var __create = Object.create;
4
- var __defProp = Object.defineProperty;
5
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getProtoOf = Object.getPrototypeOf;
8
- var __hasOwnProp = Object.prototype.hasOwnProperty;
9
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
10
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
11
- }) : x)(function(x) {
12
- if (typeof require !== "undefined") return require.apply(this, arguments);
13
- throw Error('Dynamic require of "' + x + '" is not supported');
14
- });
15
- var __copyProps = (to, from, except, desc) => {
16
- if (from && typeof from === "object" || typeof from === "function") {
17
- for (let key of __getOwnPropNames(from))
18
- if (!__hasOwnProp.call(to, key) && key !== except)
19
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
20
- }
21
- return to;
22
- };
23
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
24
- // If the importer is in node compatibility mode or this is not an ESM
25
- // file that has been converted to a CommonJS file using a Babel-
26
- // compatible transform (i.e. "__esModule" has not been set), then set
27
- // "default" to the CommonJS "module.exports" for node compatibility.
28
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
29
- mod
30
- ));
2
+ "use client";
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
31
30
 
32
- // packages/react/toggle-group/src/ToggleGroup.tsx
33
- var import_react = __toESM(__require("react"));
34
- var import_react_context = __require("@radix-ui/react-context");
35
- var import_react_primitive = __require("@radix-ui/react-primitive");
36
- var RovingFocusGroup = __toESM(__require("@radix-ui/react-roving-focus"));
37
- var import_react_roving_focus = __require("@radix-ui/react-roving-focus");
38
- var import_react_toggle = __require("@radix-ui/react-toggle");
39
- var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
40
- var import_react_direction = __require("@radix-ui/react-direction");
41
- var import_jsx_runtime = __require("react/jsx-runtime");
42
- var TOGGLE_GROUP_NAME = "ToggleGroup";
43
- var [createToggleGroupContext, createToggleGroupScope] = (0, import_react_context.createContextScope)(TOGGLE_GROUP_NAME, [
44
- import_react_roving_focus.createRovingFocusGroupScope
45
- ]);
46
- var useRovingFocusGroupScope = (0, import_react_roving_focus.createRovingFocusGroupScope)();
47
- var ToggleGroup = import_react.default.forwardRef((props, forwardedRef) => {
48
- const { type, ...toggleGroupProps } = props;
49
- if (type === "single") {
50
- const singleProps = toggleGroupProps;
51
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
52
- }
53
- if (type === "multiple") {
54
- const multipleProps = toggleGroupProps;
55
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
31
+ // packages/react/toggle-group/src/index.ts
32
+ var src_exports = {};
33
+ __export(src_exports, {
34
+ Item: () => Item2,
35
+ Root: () => Root2,
36
+ ToggleGroup: () => ToggleGroup,
37
+ ToggleGroupItem: () => ToggleGroupItem,
38
+ createToggleGroupScope: () => createToggleGroupScope
39
+ });
40
+ module.exports = __toCommonJS(src_exports);
41
+
42
+ // packages/react/toggle-group/src/ToggleGroup.tsx
43
+ var import_react = __toESM(require("react"));
44
+ var import_react_context = require("@radix-ui/react-context");
45
+ var import_react_primitive = require("@radix-ui/react-primitive");
46
+ var RovingFocusGroup = __toESM(require("@radix-ui/react-roving-focus"));
47
+ var import_react_roving_focus = require("@radix-ui/react-roving-focus");
48
+ var import_react_toggle = require("@radix-ui/react-toggle");
49
+ var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
50
+ var import_react_direction = require("@radix-ui/react-direction");
51
+ var import_jsx_runtime = require("react/jsx-runtime");
52
+ var TOGGLE_GROUP_NAME = "ToggleGroup";
53
+ var [createToggleGroupContext, createToggleGroupScope] = (0, import_react_context.createContextScope)(TOGGLE_GROUP_NAME, [
54
+ import_react_roving_focus.createRovingFocusGroupScope
55
+ ]);
56
+ var useRovingFocusGroupScope = (0, import_react_roving_focus.createRovingFocusGroupScope)();
57
+ var ToggleGroup = import_react.default.forwardRef((props, forwardedRef) => {
58
+ const { type, ...toggleGroupProps } = props;
59
+ if (type === "single") {
60
+ const singleProps = toggleGroupProps;
61
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
62
+ }
63
+ if (type === "multiple") {
64
+ const multipleProps = toggleGroupProps;
65
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
66
+ }
67
+ throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
68
+ });
69
+ ToggleGroup.displayName = TOGGLE_GROUP_NAME;
70
+ var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
71
+ var ToggleGroupImplSingle = import_react.default.forwardRef((props, forwardedRef) => {
72
+ const {
73
+ value: valueProp,
74
+ defaultValue,
75
+ onValueChange = () => {
76
+ },
77
+ ...toggleGroupSingleProps
78
+ } = props;
79
+ const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
80
+ prop: valueProp,
81
+ defaultProp: defaultValue,
82
+ onChange: onValueChange
83
+ });
84
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
85
+ ToggleGroupValueProvider,
86
+ {
87
+ scope: props.__scopeToggleGroup,
88
+ type: "single",
89
+ value: value ? [value] : [],
90
+ onItemActivate: setValue,
91
+ onItemDeactivate: import_react.default.useCallback(() => setValue(""), [setValue]),
92
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
56
93
  }
57
- throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
94
+ );
95
+ });
96
+ var ToggleGroupImplMultiple = import_react.default.forwardRef((props, forwardedRef) => {
97
+ const {
98
+ value: valueProp,
99
+ defaultValue,
100
+ onValueChange = () => {
101
+ },
102
+ ...toggleGroupMultipleProps
103
+ } = props;
104
+ const [value = [], setValue] = (0, import_react_use_controllable_state.useControllableState)({
105
+ prop: valueProp,
106
+ defaultProp: defaultValue,
107
+ onChange: onValueChange
58
108
  });
59
- ToggleGroup.displayName = TOGGLE_GROUP_NAME;
60
- var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
61
- var ToggleGroupImplSingle = import_react.default.forwardRef((props, forwardedRef) => {
109
+ const handleButtonActivate = import_react.default.useCallback(
110
+ (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
111
+ [setValue]
112
+ );
113
+ const handleButtonDeactivate = import_react.default.useCallback(
114
+ (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
115
+ [setValue]
116
+ );
117
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
118
+ ToggleGroupValueProvider,
119
+ {
120
+ scope: props.__scopeToggleGroup,
121
+ type: "multiple",
122
+ value,
123
+ onItemActivate: handleButtonActivate,
124
+ onItemDeactivate: handleButtonDeactivate,
125
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
126
+ }
127
+ );
128
+ });
129
+ ToggleGroup.displayName = TOGGLE_GROUP_NAME;
130
+ var [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
131
+ var ToggleGroupImpl = import_react.default.forwardRef(
132
+ (props, forwardedRef) => {
62
133
  const {
63
- value: valueProp,
64
- defaultValue,
65
- onValueChange = () => {
66
- },
67
- ...toggleGroupSingleProps
134
+ __scopeToggleGroup,
135
+ disabled = false,
136
+ rovingFocus = true,
137
+ orientation,
138
+ dir,
139
+ loop = true,
140
+ ...toggleGroupProps
68
141
  } = props;
69
- const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
70
- prop: valueProp,
71
- defaultProp: defaultValue,
72
- onChange: onValueChange
73
- });
74
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
75
- ToggleGroupValueProvider,
142
+ const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
143
+ const direction = (0, import_react_direction.useDirection)(dir);
144
+ const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
145
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupContext, { scope: __scopeToggleGroup, rovingFocus, disabled, children: rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
146
+ RovingFocusGroup.Root,
76
147
  {
77
- scope: props.__scopeToggleGroup,
78
- type: "single",
79
- value: value ? [value] : [],
80
- onItemActivate: setValue,
81
- onItemDeactivate: import_react.default.useCallback(() => setValue(""), [setValue]),
82
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
148
+ asChild: true,
149
+ ...rovingFocusGroupScope,
150
+ orientation,
151
+ dir: direction,
152
+ loop,
153
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...commonProps, ref: forwardedRef })
83
154
  }
84
- );
85
- });
86
- var ToggleGroupImplMultiple = import_react.default.forwardRef((props, forwardedRef) => {
87
- const {
88
- value: valueProp,
89
- defaultValue,
90
- onValueChange = () => {
91
- },
92
- ...toggleGroupMultipleProps
93
- } = props;
94
- const [value = [], setValue] = (0, import_react_use_controllable_state.useControllableState)({
95
- prop: valueProp,
96
- defaultProp: defaultValue,
97
- onChange: onValueChange
98
- });
99
- const handleButtonActivate = import_react.default.useCallback(
100
- (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
101
- [setValue]
102
- );
103
- const handleButtonDeactivate = import_react.default.useCallback(
104
- (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
105
- [setValue]
106
- );
107
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
108
- ToggleGroupValueProvider,
155
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...commonProps, ref: forwardedRef }) });
156
+ }
157
+ );
158
+ var ITEM_NAME = "ToggleGroupItem";
159
+ var ToggleGroupItem = import_react.default.forwardRef(
160
+ (props, forwardedRef) => {
161
+ const valueContext = useToggleGroupValueContext(ITEM_NAME, props.__scopeToggleGroup);
162
+ const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);
163
+ const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);
164
+ const pressed = valueContext.value.includes(props.value);
165
+ const disabled = context.disabled || props.disabled;
166
+ const commonProps = { ...props, pressed, disabled };
167
+ const ref = import_react.default.useRef(null);
168
+ return context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
169
+ RovingFocusGroup.Item,
109
170
  {
110
- scope: props.__scopeToggleGroup,
111
- type: "multiple",
112
- value,
113
- onItemActivate: handleButtonActivate,
114
- onItemDeactivate: handleButtonDeactivate,
115
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
171
+ asChild: true,
172
+ ...rovingFocusGroupScope,
173
+ focusable: !disabled,
174
+ active: pressed,
175
+ ref,
176
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
116
177
  }
117
- );
118
- });
119
- ToggleGroup.displayName = TOGGLE_GROUP_NAME;
120
- var [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
121
- var ToggleGroupImpl = import_react.default.forwardRef(
122
- (props, forwardedRef) => {
123
- const {
124
- __scopeToggleGroup,
125
- disabled = false,
126
- rovingFocus = true,
127
- orientation,
128
- dir,
129
- loop = true,
130
- ...toggleGroupProps
131
- } = props;
132
- const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
133
- const direction = (0, import_react_direction.useDirection)(dir);
134
- const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
135
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupContext, { scope: __scopeToggleGroup, rovingFocus, disabled, children: rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
136
- RovingFocusGroup.Root,
137
- {
138
- asChild: true,
139
- ...rovingFocusGroupScope,
140
- orientation,
141
- dir: direction,
142
- loop,
143
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...commonProps, ref: forwardedRef })
144
- }
145
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...commonProps, ref: forwardedRef }) });
146
- }
147
- );
148
- var ITEM_NAME = "ToggleGroupItem";
149
- var ToggleGroupItem = import_react.default.forwardRef(
150
- (props, forwardedRef) => {
151
- const valueContext = useToggleGroupValueContext(ITEM_NAME, props.__scopeToggleGroup);
152
- const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);
153
- const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);
154
- const pressed = valueContext.value.includes(props.value);
155
- const disabled = context.disabled || props.disabled;
156
- const commonProps = { ...props, pressed, disabled };
157
- const ref = import_react.default.useRef(null);
158
- return context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
159
- RovingFocusGroup.Item,
160
- {
161
- asChild: true,
162
- ...rovingFocusGroupScope,
163
- focusable: !disabled,
164
- active: pressed,
165
- ref,
166
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
167
- }
168
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef });
169
- }
170
- );
171
- ToggleGroupItem.displayName = ITEM_NAME;
172
- var ToggleGroupItemImpl = import_react.default.forwardRef(
173
- (props, forwardedRef) => {
174
- const { __scopeToggleGroup, value, ...itemProps } = props;
175
- const valueContext = useToggleGroupValueContext(ITEM_NAME, __scopeToggleGroup);
176
- const singleProps = { role: "radio", "aria-checked": props.pressed, "aria-pressed": void 0 };
177
- const typeProps = valueContext.type === "single" ? singleProps : void 0;
178
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
179
- import_react_toggle.Toggle,
180
- {
181
- ...typeProps,
182
- ...itemProps,
183
- ref: forwardedRef,
184
- onPressedChange: (pressed) => {
185
- if (pressed) {
186
- valueContext.onItemActivate(value);
187
- } else {
188
- valueContext.onItemDeactivate(value);
189
- }
178
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef });
179
+ }
180
+ );
181
+ ToggleGroupItem.displayName = ITEM_NAME;
182
+ var ToggleGroupItemImpl = import_react.default.forwardRef(
183
+ (props, forwardedRef) => {
184
+ const { __scopeToggleGroup, value, ...itemProps } = props;
185
+ const valueContext = useToggleGroupValueContext(ITEM_NAME, __scopeToggleGroup);
186
+ const singleProps = { role: "radio", "aria-checked": props.pressed, "aria-pressed": void 0 };
187
+ const typeProps = valueContext.type === "single" ? singleProps : void 0;
188
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
189
+ import_react_toggle.Toggle,
190
+ {
191
+ ...typeProps,
192
+ ...itemProps,
193
+ ref: forwardedRef,
194
+ onPressedChange: (pressed) => {
195
+ if (pressed) {
196
+ valueContext.onItemActivate(value);
197
+ } else {
198
+ valueContext.onItemDeactivate(value);
190
199
  }
191
200
  }
192
- );
193
- }
194
- );
195
- var Root2 = ToggleGroup;
196
- var Item2 = ToggleGroupItem;
197
- })();
201
+ }
202
+ );
203
+ }
204
+ );
205
+ var Root2 = ToggleGroup;
206
+ var Item2 = ToggleGroupItem;
198
207
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../src/ToggleGroup.tsx"],
4
- "sourcesContent": ["import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Toggle } from '@radix-ui/react-toggle';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = 'ToggleGroup';\n\ntype ScopedProps<P> = P & { __scopeToggleGroup?: Scope };\nconst [createToggleGroupContext, createToggleGroupScope] = createContextScope(TOGGLE_GROUP_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype ToggleGroupElement = ToggleGroupImplSingleElement | ToggleGroupImplMultipleElement;\ninterface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {\n type: 'single';\n}\ninterface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {\n type: 'multiple';\n}\n\nconst ToggleGroup = React.forwardRef<\n ToggleGroupElement,\n ToggleGroupSingleProps | ToggleGroupMultipleProps\n>((props, forwardedRef) => {\n const { type, ...toggleGroupProps } = props;\n\n if (type === 'single') {\n const singleProps = toggleGroupProps as ToggleGroupImplSingleProps;\n return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />;\n }\n\n if (type === 'multiple') {\n const multipleProps = toggleGroupProps as ToggleGroupImplMultipleProps;\n return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />;\n }\n\n throw new Error(`Missing prop \\`type\\` expected on \\`${TOGGLE_GROUP_NAME}\\``);\n});\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupValueContextValue = {\n type: 'single' | 'multiple';\n value: string[];\n onItemActivate(value: string): void;\n onItemDeactivate(value: string): void;\n};\n\nconst [ToggleGroupValueProvider, useToggleGroupValueContext] =\n createToggleGroupContext<ToggleGroupValueContextValue>(TOGGLE_GROUP_NAME);\n\ntype ToggleGroupImplSingleElement = ToggleGroupImplElement;\ninterface ToggleGroupImplSingleProps extends ToggleGroupImplProps {\n /**\n * The controlled stateful value of the item that is pressed.\n */\n value?: string;\n /**\n * The value of the item that is pressed when initially rendered. Use\n * `defaultValue` if you do not need to control the state of a toggle group.\n */\n defaultValue?: string;\n /**\n * The callback that fires when the value of the toggle group changes.\n */\n onValueChange?(value: string): void;\n}\n\nconst ToggleGroupImplSingle = React.forwardRef<\n ToggleGroupImplSingleElement,\n ToggleGroupImplSingleProps\n>((props: ScopedProps<ToggleGroupImplSingleProps>, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n ...toggleGroupSingleProps\n } = props;\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n return (\n <ToggleGroupValueProvider\n scope={props.__scopeToggleGroup}\n type=\"single\"\n value={value ? [value] : []}\n onItemActivate={setValue}\n onItemDeactivate={React.useCallback(() => setValue(''), [setValue])}\n >\n <ToggleGroupImpl {...toggleGroupSingleProps} ref={forwardedRef} />\n </ToggleGroupValueProvider>\n );\n});\n\ntype ToggleGroupImplMultipleElement = ToggleGroupImplElement;\ninterface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {\n /**\n * The controlled stateful value of the items that are pressed.\n */\n value?: string[];\n /**\n * The value of the items that are pressed when initially rendered. Use\n * `defaultValue` if you do not need to control the state of a toggle group.\n */\n defaultValue?: string[];\n /**\n * The callback that fires when the state of the toggle group changes.\n */\n onValueChange?(value: string[]): void;\n}\n\nconst ToggleGroupImplMultiple = React.forwardRef<\n ToggleGroupImplMultipleElement,\n ToggleGroupImplMultipleProps\n>((props: ScopedProps<ToggleGroupImplMultipleProps>, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n ...toggleGroupMultipleProps\n } = props;\n\n const [value = [], setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n const handleButtonActivate = React.useCallback(\n (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n [setValue]\n );\n\n const handleButtonDeactivate = React.useCallback(\n (itemValue: string) =>\n setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n [setValue]\n );\n\n return (\n <ToggleGroupValueProvider\n scope={props.__scopeToggleGroup}\n type=\"multiple\"\n value={value}\n onItemActivate={handleButtonActivate}\n onItemDeactivate={handleButtonDeactivate}\n >\n <ToggleGroupImpl {...toggleGroupMultipleProps} ref={forwardedRef} />\n </ToggleGroupValueProvider>\n );\n});\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupContextValue = { rovingFocus: boolean; disabled: boolean };\n\nconst [ToggleGroupContext, useToggleGroupContext] =\n createToggleGroupContext<ToggleGroupContextValue>(TOGGLE_GROUP_NAME);\n\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype ToggleGroupImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToggleGroupImplProps extends PrimitiveDivProps {\n /**\n * Whether the group is disabled from user interaction.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the group should maintain roving focus of its buttons.\n * @defaultValue true\n */\n rovingFocus?: boolean;\n loop?: RovingFocusGroupProps['loop'];\n orientation?: RovingFocusGroupProps['orientation'];\n dir?: RovingFocusGroupProps['dir'];\n}\n\nconst ToggleGroupImpl = React.forwardRef<ToggleGroupImplElement, ToggleGroupImplProps>(\n (props: ScopedProps<ToggleGroupImplProps>, forwardedRef) => {\n const {\n __scopeToggleGroup,\n disabled = false,\n rovingFocus = true,\n orientation,\n dir,\n loop = true,\n ...toggleGroupProps\n } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);\n const direction = useDirection(dir);\n const commonProps = { role: 'group', dir: direction, ...toggleGroupProps };\n return (\n <ToggleGroupContext scope={__scopeToggleGroup} rovingFocus={rovingFocus} disabled={disabled}>\n {rovingFocus ? (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n loop={loop}\n >\n <Primitive.div {...commonProps} ref={forwardedRef} />\n </RovingFocusGroup.Root>\n ) : (\n <Primitive.div {...commonProps} ref={forwardedRef} />\n )}\n </ToggleGroupContext>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'ToggleGroupItem';\n\ntype ToggleGroupItemElement = ToggleGroupItemImplElement;\ninterface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, 'pressed'> {}\n\nconst ToggleGroupItem = React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(\n (props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {\n const valueContext = useToggleGroupValueContext(ITEM_NAME, props.__scopeToggleGroup);\n const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);\n const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);\n const pressed = valueContext.value.includes(props.value);\n const disabled = context.disabled || props.disabled;\n const commonProps = { ...props, pressed, disabled };\n const ref = React.useRef<HTMLDivElement>(null);\n return context.rovingFocus ? (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={pressed}\n ref={ref}\n >\n <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n </RovingFocusGroup.Item>\n ) : (\n <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n );\n }\n);\n\nToggleGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupItemImplElement = React.ElementRef<typeof Toggle>;\ntype ToggleProps = Radix.ComponentPropsWithoutRef<typeof Toggle>;\ninterface ToggleGroupItemImplProps extends Omit<ToggleProps, 'defaultPressed' | 'onPressedChange'> {\n /**\n * A string value for the toggle group item. All items within a toggle group should use a unique value.\n */\n value: string;\n}\n\nconst ToggleGroupItemImpl = React.forwardRef<ToggleGroupItemImplElement, ToggleGroupItemImplProps>(\n (props: ScopedProps<ToggleGroupItemImplProps>, forwardedRef) => {\n const { __scopeToggleGroup, value, ...itemProps } = props;\n const valueContext = useToggleGroupValueContext(ITEM_NAME, __scopeToggleGroup);\n const singleProps = { role: 'radio', 'aria-checked': props.pressed, 'aria-pressed': undefined };\n const typeProps = valueContext.type === 'single' ? singleProps : undefined;\n return (\n <Toggle\n {...typeProps}\n {...itemProps}\n ref={forwardedRef}\n onPressedChange={(pressed) => {\n if (pressed) {\n valueContext.onItemActivate(value);\n } else {\n valueContext.onItemDeactivate(value);\n }\n }}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = ToggleGroup;\nconst Item = ToggleGroupItem;\n\nexport {\n createToggleGroupScope,\n //\n ToggleGroup,\n ToggleGroupItem,\n //\n Root,\n Item,\n};\nexport type { ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItemProps };\n"],
5
- "mappings": "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",
6
- "names": ["React", "value", "Root", "Item"]
3
+ "sources": ["../src/index.ts", "../src/ToggleGroup.tsx"],
4
+ "sourcesContent": ["'use client';\nexport {\n createToggleGroupScope,\n //\n ToggleGroup,\n ToggleGroupItem,\n //\n Root,\n Item,\n} from './ToggleGroup';\nexport type {\n ToggleGroupSingleProps,\n ToggleGroupMultipleProps,\n ToggleGroupItemProps,\n} from './ToggleGroup';\n", "import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Toggle } from '@radix-ui/react-toggle';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = 'ToggleGroup';\n\ntype ScopedProps<P> = P & { __scopeToggleGroup?: Scope };\nconst [createToggleGroupContext, createToggleGroupScope] = createContextScope(TOGGLE_GROUP_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype ToggleGroupElement = ToggleGroupImplSingleElement | ToggleGroupImplMultipleElement;\ninterface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {\n type: 'single';\n}\ninterface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {\n type: 'multiple';\n}\n\nconst ToggleGroup = React.forwardRef<\n ToggleGroupElement,\n ToggleGroupSingleProps | ToggleGroupMultipleProps\n>((props, forwardedRef) => {\n const { type, ...toggleGroupProps } = props;\n\n if (type === 'single') {\n const singleProps = toggleGroupProps as ToggleGroupImplSingleProps;\n return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />;\n }\n\n if (type === 'multiple') {\n const multipleProps = toggleGroupProps as ToggleGroupImplMultipleProps;\n return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />;\n }\n\n throw new Error(`Missing prop \\`type\\` expected on \\`${TOGGLE_GROUP_NAME}\\``);\n});\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupValueContextValue = {\n type: 'single' | 'multiple';\n value: string[];\n onItemActivate(value: string): void;\n onItemDeactivate(value: string): void;\n};\n\nconst [ToggleGroupValueProvider, useToggleGroupValueContext] =\n createToggleGroupContext<ToggleGroupValueContextValue>(TOGGLE_GROUP_NAME);\n\ntype ToggleGroupImplSingleElement = ToggleGroupImplElement;\ninterface ToggleGroupImplSingleProps extends ToggleGroupImplProps {\n /**\n * The controlled stateful value of the item that is pressed.\n */\n value?: string;\n /**\n * The value of the item that is pressed when initially rendered. Use\n * `defaultValue` if you do not need to control the state of a toggle group.\n */\n defaultValue?: string;\n /**\n * The callback that fires when the value of the toggle group changes.\n */\n onValueChange?(value: string): void;\n}\n\nconst ToggleGroupImplSingle = React.forwardRef<\n ToggleGroupImplSingleElement,\n ToggleGroupImplSingleProps\n>((props: ScopedProps<ToggleGroupImplSingleProps>, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n ...toggleGroupSingleProps\n } = props;\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n return (\n <ToggleGroupValueProvider\n scope={props.__scopeToggleGroup}\n type=\"single\"\n value={value ? [value] : []}\n onItemActivate={setValue}\n onItemDeactivate={React.useCallback(() => setValue(''), [setValue])}\n >\n <ToggleGroupImpl {...toggleGroupSingleProps} ref={forwardedRef} />\n </ToggleGroupValueProvider>\n );\n});\n\ntype ToggleGroupImplMultipleElement = ToggleGroupImplElement;\ninterface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {\n /**\n * The controlled stateful value of the items that are pressed.\n */\n value?: string[];\n /**\n * The value of the items that are pressed when initially rendered. Use\n * `defaultValue` if you do not need to control the state of a toggle group.\n */\n defaultValue?: string[];\n /**\n * The callback that fires when the state of the toggle group changes.\n */\n onValueChange?(value: string[]): void;\n}\n\nconst ToggleGroupImplMultiple = React.forwardRef<\n ToggleGroupImplMultipleElement,\n ToggleGroupImplMultipleProps\n>((props: ScopedProps<ToggleGroupImplMultipleProps>, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n ...toggleGroupMultipleProps\n } = props;\n\n const [value = [], setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n const handleButtonActivate = React.useCallback(\n (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n [setValue]\n );\n\n const handleButtonDeactivate = React.useCallback(\n (itemValue: string) =>\n setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n [setValue]\n );\n\n return (\n <ToggleGroupValueProvider\n scope={props.__scopeToggleGroup}\n type=\"multiple\"\n value={value}\n onItemActivate={handleButtonActivate}\n onItemDeactivate={handleButtonDeactivate}\n >\n <ToggleGroupImpl {...toggleGroupMultipleProps} ref={forwardedRef} />\n </ToggleGroupValueProvider>\n );\n});\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupContextValue = { rovingFocus: boolean; disabled: boolean };\n\nconst [ToggleGroupContext, useToggleGroupContext] =\n createToggleGroupContext<ToggleGroupContextValue>(TOGGLE_GROUP_NAME);\n\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype ToggleGroupImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToggleGroupImplProps extends PrimitiveDivProps {\n /**\n * Whether the group is disabled from user interaction.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the group should maintain roving focus of its buttons.\n * @defaultValue true\n */\n rovingFocus?: boolean;\n loop?: RovingFocusGroupProps['loop'];\n orientation?: RovingFocusGroupProps['orientation'];\n dir?: RovingFocusGroupProps['dir'];\n}\n\nconst ToggleGroupImpl = React.forwardRef<ToggleGroupImplElement, ToggleGroupImplProps>(\n (props: ScopedProps<ToggleGroupImplProps>, forwardedRef) => {\n const {\n __scopeToggleGroup,\n disabled = false,\n rovingFocus = true,\n orientation,\n dir,\n loop = true,\n ...toggleGroupProps\n } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);\n const direction = useDirection(dir);\n const commonProps = { role: 'group', dir: direction, ...toggleGroupProps };\n return (\n <ToggleGroupContext scope={__scopeToggleGroup} rovingFocus={rovingFocus} disabled={disabled}>\n {rovingFocus ? (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n loop={loop}\n >\n <Primitive.div {...commonProps} ref={forwardedRef} />\n </RovingFocusGroup.Root>\n ) : (\n <Primitive.div {...commonProps} ref={forwardedRef} />\n )}\n </ToggleGroupContext>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'ToggleGroupItem';\n\ntype ToggleGroupItemElement = ToggleGroupItemImplElement;\ninterface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, 'pressed'> {}\n\nconst ToggleGroupItem = React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(\n (props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {\n const valueContext = useToggleGroupValueContext(ITEM_NAME, props.__scopeToggleGroup);\n const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);\n const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);\n const pressed = valueContext.value.includes(props.value);\n const disabled = context.disabled || props.disabled;\n const commonProps = { ...props, pressed, disabled };\n const ref = React.useRef<HTMLDivElement>(null);\n return context.rovingFocus ? (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={pressed}\n ref={ref}\n >\n <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n </RovingFocusGroup.Item>\n ) : (\n <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n );\n }\n);\n\nToggleGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupItemImplElement = React.ElementRef<typeof Toggle>;\ntype ToggleProps = Radix.ComponentPropsWithoutRef<typeof Toggle>;\ninterface ToggleGroupItemImplProps extends Omit<ToggleProps, 'defaultPressed' | 'onPressedChange'> {\n /**\n * A string value for the toggle group item. All items within a toggle group should use a unique value.\n */\n value: string;\n}\n\nconst ToggleGroupItemImpl = React.forwardRef<ToggleGroupItemImplElement, ToggleGroupItemImplProps>(\n (props: ScopedProps<ToggleGroupItemImplProps>, forwardedRef) => {\n const { __scopeToggleGroup, value, ...itemProps } = props;\n const valueContext = useToggleGroupValueContext(ITEM_NAME, __scopeToggleGroup);\n const singleProps = { role: 'radio', 'aria-checked': props.pressed, 'aria-pressed': undefined };\n const typeProps = valueContext.type === 'single' ? singleProps : undefined;\n return (\n <Toggle\n {...typeProps}\n {...itemProps}\n ref={forwardedRef}\n onPressedChange={(pressed) => {\n if (pressed) {\n valueContext.onItemActivate(value);\n } else {\n valueContext.onItemDeactivate(value);\n }\n }}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = ToggleGroup;\nconst Item = ToggleGroupItem;\n\nexport {\n createToggleGroupScope,\n //\n ToggleGroup,\n ToggleGroupItem,\n //\n Root,\n Item,\n};\nexport type { ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItemProps };\n"],
5
+ "mappings": "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",
6
+ "names": ["Item", "Root", "React", "value", "Root", "Item"]
7
7
  }
package/dist/index.mjs CHANGED
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  // packages/react/toggle-group/src/ToggleGroup.tsx
2
4
  import React from "react";
3
5
  import { createContextScope } from "@radix-ui/react-context";
package/dist/index.mjs.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../src/ToggleGroup.tsx"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Toggle } from '@radix-ui/react-toggle';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = 'ToggleGroup';\n\ntype ScopedProps<P> = P & { __scopeToggleGroup?: Scope };\nconst [createToggleGroupContext, createToggleGroupScope] = createContextScope(TOGGLE_GROUP_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype ToggleGroupElement = ToggleGroupImplSingleElement | ToggleGroupImplMultipleElement;\ninterface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {\n type: 'single';\n}\ninterface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {\n type: 'multiple';\n}\n\nconst ToggleGroup = React.forwardRef<\n ToggleGroupElement,\n ToggleGroupSingleProps | ToggleGroupMultipleProps\n>((props, forwardedRef) => {\n const { type, ...toggleGroupProps } = props;\n\n if (type === 'single') {\n const singleProps = toggleGroupProps as ToggleGroupImplSingleProps;\n return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />;\n }\n\n if (type === 'multiple') {\n const multipleProps = toggleGroupProps as ToggleGroupImplMultipleProps;\n return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />;\n }\n\n throw new Error(`Missing prop \\`type\\` expected on \\`${TOGGLE_GROUP_NAME}\\``);\n});\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupValueContextValue = {\n type: 'single' | 'multiple';\n value: string[];\n onItemActivate(value: string): void;\n onItemDeactivate(value: string): void;\n};\n\nconst [ToggleGroupValueProvider, useToggleGroupValueContext] =\n createToggleGroupContext<ToggleGroupValueContextValue>(TOGGLE_GROUP_NAME);\n\ntype ToggleGroupImplSingleElement = ToggleGroupImplElement;\ninterface ToggleGroupImplSingleProps extends ToggleGroupImplProps {\n /**\n * The controlled stateful value of the item that is pressed.\n */\n value?: string;\n /**\n * The value of the item that is pressed when initially rendered. Use\n * `defaultValue` if you do not need to control the state of a toggle group.\n */\n defaultValue?: string;\n /**\n * The callback that fires when the value of the toggle group changes.\n */\n onValueChange?(value: string): void;\n}\n\nconst ToggleGroupImplSingle = React.forwardRef<\n ToggleGroupImplSingleElement,\n ToggleGroupImplSingleProps\n>((props: ScopedProps<ToggleGroupImplSingleProps>, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n ...toggleGroupSingleProps\n } = props;\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n return (\n <ToggleGroupValueProvider\n scope={props.__scopeToggleGroup}\n type=\"single\"\n value={value ? [value] : []}\n onItemActivate={setValue}\n onItemDeactivate={React.useCallback(() => setValue(''), [setValue])}\n >\n <ToggleGroupImpl {...toggleGroupSingleProps} ref={forwardedRef} />\n </ToggleGroupValueProvider>\n );\n});\n\ntype ToggleGroupImplMultipleElement = ToggleGroupImplElement;\ninterface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {\n /**\n * The controlled stateful value of the items that are pressed.\n */\n value?: string[];\n /**\n * The value of the items that are pressed when initially rendered. Use\n * `defaultValue` if you do not need to control the state of a toggle group.\n */\n defaultValue?: string[];\n /**\n * The callback that fires when the state of the toggle group changes.\n */\n onValueChange?(value: string[]): void;\n}\n\nconst ToggleGroupImplMultiple = React.forwardRef<\n ToggleGroupImplMultipleElement,\n ToggleGroupImplMultipleProps\n>((props: ScopedProps<ToggleGroupImplMultipleProps>, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n ...toggleGroupMultipleProps\n } = props;\n\n const [value = [], setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n const handleButtonActivate = React.useCallback(\n (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n [setValue]\n );\n\n const handleButtonDeactivate = React.useCallback(\n (itemValue: string) =>\n setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n [setValue]\n );\n\n return (\n <ToggleGroupValueProvider\n scope={props.__scopeToggleGroup}\n type=\"multiple\"\n value={value}\n onItemActivate={handleButtonActivate}\n onItemDeactivate={handleButtonDeactivate}\n >\n <ToggleGroupImpl {...toggleGroupMultipleProps} ref={forwardedRef} />\n </ToggleGroupValueProvider>\n );\n});\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupContextValue = { rovingFocus: boolean; disabled: boolean };\n\nconst [ToggleGroupContext, useToggleGroupContext] =\n createToggleGroupContext<ToggleGroupContextValue>(TOGGLE_GROUP_NAME);\n\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype ToggleGroupImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToggleGroupImplProps extends PrimitiveDivProps {\n /**\n * Whether the group is disabled from user interaction.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the group should maintain roving focus of its buttons.\n * @defaultValue true\n */\n rovingFocus?: boolean;\n loop?: RovingFocusGroupProps['loop'];\n orientation?: RovingFocusGroupProps['orientation'];\n dir?: RovingFocusGroupProps['dir'];\n}\n\nconst ToggleGroupImpl = React.forwardRef<ToggleGroupImplElement, ToggleGroupImplProps>(\n (props: ScopedProps<ToggleGroupImplProps>, forwardedRef) => {\n const {\n __scopeToggleGroup,\n disabled = false,\n rovingFocus = true,\n orientation,\n dir,\n loop = true,\n ...toggleGroupProps\n } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);\n const direction = useDirection(dir);\n const commonProps = { role: 'group', dir: direction, ...toggleGroupProps };\n return (\n <ToggleGroupContext scope={__scopeToggleGroup} rovingFocus={rovingFocus} disabled={disabled}>\n {rovingFocus ? (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n loop={loop}\n >\n <Primitive.div {...commonProps} ref={forwardedRef} />\n </RovingFocusGroup.Root>\n ) : (\n <Primitive.div {...commonProps} ref={forwardedRef} />\n )}\n </ToggleGroupContext>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'ToggleGroupItem';\n\ntype ToggleGroupItemElement = ToggleGroupItemImplElement;\ninterface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, 'pressed'> {}\n\nconst ToggleGroupItem = React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(\n (props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {\n const valueContext = useToggleGroupValueContext(ITEM_NAME, props.__scopeToggleGroup);\n const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);\n const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);\n const pressed = valueContext.value.includes(props.value);\n const disabled = context.disabled || props.disabled;\n const commonProps = { ...props, pressed, disabled };\n const ref = React.useRef<HTMLDivElement>(null);\n return context.rovingFocus ? (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={pressed}\n ref={ref}\n >\n <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n </RovingFocusGroup.Item>\n ) : (\n <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n );\n }\n);\n\nToggleGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupItemImplElement = React.ElementRef<typeof Toggle>;\ntype ToggleProps = Radix.ComponentPropsWithoutRef<typeof Toggle>;\ninterface ToggleGroupItemImplProps extends Omit<ToggleProps, 'defaultPressed' | 'onPressedChange'> {\n /**\n * A string value for the toggle group item. All items within a toggle group should use a unique value.\n */\n value: string;\n}\n\nconst ToggleGroupItemImpl = React.forwardRef<ToggleGroupItemImplElement, ToggleGroupItemImplProps>(\n (props: ScopedProps<ToggleGroupItemImplProps>, forwardedRef) => {\n const { __scopeToggleGroup, value, ...itemProps } = props;\n const valueContext = useToggleGroupValueContext(ITEM_NAME, __scopeToggleGroup);\n const singleProps = { role: 'radio', 'aria-checked': props.pressed, 'aria-pressed': undefined };\n const typeProps = valueContext.type === 'single' ? singleProps : undefined;\n return (\n <Toggle\n {...typeProps}\n {...itemProps}\n ref={forwardedRef}\n onPressedChange={(pressed) => {\n if (pressed) {\n valueContext.onItemActivate(value);\n } else {\n valueContext.onItemDeactivate(value);\n }\n }}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = ToggleGroup;\nconst Item = ToggleGroupItem;\n\nexport {\n createToggleGroupScope,\n //\n ToggleGroup,\n ToggleGroupItem,\n //\n Root,\n Item,\n};\nexport type { ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItemProps };\n"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": ["value", "Root", "Item"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radix-ui/react-toggle-group",
3
- "version": "1.1.0-rc.1",
3
+ "version": "1.1.0-rc.3",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": {
@@ -28,13 +28,13 @@
28
28
  "version": "yarn version"
29
29
  },
30
30
  "dependencies": {
31
- "@radix-ui/primitive": "1.1.0-rc.1",
32
- "@radix-ui/react-context": "1.1.0-rc.1",
33
- "@radix-ui/react-direction": "1.1.0-rc.1",
34
- "@radix-ui/react-primitive": "1.1.0-rc.1",
35
- "@radix-ui/react-roving-focus": "1.1.0-rc.1",
36
- "@radix-ui/react-toggle": "1.1.0-rc.1",
37
- "@radix-ui/react-use-controllable-state": "1.1.0-rc.1"
31
+ "@radix-ui/primitive": "1.1.0-rc.3",
32
+ "@radix-ui/react-context": "1.1.0-rc.3",
33
+ "@radix-ui/react-direction": "1.1.0-rc.3",
34
+ "@radix-ui/react-primitive": "1.1.0-rc.3",
35
+ "@radix-ui/react-roving-focus": "1.1.0-rc.3",
36
+ "@radix-ui/react-toggle": "1.1.0-rc.3",
37
+ "@radix-ui/react-use-controllable-state": "1.1.0-rc.3"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "@types/react": "*",