@wix/site-ui 1.29.0 → 1.31.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/dist/1268.js +99 -0
- package/dist/1279.js +7 -0
- package/dist/1457.js +10 -0
- package/dist/1477.js +106 -0
- package/dist/1500.js +111 -0
- package/dist/167.js +6 -0
- package/dist/2274.js +34 -0
- package/dist/2287.js +17 -0
- package/dist/2418.js +31 -0
- package/dist/2801.js +20 -0
- package/dist/285.js +86 -0
- package/dist/2861.js +6 -0
- package/dist/3020.js +7 -0
- package/dist/3021.js +72 -0
- package/dist/3056.js +229 -0
- package/dist/3140.js +4 -0
- package/dist/3248.js +307 -0
- package/dist/3296.js +4 -0
- package/dist/3319.js +400 -0
- package/dist/3395.js +4 -0
- package/dist/3485.js +854 -0
- package/dist/353.js +14 -0
- package/dist/3670.js +418 -0
- package/dist/3829.js +113 -0
- package/dist/4026.js +12 -0
- package/dist/4143.js +46 -0
- package/dist/42.js +32 -0
- package/dist/4281.js +30 -0
- package/dist/4346.js +2 -0
- package/dist/4388.js +418 -0
- package/dist/4490.js +32 -0
- package/dist/4495.js +9 -0
- package/dist/4549.js +24 -0
- package/dist/4586.js +41 -0
- package/dist/4586.js.LICENSE.txt +19 -0
- package/dist/4707.js +19 -0
- package/dist/4723.js +7 -0
- package/dist/4745.js +7 -0
- package/dist/4768.js +35 -0
- package/dist/4922.js +15 -0
- package/dist/5036.js +17 -0
- package/dist/5085.js +20 -0
- package/dist/5299.js +597 -0
- package/dist/5659.js +4 -0
- package/dist/5778.js +10 -0
- package/dist/5864.js +86 -0
- package/dist/5992.js +913 -0
- package/dist/5992.js.LICENSE.txt +19 -0
- package/dist/6003.js +10 -0
- package/dist/6046.js +29 -0
- package/dist/6089.js +2355 -0
- package/dist/6107.js +10 -0
- package/dist/6247.js +20 -0
- package/dist/6270.js +487 -0
- package/dist/6329.js +32 -0
- package/dist/6330.js +30 -0
- package/dist/6499.js +7 -0
- package/dist/6535.js +71 -0
- package/dist/6588.js +382 -0
- package/dist/6706.js +16 -0
- package/dist/6825.js +7 -0
- package/dist/6882.js +1562 -0
- package/dist/6914.js +30 -0
- package/dist/7021.js +13 -0
- package/dist/7366.js +83 -0
- package/dist/7373.js +25 -0
- package/dist/7541.js +25 -0
- package/dist/7564.js +10 -0
- package/dist/7642.js +20 -0
- package/dist/7725.js +10 -0
- package/dist/7871.js +38 -0
- package/dist/8052.js +352 -0
- package/dist/8106.js +238 -0
- package/dist/8171.js +346 -0
- package/dist/8225.js +21 -0
- package/dist/8272.js +333 -0
- package/dist/8527.js +58 -0
- package/dist/8724.js +10 -0
- package/dist/8750.js +1920 -0
- package/dist/8758.js +43 -0
- package/dist/880.js +149 -0
- package/dist/8935.js +8 -0
- package/dist/8960.js +22 -0
- package/dist/8971.js +40 -0
- package/dist/8979.js +10 -0
- package/dist/8996.js +71 -0
- package/dist/904.js +121 -0
- package/dist/9048.js +52 -0
- package/dist/9087.js +256 -0
- package/dist/9189.js +158 -0
- package/dist/9255.js +136 -0
- package/dist/9352.js +148 -0
- package/dist/951.js +22 -0
- package/dist/9635.js +22 -0
- package/dist/9829.js +4 -0
- package/dist/9863.js +8 -0
- package/dist/Accordion/index.d.ts +569 -12
- package/dist/Accordion/index.js +423 -8
- package/dist/AlertDialog/index.d.ts +1417 -18
- package/dist/AlertDialog/index.js +34 -14
- package/dist/Autocomplete/index.d.ts +1861 -38
- package/dist/Autocomplete/index.js +98 -24
- package/dist/Avatar/index.d.ts +129 -7
- package/dist/Avatar/index.js +149 -6
- package/dist/Badge/index.css +44 -0
- package/dist/Badge/index.d.ts +22 -0
- package/dist/Badge/index.js +23 -0
- package/dist/Breadcrumbs/index.d.ts +960 -7
- package/dist/Breadcrumbs/index.js +5 -5
- package/dist/Button/index.d.ts +88 -6
- package/dist/Button/index.js +27 -3
- package/dist/Checkbox/index.d.ts +425 -5
- package/dist/Checkbox/index.js +45 -5
- package/dist/CheckboxGroup/index.d.ts +318 -3
- package/dist/CheckboxGroup/index.js +166 -3
- package/dist/Collapsible/index.d.ts +377 -7
- package/dist/Collapsible/index.js +160 -6
- package/dist/Combobox/index.d.ts +1984 -48
- package/dist/Combobox/index.js +352 -29
- package/dist/ContextMenu/index.d.ts +2340 -36
- package/dist/ContextMenu/index.js +197 -22
- package/dist/Dialog/index.d.ts +1355 -18
- package/dist/Dialog/index.js +16 -14
- package/dist/Drawer/index.d.ts +1653 -18
- package/dist/Drawer/index.js +2797 -20
- package/dist/Field/index.d.ts +655 -15
- package/dist/Field/index.js +677 -10
- package/dist/Fieldset/index.d.ts +94 -5
- package/dist/Fieldset/index.js +68 -5
- package/dist/Form/index.d.ts +331 -2
- package/dist/Form/index.js +106 -3
- package/dist/Input/index.d.ts +692 -3
- package/dist/Input/index.js +10 -3
- package/dist/Menu/index.d.ts +2301 -36
- package/dist/Menu/index.js +365 -26
- package/dist/Menubar/index.d.ts +2301 -3
- package/dist/Menubar/index.js +105 -3
- package/dist/Meter/index.d.ts +175 -11
- package/dist/Meter/index.js +129 -9
- package/dist/NavigationMenu/index.d.ts +978 -28
- package/dist/NavigationMenu/index.js +1034 -17
- package/dist/NumberField/index.d.ts +612 -15
- package/dist/NumberField/index.js +1409 -11
- package/dist/Popover/index.d.ts +1655 -20
- package/dist/Popover/index.js +792 -17
- package/dist/PreviewCard/index.d.ts +1523 -14
- package/dist/PreviewCard/index.js +679 -14
- package/dist/Progress/index.d.ts +183 -11
- package/dist/Progress/index.js +181 -9
- package/dist/Radio/index.d.ts +185 -6
- package/dist/Radio/index.js +253 -6
- package/dist/RadioGroup/index.d.ts +341 -2
- package/dist/RadioGroup/index.js +154 -3
- package/dist/ScrollArea/index.d.ts +265 -13
- package/dist/ScrollArea/index.js +892 -10
- package/dist/Select/index.d.ts +1493 -38
- package/dist/Select/index.js +1824 -23
- package/dist/Separator/index.d.ts +80 -6
- package/dist/Separator/index.js +3 -3
- package/dist/Slider/index.d.ts +678 -16
- package/dist/Slider/index.js +1199 -11
- package/dist/Switch/index.d.ts +393 -5
- package/dist/Switch/index.js +208 -6
- package/dist/Tabs/index.d.ts +523 -12
- package/dist/Tabs/index.js +685 -9
- package/dist/Toggle/index.d.ts +305 -2
- package/dist/Toggle/index.js +76 -3
- package/dist/ToggleGroup/index.d.ts +316 -2
- package/dist/ToggleGroup/index.js +102 -3
- package/dist/Toolbar/index.d.ts +282 -13
- package/dist/Toolbar/index.js +230 -9
- package/dist/Tooltip/index.d.ts +1572 -14
- package/dist/Tooltip/index.js +965 -14
- package/dist/index.d.ts +12758 -646
- package/dist/index.js +1 -0
- package/dist/rslib-runtime.js +18 -0
- package/package.json +3 -3
package/dist/Toolbar/index.d.ts
CHANGED
|
@@ -1,33 +1,302 @@
|
|
|
1
1
|
import * as React_2 from 'react';
|
|
2
|
-
import { ToolbarButtonProps } from '@base-ui/react/toolbar';
|
|
3
|
-
import { ToolbarGroupProps } from '@base-ui/react/toolbar';
|
|
4
|
-
import { ToolbarInputProps } from '@base-ui/react/toolbar';
|
|
5
|
-
import { ToolbarLinkProps } from '@base-ui/react/toolbar';
|
|
6
|
-
import { ToolbarRootProps } from '@base-ui/react/toolbar';
|
|
7
|
-
import { ToolbarSeparatorProps } from '@base-ui/react/toolbar';
|
|
2
|
+
import { ToolbarButtonProps as ToolbarButtonProps_2 } from '@base-ui/react/toolbar';
|
|
3
|
+
import { ToolbarGroupProps as ToolbarGroupProps_2 } from '@base-ui/react/toolbar';
|
|
4
|
+
import { ToolbarInputProps as ToolbarInputProps_2 } from '@base-ui/react/toolbar';
|
|
5
|
+
import { ToolbarLinkProps as ToolbarLinkProps_2 } from '@base-ui/react/toolbar';
|
|
6
|
+
import { ToolbarRootProps as ToolbarRootProps_2 } from '@base-ui/react/toolbar';
|
|
7
|
+
import { ToolbarSeparatorProps as ToolbarSeparatorProps_2 } from '@base-ui/react/toolbar';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Props shared by all Base UI components.
|
|
11
|
+
* Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
|
|
12
|
+
*/
|
|
13
|
+
declare type BaseUIComponentProps<ElementType extends React_2.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React_2.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
|
|
14
|
+
/**
|
|
15
|
+
* CSS class applied to the element, or a function that
|
|
16
|
+
* returns a class based on the component's state.
|
|
17
|
+
*/
|
|
18
|
+
className?: string | ((state: State) => string | undefined) | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* Allows you to replace the component's HTML element
|
|
21
|
+
* with a different tag, or compose it with another component.
|
|
22
|
+
*
|
|
23
|
+
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
24
|
+
*/
|
|
25
|
+
render?: React_2.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
|
|
26
|
+
/**
|
|
27
|
+
* Style applied to the element, or a function that
|
|
28
|
+
* returns a style object based on the component's state.
|
|
29
|
+
*/
|
|
30
|
+
style?: React_2.CSSProperties | ((state: State) => React_2.CSSProperties | undefined) | undefined;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
declare type BaseUIEvent<E extends React_2.SyntheticEvent<Element, Event>> = E & {
|
|
34
|
+
preventBaseUIHandler: () => void;
|
|
35
|
+
readonly baseUIHandlerPrevented?: boolean | undefined;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
|
|
40
|
+
*
|
|
41
|
+
* @template Props Props to be spread on the rendered element.
|
|
42
|
+
* @template State Component's internal state.
|
|
43
|
+
*/
|
|
44
|
+
declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => React_2.ReactElement<unknown>;
|
|
45
|
+
|
|
46
|
+
declare type HTMLProps<T = any> = React_2.HTMLAttributes<T> & {
|
|
47
|
+
ref?: React_2.Ref<T> | undefined;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
declare interface NativeButtonProps {
|
|
51
|
+
/**
|
|
52
|
+
* Whether the component renders a native `<button>` element when replacing it
|
|
53
|
+
* via the `render` prop.
|
|
54
|
+
* Set to `false` if the rendered element is not a button (for example, `<div>`).
|
|
55
|
+
* @default true
|
|
56
|
+
*/
|
|
57
|
+
nativeButton?: boolean | undefined;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export declare type Orientation = 'horizontal' | 'vertical';
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* A separator element accessible to screen readers.
|
|
64
|
+
* Renders a `<div>` element.
|
|
65
|
+
*
|
|
66
|
+
* Documentation: [Base UI Separator](https://base-ui.com/react/components/separator)
|
|
67
|
+
*/
|
|
68
|
+
declare const Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
69
|
+
|
|
70
|
+
declare namespace Separator {
|
|
71
|
+
type Props = SeparatorProps;
|
|
72
|
+
type State = SeparatorState;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
declare interface SeparatorProps extends BaseUIComponentProps<'div', SeparatorState> {
|
|
76
|
+
/**
|
|
77
|
+
* The orientation of the separator.
|
|
78
|
+
* @default 'horizontal'
|
|
79
|
+
*/
|
|
80
|
+
orientation?: Orientation | undefined;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
declare interface SeparatorState {
|
|
84
|
+
/**
|
|
85
|
+
* The orientation of the separator.
|
|
86
|
+
*/
|
|
87
|
+
orientation: Orientation;
|
|
88
|
+
}
|
|
8
89
|
|
|
9
90
|
export declare const Toolbar: {
|
|
10
|
-
Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<
|
|
91
|
+
Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ToolbarRootProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
|
|
11
92
|
className?: string | undefined;
|
|
12
93
|
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
13
|
-
Group: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<
|
|
94
|
+
Group: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ToolbarGroupProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
|
|
14
95
|
className?: string | undefined;
|
|
15
96
|
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
16
|
-
Button: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<
|
|
97
|
+
Button: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ToolbarButtonProps_2, "ref"> & React_2.RefAttributes<HTMLButtonElement>, "ref">, "className"> & {
|
|
17
98
|
className?: string | undefined;
|
|
18
99
|
} & React_2.RefAttributes<HTMLButtonElement>>;
|
|
19
|
-
Link: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<
|
|
100
|
+
Link: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ToolbarLinkProps_2, "ref"> & React_2.RefAttributes<HTMLAnchorElement>, "ref">, "className"> & {
|
|
20
101
|
className?: string | undefined;
|
|
21
102
|
} & React_2.RefAttributes<HTMLAnchorElement>>;
|
|
22
|
-
Input: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<
|
|
103
|
+
Input: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ToolbarInputProps_2, "ref"> & React_2.RefAttributes<HTMLInputElement>, "ref">, "className"> & {
|
|
23
104
|
className?: string | undefined;
|
|
24
105
|
} & React_2.RefAttributes<HTMLInputElement>>;
|
|
25
|
-
Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<
|
|
106
|
+
Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ToolbarSeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
|
|
26
107
|
className?: string | undefined;
|
|
27
108
|
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
28
109
|
};
|
|
29
110
|
|
|
111
|
+
/**
|
|
112
|
+
* A button that can be used as-is or as a trigger for other components.
|
|
113
|
+
* Renders a `<button>` element.
|
|
114
|
+
*
|
|
115
|
+
* Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
|
|
116
|
+
*/
|
|
117
|
+
export declare const ToolbarButton: React_2.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
118
|
+
|
|
119
|
+
export declare namespace ToolbarButton {
|
|
120
|
+
export type State = ToolbarButtonState;
|
|
121
|
+
export type Props = ToolbarButtonProps;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
export declare interface ToolbarButtonProps extends NativeButtonProps, BaseUIComponentProps<'button', ToolbarButtonState> {
|
|
125
|
+
/**
|
|
126
|
+
* When `true` the item is disabled.
|
|
127
|
+
* @default false
|
|
128
|
+
*/
|
|
129
|
+
disabled?: boolean | undefined;
|
|
130
|
+
/**
|
|
131
|
+
* When `true` the item remains focusable when disabled.
|
|
132
|
+
* @default true
|
|
133
|
+
*/
|
|
134
|
+
focusableWhenDisabled?: boolean | undefined;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
export declare interface ToolbarButtonState extends ToolbarRootState {
|
|
138
|
+
/**
|
|
139
|
+
* Whether the component is disabled.
|
|
140
|
+
*/
|
|
141
|
+
disabled: boolean;
|
|
142
|
+
/**
|
|
143
|
+
* Whether the component remains focusable when disabled.
|
|
144
|
+
*/
|
|
145
|
+
focusable: boolean;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Groups several toolbar items or toggles.
|
|
150
|
+
* Renders a `<div>` element.
|
|
151
|
+
*
|
|
152
|
+
* Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
|
|
153
|
+
*/
|
|
154
|
+
export declare const ToolbarGroup: React_2.ForwardRefExoticComponent<Omit<ToolbarGroupProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
155
|
+
|
|
156
|
+
export declare namespace ToolbarGroup {
|
|
157
|
+
export type State = ToolbarGroupState;
|
|
158
|
+
export type Props = ToolbarGroupProps;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
export declare interface ToolbarGroupProps extends BaseUIComponentProps<'div', ToolbarGroupState> {
|
|
162
|
+
/**
|
|
163
|
+
* When `true` all toolbar items in the group are disabled.
|
|
164
|
+
* @default false
|
|
165
|
+
*/
|
|
166
|
+
disabled?: boolean | undefined;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
export declare interface ToolbarGroupState extends ToolbarRootState {}
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* A native input element that integrates with Toolbar keyboard navigation.
|
|
173
|
+
* Renders an `<input>` element.
|
|
174
|
+
*
|
|
175
|
+
* Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
|
|
176
|
+
*/
|
|
177
|
+
export declare const ToolbarInput: React_2.ForwardRefExoticComponent<Omit<ToolbarInputProps, "ref"> & React_2.RefAttributes<HTMLInputElement>>;
|
|
178
|
+
|
|
179
|
+
export declare namespace ToolbarInput {
|
|
180
|
+
export type State = ToolbarInputState;
|
|
181
|
+
export type Props = ToolbarInputProps;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
export declare interface ToolbarInputProps extends BaseUIComponentProps<'input', ToolbarInputState> {
|
|
185
|
+
/**
|
|
186
|
+
* When `true` the item is disabled.
|
|
187
|
+
* @default false
|
|
188
|
+
*/
|
|
189
|
+
disabled?: boolean | undefined;
|
|
190
|
+
/**
|
|
191
|
+
* When `true` the item remains focusable when disabled.
|
|
192
|
+
* @default true
|
|
193
|
+
*/
|
|
194
|
+
focusableWhenDisabled?: boolean | undefined;
|
|
195
|
+
defaultValue?: React_2.ComponentProps<'input'>['defaultValue'] | undefined;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
export declare interface ToolbarInputState extends ToolbarRootState {
|
|
199
|
+
/**
|
|
200
|
+
* Whether the component is disabled.
|
|
201
|
+
*/
|
|
202
|
+
disabled: boolean;
|
|
203
|
+
/**
|
|
204
|
+
* Whether the component remains focusable when disabled.
|
|
205
|
+
*/
|
|
206
|
+
focusable: boolean;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/**
|
|
210
|
+
* A link component.
|
|
211
|
+
* Renders an `<a>` element.
|
|
212
|
+
*
|
|
213
|
+
* Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
|
|
214
|
+
*/
|
|
215
|
+
export declare const ToolbarLink: React_2.ForwardRefExoticComponent<Omit<ToolbarLinkProps, "ref"> & React_2.RefAttributes<HTMLAnchorElement>>;
|
|
216
|
+
|
|
217
|
+
export declare namespace ToolbarLink {
|
|
218
|
+
export type State = ToolbarLinkState;
|
|
219
|
+
export type Props = ToolbarLinkProps;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
export declare interface ToolbarLinkProps extends BaseUIComponentProps<'a', ToolbarLinkState> {}
|
|
223
|
+
|
|
224
|
+
export declare interface ToolbarLinkState {
|
|
225
|
+
/**
|
|
226
|
+
* The component orientation.
|
|
227
|
+
*/
|
|
228
|
+
orientation: ToolbarRoot.Orientation;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/**
|
|
232
|
+
* A container for grouping a set of controls, such as buttons, toggle groups, or menus.
|
|
233
|
+
* Renders a `<div>` element.
|
|
234
|
+
*
|
|
235
|
+
* Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
|
|
236
|
+
*/
|
|
237
|
+
export declare const ToolbarRoot: React_2.ForwardRefExoticComponent<Omit<ToolbarRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
238
|
+
|
|
239
|
+
export declare namespace ToolbarRoot {
|
|
240
|
+
export type ItemMetadata = ToolbarRootItemMetadata;
|
|
241
|
+
export type Orientation = ToolbarRootOrientation;
|
|
242
|
+
export type State = ToolbarRootState;
|
|
243
|
+
export type Props = ToolbarRootProps;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
export declare interface ToolbarRootItemMetadata {
|
|
247
|
+
focusableWhenDisabled: boolean;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
export declare type ToolbarRootOrientation = Orientation;
|
|
251
|
+
|
|
252
|
+
export declare interface ToolbarRootProps extends BaseUIComponentProps<'div', ToolbarRootState> {
|
|
253
|
+
disabled?: boolean | undefined;
|
|
254
|
+
/**
|
|
255
|
+
* The orientation of the toolbar.
|
|
256
|
+
* @default 'horizontal'
|
|
257
|
+
*/
|
|
258
|
+
orientation?: ToolbarRoot.Orientation | undefined;
|
|
259
|
+
/**
|
|
260
|
+
* If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
|
|
261
|
+
*
|
|
262
|
+
* @default true
|
|
263
|
+
*/
|
|
264
|
+
loopFocus?: boolean | undefined;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
export declare interface ToolbarRootState {
|
|
268
|
+
/**
|
|
269
|
+
* Whether the component is disabled.
|
|
270
|
+
*/
|
|
271
|
+
disabled: boolean;
|
|
272
|
+
/**
|
|
273
|
+
* The component orientation.
|
|
274
|
+
*/
|
|
275
|
+
orientation: ToolbarRoot.Orientation;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/**
|
|
279
|
+
* A separator element accessible to screen readers.
|
|
280
|
+
* Renders a `<div>` element.
|
|
281
|
+
*
|
|
282
|
+
* Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
|
|
283
|
+
*/
|
|
284
|
+
export declare const ToolbarSeparator: React_2.ForwardRefExoticComponent<Omit<ToolbarSeparatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
285
|
+
|
|
286
|
+
export declare namespace ToolbarSeparator {
|
|
287
|
+
export type State = ToolbarSeparatorState;
|
|
288
|
+
export type Props = ToolbarSeparatorProps;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
export declare interface ToolbarSeparatorProps extends BaseUIComponentProps<'div', ToolbarSeparatorState>, Separator.Props {}
|
|
292
|
+
|
|
293
|
+
export declare interface ToolbarSeparatorState extends SeparatorState {}
|
|
294
|
+
|
|
295
|
+
/**
|
|
296
|
+
* Adds a `preventBaseUIHandler` method to all event handlers.
|
|
297
|
+
*/
|
|
298
|
+
declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
|
|
30
299
|
|
|
31
|
-
|
|
300
|
+
declare type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React_2.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
|
|
32
301
|
|
|
33
302
|
export { }
|
package/dist/Toolbar/index.js
CHANGED
|
@@ -1,44 +1,265 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Toolbar } from "@base-ui/react/toolbar";
|
|
3
2
|
import clsx from "clsx";
|
|
3
|
+
import { ToolbarRootContext, useToolbarRootContext } from "../6107.js";
|
|
4
|
+
import { CompositeRoot } from "../9087.js";
|
|
5
|
+
import { useRenderElement, esm_formatErrorMessage } from "../8272.js";
|
|
6
|
+
import { useFocusableWhenDisabled, useButton } from "../9189.js";
|
|
7
|
+
import { CompositeItem } from "../951.js";
|
|
8
|
+
import { ARROW_LEFT, ARROW_RIGHT } from "../1500.js";
|
|
9
|
+
import { stopEvent } from "../6330.js";
|
|
10
|
+
import { Separator as Separator_Separator } from "../9635.js";
|
|
4
11
|
import * as __rspack_external_react from "react";
|
|
12
|
+
const ToolbarRoot_ToolbarRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
13
|
+
const { disabled = false, loopFocus = true, orientation = 'horizontal', className, render, style, ...elementProps } = componentProps;
|
|
14
|
+
const [itemMap, setItemMap] = __rspack_external_react.useState(()=>new Map());
|
|
15
|
+
const disabledIndices = __rspack_external_react.useMemo(()=>{
|
|
16
|
+
const output = [];
|
|
17
|
+
for (const itemMetadata of itemMap.values())if (itemMetadata?.index && !itemMetadata.focusableWhenDisabled) output.push(itemMetadata.index);
|
|
18
|
+
return output;
|
|
19
|
+
}, [
|
|
20
|
+
itemMap
|
|
21
|
+
]);
|
|
22
|
+
const toolbarRootContext = __rspack_external_react.useMemo(()=>({
|
|
23
|
+
disabled,
|
|
24
|
+
orientation,
|
|
25
|
+
setItemMap
|
|
26
|
+
}), [
|
|
27
|
+
disabled,
|
|
28
|
+
orientation,
|
|
29
|
+
setItemMap
|
|
30
|
+
]);
|
|
31
|
+
const state = {
|
|
32
|
+
disabled,
|
|
33
|
+
orientation
|
|
34
|
+
};
|
|
35
|
+
const defaultProps = {
|
|
36
|
+
'aria-orientation': orientation,
|
|
37
|
+
role: 'toolbar'
|
|
38
|
+
};
|
|
39
|
+
return /*#__PURE__*/ jsx(ToolbarRootContext.Provider, {
|
|
40
|
+
value: toolbarRootContext,
|
|
41
|
+
children: /*#__PURE__*/ jsx(CompositeRoot, {
|
|
42
|
+
render: render,
|
|
43
|
+
className: className,
|
|
44
|
+
style: style,
|
|
45
|
+
state: state,
|
|
46
|
+
refs: [
|
|
47
|
+
forwardedRef
|
|
48
|
+
],
|
|
49
|
+
props: [
|
|
50
|
+
defaultProps,
|
|
51
|
+
elementProps
|
|
52
|
+
],
|
|
53
|
+
disabledIndices: disabledIndices,
|
|
54
|
+
loopFocus: loopFocus,
|
|
55
|
+
onMapChange: setItemMap,
|
|
56
|
+
orientation: orientation
|
|
57
|
+
})
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
if ("production" !== process.env.NODE_ENV) ToolbarRoot_ToolbarRoot.displayName = "ToolbarRoot";
|
|
61
|
+
const ToolbarGroupContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
|
|
62
|
+
if ("production" !== process.env.NODE_ENV) ToolbarGroupContext.displayName = "ToolbarGroupContext";
|
|
63
|
+
function useToolbarGroupContext(optional) {
|
|
64
|
+
const context = __rspack_external_react.useContext(ToolbarGroupContext);
|
|
65
|
+
if (void 0 === context && !optional) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: ToolbarGroupContext is missing. ToolbarGroup parts must be placed within <Toolbar.Group>.' : esm_formatErrorMessage(68));
|
|
66
|
+
return context;
|
|
67
|
+
}
|
|
68
|
+
const ToolbarGroup_ToolbarGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
69
|
+
const { className, disabled: disabledProp = false, render, style, ...elementProps } = componentProps;
|
|
70
|
+
const { orientation, disabled: toolbarDisabled } = useToolbarRootContext();
|
|
71
|
+
const disabled = toolbarDisabled || disabledProp;
|
|
72
|
+
const contextValue = __rspack_external_react.useMemo(()=>({
|
|
73
|
+
disabled
|
|
74
|
+
}), [
|
|
75
|
+
disabled
|
|
76
|
+
]);
|
|
77
|
+
const state = {
|
|
78
|
+
disabled,
|
|
79
|
+
orientation
|
|
80
|
+
};
|
|
81
|
+
const element = useRenderElement('div', componentProps, {
|
|
82
|
+
state,
|
|
83
|
+
ref: forwardedRef,
|
|
84
|
+
props: [
|
|
85
|
+
{
|
|
86
|
+
role: 'group'
|
|
87
|
+
},
|
|
88
|
+
elementProps
|
|
89
|
+
]
|
|
90
|
+
});
|
|
91
|
+
return /*#__PURE__*/ jsx(ToolbarGroupContext.Provider, {
|
|
92
|
+
value: contextValue,
|
|
93
|
+
children: element
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
if ("production" !== process.env.NODE_ENV) ToolbarGroup_ToolbarGroup.displayName = "ToolbarGroup";
|
|
97
|
+
const ToolbarButton_ToolbarButton = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
98
|
+
const { className, disabled: disabledProp = false, focusableWhenDisabled = true, render, nativeButton = true, style, ...elementProps } = componentProps;
|
|
99
|
+
const itemMetadata = __rspack_external_react.useMemo(()=>({
|
|
100
|
+
focusableWhenDisabled
|
|
101
|
+
}), [
|
|
102
|
+
focusableWhenDisabled
|
|
103
|
+
]);
|
|
104
|
+
const { disabled: toolbarDisabled, orientation } = useToolbarRootContext();
|
|
105
|
+
const groupContext = useToolbarGroupContext(true);
|
|
106
|
+
const disabled = toolbarDisabled || (groupContext?.disabled ?? false) || disabledProp;
|
|
107
|
+
const { getButtonProps, buttonRef } = useButton({
|
|
108
|
+
disabled,
|
|
109
|
+
focusableWhenDisabled,
|
|
110
|
+
native: nativeButton
|
|
111
|
+
});
|
|
112
|
+
const state = {
|
|
113
|
+
disabled,
|
|
114
|
+
orientation,
|
|
115
|
+
focusable: focusableWhenDisabled
|
|
116
|
+
};
|
|
117
|
+
return /*#__PURE__*/ jsx(CompositeItem, {
|
|
118
|
+
tag: "button",
|
|
119
|
+
render: render,
|
|
120
|
+
className: className,
|
|
121
|
+
style: style,
|
|
122
|
+
metadata: itemMetadata,
|
|
123
|
+
state: state,
|
|
124
|
+
refs: [
|
|
125
|
+
forwardedRef,
|
|
126
|
+
buttonRef
|
|
127
|
+
],
|
|
128
|
+
props: [
|
|
129
|
+
elementProps,
|
|
130
|
+
{
|
|
131
|
+
disabled
|
|
132
|
+
},
|
|
133
|
+
getButtonProps
|
|
134
|
+
]
|
|
135
|
+
});
|
|
136
|
+
});
|
|
137
|
+
if ("production" !== process.env.NODE_ENV) ToolbarButton_ToolbarButton.displayName = "ToolbarButton";
|
|
138
|
+
const TOOLBAR_LINK_METADATA = {
|
|
139
|
+
focusableWhenDisabled: true
|
|
140
|
+
};
|
|
141
|
+
const ToolbarLink_ToolbarLink = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
142
|
+
const { className, render, style, ...elementProps } = componentProps;
|
|
143
|
+
const { orientation } = useToolbarRootContext();
|
|
144
|
+
const state = {
|
|
145
|
+
orientation
|
|
146
|
+
};
|
|
147
|
+
return /*#__PURE__*/ jsx(CompositeItem, {
|
|
148
|
+
tag: "a",
|
|
149
|
+
render: render,
|
|
150
|
+
className: className,
|
|
151
|
+
style: style,
|
|
152
|
+
metadata: TOOLBAR_LINK_METADATA,
|
|
153
|
+
state: state,
|
|
154
|
+
refs: [
|
|
155
|
+
forwardedRef
|
|
156
|
+
],
|
|
157
|
+
props: [
|
|
158
|
+
elementProps
|
|
159
|
+
]
|
|
160
|
+
});
|
|
161
|
+
});
|
|
162
|
+
if ("production" !== process.env.NODE_ENV) ToolbarLink_ToolbarLink.displayName = "ToolbarLink";
|
|
163
|
+
const ToolbarInput_ToolbarInput = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
164
|
+
const { className, focusableWhenDisabled = true, render, disabled: disabledProp = false, style, ...elementProps } = componentProps;
|
|
165
|
+
const itemMetadata = __rspack_external_react.useMemo(()=>({
|
|
166
|
+
focusableWhenDisabled
|
|
167
|
+
}), [
|
|
168
|
+
focusableWhenDisabled
|
|
169
|
+
]);
|
|
170
|
+
const { disabled: toolbarDisabled, orientation } = useToolbarRootContext();
|
|
171
|
+
const groupContext = useToolbarGroupContext(true);
|
|
172
|
+
const disabled = toolbarDisabled || (groupContext?.disabled ?? false) || disabledProp;
|
|
173
|
+
const { props: focusableWhenDisabledProps } = useFocusableWhenDisabled({
|
|
174
|
+
composite: true,
|
|
175
|
+
disabled,
|
|
176
|
+
focusableWhenDisabled,
|
|
177
|
+
isNativeButton: false
|
|
178
|
+
});
|
|
179
|
+
const state = {
|
|
180
|
+
disabled,
|
|
181
|
+
orientation,
|
|
182
|
+
focusable: focusableWhenDisabled
|
|
183
|
+
};
|
|
184
|
+
const defaultProps = {
|
|
185
|
+
onClick (event) {
|
|
186
|
+
if (disabled) event.preventDefault();
|
|
187
|
+
},
|
|
188
|
+
onKeyDown (event) {
|
|
189
|
+
if (event.key !== ARROW_LEFT && event.key !== ARROW_RIGHT && disabled) stopEvent(event);
|
|
190
|
+
},
|
|
191
|
+
onPointerDown (event) {
|
|
192
|
+
if (disabled) event.preventDefault();
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
return /*#__PURE__*/ jsx(CompositeItem, {
|
|
196
|
+
tag: "input",
|
|
197
|
+
render: render,
|
|
198
|
+
className: className,
|
|
199
|
+
style: style,
|
|
200
|
+
metadata: itemMetadata,
|
|
201
|
+
state: state,
|
|
202
|
+
refs: [
|
|
203
|
+
forwardedRef
|
|
204
|
+
],
|
|
205
|
+
props: [
|
|
206
|
+
defaultProps,
|
|
207
|
+
elementProps,
|
|
208
|
+
focusableWhenDisabledProps
|
|
209
|
+
]
|
|
210
|
+
});
|
|
211
|
+
});
|
|
212
|
+
if ("production" !== process.env.NODE_ENV) ToolbarInput_ToolbarInput.displayName = "ToolbarInput";
|
|
213
|
+
const ToolbarSeparator_ToolbarSeparator = /*#__PURE__*/ __rspack_external_react.forwardRef(function(props, forwardedRef) {
|
|
214
|
+
const context = useToolbarRootContext();
|
|
215
|
+
const orientation = {
|
|
216
|
+
vertical: 'horizontal',
|
|
217
|
+
horizontal: 'vertical'
|
|
218
|
+
}[context.orientation];
|
|
219
|
+
return /*#__PURE__*/ jsx(Separator_Separator, {
|
|
220
|
+
orientation: orientation,
|
|
221
|
+
...props,
|
|
222
|
+
ref: forwardedRef
|
|
223
|
+
});
|
|
224
|
+
});
|
|
225
|
+
if ("production" !== process.env.NODE_ENV) ToolbarSeparator_ToolbarSeparator.displayName = "ToolbarSeparator";
|
|
5
226
|
const Toolbar_module = {
|
|
6
227
|
root: "root-TasA57",
|
|
7
228
|
button: "button-VwIpOv",
|
|
8
229
|
link: "link-ONsUed",
|
|
9
230
|
separator: "separator-pZlgb3"
|
|
10
231
|
};
|
|
11
|
-
const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
232
|
+
const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToolbarRoot_ToolbarRoot, {
|
|
12
233
|
ref: ref,
|
|
13
234
|
className: clsx(Toolbar_module.root, className),
|
|
14
235
|
...props
|
|
15
236
|
}));
|
|
16
|
-
const Group = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
237
|
+
const Group = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToolbarGroup_ToolbarGroup, {
|
|
17
238
|
ref: ref,
|
|
18
239
|
className: clsx(Toolbar_module.group, className),
|
|
19
240
|
...props
|
|
20
241
|
}));
|
|
21
|
-
const Button = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
242
|
+
const Button = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToolbarButton_ToolbarButton, {
|
|
22
243
|
ref: ref,
|
|
23
244
|
className: clsx(Toolbar_module.button, className),
|
|
24
245
|
...props
|
|
25
246
|
}));
|
|
26
|
-
const Link = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
247
|
+
const Link = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToolbarLink_ToolbarLink, {
|
|
27
248
|
ref: ref,
|
|
28
249
|
className: clsx(Toolbar_module.link, className),
|
|
29
250
|
...props
|
|
30
251
|
}));
|
|
31
|
-
const Input = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
252
|
+
const Input = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToolbarInput_ToolbarInput, {
|
|
32
253
|
ref: ref,
|
|
33
254
|
className: clsx(Toolbar_module.input, className),
|
|
34
255
|
...props
|
|
35
256
|
}));
|
|
36
|
-
const Separator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
257
|
+
const Separator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToolbarSeparator_ToolbarSeparator, {
|
|
37
258
|
ref: ref,
|
|
38
259
|
className: clsx(Toolbar_module.separator, className),
|
|
39
260
|
...props
|
|
40
261
|
}));
|
|
41
|
-
const
|
|
262
|
+
const Toolbar = {
|
|
42
263
|
Root: Root,
|
|
43
264
|
Group: Group,
|
|
44
265
|
Button: Button,
|
|
@@ -46,4 +267,4 @@ const Toolbar_Toolbar = {
|
|
|
46
267
|
Input: Input,
|
|
47
268
|
Separator: Separator
|
|
48
269
|
};
|
|
49
|
-
export {
|
|
270
|
+
export { Toolbar };
|