@huin-core/react-toggle-group 1.0.5 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/index.js +31 -34
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +31 -34
- package/dist/index.mjs.map +2 -2
- package/package.json +2 -3
package/README.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -47,7 +47,6 @@ var RovingFocusGroup = __toESM(require("@huin-core/react-roving-focus"));
|
|
|
47
47
|
var import_react_roving_focus = require("@huin-core/react-roving-focus");
|
|
48
48
|
var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
|
|
49
49
|
var import_react_direction = require("@huin-core/react-direction");
|
|
50
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
51
50
|
var TOGGLE_GROUP_NAME = "ToggleGroup";
|
|
52
51
|
var [createToggleGroupContext, createToggleGroupScope] = (0, import_react_context.createContextScope)(
|
|
53
52
|
TOGGLE_GROUP_NAME,
|
|
@@ -58,11 +57,11 @@ var ToggleGroup = import_react.default.forwardRef((props, forwardedRef) => {
|
|
|
58
57
|
const { type, ...toggleGroupProps } = props;
|
|
59
58
|
if (type === "single") {
|
|
60
59
|
const singleProps = toggleGroupProps;
|
|
61
|
-
return /* @__PURE__ */
|
|
60
|
+
return /* @__PURE__ */ import_react.default.createElement(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
|
|
62
61
|
}
|
|
63
62
|
if (type === "multiple") {
|
|
64
63
|
const multipleProps = toggleGroupProps;
|
|
65
|
-
return /* @__PURE__ */
|
|
64
|
+
return /* @__PURE__ */ import_react.default.createElement(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
|
|
66
65
|
}
|
|
67
66
|
throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
|
|
68
67
|
});
|
|
@@ -81,16 +80,16 @@ var ToggleGroupImplSingle = import_react.default.forwardRef((props, forwardedRef
|
|
|
81
80
|
defaultProp: defaultValue,
|
|
82
81
|
onChange: onValueChange
|
|
83
82
|
});
|
|
84
|
-
return /* @__PURE__ */
|
|
83
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
85
84
|
ToggleGroupValueProvider,
|
|
86
85
|
{
|
|
87
86
|
scope: props.__scopeToggleGroup,
|
|
88
87
|
type: "single",
|
|
89
88
|
value: value ? [value] : [],
|
|
90
89
|
onItemActivate: setValue,
|
|
91
|
-
onItemDeactivate: import_react.default.useCallback(() => setValue(""), [setValue])
|
|
92
|
-
|
|
93
|
-
}
|
|
90
|
+
onItemDeactivate: import_react.default.useCallback(() => setValue(""), [setValue])
|
|
91
|
+
},
|
|
92
|
+
/* @__PURE__ */ import_react.default.createElement(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
|
|
94
93
|
);
|
|
95
94
|
});
|
|
96
95
|
var ToggleGroupImplMultiple = import_react.default.forwardRef((props, forwardedRef) => {
|
|
@@ -116,16 +115,16 @@ var ToggleGroupImplMultiple = import_react.default.forwardRef((props, forwardedR
|
|
|
116
115
|
),
|
|
117
116
|
[setValue]
|
|
118
117
|
);
|
|
119
|
-
return /* @__PURE__ */
|
|
118
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
120
119
|
ToggleGroupValueProvider,
|
|
121
120
|
{
|
|
122
121
|
scope: props.__scopeToggleGroup,
|
|
123
122
|
type: "multiple",
|
|
124
123
|
value,
|
|
125
124
|
onItemActivate: handleButtonActivate,
|
|
126
|
-
onItemDeactivate: handleButtonDeactivate
|
|
127
|
-
|
|
128
|
-
}
|
|
125
|
+
onItemDeactivate: handleButtonDeactivate
|
|
126
|
+
},
|
|
127
|
+
/* @__PURE__ */ import_react.default.createElement(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
|
|
129
128
|
);
|
|
130
129
|
});
|
|
131
130
|
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
@@ -143,24 +142,24 @@ var ToggleGroupImpl = import_react.default.forwardRef((props, forwardedRef) => {
|
|
|
143
142
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
|
|
144
143
|
const direction = (0, import_react_direction.useDirection)(dir);
|
|
145
144
|
const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
|
|
146
|
-
return /* @__PURE__ */
|
|
145
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
147
146
|
ToggleGroupContext,
|
|
148
147
|
{
|
|
149
148
|
scope: __scopeToggleGroup,
|
|
150
149
|
rovingFocus,
|
|
151
|
-
disabled
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
150
|
+
disabled
|
|
151
|
+
},
|
|
152
|
+
rovingFocus ? /* @__PURE__ */ import_react.default.createElement(
|
|
153
|
+
RovingFocusGroup.Root,
|
|
154
|
+
{
|
|
155
|
+
asChild: true,
|
|
156
|
+
...rovingFocusGroupScope,
|
|
157
|
+
orientation,
|
|
158
|
+
dir: direction,
|
|
159
|
+
loop
|
|
160
|
+
},
|
|
161
|
+
/* @__PURE__ */ import_react.default.createElement(import_react_primitive.Primitive.div, { ...commonProps, ref: forwardedRef })
|
|
162
|
+
) : /* @__PURE__ */ import_react.default.createElement(import_react_primitive.Primitive.div, { ...commonProps, ref: forwardedRef })
|
|
164
163
|
);
|
|
165
164
|
});
|
|
166
165
|
var Root2 = ToggleGroup;
|
|
@@ -170,7 +169,6 @@ var React2 = __toESM(require("react"));
|
|
|
170
169
|
var import_primitive = require("@huin-core/primitive");
|
|
171
170
|
var import_react_use_controllable_state2 = require("@huin-core/react-use-controllable-state");
|
|
172
171
|
var import_react_primitive2 = require("@huin-core/react-primitive");
|
|
173
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
174
172
|
var NAME = "Toggle";
|
|
175
173
|
var Toggle = React2.forwardRef(
|
|
176
174
|
(props, forwardedRef) => {
|
|
@@ -180,7 +178,7 @@ var Toggle = React2.forwardRef(
|
|
|
180
178
|
onChange: onPressedChange,
|
|
181
179
|
defaultProp: defaultPressed
|
|
182
180
|
});
|
|
183
|
-
return /* @__PURE__ */
|
|
181
|
+
return /* @__PURE__ */ React2.createElement(
|
|
184
182
|
import_react_primitive2.Primitive.button,
|
|
185
183
|
{
|
|
186
184
|
type: "button",
|
|
@@ -203,7 +201,6 @@ Toggle.displayName = NAME;
|
|
|
203
201
|
// packages/react/toggle-group/src/ToggleGroupItem.tsx
|
|
204
202
|
var import_react2 = __toESM(require("react"));
|
|
205
203
|
var RovingFocusGroup2 = __toESM(require("@huin-core/react-roving-focus"));
|
|
206
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
207
204
|
var ITEM_NAME = "ToggleGroupItem";
|
|
208
205
|
var ToggleGroupItem = import_react2.default.forwardRef((props, forwardedRef) => {
|
|
209
206
|
const valueContext = useToggleGroupValueContext(
|
|
@@ -218,17 +215,17 @@ var ToggleGroupItem = import_react2.default.forwardRef((props, forwardedRef) =>
|
|
|
218
215
|
const disabled = context.disabled || props.disabled;
|
|
219
216
|
const commonProps = { ...props, pressed, disabled };
|
|
220
217
|
const ref = import_react2.default.useRef(null);
|
|
221
|
-
return context.rovingFocus ? /* @__PURE__ */
|
|
218
|
+
return context.rovingFocus ? /* @__PURE__ */ import_react2.default.createElement(
|
|
222
219
|
RovingFocusGroup2.Item,
|
|
223
220
|
{
|
|
224
221
|
asChild: true,
|
|
225
222
|
...rovingFocusGroupScope,
|
|
226
223
|
focusable: !disabled,
|
|
227
224
|
active: pressed,
|
|
228
|
-
ref
|
|
229
|
-
|
|
230
|
-
}
|
|
231
|
-
) : /* @__PURE__ */
|
|
225
|
+
ref
|
|
226
|
+
},
|
|
227
|
+
/* @__PURE__ */ import_react2.default.createElement(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
|
|
228
|
+
) : /* @__PURE__ */ import_react2.default.createElement(ToggleGroupItemImpl, { "data-state": true, ...commonProps, ref: forwardedRef });
|
|
232
229
|
});
|
|
233
230
|
ToggleGroupItem.displayName = ITEM_NAME;
|
|
234
231
|
var ToggleGroupItemImpl = import_react2.default.forwardRef((props, forwardedRef) => {
|
|
@@ -243,7 +240,7 @@ var ToggleGroupItemImpl = import_react2.default.forwardRef((props, forwardedRef)
|
|
|
243
240
|
"aria-pressed": void 0
|
|
244
241
|
};
|
|
245
242
|
const typeProps = valueContext.type === "single" ? singleProps : void 0;
|
|
246
|
-
return /* @__PURE__ */
|
|
243
|
+
return /* @__PURE__ */ import_react2.default.createElement(
|
|
247
244
|
Toggle,
|
|
248
245
|
{
|
|
249
246
|
...typeProps,
|
package/dist/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/ToggleGroup.tsx", "../src/Toggle.tsx", "../src/ToggleGroupItem.tsx"],
|
|
4
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,cAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,2BAAmC;AACnC,6BAA0B;AAC1B,uBAAkC;AAClC,gCAA4C;AAC5C,0CAAqC;AACrC,6BAA6B;
|
|
6
|
-
"names": ["Root", "React", "value", "Root", "React", "import_react_use_controllable_state", "import_react_primitive", "
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Root", "React", "value", "Root", "React", "import_react_use_controllable_state", "import_react_primitive", "import_react", "RovingFocusGroup", "React"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -8,7 +8,6 @@ import * as RovingFocusGroup from "@huin-core/react-roving-focus";
|
|
|
8
8
|
import { createRovingFocusGroupScope } from "@huin-core/react-roving-focus";
|
|
9
9
|
import { useControllableState } from "@huin-core/react-use-controllable-state";
|
|
10
10
|
import { useDirection } from "@huin-core/react-direction";
|
|
11
|
-
import { jsx } from "react/jsx-runtime";
|
|
12
11
|
var TOGGLE_GROUP_NAME = "ToggleGroup";
|
|
13
12
|
var [createToggleGroupContext, createToggleGroupScope] = createContextScope(
|
|
14
13
|
TOGGLE_GROUP_NAME,
|
|
@@ -19,11 +18,11 @@ var ToggleGroup = React.forwardRef((props, forwardedRef) => {
|
|
|
19
18
|
const { type, ...toggleGroupProps } = props;
|
|
20
19
|
if (type === "single") {
|
|
21
20
|
const singleProps = toggleGroupProps;
|
|
22
|
-
return /* @__PURE__ */
|
|
21
|
+
return /* @__PURE__ */ React.createElement(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
|
|
23
22
|
}
|
|
24
23
|
if (type === "multiple") {
|
|
25
24
|
const multipleProps = toggleGroupProps;
|
|
26
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ React.createElement(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
|
|
27
26
|
}
|
|
28
27
|
throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
|
|
29
28
|
});
|
|
@@ -42,16 +41,16 @@ var ToggleGroupImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
|
42
41
|
defaultProp: defaultValue,
|
|
43
42
|
onChange: onValueChange
|
|
44
43
|
});
|
|
45
|
-
return /* @__PURE__ */
|
|
44
|
+
return /* @__PURE__ */ React.createElement(
|
|
46
45
|
ToggleGroupValueProvider,
|
|
47
46
|
{
|
|
48
47
|
scope: props.__scopeToggleGroup,
|
|
49
48
|
type: "single",
|
|
50
49
|
value: value ? [value] : [],
|
|
51
50
|
onItemActivate: setValue,
|
|
52
|
-
onItemDeactivate: React.useCallback(() => setValue(""), [setValue])
|
|
53
|
-
|
|
54
|
-
}
|
|
51
|
+
onItemDeactivate: React.useCallback(() => setValue(""), [setValue])
|
|
52
|
+
},
|
|
53
|
+
/* @__PURE__ */ React.createElement(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
|
|
55
54
|
);
|
|
56
55
|
});
|
|
57
56
|
var ToggleGroupImplMultiple = React.forwardRef((props, forwardedRef) => {
|
|
@@ -77,16 +76,16 @@ var ToggleGroupImplMultiple = React.forwardRef((props, forwardedRef) => {
|
|
|
77
76
|
),
|
|
78
77
|
[setValue]
|
|
79
78
|
);
|
|
80
|
-
return /* @__PURE__ */
|
|
79
|
+
return /* @__PURE__ */ React.createElement(
|
|
81
80
|
ToggleGroupValueProvider,
|
|
82
81
|
{
|
|
83
82
|
scope: props.__scopeToggleGroup,
|
|
84
83
|
type: "multiple",
|
|
85
84
|
value,
|
|
86
85
|
onItemActivate: handleButtonActivate,
|
|
87
|
-
onItemDeactivate: handleButtonDeactivate
|
|
88
|
-
|
|
89
|
-
}
|
|
86
|
+
onItemDeactivate: handleButtonDeactivate
|
|
87
|
+
},
|
|
88
|
+
/* @__PURE__ */ React.createElement(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
|
|
90
89
|
);
|
|
91
90
|
});
|
|
92
91
|
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
@@ -104,24 +103,24 @@ var ToggleGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
104
103
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
|
|
105
104
|
const direction = useDirection(dir);
|
|
106
105
|
const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
|
|
107
|
-
return /* @__PURE__ */
|
|
106
|
+
return /* @__PURE__ */ React.createElement(
|
|
108
107
|
ToggleGroupContext,
|
|
109
108
|
{
|
|
110
109
|
scope: __scopeToggleGroup,
|
|
111
110
|
rovingFocus,
|
|
112
|
-
disabled
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}
|
|
111
|
+
disabled
|
|
112
|
+
},
|
|
113
|
+
rovingFocus ? /* @__PURE__ */ React.createElement(
|
|
114
|
+
RovingFocusGroup.Root,
|
|
115
|
+
{
|
|
116
|
+
asChild: true,
|
|
117
|
+
...rovingFocusGroupScope,
|
|
118
|
+
orientation,
|
|
119
|
+
dir: direction,
|
|
120
|
+
loop
|
|
121
|
+
},
|
|
122
|
+
/* @__PURE__ */ React.createElement(Primitive.div, { ...commonProps, ref: forwardedRef })
|
|
123
|
+
) : /* @__PURE__ */ React.createElement(Primitive.div, { ...commonProps, ref: forwardedRef })
|
|
125
124
|
);
|
|
126
125
|
});
|
|
127
126
|
var Root2 = ToggleGroup;
|
|
@@ -131,7 +130,6 @@ import * as React2 from "react";
|
|
|
131
130
|
import { composeEventHandlers } from "@huin-core/primitive";
|
|
132
131
|
import { useControllableState as useControllableState2 } from "@huin-core/react-use-controllable-state";
|
|
133
132
|
import { Primitive as Primitive2 } from "@huin-core/react-primitive";
|
|
134
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
135
133
|
var NAME = "Toggle";
|
|
136
134
|
var Toggle = React2.forwardRef(
|
|
137
135
|
(props, forwardedRef) => {
|
|
@@ -141,7 +139,7 @@ var Toggle = React2.forwardRef(
|
|
|
141
139
|
onChange: onPressedChange,
|
|
142
140
|
defaultProp: defaultPressed
|
|
143
141
|
});
|
|
144
|
-
return /* @__PURE__ */
|
|
142
|
+
return /* @__PURE__ */ React2.createElement(
|
|
145
143
|
Primitive2.button,
|
|
146
144
|
{
|
|
147
145
|
type: "button",
|
|
@@ -164,7 +162,6 @@ Toggle.displayName = NAME;
|
|
|
164
162
|
// packages/react/toggle-group/src/ToggleGroupItem.tsx
|
|
165
163
|
import React3 from "react";
|
|
166
164
|
import * as RovingFocusGroup2 from "@huin-core/react-roving-focus";
|
|
167
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
168
165
|
var ITEM_NAME = "ToggleGroupItem";
|
|
169
166
|
var ToggleGroupItem = React3.forwardRef((props, forwardedRef) => {
|
|
170
167
|
const valueContext = useToggleGroupValueContext(
|
|
@@ -179,17 +176,17 @@ var ToggleGroupItem = React3.forwardRef((props, forwardedRef) => {
|
|
|
179
176
|
const disabled = context.disabled || props.disabled;
|
|
180
177
|
const commonProps = { ...props, pressed, disabled };
|
|
181
178
|
const ref = React3.useRef(null);
|
|
182
|
-
return context.rovingFocus ? /* @__PURE__ */
|
|
179
|
+
return context.rovingFocus ? /* @__PURE__ */ React3.createElement(
|
|
183
180
|
RovingFocusGroup2.Item,
|
|
184
181
|
{
|
|
185
182
|
asChild: true,
|
|
186
183
|
...rovingFocusGroupScope,
|
|
187
184
|
focusable: !disabled,
|
|
188
185
|
active: pressed,
|
|
189
|
-
ref
|
|
190
|
-
|
|
191
|
-
}
|
|
192
|
-
) : /* @__PURE__ */
|
|
186
|
+
ref
|
|
187
|
+
},
|
|
188
|
+
/* @__PURE__ */ React3.createElement(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
|
|
189
|
+
) : /* @__PURE__ */ React3.createElement(ToggleGroupItemImpl, { "data-state": true, ...commonProps, ref: forwardedRef });
|
|
193
190
|
});
|
|
194
191
|
ToggleGroupItem.displayName = ITEM_NAME;
|
|
195
192
|
var ToggleGroupItemImpl = React3.forwardRef((props, forwardedRef) => {
|
|
@@ -204,7 +201,7 @@ var ToggleGroupItemImpl = React3.forwardRef((props, forwardedRef) => {
|
|
|
204
201
|
"aria-pressed": void 0
|
|
205
202
|
};
|
|
206
203
|
const typeProps = valueContext.type === "single" ? singleProps : void 0;
|
|
207
|
-
return /* @__PURE__ */
|
|
204
|
+
return /* @__PURE__ */ React3.createElement(
|
|
208
205
|
Toggle,
|
|
209
206
|
{
|
|
210
207
|
...typeProps,
|
package/dist/index.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/ToggleGroup.tsx", "../src/Toggle.tsx", "../src/ToggleGroupItem.tsx"],
|
|
4
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": ";;;AAAA,OAAO,WAAW;AAClB,SAAS,0BAA0B;AACnC,SAAS,iBAAiB;AAC1B,YAAY,sBAAsB;AAClC,SAAS,mCAAmC;AAC5C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;
|
|
6
|
-
"names": ["value", "Root", "React", "useControllableState", "Primitive", "
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["value", "Root", "React", "useControllableState", "Primitive", "React", "RovingFocusGroup", "React"]
|
|
7
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.1.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -25,8 +25,7 @@
|
|
|
25
25
|
],
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"scripts": {
|
|
28
|
-
"clean": "rm -rf dist"
|
|
29
|
-
"version": "yarn version"
|
|
28
|
+
"clean": "rm -rf dist"
|
|
30
29
|
},
|
|
31
30
|
"dependencies": {
|
|
32
31
|
"@huin-core/primitive": "latest",
|