@huin-core/react-toggle-group 1.0.1 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.mts +104 -0
- package/dist/index.d.ts +104 -0
- package/dist/index.js +262 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +230 -0
- package/dist/index.mjs.map +7 -0
- package/package.json +8 -8
package/dist/index.d.mts
ADDED
@@ -0,0 +1,104 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
import * as RovingFocusGroup from '@huin-core/react-roving-focus';
|
5
|
+
|
6
|
+
type Scope<C = any> = {
|
7
|
+
[scopeName: string]: React.Context<C>[];
|
8
|
+
} | undefined;
|
9
|
+
type ScopeHook = (scope: Scope) => {
|
10
|
+
[__scopeProp: string]: Scope;
|
11
|
+
};
|
12
|
+
interface CreateScope {
|
13
|
+
scopeName: string;
|
14
|
+
(): ScopeHook;
|
15
|
+
}
|
16
|
+
|
17
|
+
declare const createToggleGroupScope: CreateScope;
|
18
|
+
interface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {
|
19
|
+
type: 'single';
|
20
|
+
}
|
21
|
+
interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
|
22
|
+
type: 'multiple';
|
23
|
+
}
|
24
|
+
declare const ToggleGroup: React__default.ForwardRefExoticComponent<(ToggleGroupSingleProps | ToggleGroupMultipleProps) & React__default.RefAttributes<HTMLDivElement>>;
|
25
|
+
interface ToggleGroupImplSingleProps extends ToggleGroupImplProps {
|
26
|
+
/**
|
27
|
+
* The controlled stateful value of the item that is pressed.
|
28
|
+
*/
|
29
|
+
value?: string;
|
30
|
+
/**
|
31
|
+
* The value of the item that is pressed when initially rendered. Use
|
32
|
+
* `defaultValue` if you do not need to control the state of a toggle group.
|
33
|
+
*/
|
34
|
+
defaultValue?: string;
|
35
|
+
/**
|
36
|
+
* The callback that fires when the value of the toggle group changes.
|
37
|
+
*/
|
38
|
+
onValueChange?(value: string): void;
|
39
|
+
}
|
40
|
+
interface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {
|
41
|
+
/**
|
42
|
+
* The controlled stateful value of the items that are pressed.
|
43
|
+
*/
|
44
|
+
value?: string[];
|
45
|
+
/**
|
46
|
+
* The value of the items that are pressed when initially rendered. Use
|
47
|
+
* `defaultValue` if you do not need to control the state of a toggle group.
|
48
|
+
*/
|
49
|
+
defaultValue?: string[];
|
50
|
+
/**
|
51
|
+
* The callback that fires when the state of the toggle group changes.
|
52
|
+
*/
|
53
|
+
onValueChange?(value: string[]): void;
|
54
|
+
}
|
55
|
+
type RovingFocusGroupProps = React__default.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
|
56
|
+
type PrimitiveDivProps = React__default.ComponentPropsWithoutRef<typeof Primitive.div>;
|
57
|
+
interface ToggleGroupImplProps extends PrimitiveDivProps {
|
58
|
+
/**
|
59
|
+
* Whether the group is disabled from user interaction.
|
60
|
+
* @defaultValue false
|
61
|
+
*/
|
62
|
+
disabled?: boolean;
|
63
|
+
/**
|
64
|
+
* Whether the group should maintain roving focus of its buttons.
|
65
|
+
* @defaultValue true
|
66
|
+
*/
|
67
|
+
rovingFocus?: boolean;
|
68
|
+
loop?: RovingFocusGroupProps["loop"];
|
69
|
+
orientation?: RovingFocusGroupProps["orientation"];
|
70
|
+
dir?: RovingFocusGroupProps["dir"];
|
71
|
+
}
|
72
|
+
declare const Root: React__default.ForwardRefExoticComponent<(ToggleGroupSingleProps | ToggleGroupMultipleProps) & React__default.RefAttributes<HTMLDivElement>>;
|
73
|
+
|
74
|
+
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
|
75
|
+
interface ToggleProps$1 extends PrimitiveButtonProps {
|
76
|
+
/**
|
77
|
+
* The controlled state of the toggle.
|
78
|
+
*/
|
79
|
+
pressed?: boolean;
|
80
|
+
/**
|
81
|
+
* The state of the toggle when initially rendered. Use `defaultPressed`
|
82
|
+
* if you do not need to control the state of the toggle.
|
83
|
+
* @defaultValue false
|
84
|
+
*/
|
85
|
+
defaultPressed?: boolean;
|
86
|
+
/**
|
87
|
+
* The callback that fires when the state of the toggle changes.
|
88
|
+
*/
|
89
|
+
onPressedChange?(pressed: boolean): void;
|
90
|
+
}
|
91
|
+
declare const Toggle: React.ForwardRefExoticComponent<ToggleProps$1 & React.RefAttributes<HTMLButtonElement>>;
|
92
|
+
|
93
|
+
interface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, "pressed"> {
|
94
|
+
}
|
95
|
+
declare const ToggleGroupItem: React__default.ForwardRefExoticComponent<ToggleGroupItemProps & React__default.RefAttributes<HTMLButtonElement>>;
|
96
|
+
type ToggleProps = React__default.ComponentPropsWithoutRef<typeof Toggle>;
|
97
|
+
interface ToggleGroupItemImplProps extends Omit<ToggleProps, "defaultPressed" | "onPressedChange"> {
|
98
|
+
/**
|
99
|
+
* A string value for the toggle group item. All items within a toggle group should use a unique value.
|
100
|
+
*/
|
101
|
+
value: string;
|
102
|
+
}
|
103
|
+
|
104
|
+
export { Root, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupSingleProps, createToggleGroupScope };
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,104 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
import * as RovingFocusGroup from '@huin-core/react-roving-focus';
|
5
|
+
|
6
|
+
type Scope<C = any> = {
|
7
|
+
[scopeName: string]: React.Context<C>[];
|
8
|
+
} | undefined;
|
9
|
+
type ScopeHook = (scope: Scope) => {
|
10
|
+
[__scopeProp: string]: Scope;
|
11
|
+
};
|
12
|
+
interface CreateScope {
|
13
|
+
scopeName: string;
|
14
|
+
(): ScopeHook;
|
15
|
+
}
|
16
|
+
|
17
|
+
declare const createToggleGroupScope: CreateScope;
|
18
|
+
interface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {
|
19
|
+
type: 'single';
|
20
|
+
}
|
21
|
+
interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
|
22
|
+
type: 'multiple';
|
23
|
+
}
|
24
|
+
declare const ToggleGroup: React__default.ForwardRefExoticComponent<(ToggleGroupSingleProps | ToggleGroupMultipleProps) & React__default.RefAttributes<HTMLDivElement>>;
|
25
|
+
interface ToggleGroupImplSingleProps extends ToggleGroupImplProps {
|
26
|
+
/**
|
27
|
+
* The controlled stateful value of the item that is pressed.
|
28
|
+
*/
|
29
|
+
value?: string;
|
30
|
+
/**
|
31
|
+
* The value of the item that is pressed when initially rendered. Use
|
32
|
+
* `defaultValue` if you do not need to control the state of a toggle group.
|
33
|
+
*/
|
34
|
+
defaultValue?: string;
|
35
|
+
/**
|
36
|
+
* The callback that fires when the value of the toggle group changes.
|
37
|
+
*/
|
38
|
+
onValueChange?(value: string): void;
|
39
|
+
}
|
40
|
+
interface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {
|
41
|
+
/**
|
42
|
+
* The controlled stateful value of the items that are pressed.
|
43
|
+
*/
|
44
|
+
value?: string[];
|
45
|
+
/**
|
46
|
+
* The value of the items that are pressed when initially rendered. Use
|
47
|
+
* `defaultValue` if you do not need to control the state of a toggle group.
|
48
|
+
*/
|
49
|
+
defaultValue?: string[];
|
50
|
+
/**
|
51
|
+
* The callback that fires when the state of the toggle group changes.
|
52
|
+
*/
|
53
|
+
onValueChange?(value: string[]): void;
|
54
|
+
}
|
55
|
+
type RovingFocusGroupProps = React__default.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
|
56
|
+
type PrimitiveDivProps = React__default.ComponentPropsWithoutRef<typeof Primitive.div>;
|
57
|
+
interface ToggleGroupImplProps extends PrimitiveDivProps {
|
58
|
+
/**
|
59
|
+
* Whether the group is disabled from user interaction.
|
60
|
+
* @defaultValue false
|
61
|
+
*/
|
62
|
+
disabled?: boolean;
|
63
|
+
/**
|
64
|
+
* Whether the group should maintain roving focus of its buttons.
|
65
|
+
* @defaultValue true
|
66
|
+
*/
|
67
|
+
rovingFocus?: boolean;
|
68
|
+
loop?: RovingFocusGroupProps["loop"];
|
69
|
+
orientation?: RovingFocusGroupProps["orientation"];
|
70
|
+
dir?: RovingFocusGroupProps["dir"];
|
71
|
+
}
|
72
|
+
declare const Root: React__default.ForwardRefExoticComponent<(ToggleGroupSingleProps | ToggleGroupMultipleProps) & React__default.RefAttributes<HTMLDivElement>>;
|
73
|
+
|
74
|
+
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
|
75
|
+
interface ToggleProps$1 extends PrimitiveButtonProps {
|
76
|
+
/**
|
77
|
+
* The controlled state of the toggle.
|
78
|
+
*/
|
79
|
+
pressed?: boolean;
|
80
|
+
/**
|
81
|
+
* The state of the toggle when initially rendered. Use `defaultPressed`
|
82
|
+
* if you do not need to control the state of the toggle.
|
83
|
+
* @defaultValue false
|
84
|
+
*/
|
85
|
+
defaultPressed?: boolean;
|
86
|
+
/**
|
87
|
+
* The callback that fires when the state of the toggle changes.
|
88
|
+
*/
|
89
|
+
onPressedChange?(pressed: boolean): void;
|
90
|
+
}
|
91
|
+
declare const Toggle: React.ForwardRefExoticComponent<ToggleProps$1 & React.RefAttributes<HTMLButtonElement>>;
|
92
|
+
|
93
|
+
interface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, "pressed"> {
|
94
|
+
}
|
95
|
+
declare const ToggleGroupItem: React__default.ForwardRefExoticComponent<ToggleGroupItemProps & React__default.RefAttributes<HTMLButtonElement>>;
|
96
|
+
type ToggleProps = React__default.ComponentPropsWithoutRef<typeof Toggle>;
|
97
|
+
interface ToggleGroupItemImplProps extends Omit<ToggleProps, "defaultPressed" | "onPressedChange"> {
|
98
|
+
/**
|
99
|
+
* A string value for the toggle group item. All items within a toggle group should use a unique value.
|
100
|
+
*/
|
101
|
+
value: string;
|
102
|
+
}
|
103
|
+
|
104
|
+
export { Root, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupSingleProps, createToggleGroupScope };
|
package/dist/index.js
ADDED
@@ -0,0 +1,262 @@
|
|
1
|
+
"use strict";
|
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);
|
30
|
+
|
31
|
+
// packages/react/toggle-group/src/index.ts
|
32
|
+
var src_exports = {};
|
33
|
+
__export(src_exports, {
|
34
|
+
Root: () => Root2,
|
35
|
+
Toggle: () => Toggle,
|
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("@huin-core/react-context");
|
45
|
+
var import_react_primitive = require("@huin-core/react-primitive");
|
46
|
+
var RovingFocusGroup = __toESM(require("@huin-core/react-roving-focus"));
|
47
|
+
var import_react_roving_focus = require("@huin-core/react-roving-focus");
|
48
|
+
var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
|
49
|
+
var import_react_direction = require("@huin-core/react-direction");
|
50
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
51
|
+
var TOGGLE_GROUP_NAME = "ToggleGroup";
|
52
|
+
var [createToggleGroupContext, createToggleGroupScope] = (0, import_react_context.createContextScope)(
|
53
|
+
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 })
|
93
|
+
}
|
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
|
108
|
+
});
|
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(
|
115
|
+
(prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)
|
116
|
+
),
|
117
|
+
[setValue]
|
118
|
+
);
|
119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
120
|
+
ToggleGroupValueProvider,
|
121
|
+
{
|
122
|
+
scope: props.__scopeToggleGroup,
|
123
|
+
type: "multiple",
|
124
|
+
value,
|
125
|
+
onItemActivate: handleButtonActivate,
|
126
|
+
onItemDeactivate: handleButtonDeactivate,
|
127
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
|
128
|
+
}
|
129
|
+
);
|
130
|
+
});
|
131
|
+
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
132
|
+
var [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
133
|
+
var ToggleGroupImpl = import_react.default.forwardRef((props, forwardedRef) => {
|
134
|
+
const {
|
135
|
+
__scopeToggleGroup,
|
136
|
+
disabled = false,
|
137
|
+
rovingFocus = true,
|
138
|
+
orientation,
|
139
|
+
dir,
|
140
|
+
loop = true,
|
141
|
+
...toggleGroupProps
|
142
|
+
} = props;
|
143
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
|
144
|
+
const direction = (0, import_react_direction.useDirection)(dir);
|
145
|
+
const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
|
146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
147
|
+
ToggleGroupContext,
|
148
|
+
{
|
149
|
+
scope: __scopeToggleGroup,
|
150
|
+
rovingFocus,
|
151
|
+
disabled,
|
152
|
+
children: rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
153
|
+
RovingFocusGroup.Root,
|
154
|
+
{
|
155
|
+
asChild: true,
|
156
|
+
...rovingFocusGroupScope,
|
157
|
+
orientation,
|
158
|
+
dir: direction,
|
159
|
+
loop,
|
160
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...commonProps, ref: forwardedRef })
|
161
|
+
}
|
162
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...commonProps, ref: forwardedRef })
|
163
|
+
}
|
164
|
+
);
|
165
|
+
});
|
166
|
+
var Root2 = ToggleGroup;
|
167
|
+
|
168
|
+
// packages/react/toggle-group/src/Toggle.tsx
|
169
|
+
var React2 = __toESM(require("react"));
|
170
|
+
var import_primitive = require("@huin-core/primitive");
|
171
|
+
var import_react_use_controllable_state2 = require("@huin-core/react-use-controllable-state");
|
172
|
+
var import_react_primitive2 = require("@huin-core/react-primitive");
|
173
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
174
|
+
var NAME = "Toggle";
|
175
|
+
var Toggle = React2.forwardRef(
|
176
|
+
(props, forwardedRef) => {
|
177
|
+
const { pressed: pressedProp, defaultPressed = false, onPressedChange, ...buttonProps } = props;
|
178
|
+
const [pressed = false, setPressed] = (0, import_react_use_controllable_state2.useControllableState)({
|
179
|
+
prop: pressedProp,
|
180
|
+
onChange: onPressedChange,
|
181
|
+
defaultProp: defaultPressed
|
182
|
+
});
|
183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
184
|
+
import_react_primitive2.Primitive.button,
|
185
|
+
{
|
186
|
+
type: "button",
|
187
|
+
"aria-pressed": pressed,
|
188
|
+
"data-state": pressed ? "on" : "off",
|
189
|
+
"data-disabled": props.disabled ? "" : void 0,
|
190
|
+
...buttonProps,
|
191
|
+
ref: forwardedRef,
|
192
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => {
|
193
|
+
if (!props.disabled) {
|
194
|
+
setPressed(!pressed);
|
195
|
+
}
|
196
|
+
})
|
197
|
+
}
|
198
|
+
);
|
199
|
+
}
|
200
|
+
);
|
201
|
+
Toggle.displayName = NAME;
|
202
|
+
|
203
|
+
// packages/react/toggle-group/src/ToggleGroupItem.tsx
|
204
|
+
var import_react2 = __toESM(require("react"));
|
205
|
+
var RovingFocusGroup2 = __toESM(require("@huin-core/react-roving-focus"));
|
206
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
207
|
+
var ITEM_NAME = "ToggleGroupItem";
|
208
|
+
var ToggleGroupItem = import_react2.default.forwardRef((props, forwardedRef) => {
|
209
|
+
const valueContext = useToggleGroupValueContext(
|
210
|
+
ITEM_NAME,
|
211
|
+
props.__scopeToggleGroup
|
212
|
+
);
|
213
|
+
const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);
|
214
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(
|
215
|
+
props.__scopeToggleGroup
|
216
|
+
);
|
217
|
+
const pressed = valueContext.value.includes(props.value);
|
218
|
+
const disabled = context.disabled || props.disabled;
|
219
|
+
const commonProps = { ...props, pressed, disabled };
|
220
|
+
const ref = import_react2.default.useRef(null);
|
221
|
+
return context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
222
|
+
RovingFocusGroup2.Item,
|
223
|
+
{
|
224
|
+
asChild: true,
|
225
|
+
...rovingFocusGroupScope,
|
226
|
+
focusable: !disabled,
|
227
|
+
active: pressed,
|
228
|
+
ref,
|
229
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
|
230
|
+
}
|
231
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupItemImpl, { "data-state": true, ...commonProps, ref: forwardedRef });
|
232
|
+
});
|
233
|
+
ToggleGroupItem.displayName = ITEM_NAME;
|
234
|
+
var ToggleGroupItemImpl = import_react2.default.forwardRef((props, forwardedRef) => {
|
235
|
+
const { __scopeToggleGroup, value, ...itemProps } = props;
|
236
|
+
const valueContext = useToggleGroupValueContext(
|
237
|
+
ITEM_NAME,
|
238
|
+
__scopeToggleGroup
|
239
|
+
);
|
240
|
+
const singleProps = {
|
241
|
+
role: "radio",
|
242
|
+
"aria-checked": props.pressed,
|
243
|
+
"aria-pressed": void 0
|
244
|
+
};
|
245
|
+
const typeProps = valueContext.type === "single" ? singleProps : void 0;
|
246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
247
|
+
Toggle,
|
248
|
+
{
|
249
|
+
...typeProps,
|
250
|
+
...itemProps,
|
251
|
+
ref: forwardedRef,
|
252
|
+
onPressedChange: (pressed) => {
|
253
|
+
if (pressed) {
|
254
|
+
valueContext.onItemActivate(value);
|
255
|
+
} else {
|
256
|
+
valueContext.onItemDeactivate(value);
|
257
|
+
}
|
258
|
+
}
|
259
|
+
}
|
260
|
+
);
|
261
|
+
});
|
262
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/index.ts", "../src/ToggleGroup.tsx", "../src/Toggle.tsx", "../src/ToggleGroupItem.tsx"],
|
4
|
+
"sourcesContent": ["\"use client\";\nexport { createToggleGroupScope, ToggleGroup, Root } from \"./ToggleGroup\";\nexport { Toggle } from \"./Toggle\";\nexport { ToggleGroupItem } from \"./ToggleGroupItem\";\n\nexport type {\n ToggleGroupSingleProps,\n ToggleGroupMultipleProps,\n} from \"./ToggleGroup\";\nexport type { ToggleGroupItemProps } from \"./ToggleGroupItem\";\n", "import React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\nimport { createRovingFocusGroupScope } from \"@huin-core/react-roving-focus\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\nimport { useDirection } from \"@huin-core/react-direction\";\nimport type { Scope } from \"@huin-core/react-context\";\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = \"ToggleGroup\";\n\nexport type ScopedProps<P> = P & { __scopeToggleGroup?: Scope };\nconst [createToggleGroupContext, createToggleGroupScope] = createContextScope(\n TOGGLE_GROUP_NAME,\n [createRovingFocusGroupScope]\n);\nexport const 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\nexport const [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) =>\n setValue((prevValue = []) => [...prevValue, itemValue]),\n [setValue]\n );\n\n const handleButtonDeactivate = React.useCallback(\n (itemValue: string) =>\n setValue((prevValue = []) =>\n prevValue.filter((value) => value !== itemValue)\n ),\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\n export const [ToggleGroupContext, useToggleGroupContext] =\n createToggleGroupContext<ToggleGroupContextValue>(TOGGLE_GROUP_NAME);\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<\n typeof RovingFocusGroup.Root\n>;\ntype ToggleGroupImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.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<\n ToggleGroupImplElement,\n 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\n scope={__scopeToggleGroup}\n rovingFocus={rovingFocus}\n disabled={disabled}\n >\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\nconst Root = ToggleGroup;\n\nexport { createToggleGroupScope, ToggleGroup, Root };\nexport type { ToggleGroupSingleProps, ToggleGroupMultipleProps };\n", "import * as React from \"react\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\nimport { Primitive } from \"@huin-core/react-primitive\";\n\n/* -------------------------------------------------------------------------------------------------\n * Toggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = \"Toggle\";\n\ntype ToggleElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface ToggleProps extends PrimitiveButtonProps {\n /**\n * The controlled state of the toggle.\n */\n pressed?: boolean;\n /**\n * The state of the toggle when initially rendered. Use `defaultPressed`\n * if you do not need to control the state of the toggle.\n * @defaultValue false\n */\n defaultPressed?: boolean;\n /**\n * The callback that fires when the state of the toggle changes.\n */\n onPressedChange?(pressed: boolean): void;\n}\n\nconst Toggle = React.forwardRef<ToggleElement, ToggleProps>(\n (props, forwardedRef) => {\n const { pressed: pressedProp, defaultPressed = false, onPressedChange, ...buttonProps } = props;\n\n\n const [pressed = false, setPressed] = useControllableState({\n prop: pressedProp,\n onChange: onPressedChange,\n defaultProp: defaultPressed,\n });\n\n \n return (\n <Primitive.button\n type=\"button\"\n aria-pressed={pressed}\n data-state={pressed ? 'on' : 'off'}\n data-disabled={props.disabled ? '' : undefined}\n {...buttonProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, () => {\n if (!props.disabled) {\n setPressed(!pressed);\n }\n })}\n />\n );\n }\n);\n\nToggle.displayName = NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = Toggle;\n\nexport {\n Toggle,\n //\n Root,\n};\nexport type { ToggleProps };\n", "import React from \"react\";\nimport { ScopedProps, useRovingFocusGroupScope, useToggleGroupContext, useToggleGroupValueContext } from \"./ToggleGroup\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\nimport { Toggle } from \".\";\n\nconst ITEM_NAME = \"ToggleGroupItem\";\n\ntype ToggleGroupItemElement = ToggleGroupItemImplElement;\ninterface ToggleGroupItemProps\n extends Omit<ToggleGroupItemImplProps, \"pressed\"> {}\n\nconst ToggleGroupItem = React.forwardRef<\n ToggleGroupItemElement,\n ToggleGroupItemProps\n>((props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {\n const valueContext = useToggleGroupValueContext(\n ITEM_NAME,\n props.__scopeToggleGroup\n );\n const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);\n const rovingFocusGroupScope = useRovingFocusGroupScope(\n props.__scopeToggleGroup\n );\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 data-state {...commonProps} ref={forwardedRef} />\n );\n});\n\nToggleGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupItemImplElement = React.ElementRef<typeof Toggle>;\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle>;\ninterface ToggleGroupItemImplProps\n 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<\n ToggleGroupItemImplElement,\n ToggleGroupItemImplProps\n>((props: ScopedProps<ToggleGroupItemImplProps>, forwardedRef) => {\n const { __scopeToggleGroup, value, ...itemProps } = props;\n const valueContext = useToggleGroupValueContext(\n ITEM_NAME,\n __scopeToggleGroup\n );\n const singleProps = {\n role: \"radio\",\n \"aria-checked\": props.pressed,\n \"aria-pressed\": undefined,\n };\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\nexport { ToggleGroupItem };\nexport type { ToggleGroupItemProps };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["Root", "React", "value", "Root", "React", "import_react_use_controllable_state", "import_react_primitive", "import_jsx_runtime", "import_react", "RovingFocusGroup", "import_jsx_runtime", "React"]
|
7
|
+
}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,230 @@
|
|
1
|
+
"use client";
|
2
|
+
|
3
|
+
// packages/react/toggle-group/src/ToggleGroup.tsx
|
4
|
+
import React from "react";
|
5
|
+
import { createContextScope } from "@huin-core/react-context";
|
6
|
+
import { Primitive } from "@huin-core/react-primitive";
|
7
|
+
import * as RovingFocusGroup from "@huin-core/react-roving-focus";
|
8
|
+
import { createRovingFocusGroupScope } from "@huin-core/react-roving-focus";
|
9
|
+
import { useControllableState } from "@huin-core/react-use-controllable-state";
|
10
|
+
import { useDirection } from "@huin-core/react-direction";
|
11
|
+
import { jsx } from "react/jsx-runtime";
|
12
|
+
var TOGGLE_GROUP_NAME = "ToggleGroup";
|
13
|
+
var [createToggleGroupContext, createToggleGroupScope] = createContextScope(
|
14
|
+
TOGGLE_GROUP_NAME,
|
15
|
+
[createRovingFocusGroupScope]
|
16
|
+
);
|
17
|
+
var useRovingFocusGroupScope = createRovingFocusGroupScope();
|
18
|
+
var ToggleGroup = React.forwardRef((props, forwardedRef) => {
|
19
|
+
const { type, ...toggleGroupProps } = props;
|
20
|
+
if (type === "single") {
|
21
|
+
const singleProps = toggleGroupProps;
|
22
|
+
return /* @__PURE__ */ jsx(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
|
23
|
+
}
|
24
|
+
if (type === "multiple") {
|
25
|
+
const multipleProps = toggleGroupProps;
|
26
|
+
return /* @__PURE__ */ jsx(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
|
27
|
+
}
|
28
|
+
throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
|
29
|
+
});
|
30
|
+
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
31
|
+
var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
32
|
+
var ToggleGroupImplSingle = React.forwardRef((props, forwardedRef) => {
|
33
|
+
const {
|
34
|
+
value: valueProp,
|
35
|
+
defaultValue,
|
36
|
+
onValueChange = () => {
|
37
|
+
},
|
38
|
+
...toggleGroupSingleProps
|
39
|
+
} = props;
|
40
|
+
const [value, setValue] = useControllableState({
|
41
|
+
prop: valueProp,
|
42
|
+
defaultProp: defaultValue,
|
43
|
+
onChange: onValueChange
|
44
|
+
});
|
45
|
+
return /* @__PURE__ */ jsx(
|
46
|
+
ToggleGroupValueProvider,
|
47
|
+
{
|
48
|
+
scope: props.__scopeToggleGroup,
|
49
|
+
type: "single",
|
50
|
+
value: value ? [value] : [],
|
51
|
+
onItemActivate: setValue,
|
52
|
+
onItemDeactivate: React.useCallback(() => setValue(""), [setValue]),
|
53
|
+
children: /* @__PURE__ */ jsx(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
|
54
|
+
}
|
55
|
+
);
|
56
|
+
});
|
57
|
+
var ToggleGroupImplMultiple = React.forwardRef((props, forwardedRef) => {
|
58
|
+
const {
|
59
|
+
value: valueProp,
|
60
|
+
defaultValue,
|
61
|
+
onValueChange = () => {
|
62
|
+
},
|
63
|
+
...toggleGroupMultipleProps
|
64
|
+
} = props;
|
65
|
+
const [value = [], setValue] = useControllableState({
|
66
|
+
prop: valueProp,
|
67
|
+
defaultProp: defaultValue,
|
68
|
+
onChange: onValueChange
|
69
|
+
});
|
70
|
+
const handleButtonActivate = React.useCallback(
|
71
|
+
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
|
72
|
+
[setValue]
|
73
|
+
);
|
74
|
+
const handleButtonDeactivate = React.useCallback(
|
75
|
+
(itemValue) => setValue(
|
76
|
+
(prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)
|
77
|
+
),
|
78
|
+
[setValue]
|
79
|
+
);
|
80
|
+
return /* @__PURE__ */ jsx(
|
81
|
+
ToggleGroupValueProvider,
|
82
|
+
{
|
83
|
+
scope: props.__scopeToggleGroup,
|
84
|
+
type: "multiple",
|
85
|
+
value,
|
86
|
+
onItemActivate: handleButtonActivate,
|
87
|
+
onItemDeactivate: handleButtonDeactivate,
|
88
|
+
children: /* @__PURE__ */ jsx(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
|
89
|
+
}
|
90
|
+
);
|
91
|
+
});
|
92
|
+
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
93
|
+
var [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
94
|
+
var ToggleGroupImpl = React.forwardRef((props, forwardedRef) => {
|
95
|
+
const {
|
96
|
+
__scopeToggleGroup,
|
97
|
+
disabled = false,
|
98
|
+
rovingFocus = true,
|
99
|
+
orientation,
|
100
|
+
dir,
|
101
|
+
loop = true,
|
102
|
+
...toggleGroupProps
|
103
|
+
} = props;
|
104
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
|
105
|
+
const direction = useDirection(dir);
|
106
|
+
const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
|
107
|
+
return /* @__PURE__ */ jsx(
|
108
|
+
ToggleGroupContext,
|
109
|
+
{
|
110
|
+
scope: __scopeToggleGroup,
|
111
|
+
rovingFocus,
|
112
|
+
disabled,
|
113
|
+
children: rovingFocus ? /* @__PURE__ */ jsx(
|
114
|
+
RovingFocusGroup.Root,
|
115
|
+
{
|
116
|
+
asChild: true,
|
117
|
+
...rovingFocusGroupScope,
|
118
|
+
orientation,
|
119
|
+
dir: direction,
|
120
|
+
loop,
|
121
|
+
children: /* @__PURE__ */ jsx(Primitive.div, { ...commonProps, ref: forwardedRef })
|
122
|
+
}
|
123
|
+
) : /* @__PURE__ */ jsx(Primitive.div, { ...commonProps, ref: forwardedRef })
|
124
|
+
}
|
125
|
+
);
|
126
|
+
});
|
127
|
+
var Root2 = ToggleGroup;
|
128
|
+
|
129
|
+
// packages/react/toggle-group/src/Toggle.tsx
|
130
|
+
import * as React2 from "react";
|
131
|
+
import { composeEventHandlers } from "@huin-core/primitive";
|
132
|
+
import { useControllableState as useControllableState2 } from "@huin-core/react-use-controllable-state";
|
133
|
+
import { Primitive as Primitive2 } from "@huin-core/react-primitive";
|
134
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
135
|
+
var NAME = "Toggle";
|
136
|
+
var Toggle = React2.forwardRef(
|
137
|
+
(props, forwardedRef) => {
|
138
|
+
const { pressed: pressedProp, defaultPressed = false, onPressedChange, ...buttonProps } = props;
|
139
|
+
const [pressed = false, setPressed] = useControllableState2({
|
140
|
+
prop: pressedProp,
|
141
|
+
onChange: onPressedChange,
|
142
|
+
defaultProp: defaultPressed
|
143
|
+
});
|
144
|
+
return /* @__PURE__ */ jsx2(
|
145
|
+
Primitive2.button,
|
146
|
+
{
|
147
|
+
type: "button",
|
148
|
+
"aria-pressed": pressed,
|
149
|
+
"data-state": pressed ? "on" : "off",
|
150
|
+
"data-disabled": props.disabled ? "" : void 0,
|
151
|
+
...buttonProps,
|
152
|
+
ref: forwardedRef,
|
153
|
+
onClick: composeEventHandlers(props.onClick, () => {
|
154
|
+
if (!props.disabled) {
|
155
|
+
setPressed(!pressed);
|
156
|
+
}
|
157
|
+
})
|
158
|
+
}
|
159
|
+
);
|
160
|
+
}
|
161
|
+
);
|
162
|
+
Toggle.displayName = NAME;
|
163
|
+
|
164
|
+
// packages/react/toggle-group/src/ToggleGroupItem.tsx
|
165
|
+
import React3 from "react";
|
166
|
+
import * as RovingFocusGroup2 from "@huin-core/react-roving-focus";
|
167
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
168
|
+
var ITEM_NAME = "ToggleGroupItem";
|
169
|
+
var ToggleGroupItem = React3.forwardRef((props, forwardedRef) => {
|
170
|
+
const valueContext = useToggleGroupValueContext(
|
171
|
+
ITEM_NAME,
|
172
|
+
props.__scopeToggleGroup
|
173
|
+
);
|
174
|
+
const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);
|
175
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(
|
176
|
+
props.__scopeToggleGroup
|
177
|
+
);
|
178
|
+
const pressed = valueContext.value.includes(props.value);
|
179
|
+
const disabled = context.disabled || props.disabled;
|
180
|
+
const commonProps = { ...props, pressed, disabled };
|
181
|
+
const ref = React3.useRef(null);
|
182
|
+
return context.rovingFocus ? /* @__PURE__ */ jsx3(
|
183
|
+
RovingFocusGroup2.Item,
|
184
|
+
{
|
185
|
+
asChild: true,
|
186
|
+
...rovingFocusGroupScope,
|
187
|
+
focusable: !disabled,
|
188
|
+
active: pressed,
|
189
|
+
ref,
|
190
|
+
children: /* @__PURE__ */ jsx3(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
|
191
|
+
}
|
192
|
+
) : /* @__PURE__ */ jsx3(ToggleGroupItemImpl, { "data-state": true, ...commonProps, ref: forwardedRef });
|
193
|
+
});
|
194
|
+
ToggleGroupItem.displayName = ITEM_NAME;
|
195
|
+
var ToggleGroupItemImpl = React3.forwardRef((props, forwardedRef) => {
|
196
|
+
const { __scopeToggleGroup, value, ...itemProps } = props;
|
197
|
+
const valueContext = useToggleGroupValueContext(
|
198
|
+
ITEM_NAME,
|
199
|
+
__scopeToggleGroup
|
200
|
+
);
|
201
|
+
const singleProps = {
|
202
|
+
role: "radio",
|
203
|
+
"aria-checked": props.pressed,
|
204
|
+
"aria-pressed": void 0
|
205
|
+
};
|
206
|
+
const typeProps = valueContext.type === "single" ? singleProps : void 0;
|
207
|
+
return /* @__PURE__ */ jsx3(
|
208
|
+
Toggle,
|
209
|
+
{
|
210
|
+
...typeProps,
|
211
|
+
...itemProps,
|
212
|
+
ref: forwardedRef,
|
213
|
+
onPressedChange: (pressed) => {
|
214
|
+
if (pressed) {
|
215
|
+
valueContext.onItemActivate(value);
|
216
|
+
} else {
|
217
|
+
valueContext.onItemDeactivate(value);
|
218
|
+
}
|
219
|
+
}
|
220
|
+
}
|
221
|
+
);
|
222
|
+
});
|
223
|
+
export {
|
224
|
+
Root2 as Root,
|
225
|
+
Toggle,
|
226
|
+
ToggleGroup,
|
227
|
+
ToggleGroupItem,
|
228
|
+
createToggleGroupScope
|
229
|
+
};
|
230
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/ToggleGroup.tsx", "../src/Toggle.tsx", "../src/ToggleGroupItem.tsx"],
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\nimport { createRovingFocusGroupScope } from \"@huin-core/react-roving-focus\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\nimport { useDirection } from \"@huin-core/react-direction\";\nimport type { Scope } from \"@huin-core/react-context\";\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = \"ToggleGroup\";\n\nexport type ScopedProps<P> = P & { __scopeToggleGroup?: Scope };\nconst [createToggleGroupContext, createToggleGroupScope] = createContextScope(\n TOGGLE_GROUP_NAME,\n [createRovingFocusGroupScope]\n);\nexport const 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\nexport const [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) =>\n setValue((prevValue = []) => [...prevValue, itemValue]),\n [setValue]\n );\n\n const handleButtonDeactivate = React.useCallback(\n (itemValue: string) =>\n setValue((prevValue = []) =>\n prevValue.filter((value) => value !== itemValue)\n ),\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\n export const [ToggleGroupContext, useToggleGroupContext] =\n createToggleGroupContext<ToggleGroupContextValue>(TOGGLE_GROUP_NAME);\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<\n typeof RovingFocusGroup.Root\n>;\ntype ToggleGroupImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.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<\n ToggleGroupImplElement,\n 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\n scope={__scopeToggleGroup}\n rovingFocus={rovingFocus}\n disabled={disabled}\n >\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\nconst Root = ToggleGroup;\n\nexport { createToggleGroupScope, ToggleGroup, Root };\nexport type { ToggleGroupSingleProps, ToggleGroupMultipleProps };\n", "import * as React from \"react\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\nimport { Primitive } from \"@huin-core/react-primitive\";\n\n/* -------------------------------------------------------------------------------------------------\n * Toggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = \"Toggle\";\n\ntype ToggleElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface ToggleProps extends PrimitiveButtonProps {\n /**\n * The controlled state of the toggle.\n */\n pressed?: boolean;\n /**\n * The state of the toggle when initially rendered. Use `defaultPressed`\n * if you do not need to control the state of the toggle.\n * @defaultValue false\n */\n defaultPressed?: boolean;\n /**\n * The callback that fires when the state of the toggle changes.\n */\n onPressedChange?(pressed: boolean): void;\n}\n\nconst Toggle = React.forwardRef<ToggleElement, ToggleProps>(\n (props, forwardedRef) => {\n const { pressed: pressedProp, defaultPressed = false, onPressedChange, ...buttonProps } = props;\n\n\n const [pressed = false, setPressed] = useControllableState({\n prop: pressedProp,\n onChange: onPressedChange,\n defaultProp: defaultPressed,\n });\n\n \n return (\n <Primitive.button\n type=\"button\"\n aria-pressed={pressed}\n data-state={pressed ? 'on' : 'off'}\n data-disabled={props.disabled ? '' : undefined}\n {...buttonProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, () => {\n if (!props.disabled) {\n setPressed(!pressed);\n }\n })}\n />\n );\n }\n);\n\nToggle.displayName = NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = Toggle;\n\nexport {\n Toggle,\n //\n Root,\n};\nexport type { ToggleProps };\n", "import React from \"react\";\nimport { ScopedProps, useRovingFocusGroupScope, useToggleGroupContext, useToggleGroupValueContext } from \"./ToggleGroup\";\nimport * as RovingFocusGroup from \"@huin-core/react-roving-focus\";\nimport { Toggle } from \".\";\n\nconst ITEM_NAME = \"ToggleGroupItem\";\n\ntype ToggleGroupItemElement = ToggleGroupItemImplElement;\ninterface ToggleGroupItemProps\n extends Omit<ToggleGroupItemImplProps, \"pressed\"> {}\n\nconst ToggleGroupItem = React.forwardRef<\n ToggleGroupItemElement,\n ToggleGroupItemProps\n>((props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {\n const valueContext = useToggleGroupValueContext(\n ITEM_NAME,\n props.__scopeToggleGroup\n );\n const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);\n const rovingFocusGroupScope = useRovingFocusGroupScope(\n props.__scopeToggleGroup\n );\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 data-state {...commonProps} ref={forwardedRef} />\n );\n});\n\nToggleGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupItemImplElement = React.ElementRef<typeof Toggle>;\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle>;\ninterface ToggleGroupItemImplProps\n 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<\n ToggleGroupItemImplElement,\n ToggleGroupItemImplProps\n>((props: ScopedProps<ToggleGroupItemImplProps>, forwardedRef) => {\n const { __scopeToggleGroup, value, ...itemProps } = props;\n const valueContext = useToggleGroupValueContext(\n ITEM_NAME,\n __scopeToggleGroup\n );\n const singleProps = {\n role: \"radio\",\n \"aria-checked\": props.pressed,\n \"aria-pressed\": undefined,\n };\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\nexport { ToggleGroupItem };\nexport type { ToggleGroupItemProps };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["value", "Root", "React", "useControllableState", "Primitive", "jsx", "React", "RovingFocusGroup", "jsx", "React"]
|
7
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@huin-core/react-toggle-group",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.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
|
-
"@huin-core/primitive": "
|
32
|
-
"@huin-core/react-context": "
|
33
|
-
"@huin-core/react-direction": "
|
34
|
-
"@huin-core/react-primitive": "
|
35
|
-
"@huin-core/react-roving-focus": "
|
36
|
-
"@huin-core/react-toggle": "
|
37
|
-
"@huin-core/react-use-controllable-state": "
|
31
|
+
"@huin-core/primitive": "latest",
|
32
|
+
"@huin-core/react-context": "latest",
|
33
|
+
"@huin-core/react-direction": "latest",
|
34
|
+
"@huin-core/react-primitive": "latest",
|
35
|
+
"@huin-core/react-roving-focus": "latest",
|
36
|
+
"@huin-core/react-toggle": "latest",
|
37
|
+
"@huin-core/react-use-controllable-state": "latest"
|
38
38
|
},
|
39
39
|
"peerDependencies": {
|
40
40
|
"@types/react": "*",
|