@radix-ui/react-toolbar 1.1.15 → 1.1.16-rc.1784074599772
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +23 -27
- package/dist/index.js.map +3 -3
- package/dist/index.mjs +24 -27
- package/dist/index.mjs.map +3 -3
- package/package.json +7 -7
package/dist/index.js
CHANGED
|
@@ -6,6 +6,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
6
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
7
|
var __getProtoOf = Object.getPrototypeOf;
|
|
8
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
9
10
|
var __export = (target, all) => {
|
|
10
11
|
for (var name in all)
|
|
11
12
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -67,8 +68,9 @@ var [createToolbarContext, createToolbarScope] = (0, import_react_context.create
|
|
|
67
68
|
var useRovingFocusGroupScope = (0, import_react_roving_focus.createRovingFocusGroupScope)();
|
|
68
69
|
var useToggleGroupScope = (0, import_react_toggle_group.createToggleGroupScope)();
|
|
69
70
|
var [ToolbarProvider, useToolbarContext] = createToolbarContext(TOOLBAR_NAME);
|
|
70
|
-
var Toolbar = React.forwardRef(
|
|
71
|
-
|
|
71
|
+
var Toolbar = /* @__PURE__ */ React.forwardRef(
|
|
72
|
+
// blank line to reduce diff noise
|
|
73
|
+
/* @__PURE__ */ __name(function Toolbar2(props, forwardedRef) {
|
|
72
74
|
const { __scopeToolbar, orientation = "horizontal", dir, loop = true, ...toolbarProps } = props;
|
|
73
75
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
|
|
74
76
|
const direction = (0, import_react_direction.useDirection)(dir);
|
|
@@ -92,12 +94,12 @@ var Toolbar = React.forwardRef(
|
|
|
92
94
|
)
|
|
93
95
|
}
|
|
94
96
|
) });
|
|
95
|
-
}
|
|
97
|
+
}, "Toolbar")
|
|
96
98
|
);
|
|
97
|
-
Toolbar.displayName = TOOLBAR_NAME;
|
|
98
99
|
var SEPARATOR_NAME = "ToolbarSeparator";
|
|
99
|
-
var ToolbarSeparator = React.forwardRef(
|
|
100
|
-
|
|
100
|
+
var ToolbarSeparator = /* @__PURE__ */ React.forwardRef(
|
|
101
|
+
// blank line to reduce diff noise
|
|
102
|
+
/* @__PURE__ */ __name(function ToolbarSeparator2(props, forwardedRef) {
|
|
101
103
|
const { __scopeToolbar, ...separatorProps } = props;
|
|
102
104
|
const context = useToolbarContext(SEPARATOR_NAME, __scopeToolbar);
|
|
103
105
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -108,21 +110,17 @@ var ToolbarSeparator = React.forwardRef(
|
|
|
108
110
|
ref: forwardedRef
|
|
109
111
|
}
|
|
110
112
|
);
|
|
111
|
-
}
|
|
113
|
+
}, "ToolbarSeparator")
|
|
112
114
|
);
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
var ToolbarButton = React.forwardRef(
|
|
116
|
-
(props, forwardedRef) => {
|
|
115
|
+
var ToolbarButton = /* @__PURE__ */ React.forwardRef(
|
|
116
|
+
/* @__PURE__ */ __name(function ToolbarButton2(props, forwardedRef) {
|
|
117
117
|
const { __scopeToolbar, ...buttonProps } = props;
|
|
118
118
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
|
|
119
119
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: !props.disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.button, { type: "button", ...buttonProps, ref: forwardedRef }) });
|
|
120
|
-
}
|
|
120
|
+
}, "ToolbarButton")
|
|
121
121
|
);
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
var ToolbarLink = React.forwardRef(
|
|
125
|
-
(props, forwardedRef) => {
|
|
122
|
+
var ToolbarLink = /* @__PURE__ */ React.forwardRef(
|
|
123
|
+
/* @__PURE__ */ __name(function ToolbarLink2(props, forwardedRef) {
|
|
126
124
|
const { __scopeToolbar, ...linkProps } = props;
|
|
127
125
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
|
|
128
126
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -140,12 +138,12 @@ var ToolbarLink = React.forwardRef(
|
|
|
140
138
|
})
|
|
141
139
|
}
|
|
142
140
|
) });
|
|
143
|
-
}
|
|
141
|
+
}, "ToolbarLink")
|
|
144
142
|
);
|
|
145
|
-
ToolbarLink.displayName = LINK_NAME;
|
|
146
143
|
var TOGGLE_GROUP_NAME = "ToolbarToggleGroup";
|
|
147
|
-
var ToolbarToggleGroup = React.forwardRef(
|
|
148
|
-
|
|
144
|
+
var ToolbarToggleGroup = /* @__PURE__ */ React.forwardRef(
|
|
145
|
+
// blank line to reduce diff noise
|
|
146
|
+
/* @__PURE__ */ __name(function ToolbarToggleGroup2(props, forwardedRef) {
|
|
149
147
|
const { __scopeToolbar, ...toggleGroupProps } = props;
|
|
150
148
|
const context = useToolbarContext(TOGGLE_GROUP_NAME, __scopeToolbar);
|
|
151
149
|
const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
|
|
@@ -160,19 +158,17 @@ var ToolbarToggleGroup = React.forwardRef(
|
|
|
160
158
|
rovingFocus: false
|
|
161
159
|
}
|
|
162
160
|
);
|
|
163
|
-
}
|
|
161
|
+
}, "ToolbarToggleGroup")
|
|
164
162
|
);
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
(props, forwardedRef) => {
|
|
163
|
+
var ToolbarToggleItem = /* @__PURE__ */ React.forwardRef(
|
|
164
|
+
// blank line to reduce diff noise
|
|
165
|
+
/* @__PURE__ */ __name(function ToolbarToggleItem2(props, forwardedRef) {
|
|
169
166
|
const { __scopeToolbar, ...toggleItemProps } = props;
|
|
170
167
|
const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
|
|
171
168
|
const scope = { __scopeToolbar: props.__scopeToolbar };
|
|
172
169
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarButton, { asChild: true, ...scope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupPrimitive.Item, { ...toggleGroupScope, ...toggleItemProps, ref: forwardedRef }) });
|
|
173
|
-
}
|
|
170
|
+
}, "ToolbarToggleItem")
|
|
174
171
|
);
|
|
175
|
-
ToolbarToggleItem.displayName = TOGGLE_ITEM_NAME;
|
|
176
172
|
var Root4 = Toolbar;
|
|
177
173
|
var Separator = ToolbarSeparator;
|
|
178
174
|
var Button = ToolbarButton;
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/toolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\nexport {\n createToolbarScope,\n //\n Toolbar,\n ToolbarSeparator,\n ToolbarButton,\n ToolbarLink,\n ToolbarToggleGroup,\n ToolbarToggleItem,\n //\n Root,\n Separator,\n Button,\n Link,\n ToggleGroup,\n ToggleItem,\n} from './toolbar';\nexport type {\n ToolbarProps,\n ToolbarSeparatorProps,\n ToolbarButtonProps,\n ToolbarLinkProps,\n ToolbarToggleGroupSingleProps,\n ToolbarToggleGroupMultipleProps,\n ToolbarToggleItemProps,\n} from './toolbar';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { createToggleGroupScope } from '@radix-ui/react-toggle-group';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Toolbar\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOOLBAR_NAME = 'Toolbar';\n\ntype ScopedProps<P> = P & { __scopeToolbar?: Scope };\nconst [createToolbarContext, createToolbarScope] = createContextScope(TOOLBAR_NAME, [\n createRovingFocusGroupScope,\n createToggleGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\nconst useToggleGroupScope = createToggleGroupScope();\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype ToolbarContextValue = {\n orientation: RovingFocusGroupProps['orientation'];\n dir: RovingFocusGroupProps['dir'];\n};\nconst [ToolbarProvider, useToolbarContext] =\n createToolbarContext<ToolbarContextValue>(TOOLBAR_NAME);\n\ntype ToolbarElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToolbarProps extends PrimitiveDivProps {\n orientation?: RovingFocusGroupProps['orientation'];\n loop?: RovingFocusGroupProps['loop'];\n dir?: RovingFocusGroupProps['dir'];\n}\n\nconst Toolbar = React.forwardRef<ToolbarElement, ToolbarProps>(\n (props: ScopedProps<ToolbarProps>, forwardedRef) => {\n const { __scopeToolbar, orientation = 'horizontal', dir, loop = true, ...toolbarProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n const direction = useDirection(dir);\n return (\n <ToolbarProvider scope={__scopeToolbar} orientation={orientation} dir={direction}>\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n loop={loop}\n >\n <Primitive.div\n role=\"toolbar\"\n aria-orientation={orientation}\n dir={direction}\n {...toolbarProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n </ToolbarProvider>\n );\n },\n);\n\nToolbar.displayName = TOOLBAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'ToolbarSeparator';\n\ntype ToolbarSeparatorElement = React.ComponentRef<typeof SeparatorPrimitive.Root>;\ntype SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;\ninterface ToolbarSeparatorProps extends SeparatorProps {}\n\nconst ToolbarSeparator = React.forwardRef<ToolbarSeparatorElement, ToolbarSeparatorProps>(\n (props: ScopedProps<ToolbarSeparatorProps>, forwardedRef) => {\n const { __scopeToolbar, ...separatorProps } = props;\n const context = useToolbarContext(SEPARATOR_NAME, __scopeToolbar);\n return (\n <SeparatorPrimitive.Root\n orientation={context.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n {...separatorProps}\n ref={forwardedRef}\n />\n );\n },\n);\n\nToolbarSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUTTON_NAME = 'ToolbarButton';\n\ntype ToolbarButtonElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface ToolbarButtonProps extends PrimitiveButtonProps {}\n\nconst ToolbarButton = React.forwardRef<ToolbarButtonElement, ToolbarButtonProps>(\n (props: ScopedProps<ToolbarButtonProps>, forwardedRef) => {\n const { __scopeToolbar, ...buttonProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n return (\n <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable={!props.disabled}>\n <Primitive.button type=\"button\" {...buttonProps} ref={forwardedRef} />\n </RovingFocusGroup.Item>\n );\n },\n);\n\nToolbarButton.displayName = BUTTON_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarLink\n * -----------------------------------------------------------------------------------------------*/\n\nconst LINK_NAME = 'ToolbarLink';\n\ntype ToolbarLinkElement = React.ComponentRef<typeof Primitive.a>;\ntype PrimitiveLinkProps = React.ComponentPropsWithoutRef<typeof Primitive.a>;\ninterface ToolbarLinkProps extends PrimitiveLinkProps {}\n\nconst ToolbarLink = React.forwardRef<ToolbarLinkElement, ToolbarLinkProps>(\n (props: ScopedProps<ToolbarLinkProps>, forwardedRef) => {\n const { __scopeToolbar, ...linkProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n return (\n <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable>\n <Primitive.a\n {...linkProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // Only react to keys originating from the link itself. Focusable\n // descendants (eg. content portaled out of the link's DOM subtree)\n // bubble their key events here through React's event system.\n // See: https://github.com/radix-ui/primitives/issues/3232\n if (event.target !== event.currentTarget) {\n return;\n }\n\n if (event.key === ' ') {\n event.currentTarget.click();\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n },\n);\n\nToolbarLink.displayName = LINK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = 'ToolbarToggleGroup';\n\ntype ToolbarToggleGroupElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>;\ntype ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>;\ninterface ToolbarToggleGroupSingleProps extends Extract<ToggleGroupProps, { type: 'single' }> {}\ninterface ToolbarToggleGroupMultipleProps extends Extract<ToggleGroupProps, { type: 'multiple' }> {}\n\nconst ToolbarToggleGroup = React.forwardRef<\n ToolbarToggleGroupElement,\n ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps\n>(\n (\n props: ScopedProps<ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps>,\n forwardedRef,\n ) => {\n const { __scopeToolbar, ...toggleGroupProps } = props;\n const context = useToolbarContext(TOGGLE_GROUP_NAME, __scopeToolbar);\n const toggleGroupScope = useToggleGroupScope(__scopeToolbar);\n return (\n <ToggleGroupPrimitive.Root\n data-orientation={context.orientation}\n dir={context.dir}\n {...toggleGroupScope}\n {...toggleGroupProps}\n ref={forwardedRef}\n rovingFocus={false}\n />\n );\n },\n);\n\nToolbarToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarToggleItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_ITEM_NAME = 'ToolbarToggleItem';\n\ntype ToolbarToggleItemElement = React.ComponentRef<typeof ToggleGroupPrimitive.Item>;\ntype ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\ninterface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n\nconst ToolbarToggleItem = React.forwardRef<ToolbarToggleItemElement, ToolbarToggleItemProps>(\n (props: ScopedProps<ToolbarToggleItemProps>, forwardedRef) => {\n const { __scopeToolbar, ...toggleItemProps } = props;\n const toggleGroupScope = useToggleGroupScope(__scopeToolbar);\n const scope = { __scopeToolbar: props.__scopeToolbar };\n\n return (\n <ToolbarButton asChild {...scope}>\n <ToggleGroupPrimitive.Item {...toggleGroupScope} {...toggleItemProps} ref={forwardedRef} />\n </ToolbarButton>\n );\n },\n);\n\nToolbarToggleItem.displayName = TOGGLE_ITEM_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = Toolbar;\nconst Separator = ToolbarSeparator;\nconst Button = ToolbarButton;\nconst Link = ToolbarLink;\nconst ToggleGroup = ToolbarToggleGroup;\nconst ToggleItem = ToolbarToggleItem;\n\nexport {\n createToolbarScope,\n //\n Toolbar,\n ToolbarSeparator,\n ToolbarButton,\n ToolbarLink,\n ToolbarToggleGroup,\n ToolbarToggleItem,\n //\n Root,\n Separator,\n Button,\n Link,\n ToggleGroup,\n ToggleItem,\n};\nexport type {\n ToolbarProps,\n ToolbarSeparatorProps,\n ToolbarButtonProps,\n ToolbarLinkProps,\n ToolbarToggleGroupSingleProps,\n ToolbarToggleGroupMultipleProps,\n ToolbarToggleItemProps,\n};\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Root", "Root"]
|
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n createToolbarScope,\n //\n Toolbar,\n ToolbarSeparator,\n ToolbarButton,\n ToolbarLink,\n ToolbarToggleGroup,\n ToolbarToggleItem,\n //\n Root,\n Separator,\n Button,\n Link,\n ToggleGroup,\n ToggleItem,\n} from './toolbar';\nexport type {\n ToolbarProps,\n ToolbarSeparatorProps,\n ToolbarButtonProps,\n ToolbarLinkProps,\n ToolbarToggleGroupSingleProps,\n ToolbarToggleGroupMultipleProps,\n ToolbarToggleItemProps,\n} from './toolbar';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { createToggleGroupScope } from '@radix-ui/react-toggle-group';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Toolbar\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOOLBAR_NAME = 'Toolbar';\n\ntype ScopedProps<P> = P & { __scopeToolbar?: Scope };\nconst [createToolbarContext, createToolbarScope] = createContextScope(TOOLBAR_NAME, [\n createRovingFocusGroupScope,\n createToggleGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\nconst useToggleGroupScope = createToggleGroupScope();\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype ToolbarContextValue = {\n orientation: RovingFocusGroupProps['orientation'];\n dir: RovingFocusGroupProps['dir'];\n};\nconst [ToolbarProvider, useToolbarContext] =\n createToolbarContext<ToolbarContextValue>(TOOLBAR_NAME);\n\ntype ToolbarElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToolbarProps extends PrimitiveDivProps {\n orientation?: RovingFocusGroupProps['orientation'];\n loop?: RovingFocusGroupProps['loop'];\n dir?: RovingFocusGroupProps['dir'];\n}\n\nconst Toolbar = /* @__PURE__ */ React.forwardRef<ToolbarElement, ToolbarProps>(\n // blank line to reduce diff noise\n function Toolbar(props: ScopedProps<ToolbarProps>, forwardedRef) {\n const { __scopeToolbar, orientation = 'horizontal', dir, loop = true, ...toolbarProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n const direction = useDirection(dir);\n return (\n <ToolbarProvider scope={__scopeToolbar} orientation={orientation} dir={direction}>\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n loop={loop}\n >\n <Primitive.div\n role=\"toolbar\"\n aria-orientation={orientation}\n dir={direction}\n {...toolbarProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n </ToolbarProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'ToolbarSeparator';\n\ntype ToolbarSeparatorElement = React.ComponentRef<typeof SeparatorPrimitive.Root>;\ntype SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;\ninterface ToolbarSeparatorProps extends SeparatorProps {}\n\nconst ToolbarSeparator = /* @__PURE__ */ React.forwardRef<\n ToolbarSeparatorElement,\n ToolbarSeparatorProps\n>(\n // blank line to reduce diff noise\n function ToolbarSeparator(props: ScopedProps<ToolbarSeparatorProps>, forwardedRef) {\n const { __scopeToolbar, ...separatorProps } = props;\n const context = useToolbarContext(SEPARATOR_NAME, __scopeToolbar);\n return (\n <SeparatorPrimitive.Root\n orientation={context.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n {...separatorProps}\n ref={forwardedRef}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarButton\n * -----------------------------------------------------------------------------------------------*/\n\ntype ToolbarButtonElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface ToolbarButtonProps extends PrimitiveButtonProps {}\n\nconst ToolbarButton = /* @__PURE__ */ React.forwardRef<ToolbarButtonElement, ToolbarButtonProps>(\n function ToolbarButton(props: ScopedProps<ToolbarButtonProps>, forwardedRef) {\n const { __scopeToolbar, ...buttonProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n return (\n <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable={!props.disabled}>\n <Primitive.button type=\"button\" {...buttonProps} ref={forwardedRef} />\n </RovingFocusGroup.Item>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarLink\n * -----------------------------------------------------------------------------------------------*/\n\ntype ToolbarLinkElement = React.ComponentRef<typeof Primitive.a>;\ntype PrimitiveLinkProps = React.ComponentPropsWithoutRef<typeof Primitive.a>;\ninterface ToolbarLinkProps extends PrimitiveLinkProps {}\n\nconst ToolbarLink = /* @__PURE__ */ React.forwardRef<ToolbarLinkElement, ToolbarLinkProps>(\n function ToolbarLink(props: ScopedProps<ToolbarLinkProps>, forwardedRef) {\n const { __scopeToolbar, ...linkProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n return (\n <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable>\n <Primitive.a\n {...linkProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // Only react to keys originating from the link itself. Focusable\n // descendants (eg. content portaled out of the link's DOM subtree)\n // bubble their key events here through React's event system.\n // See: https://github.com/radix-ui/primitives/issues/3232\n if (event.target !== event.currentTarget) {\n return;\n }\n\n if (event.key === ' ') {\n event.currentTarget.click();\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = 'ToolbarToggleGroup';\n\ntype ToolbarToggleGroupElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>;\ntype ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>;\ninterface ToolbarToggleGroupSingleProps extends Extract<ToggleGroupProps, { type: 'single' }> {}\ninterface ToolbarToggleGroupMultipleProps extends Extract<ToggleGroupProps, { type: 'multiple' }> {}\n\nconst ToolbarToggleGroup = /* @__PURE__ */ React.forwardRef<\n ToolbarToggleGroupElement,\n ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps\n>(\n // blank line to reduce diff noise\n function ToolbarToggleGroup(\n props: ScopedProps<ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps>,\n forwardedRef,\n ) {\n const { __scopeToolbar, ...toggleGroupProps } = props;\n const context = useToolbarContext(TOGGLE_GROUP_NAME, __scopeToolbar);\n const toggleGroupScope = useToggleGroupScope(__scopeToolbar);\n return (\n <ToggleGroupPrimitive.Root\n data-orientation={context.orientation}\n dir={context.dir}\n {...toggleGroupScope}\n {...toggleGroupProps}\n ref={forwardedRef}\n rovingFocus={false}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarToggleItem\n * -----------------------------------------------------------------------------------------------*/\n\ntype ToolbarToggleItemElement = React.ComponentRef<typeof ToggleGroupPrimitive.Item>;\ntype ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\ninterface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n\nconst ToolbarToggleItem = /* @__PURE__ */ React.forwardRef<\n ToolbarToggleItemElement,\n ToolbarToggleItemProps\n>(\n // blank line to reduce diff noise\n function ToolbarToggleItem(props: ScopedProps<ToolbarToggleItemProps>, forwardedRef) {\n const { __scopeToolbar, ...toggleItemProps } = props;\n const toggleGroupScope = useToggleGroupScope(__scopeToolbar);\n const scope = { __scopeToolbar: props.__scopeToolbar };\n\n return (\n <ToolbarButton asChild {...scope}>\n <ToggleGroupPrimitive.Item {...toggleGroupScope} {...toggleItemProps} ref={forwardedRef} />\n </ToolbarButton>\n );\n },\n);\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = Toolbar;\nconst Separator = ToolbarSeparator;\nconst Button = ToolbarButton;\nconst Link = ToolbarLink;\nconst ToggleGroup = ToolbarToggleGroup;\nconst ToggleItem = ToolbarToggleItem;\n\nexport {\n createToolbarScope,\n //\n Toolbar,\n ToolbarSeparator,\n ToolbarButton,\n ToolbarLink,\n ToolbarToggleGroup,\n ToolbarToggleItem,\n //\n Root,\n Separator,\n Button,\n Link,\n ToggleGroup,\n ToggleItem,\n};\nexport type {\n ToolbarProps,\n ToolbarSeparatorProps,\n ToolbarButtonProps,\n ToolbarLinkProps,\n ToolbarToggleGroupSingleProps,\n ToolbarToggleGroupMultipleProps,\n ToolbarToggleItemProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Root", "Toolbar", "ToolbarSeparator", "ToolbarButton", "ToolbarLink", "ToolbarToggleGroup", "ToolbarToggleItem", "Root"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
2
4
|
|
|
3
5
|
// src/toolbar.tsx
|
|
4
6
|
import * as React from "react";
|
|
@@ -20,8 +22,9 @@ var [createToolbarContext, createToolbarScope] = createContextScope(TOOLBAR_NAME
|
|
|
20
22
|
var useRovingFocusGroupScope = createRovingFocusGroupScope();
|
|
21
23
|
var useToggleGroupScope = createToggleGroupScope();
|
|
22
24
|
var [ToolbarProvider, useToolbarContext] = createToolbarContext(TOOLBAR_NAME);
|
|
23
|
-
var Toolbar = React.forwardRef(
|
|
24
|
-
|
|
25
|
+
var Toolbar = /* @__PURE__ */ React.forwardRef(
|
|
26
|
+
// blank line to reduce diff noise
|
|
27
|
+
/* @__PURE__ */ __name(function Toolbar2(props, forwardedRef) {
|
|
25
28
|
const { __scopeToolbar, orientation = "horizontal", dir, loop = true, ...toolbarProps } = props;
|
|
26
29
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
|
|
27
30
|
const direction = useDirection(dir);
|
|
@@ -45,12 +48,12 @@ var Toolbar = React.forwardRef(
|
|
|
45
48
|
)
|
|
46
49
|
}
|
|
47
50
|
) });
|
|
48
|
-
}
|
|
51
|
+
}, "Toolbar")
|
|
49
52
|
);
|
|
50
|
-
Toolbar.displayName = TOOLBAR_NAME;
|
|
51
53
|
var SEPARATOR_NAME = "ToolbarSeparator";
|
|
52
|
-
var ToolbarSeparator = React.forwardRef(
|
|
53
|
-
|
|
54
|
+
var ToolbarSeparator = /* @__PURE__ */ React.forwardRef(
|
|
55
|
+
// blank line to reduce diff noise
|
|
56
|
+
/* @__PURE__ */ __name(function ToolbarSeparator2(props, forwardedRef) {
|
|
54
57
|
const { __scopeToolbar, ...separatorProps } = props;
|
|
55
58
|
const context = useToolbarContext(SEPARATOR_NAME, __scopeToolbar);
|
|
56
59
|
return /* @__PURE__ */ jsx(
|
|
@@ -61,21 +64,17 @@ var ToolbarSeparator = React.forwardRef(
|
|
|
61
64
|
ref: forwardedRef
|
|
62
65
|
}
|
|
63
66
|
);
|
|
64
|
-
}
|
|
67
|
+
}, "ToolbarSeparator")
|
|
65
68
|
);
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
var ToolbarButton = React.forwardRef(
|
|
69
|
-
(props, forwardedRef) => {
|
|
69
|
+
var ToolbarButton = /* @__PURE__ */ React.forwardRef(
|
|
70
|
+
/* @__PURE__ */ __name(function ToolbarButton2(props, forwardedRef) {
|
|
70
71
|
const { __scopeToolbar, ...buttonProps } = props;
|
|
71
72
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
|
|
72
73
|
return /* @__PURE__ */ jsx(RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: !props.disabled, children: /* @__PURE__ */ jsx(Primitive.button, { type: "button", ...buttonProps, ref: forwardedRef }) });
|
|
73
|
-
}
|
|
74
|
+
}, "ToolbarButton")
|
|
74
75
|
);
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
var ToolbarLink = React.forwardRef(
|
|
78
|
-
(props, forwardedRef) => {
|
|
76
|
+
var ToolbarLink = /* @__PURE__ */ React.forwardRef(
|
|
77
|
+
/* @__PURE__ */ __name(function ToolbarLink2(props, forwardedRef) {
|
|
79
78
|
const { __scopeToolbar, ...linkProps } = props;
|
|
80
79
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
|
|
81
80
|
return /* @__PURE__ */ jsx(RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: true, children: /* @__PURE__ */ jsx(
|
|
@@ -93,12 +92,12 @@ var ToolbarLink = React.forwardRef(
|
|
|
93
92
|
})
|
|
94
93
|
}
|
|
95
94
|
) });
|
|
96
|
-
}
|
|
95
|
+
}, "ToolbarLink")
|
|
97
96
|
);
|
|
98
|
-
ToolbarLink.displayName = LINK_NAME;
|
|
99
97
|
var TOGGLE_GROUP_NAME = "ToolbarToggleGroup";
|
|
100
|
-
var ToolbarToggleGroup = React.forwardRef(
|
|
101
|
-
|
|
98
|
+
var ToolbarToggleGroup = /* @__PURE__ */ React.forwardRef(
|
|
99
|
+
// blank line to reduce diff noise
|
|
100
|
+
/* @__PURE__ */ __name(function ToolbarToggleGroup2(props, forwardedRef) {
|
|
102
101
|
const { __scopeToolbar, ...toggleGroupProps } = props;
|
|
103
102
|
const context = useToolbarContext(TOGGLE_GROUP_NAME, __scopeToolbar);
|
|
104
103
|
const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
|
|
@@ -113,19 +112,17 @@ var ToolbarToggleGroup = React.forwardRef(
|
|
|
113
112
|
rovingFocus: false
|
|
114
113
|
}
|
|
115
114
|
);
|
|
116
|
-
}
|
|
115
|
+
}, "ToolbarToggleGroup")
|
|
117
116
|
);
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
(props, forwardedRef) => {
|
|
117
|
+
var ToolbarToggleItem = /* @__PURE__ */ React.forwardRef(
|
|
118
|
+
// blank line to reduce diff noise
|
|
119
|
+
/* @__PURE__ */ __name(function ToolbarToggleItem2(props, forwardedRef) {
|
|
122
120
|
const { __scopeToolbar, ...toggleItemProps } = props;
|
|
123
121
|
const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
|
|
124
122
|
const scope = { __scopeToolbar: props.__scopeToolbar };
|
|
125
123
|
return /* @__PURE__ */ jsx(ToolbarButton, { asChild: true, ...scope, children: /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, { ...toggleGroupScope, ...toggleItemProps, ref: forwardedRef }) });
|
|
126
|
-
}
|
|
124
|
+
}, "ToolbarToggleItem")
|
|
127
125
|
);
|
|
128
|
-
ToolbarToggleItem.displayName = TOGGLE_ITEM_NAME;
|
|
129
126
|
var Root4 = Toolbar;
|
|
130
127
|
var Separator = ToolbarSeparator;
|
|
131
128
|
var Button = ToolbarButton;
|
package/dist/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/toolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { createToggleGroupScope } from '@radix-ui/react-toggle-group';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Toolbar\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOOLBAR_NAME = 'Toolbar';\n\ntype ScopedProps<P> = P & { __scopeToolbar?: Scope };\nconst [createToolbarContext, createToolbarScope] = createContextScope(TOOLBAR_NAME, [\n createRovingFocusGroupScope,\n createToggleGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\nconst useToggleGroupScope = createToggleGroupScope();\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype ToolbarContextValue = {\n orientation: RovingFocusGroupProps['orientation'];\n dir: RovingFocusGroupProps['dir'];\n};\nconst [ToolbarProvider, useToolbarContext] =\n createToolbarContext<ToolbarContextValue>(TOOLBAR_NAME);\n\ntype ToolbarElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToolbarProps extends PrimitiveDivProps {\n orientation?: RovingFocusGroupProps['orientation'];\n loop?: RovingFocusGroupProps['loop'];\n dir?: RovingFocusGroupProps['dir'];\n}\n\nconst Toolbar = React.forwardRef<ToolbarElement, ToolbarProps>(\n (props: ScopedProps<ToolbarProps>, forwardedRef)
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Root"]
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { createToggleGroupScope } from '@radix-ui/react-toggle-group';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Toolbar\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOOLBAR_NAME = 'Toolbar';\n\ntype ScopedProps<P> = P & { __scopeToolbar?: Scope };\nconst [createToolbarContext, createToolbarScope] = createContextScope(TOOLBAR_NAME, [\n createRovingFocusGroupScope,\n createToggleGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\nconst useToggleGroupScope = createToggleGroupScope();\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype ToolbarContextValue = {\n orientation: RovingFocusGroupProps['orientation'];\n dir: RovingFocusGroupProps['dir'];\n};\nconst [ToolbarProvider, useToolbarContext] =\n createToolbarContext<ToolbarContextValue>(TOOLBAR_NAME);\n\ntype ToolbarElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToolbarProps extends PrimitiveDivProps {\n orientation?: RovingFocusGroupProps['orientation'];\n loop?: RovingFocusGroupProps['loop'];\n dir?: RovingFocusGroupProps['dir'];\n}\n\nconst Toolbar = /* @__PURE__ */ React.forwardRef<ToolbarElement, ToolbarProps>(\n // blank line to reduce diff noise\n function Toolbar(props: ScopedProps<ToolbarProps>, forwardedRef) {\n const { __scopeToolbar, orientation = 'horizontal', dir, loop = true, ...toolbarProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n const direction = useDirection(dir);\n return (\n <ToolbarProvider scope={__scopeToolbar} orientation={orientation} dir={direction}>\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n loop={loop}\n >\n <Primitive.div\n role=\"toolbar\"\n aria-orientation={orientation}\n dir={direction}\n {...toolbarProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n </ToolbarProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'ToolbarSeparator';\n\ntype ToolbarSeparatorElement = React.ComponentRef<typeof SeparatorPrimitive.Root>;\ntype SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;\ninterface ToolbarSeparatorProps extends SeparatorProps {}\n\nconst ToolbarSeparator = /* @__PURE__ */ React.forwardRef<\n ToolbarSeparatorElement,\n ToolbarSeparatorProps\n>(\n // blank line to reduce diff noise\n function ToolbarSeparator(props: ScopedProps<ToolbarSeparatorProps>, forwardedRef) {\n const { __scopeToolbar, ...separatorProps } = props;\n const context = useToolbarContext(SEPARATOR_NAME, __scopeToolbar);\n return (\n <SeparatorPrimitive.Root\n orientation={context.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n {...separatorProps}\n ref={forwardedRef}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarButton\n * -----------------------------------------------------------------------------------------------*/\n\ntype ToolbarButtonElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface ToolbarButtonProps extends PrimitiveButtonProps {}\n\nconst ToolbarButton = /* @__PURE__ */ React.forwardRef<ToolbarButtonElement, ToolbarButtonProps>(\n function ToolbarButton(props: ScopedProps<ToolbarButtonProps>, forwardedRef) {\n const { __scopeToolbar, ...buttonProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n return (\n <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable={!props.disabled}>\n <Primitive.button type=\"button\" {...buttonProps} ref={forwardedRef} />\n </RovingFocusGroup.Item>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarLink\n * -----------------------------------------------------------------------------------------------*/\n\ntype ToolbarLinkElement = React.ComponentRef<typeof Primitive.a>;\ntype PrimitiveLinkProps = React.ComponentPropsWithoutRef<typeof Primitive.a>;\ninterface ToolbarLinkProps extends PrimitiveLinkProps {}\n\nconst ToolbarLink = /* @__PURE__ */ React.forwardRef<ToolbarLinkElement, ToolbarLinkProps>(\n function ToolbarLink(props: ScopedProps<ToolbarLinkProps>, forwardedRef) {\n const { __scopeToolbar, ...linkProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n return (\n <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable>\n <Primitive.a\n {...linkProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // Only react to keys originating from the link itself. Focusable\n // descendants (eg. content portaled out of the link's DOM subtree)\n // bubble their key events here through React's event system.\n // See: https://github.com/radix-ui/primitives/issues/3232\n if (event.target !== event.currentTarget) {\n return;\n }\n\n if (event.key === ' ') {\n event.currentTarget.click();\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = 'ToolbarToggleGroup';\n\ntype ToolbarToggleGroupElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>;\ntype ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>;\ninterface ToolbarToggleGroupSingleProps extends Extract<ToggleGroupProps, { type: 'single' }> {}\ninterface ToolbarToggleGroupMultipleProps extends Extract<ToggleGroupProps, { type: 'multiple' }> {}\n\nconst ToolbarToggleGroup = /* @__PURE__ */ React.forwardRef<\n ToolbarToggleGroupElement,\n ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps\n>(\n // blank line to reduce diff noise\n function ToolbarToggleGroup(\n props: ScopedProps<ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps>,\n forwardedRef,\n ) {\n const { __scopeToolbar, ...toggleGroupProps } = props;\n const context = useToolbarContext(TOGGLE_GROUP_NAME, __scopeToolbar);\n const toggleGroupScope = useToggleGroupScope(__scopeToolbar);\n return (\n <ToggleGroupPrimitive.Root\n data-orientation={context.orientation}\n dir={context.dir}\n {...toggleGroupScope}\n {...toggleGroupProps}\n ref={forwardedRef}\n rovingFocus={false}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarToggleItem\n * -----------------------------------------------------------------------------------------------*/\n\ntype ToolbarToggleItemElement = React.ComponentRef<typeof ToggleGroupPrimitive.Item>;\ntype ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\ninterface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n\nconst ToolbarToggleItem = /* @__PURE__ */ React.forwardRef<\n ToolbarToggleItemElement,\n ToolbarToggleItemProps\n>(\n // blank line to reduce diff noise\n function ToolbarToggleItem(props: ScopedProps<ToolbarToggleItemProps>, forwardedRef) {\n const { __scopeToolbar, ...toggleItemProps } = props;\n const toggleGroupScope = useToggleGroupScope(__scopeToolbar);\n const scope = { __scopeToolbar: props.__scopeToolbar };\n\n return (\n <ToolbarButton asChild {...scope}>\n <ToggleGroupPrimitive.Item {...toggleGroupScope} {...toggleItemProps} ref={forwardedRef} />\n </ToolbarButton>\n );\n },\n);\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = Toolbar;\nconst Separator = ToolbarSeparator;\nconst Button = ToolbarButton;\nconst Link = ToolbarLink;\nconst ToggleGroup = ToolbarToggleGroup;\nconst ToggleItem = ToolbarToggleItem;\n\nexport {\n createToolbarScope,\n //\n Toolbar,\n ToolbarSeparator,\n ToolbarButton,\n ToolbarLink,\n ToolbarToggleGroup,\n ToolbarToggleItem,\n //\n Root,\n Separator,\n Button,\n Link,\n ToggleGroup,\n ToggleItem,\n};\nexport type {\n ToolbarProps,\n ToolbarSeparatorProps,\n ToolbarButtonProps,\n ToolbarLinkProps,\n ToolbarToggleGroupSingleProps,\n ToolbarToggleGroupMultipleProps,\n ToolbarToggleItemProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Toolbar", "ToolbarSeparator", "ToolbarButton", "ToolbarLink", "ToolbarToggleGroup", "ToolbarToggleItem", "Root"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-toolbar",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.16-rc.1784074599772",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@radix-ui/react-context": "1.2.0",
|
|
15
|
-
"@radix-ui/primitive": "1.1.
|
|
15
|
+
"@radix-ui/primitive": "1.1.6-rc.1784074599772",
|
|
16
16
|
"@radix-ui/react-direction": "1.1.2",
|
|
17
|
+
"@radix-ui/react-roving-focus": "1.1.16-rc.1784074599772",
|
|
18
|
+
"@radix-ui/react-separator": "1.1.12-rc.1784074599772",
|
|
17
19
|
"@radix-ui/react-primitive": "2.1.7",
|
|
18
|
-
"@radix-ui/react-
|
|
19
|
-
"@radix-ui/react-roving-focus": "1.1.15",
|
|
20
|
-
"@radix-ui/react-toggle-group": "1.1.15"
|
|
20
|
+
"@radix-ui/react-toggle-group": "1.1.16-rc.1784074599772"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@types/react": "^19.2.2",
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"react": "^19.2.0",
|
|
26
26
|
"react-dom": "^19.2.0",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@repo/
|
|
29
|
-
"@repo/
|
|
28
|
+
"@repo/builder": "0.0.1-rc.1784074599772",
|
|
29
|
+
"@repo/typescript-config": "0.0.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@types/react": "*",
|