@jobber/components 9.4.0 → 9.5.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/Autocomplete/index.cjs +0 -1
- package/dist/Autocomplete/index.mjs +0 -1
- package/dist/Card/index.cjs +7 -7
- package/dist/Card/index.mjs +7 -7
- package/dist/Chip/index.cjs +0 -1
- package/dist/Chip/index.mjs +0 -1
- package/dist/Chips/InternalChipDismissible/hooks/index.cjs +0 -1
- package/dist/Chips/InternalChipDismissible/hooks/index.mjs +0 -1
- package/dist/Chips/InternalChipDismissible/index.cjs +0 -1
- package/dist/Chips/InternalChipDismissible/index.mjs +0 -1
- package/dist/Chips/index.cjs +0 -1
- package/dist/Chips/index.mjs +0 -1
- package/dist/ComboboxChipRemove-cjs.js +181 -184
- package/dist/ComboboxChipRemove-es.js +4 -7
- package/dist/ConfirmationModal/index.cjs +0 -1
- package/dist/ConfirmationModal/index.mjs +0 -1
- package/dist/DataDump/index.cjs +7 -7
- package/dist/DataDump/index.mjs +7 -7
- package/dist/DataList/components/DataListActions/index.cjs +0 -1
- package/dist/DataList/components/DataListActions/index.mjs +0 -1
- package/dist/DataList/components/DataListBulkActions/index.cjs +0 -1
- package/dist/DataList/components/DataListBulkActions/index.mjs +0 -1
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.cjs +0 -1
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.mjs +0 -1
- package/dist/DataList/components/DataListFilters/index.cjs +0 -1
- package/dist/DataList/components/DataListFilters/index.mjs +0 -1
- package/dist/DataList/components/DataListHeader/index.cjs +0 -1
- package/dist/DataList/components/DataListHeader/index.mjs +0 -1
- package/dist/DataList/components/DataListItem/index.cjs +0 -1
- package/dist/DataList/components/DataListItem/index.mjs +0 -1
- package/dist/DataList/components/DataListItemActions/index.cjs +0 -1
- package/dist/DataList/components/DataListItemActions/index.mjs +0 -1
- package/dist/DataList/components/DataListItemActionsOverflow/index.cjs +0 -1
- package/dist/DataList/components/DataListItemActionsOverflow/index.mjs +0 -1
- package/dist/DataList/components/DataListItems/index.cjs +0 -1
- package/dist/DataList/components/DataListItems/index.mjs +0 -1
- package/dist/DataList/components/DataListLayout/index.cjs +0 -1
- package/dist/DataList/components/DataListLayout/index.mjs +0 -1
- package/dist/DataList/components/DataListLayoutActions/index.cjs +0 -1
- package/dist/DataList/components/DataListLayoutActions/index.mjs +0 -1
- package/dist/DataList/index.cjs +0 -1
- package/dist/DataList/index.mjs +0 -1
- package/dist/DatePicker/index.cjs +0 -2
- package/dist/DatePicker/index.mjs +0 -2
- package/dist/DatePicker-cjs.js +19 -18
- package/dist/DatePicker-es.js +2 -1
- package/dist/Dialog/index.cjs +11 -6
- package/dist/Dialog/index.mjs +11 -6
- package/dist/DrawerDescription-cjs.js +7 -8
- package/dist/DrawerDescription-es.js +1 -2
- package/dist/DrawerTitle-cjs.js +4 -4
- package/dist/DrawerTitle-es.js +1 -1
- package/dist/FieldDescription-cjs.js +49 -49
- package/dist/FieldDescription-es.js +2 -2
- package/dist/FilterPicker/components/FilterPickerActivator/index.cjs +0 -1
- package/dist/FilterPicker/components/FilterPickerActivator/index.mjs +0 -1
- package/dist/FilterPicker/components/FilterPickerContent/index.cjs +0 -1
- package/dist/FilterPicker/components/FilterPickerContent/index.mjs +0 -1
- package/dist/FilterPicker/components/FilterPickerTrigger/index.cjs +0 -1
- package/dist/FilterPicker/components/FilterPickerTrigger/index.mjs +0 -1
- package/dist/FilterPicker/index.cjs +0 -1
- package/dist/FilterPicker/index.mjs +0 -1
- package/dist/FormatFile/index.cjs +0 -1
- package/dist/FormatFile/index.mjs +0 -1
- package/dist/Gallery/index.cjs +0 -1
- package/dist/Gallery/index.mjs +0 -1
- package/dist/HelperText-cjs.js +3 -2
- package/dist/HelperText-es.js +3 -2
- package/dist/InputDate/index.cjs +0 -2
- package/dist/InputDate/index.mjs +0 -2
- package/dist/InputNumber/InputNumber.d.ts +75 -5
- package/dist/InputNumber/index.cjs +27 -3
- package/dist/InputNumber/index.d.ts +2 -2
- package/dist/InputNumber/index.mjs +27 -3
- package/dist/{primitives/InputNumberExperimental → InputNumber}/types.d.ts +48 -35
- package/dist/InputNumber-cjs.js +267 -4986
- package/dist/InputNumber-es.js +268 -4987
- package/dist/LightBox/index.cjs +0 -1
- package/dist/LightBox/index.mjs +0 -1
- package/dist/Menu/index.cjs +7 -7
- package/dist/Menu/index.mjs +7 -7
- package/dist/Menu-cjs.js +4 -1
- package/dist/Menu-es.js +4 -1
- package/dist/MenuSubmenuTrigger-cjs.js +142 -143
- package/dist/MenuSubmenuTrigger-es.js +5 -6
- package/dist/Modal/index.cjs +0 -1
- package/dist/Modal/index.mjs +0 -1
- package/dist/NumberFieldInput-cjs.js +63 -63
- package/dist/NumberFieldInput-es.js +5 -5
- package/dist/Page/index.cjs +7 -8
- package/dist/Page/index.mjs +7 -8
- package/dist/Popover/index.cjs +0 -1
- package/dist/Popover/index.mjs +0 -1
- package/dist/ScrollAreaViewport-cjs.js +119 -121
- package/dist/ScrollAreaViewport-es.js +3 -5
- package/dist/Select/index.cjs +3 -9
- package/dist/Select/index.mjs +3 -9
- package/dist/SelectGroupLabel-cjs.js +117 -107
- package/dist/SelectGroupLabel-es.js +20 -12
- package/dist/Tooltip/index.cjs +0 -1
- package/dist/Tooltip/index.mjs +0 -1
- package/dist/dialogReturnFocus-cjs.js +4 -1
- package/dist/dialogReturnFocus-es.js +4 -1
- package/dist/docs/InputNumber/InputNumber.md +564 -56
- package/dist/docs/index.md +0 -1
- package/dist/floating-ui.react-cjs.js +34 -35
- package/dist/floating-ui.react-dom-cjs.js +64 -65
- package/dist/floating-ui.react-dom-es.js +1 -2
- package/dist/floating-ui.react-es.js +1 -2
- package/dist/floating-ui.utils-cjs.js +183 -0
- package/dist/floating-ui.utils-es.js +165 -1
- package/dist/index.cjs +10 -15
- package/dist/index.mjs +10 -15
- package/dist/primitives/BottomSheet/index.cjs +2 -5
- package/dist/primitives/BottomSheet/index.mjs +2 -5
- package/dist/primitives/ComboboxPrimitive/index.cjs +3 -7
- package/dist/primitives/ComboboxPrimitive/index.mjs +3 -7
- package/dist/primitives/HelperText/HelperText.d.ts +4 -1
- package/dist/primitives/HelperText/index.cjs +1 -1
- package/dist/primitives/HelperText/index.mjs +1 -1
- package/dist/primitives/SelectPrimitive/index.cjs +3 -9
- package/dist/primitives/SelectPrimitive/index.mjs +3 -9
- package/dist/primitives/index.cjs +2 -16
- package/dist/primitives/index.d.ts +0 -2
- package/dist/primitives/index.mjs +2 -15
- package/dist/scrollEdges-cjs.js +6 -2
- package/dist/scrollEdges-es.js +5 -2
- package/dist/styles.css +573 -902
- package/dist/unstyledPrimitives/index.cjs +105 -111
- package/dist/unstyledPrimitives/index.mjs +5 -11
- package/dist/useCompositeListItem-cjs.js +516 -90
- package/dist/useCompositeListItem-es.js +407 -6
- package/dist/useLabel-cjs.js +10 -10
- package/dist/useLabel-es.js +3 -3
- package/dist/useRenderElement-es.js +1 -1
- package/dist/useScrollLock-cjs.js +1332 -203
- package/dist/useScrollLock-es.js +1068 -5
- package/dist/utils/meta/meta.json +12 -0
- package/package.json +2 -3
- package/dist/InputNumber/InputNumber.types.d.ts +0 -20
- package/dist/InputNumberExperimental-cjs.js +0 -277
- package/dist/InputNumberExperimental-es.js +0 -275
- package/dist/clamp-cjs.js +0 -7
- package/dist/clamp-es.js +0 -5
- package/dist/clsx-cjs.js +0 -5
- package/dist/clsx-es.js +0 -3
- package/dist/docs/InputNumberExperimental/InputNumberExperimental.md +0 -578
- package/dist/floating-ui.utils.dom-cjs.js +0 -185
- package/dist/floating-ui.utils.dom-es.js +0 -165
- package/dist/isElementDisabled-cjs.js +0 -40
- package/dist/isElementDisabled-es.js +0 -18
- package/dist/primitives/InputNumberExperimental/InputNumberExperimental.d.ts +0 -77
- package/dist/primitives/InputNumberExperimental/index.cjs +0 -30
- package/dist/primitives/InputNumberExperimental/index.d.ts +0 -2
- package/dist/primitives/InputNumberExperimental/index.mjs +0 -24
- package/dist/resolveAriaLabelledBy-cjs.js +0 -200
- package/dist/resolveAriaLabelledBy-es.js +0 -166
- package/dist/useButton-cjs.js +0 -1164
- package/dist/useButton-es.js +0 -1071
- package/dist/useLabelableId-cjs.js +0 -278
- package/dist/useLabelableId-es.js +0 -247
package/dist/useButton-es.js
DELETED
|
@@ -1,1071 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { a as useRefWithInit, E as EMPTY_OBJECT, f as formatErrorMessage, m as mergeProps, d as makeEventPreventable } from './useRenderElement-es.js';
|
|
3
|
-
import { a as isShadowRoot, i as isHTMLElement } from './floating-ui.utils.dom-es.js';
|
|
4
|
-
import * as ReactDOM from 'react-dom';
|
|
5
|
-
|
|
6
|
-
let set;
|
|
7
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
8
|
-
set = new Set();
|
|
9
|
-
}
|
|
10
|
-
function error(...messages) {
|
|
11
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
12
|
-
const messageKey = messages.join(' ');
|
|
13
|
-
if (!set.has(messageKey)) {
|
|
14
|
-
set.add(messageKey);
|
|
15
|
-
console.error(`Base UI: ${messageKey}`);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function useControlled({
|
|
21
|
-
controlled,
|
|
22
|
-
default: defaultProp,
|
|
23
|
-
name,
|
|
24
|
-
state = 'value'
|
|
25
|
-
}) {
|
|
26
|
-
// isControlled is ignored in the hook dependency lists as it should never change.
|
|
27
|
-
const {
|
|
28
|
-
current: isControlled
|
|
29
|
-
} = React.useRef(controlled !== undefined);
|
|
30
|
-
const [valueState, setValue] = React.useState(defaultProp);
|
|
31
|
-
const value = isControlled ? controlled : valueState;
|
|
32
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
33
|
-
React.useEffect(() => {
|
|
34
|
-
if (isControlled !== (controlled !== undefined)) {
|
|
35
|
-
error([`A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
|
36
|
-
}
|
|
37
|
-
}, [state, name, controlled]);
|
|
38
|
-
const {
|
|
39
|
-
current: defaultValue
|
|
40
|
-
} = React.useRef(defaultProp);
|
|
41
|
-
React.useEffect(() => {
|
|
42
|
-
if (!isControlled && serializeToDevModeString(defaultValue) !== serializeToDevModeString(defaultProp)) {
|
|
43
|
-
error([`A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
|
|
44
|
-
}
|
|
45
|
-
}, [defaultProp]);
|
|
46
|
-
}
|
|
47
|
-
const setValueIfUncontrolled = React.useCallback(newValue => {
|
|
48
|
-
if (!isControlled) {
|
|
49
|
-
setValue(newValue);
|
|
50
|
-
}
|
|
51
|
-
}, []);
|
|
52
|
-
return [value, setValueIfUncontrolled];
|
|
53
|
-
}
|
|
54
|
-
function serializeToDevModeString(input) {
|
|
55
|
-
let nextId = 0;
|
|
56
|
-
const seen = new WeakMap();
|
|
57
|
-
try {
|
|
58
|
-
const result = JSON.stringify(input, function replacer(key, value) {
|
|
59
|
-
if (key === '_owner' && this != null && typeof this === 'object' && '$$typeof' in this) {
|
|
60
|
-
return undefined;
|
|
61
|
-
}
|
|
62
|
-
if (typeof value === 'bigint') {
|
|
63
|
-
return `__bigint__:${value}`;
|
|
64
|
-
}
|
|
65
|
-
if (value !== null && typeof value === 'object') {
|
|
66
|
-
const id = seen.get(value);
|
|
67
|
-
if (id !== undefined) {
|
|
68
|
-
return `__object__:${id}`;
|
|
69
|
-
}
|
|
70
|
-
seen.set(value, nextId);
|
|
71
|
-
nextId += 1;
|
|
72
|
-
}
|
|
73
|
-
return value;
|
|
74
|
-
});
|
|
75
|
-
return result ?? `__top__:${typeof input}`;
|
|
76
|
-
} catch {
|
|
77
|
-
return '__unserializable__';
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
const noop = () => {};
|
|
82
|
-
const useIsoLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : noop;
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* A clone of the React namespace for reading APIs that may be missing in older
|
|
86
|
-
* supported React versions. Bundlers can rewrite direct `React.someNewApi`
|
|
87
|
-
* reads into named imports, which breaks React 17. Reading from this cloned
|
|
88
|
-
* object keeps those lookups optional.
|
|
89
|
-
*
|
|
90
|
-
* @see https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
|
|
91
|
-
*/
|
|
92
|
-
const SafeReact = {
|
|
93
|
-
...React
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
const useInsertionEffect = SafeReact.useInsertionEffect;
|
|
97
|
-
const useSafeInsertionEffect =
|
|
98
|
-
// React 17 doesn't have useInsertionEffect.
|
|
99
|
-
useInsertionEffect &&
|
|
100
|
-
// Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
|
|
101
|
-
useInsertionEffect !== SafeReact.useLayoutEffect ? useInsertionEffect : fn => fn();
|
|
102
|
-
/**
|
|
103
|
-
* Stabilizes the function passed so it's always the same between renders.
|
|
104
|
-
*
|
|
105
|
-
* The function becomes non-reactive to any values it captures.
|
|
106
|
-
* It can safely be passed as a dependency of `React.useMemo` and `React.useEffect` without re-triggering them if its captured values change.
|
|
107
|
-
*
|
|
108
|
-
* The function must only be called inside effects and event handlers, never during render (which throws an error).
|
|
109
|
-
*
|
|
110
|
-
* This hook is a more permissive version of React 19.2's `React.useEffectEvent` in that it can be passed through contexts and called in event handler props, not just effects.
|
|
111
|
-
*/
|
|
112
|
-
function useStableCallback(callback) {
|
|
113
|
-
const stable = useRefWithInit(createStableCallback).current;
|
|
114
|
-
stable.next = callback;
|
|
115
|
-
useSafeInsertionEffect(stable.effect);
|
|
116
|
-
return stable.trampoline;
|
|
117
|
-
}
|
|
118
|
-
function createStableCallback() {
|
|
119
|
-
const stable = {
|
|
120
|
-
next: undefined,
|
|
121
|
-
callback: assertNotCalled,
|
|
122
|
-
trampoline: (...args) => stable.callback?.(...args),
|
|
123
|
-
effect: () => {
|
|
124
|
-
stable.callback = stable.next;
|
|
125
|
-
}
|
|
126
|
-
};
|
|
127
|
-
return stable;
|
|
128
|
-
}
|
|
129
|
-
function assertNotCalled() {
|
|
130
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
131
|
-
// TODO: fix mui/no-guarded-throw
|
|
132
|
-
// eslint-disable-next-line mui/no-guarded-throw
|
|
133
|
-
throw /* minify-error-disabled */new Error('Base UI: Cannot call an event handler while rendering.');
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* Untracks the provided value by turning it into a ref to remove its reactivity.
|
|
139
|
-
*
|
|
140
|
-
* Used to access the passed value inside `React.useEffect` without causing the effect to re-run when the value changes.
|
|
141
|
-
*/
|
|
142
|
-
function useValueAsRef(value) {
|
|
143
|
-
const latest = useRefWithInit(createLatestRef, value).current;
|
|
144
|
-
latest.next = value;
|
|
145
|
-
|
|
146
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
147
|
-
useIsoLayoutEffect(latest.effect);
|
|
148
|
-
return latest;
|
|
149
|
-
}
|
|
150
|
-
function createLatestRef(value) {
|
|
151
|
-
const latest = {
|
|
152
|
-
current: value,
|
|
153
|
-
next: value,
|
|
154
|
-
effect: () => {
|
|
155
|
-
latest.current = latest.next;
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
return latest;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
const visuallyHiddenBase = {
|
|
162
|
-
clipPath: 'inset(50%)',
|
|
163
|
-
overflow: 'hidden',
|
|
164
|
-
whiteSpace: 'nowrap',
|
|
165
|
-
border: 0,
|
|
166
|
-
padding: 0,
|
|
167
|
-
width: 1,
|
|
168
|
-
height: 1,
|
|
169
|
-
margin: -1
|
|
170
|
-
};
|
|
171
|
-
const visuallyHidden = {
|
|
172
|
-
...visuallyHiddenBase,
|
|
173
|
-
position: 'fixed',
|
|
174
|
-
top: 0,
|
|
175
|
-
left: 0
|
|
176
|
-
};
|
|
177
|
-
const visuallyHiddenInput = {
|
|
178
|
-
...visuallyHiddenBase,
|
|
179
|
-
position: 'absolute'
|
|
180
|
-
};
|
|
181
|
-
|
|
182
|
-
function ownerDocument(node) {
|
|
183
|
-
return node?.ownerDocument || document;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
/**
|
|
187
|
-
* Adds an event listener and returns a cleanup function to remove it.
|
|
188
|
-
*/
|
|
189
|
-
|
|
190
|
-
function addEventListener(target, type, listener, options) {
|
|
191
|
-
target.addEventListener(type, listener, options);
|
|
192
|
-
return () => {
|
|
193
|
-
target.removeEventListener(type, listener, options);
|
|
194
|
-
};
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
const EMPTY$2 = [];
|
|
198
|
-
|
|
199
|
-
/**
|
|
200
|
-
* A React.useEffect equivalent that runs once, when the component is mounted.
|
|
201
|
-
*/
|
|
202
|
-
function useOnMount(fn) {
|
|
203
|
-
// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- no need to put `fn` in the dependency array
|
|
204
|
-
/* eslint-disable react-hooks/exhaustive-deps */
|
|
205
|
-
React.useEffect(fn, EMPTY$2);
|
|
206
|
-
/* eslint-enable react-hooks/exhaustive-deps */
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
/** Unlike `setTimeout`, rAF doesn't guarantee a positive integer return value, so we can't have
|
|
210
|
-
* a monomorphic `uint` type with `0` meaning empty.
|
|
211
|
-
* See warning note at:
|
|
212
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#return_value */
|
|
213
|
-
const EMPTY$1 = null;
|
|
214
|
-
let LAST_RAF = globalThis.requestAnimationFrame;
|
|
215
|
-
class Scheduler {
|
|
216
|
-
/* This implementation uses an array as a backing data-structure for frame callbacks.
|
|
217
|
-
* It allows `O(1)` callback cancelling by inserting a `null` in the array, though it
|
|
218
|
-
* never calls the native `cancelAnimationFrame` if there are no frames left. This can
|
|
219
|
-
* be much more efficient if there is a call pattern that alterns as
|
|
220
|
-
* "request-cancel-request-cancel-…".
|
|
221
|
-
* But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation
|
|
222
|
-
* frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */
|
|
223
|
-
|
|
224
|
-
callbacks = [];
|
|
225
|
-
callbacksCount = 0;
|
|
226
|
-
nextId = 1;
|
|
227
|
-
startId = 1;
|
|
228
|
-
isScheduled = false;
|
|
229
|
-
tick = timestamp => {
|
|
230
|
-
this.isScheduled = false;
|
|
231
|
-
const currentCallbacks = this.callbacks;
|
|
232
|
-
const currentCallbacksCount = this.callbacksCount;
|
|
233
|
-
|
|
234
|
-
// Update these before iterating, callbacks could call `requestAnimationFrame` again.
|
|
235
|
-
this.callbacks = [];
|
|
236
|
-
this.callbacksCount = 0;
|
|
237
|
-
this.startId = this.nextId;
|
|
238
|
-
if (currentCallbacksCount > 0) {
|
|
239
|
-
for (let i = 0; i < currentCallbacks.length; i += 1) {
|
|
240
|
-
currentCallbacks[i]?.(timestamp);
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
};
|
|
244
|
-
request(fn) {
|
|
245
|
-
const id = this.nextId;
|
|
246
|
-
this.nextId += 1;
|
|
247
|
-
this.callbacks.push(fn);
|
|
248
|
-
this.callbacksCount += 1;
|
|
249
|
-
|
|
250
|
-
/* In a test environment with fake timers, a fake `requestAnimationFrame` can be called
|
|
251
|
-
* but there's no guarantee that the animation frame will actually run before the fake
|
|
252
|
-
* timers are teared, which leaves `isScheduled` set, but won't run our `tick()`. */
|
|
253
|
-
const didRAFChange = process.env.NODE_ENV !== 'production' && LAST_RAF !== requestAnimationFrame && (LAST_RAF = requestAnimationFrame, true);
|
|
254
|
-
if (!this.isScheduled || didRAFChange) {
|
|
255
|
-
requestAnimationFrame(this.tick);
|
|
256
|
-
this.isScheduled = true;
|
|
257
|
-
}
|
|
258
|
-
return id;
|
|
259
|
-
}
|
|
260
|
-
cancel(id) {
|
|
261
|
-
const index = id - this.startId;
|
|
262
|
-
if (index < 0 || index >= this.callbacks.length) {
|
|
263
|
-
return;
|
|
264
|
-
}
|
|
265
|
-
this.callbacks[index] = null;
|
|
266
|
-
this.callbacksCount -= 1;
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
const scheduler = new Scheduler();
|
|
270
|
-
class AnimationFrame {
|
|
271
|
-
static create() {
|
|
272
|
-
return new AnimationFrame();
|
|
273
|
-
}
|
|
274
|
-
static request(fn) {
|
|
275
|
-
return scheduler.request(fn);
|
|
276
|
-
}
|
|
277
|
-
static cancel(id) {
|
|
278
|
-
return scheduler.cancel(id);
|
|
279
|
-
}
|
|
280
|
-
currentId = EMPTY$1;
|
|
281
|
-
|
|
282
|
-
/**
|
|
283
|
-
* Executes `fn` after `delay`, clearing any previously scheduled call.
|
|
284
|
-
*/
|
|
285
|
-
request(fn) {
|
|
286
|
-
this.cancel();
|
|
287
|
-
this.currentId = scheduler.request(() => {
|
|
288
|
-
this.currentId = EMPTY$1;
|
|
289
|
-
fn();
|
|
290
|
-
});
|
|
291
|
-
}
|
|
292
|
-
cancel = () => {
|
|
293
|
-
if (this.currentId !== EMPTY$1) {
|
|
294
|
-
scheduler.cancel(this.currentId);
|
|
295
|
-
this.currentId = EMPTY$1;
|
|
296
|
-
}
|
|
297
|
-
};
|
|
298
|
-
disposeEffect = () => {
|
|
299
|
-
return this.cancel;
|
|
300
|
-
};
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
/**
|
|
304
|
-
* A `requestAnimationFrame` with automatic cleanup and guard.
|
|
305
|
-
*/
|
|
306
|
-
function useAnimationFrame() {
|
|
307
|
-
const timeout = useRefWithInit(AnimationFrame.create).current;
|
|
308
|
-
useOnMount(timeout.disposeEffect);
|
|
309
|
-
return timeout;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
const EMPTY = 0;
|
|
313
|
-
class Timeout {
|
|
314
|
-
static create() {
|
|
315
|
-
return new Timeout();
|
|
316
|
-
}
|
|
317
|
-
currentId = EMPTY;
|
|
318
|
-
|
|
319
|
-
/**
|
|
320
|
-
* Executes `fn` after `delay`, clearing any previously scheduled call.
|
|
321
|
-
*/
|
|
322
|
-
start(delay, fn) {
|
|
323
|
-
this.clear();
|
|
324
|
-
this.currentId = setTimeout(() => {
|
|
325
|
-
this.currentId = EMPTY;
|
|
326
|
-
fn();
|
|
327
|
-
}, delay); /* Node.js types are enabled in development */
|
|
328
|
-
}
|
|
329
|
-
isStarted() {
|
|
330
|
-
return this.currentId !== EMPTY;
|
|
331
|
-
}
|
|
332
|
-
clear = () => {
|
|
333
|
-
if (this.currentId !== EMPTY) {
|
|
334
|
-
clearTimeout(this.currentId);
|
|
335
|
-
this.currentId = EMPTY;
|
|
336
|
-
}
|
|
337
|
-
};
|
|
338
|
-
disposeEffect = () => {
|
|
339
|
-
return this.clear;
|
|
340
|
-
};
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
/**
|
|
344
|
-
* A `setTimeout` with automatic cleanup and guard.
|
|
345
|
-
*/
|
|
346
|
-
function useTimeout() {
|
|
347
|
-
const timeout = useRefWithInit(Timeout.create).current;
|
|
348
|
-
useOnMount(timeout.disposeEffect);
|
|
349
|
-
return timeout;
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
/**
|
|
353
|
-
* Reads `navigator.userAgent` / `navigator.platform` (legacy but universally
|
|
354
|
-
* supported) into a normalized shape. In development, prefers the modern
|
|
355
|
-
* `navigator.userAgentData` API on Chromium to avoid DevTools warnings about
|
|
356
|
-
* the deprecated reads; that branch is dead-code-eliminated in production
|
|
357
|
-
* builds to keep the bundle small.
|
|
358
|
-
*
|
|
359
|
-
* Returns empty/zero values when `navigator` is undefined (SSR), so every
|
|
360
|
-
* derived flag safely evaluates to `false`.
|
|
361
|
-
*/
|
|
362
|
-
function readRawData() {
|
|
363
|
-
if (typeof navigator === 'undefined') {
|
|
364
|
-
return {
|
|
365
|
-
userAgent: '',
|
|
366
|
-
platform: '',
|
|
367
|
-
maxTouchPoints: 0
|
|
368
|
-
};
|
|
369
|
-
}
|
|
370
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
371
|
-
const uaData = navigator.userAgentData;
|
|
372
|
-
if (uaData && Array.isArray(uaData.brands)) {
|
|
373
|
-
return {
|
|
374
|
-
userAgent: uaData.brands.map(({
|
|
375
|
-
brand,
|
|
376
|
-
version
|
|
377
|
-
}) => `${brand}/${version}`).join(' '),
|
|
378
|
-
platform: uaData.platform ?? navigator.platform ?? '',
|
|
379
|
-
maxTouchPoints: navigator.maxTouchPoints ?? 0
|
|
380
|
-
};
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
return {
|
|
384
|
-
userAgent: navigator.userAgent,
|
|
385
|
-
platform: navigator.platform ?? '',
|
|
386
|
-
maxTouchPoints: navigator.maxTouchPoints ?? 0
|
|
387
|
-
};
|
|
388
|
-
}
|
|
389
|
-
const {
|
|
390
|
-
userAgent,
|
|
391
|
-
platform,
|
|
392
|
-
maxTouchPoints
|
|
393
|
-
} = readRawData();
|
|
394
|
-
const lowerUserAgent = userAgent.toLowerCase();
|
|
395
|
-
const lowerPlatform = platform.toLowerCase();
|
|
396
|
-
|
|
397
|
-
// iPadOS 13+ reports `MacIntel` for `navigator.platform`; disambiguated via
|
|
398
|
-
// `maxTouchPoints` so iPad is classified as iOS, not macOS.
|
|
399
|
-
// https://github.com/mui/base-ui/issues/1309
|
|
400
|
-
/** iPhone, iPad (including iPadOS 13+ reporting as macOS), iPod. */
|
|
401
|
-
const ios = /^i(os$|p)/.test(lowerPlatform) || lowerPlatform === 'macintel' && maxTouchPoints > 1;
|
|
402
|
-
|
|
403
|
-
/** Android phones, tablets, and embedded Android browsers. */
|
|
404
|
-
const ANDROID_STRING = 'android';
|
|
405
|
-
const android = lowerPlatform === ANDROID_STRING || lowerUserAgent.includes(ANDROID_STRING);
|
|
406
|
-
|
|
407
|
-
/** macOS desktop. Excludes iPadOS, which reports as `MacIntel`. */
|
|
408
|
-
const mac = !ios && lowerPlatform.startsWith('mac');
|
|
409
|
-
|
|
410
|
-
/** Windows desktop. */
|
|
411
|
-
lowerPlatform.startsWith('win');
|
|
412
|
-
|
|
413
|
-
/** Any Apple OS (`mac || ios`). */
|
|
414
|
-
const apple = mac || ios;
|
|
415
|
-
|
|
416
|
-
/** Running in jsdom or HappyDOM (used by unit tests). */
|
|
417
|
-
const jsdom = /jsdom|happydom/.test(lowerUserAgent);
|
|
418
|
-
|
|
419
|
-
function stopEvent(event) {
|
|
420
|
-
event.preventDefault();
|
|
421
|
-
event.stopPropagation();
|
|
422
|
-
}
|
|
423
|
-
function isReactEvent(event) {
|
|
424
|
-
return 'nativeEvent' in event;
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
// License: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/isVirtualEvent.ts
|
|
428
|
-
function isVirtualClick(event) {
|
|
429
|
-
if (event.pointerType === '' && event.isTrusted) {
|
|
430
|
-
return true;
|
|
431
|
-
}
|
|
432
|
-
if (android && event.pointerType) {
|
|
433
|
-
return event.type === 'click' && event.buttons === 1;
|
|
434
|
-
}
|
|
435
|
-
return event.detail === 0 && !event.pointerType;
|
|
436
|
-
}
|
|
437
|
-
function isVirtualPointerEvent(event) {
|
|
438
|
-
if (jsdom) {
|
|
439
|
-
return false;
|
|
440
|
-
}
|
|
441
|
-
return !android && event.width === 0 && event.height === 0 || android && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse' ||
|
|
442
|
-
// iOS VoiceOver returns 0.333• for width/height.
|
|
443
|
-
event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'touch';
|
|
444
|
-
}
|
|
445
|
-
function isMouseLikePointerType(pointerType, strict) {
|
|
446
|
-
// On some Linux machines with Chromium, mouse inputs return a `pointerType`
|
|
447
|
-
// of "pen": https://github.com/floating-ui/floating-ui/issues/2015
|
|
448
|
-
const values = ['mouse', 'pen'];
|
|
449
|
-
if (!strict) {
|
|
450
|
-
values.push('', undefined);
|
|
451
|
-
}
|
|
452
|
-
return values.includes(pointerType);
|
|
453
|
-
}
|
|
454
|
-
function isClickLikeEvent(event) {
|
|
455
|
-
const type = event.type;
|
|
456
|
-
return type === 'click' || type === 'mousedown' || type === 'keydown' || type === 'keyup';
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
function activeElement(doc) {
|
|
460
|
-
let element = doc.activeElement;
|
|
461
|
-
while (element?.shadowRoot?.activeElement != null) {
|
|
462
|
-
element = element.shadowRoot.activeElement;
|
|
463
|
-
}
|
|
464
|
-
return element;
|
|
465
|
-
}
|
|
466
|
-
function contains(parent, child) {
|
|
467
|
-
if (!parent || !child) {
|
|
468
|
-
return false;
|
|
469
|
-
}
|
|
470
|
-
const rootNode = child.getRootNode?.();
|
|
471
|
-
|
|
472
|
-
// First, attempt with the faster native method.
|
|
473
|
-
if (parent.contains(child)) {
|
|
474
|
-
return true;
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
// Then fall back to traversing out of shadow roots when needed.
|
|
478
|
-
if (rootNode && isShadowRoot(rootNode)) {
|
|
479
|
-
let next = child;
|
|
480
|
-
while (next) {
|
|
481
|
-
if (parent === next) {
|
|
482
|
-
return true;
|
|
483
|
-
}
|
|
484
|
-
next = next.parentNode || next.host;
|
|
485
|
-
}
|
|
486
|
-
}
|
|
487
|
-
return false;
|
|
488
|
-
}
|
|
489
|
-
function getTarget(event) {
|
|
490
|
-
if ('composedPath' in event) {
|
|
491
|
-
return event.composedPath()[0];
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
// TS assumes `composedPath()` always exists, but older browsers without
|
|
495
|
-
// shadow DOM support still fall back to `target`.
|
|
496
|
-
return event.target;
|
|
497
|
-
}
|
|
498
|
-
|
|
499
|
-
const none = 'none';
|
|
500
|
-
const triggerPress = 'trigger-press';
|
|
501
|
-
const triggerHover = 'trigger-hover';
|
|
502
|
-
const triggerFocus = 'trigger-focus';
|
|
503
|
-
const outsidePress = 'outside-press';
|
|
504
|
-
const itemPress = 'item-press';
|
|
505
|
-
const closePress = 'close-press';
|
|
506
|
-
const clearPress = 'clear-press';
|
|
507
|
-
const chipRemovePress = 'chip-remove-press';
|
|
508
|
-
const incrementPress = 'increment-press';
|
|
509
|
-
const decrementPress = 'decrement-press';
|
|
510
|
-
const inputChange = 'input-change';
|
|
511
|
-
const inputClear = 'input-clear';
|
|
512
|
-
const inputBlur = 'input-blur';
|
|
513
|
-
const inputPaste = 'input-paste';
|
|
514
|
-
const inputPress = 'input-press';
|
|
515
|
-
const focusOut = 'focus-out';
|
|
516
|
-
const escapeKey = 'escape-key';
|
|
517
|
-
const closeWatcher = 'close-watcher';
|
|
518
|
-
const listNavigation = 'list-navigation';
|
|
519
|
-
const keyboard = 'keyboard';
|
|
520
|
-
const pointer = 'pointer';
|
|
521
|
-
const wheel = 'wheel';
|
|
522
|
-
const scrub = 'scrub';
|
|
523
|
-
const cancelOpen = 'cancel-open';
|
|
524
|
-
const siblingOpen = 'sibling-open';
|
|
525
|
-
const imperativeAction = 'imperative-action';
|
|
526
|
-
const swipe = 'swipe';
|
|
527
|
-
const windowResize = 'window-resize';
|
|
528
|
-
|
|
529
|
-
/**
|
|
530
|
-
* Maps a change `reason` string to the corresponding native event type.
|
|
531
|
-
*/
|
|
532
|
-
|
|
533
|
-
/**
|
|
534
|
-
* Details of custom change events emitted by Base UI components.
|
|
535
|
-
*/
|
|
536
|
-
|
|
537
|
-
/**
|
|
538
|
-
* Details of custom generic events emitted by Base UI components.
|
|
539
|
-
*/
|
|
540
|
-
|
|
541
|
-
/**
|
|
542
|
-
* Creates a Base UI event details object with the given reason and utilities
|
|
543
|
-
* for preventing Base UI's internal event handling.
|
|
544
|
-
*/
|
|
545
|
-
function createChangeEventDetails(reason, event, trigger, customProperties) {
|
|
546
|
-
let canceled = false;
|
|
547
|
-
let allowPropagation = false;
|
|
548
|
-
const custom = customProperties ?? EMPTY_OBJECT;
|
|
549
|
-
const details = {
|
|
550
|
-
reason,
|
|
551
|
-
event: event ?? new Event('base-ui'),
|
|
552
|
-
cancel() {
|
|
553
|
-
canceled = true;
|
|
554
|
-
},
|
|
555
|
-
allowPropagation() {
|
|
556
|
-
allowPropagation = true;
|
|
557
|
-
},
|
|
558
|
-
get isCanceled() {
|
|
559
|
-
return canceled;
|
|
560
|
-
},
|
|
561
|
-
get isPropagationAllowed() {
|
|
562
|
-
return allowPropagation;
|
|
563
|
-
},
|
|
564
|
-
trigger,
|
|
565
|
-
...custom
|
|
566
|
-
};
|
|
567
|
-
return details;
|
|
568
|
-
}
|
|
569
|
-
function createGenericEventDetails(reason, event, customProperties) {
|
|
570
|
-
const custom = customProperties ?? EMPTY_OBJECT;
|
|
571
|
-
const details = {
|
|
572
|
-
reason,
|
|
573
|
-
event: event ?? new Event('base-ui'),
|
|
574
|
-
...custom
|
|
575
|
-
};
|
|
576
|
-
return details;
|
|
577
|
-
}
|
|
578
|
-
|
|
579
|
-
let globalId = 0;
|
|
580
|
-
|
|
581
|
-
// TODO React 17: Remove `useGlobalId` once React 17 support is removed
|
|
582
|
-
function useGlobalId(idOverride, prefix = 'mui') {
|
|
583
|
-
const [defaultId, setDefaultId] = React.useState(idOverride);
|
|
584
|
-
const id = idOverride || defaultId;
|
|
585
|
-
React.useEffect(() => {
|
|
586
|
-
if (defaultId == null) {
|
|
587
|
-
// Fallback to this default id when possible.
|
|
588
|
-
// Use the incrementing value for client-side rendering only.
|
|
589
|
-
// We can't use it server-side.
|
|
590
|
-
// If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
|
|
591
|
-
globalId += 1;
|
|
592
|
-
setDefaultId(`${prefix}-${globalId}`);
|
|
593
|
-
}
|
|
594
|
-
}, [defaultId, prefix]);
|
|
595
|
-
return id;
|
|
596
|
-
}
|
|
597
|
-
const maybeReactUseId = SafeReact.useId;
|
|
598
|
-
|
|
599
|
-
/**
|
|
600
|
-
*
|
|
601
|
-
* @example <div id={useId()} />
|
|
602
|
-
* @param idOverride
|
|
603
|
-
* @returns {string}
|
|
604
|
-
*/
|
|
605
|
-
function useId(idOverride, prefix) {
|
|
606
|
-
// React.useId() is only available from React 17.0.0.
|
|
607
|
-
if (maybeReactUseId !== undefined) {
|
|
608
|
-
const reactId = maybeReactUseId();
|
|
609
|
-
return idOverride ?? (prefix ? `${prefix}-${reactId}` : reactId);
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
|
|
613
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
|
|
614
|
-
return useGlobalId(idOverride, prefix);
|
|
615
|
-
}
|
|
616
|
-
|
|
617
|
-
/**
|
|
618
|
-
* If the provided argument is a ref object, returns its `current` value.
|
|
619
|
-
* Otherwise, returns the argument itself.
|
|
620
|
-
*/
|
|
621
|
-
function resolveRef(maybeRef) {
|
|
622
|
-
if (maybeRef == null) {
|
|
623
|
-
return maybeRef;
|
|
624
|
-
}
|
|
625
|
-
return 'current' in maybeRef ? maybeRef.current : maybeRef;
|
|
626
|
-
}
|
|
627
|
-
|
|
628
|
-
/**
|
|
629
|
-
* Provides a status string for CSS animations.
|
|
630
|
-
* @param open - a boolean that determines if the element is open.
|
|
631
|
-
* @param enableIdleState - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`
|
|
632
|
-
*/
|
|
633
|
-
function useTransitionStatus(open, enableIdleState = false, deferEndingState = false) {
|
|
634
|
-
const [transitionStatus, setTransitionStatus] = React.useState(open && enableIdleState ? 'idle' : undefined);
|
|
635
|
-
const [mounted, setMounted] = React.useState(open);
|
|
636
|
-
if (open && !mounted) {
|
|
637
|
-
setMounted(true);
|
|
638
|
-
setTransitionStatus('starting');
|
|
639
|
-
}
|
|
640
|
-
if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {
|
|
641
|
-
setTransitionStatus('ending');
|
|
642
|
-
}
|
|
643
|
-
if (!open && !mounted && transitionStatus === 'ending') {
|
|
644
|
-
setTransitionStatus(undefined);
|
|
645
|
-
}
|
|
646
|
-
useIsoLayoutEffect(() => {
|
|
647
|
-
if (!open && mounted && transitionStatus !== 'ending' && deferEndingState) {
|
|
648
|
-
const frame = AnimationFrame.request(() => {
|
|
649
|
-
setTransitionStatus('ending');
|
|
650
|
-
});
|
|
651
|
-
return () => {
|
|
652
|
-
AnimationFrame.cancel(frame);
|
|
653
|
-
};
|
|
654
|
-
}
|
|
655
|
-
return undefined;
|
|
656
|
-
}, [open, mounted, transitionStatus, deferEndingState]);
|
|
657
|
-
useIsoLayoutEffect(() => {
|
|
658
|
-
if (!open || enableIdleState) {
|
|
659
|
-
return undefined;
|
|
660
|
-
}
|
|
661
|
-
const frame = AnimationFrame.request(() => {
|
|
662
|
-
// Avoid `flushSync` here due to Firefox.
|
|
663
|
-
// See https://github.com/mui/base-ui/pull/3424
|
|
664
|
-
setTransitionStatus(undefined);
|
|
665
|
-
});
|
|
666
|
-
return () => {
|
|
667
|
-
AnimationFrame.cancel(frame);
|
|
668
|
-
};
|
|
669
|
-
}, [enableIdleState, open]);
|
|
670
|
-
useIsoLayoutEffect(() => {
|
|
671
|
-
if (!open || !enableIdleState) {
|
|
672
|
-
return undefined;
|
|
673
|
-
}
|
|
674
|
-
if (open && mounted && transitionStatus !== 'idle') {
|
|
675
|
-
setTransitionStatus('starting');
|
|
676
|
-
}
|
|
677
|
-
const frame = AnimationFrame.request(() => {
|
|
678
|
-
setTransitionStatus('idle');
|
|
679
|
-
});
|
|
680
|
-
return () => {
|
|
681
|
-
AnimationFrame.cancel(frame);
|
|
682
|
-
};
|
|
683
|
-
}, [enableIdleState, open, mounted, transitionStatus]);
|
|
684
|
-
return {
|
|
685
|
-
mounted,
|
|
686
|
-
setMounted,
|
|
687
|
-
transitionStatus
|
|
688
|
-
};
|
|
689
|
-
}
|
|
690
|
-
|
|
691
|
-
let TransitionStatusDataAttributes = /*#__PURE__*/function (TransitionStatusDataAttributes) {
|
|
692
|
-
/**
|
|
693
|
-
* Present when the component is animating in.
|
|
694
|
-
*/
|
|
695
|
-
TransitionStatusDataAttributes["startingStyle"] = "data-starting-style";
|
|
696
|
-
/**
|
|
697
|
-
* Present when the component is animating out.
|
|
698
|
-
*/
|
|
699
|
-
TransitionStatusDataAttributes["endingStyle"] = "data-ending-style";
|
|
700
|
-
return TransitionStatusDataAttributes;
|
|
701
|
-
}({});
|
|
702
|
-
const STARTING_HOOK = {
|
|
703
|
-
[TransitionStatusDataAttributes.startingStyle]: ''
|
|
704
|
-
};
|
|
705
|
-
const ENDING_HOOK = {
|
|
706
|
-
[TransitionStatusDataAttributes.endingStyle]: ''
|
|
707
|
-
};
|
|
708
|
-
const transitionStatusMapping = {
|
|
709
|
-
transitionStatus(value) {
|
|
710
|
-
if (value === 'starting') {
|
|
711
|
-
return STARTING_HOOK;
|
|
712
|
-
}
|
|
713
|
-
if (value === 'ending') {
|
|
714
|
-
return ENDING_HOOK;
|
|
715
|
-
}
|
|
716
|
-
return null;
|
|
717
|
-
}
|
|
718
|
-
};
|
|
719
|
-
|
|
720
|
-
/**
|
|
721
|
-
* Executes a function once all animations have finished on the provided element.
|
|
722
|
-
* @param elementOrRef - The element to watch for animations.
|
|
723
|
-
* @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
|
|
724
|
-
* @param treatAbortedAsFinished - Whether to treat aborted animations as finished. If `false`, and there are aborted animations,
|
|
725
|
-
* the function will check again if any new animations have started and wait for them to finish.
|
|
726
|
-
* @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
|
|
727
|
-
*/
|
|
728
|
-
function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
|
|
729
|
-
const frame = useAnimationFrame();
|
|
730
|
-
return useStableCallback((fnToExecute,
|
|
731
|
-
/**
|
|
732
|
-
* An optional [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that
|
|
733
|
-
* can be used to abort `fnToExecute` before all the animations have finished.
|
|
734
|
-
* @default null
|
|
735
|
-
*/
|
|
736
|
-
signal = null) => {
|
|
737
|
-
frame.cancel();
|
|
738
|
-
const element = resolveRef(elementOrRef);
|
|
739
|
-
if (element == null) {
|
|
740
|
-
return;
|
|
741
|
-
}
|
|
742
|
-
const resolvedElement = element;
|
|
743
|
-
const done = () => {
|
|
744
|
-
// Synchronously flush the unmounting of the component so that the browser doesn't
|
|
745
|
-
// paint: https://github.com/mui/base-ui/issues/979
|
|
746
|
-
ReactDOM.flushSync(fnToExecute);
|
|
747
|
-
};
|
|
748
|
-
if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
|
|
749
|
-
fnToExecute();
|
|
750
|
-
return;
|
|
751
|
-
}
|
|
752
|
-
function exec() {
|
|
753
|
-
Promise.all(resolvedElement.getAnimations().map(animation => animation.finished)).then(() => {
|
|
754
|
-
if (!signal?.aborted) {
|
|
755
|
-
done();
|
|
756
|
-
}
|
|
757
|
-
}).catch(() => {
|
|
758
|
-
if (treatAbortedAsFinished) {
|
|
759
|
-
if (!signal?.aborted) {
|
|
760
|
-
done();
|
|
761
|
-
}
|
|
762
|
-
return;
|
|
763
|
-
}
|
|
764
|
-
const currentAnimations = resolvedElement.getAnimations();
|
|
765
|
-
if (!signal?.aborted && currentAnimations.length > 0 && currentAnimations.some(animation => animation.pending || animation.playState !== 'finished')) {
|
|
766
|
-
// Sometimes animations can be aborted because a property they depend on changes while the animation plays.
|
|
767
|
-
// In such cases, we need to re-check if any new animations have started.
|
|
768
|
-
exec();
|
|
769
|
-
}
|
|
770
|
-
});
|
|
771
|
-
}
|
|
772
|
-
if (waitForStartingStyleRemoved) {
|
|
773
|
-
const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
|
|
774
|
-
|
|
775
|
-
// If `[data-starting-style]` isn't present, fall back to waiting one more frame
|
|
776
|
-
// to give "open" animations a chance to be registered.
|
|
777
|
-
if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
|
|
778
|
-
frame.request(exec);
|
|
779
|
-
return;
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
// Wait for `[data-starting-style]` to have been removed.
|
|
783
|
-
const attributeObserver = new MutationObserver(() => {
|
|
784
|
-
if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
|
|
785
|
-
attributeObserver.disconnect();
|
|
786
|
-
exec();
|
|
787
|
-
}
|
|
788
|
-
});
|
|
789
|
-
attributeObserver.observe(resolvedElement, {
|
|
790
|
-
attributes: true,
|
|
791
|
-
attributeFilter: [startingStyleAttribute]
|
|
792
|
-
});
|
|
793
|
-
signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
|
|
794
|
-
once: true
|
|
795
|
-
});
|
|
796
|
-
return;
|
|
797
|
-
}
|
|
798
|
-
frame.request(exec);
|
|
799
|
-
});
|
|
800
|
-
}
|
|
801
|
-
|
|
802
|
-
/**
|
|
803
|
-
* Calls the provided function when the CSS open/close animation or transition completes.
|
|
804
|
-
*/
|
|
805
|
-
function useOpenChangeComplete(parameters) {
|
|
806
|
-
const {
|
|
807
|
-
enabled = true,
|
|
808
|
-
open,
|
|
809
|
-
ref,
|
|
810
|
-
onComplete: onCompleteParam
|
|
811
|
-
} = parameters;
|
|
812
|
-
const onComplete = useStableCallback(onCompleteParam);
|
|
813
|
-
const runOnceAnimationsFinish = useAnimationsFinished(ref, open, false);
|
|
814
|
-
React.useEffect(() => {
|
|
815
|
-
if (!enabled) {
|
|
816
|
-
return undefined;
|
|
817
|
-
}
|
|
818
|
-
const abortController = new AbortController();
|
|
819
|
-
runOnceAnimationsFinish(onComplete, abortController.signal);
|
|
820
|
-
return () => {
|
|
821
|
-
abortController.abort();
|
|
822
|
-
};
|
|
823
|
-
}, [enabled, open, onComplete, runOnceAnimationsFinish]);
|
|
824
|
-
}
|
|
825
|
-
|
|
826
|
-
/**
|
|
827
|
-
* Wraps `useId` and prefixes generated `id`s with `base-ui-`
|
|
828
|
-
* @param {string | undefined} idOverride overrides the generated id when provided
|
|
829
|
-
* @returns {string | undefined}
|
|
830
|
-
*/
|
|
831
|
-
function useBaseUiId(idOverride) {
|
|
832
|
-
return useId(idOverride, 'base-ui');
|
|
833
|
-
}
|
|
834
|
-
|
|
835
|
-
function useValueChanged(value, onChange) {
|
|
836
|
-
const valueRef = React.useRef(value);
|
|
837
|
-
const onChangeCallback = useStableCallback(onChange);
|
|
838
|
-
useIsoLayoutEffect(() => {
|
|
839
|
-
if (valueRef.current === value) {
|
|
840
|
-
return;
|
|
841
|
-
}
|
|
842
|
-
onChangeCallback(valueRef.current);
|
|
843
|
-
}, [value, onChangeCallback]);
|
|
844
|
-
useIsoLayoutEffect(() => {
|
|
845
|
-
valueRef.current = value;
|
|
846
|
-
}, [value]);
|
|
847
|
-
}
|
|
848
|
-
|
|
849
|
-
const CompositeRootContext = /*#__PURE__*/React.createContext(undefined);
|
|
850
|
-
if (process.env.NODE_ENV !== "production") CompositeRootContext.displayName = "CompositeRootContext";
|
|
851
|
-
function useCompositeRootContext(optional = false) {
|
|
852
|
-
const context = React.useContext(CompositeRootContext);
|
|
853
|
-
if (context === undefined && !optional) {
|
|
854
|
-
throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.' : formatErrorMessage(16));
|
|
855
|
-
}
|
|
856
|
-
return context;
|
|
857
|
-
}
|
|
858
|
-
|
|
859
|
-
function useFocusableWhenDisabled(parameters) {
|
|
860
|
-
const {
|
|
861
|
-
focusableWhenDisabled,
|
|
862
|
-
disabled,
|
|
863
|
-
composite = false,
|
|
864
|
-
tabIndex: tabIndexProp = 0,
|
|
865
|
-
isNativeButton
|
|
866
|
-
} = parameters;
|
|
867
|
-
const isFocusableComposite = composite && focusableWhenDisabled !== false;
|
|
868
|
-
const isNonFocusableComposite = composite && focusableWhenDisabled === false;
|
|
869
|
-
|
|
870
|
-
// we can't explicitly assign `undefined` to any of these props because it
|
|
871
|
-
// would otherwise prevent subsequently merged props from setting them
|
|
872
|
-
const props = React.useMemo(() => {
|
|
873
|
-
const additionalProps = {
|
|
874
|
-
// allow Tabbing away from focusableWhenDisabled elements
|
|
875
|
-
onKeyDown(event) {
|
|
876
|
-
if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
|
|
877
|
-
event.preventDefault();
|
|
878
|
-
}
|
|
879
|
-
}
|
|
880
|
-
};
|
|
881
|
-
if (!composite) {
|
|
882
|
-
additionalProps.tabIndex = tabIndexProp;
|
|
883
|
-
if (!isNativeButton && disabled) {
|
|
884
|
-
additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
|
|
885
|
-
}
|
|
886
|
-
}
|
|
887
|
-
if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) {
|
|
888
|
-
additionalProps['aria-disabled'] = disabled;
|
|
889
|
-
}
|
|
890
|
-
if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
|
|
891
|
-
additionalProps.disabled = disabled;
|
|
892
|
-
}
|
|
893
|
-
return additionalProps;
|
|
894
|
-
}, [composite, disabled, focusableWhenDisabled, isFocusableComposite, isNonFocusableComposite, isNativeButton, tabIndexProp]);
|
|
895
|
-
return {
|
|
896
|
-
props
|
|
897
|
-
};
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
function useButton(parameters = {}) {
|
|
901
|
-
const {
|
|
902
|
-
disabled = false,
|
|
903
|
-
focusableWhenDisabled,
|
|
904
|
-
tabIndex = 0,
|
|
905
|
-
native: isNativeButton = true,
|
|
906
|
-
composite: compositeProp
|
|
907
|
-
} = parameters;
|
|
908
|
-
const elementRef = React.useRef(null);
|
|
909
|
-
const compositeRootContext = useCompositeRootContext(true);
|
|
910
|
-
const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
|
|
911
|
-
const {
|
|
912
|
-
props: focusableWhenDisabledProps
|
|
913
|
-
} = useFocusableWhenDisabled({
|
|
914
|
-
focusableWhenDisabled,
|
|
915
|
-
disabled,
|
|
916
|
-
composite: isCompositeItem,
|
|
917
|
-
tabIndex,
|
|
918
|
-
isNativeButton
|
|
919
|
-
});
|
|
920
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
921
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
922
|
-
React.useEffect(() => {
|
|
923
|
-
if (!elementRef.current) {
|
|
924
|
-
return;
|
|
925
|
-
}
|
|
926
|
-
const isButtonTag = isButtonElement(elementRef.current);
|
|
927
|
-
if (isNativeButton) {
|
|
928
|
-
if (!isButtonTag) {
|
|
929
|
-
const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
|
|
930
|
-
const message = 'A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Use a real <button> in the ' + '`render` prop, or set `nativeButton` to `false`.';
|
|
931
|
-
error(`${message}${ownerStackMessage}`);
|
|
932
|
-
}
|
|
933
|
-
} else if (isButtonTag) {
|
|
934
|
-
const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
|
|
935
|
-
const message = 'A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while Base UI applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set ' + '`nativeButton` to `true`.';
|
|
936
|
-
error(`${message}${ownerStackMessage}`);
|
|
937
|
-
}
|
|
938
|
-
}, [isNativeButton]);
|
|
939
|
-
}
|
|
940
|
-
|
|
941
|
-
// handles a disabled composite button rendering another button, e.g.
|
|
942
|
-
// <Toolbar.Button disabled render={<Menu.Trigger />} />
|
|
943
|
-
// the `disabled` prop needs to pass through 2 `useButton`s then finally
|
|
944
|
-
// delete the `disabled` attribute from DOM
|
|
945
|
-
const updateDisabled = React.useCallback(() => {
|
|
946
|
-
const element = elementRef.current;
|
|
947
|
-
if (!isButtonElement(element)) {
|
|
948
|
-
return;
|
|
949
|
-
}
|
|
950
|
-
if (isCompositeItem && disabled && focusableWhenDisabledProps.disabled === undefined && element.disabled) {
|
|
951
|
-
element.disabled = false;
|
|
952
|
-
}
|
|
953
|
-
}, [disabled, focusableWhenDisabledProps.disabled, isCompositeItem]);
|
|
954
|
-
useIsoLayoutEffect(updateDisabled, [updateDisabled]);
|
|
955
|
-
const getButtonProps = React.useCallback((externalProps = {}) => {
|
|
956
|
-
const {
|
|
957
|
-
onClick: externalOnClick,
|
|
958
|
-
onMouseDown: externalOnMouseDown,
|
|
959
|
-
onKeyUp: externalOnKeyUp,
|
|
960
|
-
onKeyDown: externalOnKeyDown,
|
|
961
|
-
onPointerDown: externalOnPointerDown,
|
|
962
|
-
...otherExternalProps
|
|
963
|
-
} = externalProps;
|
|
964
|
-
return mergeProps({
|
|
965
|
-
onClick(event) {
|
|
966
|
-
if (disabled) {
|
|
967
|
-
event.preventDefault();
|
|
968
|
-
return;
|
|
969
|
-
}
|
|
970
|
-
externalOnClick?.(event);
|
|
971
|
-
},
|
|
972
|
-
onMouseDown(event) {
|
|
973
|
-
if (!disabled) {
|
|
974
|
-
externalOnMouseDown?.(event);
|
|
975
|
-
}
|
|
976
|
-
},
|
|
977
|
-
onKeyDown(event) {
|
|
978
|
-
if (disabled) {
|
|
979
|
-
return;
|
|
980
|
-
}
|
|
981
|
-
makeEventPreventable(event);
|
|
982
|
-
externalOnKeyDown?.(event);
|
|
983
|
-
if (event.baseUIHandlerPrevented) {
|
|
984
|
-
return;
|
|
985
|
-
}
|
|
986
|
-
const isCurrentTarget = event.target === event.currentTarget;
|
|
987
|
-
const currentTarget = event.currentTarget;
|
|
988
|
-
const isButton = isButtonElement(currentTarget);
|
|
989
|
-
const isLink = !isNativeButton && isValidLinkElement(currentTarget);
|
|
990
|
-
const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
|
|
991
|
-
const isEnterKey = event.key === 'Enter';
|
|
992
|
-
const isSpaceKey = event.key === ' ';
|
|
993
|
-
const role = currentTarget.getAttribute('role');
|
|
994
|
-
const isTextNavigationRole = role?.startsWith('menuitem') || role === 'option' || role === 'gridcell';
|
|
995
|
-
if (isCurrentTarget && isCompositeItem && isSpaceKey) {
|
|
996
|
-
if (event.defaultPrevented && isTextNavigationRole) {
|
|
997
|
-
return;
|
|
998
|
-
}
|
|
999
|
-
event.preventDefault();
|
|
1000
|
-
if (isLink || isNativeButton && isButton) {
|
|
1001
|
-
currentTarget.click();
|
|
1002
|
-
event.preventBaseUIHandler();
|
|
1003
|
-
} else if (shouldClick) {
|
|
1004
|
-
externalOnClick?.(event);
|
|
1005
|
-
event.preventBaseUIHandler();
|
|
1006
|
-
}
|
|
1007
|
-
return;
|
|
1008
|
-
}
|
|
1009
|
-
|
|
1010
|
-
// Keyboard accessibility for native and non-native elements.
|
|
1011
|
-
if (shouldClick) {
|
|
1012
|
-
if (!isNativeButton && (isSpaceKey || isEnterKey)) {
|
|
1013
|
-
event.preventDefault();
|
|
1014
|
-
}
|
|
1015
|
-
if (!isNativeButton && isEnterKey) {
|
|
1016
|
-
externalOnClick?.(event);
|
|
1017
|
-
}
|
|
1018
|
-
}
|
|
1019
|
-
},
|
|
1020
|
-
onKeyUp(event) {
|
|
1021
|
-
if (disabled) {
|
|
1022
|
-
return;
|
|
1023
|
-
}
|
|
1024
|
-
|
|
1025
|
-
// calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
|
|
1026
|
-
// https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
|
|
1027
|
-
makeEventPreventable(event);
|
|
1028
|
-
externalOnKeyUp?.(event);
|
|
1029
|
-
if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === ' ') {
|
|
1030
|
-
event.preventDefault();
|
|
1031
|
-
return;
|
|
1032
|
-
}
|
|
1033
|
-
if (event.baseUIHandlerPrevented) {
|
|
1034
|
-
return;
|
|
1035
|
-
}
|
|
1036
|
-
|
|
1037
|
-
// Keyboard accessibility for non interactive elements
|
|
1038
|
-
if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
|
|
1039
|
-
externalOnClick?.(event);
|
|
1040
|
-
}
|
|
1041
|
-
},
|
|
1042
|
-
onPointerDown(event) {
|
|
1043
|
-
if (disabled) {
|
|
1044
|
-
event.preventDefault();
|
|
1045
|
-
return;
|
|
1046
|
-
}
|
|
1047
|
-
externalOnPointerDown?.(event);
|
|
1048
|
-
}
|
|
1049
|
-
}, isNativeButton ? {
|
|
1050
|
-
type: 'button'
|
|
1051
|
-
} : {
|
|
1052
|
-
role: 'button'
|
|
1053
|
-
}, focusableWhenDisabledProps, otherExternalProps);
|
|
1054
|
-
}, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
|
|
1055
|
-
const buttonRef = useStableCallback(element => {
|
|
1056
|
-
elementRef.current = element;
|
|
1057
|
-
updateDisabled();
|
|
1058
|
-
});
|
|
1059
|
-
return {
|
|
1060
|
-
getButtonProps,
|
|
1061
|
-
buttonRef
|
|
1062
|
-
};
|
|
1063
|
-
}
|
|
1064
|
-
function isButtonElement(elem) {
|
|
1065
|
-
return isHTMLElement(elem) && elem.tagName === 'BUTTON';
|
|
1066
|
-
}
|
|
1067
|
-
function isValidLinkElement(elem) {
|
|
1068
|
-
return Boolean(elem?.tagName === 'A' && elem?.href);
|
|
1069
|
-
}
|
|
1070
|
-
|
|
1071
|
-
export { triggerHover as $, ios as A, addEventListener as B, none as C, visuallyHiddenInput as D, visuallyHidden as E, inputChange as F, inputClear as G, inputBlur as H, inputPaste as I, createGenericEventDetails as J, wheel as K, useOnMount as L, incrementPress as M, decrementPress as N, useValueChanged as O, keyboard as P, outsidePress as Q, cancelOpen as R, SafeReact as S, Timeout as T, windowResize as U, itemPress as V, isMouseLikePointerType as W, triggerFocus as X, mac as Y, triggerPress as Z, escapeKey as _, useIsoLayoutEffect as a, useAnimationsFinished as a0, siblingOpen as a1, useCompositeRootContext as a2, android as a3, closeWatcher as a4, TransitionStatusDataAttributes as a5, swipe as a6, inputPress as a7, clearPress as a8, chipRemovePress as a9, lowerUserAgent as aa, apple as ab, resolveRef as ac, isReactEvent as ad, isClickLikeEvent as ae, AnimationFrame as af, pointer as ag, scrub as ah, useStableCallback as b, useButton as c, createChangeEventDetails as d, closePress as e, useOpenChangeComplete as f, getTarget as g, useTimeout as h, imperativeAction as i, error as j, useTransitionStatus as k, useId as l, useValueAsRef as m, useAnimationFrame as n, ownerDocument as o, activeElement as p, contains as q, listNavigation as r, stopEvent as s, transitionStatusMapping as t, useBaseUiId as u, focusOut as v, isVirtualClick as w, isVirtualPointerEvent as x, jsdom as y, useControlled as z };
|