@jobber/components 8.21.1 → 8.22.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/Dialog.d.ts +1 -0
- package/Dialog.js +17 -0
- package/dist/BottomSheet-cjs.js +34 -7
- package/dist/BottomSheet-es.js +34 -8
- package/dist/Card/index.cjs +1 -0
- package/dist/Card/index.mjs +1 -0
- package/dist/ComboboxChipRemove-es.js +3 -3
- package/dist/DataDump/index.cjs +1 -0
- package/dist/DataDump/index.mjs +1 -0
- package/dist/Dialog/Dialog.d.ts +3 -0
- package/dist/Dialog/Dialog.types.d.ts +205 -0
- package/dist/Dialog/DialogBottomSheet.d.ts +28 -0
- package/dist/Dialog/DialogModal.d.ts +20 -0
- package/dist/Dialog/constants.d.ts +1 -0
- package/dist/Dialog/dialogComposableShared.d.ts +53 -0
- package/dist/Dialog/dialogReturnFocus.d.ts +43 -0
- package/dist/Dialog/index.cjs +32 -0
- package/dist/Dialog/index.d.ts +4 -0
- package/dist/Dialog/index.mjs +24 -0
- package/dist/DrawerDescription-cjs.js +409 -0
- package/dist/DrawerDescription-es.js +382 -0
- package/dist/DrawerTitle-cjs.js +116 -0
- package/dist/DrawerTitle-es.js +92 -0
- package/dist/InputNumberExperimental-es.js +1 -1
- package/dist/InternalBackdrop-es.js +2 -2
- package/dist/Menu/index.cjs +1 -0
- package/dist/Menu/index.mjs +1 -0
- package/dist/Menu-cjs.js +5 -3
- package/dist/Menu-es.js +5 -3
- package/dist/MenuSubmenuTrigger-cjs.js +49 -91
- package/dist/MenuSubmenuTrigger-es.js +51 -91
- package/dist/NumberFieldInput-es.js +1 -1
- package/dist/Page/index.cjs +1 -0
- package/dist/Page/index.mjs +1 -0
- package/dist/ScrollAreaViewport-cjs.js +938 -935
- package/dist/ScrollAreaViewport-es.js +938 -938
- package/dist/dialogReturnFocus-cjs.js +427 -0
- package/dist/dialogReturnFocus-es.js +423 -0
- package/dist/index.cjs +13 -7
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +10 -7
- package/dist/primitives/BottomSheet/BottomSheet.d.ts +19 -1
- package/dist/primitives/BottomSheet/BottomSheet.types.d.ts +8 -0
- package/dist/primitives/BottomSheet/index.cjs +1 -0
- package/dist/primitives/BottomSheet/index.d.ts +1 -1
- package/dist/primitives/BottomSheet/index.mjs +1 -1
- package/dist/primitives/index.cjs +1 -0
- package/dist/primitives/index.mjs +1 -1
- package/dist/styles.css +360 -0
- package/dist/unstyledPrimitives/index.cjs +32 -249
- package/dist/unstyledPrimitives/index.d.ts +1 -0
- package/dist/unstyledPrimitives/index.mjs +30 -248
- package/dist/useButton-es.js +1 -1
- package/dist/useCompositeListItem-es.js +2 -2
- package/dist/useLabel-es.js +1 -1
- package/dist/utils/meta/meta.json +11 -1
- package/package.json +2 -2
|
@@ -0,0 +1,382 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { u as useDialogRootContext, j as useDialogPortalContext, C as COMPOSITE_KEYS, k as DialogStore } from './ScrollAreaViewport-es.js';
|
|
3
|
+
import { u as useRenderElement } from './useRenderElement-es.js';
|
|
4
|
+
import { p as popupStateMapping, C as CommonPopupDataAttributes, F as FloatingFocusManager } from './InternalBackdrop-es.js';
|
|
5
|
+
import { t as transitionStatusMapping, b as useBaseUiId, d as useOpenChangeComplete, c as createChangeEventDetails, i as imperativeAction } from './useButton-es.js';
|
|
6
|
+
import { jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
const stateAttributesMapping$2 = {
|
|
9
|
+
...popupStateMapping,
|
|
10
|
+
...transitionStatusMapping
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* An overlay displayed beneath the popup.
|
|
15
|
+
* Renders a `<div>` element.
|
|
16
|
+
*
|
|
17
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
18
|
+
*/
|
|
19
|
+
const DialogBackdrop = /*#__PURE__*/React.forwardRef(function DialogBackdrop(componentProps, forwardedRef) {
|
|
20
|
+
const {
|
|
21
|
+
render,
|
|
22
|
+
className,
|
|
23
|
+
forceRender = false,
|
|
24
|
+
...elementProps
|
|
25
|
+
} = componentProps;
|
|
26
|
+
const {
|
|
27
|
+
store
|
|
28
|
+
} = useDialogRootContext();
|
|
29
|
+
const open = store.useState('open');
|
|
30
|
+
const nested = store.useState('nested');
|
|
31
|
+
const mounted = store.useState('mounted');
|
|
32
|
+
const transitionStatus = store.useState('transitionStatus');
|
|
33
|
+
const state = {
|
|
34
|
+
open,
|
|
35
|
+
transitionStatus
|
|
36
|
+
};
|
|
37
|
+
return useRenderElement('div', componentProps, {
|
|
38
|
+
state,
|
|
39
|
+
ref: [store.context.backdropRef, forwardedRef],
|
|
40
|
+
stateAttributesMapping: stateAttributesMapping$2,
|
|
41
|
+
props: [{
|
|
42
|
+
role: 'presentation',
|
|
43
|
+
hidden: !mounted,
|
|
44
|
+
style: {
|
|
45
|
+
userSelect: 'none',
|
|
46
|
+
WebkitUserSelect: 'none'
|
|
47
|
+
}
|
|
48
|
+
}, elementProps],
|
|
49
|
+
enabled: forceRender || !nested
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
if (process.env.NODE_ENV !== "production") DialogBackdrop.displayName = "DialogBackdrop";
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* A paragraph with additional information about the dialog.
|
|
56
|
+
* Renders a `<p>` element.
|
|
57
|
+
*
|
|
58
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
59
|
+
*/
|
|
60
|
+
const DialogDescription = /*#__PURE__*/React.forwardRef(function DialogDescription(componentProps, forwardedRef) {
|
|
61
|
+
const {
|
|
62
|
+
render,
|
|
63
|
+
className,
|
|
64
|
+
id: idProp,
|
|
65
|
+
...elementProps
|
|
66
|
+
} = componentProps;
|
|
67
|
+
const {
|
|
68
|
+
store
|
|
69
|
+
} = useDialogRootContext();
|
|
70
|
+
const id = useBaseUiId(idProp);
|
|
71
|
+
store.useSyncedValueWithCleanup('descriptionElementId', id);
|
|
72
|
+
return useRenderElement('p', componentProps, {
|
|
73
|
+
ref: forwardedRef,
|
|
74
|
+
props: [{
|
|
75
|
+
id
|
|
76
|
+
}, elementProps]
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
if (process.env.NODE_ENV !== "production") DialogDescription.displayName = "DialogDescription";
|
|
80
|
+
|
|
81
|
+
let DialogPopupCssVars = /*#__PURE__*/function (DialogPopupCssVars) {
|
|
82
|
+
/**
|
|
83
|
+
* Indicates how many dialogs are nested within.
|
|
84
|
+
* @type {number}
|
|
85
|
+
*/
|
|
86
|
+
DialogPopupCssVars["nestedDialogs"] = "--nested-dialogs";
|
|
87
|
+
return DialogPopupCssVars;
|
|
88
|
+
}({});
|
|
89
|
+
|
|
90
|
+
let DialogPopupDataAttributes = function (DialogPopupDataAttributes) {
|
|
91
|
+
/**
|
|
92
|
+
* Present when the dialog is open.
|
|
93
|
+
*/
|
|
94
|
+
DialogPopupDataAttributes[DialogPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
|
|
95
|
+
/**
|
|
96
|
+
* Present when the dialog is closed.
|
|
97
|
+
*/
|
|
98
|
+
DialogPopupDataAttributes[DialogPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
|
|
99
|
+
/**
|
|
100
|
+
* Present when the dialog is animating in.
|
|
101
|
+
*/
|
|
102
|
+
DialogPopupDataAttributes[DialogPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
|
|
103
|
+
/**
|
|
104
|
+
* Present when the dialog is animating out.
|
|
105
|
+
*/
|
|
106
|
+
DialogPopupDataAttributes[DialogPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
|
|
107
|
+
/**
|
|
108
|
+
* Present when the dialog is nested within another dialog.
|
|
109
|
+
*/
|
|
110
|
+
DialogPopupDataAttributes["nested"] = "data-nested";
|
|
111
|
+
/**
|
|
112
|
+
* Present when the dialog has other open dialogs nested within it.
|
|
113
|
+
*/
|
|
114
|
+
DialogPopupDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
|
|
115
|
+
return DialogPopupDataAttributes;
|
|
116
|
+
}({});
|
|
117
|
+
|
|
118
|
+
const stateAttributesMapping$1 = {
|
|
119
|
+
...popupStateMapping,
|
|
120
|
+
...transitionStatusMapping,
|
|
121
|
+
nestedDialogOpen(value) {
|
|
122
|
+
return value ? {
|
|
123
|
+
[DialogPopupDataAttributes.nestedDialogOpen]: ''
|
|
124
|
+
} : null;
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* A container for the dialog contents.
|
|
130
|
+
* Renders a `<div>` element.
|
|
131
|
+
*
|
|
132
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
133
|
+
*/
|
|
134
|
+
const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(componentProps, forwardedRef) {
|
|
135
|
+
const {
|
|
136
|
+
className,
|
|
137
|
+
finalFocus,
|
|
138
|
+
initialFocus,
|
|
139
|
+
render,
|
|
140
|
+
...elementProps
|
|
141
|
+
} = componentProps;
|
|
142
|
+
const {
|
|
143
|
+
store
|
|
144
|
+
} = useDialogRootContext();
|
|
145
|
+
const descriptionElementId = store.useState('descriptionElementId');
|
|
146
|
+
const disablePointerDismissal = store.useState('disablePointerDismissal');
|
|
147
|
+
const floatingRootContext = store.useState('floatingRootContext');
|
|
148
|
+
const rootPopupProps = store.useState('popupProps');
|
|
149
|
+
const modal = store.useState('modal');
|
|
150
|
+
const mounted = store.useState('mounted');
|
|
151
|
+
const nested = store.useState('nested');
|
|
152
|
+
const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
|
|
153
|
+
const open = store.useState('open');
|
|
154
|
+
const openMethod = store.useState('openMethod');
|
|
155
|
+
const titleElementId = store.useState('titleElementId');
|
|
156
|
+
const transitionStatus = store.useState('transitionStatus');
|
|
157
|
+
const role = store.useState('role');
|
|
158
|
+
useDialogPortalContext();
|
|
159
|
+
useOpenChangeComplete({
|
|
160
|
+
open,
|
|
161
|
+
ref: store.context.popupRef,
|
|
162
|
+
onComplete() {
|
|
163
|
+
if (open) {
|
|
164
|
+
store.context.onOpenChangeComplete?.(true);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
// Default initial focus logic:
|
|
170
|
+
// If opened by touch, focus the popup element to prevent the virtual keyboard from opening
|
|
171
|
+
// (this is required for Android specifically as iOS handles this automatically).
|
|
172
|
+
function defaultInitialFocus(interactionType) {
|
|
173
|
+
if (interactionType === 'touch') {
|
|
174
|
+
return store.context.popupRef.current;
|
|
175
|
+
}
|
|
176
|
+
return true;
|
|
177
|
+
}
|
|
178
|
+
const resolvedInitialFocus = initialFocus === undefined ? defaultInitialFocus : initialFocus;
|
|
179
|
+
const nestedDialogOpen = nestedOpenDialogCount > 0;
|
|
180
|
+
const state = {
|
|
181
|
+
open,
|
|
182
|
+
nested,
|
|
183
|
+
transitionStatus,
|
|
184
|
+
nestedDialogOpen
|
|
185
|
+
};
|
|
186
|
+
const element = useRenderElement('div', componentProps, {
|
|
187
|
+
state,
|
|
188
|
+
props: [rootPopupProps, {
|
|
189
|
+
'aria-labelledby': titleElementId ?? undefined,
|
|
190
|
+
'aria-describedby': descriptionElementId ?? undefined,
|
|
191
|
+
role,
|
|
192
|
+
tabIndex: -1,
|
|
193
|
+
hidden: !mounted,
|
|
194
|
+
onKeyDown(event) {
|
|
195
|
+
if (COMPOSITE_KEYS.has(event.key)) {
|
|
196
|
+
event.stopPropagation();
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
style: {
|
|
200
|
+
[DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount
|
|
201
|
+
}
|
|
202
|
+
}, elementProps],
|
|
203
|
+
ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
|
|
204
|
+
stateAttributesMapping: stateAttributesMapping$1
|
|
205
|
+
});
|
|
206
|
+
return /*#__PURE__*/jsx(FloatingFocusManager, {
|
|
207
|
+
context: floatingRootContext,
|
|
208
|
+
openInteractionType: openMethod,
|
|
209
|
+
disabled: !mounted,
|
|
210
|
+
closeOnFocusOut: !disablePointerDismissal,
|
|
211
|
+
initialFocus: resolvedInitialFocus,
|
|
212
|
+
returnFocus: finalFocus,
|
|
213
|
+
modal: modal !== false,
|
|
214
|
+
restoreFocus: "popup",
|
|
215
|
+
children: element
|
|
216
|
+
});
|
|
217
|
+
});
|
|
218
|
+
if (process.env.NODE_ENV !== "production") DialogPopup.displayName = "DialogPopup";
|
|
219
|
+
|
|
220
|
+
let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
|
|
221
|
+
/**
|
|
222
|
+
* Present when the dialog is open.
|
|
223
|
+
*/
|
|
224
|
+
DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
|
|
225
|
+
/**
|
|
226
|
+
* Present when the dialog is closed.
|
|
227
|
+
*/
|
|
228
|
+
DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
|
|
229
|
+
/**
|
|
230
|
+
* Present when the dialog is animating in.
|
|
231
|
+
*/
|
|
232
|
+
DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
|
|
233
|
+
/**
|
|
234
|
+
* Present when the dialog is animating out.
|
|
235
|
+
*/
|
|
236
|
+
DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
|
|
237
|
+
/**
|
|
238
|
+
* Present when the dialog is nested within another dialog.
|
|
239
|
+
*/
|
|
240
|
+
DialogViewportDataAttributes["nested"] = "data-nested";
|
|
241
|
+
/**
|
|
242
|
+
* Present when the dialog has other open dialogs nested within it.
|
|
243
|
+
*/
|
|
244
|
+
DialogViewportDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
|
|
245
|
+
return DialogViewportDataAttributes;
|
|
246
|
+
}({});
|
|
247
|
+
|
|
248
|
+
const stateAttributesMapping = {
|
|
249
|
+
...popupStateMapping,
|
|
250
|
+
...transitionStatusMapping,
|
|
251
|
+
nested(value) {
|
|
252
|
+
return value ? {
|
|
253
|
+
[DialogViewportDataAttributes.nested]: ''
|
|
254
|
+
} : null;
|
|
255
|
+
},
|
|
256
|
+
nestedDialogOpen(value) {
|
|
257
|
+
return value ? {
|
|
258
|
+
[DialogViewportDataAttributes.nestedDialogOpen]: ''
|
|
259
|
+
} : null;
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
/**
|
|
264
|
+
* A positioning container for the dialog popup that can be made scrollable.
|
|
265
|
+
* Renders a `<div>` element.
|
|
266
|
+
*
|
|
267
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
268
|
+
*/
|
|
269
|
+
const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(componentProps, forwardedRef) {
|
|
270
|
+
const {
|
|
271
|
+
className,
|
|
272
|
+
render,
|
|
273
|
+
children,
|
|
274
|
+
...elementProps
|
|
275
|
+
} = componentProps;
|
|
276
|
+
const keepMounted = useDialogPortalContext();
|
|
277
|
+
const {
|
|
278
|
+
store
|
|
279
|
+
} = useDialogRootContext();
|
|
280
|
+
const open = store.useState('open');
|
|
281
|
+
const nested = store.useState('nested');
|
|
282
|
+
const transitionStatus = store.useState('transitionStatus');
|
|
283
|
+
const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
|
|
284
|
+
const mounted = store.useState('mounted');
|
|
285
|
+
const nestedDialogOpen = nestedOpenDialogCount > 0;
|
|
286
|
+
const state = {
|
|
287
|
+
open,
|
|
288
|
+
nested,
|
|
289
|
+
transitionStatus,
|
|
290
|
+
nestedDialogOpen
|
|
291
|
+
};
|
|
292
|
+
const shouldRender = keepMounted || mounted;
|
|
293
|
+
return useRenderElement('div', componentProps, {
|
|
294
|
+
enabled: shouldRender,
|
|
295
|
+
state,
|
|
296
|
+
ref: [forwardedRef, store.useStateSetter('viewportElement')],
|
|
297
|
+
stateAttributesMapping,
|
|
298
|
+
props: [{
|
|
299
|
+
role: 'presentation',
|
|
300
|
+
hidden: !mounted,
|
|
301
|
+
style: {
|
|
302
|
+
pointerEvents: !open ? 'none' : undefined
|
|
303
|
+
},
|
|
304
|
+
children
|
|
305
|
+
}, elementProps]
|
|
306
|
+
});
|
|
307
|
+
});
|
|
308
|
+
if (process.env.NODE_ENV !== "production") DialogViewport.displayName = "DialogViewport";
|
|
309
|
+
|
|
310
|
+
/**
|
|
311
|
+
* A handle to control a Dialog imperatively and to associate detached triggers with it.
|
|
312
|
+
*/
|
|
313
|
+
class DialogHandle {
|
|
314
|
+
/**
|
|
315
|
+
* Internal store holding the dialog state.
|
|
316
|
+
* @internal
|
|
317
|
+
*/
|
|
318
|
+
|
|
319
|
+
constructor(store) {
|
|
320
|
+
this.store = store ?? new DialogStore();
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
/**
|
|
324
|
+
* Opens the dialog and associates it with the trigger with the given id.
|
|
325
|
+
* The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.
|
|
326
|
+
*
|
|
327
|
+
* This method should only be called in an event handler or an effect (not during rendering).
|
|
328
|
+
*
|
|
329
|
+
* @param triggerId ID of the trigger to associate with the dialog. If null, the dialog will open without a trigger association.
|
|
330
|
+
*/
|
|
331
|
+
open(triggerId) {
|
|
332
|
+
const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : undefined;
|
|
333
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
334
|
+
if (triggerId && !triggerElement) {
|
|
335
|
+
console.warn(`Base UI: DialogHandle.open: No trigger found with id "${triggerId}". The dialog will open, but the trigger will not be associated with the dialog.`);
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
this.store.setOpen(true, createChangeEventDetails(imperativeAction, undefined, triggerElement));
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/**
|
|
342
|
+
* Opens the dialog and sets the payload.
|
|
343
|
+
* Does not associate the dialog with any trigger.
|
|
344
|
+
*
|
|
345
|
+
* @param payload Payload to set when opening the dialog.
|
|
346
|
+
*/
|
|
347
|
+
openWithPayload(payload) {
|
|
348
|
+
this.store.set('payload', payload);
|
|
349
|
+
this.store.setOpen(true, createChangeEventDetails(imperativeAction, undefined, undefined));
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/**
|
|
353
|
+
* Closes the dialog.
|
|
354
|
+
*/
|
|
355
|
+
close() {
|
|
356
|
+
this.store.setOpen(false, createChangeEventDetails(imperativeAction, undefined, undefined));
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/**
|
|
360
|
+
* Indicates whether the dialog is currently open.
|
|
361
|
+
*/
|
|
362
|
+
get isOpen() {
|
|
363
|
+
return this.store.state.open;
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
/**
|
|
368
|
+
* Creates a new handle to connect a Dialog.Root with detached Dialog.Trigger components.
|
|
369
|
+
*/
|
|
370
|
+
function createDialogHandle() {
|
|
371
|
+
return new DialogHandle();
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/**
|
|
375
|
+
* A paragraph with additional information about the drawer.
|
|
376
|
+
* Renders a `<p>` element.
|
|
377
|
+
*
|
|
378
|
+
* Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
|
|
379
|
+
*/
|
|
380
|
+
const DrawerDescription = DialogDescription;
|
|
381
|
+
|
|
382
|
+
export { DrawerDescription as D, DialogBackdrop as a, DialogViewport as b, DialogPopup as c, DialogDescription as d, createDialogHandle as e, DialogHandle as f };
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
|
|
5
|
+
var useRenderElement = require('./useRenderElement-cjs.js');
|
|
6
|
+
var useButton = require('./useButton-cjs.js');
|
|
7
|
+
|
|
8
|
+
function _interopNamespaceDefault(e) {
|
|
9
|
+
var n = Object.create(null);
|
|
10
|
+
if (e) {
|
|
11
|
+
Object.keys(e).forEach(function (k) {
|
|
12
|
+
if (k !== 'default') {
|
|
13
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return e[k]; }
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
n.default = e;
|
|
22
|
+
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* A button that closes the dialog.
|
|
29
|
+
* Renders a `<button>` element.
|
|
30
|
+
*
|
|
31
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
32
|
+
*/
|
|
33
|
+
const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClose(componentProps, forwardedRef) {
|
|
34
|
+
const {
|
|
35
|
+
render,
|
|
36
|
+
className,
|
|
37
|
+
disabled = false,
|
|
38
|
+
nativeButton = true,
|
|
39
|
+
...elementProps
|
|
40
|
+
} = componentProps;
|
|
41
|
+
const {
|
|
42
|
+
store
|
|
43
|
+
} = ScrollAreaViewport.useDialogRootContext();
|
|
44
|
+
const open = store.useState('open');
|
|
45
|
+
function handleClick(event) {
|
|
46
|
+
if (open) {
|
|
47
|
+
store.setOpen(false, useButton.createChangeEventDetails(useButton.closePress, event.nativeEvent));
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
const {
|
|
51
|
+
getButtonProps,
|
|
52
|
+
buttonRef
|
|
53
|
+
} = useButton.useButton({
|
|
54
|
+
disabled,
|
|
55
|
+
native: nativeButton
|
|
56
|
+
});
|
|
57
|
+
const state = {
|
|
58
|
+
disabled
|
|
59
|
+
};
|
|
60
|
+
return useRenderElement.useRenderElement('button', componentProps, {
|
|
61
|
+
state,
|
|
62
|
+
ref: [forwardedRef, buttonRef],
|
|
63
|
+
props: [{
|
|
64
|
+
onClick: handleClick
|
|
65
|
+
}, elementProps, getButtonProps]
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* A heading that labels the dialog.
|
|
72
|
+
* Renders an `<h2>` element.
|
|
73
|
+
*
|
|
74
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
75
|
+
*/
|
|
76
|
+
const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(componentProps, forwardedRef) {
|
|
77
|
+
const {
|
|
78
|
+
render,
|
|
79
|
+
className,
|
|
80
|
+
id: idProp,
|
|
81
|
+
...elementProps
|
|
82
|
+
} = componentProps;
|
|
83
|
+
const {
|
|
84
|
+
store
|
|
85
|
+
} = ScrollAreaViewport.useDialogRootContext();
|
|
86
|
+
const id = useButton.useBaseUiId(idProp);
|
|
87
|
+
store.useSyncedValueWithCleanup('titleElementId', id);
|
|
88
|
+
return useRenderElement.useRenderElement('h2', componentProps, {
|
|
89
|
+
ref: forwardedRef,
|
|
90
|
+
props: [{
|
|
91
|
+
id
|
|
92
|
+
}, elementProps]
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
if (process.env.NODE_ENV !== "production") DialogTitle.displayName = "DialogTitle";
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* A button that closes the drawer.
|
|
99
|
+
* Renders a `<button>` element.
|
|
100
|
+
*
|
|
101
|
+
* Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
|
|
102
|
+
*/
|
|
103
|
+
const DrawerClose = DialogClose;
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* A heading that labels the drawer.
|
|
107
|
+
* Renders an `<h2>` element.
|
|
108
|
+
*
|
|
109
|
+
* Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
|
|
110
|
+
*/
|
|
111
|
+
const DrawerTitle = DialogTitle;
|
|
112
|
+
|
|
113
|
+
exports.DialogClose = DialogClose;
|
|
114
|
+
exports.DialogTitle = DialogTitle;
|
|
115
|
+
exports.DrawerClose = DrawerClose;
|
|
116
|
+
exports.DrawerTitle = DrawerTitle;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { u as useDialogRootContext } from './ScrollAreaViewport-es.js';
|
|
3
|
+
import { u as useRenderElement } from './useRenderElement-es.js';
|
|
4
|
+
import { u as useButton, c as createChangeEventDetails, a as closePress, b as useBaseUiId } from './useButton-es.js';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* A button that closes the dialog.
|
|
8
|
+
* Renders a `<button>` element.
|
|
9
|
+
*
|
|
10
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
11
|
+
*/
|
|
12
|
+
const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(componentProps, forwardedRef) {
|
|
13
|
+
const {
|
|
14
|
+
render,
|
|
15
|
+
className,
|
|
16
|
+
disabled = false,
|
|
17
|
+
nativeButton = true,
|
|
18
|
+
...elementProps
|
|
19
|
+
} = componentProps;
|
|
20
|
+
const {
|
|
21
|
+
store
|
|
22
|
+
} = useDialogRootContext();
|
|
23
|
+
const open = store.useState('open');
|
|
24
|
+
function handleClick(event) {
|
|
25
|
+
if (open) {
|
|
26
|
+
store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
const {
|
|
30
|
+
getButtonProps,
|
|
31
|
+
buttonRef
|
|
32
|
+
} = useButton({
|
|
33
|
+
disabled,
|
|
34
|
+
native: nativeButton
|
|
35
|
+
});
|
|
36
|
+
const state = {
|
|
37
|
+
disabled
|
|
38
|
+
};
|
|
39
|
+
return useRenderElement('button', componentProps, {
|
|
40
|
+
state,
|
|
41
|
+
ref: [forwardedRef, buttonRef],
|
|
42
|
+
props: [{
|
|
43
|
+
onClick: handleClick
|
|
44
|
+
}, elementProps, getButtonProps]
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* A heading that labels the dialog.
|
|
51
|
+
* Renders an `<h2>` element.
|
|
52
|
+
*
|
|
53
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
54
|
+
*/
|
|
55
|
+
const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(componentProps, forwardedRef) {
|
|
56
|
+
const {
|
|
57
|
+
render,
|
|
58
|
+
className,
|
|
59
|
+
id: idProp,
|
|
60
|
+
...elementProps
|
|
61
|
+
} = componentProps;
|
|
62
|
+
const {
|
|
63
|
+
store
|
|
64
|
+
} = useDialogRootContext();
|
|
65
|
+
const id = useBaseUiId(idProp);
|
|
66
|
+
store.useSyncedValueWithCleanup('titleElementId', id);
|
|
67
|
+
return useRenderElement('h2', componentProps, {
|
|
68
|
+
ref: forwardedRef,
|
|
69
|
+
props: [{
|
|
70
|
+
id
|
|
71
|
+
}, elementProps]
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
if (process.env.NODE_ENV !== "production") DialogTitle.displayName = "DialogTitle";
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* A button that closes the drawer.
|
|
78
|
+
* Renders a `<button>` element.
|
|
79
|
+
*
|
|
80
|
+
* Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
|
|
81
|
+
*/
|
|
82
|
+
const DrawerClose = DialogClose;
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* A heading that labels the drawer.
|
|
86
|
+
* Renders an `<h2>` element.
|
|
87
|
+
*
|
|
88
|
+
* Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
|
|
89
|
+
*/
|
|
90
|
+
const DrawerTitle = DialogTitle;
|
|
91
|
+
|
|
92
|
+
export { DrawerTitle as D, DrawerClose as a, DialogTitle as b, DialogClose as c };
|
|
@@ -6,7 +6,7 @@ import { A as ActivityIndicator } from './ActivityIndicator-es.js';
|
|
|
6
6
|
import { B as Button } from './Button-es.js';
|
|
7
7
|
import { I as Icon } from './Icon-es.js';
|
|
8
8
|
import { f as formatErrorMessage, a as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
|
|
9
|
-
import {
|
|
9
|
+
import { b as useBaseUiId, e as useStableCallback, f as useTimeout, S as SafeReact, g as error, t as transitionStatusMapping, h as useTransitionStatus, j as useIsoLayoutEffect, d as useOpenChangeComplete } from './useButton-es.js';
|
|
10
10
|
import { u as useLabelableContext, L as LabelableContext, a as useFormContext, D as DEFAULT_VALIDITY_STATE, g as getCombinedFieldValidityData, f as fieldValidityMapping, F as FieldRootContext, b as useFieldRootContext, c as useLabel } from './useLabel-es.js';
|
|
11
11
|
import { jsx } from 'react/jsx-runtime';
|
|
12
12
|
import { N as NumberFieldRoot, a as NumberFieldGroup, b as NumberFieldInput, c as NumberFieldIncrement, d as NumberFieldDecrement } from './NumberFieldInput-es.js';
|
|
@@ -3,7 +3,7 @@ import React__default from 'react';
|
|
|
3
3
|
import { f as floor, t as tabbable, i as isTabbable, a as focusable } from './index.esm-es.js';
|
|
4
4
|
import { f as getComputedStyle, i as isShadowRoot, g as getNodeName, c as isNode, a as isHTMLElement, k as getWindow, j as isWebKit$1, b as isElement, d as isLastTraversableNode, e as getParentNode, o as isOverflowElement } from './floating-ui.utils.dom-es.js';
|
|
5
5
|
import { f as formatErrorMessage, a as useRefWithInit, i as isReactVersionAtLeast, N as NOOP, u as useRenderElement, E as EMPTY_OBJECT, b as useMergedRefs } from './useRenderElement-es.js';
|
|
6
|
-
import {
|
|
6
|
+
import { j as useIsoLayoutEffect, e as useStableCallback, C as ARROW_UP, A as ARROW_DOWN, s as stopEvent, w as ARROW_LEFT, x as ARROW_RIGHT, o as ownerDocument, r as contains, q as activeElement, _ as isSafari, I as visuallyHidden, c as createChangeEventDetails, y as focusOut, l as useId, p as isTypeableCombobox, n as useValueAsRef, f as useTimeout, ab as useAnimationFrame, m as getFloatingFocusElement, ai as resolveRef, a2 as triggerHover, a4 as outsidePress, z as isVirtualClick, B as isVirtualPointerEvent, af as isWebKit, V as isTypeableElement, k as getTarget, U as isMouseLikePointerType, aj as isClickLikeEvent, $ as triggerPress, ak as isReactEvent, a0 as escapeKey, T as Timeout, al as isEventTargetWithin, am as isRootElement, an as FOCUSABLE_ATTRIBUTE, ao as ACTIVE_KEY, ap as SELECTED_KEY, F as isIOS, Q as useValueChanged, ac as TransitionStatusDataAttributes, aq as AnimationFrame } from './useButton-es.js';
|
|
7
7
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
8
8
|
import * as ReactDOM from 'react-dom';
|
|
9
9
|
|
|
@@ -4201,4 +4201,4 @@ const InternalBackdrop = /*#__PURE__*/React.forwardRef(function InternalBackdrop
|
|
|
4201
4201
|
});
|
|
4202
4202
|
if (process.env.NODE_ENV !== "production") InternalBackdrop.displayName = "InternalBackdrop";
|
|
4203
4203
|
|
|
4204
|
-
export {
|
|
4204
|
+
export { useStore as $, useOnFirstRender as A, useFloatingNodeId as B, CommonPopupDataAttributes as C, DISABLED_TRANSITIONS_STYLE as D, useOpenInteractionType as E, FloatingFocusManager as F, useScrollLock as G, useDismiss as H, InternalBackdrop as I, useInteractions as J, FloatingTree as K, fastComponentRef as L, useClick as M, getTabbableBeforeElement as N, isOutsideEvent as O, PopupTriggerMap as P, getTabbableAfterElement as Q, ReactStore as R, getNextTabbable as S, TYPEAHEAD_RESET_MS as T, pressableTriggerOpenStateMapping as U, FocusGuard as V, PATIENT_CLICK_THRESHOLD as W, triggerOpenStateMapping as X, BASE_UI_SWIPE_IGNORE_SELECTOR as Y, CLICK_TRIGGER_IDENTIFIER as Z, Store as _, FloatingRootStore as a, useFloatingTree as b, getMaxListIndex as c, createGridCellMap as d, isListIndexDisabled as e, getGridNavigatedIndex as f, getMinListIndex as g, getGridCellIndices as h, isIndexOutOfListBounds as i, getGridCellIndexOfCorner as j, findNonDisabledListIndex as k, enqueueFocus as l, isElementVisible as m, useDirection as n, createAttribute as o, popupStateMapping as p, getNodeChildren as q, FloatingPortal as r, POPUP_COLLISION_AVOIDANCE as s, inertValue as t, useFloatingParentNodeId as u, FloatingNode as v, DROPDOWN_COLLISION_AVOIDANCE as w, createSelector as x, FloatingTreeStore as y, fastComponent as z };
|
package/dist/Menu/index.cjs
CHANGED
|
@@ -28,6 +28,7 @@ require('../useButton-cjs.js');
|
|
|
28
28
|
require('../clamp-cjs.js');
|
|
29
29
|
require('../OverlaySeparator-cjs.js');
|
|
30
30
|
require('../Separator-cjs.js');
|
|
31
|
+
require('../DrawerTitle-cjs.js');
|
|
31
32
|
require('../MenuSubmenuTrigger-cjs.js');
|
|
32
33
|
require('../useCompositeListItem-cjs.js');
|
|
33
34
|
|
package/dist/Menu/index.mjs
CHANGED