@jobber/components 8.20.2 → 8.21.1
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/BottomSheet-cjs.js +9 -58
- package/dist/BottomSheet-es.js +2 -47
- package/dist/Card/index.cjs +4 -0
- package/dist/Card/index.mjs +4 -0
- package/dist/ComboboxChipRemove-cjs.js +3418 -0
- package/dist/ComboboxChipRemove-es.js +3366 -0
- package/dist/ComboboxPrimitive-cjs.js +170 -0
- package/dist/ComboboxPrimitive-es.js +168 -0
- package/dist/DataDump/index.cjs +4 -0
- package/dist/DataDump/index.mjs +4 -0
- package/dist/InputNumberExperimental-cjs.js +45 -44
- package/dist/InputNumberExperimental-es.js +3 -2
- package/dist/InternalBackdrop-cjs.js +4278 -0
- package/dist/InternalBackdrop-es.js +4204 -0
- package/dist/Menu/index.cjs +4 -0
- package/dist/Menu/index.mjs +4 -0
- package/dist/Menu-cjs.js +9 -8
- package/dist/Menu-es.js +2 -1
- package/dist/MenuSubmenuTrigger-cjs.js +208 -1969
- package/dist/MenuSubmenuTrigger-es.js +7 -1759
- package/dist/NumberFieldInput-cjs.js +56 -439
- package/dist/NumberFieldInput-es.js +6 -376
- package/dist/Page/index.cjs +4 -0
- package/dist/Page/index.mjs +4 -0
- package/dist/ScrollAreaViewport-cjs.js +108 -4356
- package/dist/ScrollAreaViewport-es.js +6 -4201
- package/dist/buttonRenderAdapter-cjs.js +56 -0
- package/dist/buttonRenderAdapter-es.js +51 -0
- package/dist/clamp-cjs.js +0 -1194
- package/dist/clamp-es.js +1 -1091
- package/dist/docs/Icon/Icon.md +1 -0
- package/dist/docs/empty-states/empty-states.md +29 -0
- package/dist/index.cjs +4 -0
- package/dist/index.mjs +4 -0
- package/dist/primitives/BottomSheet/index.cjs +5 -2
- package/dist/primitives/BottomSheet/index.mjs +5 -2
- package/dist/primitives/ComboboxPrimitive/ComboboxPrimitive.d.ts +32 -0
- package/dist/primitives/ComboboxPrimitive/ComboboxPrimitive.types.d.ts +30 -0
- package/dist/primitives/ComboboxPrimitive/index.cjs +28 -0
- package/dist/primitives/ComboboxPrimitive/index.d.ts +2 -0
- package/dist/primitives/ComboboxPrimitive/index.mjs +22 -0
- package/dist/primitives/InputNumberExperimental/index.cjs +4 -2
- package/dist/primitives/InputNumberExperimental/index.mjs +4 -2
- package/dist/primitives/index.cjs +11 -2
- package/dist/primitives/index.d.ts +1 -0
- package/dist/primitives/index.mjs +10 -2
- package/dist/styles.css +767 -0
- package/dist/unstyledPrimitives/index.cjs +237 -3588
- package/dist/unstyledPrimitives/index.mjs +96 -3447
- package/dist/useButton-cjs.js +1196 -0
- package/dist/useButton-es.js +1091 -0
- package/dist/useCompositeListItem-cjs.js +1792 -0
- package/dist/useCompositeListItem-es.js +1762 -0
- package/dist/useLabel-cjs.js +411 -0
- package/dist/useLabel-es.js +378 -0
- package/package.json +3 -3
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var useRenderElement = require('./useRenderElement-cjs.js');
|
|
5
|
+
var InternalBackdrop = require('./InternalBackdrop-cjs.js');
|
|
6
|
+
var useButton = require('./useButton-cjs.js');
|
|
5
7
|
var clamp = require('./clamp-cjs.js');
|
|
6
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
var index_esm = require('./index.esm-cjs.js');
|
|
8
9
|
var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
|
|
9
|
-
var ReactDOM = require('react-dom');
|
|
10
10
|
|
|
11
11
|
function _interopNamespaceDefault(e) {
|
|
12
12
|
var n = Object.create(null);
|
|
@@ -26,3566 +26,6 @@ function _interopNamespaceDefault(e) {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
29
|
-
var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
|
|
30
|
-
|
|
31
|
-
function useOnFirstRender(fn) {
|
|
32
|
-
const ref = React__namespace.useRef(true);
|
|
33
|
-
if (ref.current) {
|
|
34
|
-
ref.current = false;
|
|
35
|
-
fn();
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// src/devModeChecks/identityFunctionCheck.ts
|
|
40
|
-
var runIdentityFunctionCheck = (resultFunc, inputSelectorsResults, outputSelectorResult) => {
|
|
41
|
-
if (inputSelectorsResults.length === 1 && inputSelectorsResults[0] === outputSelectorResult) {
|
|
42
|
-
let isInputSameAsOutput = false;
|
|
43
|
-
try {
|
|
44
|
-
const emptyObject = {};
|
|
45
|
-
if (resultFunc(emptyObject) === emptyObject)
|
|
46
|
-
isInputSameAsOutput = true;
|
|
47
|
-
} catch {
|
|
48
|
-
}
|
|
49
|
-
if (isInputSameAsOutput) {
|
|
50
|
-
let stack = void 0;
|
|
51
|
-
try {
|
|
52
|
-
throw new Error();
|
|
53
|
-
} catch (e) {
|
|
54
|
-
({ stack } = e);
|
|
55
|
-
}
|
|
56
|
-
console.warn(
|
|
57
|
-
"The result function returned its own inputs without modification. e.g\n`createSelector([state => state.todos], todos => todos)`\nThis could lead to inefficient memoization and unnecessary re-renders.\nEnsure transformation logic is in the result function, and extraction logic is in the input selectors.",
|
|
58
|
-
{ stack }
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
// src/devModeChecks/inputStabilityCheck.ts
|
|
65
|
-
var runInputStabilityCheck = (inputSelectorResultsObject, options, inputSelectorArgs) => {
|
|
66
|
-
const { memoize, memoizeOptions } = options;
|
|
67
|
-
const { inputSelectorResults, inputSelectorResultsCopy } = inputSelectorResultsObject;
|
|
68
|
-
const createAnEmptyObject = memoize(() => ({}), ...memoizeOptions);
|
|
69
|
-
const areInputSelectorResultsEqual = createAnEmptyObject.apply(null, inputSelectorResults) === createAnEmptyObject.apply(null, inputSelectorResultsCopy);
|
|
70
|
-
if (!areInputSelectorResultsEqual) {
|
|
71
|
-
let stack = void 0;
|
|
72
|
-
try {
|
|
73
|
-
throw new Error();
|
|
74
|
-
} catch (e) {
|
|
75
|
-
({ stack } = e);
|
|
76
|
-
}
|
|
77
|
-
console.warn(
|
|
78
|
-
"An input selector returned a different result when passed same arguments.\nThis means your output selector will likely run more frequently than intended.\nAvoid returning a new reference inside your input selector, e.g.\n`createSelector([state => state.todos.map(todo => todo.id)], todoIds => todoIds.length)`",
|
|
79
|
-
{
|
|
80
|
-
arguments: inputSelectorArgs,
|
|
81
|
-
firstInputs: inputSelectorResults,
|
|
82
|
-
secondInputs: inputSelectorResultsCopy,
|
|
83
|
-
stack
|
|
84
|
-
}
|
|
85
|
-
);
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
// src/devModeChecks/setGlobalDevModeChecks.ts
|
|
90
|
-
var globalDevModeChecks = {
|
|
91
|
-
inputStabilityCheck: "once",
|
|
92
|
-
identityFunctionCheck: "once"
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
// src/utils.ts
|
|
96
|
-
var NOT_FOUND = /* @__PURE__ */ Symbol("NOT_FOUND");
|
|
97
|
-
function assertIsFunction(func, errorMessage = `expected a function, instead received ${typeof func}`) {
|
|
98
|
-
if (typeof func !== "function") {
|
|
99
|
-
throw new TypeError(errorMessage);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
function assertIsObject(object, errorMessage = `expected an object, instead received ${typeof object}`) {
|
|
103
|
-
if (typeof object !== "object") {
|
|
104
|
-
throw new TypeError(errorMessage);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
function assertIsArrayOfFunctions(array, errorMessage = `expected all items to be functions, instead received the following types: `) {
|
|
108
|
-
if (!array.every((item) => typeof item === "function")) {
|
|
109
|
-
const itemTypes = array.map(
|
|
110
|
-
(item) => typeof item === "function" ? `function ${item.name || "unnamed"}()` : typeof item
|
|
111
|
-
).join(", ");
|
|
112
|
-
throw new TypeError(`${errorMessage}[${itemTypes}]`);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
var ensureIsArray = (item) => {
|
|
116
|
-
return Array.isArray(item) ? item : [item];
|
|
117
|
-
};
|
|
118
|
-
function getDependencies(createSelectorArgs) {
|
|
119
|
-
const dependencies = Array.isArray(createSelectorArgs[0]) ? createSelectorArgs[0] : createSelectorArgs;
|
|
120
|
-
assertIsArrayOfFunctions(
|
|
121
|
-
dependencies,
|
|
122
|
-
`createSelector expects all input-selectors to be functions, but received the following types: `
|
|
123
|
-
);
|
|
124
|
-
return dependencies;
|
|
125
|
-
}
|
|
126
|
-
function collectInputSelectorResults(dependencies, inputSelectorArgs) {
|
|
127
|
-
const inputSelectorResults = [];
|
|
128
|
-
const { length } = dependencies;
|
|
129
|
-
for (let i = 0; i < length; i++) {
|
|
130
|
-
inputSelectorResults.push(dependencies[i].apply(null, inputSelectorArgs));
|
|
131
|
-
}
|
|
132
|
-
return inputSelectorResults;
|
|
133
|
-
}
|
|
134
|
-
var getDevModeChecksExecutionInfo = (firstRun, devModeChecks) => {
|
|
135
|
-
const { identityFunctionCheck, inputStabilityCheck } = {
|
|
136
|
-
...globalDevModeChecks,
|
|
137
|
-
...devModeChecks
|
|
138
|
-
};
|
|
139
|
-
return {
|
|
140
|
-
identityFunctionCheck: {
|
|
141
|
-
shouldRun: identityFunctionCheck === "always" || identityFunctionCheck === "once" && firstRun,
|
|
142
|
-
run: runIdentityFunctionCheck
|
|
143
|
-
},
|
|
144
|
-
inputStabilityCheck: {
|
|
145
|
-
shouldRun: inputStabilityCheck === "always" || inputStabilityCheck === "once" && firstRun,
|
|
146
|
-
run: runInputStabilityCheck
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
// src/lruMemoize.ts
|
|
152
|
-
function createSingletonCache(equals) {
|
|
153
|
-
let entry;
|
|
154
|
-
return {
|
|
155
|
-
get(key) {
|
|
156
|
-
if (entry && equals(entry.key, key)) {
|
|
157
|
-
return entry.value;
|
|
158
|
-
}
|
|
159
|
-
return NOT_FOUND;
|
|
160
|
-
},
|
|
161
|
-
put(key, value) {
|
|
162
|
-
entry = { key, value };
|
|
163
|
-
},
|
|
164
|
-
getEntries() {
|
|
165
|
-
return entry ? [entry] : [];
|
|
166
|
-
},
|
|
167
|
-
clear() {
|
|
168
|
-
entry = void 0;
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
|
-
}
|
|
172
|
-
function createLruCache(maxSize, equals) {
|
|
173
|
-
let entries = [];
|
|
174
|
-
function get(key) {
|
|
175
|
-
const cacheIndex = entries.findIndex((entry) => equals(key, entry.key));
|
|
176
|
-
if (cacheIndex > -1) {
|
|
177
|
-
const entry = entries[cacheIndex];
|
|
178
|
-
if (cacheIndex > 0) {
|
|
179
|
-
entries.splice(cacheIndex, 1);
|
|
180
|
-
entries.unshift(entry);
|
|
181
|
-
}
|
|
182
|
-
return entry.value;
|
|
183
|
-
}
|
|
184
|
-
return NOT_FOUND;
|
|
185
|
-
}
|
|
186
|
-
function put(key, value) {
|
|
187
|
-
if (get(key) === NOT_FOUND) {
|
|
188
|
-
entries.unshift({ key, value });
|
|
189
|
-
if (entries.length > maxSize) {
|
|
190
|
-
entries.pop();
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
function getEntries() {
|
|
195
|
-
return entries;
|
|
196
|
-
}
|
|
197
|
-
function clear() {
|
|
198
|
-
entries = [];
|
|
199
|
-
}
|
|
200
|
-
return { get, put, getEntries, clear };
|
|
201
|
-
}
|
|
202
|
-
var referenceEqualityCheck = (a, b) => a === b;
|
|
203
|
-
function createCacheKeyComparator(equalityCheck) {
|
|
204
|
-
return function areArgumentsShallowlyEqual(prev, next) {
|
|
205
|
-
if (prev === null || next === null || prev.length !== next.length) {
|
|
206
|
-
return false;
|
|
207
|
-
}
|
|
208
|
-
const { length } = prev;
|
|
209
|
-
for (let i = 0; i < length; i++) {
|
|
210
|
-
if (!equalityCheck(prev[i], next[i])) {
|
|
211
|
-
return false;
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
return true;
|
|
215
|
-
};
|
|
216
|
-
}
|
|
217
|
-
function lruMemoize(func, equalityCheckOrOptions) {
|
|
218
|
-
const providedOptions = typeof equalityCheckOrOptions === "object" ? equalityCheckOrOptions : { equalityCheck: equalityCheckOrOptions };
|
|
219
|
-
const {
|
|
220
|
-
equalityCheck = referenceEqualityCheck,
|
|
221
|
-
maxSize = 1,
|
|
222
|
-
resultEqualityCheck
|
|
223
|
-
} = providedOptions;
|
|
224
|
-
const comparator = createCacheKeyComparator(equalityCheck);
|
|
225
|
-
let resultsCount = 0;
|
|
226
|
-
const cache = maxSize <= 1 ? createSingletonCache(comparator) : createLruCache(maxSize, comparator);
|
|
227
|
-
function memoized() {
|
|
228
|
-
let value = cache.get(arguments);
|
|
229
|
-
if (value === NOT_FOUND) {
|
|
230
|
-
value = func.apply(null, arguments);
|
|
231
|
-
resultsCount++;
|
|
232
|
-
if (resultEqualityCheck) {
|
|
233
|
-
const entries = cache.getEntries();
|
|
234
|
-
const matchingEntry = entries.find(
|
|
235
|
-
(entry) => resultEqualityCheck(entry.value, value)
|
|
236
|
-
);
|
|
237
|
-
if (matchingEntry) {
|
|
238
|
-
value = matchingEntry.value;
|
|
239
|
-
resultsCount !== 0 && resultsCount--;
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
cache.put(arguments, value);
|
|
243
|
-
}
|
|
244
|
-
return value;
|
|
245
|
-
}
|
|
246
|
-
memoized.clearCache = () => {
|
|
247
|
-
cache.clear();
|
|
248
|
-
memoized.resetResultsCount();
|
|
249
|
-
};
|
|
250
|
-
memoized.resultsCount = () => resultsCount;
|
|
251
|
-
memoized.resetResultsCount = () => {
|
|
252
|
-
resultsCount = 0;
|
|
253
|
-
};
|
|
254
|
-
return memoized;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
// src/weakMapMemoize.ts
|
|
258
|
-
var StrongRef = class {
|
|
259
|
-
constructor(value) {
|
|
260
|
-
this.value = value;
|
|
261
|
-
}
|
|
262
|
-
deref() {
|
|
263
|
-
return this.value;
|
|
264
|
-
}
|
|
265
|
-
};
|
|
266
|
-
var Ref = typeof WeakRef !== "undefined" ? WeakRef : StrongRef;
|
|
267
|
-
var UNTERMINATED = 0;
|
|
268
|
-
var TERMINATED = 1;
|
|
269
|
-
function createCacheNode() {
|
|
270
|
-
return {
|
|
271
|
-
s: UNTERMINATED,
|
|
272
|
-
v: void 0,
|
|
273
|
-
o: null,
|
|
274
|
-
p: null
|
|
275
|
-
};
|
|
276
|
-
}
|
|
277
|
-
function weakMapMemoize(func, options = {}) {
|
|
278
|
-
let fnNode = createCacheNode();
|
|
279
|
-
const { resultEqualityCheck } = options;
|
|
280
|
-
let lastResult;
|
|
281
|
-
let resultsCount = 0;
|
|
282
|
-
function memoized() {
|
|
283
|
-
let cacheNode = fnNode;
|
|
284
|
-
const { length } = arguments;
|
|
285
|
-
for (let i = 0, l = length; i < l; i++) {
|
|
286
|
-
const arg = arguments[i];
|
|
287
|
-
if (typeof arg === "function" || typeof arg === "object" && arg !== null) {
|
|
288
|
-
let objectCache = cacheNode.o;
|
|
289
|
-
if (objectCache === null) {
|
|
290
|
-
cacheNode.o = objectCache = /* @__PURE__ */ new WeakMap();
|
|
291
|
-
}
|
|
292
|
-
const objectNode = objectCache.get(arg);
|
|
293
|
-
if (objectNode === void 0) {
|
|
294
|
-
cacheNode = createCacheNode();
|
|
295
|
-
objectCache.set(arg, cacheNode);
|
|
296
|
-
} else {
|
|
297
|
-
cacheNode = objectNode;
|
|
298
|
-
}
|
|
299
|
-
} else {
|
|
300
|
-
let primitiveCache = cacheNode.p;
|
|
301
|
-
if (primitiveCache === null) {
|
|
302
|
-
cacheNode.p = primitiveCache = /* @__PURE__ */ new Map();
|
|
303
|
-
}
|
|
304
|
-
const primitiveNode = primitiveCache.get(arg);
|
|
305
|
-
if (primitiveNode === void 0) {
|
|
306
|
-
cacheNode = createCacheNode();
|
|
307
|
-
primitiveCache.set(arg, cacheNode);
|
|
308
|
-
} else {
|
|
309
|
-
cacheNode = primitiveNode;
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
const terminatedNode = cacheNode;
|
|
314
|
-
let result;
|
|
315
|
-
if (cacheNode.s === TERMINATED) {
|
|
316
|
-
result = cacheNode.v;
|
|
317
|
-
} else {
|
|
318
|
-
result = func.apply(null, arguments);
|
|
319
|
-
resultsCount++;
|
|
320
|
-
if (resultEqualityCheck) {
|
|
321
|
-
const lastResultValue = lastResult?.deref?.() ?? lastResult;
|
|
322
|
-
if (lastResultValue != null && resultEqualityCheck(lastResultValue, result)) {
|
|
323
|
-
result = lastResultValue;
|
|
324
|
-
resultsCount !== 0 && resultsCount--;
|
|
325
|
-
}
|
|
326
|
-
const needsWeakRef = typeof result === "object" && result !== null || typeof result === "function";
|
|
327
|
-
lastResult = needsWeakRef ? new Ref(result) : result;
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
terminatedNode.s = TERMINATED;
|
|
331
|
-
terminatedNode.v = result;
|
|
332
|
-
return result;
|
|
333
|
-
}
|
|
334
|
-
memoized.clearCache = () => {
|
|
335
|
-
fnNode = createCacheNode();
|
|
336
|
-
memoized.resetResultsCount();
|
|
337
|
-
};
|
|
338
|
-
memoized.resultsCount = () => resultsCount;
|
|
339
|
-
memoized.resetResultsCount = () => {
|
|
340
|
-
resultsCount = 0;
|
|
341
|
-
};
|
|
342
|
-
return memoized;
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
// src/createSelectorCreator.ts
|
|
346
|
-
function createSelectorCreator(memoizeOrOptions, ...memoizeOptionsFromArgs) {
|
|
347
|
-
const createSelectorCreatorOptions = typeof memoizeOrOptions === "function" ? {
|
|
348
|
-
memoize: memoizeOrOptions,
|
|
349
|
-
memoizeOptions: memoizeOptionsFromArgs
|
|
350
|
-
} : memoizeOrOptions;
|
|
351
|
-
const createSelector2 = (...createSelectorArgs) => {
|
|
352
|
-
let recomputations = 0;
|
|
353
|
-
let dependencyRecomputations = 0;
|
|
354
|
-
let lastResult;
|
|
355
|
-
let directlyPassedOptions = {};
|
|
356
|
-
let resultFunc = createSelectorArgs.pop();
|
|
357
|
-
if (typeof resultFunc === "object") {
|
|
358
|
-
directlyPassedOptions = resultFunc;
|
|
359
|
-
resultFunc = createSelectorArgs.pop();
|
|
360
|
-
}
|
|
361
|
-
assertIsFunction(
|
|
362
|
-
resultFunc,
|
|
363
|
-
`createSelector expects an output function after the inputs, but received: [${typeof resultFunc}]`
|
|
364
|
-
);
|
|
365
|
-
const combinedOptions = {
|
|
366
|
-
...createSelectorCreatorOptions,
|
|
367
|
-
...directlyPassedOptions
|
|
368
|
-
};
|
|
369
|
-
const {
|
|
370
|
-
memoize,
|
|
371
|
-
memoizeOptions = [],
|
|
372
|
-
argsMemoize = weakMapMemoize,
|
|
373
|
-
argsMemoizeOptions = [],
|
|
374
|
-
devModeChecks = {}
|
|
375
|
-
} = combinedOptions;
|
|
376
|
-
const finalMemoizeOptions = ensureIsArray(memoizeOptions);
|
|
377
|
-
const finalArgsMemoizeOptions = ensureIsArray(argsMemoizeOptions);
|
|
378
|
-
const dependencies = getDependencies(createSelectorArgs);
|
|
379
|
-
const memoizedResultFunc = memoize(function recomputationWrapper() {
|
|
380
|
-
recomputations++;
|
|
381
|
-
return resultFunc.apply(
|
|
382
|
-
null,
|
|
383
|
-
arguments
|
|
384
|
-
);
|
|
385
|
-
}, ...finalMemoizeOptions);
|
|
386
|
-
let firstRun = true;
|
|
387
|
-
const selector = argsMemoize(function dependenciesChecker() {
|
|
388
|
-
dependencyRecomputations++;
|
|
389
|
-
const inputSelectorResults = collectInputSelectorResults(
|
|
390
|
-
dependencies,
|
|
391
|
-
arguments
|
|
392
|
-
);
|
|
393
|
-
lastResult = memoizedResultFunc.apply(null, inputSelectorResults);
|
|
394
|
-
if (process.env.NODE_ENV !== "production") {
|
|
395
|
-
const { identityFunctionCheck, inputStabilityCheck } = getDevModeChecksExecutionInfo(firstRun, devModeChecks);
|
|
396
|
-
if (identityFunctionCheck.shouldRun) {
|
|
397
|
-
identityFunctionCheck.run(
|
|
398
|
-
resultFunc,
|
|
399
|
-
inputSelectorResults,
|
|
400
|
-
lastResult
|
|
401
|
-
);
|
|
402
|
-
}
|
|
403
|
-
if (inputStabilityCheck.shouldRun) {
|
|
404
|
-
const inputSelectorResultsCopy = collectInputSelectorResults(
|
|
405
|
-
dependencies,
|
|
406
|
-
arguments
|
|
407
|
-
);
|
|
408
|
-
inputStabilityCheck.run(
|
|
409
|
-
{ inputSelectorResults, inputSelectorResultsCopy },
|
|
410
|
-
{ memoize, memoizeOptions: finalMemoizeOptions },
|
|
411
|
-
arguments
|
|
412
|
-
);
|
|
413
|
-
}
|
|
414
|
-
if (firstRun)
|
|
415
|
-
firstRun = false;
|
|
416
|
-
}
|
|
417
|
-
return lastResult;
|
|
418
|
-
}, ...finalArgsMemoizeOptions);
|
|
419
|
-
return Object.assign(selector, {
|
|
420
|
-
resultFunc,
|
|
421
|
-
memoizedResultFunc,
|
|
422
|
-
dependencies,
|
|
423
|
-
dependencyRecomputations: () => dependencyRecomputations,
|
|
424
|
-
resetDependencyRecomputations: () => {
|
|
425
|
-
dependencyRecomputations = 0;
|
|
426
|
-
},
|
|
427
|
-
lastResult: () => lastResult,
|
|
428
|
-
recomputations: () => recomputations,
|
|
429
|
-
resetRecomputations: () => {
|
|
430
|
-
recomputations = 0;
|
|
431
|
-
},
|
|
432
|
-
memoize,
|
|
433
|
-
argsMemoize
|
|
434
|
-
});
|
|
435
|
-
};
|
|
436
|
-
Object.assign(createSelector2, {
|
|
437
|
-
withTypes: () => createSelector2
|
|
438
|
-
});
|
|
439
|
-
return createSelector2;
|
|
440
|
-
}
|
|
441
|
-
var createSelector$1 = /* @__PURE__ */ createSelectorCreator(weakMapMemoize);
|
|
442
|
-
|
|
443
|
-
// src/createStructuredSelector.ts
|
|
444
|
-
var createStructuredSelector = Object.assign(
|
|
445
|
-
(inputSelectorsObject, selectorCreator = createSelector$1) => {
|
|
446
|
-
assertIsObject(
|
|
447
|
-
inputSelectorsObject,
|
|
448
|
-
`createStructuredSelector expects first argument to be an object where each property is a selector, instead received a ${typeof inputSelectorsObject}`
|
|
449
|
-
);
|
|
450
|
-
const inputSelectorKeys = Object.keys(inputSelectorsObject);
|
|
451
|
-
const dependencies = inputSelectorKeys.map(
|
|
452
|
-
(key) => inputSelectorsObject[key]
|
|
453
|
-
);
|
|
454
|
-
const structuredSelector = selectorCreator(
|
|
455
|
-
dependencies,
|
|
456
|
-
(...inputSelectorResults) => {
|
|
457
|
-
return inputSelectorResults.reduce((composition, value, index) => {
|
|
458
|
-
composition[inputSelectorKeys[index]] = value;
|
|
459
|
-
return composition;
|
|
460
|
-
}, {});
|
|
461
|
-
}
|
|
462
|
-
);
|
|
463
|
-
return structuredSelector;
|
|
464
|
-
},
|
|
465
|
-
{ withTypes: () => createStructuredSelector }
|
|
466
|
-
);
|
|
467
|
-
|
|
468
|
-
/* eslint-disable no-underscore-dangle */ // __cacheKey__
|
|
469
|
-
|
|
470
|
-
createSelectorCreator({
|
|
471
|
-
memoize: lruMemoize,
|
|
472
|
-
memoizeOptions: {
|
|
473
|
-
maxSize: 1,
|
|
474
|
-
equalityCheck: Object.is
|
|
475
|
-
}
|
|
476
|
-
});
|
|
477
|
-
/**
|
|
478
|
-
* Creates a selector function that can be used to derive values from the store's state.
|
|
479
|
-
* The selector can take up to three additional arguments that can be used in the selector logic.
|
|
480
|
-
* This function accepts up to six functions and combines them into a single selector function.
|
|
481
|
-
* The last parameter is the combiner function that combines the results of the previous selectors.
|
|
482
|
-
*
|
|
483
|
-
* @example
|
|
484
|
-
* const selector = createSelector(
|
|
485
|
-
* (state) => state.disabled
|
|
486
|
-
* );
|
|
487
|
-
*
|
|
488
|
-
* @example
|
|
489
|
-
* const selector = createSelector(
|
|
490
|
-
* (state) => state.disabled,
|
|
491
|
-
* (state) => state.open,
|
|
492
|
-
* (disabled, open) => ({ disabled, open })
|
|
493
|
-
* );
|
|
494
|
-
*
|
|
495
|
-
*/
|
|
496
|
-
/* eslint-disable id-denylist */
|
|
497
|
-
const createSelector = (a, b, c, d, e, f, ...other) => {
|
|
498
|
-
if (other.length > 0) {
|
|
499
|
-
throw new Error(process.env.NODE_ENV !== "production" ? 'Unsupported number of selectors' : useRenderElement.formatErrorMessage(1));
|
|
500
|
-
}
|
|
501
|
-
let selector;
|
|
502
|
-
if (a && b && c && d && e && f) {
|
|
503
|
-
selector = (state, a1, a2, a3) => {
|
|
504
|
-
const va = a(state, a1, a2, a3);
|
|
505
|
-
const vb = b(state, a1, a2, a3);
|
|
506
|
-
const vc = c(state, a1, a2, a3);
|
|
507
|
-
const vd = d(state, a1, a2, a3);
|
|
508
|
-
const ve = e(state, a1, a2, a3);
|
|
509
|
-
return f(va, vb, vc, vd, ve, a1, a2, a3);
|
|
510
|
-
};
|
|
511
|
-
} else if (a && b && c && d && e) {
|
|
512
|
-
selector = (state, a1, a2, a3) => {
|
|
513
|
-
const va = a(state, a1, a2, a3);
|
|
514
|
-
const vb = b(state, a1, a2, a3);
|
|
515
|
-
const vc = c(state, a1, a2, a3);
|
|
516
|
-
const vd = d(state, a1, a2, a3);
|
|
517
|
-
return e(va, vb, vc, vd, a1, a2, a3);
|
|
518
|
-
};
|
|
519
|
-
} else if (a && b && c && d) {
|
|
520
|
-
selector = (state, a1, a2, a3) => {
|
|
521
|
-
const va = a(state, a1, a2, a3);
|
|
522
|
-
const vb = b(state, a1, a2, a3);
|
|
523
|
-
const vc = c(state, a1, a2, a3);
|
|
524
|
-
return d(va, vb, vc, a1, a2, a3);
|
|
525
|
-
};
|
|
526
|
-
} else if (a && b && c) {
|
|
527
|
-
selector = (state, a1, a2, a3) => {
|
|
528
|
-
const va = a(state, a1, a2, a3);
|
|
529
|
-
const vb = b(state, a1, a2, a3);
|
|
530
|
-
return c(va, vb, a1, a2, a3);
|
|
531
|
-
};
|
|
532
|
-
} else if (a && b) {
|
|
533
|
-
selector = (state, a1, a2, a3) => {
|
|
534
|
-
const va = a(state, a1, a2, a3);
|
|
535
|
-
return b(va, a1, a2, a3);
|
|
536
|
-
};
|
|
537
|
-
} else if (a) {
|
|
538
|
-
selector = a;
|
|
539
|
-
} else {
|
|
540
|
-
throw /* minify-error-disabled */new Error('Missing arguments');
|
|
541
|
-
}
|
|
542
|
-
return selector;
|
|
543
|
-
};
|
|
544
|
-
|
|
545
|
-
var shim = {exports: {}};
|
|
546
|
-
|
|
547
|
-
var useSyncExternalStoreShim_production = {};
|
|
548
|
-
|
|
549
|
-
/**
|
|
550
|
-
* @license React
|
|
551
|
-
* use-sync-external-store-shim.production.js
|
|
552
|
-
*
|
|
553
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
554
|
-
*
|
|
555
|
-
* This source code is licensed under the MIT license found in the
|
|
556
|
-
* LICENSE file in the root directory of this source tree.
|
|
557
|
-
*/
|
|
558
|
-
|
|
559
|
-
var hasRequiredUseSyncExternalStoreShim_production;
|
|
560
|
-
|
|
561
|
-
function requireUseSyncExternalStoreShim_production () {
|
|
562
|
-
if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
|
|
563
|
-
hasRequiredUseSyncExternalStoreShim_production = 1;
|
|
564
|
-
var React$1 = React;
|
|
565
|
-
function is(x, y) {
|
|
566
|
-
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
567
|
-
}
|
|
568
|
-
var objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
569
|
-
useState = React$1.useState,
|
|
570
|
-
useEffect = React$1.useEffect,
|
|
571
|
-
useLayoutEffect = React$1.useLayoutEffect,
|
|
572
|
-
useDebugValue = React$1.useDebugValue;
|
|
573
|
-
function useSyncExternalStore$2(subscribe, getSnapshot) {
|
|
574
|
-
var value = getSnapshot(),
|
|
575
|
-
_useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
|
|
576
|
-
inst = _useState[0].inst,
|
|
577
|
-
forceUpdate = _useState[1];
|
|
578
|
-
useLayoutEffect(
|
|
579
|
-
function () {
|
|
580
|
-
inst.value = value;
|
|
581
|
-
inst.getSnapshot = getSnapshot;
|
|
582
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
583
|
-
},
|
|
584
|
-
[subscribe, value, getSnapshot]
|
|
585
|
-
);
|
|
586
|
-
useEffect(
|
|
587
|
-
function () {
|
|
588
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
589
|
-
return subscribe(function () {
|
|
590
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
591
|
-
});
|
|
592
|
-
},
|
|
593
|
-
[subscribe]
|
|
594
|
-
);
|
|
595
|
-
useDebugValue(value);
|
|
596
|
-
return value;
|
|
597
|
-
}
|
|
598
|
-
function checkIfSnapshotChanged(inst) {
|
|
599
|
-
var latestGetSnapshot = inst.getSnapshot;
|
|
600
|
-
inst = inst.value;
|
|
601
|
-
try {
|
|
602
|
-
var nextValue = latestGetSnapshot();
|
|
603
|
-
return !objectIs(inst, nextValue);
|
|
604
|
-
} catch (error) {
|
|
605
|
-
return !0;
|
|
606
|
-
}
|
|
607
|
-
}
|
|
608
|
-
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
609
|
-
return getSnapshot();
|
|
610
|
-
}
|
|
611
|
-
var shim =
|
|
612
|
-
"undefined" === typeof window ||
|
|
613
|
-
"undefined" === typeof window.document ||
|
|
614
|
-
"undefined" === typeof window.document.createElement
|
|
615
|
-
? useSyncExternalStore$1
|
|
616
|
-
: useSyncExternalStore$2;
|
|
617
|
-
useSyncExternalStoreShim_production.useSyncExternalStore =
|
|
618
|
-
void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
|
|
619
|
-
return useSyncExternalStoreShim_production;
|
|
620
|
-
}
|
|
621
|
-
|
|
622
|
-
var useSyncExternalStoreShim_development = {};
|
|
623
|
-
|
|
624
|
-
/**
|
|
625
|
-
* @license React
|
|
626
|
-
* use-sync-external-store-shim.development.js
|
|
627
|
-
*
|
|
628
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
629
|
-
*
|
|
630
|
-
* This source code is licensed under the MIT license found in the
|
|
631
|
-
* LICENSE file in the root directory of this source tree.
|
|
632
|
-
*/
|
|
633
|
-
|
|
634
|
-
var hasRequiredUseSyncExternalStoreShim_development;
|
|
635
|
-
|
|
636
|
-
function requireUseSyncExternalStoreShim_development () {
|
|
637
|
-
if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
|
|
638
|
-
hasRequiredUseSyncExternalStoreShim_development = 1;
|
|
639
|
-
"production" !== process.env.NODE_ENV &&
|
|
640
|
-
(function () {
|
|
641
|
-
function is(x, y) {
|
|
642
|
-
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
643
|
-
}
|
|
644
|
-
function useSyncExternalStore$2(subscribe, getSnapshot) {
|
|
645
|
-
didWarnOld18Alpha ||
|
|
646
|
-
void 0 === React$1.startTransition ||
|
|
647
|
-
((didWarnOld18Alpha = !0),
|
|
648
|
-
console.error(
|
|
649
|
-
"You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
|
|
650
|
-
));
|
|
651
|
-
var value = getSnapshot();
|
|
652
|
-
if (!didWarnUncachedGetSnapshot) {
|
|
653
|
-
var cachedValue = getSnapshot();
|
|
654
|
-
objectIs(value, cachedValue) ||
|
|
655
|
-
(console.error(
|
|
656
|
-
"The result of getSnapshot should be cached to avoid an infinite loop"
|
|
657
|
-
),
|
|
658
|
-
(didWarnUncachedGetSnapshot = !0));
|
|
659
|
-
}
|
|
660
|
-
cachedValue = useState({
|
|
661
|
-
inst: { value: value, getSnapshot: getSnapshot }
|
|
662
|
-
});
|
|
663
|
-
var inst = cachedValue[0].inst,
|
|
664
|
-
forceUpdate = cachedValue[1];
|
|
665
|
-
useLayoutEffect(
|
|
666
|
-
function () {
|
|
667
|
-
inst.value = value;
|
|
668
|
-
inst.getSnapshot = getSnapshot;
|
|
669
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
670
|
-
},
|
|
671
|
-
[subscribe, value, getSnapshot]
|
|
672
|
-
);
|
|
673
|
-
useEffect(
|
|
674
|
-
function () {
|
|
675
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
676
|
-
return subscribe(function () {
|
|
677
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
678
|
-
});
|
|
679
|
-
},
|
|
680
|
-
[subscribe]
|
|
681
|
-
);
|
|
682
|
-
useDebugValue(value);
|
|
683
|
-
return value;
|
|
684
|
-
}
|
|
685
|
-
function checkIfSnapshotChanged(inst) {
|
|
686
|
-
var latestGetSnapshot = inst.getSnapshot;
|
|
687
|
-
inst = inst.value;
|
|
688
|
-
try {
|
|
689
|
-
var nextValue = latestGetSnapshot();
|
|
690
|
-
return !objectIs(inst, nextValue);
|
|
691
|
-
} catch (error) {
|
|
692
|
-
return !0;
|
|
693
|
-
}
|
|
694
|
-
}
|
|
695
|
-
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
696
|
-
return getSnapshot();
|
|
697
|
-
}
|
|
698
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
699
|
-
"function" ===
|
|
700
|
-
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
|
|
701
|
-
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
702
|
-
var React$1 = React,
|
|
703
|
-
objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
704
|
-
useState = React$1.useState,
|
|
705
|
-
useEffect = React$1.useEffect,
|
|
706
|
-
useLayoutEffect = React$1.useLayoutEffect,
|
|
707
|
-
useDebugValue = React$1.useDebugValue,
|
|
708
|
-
didWarnOld18Alpha = !1,
|
|
709
|
-
didWarnUncachedGetSnapshot = !1,
|
|
710
|
-
shim =
|
|
711
|
-
"undefined" === typeof window ||
|
|
712
|
-
"undefined" === typeof window.document ||
|
|
713
|
-
"undefined" === typeof window.document.createElement
|
|
714
|
-
? useSyncExternalStore$1
|
|
715
|
-
: useSyncExternalStore$2;
|
|
716
|
-
useSyncExternalStoreShim_development.useSyncExternalStore =
|
|
717
|
-
void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
|
|
718
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
719
|
-
"function" ===
|
|
720
|
-
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
|
|
721
|
-
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
722
|
-
})();
|
|
723
|
-
return useSyncExternalStoreShim_development;
|
|
724
|
-
}
|
|
725
|
-
|
|
726
|
-
if (process.env.NODE_ENV === 'production') {
|
|
727
|
-
shim.exports = requireUseSyncExternalStoreShim_production();
|
|
728
|
-
} else {
|
|
729
|
-
shim.exports = requireUseSyncExternalStoreShim_development();
|
|
730
|
-
}
|
|
731
|
-
|
|
732
|
-
var shimExports = shim.exports;
|
|
733
|
-
|
|
734
|
-
var withSelector = {exports: {}};
|
|
735
|
-
|
|
736
|
-
var withSelector_production = {};
|
|
737
|
-
|
|
738
|
-
/**
|
|
739
|
-
* @license React
|
|
740
|
-
* use-sync-external-store-shim/with-selector.production.js
|
|
741
|
-
*
|
|
742
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
743
|
-
*
|
|
744
|
-
* This source code is licensed under the MIT license found in the
|
|
745
|
-
* LICENSE file in the root directory of this source tree.
|
|
746
|
-
*/
|
|
747
|
-
|
|
748
|
-
var hasRequiredWithSelector_production;
|
|
749
|
-
|
|
750
|
-
function requireWithSelector_production () {
|
|
751
|
-
if (hasRequiredWithSelector_production) return withSelector_production;
|
|
752
|
-
hasRequiredWithSelector_production = 1;
|
|
753
|
-
var React$1 = React,
|
|
754
|
-
shim = shimExports;
|
|
755
|
-
function is(x, y) {
|
|
756
|
-
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
757
|
-
}
|
|
758
|
-
var objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
759
|
-
useSyncExternalStore = shim.useSyncExternalStore,
|
|
760
|
-
useRef = React$1.useRef,
|
|
761
|
-
useEffect = React$1.useEffect,
|
|
762
|
-
useMemo = React$1.useMemo,
|
|
763
|
-
useDebugValue = React$1.useDebugValue;
|
|
764
|
-
withSelector_production.useSyncExternalStoreWithSelector = function (
|
|
765
|
-
subscribe,
|
|
766
|
-
getSnapshot,
|
|
767
|
-
getServerSnapshot,
|
|
768
|
-
selector,
|
|
769
|
-
isEqual
|
|
770
|
-
) {
|
|
771
|
-
var instRef = useRef(null);
|
|
772
|
-
if (null === instRef.current) {
|
|
773
|
-
var inst = { hasValue: !1, value: null };
|
|
774
|
-
instRef.current = inst;
|
|
775
|
-
} else inst = instRef.current;
|
|
776
|
-
instRef = useMemo(
|
|
777
|
-
function () {
|
|
778
|
-
function memoizedSelector(nextSnapshot) {
|
|
779
|
-
if (!hasMemo) {
|
|
780
|
-
hasMemo = !0;
|
|
781
|
-
memoizedSnapshot = nextSnapshot;
|
|
782
|
-
nextSnapshot = selector(nextSnapshot);
|
|
783
|
-
if (void 0 !== isEqual && inst.hasValue) {
|
|
784
|
-
var currentSelection = inst.value;
|
|
785
|
-
if (isEqual(currentSelection, nextSnapshot))
|
|
786
|
-
return (memoizedSelection = currentSelection);
|
|
787
|
-
}
|
|
788
|
-
return (memoizedSelection = nextSnapshot);
|
|
789
|
-
}
|
|
790
|
-
currentSelection = memoizedSelection;
|
|
791
|
-
if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
|
|
792
|
-
var nextSelection = selector(nextSnapshot);
|
|
793
|
-
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
794
|
-
return (memoizedSnapshot = nextSnapshot), currentSelection;
|
|
795
|
-
memoizedSnapshot = nextSnapshot;
|
|
796
|
-
return (memoizedSelection = nextSelection);
|
|
797
|
-
}
|
|
798
|
-
var hasMemo = !1,
|
|
799
|
-
memoizedSnapshot,
|
|
800
|
-
memoizedSelection,
|
|
801
|
-
maybeGetServerSnapshot =
|
|
802
|
-
void 0 === getServerSnapshot ? null : getServerSnapshot;
|
|
803
|
-
return [
|
|
804
|
-
function () {
|
|
805
|
-
return memoizedSelector(getSnapshot());
|
|
806
|
-
},
|
|
807
|
-
null === maybeGetServerSnapshot
|
|
808
|
-
? void 0
|
|
809
|
-
: function () {
|
|
810
|
-
return memoizedSelector(maybeGetServerSnapshot());
|
|
811
|
-
}
|
|
812
|
-
];
|
|
813
|
-
},
|
|
814
|
-
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
815
|
-
);
|
|
816
|
-
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
817
|
-
useEffect(
|
|
818
|
-
function () {
|
|
819
|
-
inst.hasValue = !0;
|
|
820
|
-
inst.value = value;
|
|
821
|
-
},
|
|
822
|
-
[value]
|
|
823
|
-
);
|
|
824
|
-
useDebugValue(value);
|
|
825
|
-
return value;
|
|
826
|
-
};
|
|
827
|
-
return withSelector_production;
|
|
828
|
-
}
|
|
829
|
-
|
|
830
|
-
var withSelector_development = {};
|
|
831
|
-
|
|
832
|
-
/**
|
|
833
|
-
* @license React
|
|
834
|
-
* use-sync-external-store-shim/with-selector.development.js
|
|
835
|
-
*
|
|
836
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
837
|
-
*
|
|
838
|
-
* This source code is licensed under the MIT license found in the
|
|
839
|
-
* LICENSE file in the root directory of this source tree.
|
|
840
|
-
*/
|
|
841
|
-
|
|
842
|
-
var hasRequiredWithSelector_development;
|
|
843
|
-
|
|
844
|
-
function requireWithSelector_development () {
|
|
845
|
-
if (hasRequiredWithSelector_development) return withSelector_development;
|
|
846
|
-
hasRequiredWithSelector_development = 1;
|
|
847
|
-
"production" !== process.env.NODE_ENV &&
|
|
848
|
-
(function () {
|
|
849
|
-
function is(x, y) {
|
|
850
|
-
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
851
|
-
}
|
|
852
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
853
|
-
"function" ===
|
|
854
|
-
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
|
|
855
|
-
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
856
|
-
var React$1 = React,
|
|
857
|
-
shim = shimExports,
|
|
858
|
-
objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
859
|
-
useSyncExternalStore = shim.useSyncExternalStore,
|
|
860
|
-
useRef = React$1.useRef,
|
|
861
|
-
useEffect = React$1.useEffect,
|
|
862
|
-
useMemo = React$1.useMemo,
|
|
863
|
-
useDebugValue = React$1.useDebugValue;
|
|
864
|
-
withSelector_development.useSyncExternalStoreWithSelector = function (
|
|
865
|
-
subscribe,
|
|
866
|
-
getSnapshot,
|
|
867
|
-
getServerSnapshot,
|
|
868
|
-
selector,
|
|
869
|
-
isEqual
|
|
870
|
-
) {
|
|
871
|
-
var instRef = useRef(null);
|
|
872
|
-
if (null === instRef.current) {
|
|
873
|
-
var inst = { hasValue: !1, value: null };
|
|
874
|
-
instRef.current = inst;
|
|
875
|
-
} else inst = instRef.current;
|
|
876
|
-
instRef = useMemo(
|
|
877
|
-
function () {
|
|
878
|
-
function memoizedSelector(nextSnapshot) {
|
|
879
|
-
if (!hasMemo) {
|
|
880
|
-
hasMemo = !0;
|
|
881
|
-
memoizedSnapshot = nextSnapshot;
|
|
882
|
-
nextSnapshot = selector(nextSnapshot);
|
|
883
|
-
if (void 0 !== isEqual && inst.hasValue) {
|
|
884
|
-
var currentSelection = inst.value;
|
|
885
|
-
if (isEqual(currentSelection, nextSnapshot))
|
|
886
|
-
return (memoizedSelection = currentSelection);
|
|
887
|
-
}
|
|
888
|
-
return (memoizedSelection = nextSnapshot);
|
|
889
|
-
}
|
|
890
|
-
currentSelection = memoizedSelection;
|
|
891
|
-
if (objectIs(memoizedSnapshot, nextSnapshot))
|
|
892
|
-
return currentSelection;
|
|
893
|
-
var nextSelection = selector(nextSnapshot);
|
|
894
|
-
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
895
|
-
return (memoizedSnapshot = nextSnapshot), currentSelection;
|
|
896
|
-
memoizedSnapshot = nextSnapshot;
|
|
897
|
-
return (memoizedSelection = nextSelection);
|
|
898
|
-
}
|
|
899
|
-
var hasMemo = !1,
|
|
900
|
-
memoizedSnapshot,
|
|
901
|
-
memoizedSelection,
|
|
902
|
-
maybeGetServerSnapshot =
|
|
903
|
-
void 0 === getServerSnapshot ? null : getServerSnapshot;
|
|
904
|
-
return [
|
|
905
|
-
function () {
|
|
906
|
-
return memoizedSelector(getSnapshot());
|
|
907
|
-
},
|
|
908
|
-
null === maybeGetServerSnapshot
|
|
909
|
-
? void 0
|
|
910
|
-
: function () {
|
|
911
|
-
return memoizedSelector(maybeGetServerSnapshot());
|
|
912
|
-
}
|
|
913
|
-
];
|
|
914
|
-
},
|
|
915
|
-
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
916
|
-
);
|
|
917
|
-
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
918
|
-
useEffect(
|
|
919
|
-
function () {
|
|
920
|
-
inst.hasValue = !0;
|
|
921
|
-
inst.value = value;
|
|
922
|
-
},
|
|
923
|
-
[value]
|
|
924
|
-
);
|
|
925
|
-
useDebugValue(value);
|
|
926
|
-
return value;
|
|
927
|
-
};
|
|
928
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
929
|
-
"function" ===
|
|
930
|
-
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
|
|
931
|
-
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
932
|
-
})();
|
|
933
|
-
return withSelector_development;
|
|
934
|
-
}
|
|
935
|
-
|
|
936
|
-
if (process.env.NODE_ENV === 'production') {
|
|
937
|
-
withSelector.exports = requireWithSelector_production();
|
|
938
|
-
} else {
|
|
939
|
-
withSelector.exports = requireWithSelector_development();
|
|
940
|
-
}
|
|
941
|
-
|
|
942
|
-
var withSelectorExports = withSelector.exports;
|
|
943
|
-
|
|
944
|
-
const hooks = [];
|
|
945
|
-
let currentInstance = undefined;
|
|
946
|
-
function getInstance() {
|
|
947
|
-
return currentInstance;
|
|
948
|
-
}
|
|
949
|
-
function register(hook) {
|
|
950
|
-
hooks.push(hook);
|
|
951
|
-
}
|
|
952
|
-
function fastComponent(fn) {
|
|
953
|
-
const FastComponent = (props, forwardedRef) => {
|
|
954
|
-
const instance = useRenderElement.useRefWithInit(createInstance).current;
|
|
955
|
-
let result;
|
|
956
|
-
try {
|
|
957
|
-
currentInstance = instance;
|
|
958
|
-
for (const hook of hooks) {
|
|
959
|
-
hook.before(instance);
|
|
960
|
-
}
|
|
961
|
-
result = fn(props, forwardedRef);
|
|
962
|
-
for (const hook of hooks) {
|
|
963
|
-
hook.after(instance);
|
|
964
|
-
}
|
|
965
|
-
instance.didInitialize = true;
|
|
966
|
-
} finally {
|
|
967
|
-
currentInstance = undefined;
|
|
968
|
-
}
|
|
969
|
-
return result;
|
|
970
|
-
};
|
|
971
|
-
FastComponent.displayName = fn.displayName || fn.name;
|
|
972
|
-
return FastComponent;
|
|
973
|
-
}
|
|
974
|
-
function fastComponentRef(fn) {
|
|
975
|
-
return /*#__PURE__*/React__namespace.forwardRef(fastComponent(fn));
|
|
976
|
-
}
|
|
977
|
-
function createInstance() {
|
|
978
|
-
return {
|
|
979
|
-
didInitialize: false
|
|
980
|
-
};
|
|
981
|
-
}
|
|
982
|
-
|
|
983
|
-
/* Some tests fail in R18 with the raw useSyncExternalStore. It may be possible to make it work
|
|
984
|
-
* but for now we only enable it for R19+. */
|
|
985
|
-
const canUseRawUseSyncExternalStore = useRenderElement.isReactVersionAtLeast(19);
|
|
986
|
-
const useStoreImplementation = canUseRawUseSyncExternalStore ? useStoreFast : useStoreLegacy;
|
|
987
|
-
function useStore(store, selector, a1, a2, a3) {
|
|
988
|
-
return useStoreImplementation(store, selector, a1, a2, a3);
|
|
989
|
-
}
|
|
990
|
-
function useStoreR19(store, selector, a1, a2, a3) {
|
|
991
|
-
const getSelection = React__namespace.useCallback(() => selector(store.getSnapshot(), a1, a2, a3), [store, selector, a1, a2, a3]);
|
|
992
|
-
return shimExports.useSyncExternalStore(store.subscribe, getSelection, getSelection);
|
|
993
|
-
}
|
|
994
|
-
register({
|
|
995
|
-
before(instance) {
|
|
996
|
-
instance.syncIndex = 0;
|
|
997
|
-
if (!instance.didInitialize) {
|
|
998
|
-
instance.syncTick = 1;
|
|
999
|
-
instance.syncHooks = [];
|
|
1000
|
-
instance.didChangeStore = true;
|
|
1001
|
-
instance.getSnapshot = () => {
|
|
1002
|
-
let didChange = false;
|
|
1003
|
-
for (let i = 0; i < instance.syncHooks.length; i += 1) {
|
|
1004
|
-
const hook = instance.syncHooks[i];
|
|
1005
|
-
const value = hook.selector(hook.store.state, hook.a1, hook.a2, hook.a3);
|
|
1006
|
-
if (hook.didChange || !Object.is(hook.value, value)) {
|
|
1007
|
-
didChange = true;
|
|
1008
|
-
hook.value = value;
|
|
1009
|
-
hook.didChange = false;
|
|
1010
|
-
}
|
|
1011
|
-
}
|
|
1012
|
-
if (didChange) {
|
|
1013
|
-
instance.syncTick += 1;
|
|
1014
|
-
}
|
|
1015
|
-
return instance.syncTick;
|
|
1016
|
-
};
|
|
1017
|
-
}
|
|
1018
|
-
},
|
|
1019
|
-
after(instance) {
|
|
1020
|
-
if (instance.syncHooks.length > 0) {
|
|
1021
|
-
if (instance.didChangeStore) {
|
|
1022
|
-
instance.didChangeStore = false;
|
|
1023
|
-
instance.subscribe = onStoreChange => {
|
|
1024
|
-
const stores = new Set();
|
|
1025
|
-
for (const hook of instance.syncHooks) {
|
|
1026
|
-
stores.add(hook.store);
|
|
1027
|
-
}
|
|
1028
|
-
const unsubscribes = [];
|
|
1029
|
-
for (const store of stores) {
|
|
1030
|
-
unsubscribes.push(store.subscribe(onStoreChange));
|
|
1031
|
-
}
|
|
1032
|
-
return () => {
|
|
1033
|
-
for (const unsubscribe of unsubscribes) {
|
|
1034
|
-
unsubscribe();
|
|
1035
|
-
}
|
|
1036
|
-
};
|
|
1037
|
-
};
|
|
1038
|
-
}
|
|
1039
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
1040
|
-
shimExports.useSyncExternalStore(instance.subscribe, instance.getSnapshot, instance.getSnapshot);
|
|
1041
|
-
}
|
|
1042
|
-
}
|
|
1043
|
-
});
|
|
1044
|
-
function useStoreFast(store, selector, a1, a2, a3) {
|
|
1045
|
-
const instance = getInstance();
|
|
1046
|
-
if (!instance) {
|
|
1047
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
1048
|
-
return useStoreR19(store, selector, a1, a2, a3);
|
|
1049
|
-
}
|
|
1050
|
-
const index = instance.syncIndex;
|
|
1051
|
-
instance.syncIndex += 1;
|
|
1052
|
-
let hook;
|
|
1053
|
-
if (!instance.didInitialize) {
|
|
1054
|
-
hook = {
|
|
1055
|
-
store,
|
|
1056
|
-
selector,
|
|
1057
|
-
a1,
|
|
1058
|
-
a2,
|
|
1059
|
-
a3,
|
|
1060
|
-
value: selector(store.getSnapshot(), a1, a2, a3),
|
|
1061
|
-
didChange: false
|
|
1062
|
-
};
|
|
1063
|
-
instance.syncHooks.push(hook);
|
|
1064
|
-
} else {
|
|
1065
|
-
hook = instance.syncHooks[index];
|
|
1066
|
-
if (hook.store !== store || hook.selector !== selector || !Object.is(hook.a1, a1) || !Object.is(hook.a2, a2) || !Object.is(hook.a3, a3)) {
|
|
1067
|
-
if (hook.store !== store) {
|
|
1068
|
-
instance.didChangeStore = true;
|
|
1069
|
-
}
|
|
1070
|
-
hook.store = store;
|
|
1071
|
-
hook.selector = selector;
|
|
1072
|
-
hook.a1 = a1;
|
|
1073
|
-
hook.a2 = a2;
|
|
1074
|
-
hook.a3 = a3;
|
|
1075
|
-
hook.didChange = true;
|
|
1076
|
-
}
|
|
1077
|
-
}
|
|
1078
|
-
return hook.value;
|
|
1079
|
-
}
|
|
1080
|
-
function useStoreLegacy(store, selector, a1, a2, a3) {
|
|
1081
|
-
return withSelectorExports.useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, state => selector(state, a1, a2, a3));
|
|
1082
|
-
}
|
|
1083
|
-
|
|
1084
|
-
/**
|
|
1085
|
-
* A data store implementation that allows subscribing to state changes and updating the state.
|
|
1086
|
-
* It uses an observer pattern to notify subscribers when the state changes.
|
|
1087
|
-
*/
|
|
1088
|
-
class Store {
|
|
1089
|
-
/**
|
|
1090
|
-
* The current state of the store.
|
|
1091
|
-
* This property is updated immediately when the state changes as a result of calling {@link setState}, {@link update}, or {@link set}.
|
|
1092
|
-
* To subscribe to state changes, use the {@link useState} method. The value returned by {@link useState} is updated after the component renders (similarly to React's useState).
|
|
1093
|
-
* The values can be used directly (to avoid subscribing to the store) in effects or event handlers.
|
|
1094
|
-
*
|
|
1095
|
-
* Do not modify properties in state directly. Instead, use the provided methods to ensure proper state management and listener notification.
|
|
1096
|
-
*/
|
|
1097
|
-
|
|
1098
|
-
// Internal state to handle recursive `setState()` calls
|
|
1099
|
-
|
|
1100
|
-
constructor(state) {
|
|
1101
|
-
this.state = state;
|
|
1102
|
-
this.listeners = new Set();
|
|
1103
|
-
this.updateTick = 0;
|
|
1104
|
-
}
|
|
1105
|
-
|
|
1106
|
-
/**
|
|
1107
|
-
* Registers a listener that will be called whenever the store's state changes.
|
|
1108
|
-
*
|
|
1109
|
-
* @param fn The listener function to be called on state changes.
|
|
1110
|
-
* @returns A function to unsubscribe the listener.
|
|
1111
|
-
*/
|
|
1112
|
-
subscribe = fn => {
|
|
1113
|
-
this.listeners.add(fn);
|
|
1114
|
-
return () => {
|
|
1115
|
-
this.listeners.delete(fn);
|
|
1116
|
-
};
|
|
1117
|
-
};
|
|
1118
|
-
|
|
1119
|
-
/**
|
|
1120
|
-
* Returns the current state of the store.
|
|
1121
|
-
*/
|
|
1122
|
-
getSnapshot = () => {
|
|
1123
|
-
return this.state;
|
|
1124
|
-
};
|
|
1125
|
-
|
|
1126
|
-
/**
|
|
1127
|
-
* Updates the entire store's state and notifies all registered listeners.
|
|
1128
|
-
*
|
|
1129
|
-
* @param newState The new state to set for the store.
|
|
1130
|
-
*/
|
|
1131
|
-
setState(newState) {
|
|
1132
|
-
if (this.state === newState) {
|
|
1133
|
-
return;
|
|
1134
|
-
}
|
|
1135
|
-
this.state = newState;
|
|
1136
|
-
this.updateTick += 1;
|
|
1137
|
-
const currentTick = this.updateTick;
|
|
1138
|
-
for (const listener of this.listeners) {
|
|
1139
|
-
if (currentTick !== this.updateTick) {
|
|
1140
|
-
// If the tick has changed, a recursive `setState` call has been made,
|
|
1141
|
-
// and it has already notified all listeners.
|
|
1142
|
-
return;
|
|
1143
|
-
}
|
|
1144
|
-
listener(newState);
|
|
1145
|
-
}
|
|
1146
|
-
}
|
|
1147
|
-
|
|
1148
|
-
/**
|
|
1149
|
-
* Merges the provided changes into the current state and notifies listeners if there are changes.
|
|
1150
|
-
*
|
|
1151
|
-
* @param changes An object containing the changes to apply to the current state.
|
|
1152
|
-
*/
|
|
1153
|
-
update(changes) {
|
|
1154
|
-
for (const key in changes) {
|
|
1155
|
-
if (!Object.is(this.state[key], changes[key])) {
|
|
1156
|
-
this.setState({
|
|
1157
|
-
...this.state,
|
|
1158
|
-
...changes
|
|
1159
|
-
});
|
|
1160
|
-
return;
|
|
1161
|
-
}
|
|
1162
|
-
}
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
|
-
/**
|
|
1166
|
-
* Sets a specific key in the store's state to a new value and notifies listeners if the value has changed.
|
|
1167
|
-
*
|
|
1168
|
-
* @param key The key in the store's state to update.
|
|
1169
|
-
* @param value The new value to set for the specified key.
|
|
1170
|
-
*/
|
|
1171
|
-
set(key, value) {
|
|
1172
|
-
if (!Object.is(this.state[key], value)) {
|
|
1173
|
-
this.setState({
|
|
1174
|
-
...this.state,
|
|
1175
|
-
[key]: value
|
|
1176
|
-
});
|
|
1177
|
-
}
|
|
1178
|
-
}
|
|
1179
|
-
|
|
1180
|
-
/**
|
|
1181
|
-
* Gives the state a new reference and updates all registered listeners.
|
|
1182
|
-
*/
|
|
1183
|
-
notifyAll() {
|
|
1184
|
-
const newState = {
|
|
1185
|
-
...this.state
|
|
1186
|
-
};
|
|
1187
|
-
this.setState(newState);
|
|
1188
|
-
}
|
|
1189
|
-
use(selector, a1, a2, a3) {
|
|
1190
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
1191
|
-
return useStore(this, selector, a1, a2, a3);
|
|
1192
|
-
}
|
|
1193
|
-
}
|
|
1194
|
-
|
|
1195
|
-
/* False positives - ESLint thinks we're calling a hook from a class component. */
|
|
1196
|
-
/* eslint-disable react-hooks/rules-of-hooks */
|
|
1197
|
-
|
|
1198
|
-
/**
|
|
1199
|
-
* A Store that supports controlled state keys, non-reactive values and provides utility methods for React.
|
|
1200
|
-
*/
|
|
1201
|
-
class ReactStore extends Store {
|
|
1202
|
-
/**
|
|
1203
|
-
* Creates a new ReactStore instance.
|
|
1204
|
-
*
|
|
1205
|
-
* @param state Initial state of the store.
|
|
1206
|
-
* @param context Non-reactive context values.
|
|
1207
|
-
* @param selectors Optional selectors for use with `useState`.
|
|
1208
|
-
*/
|
|
1209
|
-
constructor(state, context = {}, selectors) {
|
|
1210
|
-
super(state);
|
|
1211
|
-
this.context = context;
|
|
1212
|
-
this.selectors = selectors;
|
|
1213
|
-
}
|
|
1214
|
-
|
|
1215
|
-
/**
|
|
1216
|
-
* Non-reactive values such as refs, callbacks, etc.
|
|
1217
|
-
*/
|
|
1218
|
-
|
|
1219
|
-
/**
|
|
1220
|
-
* Synchronizes a single external value into the store.
|
|
1221
|
-
*
|
|
1222
|
-
* Note that the while the value in `state` is updated immediately, the value returned
|
|
1223
|
-
* by `useState` is updated before the next render (similarly to React's `useState`).
|
|
1224
|
-
*/
|
|
1225
|
-
useSyncedValue(key, value) {
|
|
1226
|
-
React__namespace.useDebugValue(key);
|
|
1227
|
-
clamp.useIsoLayoutEffect(() => {
|
|
1228
|
-
if (this.state[key] !== value) {
|
|
1229
|
-
this.set(key, value);
|
|
1230
|
-
}
|
|
1231
|
-
}, [key, value]);
|
|
1232
|
-
}
|
|
1233
|
-
|
|
1234
|
-
/**
|
|
1235
|
-
* Synchronizes a single external value into the store and
|
|
1236
|
-
* cleans it up (sets to `undefined`) on unmount.
|
|
1237
|
-
*
|
|
1238
|
-
* Note that the while the value in `state` is updated immediately, the value returned
|
|
1239
|
-
* by `useState` is updated before the next render (similarly to React's `useState`).
|
|
1240
|
-
*/
|
|
1241
|
-
useSyncedValueWithCleanup(key, value) {
|
|
1242
|
-
// eslint-disable-next-line consistent-this
|
|
1243
|
-
const store = this;
|
|
1244
|
-
clamp.useIsoLayoutEffect(() => {
|
|
1245
|
-
if (store.state[key] !== value) {
|
|
1246
|
-
store.set(key, value);
|
|
1247
|
-
}
|
|
1248
|
-
return () => {
|
|
1249
|
-
store.set(key, undefined);
|
|
1250
|
-
};
|
|
1251
|
-
}, [store, key, value]);
|
|
1252
|
-
}
|
|
1253
|
-
|
|
1254
|
-
/**
|
|
1255
|
-
* Synchronizes multiple external values into the store.
|
|
1256
|
-
*
|
|
1257
|
-
* Note that the while the values in `state` are updated immediately, the values returned
|
|
1258
|
-
* by `useState` are updated before the next render (similarly to React's `useState`).
|
|
1259
|
-
*/
|
|
1260
|
-
useSyncedValues(statePart) {
|
|
1261
|
-
// eslint-disable-next-line consistent-this
|
|
1262
|
-
const store = this;
|
|
1263
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
1264
|
-
// Check that an object with the same shape is passed on every render
|
|
1265
|
-
React__namespace.useDebugValue(statePart, p => Object.keys(p));
|
|
1266
|
-
const keys = React__namespace.useRef(Object.keys(statePart)).current;
|
|
1267
|
-
const nextKeys = Object.keys(statePart);
|
|
1268
|
-
if (keys.length !== nextKeys.length || keys.some((key, index) => key !== nextKeys[index])) {
|
|
1269
|
-
console.error('ReactStore.useSyncedValues expects the same prop keys on every render. Keys should be stable.');
|
|
1270
|
-
}
|
|
1271
|
-
}
|
|
1272
|
-
const dependencies = Object.values(statePart);
|
|
1273
|
-
clamp.useIsoLayoutEffect(() => {
|
|
1274
|
-
store.update(statePart);
|
|
1275
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1276
|
-
}, [store, ...dependencies]);
|
|
1277
|
-
}
|
|
1278
|
-
|
|
1279
|
-
/**
|
|
1280
|
-
* Registers a controllable prop pair (`controlled`, `defaultValue`) for a specific key. If `controlled`
|
|
1281
|
-
* is non-undefined, the store's state at `key` is updated to match `controlled`.
|
|
1282
|
-
*/
|
|
1283
|
-
useControlledProp(key, controlled) {
|
|
1284
|
-
React__namespace.useDebugValue(key);
|
|
1285
|
-
const isControlled = controlled !== undefined;
|
|
1286
|
-
clamp.useIsoLayoutEffect(() => {
|
|
1287
|
-
if (isControlled && !Object.is(this.state[key], controlled)) {
|
|
1288
|
-
// Set the internal state to match the controlled value.
|
|
1289
|
-
super.setState({
|
|
1290
|
-
...this.state,
|
|
1291
|
-
[key]: controlled
|
|
1292
|
-
});
|
|
1293
|
-
}
|
|
1294
|
-
}, [key, controlled, isControlled]);
|
|
1295
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
1296
|
-
// eslint-disable-next-line
|
|
1297
|
-
const cache = this.controlledValues ??= new Map();
|
|
1298
|
-
if (!cache.has(key)) {
|
|
1299
|
-
cache.set(key, isControlled);
|
|
1300
|
-
}
|
|
1301
|
-
const previouslyControlled = cache.get(key);
|
|
1302
|
-
if (previouslyControlled !== undefined && previouslyControlled !== isControlled) {
|
|
1303
|
-
console.error(`A component is changing the ${isControlled ? '' : 'un'}controlled state of ${key.toString()} to be ${isControlled ? 'un' : ''}controlled. Elements should not switch from uncontrolled to controlled (or vice versa).`);
|
|
1304
|
-
}
|
|
1305
|
-
}
|
|
1306
|
-
}
|
|
1307
|
-
|
|
1308
|
-
/** Gets the current value from the store using a selector with the provided key.
|
|
1309
|
-
*
|
|
1310
|
-
* @param key Key of the selector to use.
|
|
1311
|
-
*/
|
|
1312
|
-
|
|
1313
|
-
select(key, a1, a2, a3) {
|
|
1314
|
-
const selector = this.selectors[key];
|
|
1315
|
-
return selector(this.state, a1, a2, a3);
|
|
1316
|
-
}
|
|
1317
|
-
|
|
1318
|
-
/**
|
|
1319
|
-
* Returns a value from the store's state using a selector function.
|
|
1320
|
-
* Used to subscribe to specific parts of the state.
|
|
1321
|
-
* This methods causes a rerender whenever the selected state changes.
|
|
1322
|
-
*
|
|
1323
|
-
* @param key Key of the selector to use.
|
|
1324
|
-
*/
|
|
1325
|
-
|
|
1326
|
-
useState(key, a1, a2, a3) {
|
|
1327
|
-
React__namespace.useDebugValue(key);
|
|
1328
|
-
return useStore(this, this.selectors[key], a1, a2, a3);
|
|
1329
|
-
}
|
|
1330
|
-
|
|
1331
|
-
/**
|
|
1332
|
-
* Wraps a function with `useStableCallback` to ensure it has a stable reference
|
|
1333
|
-
* and assigns it to the context.
|
|
1334
|
-
*
|
|
1335
|
-
* @param key Key of the event callback. Must be a function in the context.
|
|
1336
|
-
* @param fn Function to assign.
|
|
1337
|
-
*/
|
|
1338
|
-
useContextCallback(key, fn) {
|
|
1339
|
-
React__namespace.useDebugValue(key);
|
|
1340
|
-
const stableFunction = clamp.useStableCallback(fn ?? useRenderElement.NOOP);
|
|
1341
|
-
this.context[key] = stableFunction;
|
|
1342
|
-
}
|
|
1343
|
-
|
|
1344
|
-
/**
|
|
1345
|
-
* Returns a stable setter function for a specific key in the store's state.
|
|
1346
|
-
* It's commonly used to pass as a ref callback to React elements.
|
|
1347
|
-
*
|
|
1348
|
-
* @param key Key of the state to set.
|
|
1349
|
-
*/
|
|
1350
|
-
useStateSetter(key) {
|
|
1351
|
-
const ref = React__namespace.useRef(undefined);
|
|
1352
|
-
if (ref.current === undefined) {
|
|
1353
|
-
ref.current = value => {
|
|
1354
|
-
this.set(key, value);
|
|
1355
|
-
};
|
|
1356
|
-
}
|
|
1357
|
-
return ref.current;
|
|
1358
|
-
}
|
|
1359
|
-
|
|
1360
|
-
/**
|
|
1361
|
-
* Observes changes derived from the store's selectors and calls the listener when the selected value changes.
|
|
1362
|
-
*
|
|
1363
|
-
* @param key Key of the selector to observe.
|
|
1364
|
-
* @param listener Listener function called when the selector result changes.
|
|
1365
|
-
*/
|
|
1366
|
-
|
|
1367
|
-
observe(selector, listener) {
|
|
1368
|
-
let selectFn;
|
|
1369
|
-
if (typeof selector === 'function') {
|
|
1370
|
-
selectFn = selector;
|
|
1371
|
-
} else {
|
|
1372
|
-
selectFn = this.selectors[selector];
|
|
1373
|
-
}
|
|
1374
|
-
let prevValue = selectFn(this.state);
|
|
1375
|
-
listener(prevValue, prevValue, this);
|
|
1376
|
-
return this.subscribe(nextState => {
|
|
1377
|
-
const nextValue = selectFn(nextState);
|
|
1378
|
-
if (!Object.is(prevValue, nextValue)) {
|
|
1379
|
-
const oldValue = prevValue;
|
|
1380
|
-
prevValue = nextValue;
|
|
1381
|
-
listener(nextValue, oldValue, this);
|
|
1382
|
-
}
|
|
1383
|
-
});
|
|
1384
|
-
}
|
|
1385
|
-
}
|
|
1386
|
-
|
|
1387
|
-
/* eslint-disable @typescript-eslint/no-loop-func */
|
|
1388
|
-
|
|
1389
|
-
function getNodeChildren(nodes, id, onlyOpenChildren = true) {
|
|
1390
|
-
const directChildren = nodes.filter(node => node.parentId === id && (!onlyOpenChildren || node.context?.open));
|
|
1391
|
-
return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
|
|
1392
|
-
}
|
|
1393
|
-
function getNodeAncestors(nodes, id) {
|
|
1394
|
-
let allAncestors = [];
|
|
1395
|
-
let currentParentId = nodes.find(node => node.id === id)?.parentId;
|
|
1396
|
-
while (currentParentId) {
|
|
1397
|
-
const currentNode = nodes.find(node => node.id === currentParentId);
|
|
1398
|
-
currentParentId = currentNode?.parentId;
|
|
1399
|
-
if (currentNode) {
|
|
1400
|
-
allAncestors = allAncestors.concat(currentNode);
|
|
1401
|
-
}
|
|
1402
|
-
}
|
|
1403
|
-
return allAncestors;
|
|
1404
|
-
}
|
|
1405
|
-
|
|
1406
|
-
function isDifferentGridRow(index, cols, prevRow) {
|
|
1407
|
-
return Math.floor(index / cols) !== prevRow;
|
|
1408
|
-
}
|
|
1409
|
-
function isIndexOutOfListBounds(listRef, index) {
|
|
1410
|
-
return index < 0 || index >= listRef.current.length;
|
|
1411
|
-
}
|
|
1412
|
-
function getMinListIndex(listRef, disabledIndices) {
|
|
1413
|
-
return findNonDisabledListIndex(listRef, {
|
|
1414
|
-
disabledIndices
|
|
1415
|
-
});
|
|
1416
|
-
}
|
|
1417
|
-
function getMaxListIndex(listRef, disabledIndices) {
|
|
1418
|
-
return findNonDisabledListIndex(listRef, {
|
|
1419
|
-
decrement: true,
|
|
1420
|
-
startingIndex: listRef.current.length,
|
|
1421
|
-
disabledIndices
|
|
1422
|
-
});
|
|
1423
|
-
}
|
|
1424
|
-
function findNonDisabledListIndex(listRef, {
|
|
1425
|
-
startingIndex = -1,
|
|
1426
|
-
decrement = false,
|
|
1427
|
-
disabledIndices,
|
|
1428
|
-
amount = 1
|
|
1429
|
-
} = {}) {
|
|
1430
|
-
let index = startingIndex;
|
|
1431
|
-
do {
|
|
1432
|
-
index += decrement ? -amount : amount;
|
|
1433
|
-
} while (index >= 0 && index <= listRef.current.length - 1 && isListIndexDisabled(listRef, index, disabledIndices));
|
|
1434
|
-
return index;
|
|
1435
|
-
}
|
|
1436
|
-
function getGridNavigatedIndex(listRef, {
|
|
1437
|
-
event,
|
|
1438
|
-
orientation,
|
|
1439
|
-
loopFocus,
|
|
1440
|
-
rtl,
|
|
1441
|
-
cols,
|
|
1442
|
-
disabledIndices,
|
|
1443
|
-
minIndex,
|
|
1444
|
-
maxIndex,
|
|
1445
|
-
prevIndex,
|
|
1446
|
-
stopEvent: stop = false
|
|
1447
|
-
}) {
|
|
1448
|
-
let nextIndex = prevIndex;
|
|
1449
|
-
let verticalDirection;
|
|
1450
|
-
if (event.key === clamp.ARROW_UP) {
|
|
1451
|
-
verticalDirection = 'up';
|
|
1452
|
-
} else if (event.key === clamp.ARROW_DOWN) {
|
|
1453
|
-
verticalDirection = 'down';
|
|
1454
|
-
}
|
|
1455
|
-
if (verticalDirection) {
|
|
1456
|
-
// -------------------------------------------------------------------------
|
|
1457
|
-
// Detect row structure only when handling vertical navigation. This keeps
|
|
1458
|
-
// the non-vertical key paths free from row inference work.
|
|
1459
|
-
// -------------------------------------------------------------------------
|
|
1460
|
-
const rows = [];
|
|
1461
|
-
const rowIndexMap = [];
|
|
1462
|
-
let hasRoleRow = false;
|
|
1463
|
-
let visibleItemCount = 0;
|
|
1464
|
-
{
|
|
1465
|
-
let currentRowEl = null;
|
|
1466
|
-
let currentRowIndex = -1;
|
|
1467
|
-
listRef.current.forEach((el, idx) => {
|
|
1468
|
-
if (el == null) {
|
|
1469
|
-
return;
|
|
1470
|
-
}
|
|
1471
|
-
visibleItemCount += 1;
|
|
1472
|
-
const rowEl = el.closest('[role="row"]');
|
|
1473
|
-
if (rowEl) {
|
|
1474
|
-
hasRoleRow = true;
|
|
1475
|
-
}
|
|
1476
|
-
if (rowEl !== currentRowEl || currentRowIndex === -1) {
|
|
1477
|
-
currentRowEl = rowEl;
|
|
1478
|
-
currentRowIndex += 1;
|
|
1479
|
-
rows[currentRowIndex] = [];
|
|
1480
|
-
}
|
|
1481
|
-
rows[currentRowIndex].push(idx);
|
|
1482
|
-
rowIndexMap[idx] = currentRowIndex;
|
|
1483
|
-
});
|
|
1484
|
-
}
|
|
1485
|
-
let hasDomRows = false;
|
|
1486
|
-
let inferredDomCols = 0;
|
|
1487
|
-
if (hasRoleRow) {
|
|
1488
|
-
for (const row of rows) {
|
|
1489
|
-
const rowLength = row.length;
|
|
1490
|
-
if (rowLength > inferredDomCols) {
|
|
1491
|
-
inferredDomCols = rowLength;
|
|
1492
|
-
}
|
|
1493
|
-
if (rowLength !== cols) {
|
|
1494
|
-
hasDomRows = true;
|
|
1495
|
-
}
|
|
1496
|
-
}
|
|
1497
|
-
}
|
|
1498
|
-
const hasVirtualizedGaps = hasDomRows && visibleItemCount < listRef.current.length;
|
|
1499
|
-
const verticalCols = inferredDomCols || cols;
|
|
1500
|
-
const navigateVertically = direction => {
|
|
1501
|
-
if (!hasDomRows || prevIndex === -1) {
|
|
1502
|
-
return undefined;
|
|
1503
|
-
}
|
|
1504
|
-
const currentRow = rowIndexMap[prevIndex];
|
|
1505
|
-
if (currentRow == null) {
|
|
1506
|
-
return undefined;
|
|
1507
|
-
}
|
|
1508
|
-
const colInRow = rows[currentRow].indexOf(prevIndex);
|
|
1509
|
-
const step = direction === 'up' ? -1 : 1;
|
|
1510
|
-
for (let nextRow = currentRow + step, i = 0; i < rows.length; i += 1, nextRow += step) {
|
|
1511
|
-
if (nextRow < 0 || nextRow >= rows.length) {
|
|
1512
|
-
if (!loopFocus || hasVirtualizedGaps) {
|
|
1513
|
-
return undefined;
|
|
1514
|
-
}
|
|
1515
|
-
nextRow = nextRow < 0 ? rows.length - 1 : 0;
|
|
1516
|
-
}
|
|
1517
|
-
const targetRow = rows[nextRow];
|
|
1518
|
-
for (let col = Math.min(colInRow, targetRow.length - 1); col >= 0; col -= 1) {
|
|
1519
|
-
const candidate = targetRow[col];
|
|
1520
|
-
if (!isListIndexDisabled(listRef, candidate, disabledIndices)) {
|
|
1521
|
-
return candidate;
|
|
1522
|
-
}
|
|
1523
|
-
}
|
|
1524
|
-
}
|
|
1525
|
-
return undefined;
|
|
1526
|
-
};
|
|
1527
|
-
const navigateVerticallyWithInferredRows = direction => {
|
|
1528
|
-
if (!hasVirtualizedGaps || prevIndex === -1) {
|
|
1529
|
-
return undefined;
|
|
1530
|
-
}
|
|
1531
|
-
const colInRow = prevIndex % verticalCols;
|
|
1532
|
-
const rowStep = direction === 'up' ? -verticalCols : verticalCols;
|
|
1533
|
-
const lastRowStart = maxIndex - maxIndex % verticalCols;
|
|
1534
|
-
const rowCount = index_esm.floor(maxIndex / verticalCols) + 1;
|
|
1535
|
-
for (let rowStart = prevIndex - colInRow + rowStep, i = 0; i < rowCount; i += 1, rowStart += rowStep) {
|
|
1536
|
-
if (rowStart < 0 || rowStart > maxIndex) {
|
|
1537
|
-
if (!loopFocus) {
|
|
1538
|
-
return undefined;
|
|
1539
|
-
}
|
|
1540
|
-
rowStart = rowStart < 0 ? lastRowStart : 0;
|
|
1541
|
-
}
|
|
1542
|
-
const rowEnd = Math.min(rowStart + verticalCols - 1, maxIndex);
|
|
1543
|
-
for (let candidate = Math.min(rowStart + colInRow, rowEnd); candidate >= rowStart; candidate -= 1) {
|
|
1544
|
-
if (!isListIndexDisabled(listRef, candidate, disabledIndices)) {
|
|
1545
|
-
return candidate;
|
|
1546
|
-
}
|
|
1547
|
-
}
|
|
1548
|
-
}
|
|
1549
|
-
return undefined;
|
|
1550
|
-
};
|
|
1551
|
-
if (stop) {
|
|
1552
|
-
clamp.stopEvent(event);
|
|
1553
|
-
}
|
|
1554
|
-
const verticalCandidate = navigateVertically(verticalDirection) ?? navigateVerticallyWithInferredRows(verticalDirection);
|
|
1555
|
-
if (verticalCandidate !== undefined) {
|
|
1556
|
-
nextIndex = verticalCandidate;
|
|
1557
|
-
} else if (prevIndex === -1) {
|
|
1558
|
-
nextIndex = verticalDirection === 'up' ? maxIndex : minIndex;
|
|
1559
|
-
} else {
|
|
1560
|
-
nextIndex = findNonDisabledListIndex(listRef, {
|
|
1561
|
-
startingIndex: prevIndex,
|
|
1562
|
-
amount: verticalCols,
|
|
1563
|
-
decrement: verticalDirection === 'up',
|
|
1564
|
-
disabledIndices
|
|
1565
|
-
});
|
|
1566
|
-
if (loopFocus) {
|
|
1567
|
-
if (verticalDirection === 'up' && (prevIndex - verticalCols < minIndex || nextIndex < 0)) {
|
|
1568
|
-
const col = prevIndex % verticalCols;
|
|
1569
|
-
const maxCol = maxIndex % verticalCols;
|
|
1570
|
-
const offset = maxIndex - (maxCol - col);
|
|
1571
|
-
if (maxCol === col) {
|
|
1572
|
-
nextIndex = maxIndex;
|
|
1573
|
-
} else {
|
|
1574
|
-
nextIndex = maxCol > col ? offset : offset - verticalCols;
|
|
1575
|
-
}
|
|
1576
|
-
}
|
|
1577
|
-
if (verticalDirection === 'down' && prevIndex + verticalCols > maxIndex) {
|
|
1578
|
-
nextIndex = findNonDisabledListIndex(listRef, {
|
|
1579
|
-
startingIndex: prevIndex % verticalCols - verticalCols,
|
|
1580
|
-
amount: verticalCols,
|
|
1581
|
-
disabledIndices
|
|
1582
|
-
});
|
|
1583
|
-
}
|
|
1584
|
-
}
|
|
1585
|
-
}
|
|
1586
|
-
if (isIndexOutOfListBounds(listRef, nextIndex)) {
|
|
1587
|
-
nextIndex = prevIndex;
|
|
1588
|
-
}
|
|
1589
|
-
}
|
|
1590
|
-
|
|
1591
|
-
// Remains on the same row/column.
|
|
1592
|
-
if (orientation === 'both') {
|
|
1593
|
-
const prevRow = index_esm.floor(prevIndex / cols);
|
|
1594
|
-
if (event.key === (rtl ? clamp.ARROW_LEFT : clamp.ARROW_RIGHT)) {
|
|
1595
|
-
if (stop) {
|
|
1596
|
-
clamp.stopEvent(event);
|
|
1597
|
-
}
|
|
1598
|
-
if (prevIndex % cols !== cols - 1) {
|
|
1599
|
-
nextIndex = findNonDisabledListIndex(listRef, {
|
|
1600
|
-
startingIndex: prevIndex,
|
|
1601
|
-
disabledIndices
|
|
1602
|
-
});
|
|
1603
|
-
if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) {
|
|
1604
|
-
nextIndex = findNonDisabledListIndex(listRef, {
|
|
1605
|
-
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
1606
|
-
disabledIndices
|
|
1607
|
-
});
|
|
1608
|
-
}
|
|
1609
|
-
} else if (loopFocus) {
|
|
1610
|
-
nextIndex = findNonDisabledListIndex(listRef, {
|
|
1611
|
-
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
1612
|
-
disabledIndices
|
|
1613
|
-
});
|
|
1614
|
-
}
|
|
1615
|
-
if (isDifferentGridRow(nextIndex, cols, prevRow)) {
|
|
1616
|
-
nextIndex = prevIndex;
|
|
1617
|
-
}
|
|
1618
|
-
}
|
|
1619
|
-
if (event.key === (rtl ? clamp.ARROW_RIGHT : clamp.ARROW_LEFT)) {
|
|
1620
|
-
if (stop) {
|
|
1621
|
-
clamp.stopEvent(event);
|
|
1622
|
-
}
|
|
1623
|
-
if (prevIndex % cols !== 0) {
|
|
1624
|
-
nextIndex = findNonDisabledListIndex(listRef, {
|
|
1625
|
-
startingIndex: prevIndex,
|
|
1626
|
-
decrement: true,
|
|
1627
|
-
disabledIndices
|
|
1628
|
-
});
|
|
1629
|
-
if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) {
|
|
1630
|
-
nextIndex = findNonDisabledListIndex(listRef, {
|
|
1631
|
-
startingIndex: prevIndex + (cols - prevIndex % cols),
|
|
1632
|
-
decrement: true,
|
|
1633
|
-
disabledIndices
|
|
1634
|
-
});
|
|
1635
|
-
}
|
|
1636
|
-
} else if (loopFocus) {
|
|
1637
|
-
nextIndex = findNonDisabledListIndex(listRef, {
|
|
1638
|
-
startingIndex: prevIndex + (cols - prevIndex % cols),
|
|
1639
|
-
decrement: true,
|
|
1640
|
-
disabledIndices
|
|
1641
|
-
});
|
|
1642
|
-
}
|
|
1643
|
-
if (isDifferentGridRow(nextIndex, cols, prevRow)) {
|
|
1644
|
-
nextIndex = prevIndex;
|
|
1645
|
-
}
|
|
1646
|
-
}
|
|
1647
|
-
const lastRow = index_esm.floor(maxIndex / cols) === prevRow;
|
|
1648
|
-
if (isIndexOutOfListBounds(listRef, nextIndex)) {
|
|
1649
|
-
if (loopFocus && lastRow) {
|
|
1650
|
-
nextIndex = event.key === (rtl ? clamp.ARROW_RIGHT : clamp.ARROW_LEFT) ? maxIndex : findNonDisabledListIndex(listRef, {
|
|
1651
|
-
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
1652
|
-
disabledIndices
|
|
1653
|
-
});
|
|
1654
|
-
} else {
|
|
1655
|
-
nextIndex = prevIndex;
|
|
1656
|
-
}
|
|
1657
|
-
}
|
|
1658
|
-
}
|
|
1659
|
-
return nextIndex;
|
|
1660
|
-
}
|
|
1661
|
-
|
|
1662
|
-
/** For each cell index, gets the item index that occupies that cell */
|
|
1663
|
-
function createGridCellMap(sizes, cols, dense) {
|
|
1664
|
-
const cellMap = [];
|
|
1665
|
-
let startIndex = 0;
|
|
1666
|
-
sizes.forEach(({
|
|
1667
|
-
width,
|
|
1668
|
-
height
|
|
1669
|
-
}, index) => {
|
|
1670
|
-
if (width > cols) {
|
|
1671
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
1672
|
-
throw new Error(`[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns`);
|
|
1673
|
-
}
|
|
1674
|
-
}
|
|
1675
|
-
let itemPlaced = false;
|
|
1676
|
-
while (!itemPlaced) {
|
|
1677
|
-
const targetCells = [];
|
|
1678
|
-
for (let i = 0; i < width; i += 1) {
|
|
1679
|
-
for (let j = 0; j < height; j += 1) {
|
|
1680
|
-
targetCells.push(startIndex + i + j * cols);
|
|
1681
|
-
}
|
|
1682
|
-
}
|
|
1683
|
-
if (startIndex % cols + width <= cols && targetCells.every(cell => cellMap[cell] == null)) {
|
|
1684
|
-
targetCells.forEach(cell => {
|
|
1685
|
-
cellMap[cell] = index;
|
|
1686
|
-
});
|
|
1687
|
-
itemPlaced = true;
|
|
1688
|
-
} else {
|
|
1689
|
-
startIndex += 1;
|
|
1690
|
-
}
|
|
1691
|
-
}
|
|
1692
|
-
});
|
|
1693
|
-
|
|
1694
|
-
// convert into a non-sparse array
|
|
1695
|
-
return [...cellMap];
|
|
1696
|
-
}
|
|
1697
|
-
|
|
1698
|
-
/** Gets cell index of an item's corner or -1 when index is -1. */
|
|
1699
|
-
function getGridCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
|
|
1700
|
-
if (index === -1) {
|
|
1701
|
-
return -1;
|
|
1702
|
-
}
|
|
1703
|
-
const firstCellIndex = cellMap.indexOf(index);
|
|
1704
|
-
const sizeItem = sizes[index];
|
|
1705
|
-
switch (corner) {
|
|
1706
|
-
case 'tl':
|
|
1707
|
-
return firstCellIndex;
|
|
1708
|
-
case 'tr':
|
|
1709
|
-
if (!sizeItem) {
|
|
1710
|
-
return firstCellIndex;
|
|
1711
|
-
}
|
|
1712
|
-
return firstCellIndex + sizeItem.width - 1;
|
|
1713
|
-
case 'bl':
|
|
1714
|
-
if (!sizeItem) {
|
|
1715
|
-
return firstCellIndex;
|
|
1716
|
-
}
|
|
1717
|
-
return firstCellIndex + (sizeItem.height - 1) * cols;
|
|
1718
|
-
case 'br':
|
|
1719
|
-
return cellMap.lastIndexOf(index);
|
|
1720
|
-
default:
|
|
1721
|
-
return -1;
|
|
1722
|
-
}
|
|
1723
|
-
}
|
|
1724
|
-
|
|
1725
|
-
/** Gets all cell indices that correspond to the specified indices */
|
|
1726
|
-
function getGridCellIndices(indices, cellMap) {
|
|
1727
|
-
return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
|
|
1728
|
-
}
|
|
1729
|
-
function isListIndexDisabled(listRef, index, disabledIndices) {
|
|
1730
|
-
const isExplicitlyDisabled = typeof disabledIndices === 'function' ? disabledIndices(index) : disabledIndices?.includes(index) ?? false;
|
|
1731
|
-
if (isExplicitlyDisabled) {
|
|
1732
|
-
return true;
|
|
1733
|
-
}
|
|
1734
|
-
const element = listRef.current[index];
|
|
1735
|
-
if (!element) {
|
|
1736
|
-
return false;
|
|
1737
|
-
}
|
|
1738
|
-
if (!isElementVisible(element)) {
|
|
1739
|
-
return true;
|
|
1740
|
-
}
|
|
1741
|
-
return !disabledIndices && (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true');
|
|
1742
|
-
}
|
|
1743
|
-
function isElementVisible(element) {
|
|
1744
|
-
return floatingUi_utils_dom.getComputedStyle(element).display !== 'none';
|
|
1745
|
-
}
|
|
1746
|
-
|
|
1747
|
-
const getTabbableOptions = () => ({
|
|
1748
|
-
getShadowRoot: true,
|
|
1749
|
-
displayCheck:
|
|
1750
|
-
// JSDOM does not support the `tabbable` library. To solve this we can
|
|
1751
|
-
// check if `ResizeObserver` is a real function (not polyfilled), which
|
|
1752
|
-
// determines if the current environment is JSDOM-like.
|
|
1753
|
-
typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
|
|
1754
|
-
});
|
|
1755
|
-
function getTabbableIn(container, dir) {
|
|
1756
|
-
const list = index_esm.tabbable(container, getTabbableOptions());
|
|
1757
|
-
const len = list.length;
|
|
1758
|
-
if (len === 0) {
|
|
1759
|
-
return undefined;
|
|
1760
|
-
}
|
|
1761
|
-
const active = clamp.activeElement(clamp.ownerDocument(container));
|
|
1762
|
-
const index = list.indexOf(active);
|
|
1763
|
-
// eslint-disable-next-line no-nested-ternary
|
|
1764
|
-
const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
|
|
1765
|
-
return list[nextIndex];
|
|
1766
|
-
}
|
|
1767
|
-
function getNextTabbable(referenceElement) {
|
|
1768
|
-
return getTabbableIn(clamp.ownerDocument(referenceElement).body, 1) || referenceElement;
|
|
1769
|
-
}
|
|
1770
|
-
function getPreviousTabbable(referenceElement) {
|
|
1771
|
-
return getTabbableIn(clamp.ownerDocument(referenceElement).body, -1) || referenceElement;
|
|
1772
|
-
}
|
|
1773
|
-
function getTabbableNearElement(referenceElement, dir) {
|
|
1774
|
-
if (!referenceElement) {
|
|
1775
|
-
return null;
|
|
1776
|
-
}
|
|
1777
|
-
const list = index_esm.tabbable(clamp.ownerDocument(referenceElement).body, getTabbableOptions());
|
|
1778
|
-
const elementCount = list.length;
|
|
1779
|
-
if (elementCount === 0) {
|
|
1780
|
-
return null;
|
|
1781
|
-
}
|
|
1782
|
-
const index = list.indexOf(referenceElement);
|
|
1783
|
-
if (index === -1) {
|
|
1784
|
-
return null;
|
|
1785
|
-
}
|
|
1786
|
-
const nextIndex = (index + dir + elementCount) % elementCount;
|
|
1787
|
-
return list[nextIndex];
|
|
1788
|
-
}
|
|
1789
|
-
function getTabbableAfterElement(referenceElement) {
|
|
1790
|
-
return getTabbableNearElement(referenceElement, 1);
|
|
1791
|
-
}
|
|
1792
|
-
function getTabbableBeforeElement(referenceElement) {
|
|
1793
|
-
return getTabbableNearElement(referenceElement, -1);
|
|
1794
|
-
}
|
|
1795
|
-
function isOutsideEvent(event, container) {
|
|
1796
|
-
const containerElement = container || event.currentTarget;
|
|
1797
|
-
const relatedTarget = event.relatedTarget;
|
|
1798
|
-
return !relatedTarget || !clamp.contains(containerElement, relatedTarget);
|
|
1799
|
-
}
|
|
1800
|
-
function disableFocusInside(container) {
|
|
1801
|
-
const tabbableElements = index_esm.tabbable(container, getTabbableOptions());
|
|
1802
|
-
tabbableElements.forEach(element => {
|
|
1803
|
-
element.dataset.tabindex = element.getAttribute('tabindex') || '';
|
|
1804
|
-
element.setAttribute('tabindex', '-1');
|
|
1805
|
-
});
|
|
1806
|
-
}
|
|
1807
|
-
function enableFocusInside(container) {
|
|
1808
|
-
const elements = container.querySelectorAll('[data-tabindex]');
|
|
1809
|
-
elements.forEach(element => {
|
|
1810
|
-
const tabindex = element.dataset.tabindex;
|
|
1811
|
-
delete element.dataset.tabindex;
|
|
1812
|
-
if (tabindex) {
|
|
1813
|
-
element.setAttribute('tabindex', tabindex);
|
|
1814
|
-
} else {
|
|
1815
|
-
element.removeAttribute('tabindex');
|
|
1816
|
-
}
|
|
1817
|
-
});
|
|
1818
|
-
}
|
|
1819
|
-
|
|
1820
|
-
const TYPEAHEAD_RESET_MS = 500;
|
|
1821
|
-
const PATIENT_CLICK_THRESHOLD = 500;
|
|
1822
|
-
const DISABLED_TRANSITIONS_STYLE = {
|
|
1823
|
-
style: {
|
|
1824
|
-
transition: 'none'
|
|
1825
|
-
}
|
|
1826
|
-
};
|
|
1827
|
-
const CLICK_TRIGGER_IDENTIFIER = 'data-base-ui-click-trigger';
|
|
1828
|
-
const BASE_UI_SWIPE_IGNORE_ATTRIBUTE = 'data-base-ui-swipe-ignore';
|
|
1829
|
-
const BASE_UI_SWIPE_IGNORE_SELECTOR = `[${BASE_UI_SWIPE_IGNORE_ATTRIBUTE}]`;
|
|
1830
|
-
|
|
1831
|
-
/**
|
|
1832
|
-
* Used for dropdowns that usually strictly prefer top/bottom placements and
|
|
1833
|
-
* use `var(--available-height)` to limit their height.
|
|
1834
|
-
*/
|
|
1835
|
-
const DROPDOWN_COLLISION_AVOIDANCE = {
|
|
1836
|
-
fallbackAxisSide: 'none'
|
|
1837
|
-
};
|
|
1838
|
-
|
|
1839
|
-
/**
|
|
1840
|
-
* Used by regular popups that usually aren't scrollable and are allowed to
|
|
1841
|
-
* freely flip to any axis of placement.
|
|
1842
|
-
*/
|
|
1843
|
-
const POPUP_COLLISION_AVOIDANCE = {
|
|
1844
|
-
fallbackAxisSide: 'end'
|
|
1845
|
-
};
|
|
1846
|
-
|
|
1847
|
-
/**
|
|
1848
|
-
* Special visually hidden styles for the aria-owns owner element to ensure owned element
|
|
1849
|
-
* accessibility in iOS/Safari/VoiceControl.
|
|
1850
|
-
* The owner element is an empty span, so most of the common visually hidden styles are not needed.
|
|
1851
|
-
* @see https://github.com/floating-ui/floating-ui/issues/3403
|
|
1852
|
-
*/
|
|
1853
|
-
const ownerVisuallyHidden = {
|
|
1854
|
-
clipPath: 'inset(50%)',
|
|
1855
|
-
position: 'fixed',
|
|
1856
|
-
top: 0,
|
|
1857
|
-
left: 0
|
|
1858
|
-
};
|
|
1859
|
-
|
|
1860
|
-
const FocusGuard = /*#__PURE__*/React__namespace.forwardRef(function FocusGuard(props, ref) {
|
|
1861
|
-
const [role, setRole] = React__namespace.useState();
|
|
1862
|
-
clamp.useIsoLayoutEffect(() => {
|
|
1863
|
-
if (clamp.isSafari) {
|
|
1864
|
-
// Unlike other screen readers such as NVDA and JAWS, the virtual cursor
|
|
1865
|
-
// on VoiceOver does trigger the onFocus event, so we can use the focus
|
|
1866
|
-
// trap element. On Safari, only buttons trigger the onFocus event.
|
|
1867
|
-
setRole('button');
|
|
1868
|
-
}
|
|
1869
|
-
}, []);
|
|
1870
|
-
const restProps = {
|
|
1871
|
-
tabIndex: 0,
|
|
1872
|
-
// Role is only for VoiceOver
|
|
1873
|
-
role
|
|
1874
|
-
};
|
|
1875
|
-
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
1876
|
-
...props,
|
|
1877
|
-
ref: ref,
|
|
1878
|
-
style: clamp.visuallyHidden,
|
|
1879
|
-
"aria-hidden": role ? undefined : true,
|
|
1880
|
-
...restProps,
|
|
1881
|
-
"data-base-ui-focus-guard": ""
|
|
1882
|
-
});
|
|
1883
|
-
});
|
|
1884
|
-
if (process.env.NODE_ENV !== "production") FocusGuard.displayName = "FocusGuard";
|
|
1885
|
-
|
|
1886
|
-
function createAttribute(name) {
|
|
1887
|
-
return `data-base-ui-${name}`;
|
|
1888
|
-
}
|
|
1889
|
-
|
|
1890
|
-
let rafId = 0;
|
|
1891
|
-
function enqueueFocus(el, options = {}) {
|
|
1892
|
-
const {
|
|
1893
|
-
preventScroll = false,
|
|
1894
|
-
cancelPrevious = true,
|
|
1895
|
-
sync = false
|
|
1896
|
-
} = options;
|
|
1897
|
-
if (cancelPrevious) {
|
|
1898
|
-
cancelAnimationFrame(rafId);
|
|
1899
|
-
}
|
|
1900
|
-
const exec = () => el?.focus({
|
|
1901
|
-
preventScroll
|
|
1902
|
-
});
|
|
1903
|
-
if (sync) {
|
|
1904
|
-
exec();
|
|
1905
|
-
} else {
|
|
1906
|
-
rafId = requestAnimationFrame(exec);
|
|
1907
|
-
}
|
|
1908
|
-
}
|
|
1909
|
-
|
|
1910
|
-
// Modified to add conditional `aria-hidden` support:
|
|
1911
|
-
// https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
|
|
1912
|
-
const counters = {
|
|
1913
|
-
inert: new WeakMap(),
|
|
1914
|
-
'aria-hidden': new WeakMap()
|
|
1915
|
-
};
|
|
1916
|
-
const markerName = 'data-base-ui-inert';
|
|
1917
|
-
const uncontrolledElementsSets = {
|
|
1918
|
-
inert: new WeakSet(),
|
|
1919
|
-
'aria-hidden': new WeakSet()
|
|
1920
|
-
};
|
|
1921
|
-
let markerCounterMap = new WeakMap();
|
|
1922
|
-
let lockCount = 0;
|
|
1923
|
-
function getUncontrolledElementsSet(controlAttribute) {
|
|
1924
|
-
return uncontrolledElementsSets[controlAttribute];
|
|
1925
|
-
}
|
|
1926
|
-
function unwrapHost(node) {
|
|
1927
|
-
if (!node) {
|
|
1928
|
-
return null;
|
|
1929
|
-
}
|
|
1930
|
-
return floatingUi_utils_dom.isShadowRoot(node) ? node.host : unwrapHost(node.parentNode);
|
|
1931
|
-
}
|
|
1932
|
-
const correctElements = (parent, targets) => targets.map(target => {
|
|
1933
|
-
if (parent.contains(target)) {
|
|
1934
|
-
return target;
|
|
1935
|
-
}
|
|
1936
|
-
const correctedTarget = unwrapHost(target);
|
|
1937
|
-
if (parent.contains(correctedTarget)) {
|
|
1938
|
-
return correctedTarget;
|
|
1939
|
-
}
|
|
1940
|
-
return null;
|
|
1941
|
-
}).filter(x => x != null);
|
|
1942
|
-
const buildKeepSet = targets => {
|
|
1943
|
-
const keep = new Set();
|
|
1944
|
-
targets.forEach(target => {
|
|
1945
|
-
let node = target;
|
|
1946
|
-
while (node && !keep.has(node)) {
|
|
1947
|
-
keep.add(node);
|
|
1948
|
-
node = node.parentNode;
|
|
1949
|
-
}
|
|
1950
|
-
});
|
|
1951
|
-
return keep;
|
|
1952
|
-
};
|
|
1953
|
-
const collectOutsideElements = (root, keepElements, stopElements) => {
|
|
1954
|
-
const outside = [];
|
|
1955
|
-
const walk = parent => {
|
|
1956
|
-
if (!parent || stopElements.has(parent)) {
|
|
1957
|
-
return;
|
|
1958
|
-
}
|
|
1959
|
-
Array.from(parent.children).forEach(node => {
|
|
1960
|
-
if (floatingUi_utils_dom.getNodeName(node) === 'script') {
|
|
1961
|
-
return;
|
|
1962
|
-
}
|
|
1963
|
-
if (keepElements.has(node)) {
|
|
1964
|
-
walk(node);
|
|
1965
|
-
} else {
|
|
1966
|
-
outside.push(node);
|
|
1967
|
-
}
|
|
1968
|
-
});
|
|
1969
|
-
};
|
|
1970
|
-
walk(root);
|
|
1971
|
-
return outside;
|
|
1972
|
-
};
|
|
1973
|
-
function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert, {
|
|
1974
|
-
mark = true,
|
|
1975
|
-
markerIgnoreElements = []
|
|
1976
|
-
}) {
|
|
1977
|
-
// eslint-disable-next-line no-nested-ternary
|
|
1978
|
-
const controlAttribute = inert ? 'inert' : ariaHidden ? 'aria-hidden' : null;
|
|
1979
|
-
let counterMap = null;
|
|
1980
|
-
let uncontrolledElementsSet = null;
|
|
1981
|
-
const avoidElements = correctElements(body, uncorrectedAvoidElements);
|
|
1982
|
-
const markerIgnoreTargets = mark ? correctElements(body, markerIgnoreElements) : [];
|
|
1983
|
-
const markerIgnoreSet = new Set(markerIgnoreTargets);
|
|
1984
|
-
const markerTargets = mark ? collectOutsideElements(body, buildKeepSet(avoidElements), new Set(avoidElements)).filter(target => !markerIgnoreSet.has(target)) : [];
|
|
1985
|
-
const hiddenElements = [];
|
|
1986
|
-
const markedElements = [];
|
|
1987
|
-
if (controlAttribute) {
|
|
1988
|
-
const map = counters[controlAttribute];
|
|
1989
|
-
const currentUncontrolledElementsSet = getUncontrolledElementsSet(controlAttribute);
|
|
1990
|
-
uncontrolledElementsSet = currentUncontrolledElementsSet;
|
|
1991
|
-
counterMap = map;
|
|
1992
|
-
const ariaLiveElements = correctElements(body, Array.from(body.querySelectorAll('[aria-live]')));
|
|
1993
|
-
const controlElements = avoidElements.concat(ariaLiveElements);
|
|
1994
|
-
const controlTargets = collectOutsideElements(body, buildKeepSet(controlElements), new Set(controlElements));
|
|
1995
|
-
controlTargets.forEach(node => {
|
|
1996
|
-
const attr = node.getAttribute(controlAttribute);
|
|
1997
|
-
const alreadyHidden = attr !== null && attr !== 'false';
|
|
1998
|
-
const counterValue = (map.get(node) || 0) + 1;
|
|
1999
|
-
map.set(node, counterValue);
|
|
2000
|
-
hiddenElements.push(node);
|
|
2001
|
-
if (counterValue === 1 && alreadyHidden) {
|
|
2002
|
-
currentUncontrolledElementsSet.add(node);
|
|
2003
|
-
}
|
|
2004
|
-
if (!alreadyHidden) {
|
|
2005
|
-
node.setAttribute(controlAttribute, controlAttribute === 'inert' ? '' : 'true');
|
|
2006
|
-
}
|
|
2007
|
-
});
|
|
2008
|
-
}
|
|
2009
|
-
if (mark) {
|
|
2010
|
-
markerTargets.forEach(node => {
|
|
2011
|
-
const markerValue = (markerCounterMap.get(node) || 0) + 1;
|
|
2012
|
-
markerCounterMap.set(node, markerValue);
|
|
2013
|
-
markedElements.push(node);
|
|
2014
|
-
if (markerValue === 1) {
|
|
2015
|
-
node.setAttribute(markerName, '');
|
|
2016
|
-
}
|
|
2017
|
-
});
|
|
2018
|
-
}
|
|
2019
|
-
lockCount += 1;
|
|
2020
|
-
return () => {
|
|
2021
|
-
if (counterMap) {
|
|
2022
|
-
hiddenElements.forEach(element => {
|
|
2023
|
-
const currentCounterValue = counterMap.get(element) || 0;
|
|
2024
|
-
const counterValue = currentCounterValue - 1;
|
|
2025
|
-
counterMap.set(element, counterValue);
|
|
2026
|
-
if (!counterValue) {
|
|
2027
|
-
if (!uncontrolledElementsSet?.has(element) && controlAttribute) {
|
|
2028
|
-
element.removeAttribute(controlAttribute);
|
|
2029
|
-
}
|
|
2030
|
-
uncontrolledElementsSet?.delete(element);
|
|
2031
|
-
}
|
|
2032
|
-
});
|
|
2033
|
-
}
|
|
2034
|
-
if (mark) {
|
|
2035
|
-
markedElements.forEach(element => {
|
|
2036
|
-
const markerValue = (markerCounterMap.get(element) || 0) - 1;
|
|
2037
|
-
markerCounterMap.set(element, markerValue);
|
|
2038
|
-
if (!markerValue) {
|
|
2039
|
-
element.removeAttribute(markerName);
|
|
2040
|
-
}
|
|
2041
|
-
});
|
|
2042
|
-
}
|
|
2043
|
-
lockCount -= 1;
|
|
2044
|
-
if (!lockCount) {
|
|
2045
|
-
counters.inert = new WeakMap();
|
|
2046
|
-
counters['aria-hidden'] = new WeakMap();
|
|
2047
|
-
uncontrolledElementsSets.inert = new WeakSet();
|
|
2048
|
-
uncontrolledElementsSets['aria-hidden'] = new WeakSet();
|
|
2049
|
-
markerCounterMap = new WeakMap();
|
|
2050
|
-
}
|
|
2051
|
-
};
|
|
2052
|
-
}
|
|
2053
|
-
function markOthers(avoidElements, options = {}) {
|
|
2054
|
-
const {
|
|
2055
|
-
ariaHidden = false,
|
|
2056
|
-
inert = false,
|
|
2057
|
-
mark = true,
|
|
2058
|
-
markerIgnoreElements = []
|
|
2059
|
-
} = options;
|
|
2060
|
-
const body = clamp.ownerDocument(avoidElements[0]).body;
|
|
2061
|
-
return applyAttributeToOthers(avoidElements, body, ariaHidden, inert, {
|
|
2062
|
-
mark,
|
|
2063
|
-
markerIgnoreElements
|
|
2064
|
-
});
|
|
2065
|
-
}
|
|
2066
|
-
|
|
2067
|
-
const PortalContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
2068
|
-
if (process.env.NODE_ENV !== "production") PortalContext.displayName = "PortalContext";
|
|
2069
|
-
const usePortalContext = () => React__namespace.useContext(PortalContext);
|
|
2070
|
-
const attr = createAttribute('portal');
|
|
2071
|
-
function useFloatingPortalNode(props = {}) {
|
|
2072
|
-
const {
|
|
2073
|
-
ref,
|
|
2074
|
-
container: containerProp,
|
|
2075
|
-
componentProps = useRenderElement.EMPTY_OBJECT,
|
|
2076
|
-
elementProps
|
|
2077
|
-
} = props;
|
|
2078
|
-
const uniqueId = clamp.useId();
|
|
2079
|
-
const portalContext = usePortalContext();
|
|
2080
|
-
const parentPortalNode = portalContext?.portalNode;
|
|
2081
|
-
const [containerElement, setContainerElement] = React__namespace.useState(null);
|
|
2082
|
-
const [portalNode, setPortalNode] = React__namespace.useState(null);
|
|
2083
|
-
const setPortalNodeRef = clamp.useStableCallback(node => {
|
|
2084
|
-
if (node !== null) {
|
|
2085
|
-
// the useIsoLayoutEffect below watching containerProp / parentPortalNode
|
|
2086
|
-
// sets setPortalNode(null) when the container becomes null or changes.
|
|
2087
|
-
// So even though the ref callback now ignores null, the portal node still gets cleared.
|
|
2088
|
-
setPortalNode(node);
|
|
2089
|
-
}
|
|
2090
|
-
});
|
|
2091
|
-
const containerRef = React__namespace.useRef(null);
|
|
2092
|
-
clamp.useIsoLayoutEffect(() => {
|
|
2093
|
-
// Wait for the container to be resolved if explicitly `null`.
|
|
2094
|
-
if (containerProp === null) {
|
|
2095
|
-
if (containerRef.current) {
|
|
2096
|
-
containerRef.current = null;
|
|
2097
|
-
setPortalNode(null);
|
|
2098
|
-
setContainerElement(null);
|
|
2099
|
-
}
|
|
2100
|
-
return;
|
|
2101
|
-
}
|
|
2102
|
-
|
|
2103
|
-
// React 17 does not use React.useId().
|
|
2104
|
-
if (uniqueId == null) {
|
|
2105
|
-
return;
|
|
2106
|
-
}
|
|
2107
|
-
const resolvedContainer = (containerProp && (floatingUi_utils_dom.isNode(containerProp) ? containerProp : containerProp.current)) ?? parentPortalNode ?? document.body;
|
|
2108
|
-
if (resolvedContainer == null) {
|
|
2109
|
-
if (containerRef.current) {
|
|
2110
|
-
containerRef.current = null;
|
|
2111
|
-
setPortalNode(null);
|
|
2112
|
-
setContainerElement(null);
|
|
2113
|
-
}
|
|
2114
|
-
return;
|
|
2115
|
-
}
|
|
2116
|
-
if (containerRef.current !== resolvedContainer) {
|
|
2117
|
-
containerRef.current = resolvedContainer;
|
|
2118
|
-
setPortalNode(null);
|
|
2119
|
-
setContainerElement(resolvedContainer);
|
|
2120
|
-
}
|
|
2121
|
-
}, [containerProp, parentPortalNode, uniqueId]);
|
|
2122
|
-
const portalElement = useRenderElement.useRenderElement('div', componentProps, {
|
|
2123
|
-
ref: [ref, setPortalNodeRef],
|
|
2124
|
-
props: [{
|
|
2125
|
-
id: uniqueId,
|
|
2126
|
-
[attr]: ''
|
|
2127
|
-
}, elementProps]
|
|
2128
|
-
});
|
|
2129
|
-
|
|
2130
|
-
// This `createPortal` call injects `portalElement` into the `container`.
|
|
2131
|
-
// Another call inside `FloatingPortal`/`FloatingPortalLite` then injects the children into `portalElement`.
|
|
2132
|
-
const portalSubtree = containerElement && portalElement ? /*#__PURE__*/ReactDOM__namespace.createPortal(portalElement, containerElement) : null;
|
|
2133
|
-
return {
|
|
2134
|
-
portalNode,
|
|
2135
|
-
portalSubtree
|
|
2136
|
-
};
|
|
2137
|
-
}
|
|
2138
|
-
|
|
2139
|
-
/**
|
|
2140
|
-
* Portals the floating element into a given container element — by default,
|
|
2141
|
-
* outside of the app root and into the body.
|
|
2142
|
-
* This is necessary to ensure the floating element can appear outside any
|
|
2143
|
-
* potential parent containers that cause clipping (such as `overflow: hidden`),
|
|
2144
|
-
* while retaining its location in the React tree.
|
|
2145
|
-
* @see https://floating-ui.com/docs/FloatingPortal
|
|
2146
|
-
* @internal
|
|
2147
|
-
*/
|
|
2148
|
-
const FloatingPortal = /*#__PURE__*/React__namespace.forwardRef(function FloatingPortal(componentProps, forwardedRef) {
|
|
2149
|
-
const {
|
|
2150
|
-
children,
|
|
2151
|
-
container,
|
|
2152
|
-
className,
|
|
2153
|
-
render,
|
|
2154
|
-
renderGuards,
|
|
2155
|
-
...elementProps
|
|
2156
|
-
} = componentProps;
|
|
2157
|
-
const {
|
|
2158
|
-
portalNode,
|
|
2159
|
-
portalSubtree
|
|
2160
|
-
} = useFloatingPortalNode({
|
|
2161
|
-
container,
|
|
2162
|
-
ref: forwardedRef,
|
|
2163
|
-
componentProps,
|
|
2164
|
-
elementProps
|
|
2165
|
-
});
|
|
2166
|
-
const beforeOutsideRef = React__namespace.useRef(null);
|
|
2167
|
-
const afterOutsideRef = React__namespace.useRef(null);
|
|
2168
|
-
const beforeInsideRef = React__namespace.useRef(null);
|
|
2169
|
-
const afterInsideRef = React__namespace.useRef(null);
|
|
2170
|
-
const [focusManagerState, setFocusManagerState] = React__namespace.useState(null);
|
|
2171
|
-
const modal = focusManagerState?.modal;
|
|
2172
|
-
const open = focusManagerState?.open;
|
|
2173
|
-
const shouldRenderGuards = typeof renderGuards === 'boolean' ? renderGuards : !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
|
|
2174
|
-
|
|
2175
|
-
// https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
|
|
2176
|
-
React__namespace.useEffect(() => {
|
|
2177
|
-
if (!portalNode || modal) {
|
|
2178
|
-
return undefined;
|
|
2179
|
-
}
|
|
2180
|
-
|
|
2181
|
-
// Make sure elements inside the portal element are tabbable only when the
|
|
2182
|
-
// portal has already been focused, either by tabbing into a focus trap
|
|
2183
|
-
// element outside or using the mouse.
|
|
2184
|
-
function onFocus(event) {
|
|
2185
|
-
if (portalNode && event.relatedTarget && isOutsideEvent(event)) {
|
|
2186
|
-
const focusing = event.type === 'focusin';
|
|
2187
|
-
const manageFocus = focusing ? enableFocusInside : disableFocusInside;
|
|
2188
|
-
manageFocus(portalNode);
|
|
2189
|
-
}
|
|
2190
|
-
}
|
|
2191
|
-
|
|
2192
|
-
// Listen to the event on the capture phase so they run before the focus
|
|
2193
|
-
// trap elements onFocus prop is called.
|
|
2194
|
-
portalNode.addEventListener('focusin', onFocus, true);
|
|
2195
|
-
portalNode.addEventListener('focusout', onFocus, true);
|
|
2196
|
-
return () => {
|
|
2197
|
-
portalNode.removeEventListener('focusin', onFocus, true);
|
|
2198
|
-
portalNode.removeEventListener('focusout', onFocus, true);
|
|
2199
|
-
};
|
|
2200
|
-
}, [portalNode, modal]);
|
|
2201
|
-
React__namespace.useEffect(() => {
|
|
2202
|
-
if (!portalNode || open) {
|
|
2203
|
-
return;
|
|
2204
|
-
}
|
|
2205
|
-
enableFocusInside(portalNode);
|
|
2206
|
-
}, [open, portalNode]);
|
|
2207
|
-
const portalContextValue = React__namespace.useMemo(() => ({
|
|
2208
|
-
beforeOutsideRef,
|
|
2209
|
-
afterOutsideRef,
|
|
2210
|
-
beforeInsideRef,
|
|
2211
|
-
afterInsideRef,
|
|
2212
|
-
portalNode,
|
|
2213
|
-
setFocusManagerState
|
|
2214
|
-
}), [portalNode]);
|
|
2215
|
-
return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
|
|
2216
|
-
children: [portalSubtree, /*#__PURE__*/jsxRuntime.jsxs(PortalContext.Provider, {
|
|
2217
|
-
value: portalContextValue,
|
|
2218
|
-
children: [shouldRenderGuards && portalNode && /*#__PURE__*/jsxRuntime.jsx(FocusGuard, {
|
|
2219
|
-
"data-type": "outside",
|
|
2220
|
-
ref: beforeOutsideRef,
|
|
2221
|
-
onFocus: event => {
|
|
2222
|
-
if (isOutsideEvent(event, portalNode)) {
|
|
2223
|
-
beforeInsideRef.current?.focus();
|
|
2224
|
-
} else {
|
|
2225
|
-
const domReference = focusManagerState ? focusManagerState.domReference : null;
|
|
2226
|
-
const prevTabbable = getPreviousTabbable(domReference);
|
|
2227
|
-
prevTabbable?.focus();
|
|
2228
|
-
}
|
|
2229
|
-
}
|
|
2230
|
-
}), shouldRenderGuards && portalNode && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2231
|
-
"aria-owns": portalNode.id,
|
|
2232
|
-
style: ownerVisuallyHidden
|
|
2233
|
-
}), portalNode && /*#__PURE__*/ReactDOM__namespace.createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/jsxRuntime.jsx(FocusGuard, {
|
|
2234
|
-
"data-type": "outside",
|
|
2235
|
-
ref: afterOutsideRef,
|
|
2236
|
-
onFocus: event => {
|
|
2237
|
-
if (isOutsideEvent(event, portalNode)) {
|
|
2238
|
-
afterInsideRef.current?.focus();
|
|
2239
|
-
} else {
|
|
2240
|
-
const domReference = focusManagerState ? focusManagerState.domReference : null;
|
|
2241
|
-
const nextTabbable = getNextTabbable(domReference);
|
|
2242
|
-
nextTabbable?.focus();
|
|
2243
|
-
if (focusManagerState?.closeOnFocusOut) {
|
|
2244
|
-
focusManagerState?.onOpenChange(false, clamp.createChangeEventDetails(clamp.focusOut, event.nativeEvent));
|
|
2245
|
-
}
|
|
2246
|
-
}
|
|
2247
|
-
}
|
|
2248
|
-
})]
|
|
2249
|
-
})]
|
|
2250
|
-
});
|
|
2251
|
-
});
|
|
2252
|
-
if (process.env.NODE_ENV !== "production") FloatingPortal.displayName = "FloatingPortal";
|
|
2253
|
-
|
|
2254
|
-
function createEventEmitter() {
|
|
2255
|
-
const map = new Map();
|
|
2256
|
-
return {
|
|
2257
|
-
emit(event, data) {
|
|
2258
|
-
map.get(event)?.forEach(listener => listener(data));
|
|
2259
|
-
},
|
|
2260
|
-
on(event, listener) {
|
|
2261
|
-
if (!map.has(event)) {
|
|
2262
|
-
map.set(event, new Set());
|
|
2263
|
-
}
|
|
2264
|
-
map.get(event).add(listener);
|
|
2265
|
-
},
|
|
2266
|
-
off(event, listener) {
|
|
2267
|
-
map.get(event)?.delete(listener);
|
|
2268
|
-
}
|
|
2269
|
-
};
|
|
2270
|
-
}
|
|
2271
|
-
|
|
2272
|
-
/**
|
|
2273
|
-
* Stores and manages floating elements in a tree structure.
|
|
2274
|
-
* This is a backing store for the `FloatingTree` component.
|
|
2275
|
-
*/
|
|
2276
|
-
class FloatingTreeStore {
|
|
2277
|
-
nodesRef = {
|
|
2278
|
-
current: []
|
|
2279
|
-
};
|
|
2280
|
-
events = createEventEmitter();
|
|
2281
|
-
addNode(node) {
|
|
2282
|
-
this.nodesRef.current.push(node);
|
|
2283
|
-
}
|
|
2284
|
-
removeNode(node) {
|
|
2285
|
-
const index = this.nodesRef.current.findIndex(n => n === node);
|
|
2286
|
-
if (index !== -1) {
|
|
2287
|
-
this.nodesRef.current.splice(index, 1);
|
|
2288
|
-
}
|
|
2289
|
-
}
|
|
2290
|
-
}
|
|
2291
|
-
|
|
2292
|
-
const FloatingNodeContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
2293
|
-
if (process.env.NODE_ENV !== "production") FloatingNodeContext.displayName = "FloatingNodeContext";
|
|
2294
|
-
const FloatingTreeContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
2295
|
-
|
|
2296
|
-
/**
|
|
2297
|
-
* Returns the parent node id for nested floating elements, if available.
|
|
2298
|
-
* Returns `null` for top-level floating elements.
|
|
2299
|
-
*/
|
|
2300
|
-
if (process.env.NODE_ENV !== "production") FloatingTreeContext.displayName = "FloatingTreeContext";
|
|
2301
|
-
const useFloatingParentNodeId = () => React__namespace.useContext(FloatingNodeContext)?.id || null;
|
|
2302
|
-
|
|
2303
|
-
/**
|
|
2304
|
-
* Returns the nearest floating tree context, if available.
|
|
2305
|
-
*/
|
|
2306
|
-
const useFloatingTree = externalTree => {
|
|
2307
|
-
const contextTree = React__namespace.useContext(FloatingTreeContext);
|
|
2308
|
-
return externalTree ?? contextTree;
|
|
2309
|
-
};
|
|
2310
|
-
|
|
2311
|
-
/**
|
|
2312
|
-
* Registers a node into the `FloatingTree`, returning its id.
|
|
2313
|
-
* @see https://floating-ui.com/docs/FloatingTree
|
|
2314
|
-
*/
|
|
2315
|
-
function useFloatingNodeId(externalTree) {
|
|
2316
|
-
const id = clamp.useId();
|
|
2317
|
-
const tree = useFloatingTree(externalTree);
|
|
2318
|
-
const parentId = useFloatingParentNodeId();
|
|
2319
|
-
clamp.useIsoLayoutEffect(() => {
|
|
2320
|
-
if (!id) {
|
|
2321
|
-
return undefined;
|
|
2322
|
-
}
|
|
2323
|
-
const node = {
|
|
2324
|
-
id,
|
|
2325
|
-
parentId
|
|
2326
|
-
};
|
|
2327
|
-
tree?.addNode(node);
|
|
2328
|
-
return () => {
|
|
2329
|
-
tree?.removeNode(node);
|
|
2330
|
-
};
|
|
2331
|
-
}, [tree, id, parentId]);
|
|
2332
|
-
return id;
|
|
2333
|
-
}
|
|
2334
|
-
/**
|
|
2335
|
-
* Provides parent node context for nested floating elements.
|
|
2336
|
-
* @see https://floating-ui.com/docs/FloatingTree
|
|
2337
|
-
* @internal
|
|
2338
|
-
*/
|
|
2339
|
-
function FloatingNode(props) {
|
|
2340
|
-
const {
|
|
2341
|
-
children,
|
|
2342
|
-
id
|
|
2343
|
-
} = props;
|
|
2344
|
-
const parentId = useFloatingParentNodeId();
|
|
2345
|
-
return /*#__PURE__*/jsxRuntime.jsx(FloatingNodeContext.Provider, {
|
|
2346
|
-
value: React__namespace.useMemo(() => ({
|
|
2347
|
-
id,
|
|
2348
|
-
parentId
|
|
2349
|
-
}), [id, parentId]),
|
|
2350
|
-
children: children
|
|
2351
|
-
});
|
|
2352
|
-
}
|
|
2353
|
-
/**
|
|
2354
|
-
* Provides context for nested floating elements when they are not children of
|
|
2355
|
-
* each other on the DOM.
|
|
2356
|
-
* This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
|
|
2357
|
-
* - The `bubbles` option in the `useDismiss()` Hook
|
|
2358
|
-
* - Nested virtual list navigation
|
|
2359
|
-
* - Nested floating elements that each open on hover
|
|
2360
|
-
* - Custom communication between parent and child floating elements
|
|
2361
|
-
* @see https://floating-ui.com/docs/FloatingTree
|
|
2362
|
-
* @internal
|
|
2363
|
-
*/
|
|
2364
|
-
function FloatingTree(props) {
|
|
2365
|
-
const {
|
|
2366
|
-
children,
|
|
2367
|
-
externalTree
|
|
2368
|
-
} = props;
|
|
2369
|
-
const tree = useRenderElement.useRefWithInit(() => externalTree ?? new FloatingTreeStore()).current;
|
|
2370
|
-
return /*#__PURE__*/jsxRuntime.jsx(FloatingTreeContext.Provider, {
|
|
2371
|
-
value: tree,
|
|
2372
|
-
children: children
|
|
2373
|
-
});
|
|
2374
|
-
}
|
|
2375
|
-
|
|
2376
|
-
function getEventType(event, lastInteractionType) {
|
|
2377
|
-
const win = floatingUi_utils_dom.getWindow(event.target);
|
|
2378
|
-
if (event instanceof win.KeyboardEvent) {
|
|
2379
|
-
return 'keyboard';
|
|
2380
|
-
}
|
|
2381
|
-
if (event instanceof win.FocusEvent) {
|
|
2382
|
-
// Focus events can be caused by a preceding pointer interaction (e.g., focusout on outside press).
|
|
2383
|
-
// Prefer the last known pointer type if provided, else treat as keyboard.
|
|
2384
|
-
return lastInteractionType || 'keyboard';
|
|
2385
|
-
}
|
|
2386
|
-
if ('pointerType' in event) {
|
|
2387
|
-
return event.pointerType || 'keyboard';
|
|
2388
|
-
}
|
|
2389
|
-
if ('touches' in event) {
|
|
2390
|
-
return 'touch';
|
|
2391
|
-
}
|
|
2392
|
-
if (event instanceof win.MouseEvent) {
|
|
2393
|
-
// onClick events may not contain pointer events, and will fall through to here
|
|
2394
|
-
return lastInteractionType || (event.detail === 0 ? 'keyboard' : 'mouse');
|
|
2395
|
-
}
|
|
2396
|
-
return '';
|
|
2397
|
-
}
|
|
2398
|
-
const LIST_LIMIT = 20;
|
|
2399
|
-
let previouslyFocusedElements = [];
|
|
2400
|
-
function clearDisconnectedPreviouslyFocusedElements() {
|
|
2401
|
-
previouslyFocusedElements = previouslyFocusedElements.filter(entry => {
|
|
2402
|
-
return entry.deref()?.isConnected;
|
|
2403
|
-
});
|
|
2404
|
-
}
|
|
2405
|
-
function addPreviouslyFocusedElement(element) {
|
|
2406
|
-
clearDisconnectedPreviouslyFocusedElements();
|
|
2407
|
-
if (element && floatingUi_utils_dom.getNodeName(element) !== 'body') {
|
|
2408
|
-
previouslyFocusedElements.push(new WeakRef(element));
|
|
2409
|
-
if (previouslyFocusedElements.length > LIST_LIMIT) {
|
|
2410
|
-
previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
|
|
2411
|
-
}
|
|
2412
|
-
}
|
|
2413
|
-
}
|
|
2414
|
-
function getPreviouslyFocusedElement() {
|
|
2415
|
-
clearDisconnectedPreviouslyFocusedElements();
|
|
2416
|
-
return previouslyFocusedElements[previouslyFocusedElements.length - 1]?.deref();
|
|
2417
|
-
}
|
|
2418
|
-
function getFirstTabbableElement(container) {
|
|
2419
|
-
if (!container) {
|
|
2420
|
-
return null;
|
|
2421
|
-
}
|
|
2422
|
-
const tabbableOptions = getTabbableOptions();
|
|
2423
|
-
if (index_esm.isTabbable(container, tabbableOptions)) {
|
|
2424
|
-
return container;
|
|
2425
|
-
}
|
|
2426
|
-
return index_esm.tabbable(container, tabbableOptions)[0] || container;
|
|
2427
|
-
}
|
|
2428
|
-
function isFocusable(element) {
|
|
2429
|
-
if (!element || !element.isConnected) {
|
|
2430
|
-
return false;
|
|
2431
|
-
}
|
|
2432
|
-
if (typeof element.checkVisibility === 'function') {
|
|
2433
|
-
return element.checkVisibility();
|
|
2434
|
-
}
|
|
2435
|
-
return isElementVisible(element);
|
|
2436
|
-
}
|
|
2437
|
-
function handleTabIndex(floatingFocusElement, orderRef) {
|
|
2438
|
-
if (!orderRef.current.includes('floating') && !floatingFocusElement.getAttribute('role')?.includes('dialog')) {
|
|
2439
|
-
return;
|
|
2440
|
-
}
|
|
2441
|
-
const options = getTabbableOptions();
|
|
2442
|
-
const focusableElements = index_esm.focusable(floatingFocusElement, options);
|
|
2443
|
-
const tabbableContent = focusableElements.filter(element => {
|
|
2444
|
-
const dataTabIndex = element.getAttribute('data-tabindex') || '';
|
|
2445
|
-
return index_esm.isTabbable(element, options) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
|
|
2446
|
-
});
|
|
2447
|
-
const tabIndex = floatingFocusElement.getAttribute('tabindex');
|
|
2448
|
-
if (orderRef.current.includes('floating') || tabbableContent.length === 0) {
|
|
2449
|
-
if (tabIndex !== '0') {
|
|
2450
|
-
floatingFocusElement.setAttribute('tabindex', '0');
|
|
2451
|
-
}
|
|
2452
|
-
} else if (tabIndex !== '-1' || floatingFocusElement.hasAttribute('data-tabindex') && floatingFocusElement.getAttribute('data-tabindex') !== '-1') {
|
|
2453
|
-
floatingFocusElement.setAttribute('tabindex', '-1');
|
|
2454
|
-
floatingFocusElement.setAttribute('data-tabindex', '-1');
|
|
2455
|
-
}
|
|
2456
|
-
}
|
|
2457
|
-
/**
|
|
2458
|
-
* Provides focus management for the floating element.
|
|
2459
|
-
* @see https://floating-ui.com/docs/FloatingFocusManager
|
|
2460
|
-
* @internal
|
|
2461
|
-
*/
|
|
2462
|
-
function FloatingFocusManager(props) {
|
|
2463
|
-
const {
|
|
2464
|
-
context,
|
|
2465
|
-
children,
|
|
2466
|
-
disabled = false,
|
|
2467
|
-
initialFocus = true,
|
|
2468
|
-
returnFocus = true,
|
|
2469
|
-
restoreFocus = false,
|
|
2470
|
-
modal = true,
|
|
2471
|
-
closeOnFocusOut = true,
|
|
2472
|
-
openInteractionType = '',
|
|
2473
|
-
nextFocusableElement,
|
|
2474
|
-
previousFocusableElement,
|
|
2475
|
-
beforeContentFocusGuardRef,
|
|
2476
|
-
externalTree,
|
|
2477
|
-
getInsideElements
|
|
2478
|
-
} = props;
|
|
2479
|
-
const store = 'rootStore' in context ? context.rootStore : context;
|
|
2480
|
-
const open = store.useState('open');
|
|
2481
|
-
const domReference = store.useState('domReferenceElement');
|
|
2482
|
-
const floating = store.useState('floatingElement');
|
|
2483
|
-
const {
|
|
2484
|
-
events,
|
|
2485
|
-
dataRef
|
|
2486
|
-
} = store.context;
|
|
2487
|
-
const getNodeId = clamp.useStableCallback(() => dataRef.current.floatingContext?.nodeId);
|
|
2488
|
-
const ignoreInitialFocus = initialFocus === false;
|
|
2489
|
-
// If the reference is a combobox and is typeable (e.g. input/textarea),
|
|
2490
|
-
// there are different focus semantics. The guards should not be rendered, but
|
|
2491
|
-
// aria-hidden should be applied to all nodes still. Further, the visually
|
|
2492
|
-
// hidden dismiss button should only appear at the end of the list, not the
|
|
2493
|
-
// start.
|
|
2494
|
-
const isUntrappedTypeableCombobox = clamp.isTypeableCombobox(domReference) && ignoreInitialFocus;
|
|
2495
|
-
const orderRef = React__namespace.useRef(['content']);
|
|
2496
|
-
const initialFocusRef = clamp.useValueAsRef(initialFocus);
|
|
2497
|
-
const returnFocusRef = clamp.useValueAsRef(returnFocus);
|
|
2498
|
-
const openInteractionTypeRef = clamp.useValueAsRef(openInteractionType);
|
|
2499
|
-
const tree = useFloatingTree(externalTree);
|
|
2500
|
-
const portalContext = usePortalContext();
|
|
2501
|
-
const preventReturnFocusRef = React__namespace.useRef(false);
|
|
2502
|
-
const isPointerDownRef = React__namespace.useRef(false);
|
|
2503
|
-
const pointerDownOutsideRef = React__namespace.useRef(false);
|
|
2504
|
-
const tabbableIndexRef = React__namespace.useRef(-1);
|
|
2505
|
-
const closeTypeRef = React__namespace.useRef('');
|
|
2506
|
-
const lastInteractionTypeRef = React__namespace.useRef('');
|
|
2507
|
-
const beforeGuardRef = React__namespace.useRef(null);
|
|
2508
|
-
const afterGuardRef = React__namespace.useRef(null);
|
|
2509
|
-
const mergedBeforeGuardRef = useRenderElement.useMergedRefs(beforeGuardRef, beforeContentFocusGuardRef, portalContext?.beforeInsideRef);
|
|
2510
|
-
const mergedAfterGuardRef = useRenderElement.useMergedRefs(afterGuardRef, portalContext?.afterInsideRef);
|
|
2511
|
-
const blurTimeout = clamp.useTimeout();
|
|
2512
|
-
const pointerDownTimeout = clamp.useTimeout();
|
|
2513
|
-
const restoreFocusFrame = clamp.useAnimationFrame();
|
|
2514
|
-
const isInsidePortal = portalContext != null;
|
|
2515
|
-
const floatingFocusElement = clamp.getFloatingFocusElement(floating);
|
|
2516
|
-
const getTabbableContent = clamp.useStableCallback((container = floatingFocusElement) => {
|
|
2517
|
-
return container ? index_esm.tabbable(container, getTabbableOptions()) : [];
|
|
2518
|
-
});
|
|
2519
|
-
const getResolvedInsideElements = clamp.useStableCallback(() => getInsideElements?.().filter(element => element != null) ?? []);
|
|
2520
|
-
const getTabbableElements = clamp.useStableCallback(container => {
|
|
2521
|
-
const content = getTabbableContent(container);
|
|
2522
|
-
return orderRef.current.map(() => content).filter(Boolean).flat();
|
|
2523
|
-
});
|
|
2524
|
-
|
|
2525
|
-
// Prevent Tab from escaping the modal when there are no tabbable elements.
|
|
2526
|
-
React__namespace.useEffect(() => {
|
|
2527
|
-
if (disabled || !modal) {
|
|
2528
|
-
return undefined;
|
|
2529
|
-
}
|
|
2530
|
-
function onKeyDown(event) {
|
|
2531
|
-
if (event.key === 'Tab') {
|
|
2532
|
-
// The focus guards have nothing to focus, so we need to stop the event.
|
|
2533
|
-
if (clamp.contains(floatingFocusElement, clamp.activeElement(clamp.ownerDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
|
|
2534
|
-
clamp.stopEvent(event);
|
|
2535
|
-
}
|
|
2536
|
-
}
|
|
2537
|
-
}
|
|
2538
|
-
const doc = clamp.ownerDocument(floatingFocusElement);
|
|
2539
|
-
doc.addEventListener('keydown', onKeyDown);
|
|
2540
|
-
return () => {
|
|
2541
|
-
doc.removeEventListener('keydown', onKeyDown);
|
|
2542
|
-
};
|
|
2543
|
-
}, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
|
|
2544
|
-
|
|
2545
|
-
// Track pointer/keyboard interactions to disambiguate focus and outside presses.
|
|
2546
|
-
React__namespace.useEffect(() => {
|
|
2547
|
-
if (disabled || !open) {
|
|
2548
|
-
return undefined;
|
|
2549
|
-
}
|
|
2550
|
-
const doc = clamp.ownerDocument(floatingFocusElement);
|
|
2551
|
-
function clearPointerDownOutside() {
|
|
2552
|
-
pointerDownOutsideRef.current = false;
|
|
2553
|
-
}
|
|
2554
|
-
function onPointerDown(event) {
|
|
2555
|
-
const target = clamp.getTarget(event);
|
|
2556
|
-
const insideElements = getResolvedInsideElements();
|
|
2557
|
-
const pointerTargetInside = clamp.contains(floating, target) || clamp.contains(domReference, target) || clamp.contains(portalContext?.portalNode, target) || insideElements.some(element => element === target || clamp.contains(element, target));
|
|
2558
|
-
pointerDownOutsideRef.current = !pointerTargetInside;
|
|
2559
|
-
lastInteractionTypeRef.current = event.pointerType || 'keyboard';
|
|
2560
|
-
if (target?.closest(`[${CLICK_TRIGGER_IDENTIFIER}]`)) {
|
|
2561
|
-
isPointerDownRef.current = true;
|
|
2562
|
-
}
|
|
2563
|
-
}
|
|
2564
|
-
function onKeyDown() {
|
|
2565
|
-
lastInteractionTypeRef.current = 'keyboard';
|
|
2566
|
-
}
|
|
2567
|
-
doc.addEventListener('pointerdown', onPointerDown, true);
|
|
2568
|
-
doc.addEventListener('pointerup', clearPointerDownOutside, true);
|
|
2569
|
-
doc.addEventListener('pointercancel', clearPointerDownOutside, true);
|
|
2570
|
-
doc.addEventListener('keydown', onKeyDown, true);
|
|
2571
|
-
return () => {
|
|
2572
|
-
doc.removeEventListener('pointerdown', onPointerDown, true);
|
|
2573
|
-
doc.removeEventListener('pointerup', clearPointerDownOutside, true);
|
|
2574
|
-
doc.removeEventListener('pointercancel', clearPointerDownOutside, true);
|
|
2575
|
-
doc.removeEventListener('keydown', onKeyDown, true);
|
|
2576
|
-
};
|
|
2577
|
-
}, [disabled, floating, domReference, floatingFocusElement, open, portalContext, getResolvedInsideElements]);
|
|
2578
|
-
|
|
2579
|
-
// Close on focus out and restore focus within the floating tree when needed.
|
|
2580
|
-
React__namespace.useEffect(() => {
|
|
2581
|
-
if (disabled || !closeOnFocusOut) {
|
|
2582
|
-
return undefined;
|
|
2583
|
-
}
|
|
2584
|
-
const doc = clamp.ownerDocument(floatingFocusElement);
|
|
2585
|
-
|
|
2586
|
-
// In Safari, buttons lose focus when pressing them.
|
|
2587
|
-
function handlePointerDown() {
|
|
2588
|
-
isPointerDownRef.current = true;
|
|
2589
|
-
pointerDownTimeout.start(0, () => {
|
|
2590
|
-
isPointerDownRef.current = false;
|
|
2591
|
-
});
|
|
2592
|
-
}
|
|
2593
|
-
function handleFocusIn(event) {
|
|
2594
|
-
const target = clamp.getTarget(event);
|
|
2595
|
-
const tabbableContent = getTabbableContent();
|
|
2596
|
-
const tabbableIndex = tabbableContent.indexOf(target);
|
|
2597
|
-
if (tabbableIndex !== -1) {
|
|
2598
|
-
tabbableIndexRef.current = tabbableIndex;
|
|
2599
|
-
}
|
|
2600
|
-
}
|
|
2601
|
-
function handleFocusOutside(event) {
|
|
2602
|
-
const relatedTarget = event.relatedTarget;
|
|
2603
|
-
const currentTarget = event.currentTarget;
|
|
2604
|
-
const target = clamp.getTarget(event);
|
|
2605
|
-
queueMicrotask(() => {
|
|
2606
|
-
const nodeId = getNodeId();
|
|
2607
|
-
const triggers = store.context.triggerElements;
|
|
2608
|
-
const insideElements = getResolvedInsideElements();
|
|
2609
|
-
const isRelatedFocusGuard = relatedTarget?.hasAttribute(createAttribute('focus-guard')) && [beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeInsideRef.current, portalContext?.afterInsideRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, clamp.resolveRef(previousFocusableElement), clamp.resolveRef(nextFocusableElement)].includes(relatedTarget);
|
|
2610
|
-
const movedToUnrelatedNode = !(clamp.contains(domReference, relatedTarget) || clamp.contains(floating, relatedTarget) || clamp.contains(relatedTarget, floating) || clamp.contains(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || clamp.contains(element, relatedTarget)) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => clamp.contains(trigger, relatedTarget)) || isRelatedFocusGuard || tree && (getNodeChildren(tree.nodesRef.current, nodeId).find(node => clamp.contains(node.context?.elements.floating, relatedTarget) || clamp.contains(node.context?.elements.domReference, relatedTarget)) || getNodeAncestors(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, clamp.getFloatingFocusElement(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
|
|
2611
|
-
if (currentTarget === domReference && floatingFocusElement) {
|
|
2612
|
-
handleTabIndex(floatingFocusElement, orderRef);
|
|
2613
|
-
}
|
|
2614
|
-
|
|
2615
|
-
// Restore focus to the previous tabbable element index to prevent
|
|
2616
|
-
// focus from being lost outside the floating tree.
|
|
2617
|
-
if (restoreFocus && currentTarget !== domReference && !isFocusable(target) && clamp.activeElement(doc) === doc.body) {
|
|
2618
|
-
// Let `FloatingPortal` effect knows that focus is still inside the
|
|
2619
|
-
// floating tree.
|
|
2620
|
-
if (floatingUi_utils_dom.isHTMLElement(floatingFocusElement)) {
|
|
2621
|
-
floatingFocusElement.focus();
|
|
2622
|
-
// If explicitly requested to restore focus to the popup container, do not search
|
|
2623
|
-
// for the next/previous tabbable element.
|
|
2624
|
-
if (restoreFocus === 'popup') {
|
|
2625
|
-
// If the element is removed on pointerdown, focus tries to move it,
|
|
2626
|
-
// but since it's removed at the same time, focus gets lost as it
|
|
2627
|
-
// happens after the .focus() call above.
|
|
2628
|
-
// In this case, focus needs to be moved asynchronously.
|
|
2629
|
-
restoreFocusFrame.request(() => {
|
|
2630
|
-
floatingFocusElement.focus();
|
|
2631
|
-
});
|
|
2632
|
-
return;
|
|
2633
|
-
}
|
|
2634
|
-
}
|
|
2635
|
-
const prevTabbableIndex = tabbableIndexRef.current;
|
|
2636
|
-
const tabbableContent = getTabbableContent();
|
|
2637
|
-
const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
|
|
2638
|
-
if (floatingUi_utils_dom.isHTMLElement(nodeToFocus)) {
|
|
2639
|
-
nodeToFocus.focus();
|
|
2640
|
-
}
|
|
2641
|
-
}
|
|
2642
|
-
|
|
2643
|
-
// https://github.com/floating-ui/floating-ui/issues/3060
|
|
2644
|
-
if (dataRef.current.insideReactTree) {
|
|
2645
|
-
dataRef.current.insideReactTree = false;
|
|
2646
|
-
return;
|
|
2647
|
-
}
|
|
2648
|
-
|
|
2649
|
-
// Focus did not move inside the floating tree, and there are no tabbable
|
|
2650
|
-
// portal guards to handle closing.
|
|
2651
|
-
if ((isUntrappedTypeableCombobox ? true : !modal) && relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current && (
|
|
2652
|
-
// Fix React 18 Strict Mode returnFocus due to double rendering.
|
|
2653
|
-
// For an "untrapped" typeable combobox (input role=combobox with
|
|
2654
|
-
// initialFocus=false), re-opening the popup and tabbing out should still close it even
|
|
2655
|
-
// when the previously focused element (e.g. the next tabbable outside the popup) is
|
|
2656
|
-
// focused again. Otherwise, the popup remains open on the second Tab sequence:
|
|
2657
|
-
// click input -> Tab (closes) -> click input -> Tab.
|
|
2658
|
-
// Allow closing when `isUntrappedTypeableCombobox` regardless of the previously focused element.
|
|
2659
|
-
isUntrappedTypeableCombobox || relatedTarget !== getPreviouslyFocusedElement())) {
|
|
2660
|
-
preventReturnFocusRef.current = true;
|
|
2661
|
-
store.setOpen(false, clamp.createChangeEventDetails(clamp.focusOut, event));
|
|
2662
|
-
}
|
|
2663
|
-
});
|
|
2664
|
-
}
|
|
2665
|
-
function markInsideReactTree() {
|
|
2666
|
-
if (pointerDownOutsideRef.current) {
|
|
2667
|
-
return;
|
|
2668
|
-
}
|
|
2669
|
-
dataRef.current.insideReactTree = true;
|
|
2670
|
-
blurTimeout.start(0, () => {
|
|
2671
|
-
dataRef.current.insideReactTree = false;
|
|
2672
|
-
});
|
|
2673
|
-
}
|
|
2674
|
-
const domReferenceElement = floatingUi_utils_dom.isHTMLElement(domReference) ? domReference : null;
|
|
2675
|
-
const cleanups = [];
|
|
2676
|
-
if (!floating && !domReferenceElement) {
|
|
2677
|
-
return undefined;
|
|
2678
|
-
}
|
|
2679
|
-
if (domReferenceElement) {
|
|
2680
|
-
domReferenceElement.addEventListener('focusout', handleFocusOutside);
|
|
2681
|
-
domReferenceElement.addEventListener('pointerdown', handlePointerDown);
|
|
2682
|
-
cleanups.push(() => {
|
|
2683
|
-
domReferenceElement.removeEventListener('focusout', handleFocusOutside);
|
|
2684
|
-
domReferenceElement.removeEventListener('pointerdown', handlePointerDown);
|
|
2685
|
-
});
|
|
2686
|
-
}
|
|
2687
|
-
if (floating) {
|
|
2688
|
-
floating.addEventListener('focusin', handleFocusIn);
|
|
2689
|
-
floating.addEventListener('focusout', handleFocusOutside);
|
|
2690
|
-
if (portalContext) {
|
|
2691
|
-
floating.addEventListener('focusout', markInsideReactTree, true);
|
|
2692
|
-
cleanups.push(() => {
|
|
2693
|
-
floating.removeEventListener('focusout', markInsideReactTree, true);
|
|
2694
|
-
});
|
|
2695
|
-
}
|
|
2696
|
-
cleanups.push(() => {
|
|
2697
|
-
floating.removeEventListener('focusin', handleFocusIn);
|
|
2698
|
-
floating.removeEventListener('focusout', handleFocusOutside);
|
|
2699
|
-
});
|
|
2700
|
-
}
|
|
2701
|
-
return () => {
|
|
2702
|
-
cleanups.forEach(cleanup => {
|
|
2703
|
-
cleanup();
|
|
2704
|
-
});
|
|
2705
|
-
};
|
|
2706
|
-
}, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
|
|
2707
|
-
|
|
2708
|
-
// Hide everything outside the floating tree from assistive tech while open.
|
|
2709
|
-
React__namespace.useEffect(() => {
|
|
2710
|
-
if (disabled || !floating || !open) {
|
|
2711
|
-
return undefined;
|
|
2712
|
-
}
|
|
2713
|
-
|
|
2714
|
-
// Don't hide portals nested within the parent portal.
|
|
2715
|
-
const portalNodes = Array.from(portalContext?.portalNode?.querySelectorAll(`[${createAttribute('portal')}]`) || []);
|
|
2716
|
-
const ancestors = tree ? getNodeAncestors(tree.nodesRef.current, getNodeId()) : [];
|
|
2717
|
-
const rootAncestorComboboxDomReference = ancestors.find(node => clamp.isTypeableCombobox(node.context?.elements.domReference || null))?.context?.elements.domReference;
|
|
2718
|
-
const controlInsideElements = [floating, ...portalNodes, beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, ...getResolvedInsideElements()];
|
|
2719
|
-
const insideElements = [...controlInsideElements, rootAncestorComboboxDomReference, clamp.resolveRef(previousFocusableElement), clamp.resolveRef(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
|
|
2720
|
-
const ariaHiddenCleanup = markOthers(insideElements, {
|
|
2721
|
-
ariaHidden: modal || isUntrappedTypeableCombobox,
|
|
2722
|
-
mark: false
|
|
2723
|
-
});
|
|
2724
|
-
const markerInsideElements = [floating, ...portalNodes].filter(x => x != null);
|
|
2725
|
-
const markerCleanup = markOthers(markerInsideElements);
|
|
2726
|
-
return () => {
|
|
2727
|
-
markerCleanup();
|
|
2728
|
-
ariaHiddenCleanup();
|
|
2729
|
-
};
|
|
2730
|
-
}, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
|
|
2731
|
-
|
|
2732
|
-
// Focus the initial element when the floating element opens.
|
|
2733
|
-
clamp.useIsoLayoutEffect(() => {
|
|
2734
|
-
if (!open || disabled || !floatingUi_utils_dom.isHTMLElement(floatingFocusElement)) {
|
|
2735
|
-
return;
|
|
2736
|
-
}
|
|
2737
|
-
const doc = clamp.ownerDocument(floatingFocusElement);
|
|
2738
|
-
const previouslyFocusedElement = clamp.activeElement(doc);
|
|
2739
|
-
|
|
2740
|
-
// Wait for any layout effect state setters to execute to set `tabIndex`.
|
|
2741
|
-
queueMicrotask(() => {
|
|
2742
|
-
const focusableElements = getTabbableElements(floatingFocusElement);
|
|
2743
|
-
const initialFocusValueOrFn = initialFocusRef.current;
|
|
2744
|
-
const resolvedInitialFocus = typeof initialFocusValueOrFn === 'function' ? initialFocusValueOrFn(openInteractionTypeRef.current || '') : initialFocusValueOrFn;
|
|
2745
|
-
|
|
2746
|
-
// `null` should fallback to default behavior in case of an empty ref.
|
|
2747
|
-
if (resolvedInitialFocus === undefined || resolvedInitialFocus === false) {
|
|
2748
|
-
return;
|
|
2749
|
-
}
|
|
2750
|
-
let elToFocus;
|
|
2751
|
-
if (resolvedInitialFocus === true || resolvedInitialFocus === null) {
|
|
2752
|
-
elToFocus = focusableElements[0] || floatingFocusElement;
|
|
2753
|
-
} else {
|
|
2754
|
-
elToFocus = clamp.resolveRef(resolvedInitialFocus);
|
|
2755
|
-
}
|
|
2756
|
-
elToFocus = elToFocus || focusableElements[0] || floatingFocusElement;
|
|
2757
|
-
const focusAlreadyInsideFloatingEl = clamp.contains(floatingFocusElement, previouslyFocusedElement);
|
|
2758
|
-
if (focusAlreadyInsideFloatingEl) {
|
|
2759
|
-
return;
|
|
2760
|
-
}
|
|
2761
|
-
enqueueFocus(elToFocus, {
|
|
2762
|
-
preventScroll: elToFocus === floatingFocusElement
|
|
2763
|
-
});
|
|
2764
|
-
});
|
|
2765
|
-
}, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef, openInteractionTypeRef]);
|
|
2766
|
-
|
|
2767
|
-
// Track return focus targets and restore focus on unmount/close.
|
|
2768
|
-
clamp.useIsoLayoutEffect(() => {
|
|
2769
|
-
if (disabled || !floatingFocusElement) {
|
|
2770
|
-
return undefined;
|
|
2771
|
-
}
|
|
2772
|
-
const doc = clamp.ownerDocument(floatingFocusElement);
|
|
2773
|
-
const previouslyFocusedElement = clamp.activeElement(doc);
|
|
2774
|
-
addPreviouslyFocusedElement(previouslyFocusedElement);
|
|
2775
|
-
|
|
2776
|
-
// Dismissing via outside press should always ignore `returnFocus` to
|
|
2777
|
-
// prevent unwanted scrolling.
|
|
2778
|
-
function onOpenChangeLocal(details) {
|
|
2779
|
-
if (!details.open) {
|
|
2780
|
-
closeTypeRef.current = getEventType(details.nativeEvent, lastInteractionTypeRef.current);
|
|
2781
|
-
}
|
|
2782
|
-
if (details.reason === clamp.triggerHover && details.nativeEvent.type === 'mouseleave') {
|
|
2783
|
-
preventReturnFocusRef.current = true;
|
|
2784
|
-
}
|
|
2785
|
-
if (details.reason !== clamp.outsidePress) {
|
|
2786
|
-
return;
|
|
2787
|
-
}
|
|
2788
|
-
if (details.nested) {
|
|
2789
|
-
preventReturnFocusRef.current = false;
|
|
2790
|
-
} else if (clamp.isVirtualClick(details.nativeEvent) || clamp.isVirtualPointerEvent(details.nativeEvent)) {
|
|
2791
|
-
preventReturnFocusRef.current = false;
|
|
2792
|
-
} else {
|
|
2793
|
-
let isPreventScrollSupported = false;
|
|
2794
|
-
document.createElement('div').focus({
|
|
2795
|
-
get preventScroll() {
|
|
2796
|
-
isPreventScrollSupported = true;
|
|
2797
|
-
return false;
|
|
2798
|
-
}
|
|
2799
|
-
});
|
|
2800
|
-
if (isPreventScrollSupported) {
|
|
2801
|
-
preventReturnFocusRef.current = false;
|
|
2802
|
-
} else {
|
|
2803
|
-
preventReturnFocusRef.current = true;
|
|
2804
|
-
}
|
|
2805
|
-
}
|
|
2806
|
-
}
|
|
2807
|
-
events.on('openchange', onOpenChangeLocal);
|
|
2808
|
-
function getReturnElement() {
|
|
2809
|
-
const returnFocusValueOrFn = returnFocusRef.current;
|
|
2810
|
-
let resolvedReturnFocusValue = typeof returnFocusValueOrFn === 'function' ? returnFocusValueOrFn(closeTypeRef.current) : returnFocusValueOrFn;
|
|
2811
|
-
|
|
2812
|
-
// `null` should fallback to default behavior in case of an empty ref.
|
|
2813
|
-
if (resolvedReturnFocusValue === undefined || resolvedReturnFocusValue === false) {
|
|
2814
|
-
return null;
|
|
2815
|
-
}
|
|
2816
|
-
if (resolvedReturnFocusValue === null) {
|
|
2817
|
-
resolvedReturnFocusValue = true;
|
|
2818
|
-
}
|
|
2819
|
-
if (typeof resolvedReturnFocusValue === 'boolean') {
|
|
2820
|
-
const el = domReference || getPreviouslyFocusedElement();
|
|
2821
|
-
return el && el.isConnected ? el : null;
|
|
2822
|
-
}
|
|
2823
|
-
const fallback = domReference || getPreviouslyFocusedElement();
|
|
2824
|
-
return clamp.resolveRef(resolvedReturnFocusValue) || fallback || null;
|
|
2825
|
-
}
|
|
2826
|
-
return () => {
|
|
2827
|
-
events.off('openchange', onOpenChangeLocal);
|
|
2828
|
-
const activeEl = clamp.activeElement(doc);
|
|
2829
|
-
const insideElements = getResolvedInsideElements();
|
|
2830
|
-
const isFocusInsideFloatingTree = clamp.contains(floating, activeEl) || insideElements.some(element => element === activeEl || clamp.contains(element, activeEl)) || tree && getNodeChildren(tree.nodesRef.current, getNodeId(), false).some(node => clamp.contains(node.context?.elements.floating, activeEl));
|
|
2831
|
-
const returnElement = getReturnElement();
|
|
2832
|
-
queueMicrotask(() => {
|
|
2833
|
-
// This is `returnElement`, if it's tabbable, or its first tabbable child.
|
|
2834
|
-
const tabbableReturnElement = getFirstTabbableElement(returnElement);
|
|
2835
|
-
const hasExplicitReturnFocus = typeof returnFocusRef.current !== 'boolean';
|
|
2836
|
-
if (
|
|
2837
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2838
|
-
returnFocusRef.current && !preventReturnFocusRef.current && floatingUi_utils_dom.isHTMLElement(tabbableReturnElement) && (
|
|
2839
|
-
// If the focus moved somewhere else after mount, avoid returning focus
|
|
2840
|
-
// since it likely entered a different element which should be
|
|
2841
|
-
// respected: https://github.com/floating-ui/floating-ui/issues/2607
|
|
2842
|
-
!hasExplicitReturnFocus && tabbableReturnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)) {
|
|
2843
|
-
tabbableReturnElement.focus({
|
|
2844
|
-
preventScroll: true
|
|
2845
|
-
});
|
|
2846
|
-
}
|
|
2847
|
-
preventReturnFocusRef.current = false;
|
|
2848
|
-
});
|
|
2849
|
-
};
|
|
2850
|
-
}, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, events, tree, domReference, getNodeId, getResolvedInsideElements]);
|
|
2851
|
-
|
|
2852
|
-
// Safari may randomly scroll to the bottom of the page if an input inside a popup has focus
|
|
2853
|
-
// when the popup unmounts from the DOM.
|
|
2854
|
-
// By blurring it before the popup unmounts, we can prevent this behavior.
|
|
2855
|
-
clamp.useIsoLayoutEffect(() => {
|
|
2856
|
-
if (!clamp.isWebKit || open || !floating) {
|
|
2857
|
-
return;
|
|
2858
|
-
}
|
|
2859
|
-
const activeEl = clamp.activeElement(clamp.ownerDocument(floating));
|
|
2860
|
-
if (!floatingUi_utils_dom.isHTMLElement(activeEl) || !clamp.isTypeableElement(activeEl)) {
|
|
2861
|
-
return;
|
|
2862
|
-
}
|
|
2863
|
-
if (clamp.contains(floating, activeEl)) {
|
|
2864
|
-
activeEl.blur();
|
|
2865
|
-
}
|
|
2866
|
-
}, [open, floating]);
|
|
2867
|
-
// Synchronize the `context` & `modal` value to the FloatingPortal context.
|
|
2868
|
-
// It will decide whether or not it needs to render its own guards.
|
|
2869
|
-
clamp.useIsoLayoutEffect(() => {
|
|
2870
|
-
if (disabled || !portalContext) {
|
|
2871
|
-
return undefined;
|
|
2872
|
-
}
|
|
2873
|
-
portalContext.setFocusManagerState({
|
|
2874
|
-
modal,
|
|
2875
|
-
closeOnFocusOut,
|
|
2876
|
-
open,
|
|
2877
|
-
onOpenChange: store.setOpen,
|
|
2878
|
-
domReference
|
|
2879
|
-
});
|
|
2880
|
-
return () => {
|
|
2881
|
-
portalContext.setFocusManagerState(null);
|
|
2882
|
-
};
|
|
2883
|
-
}, [disabled, portalContext, modal, open, store, closeOnFocusOut, domReference]);
|
|
2884
|
-
|
|
2885
|
-
// Keep the floating element tabIndex in sync and clear stale focus records.
|
|
2886
|
-
clamp.useIsoLayoutEffect(() => {
|
|
2887
|
-
if (disabled || !floatingFocusElement) {
|
|
2888
|
-
return undefined;
|
|
2889
|
-
}
|
|
2890
|
-
handleTabIndex(floatingFocusElement, orderRef);
|
|
2891
|
-
return () => {
|
|
2892
|
-
queueMicrotask(clearDisconnectedPreviouslyFocusedElements);
|
|
2893
|
-
};
|
|
2894
|
-
}, [disabled, floatingFocusElement, orderRef]);
|
|
2895
|
-
const shouldRenderGuards = !disabled && (modal ? !isUntrappedTypeableCombobox : true) && (isInsidePortal || modal);
|
|
2896
|
-
return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
|
|
2897
|
-
children: [shouldRenderGuards && /*#__PURE__*/jsxRuntime.jsx(FocusGuard, {
|
|
2898
|
-
"data-type": "inside",
|
|
2899
|
-
ref: mergedBeforeGuardRef,
|
|
2900
|
-
onFocus: event => {
|
|
2901
|
-
if (modal) {
|
|
2902
|
-
const els = getTabbableElements();
|
|
2903
|
-
enqueueFocus(els[els.length - 1]);
|
|
2904
|
-
} else if (portalContext?.portalNode) {
|
|
2905
|
-
preventReturnFocusRef.current = false;
|
|
2906
|
-
if (isOutsideEvent(event, portalContext.portalNode)) {
|
|
2907
|
-
const nextTabbable = getNextTabbable(domReference);
|
|
2908
|
-
nextTabbable?.focus();
|
|
2909
|
-
} else {
|
|
2910
|
-
clamp.resolveRef(previousFocusableElement ?? portalContext.beforeOutsideRef)?.focus();
|
|
2911
|
-
}
|
|
2912
|
-
}
|
|
2913
|
-
}
|
|
2914
|
-
}), children, shouldRenderGuards && /*#__PURE__*/jsxRuntime.jsx(FocusGuard, {
|
|
2915
|
-
"data-type": "inside",
|
|
2916
|
-
ref: mergedAfterGuardRef,
|
|
2917
|
-
onFocus: event => {
|
|
2918
|
-
if (modal) {
|
|
2919
|
-
enqueueFocus(getTabbableElements()[0]);
|
|
2920
|
-
} else if (portalContext?.portalNode) {
|
|
2921
|
-
if (closeOnFocusOut) {
|
|
2922
|
-
preventReturnFocusRef.current = true;
|
|
2923
|
-
}
|
|
2924
|
-
if (isOutsideEvent(event, portalContext.portalNode)) {
|
|
2925
|
-
const prevTabbable = getPreviousTabbable(domReference);
|
|
2926
|
-
prevTabbable?.focus();
|
|
2927
|
-
} else {
|
|
2928
|
-
clamp.resolveRef(nextFocusableElement ?? portalContext.afterOutsideRef)?.focus();
|
|
2929
|
-
}
|
|
2930
|
-
}
|
|
2931
|
-
}
|
|
2932
|
-
})]
|
|
2933
|
-
});
|
|
2934
|
-
}
|
|
2935
|
-
|
|
2936
|
-
/**
|
|
2937
|
-
* Opens or closes the floating element when clicking the reference element.
|
|
2938
|
-
* @see https://floating-ui.com/docs/useClick
|
|
2939
|
-
*/
|
|
2940
|
-
function useClick(context, props = {}) {
|
|
2941
|
-
const store = 'rootStore' in context ? context.rootStore : context;
|
|
2942
|
-
const dataRef = store.context.dataRef;
|
|
2943
|
-
const {
|
|
2944
|
-
enabled = true,
|
|
2945
|
-
event: eventOption = 'click',
|
|
2946
|
-
toggle = true,
|
|
2947
|
-
ignoreMouse = false,
|
|
2948
|
-
stickIfOpen = true,
|
|
2949
|
-
touchOpenDelay = 0,
|
|
2950
|
-
reason = clamp.triggerPress
|
|
2951
|
-
} = props;
|
|
2952
|
-
const pointerTypeRef = React__namespace.useRef(undefined);
|
|
2953
|
-
const frame = clamp.useAnimationFrame();
|
|
2954
|
-
const touchOpenTimeout = clamp.useTimeout();
|
|
2955
|
-
const reference = React__namespace.useMemo(() => ({
|
|
2956
|
-
onPointerDown(event) {
|
|
2957
|
-
pointerTypeRef.current = event.pointerType;
|
|
2958
|
-
},
|
|
2959
|
-
onMouseDown(event) {
|
|
2960
|
-
const pointerType = pointerTypeRef.current;
|
|
2961
|
-
const nativeEvent = event.nativeEvent;
|
|
2962
|
-
const open = store.select('open');
|
|
2963
|
-
|
|
2964
|
-
// Ignore all buttons except for the "main" button.
|
|
2965
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
|
|
2966
|
-
if (event.button !== 0 || eventOption === 'click' || clamp.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
|
|
2967
|
-
return;
|
|
2968
|
-
}
|
|
2969
|
-
const openEvent = dataRef.current.openEvent;
|
|
2970
|
-
const openEventType = openEvent?.type;
|
|
2971
|
-
const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
|
|
2972
|
-
const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? openEventType === 'click' || openEventType === 'mousedown' : true));
|
|
2973
|
-
|
|
2974
|
-
// Animations sometimes won't run on a typeable element if using a rAF.
|
|
2975
|
-
// Focus is always set on these elements. For touch, we may delay opening.
|
|
2976
|
-
if (clamp.isTypeableElement(nativeEvent.target)) {
|
|
2977
|
-
const details = clamp.createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
|
|
2978
|
-
if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
|
|
2979
|
-
touchOpenTimeout.start(touchOpenDelay, () => {
|
|
2980
|
-
store.setOpen(true, details);
|
|
2981
|
-
});
|
|
2982
|
-
} else {
|
|
2983
|
-
store.setOpen(nextOpen, details);
|
|
2984
|
-
}
|
|
2985
|
-
return;
|
|
2986
|
-
}
|
|
2987
|
-
|
|
2988
|
-
// Capture the currentTarget before the rAF.
|
|
2989
|
-
// as React sets it to null after the event handler completes.
|
|
2990
|
-
const eventCurrentTarget = event.currentTarget;
|
|
2991
|
-
|
|
2992
|
-
// Wait until focus is set on the element. This is an alternative to
|
|
2993
|
-
// `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
|
|
2994
|
-
frame.request(() => {
|
|
2995
|
-
const details = clamp.createChangeEventDetails(reason, nativeEvent, eventCurrentTarget);
|
|
2996
|
-
if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
|
|
2997
|
-
touchOpenTimeout.start(touchOpenDelay, () => {
|
|
2998
|
-
store.setOpen(true, details);
|
|
2999
|
-
});
|
|
3000
|
-
} else {
|
|
3001
|
-
store.setOpen(nextOpen, details);
|
|
3002
|
-
}
|
|
3003
|
-
});
|
|
3004
|
-
},
|
|
3005
|
-
onClick(event) {
|
|
3006
|
-
if (eventOption === 'mousedown-only') {
|
|
3007
|
-
return;
|
|
3008
|
-
}
|
|
3009
|
-
const pointerType = pointerTypeRef.current;
|
|
3010
|
-
if (eventOption === 'mousedown' && pointerType) {
|
|
3011
|
-
pointerTypeRef.current = undefined;
|
|
3012
|
-
return;
|
|
3013
|
-
}
|
|
3014
|
-
if (clamp.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
|
|
3015
|
-
return;
|
|
3016
|
-
}
|
|
3017
|
-
const open = store.select('open');
|
|
3018
|
-
const openEvent = dataRef.current.openEvent;
|
|
3019
|
-
const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
|
|
3020
|
-
const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? clamp.isClickLikeEvent(openEvent) : true));
|
|
3021
|
-
const details = clamp.createChangeEventDetails(reason, event.nativeEvent, event.currentTarget);
|
|
3022
|
-
if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
|
|
3023
|
-
touchOpenTimeout.start(touchOpenDelay, () => {
|
|
3024
|
-
store.setOpen(true, details);
|
|
3025
|
-
});
|
|
3026
|
-
} else {
|
|
3027
|
-
store.setOpen(nextOpen, details);
|
|
3028
|
-
}
|
|
3029
|
-
},
|
|
3030
|
-
onKeyDown() {
|
|
3031
|
-
pointerTypeRef.current = undefined;
|
|
3032
|
-
}
|
|
3033
|
-
}), [dataRef, eventOption, ignoreMouse, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay, reason]);
|
|
3034
|
-
return React__namespace.useMemo(() => enabled ? {
|
|
3035
|
-
reference
|
|
3036
|
-
} : useRenderElement.EMPTY_OBJECT, [enabled, reference]);
|
|
3037
|
-
}
|
|
3038
|
-
|
|
3039
|
-
const bubbleHandlerKeys = {
|
|
3040
|
-
intentional: 'onClick',
|
|
3041
|
-
sloppy: 'onPointerDown'
|
|
3042
|
-
};
|
|
3043
|
-
function alwaysFalse() {
|
|
3044
|
-
return false;
|
|
3045
|
-
}
|
|
3046
|
-
function normalizeProp(normalizable) {
|
|
3047
|
-
return {
|
|
3048
|
-
escapeKey: typeof normalizable === 'boolean' ? normalizable : normalizable?.escapeKey ?? false,
|
|
3049
|
-
outsidePress: typeof normalizable === 'boolean' ? normalizable : normalizable?.outsidePress ?? true
|
|
3050
|
-
};
|
|
3051
|
-
}
|
|
3052
|
-
/**
|
|
3053
|
-
* Closes the floating element when a dismissal is requested — by default, when
|
|
3054
|
-
* the user presses the `escape` key or outside of the floating element.
|
|
3055
|
-
* @see https://floating-ui.com/docs/useDismiss
|
|
3056
|
-
*/
|
|
3057
|
-
function useDismiss(context, props = {}) {
|
|
3058
|
-
const store = 'rootStore' in context ? context.rootStore : context;
|
|
3059
|
-
const open = store.useState('open');
|
|
3060
|
-
const floatingElement = store.useState('floatingElement');
|
|
3061
|
-
const {
|
|
3062
|
-
dataRef
|
|
3063
|
-
} = store.context;
|
|
3064
|
-
const {
|
|
3065
|
-
enabled = true,
|
|
3066
|
-
escapeKey = true,
|
|
3067
|
-
outsidePress: outsidePressProp = true,
|
|
3068
|
-
outsidePressEvent = 'sloppy',
|
|
3069
|
-
referencePress = alwaysFalse,
|
|
3070
|
-
referencePressEvent = 'sloppy',
|
|
3071
|
-
bubbles,
|
|
3072
|
-
externalTree
|
|
3073
|
-
} = props;
|
|
3074
|
-
const tree = useFloatingTree(externalTree);
|
|
3075
|
-
const outsidePressFn = clamp.useStableCallback(typeof outsidePressProp === 'function' ? outsidePressProp : () => false);
|
|
3076
|
-
const outsidePress = typeof outsidePressProp === 'function' ? outsidePressFn : outsidePressProp;
|
|
3077
|
-
const outsidePressEnabled = outsidePress !== false;
|
|
3078
|
-
const getOutsidePressEventProp = clamp.useStableCallback(() => outsidePressEvent);
|
|
3079
|
-
const pressStartedInsideRef = React__namespace.useRef(false);
|
|
3080
|
-
const pressStartPreventedRef = React__namespace.useRef(false);
|
|
3081
|
-
// Ignore only the very next outside click after dragging from inside to outside.
|
|
3082
|
-
const suppressNextOutsideClickRef = React__namespace.useRef(false);
|
|
3083
|
-
const {
|
|
3084
|
-
escapeKey: escapeKeyBubbles,
|
|
3085
|
-
outsidePress: outsidePressBubbles
|
|
3086
|
-
} = normalizeProp(bubbles);
|
|
3087
|
-
const touchStateRef = React__namespace.useRef(null);
|
|
3088
|
-
const cancelDismissOnEndTimeout = clamp.useTimeout();
|
|
3089
|
-
const clearInsideReactTreeTimeout = clamp.useTimeout();
|
|
3090
|
-
const clearInsideReactTree = clamp.useStableCallback(() => {
|
|
3091
|
-
clearInsideReactTreeTimeout.clear();
|
|
3092
|
-
dataRef.current.insideReactTree = false;
|
|
3093
|
-
});
|
|
3094
|
-
const isComposingRef = React__namespace.useRef(false);
|
|
3095
|
-
const currentPointerTypeRef = React__namespace.useRef('');
|
|
3096
|
-
const isReferencePressEnabled = clamp.useStableCallback(referencePress);
|
|
3097
|
-
const closeOnEscapeKeyDown = clamp.useStableCallback(event => {
|
|
3098
|
-
if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
|
|
3099
|
-
return;
|
|
3100
|
-
}
|
|
3101
|
-
|
|
3102
|
-
// Wait until IME is settled. Pressing `Escape` while composing should
|
|
3103
|
-
// close the compose menu, but not the floating element.
|
|
3104
|
-
if (isComposingRef.current) {
|
|
3105
|
-
return;
|
|
3106
|
-
}
|
|
3107
|
-
const nodeId = dataRef.current.floatingContext?.nodeId;
|
|
3108
|
-
const children = tree ? getNodeChildren(tree.nodesRef.current, nodeId) : [];
|
|
3109
|
-
if (!escapeKeyBubbles) {
|
|
3110
|
-
if (children.length > 0) {
|
|
3111
|
-
let shouldDismiss = true;
|
|
3112
|
-
children.forEach(child => {
|
|
3113
|
-
if (child.context?.open && !child.context.dataRef.current.__escapeKeyBubbles) {
|
|
3114
|
-
shouldDismiss = false;
|
|
3115
|
-
}
|
|
3116
|
-
});
|
|
3117
|
-
if (!shouldDismiss) {
|
|
3118
|
-
return;
|
|
3119
|
-
}
|
|
3120
|
-
}
|
|
3121
|
-
}
|
|
3122
|
-
const native = clamp.isReactEvent(event) ? event.nativeEvent : event;
|
|
3123
|
-
const eventDetails = clamp.createChangeEventDetails(clamp.escapeKey, native);
|
|
3124
|
-
store.setOpen(false, eventDetails);
|
|
3125
|
-
if (!escapeKeyBubbles && !eventDetails.isPropagationAllowed) {
|
|
3126
|
-
event.stopPropagation();
|
|
3127
|
-
}
|
|
3128
|
-
});
|
|
3129
|
-
const markInsideReactTree = clamp.useStableCallback(() => {
|
|
3130
|
-
dataRef.current.insideReactTree = true;
|
|
3131
|
-
clearInsideReactTreeTimeout.start(0, clearInsideReactTree);
|
|
3132
|
-
});
|
|
3133
|
-
React__namespace.useEffect(() => {
|
|
3134
|
-
if (!open || !enabled) {
|
|
3135
|
-
return undefined;
|
|
3136
|
-
}
|
|
3137
|
-
dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
|
|
3138
|
-
dataRef.current.__outsidePressBubbles = outsidePressBubbles;
|
|
3139
|
-
const compositionTimeout = new clamp.Timeout();
|
|
3140
|
-
const preventedPressSuppressionTimeout = new clamp.Timeout();
|
|
3141
|
-
function handleCompositionStart() {
|
|
3142
|
-
compositionTimeout.clear();
|
|
3143
|
-
isComposingRef.current = true;
|
|
3144
|
-
}
|
|
3145
|
-
function handleCompositionEnd() {
|
|
3146
|
-
// Safari fires `compositionend` before `keydown`, so we need to wait
|
|
3147
|
-
// until the next tick to set `isComposing` to `false`.
|
|
3148
|
-
// https://bugs.webkit.org/show_bug.cgi?id=165004
|
|
3149
|
-
compositionTimeout.start(
|
|
3150
|
-
// 0ms or 1ms don't work in Safari. 5ms appears to consistently work.
|
|
3151
|
-
// Only apply to WebKit for the test to remain 0ms.
|
|
3152
|
-
floatingUi_utils_dom.isWebKit() ? 5 : 0, () => {
|
|
3153
|
-
isComposingRef.current = false;
|
|
3154
|
-
});
|
|
3155
|
-
}
|
|
3156
|
-
function suppressImmediateOutsideClickAfterPreventedStart() {
|
|
3157
|
-
suppressNextOutsideClickRef.current = true;
|
|
3158
|
-
// Firefox can emit the synthetic outside click in a later task after
|
|
3159
|
-
// pointer lock exit, so microtask clearing is too early here.
|
|
3160
|
-
preventedPressSuppressionTimeout.start(0, () => {
|
|
3161
|
-
suppressNextOutsideClickRef.current = false;
|
|
3162
|
-
});
|
|
3163
|
-
}
|
|
3164
|
-
function resetPressStartState() {
|
|
3165
|
-
pressStartedInsideRef.current = false;
|
|
3166
|
-
pressStartPreventedRef.current = false;
|
|
3167
|
-
}
|
|
3168
|
-
function getOutsidePressEvent() {
|
|
3169
|
-
const type = currentPointerTypeRef.current;
|
|
3170
|
-
const computedType = type === 'pen' || !type ? 'mouse' : type;
|
|
3171
|
-
const outsidePressEventValue = getOutsidePressEventProp();
|
|
3172
|
-
const resolved = typeof outsidePressEventValue === 'function' ? outsidePressEventValue() : outsidePressEventValue;
|
|
3173
|
-
if (typeof resolved === 'string') {
|
|
3174
|
-
return resolved;
|
|
3175
|
-
}
|
|
3176
|
-
return resolved[computedType];
|
|
3177
|
-
}
|
|
3178
|
-
function shouldIgnoreEvent(event) {
|
|
3179
|
-
const computedOutsidePressEvent = getOutsidePressEvent();
|
|
3180
|
-
return computedOutsidePressEvent === 'intentional' && event.type !== 'click' || computedOutsidePressEvent === 'sloppy' && event.type === 'click';
|
|
3181
|
-
}
|
|
3182
|
-
function isEventWithinFloatingTree(event) {
|
|
3183
|
-
const nodeId = dataRef.current.floatingContext?.nodeId;
|
|
3184
|
-
const targetIsInsideChildren = tree && getNodeChildren(tree.nodesRef.current, nodeId).some(node => clamp.isEventTargetWithin(event, node.context?.elements.floating));
|
|
3185
|
-
return clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement')) || targetIsInsideChildren;
|
|
3186
|
-
}
|
|
3187
|
-
function closeOnPressOutside(event) {
|
|
3188
|
-
if (shouldIgnoreEvent(event)) {
|
|
3189
|
-
clearInsideReactTree();
|
|
3190
|
-
return;
|
|
3191
|
-
}
|
|
3192
|
-
if (dataRef.current.insideReactTree) {
|
|
3193
|
-
clearInsideReactTree();
|
|
3194
|
-
return;
|
|
3195
|
-
}
|
|
3196
|
-
const target = clamp.getTarget(event);
|
|
3197
|
-
const inertSelector = `[${createAttribute('inert')}]`;
|
|
3198
|
-
let markers = Array.from(clamp.ownerDocument(store.select('floatingElement')).querySelectorAll(inertSelector));
|
|
3199
|
-
const targetRoot = floatingUi_utils_dom.isElement(target) ? target.getRootNode() : null;
|
|
3200
|
-
if (floatingUi_utils_dom.isShadowRoot(targetRoot)) {
|
|
3201
|
-
markers = markers.concat(Array.from(targetRoot.querySelectorAll(inertSelector)));
|
|
3202
|
-
}
|
|
3203
|
-
const triggers = store.context.triggerElements;
|
|
3204
|
-
|
|
3205
|
-
// If another trigger is clicked, don't close the floating element.
|
|
3206
|
-
if (target && (triggers.hasElement(target) || triggers.hasMatchingElement(trigger => clamp.contains(trigger, target)))) {
|
|
3207
|
-
return;
|
|
3208
|
-
}
|
|
3209
|
-
let targetRootAncestor = floatingUi_utils_dom.isElement(target) ? target : null;
|
|
3210
|
-
while (targetRootAncestor && !floatingUi_utils_dom.isLastTraversableNode(targetRootAncestor)) {
|
|
3211
|
-
const nextParent = floatingUi_utils_dom.getParentNode(targetRootAncestor);
|
|
3212
|
-
if (floatingUi_utils_dom.isLastTraversableNode(nextParent) || !floatingUi_utils_dom.isElement(nextParent)) {
|
|
3213
|
-
break;
|
|
3214
|
-
}
|
|
3215
|
-
targetRootAncestor = nextParent;
|
|
3216
|
-
}
|
|
3217
|
-
|
|
3218
|
-
// Check if the click occurred on a third-party element injected after the
|
|
3219
|
-
// floating element rendered.
|
|
3220
|
-
if (markers.length && floatingUi_utils_dom.isElement(target) && !clamp.isRootElement(target) &&
|
|
3221
|
-
// Clicked on a direct ancestor (e.g. FloatingOverlay).
|
|
3222
|
-
!clamp.contains(target, store.select('floatingElement')) &&
|
|
3223
|
-
// If the target root element contains none of the markers, then the
|
|
3224
|
-
// element was injected after the floating element rendered.
|
|
3225
|
-
markers.every(marker => !clamp.contains(targetRootAncestor, marker))) {
|
|
3226
|
-
return;
|
|
3227
|
-
}
|
|
3228
|
-
|
|
3229
|
-
// Check if the click occurred on the scrollbar
|
|
3230
|
-
// Skip for touch events: scrollbars don't receive touch events on most platforms
|
|
3231
|
-
if (floatingUi_utils_dom.isHTMLElement(target) && !('touches' in event)) {
|
|
3232
|
-
const lastTraversableNode = floatingUi_utils_dom.isLastTraversableNode(target);
|
|
3233
|
-
const style = floatingUi_utils_dom.getComputedStyle(target);
|
|
3234
|
-
const scrollRe = /auto|scroll/;
|
|
3235
|
-
const isScrollableX = lastTraversableNode || scrollRe.test(style.overflowX);
|
|
3236
|
-
const isScrollableY = lastTraversableNode || scrollRe.test(style.overflowY);
|
|
3237
|
-
const canScrollX = isScrollableX && target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
|
|
3238
|
-
const canScrollY = isScrollableY && target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
|
|
3239
|
-
const isRTL = style.direction === 'rtl';
|
|
3240
|
-
|
|
3241
|
-
// Check click position relative to scrollbar.
|
|
3242
|
-
// In some browsers it is possible to change the <body> (or window)
|
|
3243
|
-
// scrollbar to the left side, but is very rare and is difficult to
|
|
3244
|
-
// check for. Plus, for modal dialogs with backdrops, it is more
|
|
3245
|
-
// important that the backdrop is checked but not so much the window.
|
|
3246
|
-
const pressedVerticalScrollbar = canScrollY && (isRTL ? event.offsetX <= target.offsetWidth - target.clientWidth : event.offsetX > target.clientWidth);
|
|
3247
|
-
const pressedHorizontalScrollbar = canScrollX && event.offsetY > target.clientHeight;
|
|
3248
|
-
if (pressedVerticalScrollbar || pressedHorizontalScrollbar) {
|
|
3249
|
-
return;
|
|
3250
|
-
}
|
|
3251
|
-
}
|
|
3252
|
-
if (isEventWithinFloatingTree(event)) {
|
|
3253
|
-
return;
|
|
3254
|
-
}
|
|
3255
|
-
|
|
3256
|
-
// In intentional mode, a press that starts inside and ends outside gets
|
|
3257
|
-
// one suppressed outside click. Run this after inside-target checks so
|
|
3258
|
-
// inside clicks don't consume the one-shot suppression.
|
|
3259
|
-
if (getOutsidePressEvent() === 'intentional' && suppressNextOutsideClickRef.current) {
|
|
3260
|
-
preventedPressSuppressionTimeout.clear();
|
|
3261
|
-
suppressNextOutsideClickRef.current = false;
|
|
3262
|
-
return;
|
|
3263
|
-
}
|
|
3264
|
-
if (typeof outsidePress === 'function' && !outsidePress(event)) {
|
|
3265
|
-
return;
|
|
3266
|
-
}
|
|
3267
|
-
const nodeId = dataRef.current.floatingContext?.nodeId;
|
|
3268
|
-
const children = tree ? getNodeChildren(tree.nodesRef.current, nodeId) : [];
|
|
3269
|
-
if (children.length > 0) {
|
|
3270
|
-
let shouldDismiss = true;
|
|
3271
|
-
children.forEach(child => {
|
|
3272
|
-
if (child.context?.open && !child.context.dataRef.current.__outsidePressBubbles) {
|
|
3273
|
-
shouldDismiss = false;
|
|
3274
|
-
}
|
|
3275
|
-
});
|
|
3276
|
-
if (!shouldDismiss) {
|
|
3277
|
-
return;
|
|
3278
|
-
}
|
|
3279
|
-
}
|
|
3280
|
-
store.setOpen(false, clamp.createChangeEventDetails(clamp.outsidePress, event));
|
|
3281
|
-
clearInsideReactTree();
|
|
3282
|
-
}
|
|
3283
|
-
function handlePointerDown(event) {
|
|
3284
|
-
if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3285
|
-
return;
|
|
3286
|
-
}
|
|
3287
|
-
closeOnPressOutside(event);
|
|
3288
|
-
}
|
|
3289
|
-
function handleTouchStart(event) {
|
|
3290
|
-
if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3291
|
-
return;
|
|
3292
|
-
}
|
|
3293
|
-
const touch = event.touches[0];
|
|
3294
|
-
if (touch) {
|
|
3295
|
-
touchStateRef.current = {
|
|
3296
|
-
startTime: Date.now(),
|
|
3297
|
-
startX: touch.clientX,
|
|
3298
|
-
startY: touch.clientY,
|
|
3299
|
-
dismissOnTouchEnd: false,
|
|
3300
|
-
dismissOnMouseDown: true
|
|
3301
|
-
};
|
|
3302
|
-
cancelDismissOnEndTimeout.start(1000, () => {
|
|
3303
|
-
if (touchStateRef.current) {
|
|
3304
|
-
touchStateRef.current.dismissOnTouchEnd = false;
|
|
3305
|
-
touchStateRef.current.dismissOnMouseDown = false;
|
|
3306
|
-
}
|
|
3307
|
-
});
|
|
3308
|
-
}
|
|
3309
|
-
}
|
|
3310
|
-
function handleTouchStartCapture(event) {
|
|
3311
|
-
currentPointerTypeRef.current = 'touch';
|
|
3312
|
-
const target = clamp.getTarget(event);
|
|
3313
|
-
function callback() {
|
|
3314
|
-
handleTouchStart(event);
|
|
3315
|
-
target?.removeEventListener(event.type, callback);
|
|
3316
|
-
}
|
|
3317
|
-
target?.addEventListener(event.type, callback);
|
|
3318
|
-
}
|
|
3319
|
-
function closeOnPressOutsideCapture(event) {
|
|
3320
|
-
cancelDismissOnEndTimeout.clear();
|
|
3321
|
-
if (event.type === 'pointerdown') {
|
|
3322
|
-
currentPointerTypeRef.current = event.pointerType;
|
|
3323
|
-
}
|
|
3324
|
-
if (event.type === 'mousedown' && touchStateRef.current && !touchStateRef.current.dismissOnMouseDown) {
|
|
3325
|
-
return;
|
|
3326
|
-
}
|
|
3327
|
-
const target = clamp.getTarget(event);
|
|
3328
|
-
function callback() {
|
|
3329
|
-
if (event.type === 'pointerdown') {
|
|
3330
|
-
handlePointerDown(event);
|
|
3331
|
-
} else {
|
|
3332
|
-
closeOnPressOutside(event);
|
|
3333
|
-
}
|
|
3334
|
-
target?.removeEventListener(event.type, callback);
|
|
3335
|
-
}
|
|
3336
|
-
target?.addEventListener(event.type, callback);
|
|
3337
|
-
}
|
|
3338
|
-
function handlePressEndCapture(event) {
|
|
3339
|
-
if (!pressStartedInsideRef.current) {
|
|
3340
|
-
return;
|
|
3341
|
-
}
|
|
3342
|
-
const pressStartedInsideDefaultPrevented = pressStartPreventedRef.current;
|
|
3343
|
-
resetPressStartState();
|
|
3344
|
-
if (getOutsidePressEvent() !== 'intentional') {
|
|
3345
|
-
return;
|
|
3346
|
-
}
|
|
3347
|
-
if (event.type === 'pointercancel') {
|
|
3348
|
-
if (pressStartedInsideDefaultPrevented) {
|
|
3349
|
-
suppressImmediateOutsideClickAfterPreventedStart();
|
|
3350
|
-
}
|
|
3351
|
-
return;
|
|
3352
|
-
}
|
|
3353
|
-
if (isEventWithinFloatingTree(event)) {
|
|
3354
|
-
return;
|
|
3355
|
-
}
|
|
3356
|
-
|
|
3357
|
-
// If pointerdown was prevented, no click may be generated for that
|
|
3358
|
-
// interaction. However, Firefox may still emit an immediate click after
|
|
3359
|
-
// pointerup (e.g. NumberField scrub with pointer lock), so suppress for
|
|
3360
|
-
// one tick to absorb that synthetic click only.
|
|
3361
|
-
if (pressStartedInsideDefaultPrevented) {
|
|
3362
|
-
suppressImmediateOutsideClickAfterPreventedStart();
|
|
3363
|
-
return;
|
|
3364
|
-
}
|
|
3365
|
-
|
|
3366
|
-
// Avoid suppressing when outsidePress explicitly ignores this target.
|
|
3367
|
-
if (typeof outsidePress === 'function' && !outsidePress(event)) {
|
|
3368
|
-
return;
|
|
3369
|
-
}
|
|
3370
|
-
preventedPressSuppressionTimeout.clear();
|
|
3371
|
-
suppressNextOutsideClickRef.current = true;
|
|
3372
|
-
clearInsideReactTree();
|
|
3373
|
-
}
|
|
3374
|
-
function handleTouchMove(event) {
|
|
3375
|
-
if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3376
|
-
return;
|
|
3377
|
-
}
|
|
3378
|
-
const touch = event.touches[0];
|
|
3379
|
-
if (!touch) {
|
|
3380
|
-
return;
|
|
3381
|
-
}
|
|
3382
|
-
const deltaX = Math.abs(touch.clientX - touchStateRef.current.startX);
|
|
3383
|
-
const deltaY = Math.abs(touch.clientY - touchStateRef.current.startY);
|
|
3384
|
-
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
|
3385
|
-
if (distance > 5) {
|
|
3386
|
-
touchStateRef.current.dismissOnTouchEnd = true;
|
|
3387
|
-
}
|
|
3388
|
-
if (distance > 10) {
|
|
3389
|
-
closeOnPressOutside(event);
|
|
3390
|
-
cancelDismissOnEndTimeout.clear();
|
|
3391
|
-
touchStateRef.current = null;
|
|
3392
|
-
}
|
|
3393
|
-
}
|
|
3394
|
-
function handleTouchMoveCapture(event) {
|
|
3395
|
-
const target = clamp.getTarget(event);
|
|
3396
|
-
function callback() {
|
|
3397
|
-
handleTouchMove(event);
|
|
3398
|
-
target?.removeEventListener(event.type, callback);
|
|
3399
|
-
}
|
|
3400
|
-
target?.addEventListener(event.type, callback);
|
|
3401
|
-
}
|
|
3402
|
-
function handleTouchEnd(event) {
|
|
3403
|
-
if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3404
|
-
return;
|
|
3405
|
-
}
|
|
3406
|
-
if (touchStateRef.current.dismissOnTouchEnd) {
|
|
3407
|
-
closeOnPressOutside(event);
|
|
3408
|
-
}
|
|
3409
|
-
cancelDismissOnEndTimeout.clear();
|
|
3410
|
-
touchStateRef.current = null;
|
|
3411
|
-
}
|
|
3412
|
-
function handleTouchEndCapture(event) {
|
|
3413
|
-
const target = clamp.getTarget(event);
|
|
3414
|
-
function callback() {
|
|
3415
|
-
handleTouchEnd(event);
|
|
3416
|
-
target?.removeEventListener(event.type, callback);
|
|
3417
|
-
}
|
|
3418
|
-
target?.addEventListener(event.type, callback);
|
|
3419
|
-
}
|
|
3420
|
-
const doc = clamp.ownerDocument(floatingElement);
|
|
3421
|
-
if (escapeKey) {
|
|
3422
|
-
doc.addEventListener('keydown', closeOnEscapeKeyDown);
|
|
3423
|
-
doc.addEventListener('compositionstart', handleCompositionStart);
|
|
3424
|
-
doc.addEventListener('compositionend', handleCompositionEnd);
|
|
3425
|
-
}
|
|
3426
|
-
if (outsidePressEnabled) {
|
|
3427
|
-
doc.addEventListener('click', closeOnPressOutsideCapture, true);
|
|
3428
|
-
doc.addEventListener('pointerdown', closeOnPressOutsideCapture, true);
|
|
3429
|
-
doc.addEventListener('pointerup', handlePressEndCapture, true);
|
|
3430
|
-
doc.addEventListener('pointercancel', handlePressEndCapture, true);
|
|
3431
|
-
doc.addEventListener('mousedown', closeOnPressOutsideCapture, true);
|
|
3432
|
-
doc.addEventListener('mouseup', handlePressEndCapture, true);
|
|
3433
|
-
doc.addEventListener('touchstart', handleTouchStartCapture, true);
|
|
3434
|
-
doc.addEventListener('touchmove', handleTouchMoveCapture, true);
|
|
3435
|
-
doc.addEventListener('touchend', handleTouchEndCapture, true);
|
|
3436
|
-
}
|
|
3437
|
-
return () => {
|
|
3438
|
-
if (escapeKey) {
|
|
3439
|
-
doc.removeEventListener('keydown', closeOnEscapeKeyDown);
|
|
3440
|
-
doc.removeEventListener('compositionstart', handleCompositionStart);
|
|
3441
|
-
doc.removeEventListener('compositionend', handleCompositionEnd);
|
|
3442
|
-
}
|
|
3443
|
-
if (outsidePressEnabled) {
|
|
3444
|
-
doc.removeEventListener('click', closeOnPressOutsideCapture, true);
|
|
3445
|
-
doc.removeEventListener('pointerdown', closeOnPressOutsideCapture, true);
|
|
3446
|
-
doc.removeEventListener('pointerup', handlePressEndCapture, true);
|
|
3447
|
-
doc.removeEventListener('pointercancel', handlePressEndCapture, true);
|
|
3448
|
-
doc.removeEventListener('mousedown', closeOnPressOutsideCapture, true);
|
|
3449
|
-
doc.removeEventListener('mouseup', handlePressEndCapture, true);
|
|
3450
|
-
doc.removeEventListener('touchstart', handleTouchStartCapture, true);
|
|
3451
|
-
doc.removeEventListener('touchmove', handleTouchMoveCapture, true);
|
|
3452
|
-
doc.removeEventListener('touchend', handleTouchEndCapture, true);
|
|
3453
|
-
}
|
|
3454
|
-
compositionTimeout.clear();
|
|
3455
|
-
preventedPressSuppressionTimeout.clear();
|
|
3456
|
-
resetPressStartState();
|
|
3457
|
-
suppressNextOutsideClickRef.current = false;
|
|
3458
|
-
};
|
|
3459
|
-
}, [dataRef, floatingElement, escapeKey, outsidePressEnabled, outsidePress, open, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, clearInsideReactTree, getOutsidePressEventProp, tree, store, cancelDismissOnEndTimeout]);
|
|
3460
|
-
React__namespace.useEffect(clearInsideReactTree, [outsidePress, clearInsideReactTree]);
|
|
3461
|
-
const reference = React__namespace.useMemo(() => ({
|
|
3462
|
-
onKeyDown: closeOnEscapeKeyDown,
|
|
3463
|
-
[bubbleHandlerKeys[referencePressEvent]]: event => {
|
|
3464
|
-
if (!isReferencePressEnabled()) {
|
|
3465
|
-
return;
|
|
3466
|
-
}
|
|
3467
|
-
store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerPress, event.nativeEvent));
|
|
3468
|
-
},
|
|
3469
|
-
...(referencePressEvent !== 'intentional' && {
|
|
3470
|
-
onClick(event) {
|
|
3471
|
-
if (!isReferencePressEnabled()) {
|
|
3472
|
-
return;
|
|
3473
|
-
}
|
|
3474
|
-
store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerPress, event.nativeEvent));
|
|
3475
|
-
}
|
|
3476
|
-
})
|
|
3477
|
-
}), [closeOnEscapeKeyDown, store, referencePressEvent, isReferencePressEnabled]);
|
|
3478
|
-
const markPressStartedInsideReactTree = clamp.useStableCallback(event => {
|
|
3479
|
-
if (!open || !enabled || event.button !== 0) {
|
|
3480
|
-
return;
|
|
3481
|
-
}
|
|
3482
|
-
const target = clamp.getTarget(event.nativeEvent);
|
|
3483
|
-
// Only treat presses that start within the floating DOM subtree as inside.
|
|
3484
|
-
// This avoids suppressing parent dismissal when interacting with nested portals.
|
|
3485
|
-
if (!clamp.contains(store.select('floatingElement'), target)) {
|
|
3486
|
-
return;
|
|
3487
|
-
}
|
|
3488
|
-
if (!pressStartedInsideRef.current) {
|
|
3489
|
-
pressStartedInsideRef.current = true;
|
|
3490
|
-
pressStartPreventedRef.current = false;
|
|
3491
|
-
}
|
|
3492
|
-
});
|
|
3493
|
-
const markInsidePressStartPrevented = clamp.useStableCallback(event => {
|
|
3494
|
-
if (!open || !enabled) {
|
|
3495
|
-
return;
|
|
3496
|
-
}
|
|
3497
|
-
if (!(event.defaultPrevented || event.nativeEvent.defaultPrevented)) {
|
|
3498
|
-
return;
|
|
3499
|
-
}
|
|
3500
|
-
if (pressStartedInsideRef.current) {
|
|
3501
|
-
pressStartPreventedRef.current = true;
|
|
3502
|
-
}
|
|
3503
|
-
});
|
|
3504
|
-
const floating = React__namespace.useMemo(() => ({
|
|
3505
|
-
onKeyDown: closeOnEscapeKeyDown,
|
|
3506
|
-
// `onMouseDown` may be blocked if `event.preventDefault()` is called in
|
|
3507
|
-
// `onPointerDown`, such as with <NumberField.ScrubArea>.
|
|
3508
|
-
// See https://github.com/mui/base-ui/pull/3379
|
|
3509
|
-
onPointerDown: markInsidePressStartPrevented,
|
|
3510
|
-
onMouseDown: markInsidePressStartPrevented,
|
|
3511
|
-
onClickCapture: markInsideReactTree,
|
|
3512
|
-
onMouseDownCapture(event) {
|
|
3513
|
-
markInsideReactTree();
|
|
3514
|
-
markPressStartedInsideReactTree(event);
|
|
3515
|
-
},
|
|
3516
|
-
onPointerDownCapture(event) {
|
|
3517
|
-
markInsideReactTree();
|
|
3518
|
-
markPressStartedInsideReactTree(event);
|
|
3519
|
-
},
|
|
3520
|
-
onMouseUpCapture: markInsideReactTree,
|
|
3521
|
-
onTouchEndCapture: markInsideReactTree,
|
|
3522
|
-
onTouchMoveCapture: markInsideReactTree
|
|
3523
|
-
}), [closeOnEscapeKeyDown, markInsideReactTree, markPressStartedInsideReactTree, markInsidePressStartPrevented]);
|
|
3524
|
-
return React__namespace.useMemo(() => enabled ? {
|
|
3525
|
-
reference,
|
|
3526
|
-
floating,
|
|
3527
|
-
trigger: reference
|
|
3528
|
-
} : {}, [enabled, reference, floating]);
|
|
3529
|
-
}
|
|
3530
|
-
|
|
3531
|
-
const selectors$1 = {
|
|
3532
|
-
open: createSelector(state => state.open),
|
|
3533
|
-
domReferenceElement: createSelector(state => state.domReferenceElement),
|
|
3534
|
-
referenceElement: createSelector(state => state.positionReference ?? state.referenceElement),
|
|
3535
|
-
floatingElement: createSelector(state => state.floatingElement),
|
|
3536
|
-
floatingId: createSelector(state => state.floatingId)
|
|
3537
|
-
};
|
|
3538
|
-
class FloatingRootStore extends ReactStore {
|
|
3539
|
-
constructor(options) {
|
|
3540
|
-
const {
|
|
3541
|
-
nested,
|
|
3542
|
-
noEmit,
|
|
3543
|
-
onOpenChange,
|
|
3544
|
-
triggerElements,
|
|
3545
|
-
...initialState
|
|
3546
|
-
} = options;
|
|
3547
|
-
super({
|
|
3548
|
-
...initialState,
|
|
3549
|
-
positionReference: initialState.referenceElement,
|
|
3550
|
-
domReferenceElement: initialState.referenceElement
|
|
3551
|
-
}, {
|
|
3552
|
-
onOpenChange,
|
|
3553
|
-
dataRef: {
|
|
3554
|
-
current: {}
|
|
3555
|
-
},
|
|
3556
|
-
events: createEventEmitter(),
|
|
3557
|
-
nested,
|
|
3558
|
-
noEmit,
|
|
3559
|
-
triggerElements
|
|
3560
|
-
}, selectors$1);
|
|
3561
|
-
}
|
|
3562
|
-
|
|
3563
|
-
/**
|
|
3564
|
-
* Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
|
|
3565
|
-
*
|
|
3566
|
-
* @param newOpen The new open state.
|
|
3567
|
-
* @param eventDetails Details about the event that triggered the open state change.
|
|
3568
|
-
*/
|
|
3569
|
-
setOpen = (newOpen, eventDetails) => {
|
|
3570
|
-
if (!newOpen || !this.state.open ||
|
|
3571
|
-
// Prevent a pending hover-open from overwriting a click-open event, while allowing
|
|
3572
|
-
// click events to upgrade a hover-open.
|
|
3573
|
-
clamp.isClickLikeEvent(eventDetails.event)) {
|
|
3574
|
-
this.context.dataRef.current.openEvent = newOpen ? eventDetails.event : undefined;
|
|
3575
|
-
}
|
|
3576
|
-
if (!this.context.noEmit) {
|
|
3577
|
-
const details = {
|
|
3578
|
-
open: newOpen,
|
|
3579
|
-
reason: eventDetails.reason,
|
|
3580
|
-
nativeEvent: eventDetails.event,
|
|
3581
|
-
nested: this.context.nested,
|
|
3582
|
-
triggerElement: eventDetails.trigger
|
|
3583
|
-
};
|
|
3584
|
-
this.context.events.emit('openchange', details);
|
|
3585
|
-
}
|
|
3586
|
-
this.context.onOpenChange?.(newOpen, eventDetails);
|
|
3587
|
-
};
|
|
3588
|
-
}
|
|
3589
29
|
|
|
3590
30
|
/**
|
|
3591
31
|
* Returns a callback ref that registers/unregisters the trigger element in the store.
|
|
@@ -3629,7 +69,7 @@ function useTriggerRegistration(id, store) {
|
|
|
3629
69
|
function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpdates) {
|
|
3630
70
|
const isMountedByThisTrigger = store.useState('isMountedByTrigger', triggerId);
|
|
3631
71
|
const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
|
|
3632
|
-
const registerTrigger =
|
|
72
|
+
const registerTrigger = useButton.useStableCallback(element => {
|
|
3633
73
|
baseRegisterTrigger(element);
|
|
3634
74
|
if (!element || !store.select('open')) {
|
|
3635
75
|
return;
|
|
@@ -3654,7 +94,7 @@ function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpda
|
|
|
3654
94
|
});
|
|
3655
95
|
}
|
|
3656
96
|
});
|
|
3657
|
-
|
|
97
|
+
useButton.useIsoLayoutEffect(() => {
|
|
3658
98
|
if (isMountedByThisTrigger) {
|
|
3659
99
|
store.update({
|
|
3660
100
|
activeTriggerElement: triggerElementRef.current,
|
|
@@ -3680,7 +120,7 @@ function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpda
|
|
|
3680
120
|
*/
|
|
3681
121
|
function useImplicitActiveTrigger(store) {
|
|
3682
122
|
const open = store.useState('open');
|
|
3683
|
-
|
|
123
|
+
useButton.useIsoLayoutEffect(() => {
|
|
3684
124
|
if (open && !store.select('activeTriggerId') && store.context.triggerElements.size === 1) {
|
|
3685
125
|
const iteratorResult = store.context.triggerElements.entries().next();
|
|
3686
126
|
if (!iteratorResult.done) {
|
|
@@ -3710,12 +150,12 @@ function useOpenStateTransitions(open, store, onUnmount) {
|
|
|
3710
150
|
mounted,
|
|
3711
151
|
setMounted,
|
|
3712
152
|
transitionStatus
|
|
3713
|
-
} =
|
|
153
|
+
} = useButton.useTransitionStatus(open);
|
|
3714
154
|
store.useSyncedValues({
|
|
3715
155
|
mounted,
|
|
3716
156
|
transitionStatus
|
|
3717
157
|
});
|
|
3718
|
-
const forceUnmount =
|
|
158
|
+
const forceUnmount = useButton.useStableCallback(() => {
|
|
3719
159
|
setMounted(false);
|
|
3720
160
|
store.update({
|
|
3721
161
|
activeTriggerId: null,
|
|
@@ -3726,7 +166,7 @@ function useOpenStateTransitions(open, store, onUnmount) {
|
|
|
3726
166
|
store.context.onOpenChangeComplete?.(false);
|
|
3727
167
|
});
|
|
3728
168
|
const preventUnmountingOnClose = store.useState('preventUnmountingOnClose');
|
|
3729
|
-
|
|
169
|
+
useButton.useOpenChangeComplete({
|
|
3730
170
|
enabled: !preventUnmountingOnClose,
|
|
3731
171
|
open,
|
|
3732
172
|
ref: store.context.popupRef,
|
|
@@ -3742,105 +182,12 @@ function useOpenStateTransitions(open, store, onUnmount) {
|
|
|
3742
182
|
};
|
|
3743
183
|
}
|
|
3744
184
|
|
|
3745
|
-
/**
|
|
3746
|
-
* Data structure to keep track of popup trigger elements by their IDs.
|
|
3747
|
-
* Uses both a set of Elements and a map of IDs to Elements for efficient lookups.
|
|
3748
|
-
*/
|
|
3749
|
-
class PopupTriggerMap {
|
|
3750
|
-
constructor() {
|
|
3751
|
-
this.elementsSet = new Set();
|
|
3752
|
-
this.idMap = new Map();
|
|
3753
|
-
}
|
|
3754
|
-
|
|
3755
|
-
/**
|
|
3756
|
-
* Adds a trigger element with the given ID.
|
|
3757
|
-
*
|
|
3758
|
-
* Note: The provided element is assumed to not be registered under multiple IDs.
|
|
3759
|
-
*/
|
|
3760
|
-
add(id, element) {
|
|
3761
|
-
const existingElement = this.idMap.get(id);
|
|
3762
|
-
if (existingElement === element) {
|
|
3763
|
-
return;
|
|
3764
|
-
}
|
|
3765
|
-
if (existingElement !== undefined) {
|
|
3766
|
-
// We assume that the same element won't be registered under multiple ids.
|
|
3767
|
-
// This is safe considering how useTriggerRegistration is implemented.
|
|
3768
|
-
this.elementsSet.delete(existingElement);
|
|
3769
|
-
}
|
|
3770
|
-
this.elementsSet.add(element);
|
|
3771
|
-
this.idMap.set(id, element);
|
|
3772
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
3773
|
-
if (this.elementsSet.size !== this.idMap.size) {
|
|
3774
|
-
throw new Error('Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap.');
|
|
3775
|
-
}
|
|
3776
|
-
}
|
|
3777
|
-
}
|
|
3778
|
-
|
|
3779
|
-
/**
|
|
3780
|
-
* Removes the trigger element with the given ID.
|
|
3781
|
-
*/
|
|
3782
|
-
delete(id) {
|
|
3783
|
-
const element = this.idMap.get(id);
|
|
3784
|
-
if (element) {
|
|
3785
|
-
this.elementsSet.delete(element);
|
|
3786
|
-
this.idMap.delete(id);
|
|
3787
|
-
}
|
|
3788
|
-
}
|
|
3789
|
-
|
|
3790
|
-
/**
|
|
3791
|
-
* Whether the given element is registered as a trigger.
|
|
3792
|
-
*/
|
|
3793
|
-
hasElement(element) {
|
|
3794
|
-
return this.elementsSet.has(element);
|
|
3795
|
-
}
|
|
3796
|
-
|
|
3797
|
-
/**
|
|
3798
|
-
* Whether there is a registered trigger element matching the given predicate.
|
|
3799
|
-
*/
|
|
3800
|
-
hasMatchingElement(predicate) {
|
|
3801
|
-
for (const element of this.elementsSet) {
|
|
3802
|
-
if (predicate(element)) {
|
|
3803
|
-
return true;
|
|
3804
|
-
}
|
|
3805
|
-
}
|
|
3806
|
-
return false;
|
|
3807
|
-
}
|
|
3808
|
-
|
|
3809
|
-
/**
|
|
3810
|
-
* Returns the trigger element associated with the given ID, or undefined if no such element exists.
|
|
3811
|
-
*/
|
|
3812
|
-
getById(id) {
|
|
3813
|
-
return this.idMap.get(id);
|
|
3814
|
-
}
|
|
3815
|
-
|
|
3816
|
-
/**
|
|
3817
|
-
* Returns an iterable of all registered trigger entries, where each entry is a tuple of [id, element].
|
|
3818
|
-
*/
|
|
3819
|
-
entries() {
|
|
3820
|
-
return this.idMap.entries();
|
|
3821
|
-
}
|
|
3822
|
-
|
|
3823
|
-
/**
|
|
3824
|
-
* Returns an iterable of all registered trigger elements.
|
|
3825
|
-
*/
|
|
3826
|
-
elements() {
|
|
3827
|
-
return this.elementsSet.values();
|
|
3828
|
-
}
|
|
3829
|
-
|
|
3830
|
-
/**
|
|
3831
|
-
* Returns the number of registered trigger elements.
|
|
3832
|
-
*/
|
|
3833
|
-
get size() {
|
|
3834
|
-
return this.idMap.size;
|
|
3835
|
-
}
|
|
3836
|
-
}
|
|
3837
|
-
|
|
3838
185
|
function getEmptyRootContext() {
|
|
3839
|
-
return new FloatingRootStore({
|
|
186
|
+
return new InternalBackdrop.FloatingRootStore({
|
|
3840
187
|
open: false,
|
|
3841
188
|
floatingElement: null,
|
|
3842
189
|
referenceElement: null,
|
|
3843
|
-
triggerElements: new PopupTriggerMap(),
|
|
190
|
+
triggerElements: new InternalBackdrop.PopupTriggerMap(),
|
|
3844
191
|
floatingId: '',
|
|
3845
192
|
nested: false,
|
|
3846
193
|
noEmit: false,
|
|
@@ -3871,32 +218,32 @@ function createInitialPopupStoreState() {
|
|
|
3871
218
|
popupProps: useRenderElement.EMPTY_OBJECT
|
|
3872
219
|
};
|
|
3873
220
|
}
|
|
3874
|
-
const activeTriggerIdSelector = createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
|
|
221
|
+
const activeTriggerIdSelector = InternalBackdrop.createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
|
|
3875
222
|
const popupStoreSelectors = {
|
|
3876
|
-
open: createSelector(state => state.openProp ?? state.open),
|
|
3877
|
-
mounted: createSelector(state => state.mounted),
|
|
3878
|
-
transitionStatus: createSelector(state => state.transitionStatus),
|
|
3879
|
-
floatingRootContext: createSelector(state => state.floatingRootContext),
|
|
3880
|
-
preventUnmountingOnClose: createSelector(state => state.preventUnmountingOnClose),
|
|
3881
|
-
payload: createSelector(state => state.payload),
|
|
223
|
+
open: InternalBackdrop.createSelector(state => state.openProp ?? state.open),
|
|
224
|
+
mounted: InternalBackdrop.createSelector(state => state.mounted),
|
|
225
|
+
transitionStatus: InternalBackdrop.createSelector(state => state.transitionStatus),
|
|
226
|
+
floatingRootContext: InternalBackdrop.createSelector(state => state.floatingRootContext),
|
|
227
|
+
preventUnmountingOnClose: InternalBackdrop.createSelector(state => state.preventUnmountingOnClose),
|
|
228
|
+
payload: InternalBackdrop.createSelector(state => state.payload),
|
|
3882
229
|
activeTriggerId: activeTriggerIdSelector,
|
|
3883
|
-
activeTriggerElement: createSelector(state => state.mounted ? state.activeTriggerElement : null),
|
|
230
|
+
activeTriggerElement: InternalBackdrop.createSelector(state => state.mounted ? state.activeTriggerElement : null),
|
|
3884
231
|
/**
|
|
3885
232
|
* Whether the trigger with the given ID was used to open the popup.
|
|
3886
233
|
*/
|
|
3887
|
-
isTriggerActive: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
|
|
234
|
+
isTriggerActive: InternalBackdrop.createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
|
|
3888
235
|
/**
|
|
3889
236
|
* Whether the popup is open and was activated by a trigger with the given ID.
|
|
3890
237
|
*/
|
|
3891
|
-
isOpenedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.open),
|
|
238
|
+
isOpenedByTrigger: InternalBackdrop.createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.open),
|
|
3892
239
|
/**
|
|
3893
240
|
* Whether the popup is mounted and was activated by a trigger with the given ID.
|
|
3894
241
|
*/
|
|
3895
|
-
isMountedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
|
|
3896
|
-
triggerProps: createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
|
|
3897
|
-
popupProps: createSelector(state => state.popupProps),
|
|
3898
|
-
popupElement: createSelector(state => state.popupElement),
|
|
3899
|
-
positionerElement: createSelector(state => state.positionerElement)
|
|
242
|
+
isMountedByTrigger: InternalBackdrop.createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
|
|
243
|
+
triggerProps: InternalBackdrop.createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
|
|
244
|
+
popupProps: InternalBackdrop.createSelector(state => state.popupProps),
|
|
245
|
+
popupElement: InternalBackdrop.createSelector(state => state.popupElement),
|
|
246
|
+
positionerElement: InternalBackdrop.createSelector(state => state.positionerElement)
|
|
3900
247
|
};
|
|
3901
248
|
|
|
3902
249
|
/**
|
|
@@ -3910,13 +257,13 @@ function useSyncedFloatingRootContext(options) {
|
|
|
3910
257
|
treatPopupAsFloatingElement = false,
|
|
3911
258
|
onOpenChange
|
|
3912
259
|
} = options;
|
|
3913
|
-
const floatingId =
|
|
3914
|
-
const nested = useFloatingParentNodeId() != null;
|
|
260
|
+
const floatingId = useButton.useId();
|
|
261
|
+
const nested = InternalBackdrop.useFloatingParentNodeId() != null;
|
|
3915
262
|
const open = popupStore.useState('open');
|
|
3916
263
|
const referenceElement = popupStore.useState('activeTriggerElement');
|
|
3917
264
|
const floatingElement = popupStore.useState(treatPopupAsFloatingElement ? 'popupElement' : 'positionerElement');
|
|
3918
265
|
const triggerElements = popupStore.context.triggerElements;
|
|
3919
|
-
const store = useRenderElement.useRefWithInit(() => new FloatingRootStore({
|
|
266
|
+
const store = useRenderElement.useRefWithInit(() => new InternalBackdrop.FloatingRootStore({
|
|
3920
267
|
open,
|
|
3921
268
|
referenceElement,
|
|
3922
269
|
floatingElement,
|
|
@@ -3926,7 +273,7 @@ function useSyncedFloatingRootContext(options) {
|
|
|
3926
273
|
nested,
|
|
3927
274
|
noEmit
|
|
3928
275
|
})).current;
|
|
3929
|
-
|
|
276
|
+
useButton.useIsoLayoutEffect(() => {
|
|
3930
277
|
const valuesToSync = {
|
|
3931
278
|
open,
|
|
3932
279
|
floatingId,
|
|
@@ -3949,93 +296,6 @@ function useSyncedFloatingRootContext(options) {
|
|
|
3949
296
|
return store;
|
|
3950
297
|
}
|
|
3951
298
|
|
|
3952
|
-
/**
|
|
3953
|
-
* Merges an array of interaction hooks' props into prop getters, allowing
|
|
3954
|
-
* event handler functions to be composed together without overwriting one
|
|
3955
|
-
* another.
|
|
3956
|
-
* @see https://floating-ui.com/docs/useInteractions
|
|
3957
|
-
*/
|
|
3958
|
-
function useInteractions(propsList = []) {
|
|
3959
|
-
const referenceDeps = propsList.map(key => key?.reference);
|
|
3960
|
-
const floatingDeps = propsList.map(key => key?.floating);
|
|
3961
|
-
const itemDeps = propsList.map(key => key?.item);
|
|
3962
|
-
const triggerDeps = propsList.map(key => key?.trigger);
|
|
3963
|
-
const getReferenceProps = React__namespace.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
|
|
3964
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3965
|
-
referenceDeps);
|
|
3966
|
-
const getFloatingProps = React__namespace.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
|
|
3967
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3968
|
-
floatingDeps);
|
|
3969
|
-
const getItemProps = React__namespace.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
|
|
3970
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3971
|
-
itemDeps);
|
|
3972
|
-
const getTriggerProps = React__namespace.useCallback(userProps => mergeProps(userProps, propsList, 'trigger'),
|
|
3973
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3974
|
-
triggerDeps);
|
|
3975
|
-
return React__namespace.useMemo(() => ({
|
|
3976
|
-
getReferenceProps,
|
|
3977
|
-
getFloatingProps,
|
|
3978
|
-
getItemProps,
|
|
3979
|
-
getTriggerProps
|
|
3980
|
-
}), [getReferenceProps, getFloatingProps, getItemProps, getTriggerProps]);
|
|
3981
|
-
}
|
|
3982
|
-
|
|
3983
|
-
/* eslint-disable guard-for-in */
|
|
3984
|
-
|
|
3985
|
-
function mergeProps(userProps, propsList, elementKey) {
|
|
3986
|
-
const eventHandlers = new Map();
|
|
3987
|
-
const isItem = elementKey === 'item';
|
|
3988
|
-
const outputProps = {};
|
|
3989
|
-
if (elementKey === 'floating') {
|
|
3990
|
-
outputProps.tabIndex = -1;
|
|
3991
|
-
outputProps[clamp.FOCUSABLE_ATTRIBUTE] = '';
|
|
3992
|
-
}
|
|
3993
|
-
for (const key in userProps) {
|
|
3994
|
-
if (isItem && userProps) {
|
|
3995
|
-
if (key === clamp.ACTIVE_KEY || key === clamp.SELECTED_KEY) {
|
|
3996
|
-
continue;
|
|
3997
|
-
}
|
|
3998
|
-
}
|
|
3999
|
-
outputProps[key] = userProps[key];
|
|
4000
|
-
}
|
|
4001
|
-
for (let i = 0; i < propsList.length; i += 1) {
|
|
4002
|
-
let props;
|
|
4003
|
-
const propsOrGetProps = propsList[i]?.[elementKey];
|
|
4004
|
-
if (typeof propsOrGetProps === 'function') {
|
|
4005
|
-
props = userProps ? propsOrGetProps(userProps) : null;
|
|
4006
|
-
} else {
|
|
4007
|
-
props = propsOrGetProps;
|
|
4008
|
-
}
|
|
4009
|
-
if (!props) {
|
|
4010
|
-
continue;
|
|
4011
|
-
}
|
|
4012
|
-
mutablyMergeProps(outputProps, props, isItem, eventHandlers);
|
|
4013
|
-
}
|
|
4014
|
-
mutablyMergeProps(outputProps, userProps, isItem, eventHandlers);
|
|
4015
|
-
return outputProps;
|
|
4016
|
-
}
|
|
4017
|
-
function mutablyMergeProps(outputProps, props, isItem, eventHandlers) {
|
|
4018
|
-
for (const key in props) {
|
|
4019
|
-
const value = props[key];
|
|
4020
|
-
if (isItem && (key === clamp.ACTIVE_KEY || key === clamp.SELECTED_KEY)) {
|
|
4021
|
-
continue;
|
|
4022
|
-
}
|
|
4023
|
-
if (!key.startsWith('on')) {
|
|
4024
|
-
outputProps[key] = value;
|
|
4025
|
-
} else {
|
|
4026
|
-
if (!eventHandlers.has(key)) {
|
|
4027
|
-
eventHandlers.set(key, []);
|
|
4028
|
-
}
|
|
4029
|
-
if (typeof value === 'function') {
|
|
4030
|
-
eventHandlers.get(key)?.push(value);
|
|
4031
|
-
outputProps[key] = (...args) => {
|
|
4032
|
-
return eventHandlers.get(key)?.map(fn => fn(...args)).find(val => val !== undefined);
|
|
4033
|
-
};
|
|
4034
|
-
}
|
|
4035
|
-
}
|
|
4036
|
-
}
|
|
4037
|
-
}
|
|
4038
|
-
|
|
4039
299
|
const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
|
|
4040
300
|
|
|
4041
301
|
/**
|
|
@@ -4052,11 +312,11 @@ function useRole(context, props = {}) {
|
|
|
4052
312
|
const {
|
|
4053
313
|
role = 'dialog'
|
|
4054
314
|
} = props;
|
|
4055
|
-
const defaultReferenceId =
|
|
315
|
+
const defaultReferenceId = useButton.useId();
|
|
4056
316
|
const referenceId = domReference?.id || defaultReferenceId;
|
|
4057
|
-
const floatingId = React__namespace.useMemo(() =>
|
|
317
|
+
const floatingId = React__namespace.useMemo(() => useButton.getFloatingFocusElement(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
|
|
4058
318
|
const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
|
|
4059
|
-
const parentId = useFloatingParentNodeId();
|
|
319
|
+
const parentId = InternalBackdrop.useFloatingParentNodeId();
|
|
4060
320
|
const isNested = parentId != null;
|
|
4061
321
|
const trigger = React__namespace.useMemo(() => {
|
|
4062
322
|
if (ariaRole === 'tooltip' || role === 'label') {
|
|
@@ -4144,461 +404,6 @@ function useRole(context, props = {}) {
|
|
|
4144
404
|
}), [reference, floating, trigger, item]);
|
|
4145
405
|
}
|
|
4146
406
|
|
|
4147
|
-
/**
|
|
4148
|
-
* Provides a cross-browser way to determine the type of the pointer used to click.
|
|
4149
|
-
* Safari and Firefox do not provide the PointerEvent to the click handler (they use MouseEvent) yet.
|
|
4150
|
-
* Additionally, this implementation detects if the click was triggered by the keyboard.
|
|
4151
|
-
*
|
|
4152
|
-
* @param handler The function to be called when the button is clicked. The first parameter is the original event and the second parameter is the pointer type.
|
|
4153
|
-
*/
|
|
4154
|
-
function useEnhancedClickHandler(handler) {
|
|
4155
|
-
const lastClickInteractionTypeRef = React__namespace.useRef('');
|
|
4156
|
-
const handlePointerDown = React__namespace.useCallback(event => {
|
|
4157
|
-
if (event.defaultPrevented) {
|
|
4158
|
-
return;
|
|
4159
|
-
}
|
|
4160
|
-
lastClickInteractionTypeRef.current = event.pointerType;
|
|
4161
|
-
handler(event, event.pointerType);
|
|
4162
|
-
}, [handler]);
|
|
4163
|
-
const handleClick = React__namespace.useCallback(event => {
|
|
4164
|
-
// event.detail has the number of clicks performed on the element. 0 means it was triggered by the keyboard.
|
|
4165
|
-
if (event.detail === 0) {
|
|
4166
|
-
handler(event, 'keyboard');
|
|
4167
|
-
return;
|
|
4168
|
-
}
|
|
4169
|
-
if ('pointerType' in event) {
|
|
4170
|
-
// Chrome and Edge correctly use PointerEvent
|
|
4171
|
-
handler(event, event.pointerType);
|
|
4172
|
-
} else {
|
|
4173
|
-
handler(event, lastClickInteractionTypeRef.current);
|
|
4174
|
-
}
|
|
4175
|
-
lastClickInteractionTypeRef.current = '';
|
|
4176
|
-
}, [handler]);
|
|
4177
|
-
return {
|
|
4178
|
-
onClick: handleClick,
|
|
4179
|
-
onPointerDown: handlePointerDown
|
|
4180
|
-
};
|
|
4181
|
-
}
|
|
4182
|
-
|
|
4183
|
-
/**
|
|
4184
|
-
* Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
|
|
4185
|
-
*
|
|
4186
|
-
* @param open The open state of the component.
|
|
4187
|
-
*/
|
|
4188
|
-
function useOpenInteractionType(open) {
|
|
4189
|
-
const [openMethod, setOpenMethod] = React__namespace.useState(null);
|
|
4190
|
-
const handleTriggerClick = clamp.useStableCallback((_, interactionType) => {
|
|
4191
|
-
if (!open) {
|
|
4192
|
-
setOpenMethod(interactionType || (
|
|
4193
|
-
// On iOS Safari, the hitslop around touch targets means tapping outside an element's
|
|
4194
|
-
// bounds does not fire `pointerdown` but does fire `mousedown`. The `interactionType`
|
|
4195
|
-
// will be "" in that case.
|
|
4196
|
-
clamp.isIOS ? 'touch' : ''));
|
|
4197
|
-
}
|
|
4198
|
-
});
|
|
4199
|
-
clamp.useValueChanged(open, previousOpen => {
|
|
4200
|
-
if (previousOpen && !open) {
|
|
4201
|
-
setOpenMethod(null);
|
|
4202
|
-
}
|
|
4203
|
-
});
|
|
4204
|
-
const {
|
|
4205
|
-
onClick,
|
|
4206
|
-
onPointerDown
|
|
4207
|
-
} = useEnhancedClickHandler(handleTriggerClick);
|
|
4208
|
-
return React__namespace.useMemo(() => ({
|
|
4209
|
-
openMethod,
|
|
4210
|
-
triggerProps: {
|
|
4211
|
-
onClick,
|
|
4212
|
-
onPointerDown
|
|
4213
|
-
}
|
|
4214
|
-
}), [openMethod, onClick, onPointerDown]);
|
|
4215
|
-
}
|
|
4216
|
-
|
|
4217
|
-
let CommonPopupDataAttributes = function (CommonPopupDataAttributes) {
|
|
4218
|
-
/**
|
|
4219
|
-
* Present when the popup is open.
|
|
4220
|
-
*/
|
|
4221
|
-
CommonPopupDataAttributes["open"] = "data-open";
|
|
4222
|
-
/**
|
|
4223
|
-
* Present when the popup is closed.
|
|
4224
|
-
*/
|
|
4225
|
-
CommonPopupDataAttributes["closed"] = "data-closed";
|
|
4226
|
-
/**
|
|
4227
|
-
* Present when the popup is animating in.
|
|
4228
|
-
*/
|
|
4229
|
-
CommonPopupDataAttributes[CommonPopupDataAttributes["startingStyle"] = clamp.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
|
|
4230
|
-
/**
|
|
4231
|
-
* Present when the popup is animating out.
|
|
4232
|
-
*/
|
|
4233
|
-
CommonPopupDataAttributes[CommonPopupDataAttributes["endingStyle"] = clamp.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
|
|
4234
|
-
/**
|
|
4235
|
-
* Present when the anchor is hidden.
|
|
4236
|
-
*/
|
|
4237
|
-
CommonPopupDataAttributes["anchorHidden"] = "data-anchor-hidden";
|
|
4238
|
-
/**
|
|
4239
|
-
* Indicates which side the popup is positioned relative to the trigger.
|
|
4240
|
-
* @type { 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
|
|
4241
|
-
*/
|
|
4242
|
-
CommonPopupDataAttributes["side"] = "data-side";
|
|
4243
|
-
/**
|
|
4244
|
-
* Indicates how the popup is aligned relative to specified side.
|
|
4245
|
-
* @type {'start' | 'center' | 'end'}
|
|
4246
|
-
*/
|
|
4247
|
-
CommonPopupDataAttributes["align"] = "data-align";
|
|
4248
|
-
return CommonPopupDataAttributes;
|
|
4249
|
-
}({});
|
|
4250
|
-
let CommonTriggerDataAttributes = /*#__PURE__*/function (CommonTriggerDataAttributes) {
|
|
4251
|
-
/**
|
|
4252
|
-
* Present when the popup is open.
|
|
4253
|
-
*/
|
|
4254
|
-
CommonTriggerDataAttributes["popupOpen"] = "data-popup-open";
|
|
4255
|
-
/**
|
|
4256
|
-
* Present when a pressable trigger is pressed.
|
|
4257
|
-
*/
|
|
4258
|
-
CommonTriggerDataAttributes["pressed"] = "data-pressed";
|
|
4259
|
-
return CommonTriggerDataAttributes;
|
|
4260
|
-
}({});
|
|
4261
|
-
const TRIGGER_HOOK = {
|
|
4262
|
-
[CommonTriggerDataAttributes.popupOpen]: ''
|
|
4263
|
-
};
|
|
4264
|
-
const PRESSABLE_TRIGGER_HOOK = {
|
|
4265
|
-
[CommonTriggerDataAttributes.popupOpen]: '',
|
|
4266
|
-
[CommonTriggerDataAttributes.pressed]: ''
|
|
4267
|
-
};
|
|
4268
|
-
const POPUP_OPEN_HOOK = {
|
|
4269
|
-
[CommonPopupDataAttributes.open]: ''
|
|
4270
|
-
};
|
|
4271
|
-
const POPUP_CLOSED_HOOK = {
|
|
4272
|
-
[CommonPopupDataAttributes.closed]: ''
|
|
4273
|
-
};
|
|
4274
|
-
const ANCHOR_HIDDEN_HOOK = {
|
|
4275
|
-
[CommonPopupDataAttributes.anchorHidden]: ''
|
|
4276
|
-
};
|
|
4277
|
-
const triggerOpenStateMapping = {
|
|
4278
|
-
open(value) {
|
|
4279
|
-
if (value) {
|
|
4280
|
-
return TRIGGER_HOOK;
|
|
4281
|
-
}
|
|
4282
|
-
return null;
|
|
4283
|
-
}
|
|
4284
|
-
};
|
|
4285
|
-
const pressableTriggerOpenStateMapping = {
|
|
4286
|
-
open(value) {
|
|
4287
|
-
if (value) {
|
|
4288
|
-
return PRESSABLE_TRIGGER_HOOK;
|
|
4289
|
-
}
|
|
4290
|
-
return null;
|
|
4291
|
-
}
|
|
4292
|
-
};
|
|
4293
|
-
const popupStateMapping = {
|
|
4294
|
-
open(value) {
|
|
4295
|
-
if (value) {
|
|
4296
|
-
return POPUP_OPEN_HOOK;
|
|
4297
|
-
}
|
|
4298
|
-
return POPUP_CLOSED_HOOK;
|
|
4299
|
-
},
|
|
4300
|
-
anchorHidden(value) {
|
|
4301
|
-
if (value) {
|
|
4302
|
-
return ANCHOR_HIDDEN_HOOK;
|
|
4303
|
-
}
|
|
4304
|
-
return null;
|
|
4305
|
-
}
|
|
4306
|
-
};
|
|
4307
|
-
|
|
4308
|
-
/**
|
|
4309
|
-
* @internal
|
|
4310
|
-
*/
|
|
4311
|
-
const DirectionContext = /*#__PURE__*/React__namespace.createContext(undefined);
|
|
4312
|
-
if (process.env.NODE_ENV !== "production") DirectionContext.displayName = "DirectionContext";
|
|
4313
|
-
function useDirection() {
|
|
4314
|
-
const context = React__namespace.useContext(DirectionContext);
|
|
4315
|
-
return context?.direction ?? 'ltr';
|
|
4316
|
-
}
|
|
4317
|
-
|
|
4318
|
-
function inertValue(value) {
|
|
4319
|
-
if (useRenderElement.isReactVersionAtLeast(19)) {
|
|
4320
|
-
return value;
|
|
4321
|
-
}
|
|
4322
|
-
// compatibility with React < 19
|
|
4323
|
-
return value ? 'true' : undefined;
|
|
4324
|
-
}
|
|
4325
|
-
|
|
4326
|
-
let originalHtmlStyles = {};
|
|
4327
|
-
let originalBodyStyles = {};
|
|
4328
|
-
let originalHtmlScrollBehavior = '';
|
|
4329
|
-
function hasInsetScrollbars(referenceElement) {
|
|
4330
|
-
if (typeof document === 'undefined') {
|
|
4331
|
-
return false;
|
|
4332
|
-
}
|
|
4333
|
-
const doc = clamp.ownerDocument(referenceElement);
|
|
4334
|
-
const win = floatingUi_utils_dom.getWindow(doc);
|
|
4335
|
-
return win.innerWidth - doc.documentElement.clientWidth > 0;
|
|
4336
|
-
}
|
|
4337
|
-
function supportsStableScrollbarGutter(referenceElement) {
|
|
4338
|
-
const supported = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('scrollbar-gutter', 'stable');
|
|
4339
|
-
if (!supported || typeof document === 'undefined') {
|
|
4340
|
-
return false;
|
|
4341
|
-
}
|
|
4342
|
-
const doc = clamp.ownerDocument(referenceElement);
|
|
4343
|
-
const html = doc.documentElement;
|
|
4344
|
-
const body = doc.body;
|
|
4345
|
-
const scrollContainer = floatingUi_utils_dom.isOverflowElement(html) ? html : body;
|
|
4346
|
-
const originalScrollContainerOverflowY = scrollContainer.style.overflowY;
|
|
4347
|
-
const originalHtmlStyleGutter = html.style.scrollbarGutter;
|
|
4348
|
-
html.style.scrollbarGutter = 'stable';
|
|
4349
|
-
scrollContainer.style.overflowY = 'scroll';
|
|
4350
|
-
const before = scrollContainer.offsetWidth;
|
|
4351
|
-
scrollContainer.style.overflowY = 'hidden';
|
|
4352
|
-
const after = scrollContainer.offsetWidth;
|
|
4353
|
-
scrollContainer.style.overflowY = originalScrollContainerOverflowY;
|
|
4354
|
-
html.style.scrollbarGutter = originalHtmlStyleGutter;
|
|
4355
|
-
return before === after;
|
|
4356
|
-
}
|
|
4357
|
-
function preventScrollOverlayScrollbars(referenceElement) {
|
|
4358
|
-
const doc = clamp.ownerDocument(referenceElement);
|
|
4359
|
-
const html = doc.documentElement;
|
|
4360
|
-
const body = doc.body;
|
|
4361
|
-
|
|
4362
|
-
// If an `overflow` style is present on <html>, we need to lock it, because a lock on <body>
|
|
4363
|
-
// won't have any effect.
|
|
4364
|
-
// But if <body> has an `overflow` style (like `overflow-x: hidden`), we need to lock it
|
|
4365
|
-
// instead, as sticky elements shift otherwise.
|
|
4366
|
-
const elementToLock = floatingUi_utils_dom.isOverflowElement(html) ? html : body;
|
|
4367
|
-
const originalElementToLockStyles = {
|
|
4368
|
-
overflowY: elementToLock.style.overflowY,
|
|
4369
|
-
overflowX: elementToLock.style.overflowX
|
|
4370
|
-
};
|
|
4371
|
-
Object.assign(elementToLock.style, {
|
|
4372
|
-
overflowY: 'hidden',
|
|
4373
|
-
overflowX: 'hidden'
|
|
4374
|
-
});
|
|
4375
|
-
return () => {
|
|
4376
|
-
Object.assign(elementToLock.style, originalElementToLockStyles);
|
|
4377
|
-
};
|
|
4378
|
-
}
|
|
4379
|
-
function preventScrollInsetScrollbars(referenceElement) {
|
|
4380
|
-
const doc = clamp.ownerDocument(referenceElement);
|
|
4381
|
-
const html = doc.documentElement;
|
|
4382
|
-
const body = doc.body;
|
|
4383
|
-
const win = floatingUi_utils_dom.getWindow(html);
|
|
4384
|
-
let scrollTop = 0;
|
|
4385
|
-
let scrollLeft = 0;
|
|
4386
|
-
let updateGutterOnly = false;
|
|
4387
|
-
const resizeFrame = clamp.AnimationFrame.create();
|
|
4388
|
-
|
|
4389
|
-
// Pinch-zoom in Safari causes a shift. Just don't lock scroll if there's any pinch-zoom.
|
|
4390
|
-
if (clamp.isWebKit && (win.visualViewport?.scale ?? 1) !== 1) {
|
|
4391
|
-
return () => {};
|
|
4392
|
-
}
|
|
4393
|
-
function lockScroll() {
|
|
4394
|
-
/* DOM reads: */
|
|
4395
|
-
|
|
4396
|
-
const htmlStyles = win.getComputedStyle(html);
|
|
4397
|
-
const bodyStyles = win.getComputedStyle(body);
|
|
4398
|
-
const htmlScrollbarGutterValue = htmlStyles.scrollbarGutter || '';
|
|
4399
|
-
const hasBothEdges = htmlScrollbarGutterValue.includes('both-edges');
|
|
4400
|
-
const scrollbarGutterValue = hasBothEdges ? 'stable both-edges' : 'stable';
|
|
4401
|
-
scrollTop = html.scrollTop;
|
|
4402
|
-
scrollLeft = html.scrollLeft;
|
|
4403
|
-
originalHtmlStyles = {
|
|
4404
|
-
scrollbarGutter: html.style.scrollbarGutter,
|
|
4405
|
-
overflowY: html.style.overflowY,
|
|
4406
|
-
overflowX: html.style.overflowX
|
|
4407
|
-
};
|
|
4408
|
-
originalHtmlScrollBehavior = html.style.scrollBehavior;
|
|
4409
|
-
originalBodyStyles = {
|
|
4410
|
-
position: body.style.position,
|
|
4411
|
-
height: body.style.height,
|
|
4412
|
-
width: body.style.width,
|
|
4413
|
-
boxSizing: body.style.boxSizing,
|
|
4414
|
-
overflowY: body.style.overflowY,
|
|
4415
|
-
overflowX: body.style.overflowX,
|
|
4416
|
-
scrollBehavior: body.style.scrollBehavior
|
|
4417
|
-
};
|
|
4418
|
-
const isScrollableY = html.scrollHeight > html.clientHeight;
|
|
4419
|
-
const isScrollableX = html.scrollWidth > html.clientWidth;
|
|
4420
|
-
const hasConstantOverflowY = htmlStyles.overflowY === 'scroll' || bodyStyles.overflowY === 'scroll';
|
|
4421
|
-
const hasConstantOverflowX = htmlStyles.overflowX === 'scroll' || bodyStyles.overflowX === 'scroll';
|
|
4422
|
-
|
|
4423
|
-
// Values can be negative in Firefox
|
|
4424
|
-
const scrollbarWidth = Math.max(0, win.innerWidth - body.clientWidth);
|
|
4425
|
-
const scrollbarHeight = Math.max(0, win.innerHeight - body.clientHeight);
|
|
4426
|
-
|
|
4427
|
-
// Avoid shift due to the default <body> margin. This does cause elements to be clipped
|
|
4428
|
-
// with whitespace. Warn if <body> has margins?
|
|
4429
|
-
const marginY = parseFloat(bodyStyles.marginTop) + parseFloat(bodyStyles.marginBottom);
|
|
4430
|
-
const marginX = parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight);
|
|
4431
|
-
const elementToLock = floatingUi_utils_dom.isOverflowElement(html) ? html : body;
|
|
4432
|
-
updateGutterOnly = supportsStableScrollbarGutter(referenceElement);
|
|
4433
|
-
|
|
4434
|
-
/*
|
|
4435
|
-
* DOM writes:
|
|
4436
|
-
* Do not read the DOM past this point!
|
|
4437
|
-
*/
|
|
4438
|
-
|
|
4439
|
-
if (updateGutterOnly) {
|
|
4440
|
-
html.style.scrollbarGutter = scrollbarGutterValue;
|
|
4441
|
-
elementToLock.style.overflowY = 'hidden';
|
|
4442
|
-
elementToLock.style.overflowX = 'hidden';
|
|
4443
|
-
return;
|
|
4444
|
-
}
|
|
4445
|
-
Object.assign(html.style, {
|
|
4446
|
-
scrollbarGutter: scrollbarGutterValue,
|
|
4447
|
-
overflowY: 'hidden',
|
|
4448
|
-
overflowX: 'hidden'
|
|
4449
|
-
});
|
|
4450
|
-
if (isScrollableY || hasConstantOverflowY) {
|
|
4451
|
-
html.style.overflowY = 'scroll';
|
|
4452
|
-
}
|
|
4453
|
-
if (isScrollableX || hasConstantOverflowX) {
|
|
4454
|
-
html.style.overflowX = 'scroll';
|
|
4455
|
-
}
|
|
4456
|
-
Object.assign(body.style, {
|
|
4457
|
-
position: 'relative',
|
|
4458
|
-
height: marginY || scrollbarHeight ? `calc(100dvh - ${marginY + scrollbarHeight}px)` : '100dvh',
|
|
4459
|
-
width: marginX || scrollbarWidth ? `calc(100vw - ${marginX + scrollbarWidth}px)` : '100vw',
|
|
4460
|
-
boxSizing: 'border-box',
|
|
4461
|
-
overflow: 'hidden',
|
|
4462
|
-
scrollBehavior: 'unset'
|
|
4463
|
-
});
|
|
4464
|
-
body.scrollTop = scrollTop;
|
|
4465
|
-
body.scrollLeft = scrollLeft;
|
|
4466
|
-
html.setAttribute('data-base-ui-scroll-locked', '');
|
|
4467
|
-
html.style.scrollBehavior = 'unset';
|
|
4468
|
-
}
|
|
4469
|
-
function cleanup() {
|
|
4470
|
-
Object.assign(html.style, originalHtmlStyles);
|
|
4471
|
-
Object.assign(body.style, originalBodyStyles);
|
|
4472
|
-
if (!updateGutterOnly) {
|
|
4473
|
-
html.scrollTop = scrollTop;
|
|
4474
|
-
html.scrollLeft = scrollLeft;
|
|
4475
|
-
html.removeAttribute('data-base-ui-scroll-locked');
|
|
4476
|
-
html.style.scrollBehavior = originalHtmlScrollBehavior;
|
|
4477
|
-
}
|
|
4478
|
-
}
|
|
4479
|
-
function handleResize() {
|
|
4480
|
-
cleanup();
|
|
4481
|
-
resizeFrame.request(lockScroll);
|
|
4482
|
-
}
|
|
4483
|
-
lockScroll();
|
|
4484
|
-
win.addEventListener('resize', handleResize);
|
|
4485
|
-
return () => {
|
|
4486
|
-
resizeFrame.cancel();
|
|
4487
|
-
cleanup();
|
|
4488
|
-
// Sometimes this cleanup can be run after test teardown
|
|
4489
|
-
// because it is called in a `setTimeout(fn, 0)`,
|
|
4490
|
-
// in which case `removeEventListener` wouldn't be available,
|
|
4491
|
-
// so we check for it to avoid test failures.
|
|
4492
|
-
if (typeof win.removeEventListener === 'function') {
|
|
4493
|
-
win.removeEventListener('resize', handleResize);
|
|
4494
|
-
}
|
|
4495
|
-
};
|
|
4496
|
-
}
|
|
4497
|
-
class ScrollLocker {
|
|
4498
|
-
lockCount = 0;
|
|
4499
|
-
restore = null;
|
|
4500
|
-
timeoutLock = clamp.Timeout.create();
|
|
4501
|
-
timeoutUnlock = clamp.Timeout.create();
|
|
4502
|
-
acquire(referenceElement) {
|
|
4503
|
-
this.lockCount += 1;
|
|
4504
|
-
if (this.lockCount === 1 && this.restore === null) {
|
|
4505
|
-
this.timeoutLock.start(0, () => this.lock(referenceElement));
|
|
4506
|
-
}
|
|
4507
|
-
return this.release;
|
|
4508
|
-
}
|
|
4509
|
-
release = () => {
|
|
4510
|
-
this.lockCount -= 1;
|
|
4511
|
-
if (this.lockCount === 0 && this.restore) {
|
|
4512
|
-
this.timeoutUnlock.start(0, this.unlock);
|
|
4513
|
-
}
|
|
4514
|
-
};
|
|
4515
|
-
unlock = () => {
|
|
4516
|
-
if (this.lockCount === 0 && this.restore) {
|
|
4517
|
-
this.restore?.();
|
|
4518
|
-
this.restore = null;
|
|
4519
|
-
}
|
|
4520
|
-
};
|
|
4521
|
-
lock(referenceElement) {
|
|
4522
|
-
if (this.lockCount === 0 || this.restore !== null) {
|
|
4523
|
-
return;
|
|
4524
|
-
}
|
|
4525
|
-
const doc = clamp.ownerDocument(referenceElement);
|
|
4526
|
-
const html = doc.documentElement;
|
|
4527
|
-
const htmlOverflowY = floatingUi_utils_dom.getWindow(html).getComputedStyle(html).overflowY;
|
|
4528
|
-
|
|
4529
|
-
// If the site author already hid overflow on <html>, respect it and bail out.
|
|
4530
|
-
if (htmlOverflowY === 'hidden' || htmlOverflowY === 'clip') {
|
|
4531
|
-
this.restore = useRenderElement.NOOP;
|
|
4532
|
-
return;
|
|
4533
|
-
}
|
|
4534
|
-
const hasOverlayScrollbars = clamp.isIOS || !hasInsetScrollbars(referenceElement);
|
|
4535
|
-
|
|
4536
|
-
// On iOS, scroll locking does not work if the navbar is collapsed. Due to numerous
|
|
4537
|
-
// side effects and bugs that arise on iOS, it must be researched extensively before
|
|
4538
|
-
// being enabled to ensure it doesn't cause the following issues:
|
|
4539
|
-
// - Textboxes must scroll into view when focused, nor cause a glitchy scroll animation.
|
|
4540
|
-
// - The navbar must not force itself into view and cause layout shift.
|
|
4541
|
-
// - Scroll containers must not flicker upon closing a popup when it has an exit animation.
|
|
4542
|
-
this.restore = hasOverlayScrollbars ? preventScrollOverlayScrollbars(referenceElement) : preventScrollInsetScrollbars(referenceElement);
|
|
4543
|
-
}
|
|
4544
|
-
}
|
|
4545
|
-
const SCROLL_LOCKER = new ScrollLocker();
|
|
4546
|
-
|
|
4547
|
-
/**
|
|
4548
|
-
* Locks the scroll of the document when enabled.
|
|
4549
|
-
*
|
|
4550
|
-
* @param enabled - Whether to enable the scroll lock.
|
|
4551
|
-
* @param referenceElement - Element to use as a reference for lock calculations.
|
|
4552
|
-
*/
|
|
4553
|
-
function useScrollLock(enabled = true, referenceElement = null) {
|
|
4554
|
-
clamp.useIsoLayoutEffect(() => {
|
|
4555
|
-
if (!enabled) {
|
|
4556
|
-
return undefined;
|
|
4557
|
-
}
|
|
4558
|
-
return SCROLL_LOCKER.acquire(referenceElement);
|
|
4559
|
-
}, [enabled, referenceElement]);
|
|
4560
|
-
}
|
|
4561
|
-
|
|
4562
|
-
const InternalBackdrop = /*#__PURE__*/React__namespace.forwardRef(function InternalBackdrop(props, ref) {
|
|
4563
|
-
const {
|
|
4564
|
-
cutout,
|
|
4565
|
-
...otherProps
|
|
4566
|
-
} = props;
|
|
4567
|
-
let clipPath;
|
|
4568
|
-
if (cutout) {
|
|
4569
|
-
const rect = cutout?.getBoundingClientRect();
|
|
4570
|
-
clipPath = `polygon(
|
|
4571
|
-
0% 0%,
|
|
4572
|
-
100% 0%,
|
|
4573
|
-
100% 100%,
|
|
4574
|
-
0% 100%,
|
|
4575
|
-
0% 0%,
|
|
4576
|
-
${rect.left}px ${rect.top}px,
|
|
4577
|
-
${rect.left}px ${rect.bottom}px,
|
|
4578
|
-
${rect.right}px ${rect.bottom}px,
|
|
4579
|
-
${rect.right}px ${rect.top}px,
|
|
4580
|
-
${rect.left}px ${rect.top}px
|
|
4581
|
-
)`;
|
|
4582
|
-
}
|
|
4583
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4584
|
-
ref: ref,
|
|
4585
|
-
role: "presentation"
|
|
4586
|
-
// Ensures Floating UI's outside press detection runs, as it considers
|
|
4587
|
-
// it an element that existed when the popup rendered.
|
|
4588
|
-
,
|
|
4589
|
-
"data-base-ui-inert": "",
|
|
4590
|
-
...otherProps,
|
|
4591
|
-
style: {
|
|
4592
|
-
position: 'fixed',
|
|
4593
|
-
inset: 0,
|
|
4594
|
-
userSelect: 'none',
|
|
4595
|
-
WebkitUserSelect: 'none',
|
|
4596
|
-
clipPath
|
|
4597
|
-
}
|
|
4598
|
-
});
|
|
4599
|
-
});
|
|
4600
|
-
if (process.env.NODE_ENV !== "production") InternalBackdrop.displayName = "InternalBackdrop";
|
|
4601
|
-
|
|
4602
407
|
const DialogRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
|
|
4603
408
|
if (process.env.NODE_ENV !== "production") DialogRootContext.displayName = "DialogRootContext";
|
|
4604
409
|
function useDialogRootContext(optional) {
|
|
@@ -4658,8 +463,8 @@ let DrawerBackdropCssVars = /*#__PURE__*/function (DrawerBackdropCssVars) {
|
|
|
4658
463
|
}({});
|
|
4659
464
|
|
|
4660
465
|
const stateAttributesMapping$1 = {
|
|
4661
|
-
...popupStateMapping,
|
|
4662
|
-
...
|
|
466
|
+
...InternalBackdrop.popupStateMapping,
|
|
467
|
+
...useButton.transitionStatusMapping
|
|
4663
468
|
};
|
|
4664
469
|
|
|
4665
470
|
/**
|
|
@@ -4741,19 +546,19 @@ let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
|
|
|
4741
546
|
/**
|
|
4742
547
|
* Present when the drawer is open.
|
|
4743
548
|
*/
|
|
4744
|
-
DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
|
|
549
|
+
DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
|
|
4745
550
|
/**
|
|
4746
551
|
* Present when the drawer is closed.
|
|
4747
552
|
*/
|
|
4748
|
-
DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
|
|
553
|
+
DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
|
|
4749
554
|
/**
|
|
4750
555
|
* Present when the drawer is animating in.
|
|
4751
556
|
*/
|
|
4752
|
-
DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
|
|
557
|
+
DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = InternalBackdrop.CommonPopupDataAttributes.startingStyle] = "startingStyle";
|
|
4753
558
|
/**
|
|
4754
559
|
* Present when the drawer is animating out.
|
|
4755
560
|
*/
|
|
4756
|
-
DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
|
|
561
|
+
DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = InternalBackdrop.CommonPopupDataAttributes.endingStyle] = "endingStyle";
|
|
4757
562
|
/**
|
|
4758
563
|
* Present when the drawer is at the expanded (full-height) snap point.
|
|
4759
564
|
*/
|
|
@@ -4863,8 +668,8 @@ function useDrawerSnapPoints() {
|
|
|
4863
668
|
const viewportElement = store.useState('viewportElement');
|
|
4864
669
|
const [viewportHeight, setViewportHeight] = React__namespace.useState(0);
|
|
4865
670
|
const [rootFontSize, setRootFontSize] = React__namespace.useState(16);
|
|
4866
|
-
const measureViewportHeight =
|
|
4867
|
-
const doc =
|
|
671
|
+
const measureViewportHeight = useButton.useStableCallback(() => {
|
|
672
|
+
const doc = useButton.ownerDocument(viewportElement);
|
|
4868
673
|
const html = doc.documentElement;
|
|
4869
674
|
if (viewportElement) {
|
|
4870
675
|
setViewportHeight(viewportElement.offsetHeight);
|
|
@@ -4877,7 +682,7 @@ function useDrawerSnapPoints() {
|
|
|
4877
682
|
setRootFontSize(fontSize);
|
|
4878
683
|
}
|
|
4879
684
|
});
|
|
4880
|
-
|
|
685
|
+
useButton.useIsoLayoutEffect(() => {
|
|
4881
686
|
measureViewportHeight();
|
|
4882
687
|
if (!viewportElement || typeof ResizeObserver !== 'function') {
|
|
4883
688
|
return undefined;
|
|
@@ -5018,8 +823,8 @@ function removeCSSVariableInheritance$1() {
|
|
|
5018
823
|
drawerSwipeVarsRegistered = true;
|
|
5019
824
|
}
|
|
5020
825
|
const stateAttributesMapping = {
|
|
5021
|
-
...popupStateMapping,
|
|
5022
|
-
...
|
|
826
|
+
...InternalBackdrop.popupStateMapping,
|
|
827
|
+
...useButton.transitionStatusMapping,
|
|
5023
828
|
expanded(value) {
|
|
5024
829
|
return value ? {
|
|
5025
830
|
[DrawerPopupDataAttributes.expanded]: ''
|
|
@@ -5099,7 +904,7 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
|
|
|
5099
904
|
useDialogPortalContext();
|
|
5100
905
|
const [popupHeight, setPopupHeight] = React__namespace.useState(0);
|
|
5101
906
|
const popupHeightRef = React__namespace.useRef(0);
|
|
5102
|
-
const measureHeight =
|
|
907
|
+
const measureHeight = useButton.useStableCallback(() => {
|
|
5103
908
|
const popupElement = store.context.popupRef.current;
|
|
5104
909
|
if (!popupElement) {
|
|
5105
910
|
return;
|
|
@@ -5125,7 +930,7 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
|
|
|
5125
930
|
setPopupHeight(nextHeight);
|
|
5126
931
|
onPopupHeightChange(nextHeight);
|
|
5127
932
|
});
|
|
5128
|
-
|
|
933
|
+
useButton.useIsoLayoutEffect(() => {
|
|
5129
934
|
if (!mounted) {
|
|
5130
935
|
popupHeightRef.current = 0;
|
|
5131
936
|
setPopupHeight(0);
|
|
@@ -5147,7 +952,7 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
|
|
|
5147
952
|
resizeObserver.disconnect();
|
|
5148
953
|
};
|
|
5149
954
|
}, [measureHeight, mounted, nestedDrawerOpen, onPopupHeightChange, store.context.popupRef]);
|
|
5150
|
-
|
|
955
|
+
useButton.useIsoLayoutEffect(() => {
|
|
5151
956
|
const popupRef = store.context.popupRef;
|
|
5152
957
|
const syncNestedSwipeProgress = () => {
|
|
5153
958
|
const popupElement = popupRef.current;
|
|
@@ -5190,7 +995,7 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
|
|
|
5190
995
|
notifyParentHasNestedDrawer(false);
|
|
5191
996
|
};
|
|
5192
997
|
}, [notifyParentHasNestedDrawer, open, transitionStatus]);
|
|
5193
|
-
|
|
998
|
+
useButton.useOpenChangeComplete({
|
|
5194
999
|
open,
|
|
5195
1000
|
ref: store.context.popupRef,
|
|
5196
1001
|
onComplete() {
|
|
@@ -5268,7 +1073,7 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
|
|
|
5268
1073
|
ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
|
|
5269
1074
|
stateAttributesMapping
|
|
5270
1075
|
});
|
|
5271
|
-
return /*#__PURE__*/jsxRuntime.jsx(FloatingFocusManager, {
|
|
1076
|
+
return /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingFocusManager, {
|
|
5272
1077
|
context: floatingRootContext,
|
|
5273
1078
|
openInteractionType: openMethod,
|
|
5274
1079
|
disabled: !mounted,
|
|
@@ -5299,12 +1104,12 @@ const DialogPortal = /*#__PURE__*/React__namespace.forwardRef(function DialogPor
|
|
|
5299
1104
|
}
|
|
5300
1105
|
return /*#__PURE__*/jsxRuntime.jsx(DialogPortalContext.Provider, {
|
|
5301
1106
|
value: keepMounted,
|
|
5302
|
-
children: /*#__PURE__*/jsxRuntime.jsxs(FloatingPortal, {
|
|
1107
|
+
children: /*#__PURE__*/jsxRuntime.jsxs(InternalBackdrop.FloatingPortal, {
|
|
5303
1108
|
ref: forwardedRef,
|
|
5304
1109
|
...portalProps,
|
|
5305
|
-
children: [mounted && modal === true && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop, {
|
|
1110
|
+
children: [mounted && modal === true && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
|
|
5306
1111
|
ref: store.context.internalBackdropRef,
|
|
5307
|
-
inert: inertValue(!open)
|
|
1112
|
+
inert: InternalBackdrop.inertValue(!open)
|
|
5308
1113
|
}), props.children]
|
|
5309
1114
|
})
|
|
5310
1115
|
});
|
|
@@ -5333,20 +1138,20 @@ function useDialogRoot(params) {
|
|
|
5333
1138
|
const {
|
|
5334
1139
|
openMethod,
|
|
5335
1140
|
triggerProps
|
|
5336
|
-
} = useOpenInteractionType(open);
|
|
1141
|
+
} = InternalBackdrop.useOpenInteractionType(open);
|
|
5337
1142
|
useImplicitActiveTrigger(store);
|
|
5338
1143
|
const {
|
|
5339
1144
|
forceUnmount
|
|
5340
1145
|
} = useOpenStateTransitions(open, store);
|
|
5341
|
-
const createDialogEventDetails =
|
|
5342
|
-
const details =
|
|
1146
|
+
const createDialogEventDetails = useButton.useStableCallback(reason => {
|
|
1147
|
+
const details = useButton.createChangeEventDetails(reason);
|
|
5343
1148
|
details.preventUnmountOnClose = () => {
|
|
5344
1149
|
store.set('preventUnmountingOnClose', true);
|
|
5345
1150
|
};
|
|
5346
1151
|
return details;
|
|
5347
1152
|
});
|
|
5348
1153
|
const handleImperativeClose = React__namespace.useCallback(() => {
|
|
5349
|
-
store.setOpen(false, createDialogEventDetails(
|
|
1154
|
+
store.setOpen(false, createDialogEventDetails(useButton.imperativeAction));
|
|
5350
1155
|
}, [store, createDialogEventDetails]);
|
|
5351
1156
|
React__namespace.useImperativeHandle(actionsRef, () => ({
|
|
5352
1157
|
unmount: forceUnmount,
|
|
@@ -5361,7 +1166,7 @@ function useDialogRoot(params) {
|
|
|
5361
1166
|
const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = React__namespace.useState(0);
|
|
5362
1167
|
const isTopmost = ownNestedOpenDialogs === 0;
|
|
5363
1168
|
const role = useRole(floatingRootContext);
|
|
5364
|
-
const dismiss = useDismiss(floatingRootContext, {
|
|
1169
|
+
const dismiss = InternalBackdrop.useDismiss(floatingRootContext, {
|
|
5365
1170
|
outsidePressEvent() {
|
|
5366
1171
|
if (store.context.internalBackdropRef.current || store.context.backdropRef.current) {
|
|
5367
1172
|
return 'intentional';
|
|
@@ -5386,14 +1191,14 @@ function useDialogRoot(params) {
|
|
|
5386
1191
|
if ('touches' in event && event.touches.length !== 1) {
|
|
5387
1192
|
return false;
|
|
5388
1193
|
}
|
|
5389
|
-
const target =
|
|
1194
|
+
const target = useButton.getTarget(event);
|
|
5390
1195
|
if (isTopmost && !disablePointerDismissal) {
|
|
5391
1196
|
const eventTarget = target;
|
|
5392
1197
|
// Only close if the click occurred on the dialog's owning backdrop.
|
|
5393
1198
|
// This supports multiple modal dialogs that aren't nested in the React tree:
|
|
5394
1199
|
// https://github.com/mui/base-ui/issues/1320
|
|
5395
1200
|
if (modal) {
|
|
5396
|
-
return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === eventTarget || store.context.backdropRef.current === eventTarget ||
|
|
1201
|
+
return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === eventTarget || store.context.backdropRef.current === eventTarget || useButton.contains(eventTarget, popupElement) && !eventTarget?.hasAttribute('data-base-ui-portal') : true;
|
|
5397
1202
|
}
|
|
5398
1203
|
return true;
|
|
5399
1204
|
}
|
|
@@ -5401,12 +1206,12 @@ function useDialogRoot(params) {
|
|
|
5401
1206
|
},
|
|
5402
1207
|
escapeKey: isTopmost
|
|
5403
1208
|
});
|
|
5404
|
-
useScrollLock(open && modal === true, popupElement);
|
|
1209
|
+
InternalBackdrop.useScrollLock(open && modal === true, popupElement);
|
|
5405
1210
|
const {
|
|
5406
1211
|
getReferenceProps,
|
|
5407
1212
|
getFloatingProps,
|
|
5408
1213
|
getTriggerProps
|
|
5409
|
-
} = useInteractions([role, dismiss]);
|
|
1214
|
+
} = InternalBackdrop.useInteractions([role, dismiss]);
|
|
5410
1215
|
|
|
5411
1216
|
// Listen for nested open/close events on this store to maintain the count
|
|
5412
1217
|
store.useContextCallback('onNestedDialogOpen', ownChildrenCount => {
|
|
@@ -5445,17 +1250,17 @@ function useDialogRoot(params) {
|
|
|
5445
1250
|
|
|
5446
1251
|
const selectors = {
|
|
5447
1252
|
...popupStoreSelectors,
|
|
5448
|
-
modal: createSelector(state => state.modal),
|
|
5449
|
-
nested: createSelector(state => state.nested),
|
|
5450
|
-
nestedOpenDialogCount: createSelector(state => state.nestedOpenDialogCount),
|
|
5451
|
-
disablePointerDismissal: createSelector(state => state.disablePointerDismissal),
|
|
5452
|
-
openMethod: createSelector(state => state.openMethod),
|
|
5453
|
-
descriptionElementId: createSelector(state => state.descriptionElementId),
|
|
5454
|
-
titleElementId: createSelector(state => state.titleElementId),
|
|
5455
|
-
viewportElement: createSelector(state => state.viewportElement),
|
|
5456
|
-
role: createSelector(state => state.role)
|
|
1253
|
+
modal: InternalBackdrop.createSelector(state => state.modal),
|
|
1254
|
+
nested: InternalBackdrop.createSelector(state => state.nested),
|
|
1255
|
+
nestedOpenDialogCount: InternalBackdrop.createSelector(state => state.nestedOpenDialogCount),
|
|
1256
|
+
disablePointerDismissal: InternalBackdrop.createSelector(state => state.disablePointerDismissal),
|
|
1257
|
+
openMethod: InternalBackdrop.createSelector(state => state.openMethod),
|
|
1258
|
+
descriptionElementId: InternalBackdrop.createSelector(state => state.descriptionElementId),
|
|
1259
|
+
titleElementId: InternalBackdrop.createSelector(state => state.titleElementId),
|
|
1260
|
+
viewportElement: InternalBackdrop.createSelector(state => state.viewportElement),
|
|
1261
|
+
role: InternalBackdrop.createSelector(state => state.role)
|
|
5457
1262
|
};
|
|
5458
|
-
class DialogStore extends ReactStore {
|
|
1263
|
+
class DialogStore extends InternalBackdrop.ReactStore {
|
|
5459
1264
|
constructor(initialState) {
|
|
5460
1265
|
super(createInitialState(initialState), {
|
|
5461
1266
|
popupRef: /*#__PURE__*/React__namespace.createRef(),
|
|
@@ -5464,7 +1269,7 @@ class DialogStore extends ReactStore {
|
|
|
5464
1269
|
outsidePressEnabledRef: {
|
|
5465
1270
|
current: true
|
|
5466
1271
|
},
|
|
5467
|
-
triggerElements: new PopupTriggerMap(),
|
|
1272
|
+
triggerElements: new InternalBackdrop.PopupTriggerMap(),
|
|
5468
1273
|
onOpenChange: undefined,
|
|
5469
1274
|
onOpenChangeComplete: undefined
|
|
5470
1275
|
}, selectors);
|
|
@@ -5555,7 +1360,7 @@ function DialogRoot(props) {
|
|
|
5555
1360
|
}).current;
|
|
5556
1361
|
|
|
5557
1362
|
// Support initially open state when uncontrolled
|
|
5558
|
-
useOnFirstRender(() => {
|
|
1363
|
+
InternalBackdrop.useOnFirstRender(() => {
|
|
5559
1364
|
if (openProp === undefined && store.state.open === false && defaultOpen === true) {
|
|
5560
1365
|
store.update({
|
|
5561
1366
|
open: true,
|
|
@@ -5613,7 +1418,7 @@ const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTr
|
|
|
5613
1418
|
if (!store) {
|
|
5614
1419
|
throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : useRenderElement.formatErrorMessage(79));
|
|
5615
1420
|
}
|
|
5616
|
-
const thisTriggerId =
|
|
1421
|
+
const thisTriggerId = useButton.useBaseUiId(idProp);
|
|
5617
1422
|
const floatingContext = store.useState('floatingRootContext');
|
|
5618
1423
|
const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
|
|
5619
1424
|
const triggerElementRef = React__namespace.useRef(null);
|
|
@@ -5626,14 +1431,14 @@ const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTr
|
|
|
5626
1431
|
const {
|
|
5627
1432
|
getButtonProps,
|
|
5628
1433
|
buttonRef
|
|
5629
|
-
} =
|
|
1434
|
+
} = useButton.useButton({
|
|
5630
1435
|
disabled,
|
|
5631
1436
|
native: nativeButton
|
|
5632
1437
|
});
|
|
5633
|
-
const click = useClick(floatingContext, {
|
|
1438
|
+
const click = InternalBackdrop.useClick(floatingContext, {
|
|
5634
1439
|
enabled: floatingContext != null
|
|
5635
1440
|
});
|
|
5636
|
-
const localInteractionProps = useInteractions([click]);
|
|
1441
|
+
const localInteractionProps = InternalBackdrop.useInteractions([click]);
|
|
5637
1442
|
const state = {
|
|
5638
1443
|
disabled,
|
|
5639
1444
|
open: isOpenedByThisTrigger
|
|
@@ -5643,10 +1448,10 @@ const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTr
|
|
|
5643
1448
|
state,
|
|
5644
1449
|
ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
|
|
5645
1450
|
props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
|
|
5646
|
-
[CLICK_TRIGGER_IDENTIFIER]: '',
|
|
1451
|
+
[InternalBackdrop.CLICK_TRIGGER_IDENTIFIER]: '',
|
|
5647
1452
|
id: thisTriggerId
|
|
5648
1453
|
}, elementProps, getButtonProps],
|
|
5649
|
-
stateAttributesMapping: triggerOpenStateMapping
|
|
1454
|
+
stateAttributesMapping: InternalBackdrop.triggerOpenStateMapping
|
|
5650
1455
|
});
|
|
5651
1456
|
});
|
|
5652
1457
|
if (process.env.NODE_ENV !== "production") DialogTrigger.displayName = "DialogTrigger";
|
|
@@ -5678,7 +1483,7 @@ function DrawerRoot(props) {
|
|
|
5678
1483
|
defaultSnapPoint,
|
|
5679
1484
|
onSnapPointChange: onSnapPointChangeProp
|
|
5680
1485
|
} = props;
|
|
5681
|
-
const onSnapPointChange =
|
|
1486
|
+
const onSnapPointChange = useButton.useStableCallback(onSnapPointChangeProp);
|
|
5682
1487
|
const parentDrawerRootContext = useDrawerRootContext(true);
|
|
5683
1488
|
const notifyParentSwipeProgressChange = parentDrawerRootContext?.onNestedSwipeProgressChange;
|
|
5684
1489
|
const notifyParentFrontmostHeight = parentDrawerRootContext?.onNestedFrontmostHeightChange;
|
|
@@ -5691,15 +1496,15 @@ function DrawerRoot(props) {
|
|
|
5691
1496
|
const [nestedSwipeProgressStore] = React__namespace.useState(createNestedSwipeProgressStore);
|
|
5692
1497
|
const resolvedDefaultSnapPoint = defaultSnapPoint !== undefined ? defaultSnapPoint : snapPoints?.[0] ?? null;
|
|
5693
1498
|
const isSnapPointControlled = snapPointProp !== undefined;
|
|
5694
|
-
const [activeSnapPoint, setActiveSnapPointUnwrapped] =
|
|
1499
|
+
const [activeSnapPoint, setActiveSnapPointUnwrapped] = useButton.useControlled({
|
|
5695
1500
|
controlled: snapPointProp,
|
|
5696
1501
|
default: resolvedDefaultSnapPoint,
|
|
5697
1502
|
name: 'Drawer',
|
|
5698
1503
|
state: 'snapPoint'
|
|
5699
1504
|
});
|
|
5700
1505
|
const isNestedDrawerOpenRef = React__namespace.useRef(false);
|
|
5701
|
-
const setActiveSnapPoint =
|
|
5702
|
-
const resolvedEventDetails = eventDetails ??
|
|
1506
|
+
const setActiveSnapPoint = useButton.useStableCallback((nextSnapPoint, eventDetails) => {
|
|
1507
|
+
const resolvedEventDetails = eventDetails ?? useButton.createChangeEventDetails(useButton.none);
|
|
5703
1508
|
onSnapPointChange?.(nextSnapPoint, resolvedEventDetails);
|
|
5704
1509
|
if (resolvedEventDetails.isCanceled) {
|
|
5705
1510
|
return;
|
|
@@ -5718,13 +1523,13 @@ function DrawerRoot(props) {
|
|
|
5718
1523
|
}
|
|
5719
1524
|
return activeSnapPoint;
|
|
5720
1525
|
}, [activeSnapPoint, isSnapPointControlled, resolvedDefaultSnapPoint, snapPoints]);
|
|
5721
|
-
const onPopupHeightChange =
|
|
1526
|
+
const onPopupHeightChange = useButton.useStableCallback(height => {
|
|
5722
1527
|
setPopupHeight(height);
|
|
5723
1528
|
if (!isNestedDrawerOpenRef.current && height > 0) {
|
|
5724
1529
|
setFrontmostHeight(height);
|
|
5725
1530
|
}
|
|
5726
1531
|
});
|
|
5727
|
-
const onNestedFrontmostHeightChange =
|
|
1532
|
+
const onNestedFrontmostHeightChange = useButton.useStableCallback(height => {
|
|
5728
1533
|
if (height > 0) {
|
|
5729
1534
|
isNestedDrawerOpenRef.current = true;
|
|
5730
1535
|
setFrontmostHeight(height);
|
|
@@ -5735,24 +1540,24 @@ function DrawerRoot(props) {
|
|
|
5735
1540
|
setFrontmostHeight(popupHeight);
|
|
5736
1541
|
}
|
|
5737
1542
|
});
|
|
5738
|
-
const onNestedDrawerPresenceChange =
|
|
1543
|
+
const onNestedDrawerPresenceChange = useButton.useStableCallback(present => {
|
|
5739
1544
|
setHasNestedDrawer(present);
|
|
5740
1545
|
});
|
|
5741
|
-
const onNestedSwipeProgressChange =
|
|
1546
|
+
const onNestedSwipeProgressChange = useButton.useStableCallback(progress => {
|
|
5742
1547
|
nestedSwipeProgressStore.set(progress);
|
|
5743
1548
|
notifyParentSwipeProgressChange?.(progress);
|
|
5744
1549
|
});
|
|
5745
|
-
const onNestedSwipingChange =
|
|
1550
|
+
const onNestedSwipingChange = useButton.useStableCallback(swiping => {
|
|
5746
1551
|
setNestedSwiping(swiping);
|
|
5747
1552
|
notifyParentSwipingChange?.(swiping);
|
|
5748
1553
|
});
|
|
5749
|
-
const handleOpenChange =
|
|
1554
|
+
const handleOpenChange = useButton.useStableCallback((nextOpen, eventDetails) => {
|
|
5750
1555
|
onOpenChange?.(nextOpen, eventDetails);
|
|
5751
1556
|
if (eventDetails.isCanceled) {
|
|
5752
1557
|
return;
|
|
5753
1558
|
}
|
|
5754
1559
|
if (!nextOpen && snapPoints && snapPoints.length > 0) {
|
|
5755
|
-
setActiveSnapPoint(resolvedDefaultSnapPoint,
|
|
1560
|
+
setActiveSnapPoint(resolvedDefaultSnapPoint, useButton.createChangeEventDetails(eventDetails.reason, eventDetails.event, eventDetails.trigger));
|
|
5756
1561
|
}
|
|
5757
1562
|
});
|
|
5758
1563
|
const contextValue = React__namespace.useMemo(() => ({
|
|
@@ -5822,7 +1627,7 @@ function createNestedSwipeProgressStore() {
|
|
|
5822
1627
|
};
|
|
5823
1628
|
}
|
|
5824
1629
|
function DrawerProviderReporter() {
|
|
5825
|
-
const drawerId =
|
|
1630
|
+
const drawerId = useButton.useId();
|
|
5826
1631
|
const providerContext = useDrawerProviderContext();
|
|
5827
1632
|
const dialogRootContext = useDialogRootContext(false);
|
|
5828
1633
|
const open = dialogRootContext.store.useState('open');
|
|
@@ -5846,7 +1651,7 @@ function DrawerProviderReporter() {
|
|
|
5846
1651
|
React__namespace.useEffect(() => {
|
|
5847
1652
|
// CloseWatcher enables the Android back gesture (Chromium-only).
|
|
5848
1653
|
// Keep this Android-only for now to avoid interfering with Escape/nesting semantics on desktop due to `useDismiss`.
|
|
5849
|
-
if (!open || !isTopmost || !
|
|
1654
|
+
if (!open || !isTopmost || !useButton.isAndroid) {
|
|
5850
1655
|
return undefined;
|
|
5851
1656
|
}
|
|
5852
1657
|
const win = floatingUi_utils_dom.getWindow(popupElement);
|
|
@@ -5858,7 +1663,7 @@ function DrawerProviderReporter() {
|
|
|
5858
1663
|
if (!dialogRootContext.store.select('open')) {
|
|
5859
1664
|
return;
|
|
5860
1665
|
}
|
|
5861
|
-
dialogRootContext.store.setOpen(false,
|
|
1666
|
+
dialogRootContext.store.setOpen(false, useButton.createChangeEventDetails(useButton.closeWatcher, event));
|
|
5862
1667
|
}
|
|
5863
1668
|
const closeWatcher = new CloseWatcherCtor();
|
|
5864
1669
|
closeWatcher.addEventListener('close', handleCloseWatcher);
|
|
@@ -6078,9 +1883,9 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
|
|
|
6078
1883
|
...elementProps
|
|
6079
1884
|
} = componentProps;
|
|
6080
1885
|
const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
|
|
6081
|
-
const rootId =
|
|
6082
|
-
const scrollYTimeout =
|
|
6083
|
-
const scrollXTimeout =
|
|
1886
|
+
const rootId = useButton.useBaseUiId();
|
|
1887
|
+
const scrollYTimeout = useButton.useTimeout();
|
|
1888
|
+
const scrollXTimeout = useButton.useTimeout();
|
|
6084
1889
|
const {
|
|
6085
1890
|
nonce,
|
|
6086
1891
|
disableStyleElements
|
|
@@ -6108,7 +1913,7 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
|
|
|
6108
1913
|
const startScrollLeftRef = React__namespace.useRef(0);
|
|
6109
1914
|
const currentOrientationRef = React__namespace.useRef('vertical');
|
|
6110
1915
|
const scrollPositionRef = React__namespace.useRef(DEFAULT_COORDS);
|
|
6111
|
-
const handleScroll =
|
|
1916
|
+
const handleScroll = useButton.useStableCallback(scrollPosition => {
|
|
6112
1917
|
const offsetX = scrollPosition.x - scrollPositionRef.current.x;
|
|
6113
1918
|
const offsetY = scrollPosition.y - scrollPositionRef.current.y;
|
|
6114
1919
|
scrollPositionRef.current = scrollPosition;
|
|
@@ -6125,7 +1930,7 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
|
|
|
6125
1930
|
});
|
|
6126
1931
|
}
|
|
6127
1932
|
});
|
|
6128
|
-
const handlePointerDown =
|
|
1933
|
+
const handlePointerDown = useButton.useStableCallback(event => {
|
|
6129
1934
|
if (event.button !== 0) {
|
|
6130
1935
|
return;
|
|
6131
1936
|
}
|
|
@@ -6144,7 +1949,7 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
|
|
|
6144
1949
|
thumbXRef.current.setPointerCapture(event.pointerId);
|
|
6145
1950
|
}
|
|
6146
1951
|
});
|
|
6147
|
-
const handlePointerMove =
|
|
1952
|
+
const handlePointerMove = useButton.useStableCallback(event => {
|
|
6148
1953
|
if (!thumbDraggingRef.current) {
|
|
6149
1954
|
return;
|
|
6150
1955
|
}
|
|
@@ -6183,7 +1988,7 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
|
|
|
6183
1988
|
}
|
|
6184
1989
|
}
|
|
6185
1990
|
});
|
|
6186
|
-
const handlePointerUp =
|
|
1991
|
+
const handlePointerUp = useButton.useStableCallback(event => {
|
|
6187
1992
|
thumbDraggingRef.current = false;
|
|
6188
1993
|
if (thumbYRef.current && currentOrientationRef.current === 'vertical') {
|
|
6189
1994
|
thumbYRef.current.releasePointerCapture(event.pointerId);
|
|
@@ -6198,7 +2003,7 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
|
|
|
6198
2003
|
function handlePointerEnterOrMove(event) {
|
|
6199
2004
|
handleTouchModalityChange(event);
|
|
6200
2005
|
if (event.pointerType !== 'touch') {
|
|
6201
|
-
const isTargetRootChild =
|
|
2006
|
+
const isTargetRootChild = useButton.contains(rootRef.current, event.target);
|
|
6202
2007
|
setHovering(isTargetRootChild);
|
|
6203
2008
|
}
|
|
6204
2009
|
}
|
|
@@ -6381,7 +2186,7 @@ function removeCSSVariableInheritance() {
|
|
|
6381
2186
|
if (scrollAreaOverflowVarsRegistered ||
|
|
6382
2187
|
// When `inherits: false`, specifying `inherit` on child elements doesn't work
|
|
6383
2188
|
// in Safari. To let CSS features work correctly, this optimization must be skipped.
|
|
6384
|
-
|
|
2189
|
+
useButton.isWebKit) {
|
|
6385
2190
|
return;
|
|
6386
2191
|
}
|
|
6387
2192
|
if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
|
|
@@ -6435,12 +2240,12 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
|
|
|
6435
2240
|
scrollingX,
|
|
6436
2241
|
scrollingY
|
|
6437
2242
|
} = useScrollAreaRootContext();
|
|
6438
|
-
const direction = useDirection();
|
|
2243
|
+
const direction = InternalBackdrop.useDirection();
|
|
6439
2244
|
const programmaticScrollRef = React__namespace.useRef(true);
|
|
6440
2245
|
const lastMeasuredViewportMetricsRef = React__namespace.useRef([NaN, NaN, NaN, NaN]);
|
|
6441
|
-
const scrollEndTimeout =
|
|
6442
|
-
const waitForAnimationsTimeout =
|
|
6443
|
-
const computeThumbPosition =
|
|
2246
|
+
const scrollEndTimeout = useButton.useTimeout();
|
|
2247
|
+
const waitForAnimationsTimeout = useButton.useTimeout();
|
|
2248
|
+
const computeThumbPosition = useButton.useStableCallback(() => {
|
|
6444
2249
|
const viewportEl = viewportRef.current;
|
|
6445
2250
|
const scrollbarYEl = scrollbarYRef.current;
|
|
6446
2251
|
const scrollbarXEl = scrollbarXRef.current;
|
|
@@ -6578,7 +2383,7 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
|
|
|
6578
2383
|
return nextOverflowEdges;
|
|
6579
2384
|
});
|
|
6580
2385
|
});
|
|
6581
|
-
|
|
2386
|
+
useButton.useIsoLayoutEffect(() => {
|
|
6582
2387
|
if (!viewportRef.current) {
|
|
6583
2388
|
return undefined;
|
|
6584
2389
|
}
|
|
@@ -6590,11 +2395,11 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
|
|
|
6590
2395
|
computeThumbPosition();
|
|
6591
2396
|
});
|
|
6592
2397
|
}, [computeThumbPosition, viewportRef]);
|
|
6593
|
-
|
|
2398
|
+
useButton.useIsoLayoutEffect(() => {
|
|
6594
2399
|
// Wait for scrollbar and thumb refs after hidden-state toggles, and refresh math on direction flips.
|
|
6595
2400
|
queueMicrotask(computeThumbPosition);
|
|
6596
2401
|
}, [computeThumbPosition, hiddenState, direction]);
|
|
6597
|
-
|
|
2402
|
+
useButton.useIsoLayoutEffect(() => {
|
|
6598
2403
|
// `onMouseEnter` doesn't fire upon load, so we need to check if the viewport is already
|
|
6599
2404
|
// being hovered.
|
|
6600
2405
|
if (viewportRef.current?.matches(':hover')) {
|
|
@@ -6727,12 +2532,8 @@ function mergeHiddenState(prevState, nextState) {
|
|
|
6727
2532
|
return nextState;
|
|
6728
2533
|
}
|
|
6729
2534
|
|
|
6730
|
-
exports.BASE_UI_SWIPE_IGNORE_SELECTOR = BASE_UI_SWIPE_IGNORE_SELECTOR;
|
|
6731
2535
|
exports.COMPOSITE_KEYS = COMPOSITE_KEYS;
|
|
6732
|
-
exports.CommonPopupDataAttributes = CommonPopupDataAttributes;
|
|
6733
|
-
exports.DISABLED_TRANSITIONS_STYLE = DISABLED_TRANSITIONS_STYLE;
|
|
6734
2536
|
exports.DRAWER_CONTENT_ATTRIBUTE = DRAWER_CONTENT_ATTRIBUTE;
|
|
6735
|
-
exports.DROPDOWN_COLLISION_AVOIDANCE = DROPDOWN_COLLISION_AVOIDANCE;
|
|
6736
2537
|
exports.DialogStore = DialogStore;
|
|
6737
2538
|
exports.DrawerBackdrop = DrawerBackdrop;
|
|
6738
2539
|
exports.DrawerBackdropCssVars = DrawerBackdropCssVars;
|
|
@@ -6745,72 +2546,23 @@ exports.DrawerProviderContext = DrawerProviderContext;
|
|
|
6745
2546
|
exports.DrawerRoot = DrawerRoot;
|
|
6746
2547
|
exports.DrawerTrigger = DrawerTrigger;
|
|
6747
2548
|
exports.DrawerViewportContext = DrawerViewportContext;
|
|
6748
|
-
exports.FloatingFocusManager = FloatingFocusManager;
|
|
6749
|
-
exports.FloatingNode = FloatingNode;
|
|
6750
|
-
exports.FloatingPortal = FloatingPortal;
|
|
6751
|
-
exports.FloatingRootStore = FloatingRootStore;
|
|
6752
|
-
exports.FloatingTree = FloatingTree;
|
|
6753
|
-
exports.FloatingTreeStore = FloatingTreeStore;
|
|
6754
|
-
exports.FocusGuard = FocusGuard;
|
|
6755
|
-
exports.InternalBackdrop = InternalBackdrop;
|
|
6756
|
-
exports.PATIENT_CLICK_THRESHOLD = PATIENT_CLICK_THRESHOLD;
|
|
6757
|
-
exports.POPUP_COLLISION_AVOIDANCE = POPUP_COLLISION_AVOIDANCE;
|
|
6758
|
-
exports.PopupTriggerMap = PopupTriggerMap;
|
|
6759
|
-
exports.ReactStore = ReactStore;
|
|
6760
2549
|
exports.ScrollAreaRoot = ScrollAreaRoot;
|
|
6761
2550
|
exports.ScrollAreaRootCssVars = ScrollAreaRootCssVars;
|
|
6762
2551
|
exports.ScrollAreaViewport = ScrollAreaViewport;
|
|
6763
|
-
exports.Store = Store;
|
|
6764
|
-
exports.TYPEAHEAD_RESET_MS = TYPEAHEAD_RESET_MS;
|
|
6765
|
-
exports.createAttribute = createAttribute;
|
|
6766
|
-
exports.createGridCellMap = createGridCellMap;
|
|
6767
2552
|
exports.createInitialPopupStoreState = createInitialPopupStoreState;
|
|
6768
|
-
exports.createSelector = createSelector;
|
|
6769
|
-
exports.enqueueFocus = enqueueFocus;
|
|
6770
|
-
exports.fastComponent = fastComponent;
|
|
6771
|
-
exports.fastComponentRef = fastComponentRef;
|
|
6772
|
-
exports.findNonDisabledListIndex = findNonDisabledListIndex;
|
|
6773
|
-
exports.getGridCellIndexOfCorner = getGridCellIndexOfCorner;
|
|
6774
|
-
exports.getGridCellIndices = getGridCellIndices;
|
|
6775
|
-
exports.getGridNavigatedIndex = getGridNavigatedIndex;
|
|
6776
|
-
exports.getMaxListIndex = getMaxListIndex;
|
|
6777
|
-
exports.getMinListIndex = getMinListIndex;
|
|
6778
|
-
exports.getNextTabbable = getNextTabbable;
|
|
6779
|
-
exports.getNodeChildren = getNodeChildren;
|
|
6780
2553
|
exports.getOffset = getOffset;
|
|
6781
|
-
exports.getTabbableAfterElement = getTabbableAfterElement;
|
|
6782
|
-
exports.getTabbableBeforeElement = getTabbableBeforeElement;
|
|
6783
|
-
exports.inertValue = inertValue;
|
|
6784
|
-
exports.isElementVisible = isElementVisible;
|
|
6785
|
-
exports.isIndexOutOfListBounds = isIndexOutOfListBounds;
|
|
6786
|
-
exports.isListIndexDisabled = isListIndexDisabled;
|
|
6787
|
-
exports.isOutsideEvent = isOutsideEvent;
|
|
6788
|
-
exports.popupStateMapping = popupStateMapping;
|
|
6789
2554
|
exports.popupStoreSelectors = popupStoreSelectors;
|
|
6790
|
-
exports.pressableTriggerOpenStateMapping = pressableTriggerOpenStateMapping;
|
|
6791
2555
|
exports.scrollAreaStateAttributesMapping = scrollAreaStateAttributesMapping;
|
|
6792
|
-
exports.triggerOpenStateMapping = triggerOpenStateMapping;
|
|
6793
|
-
exports.useClick = useClick;
|
|
6794
2556
|
exports.useDialogPortalContext = useDialogPortalContext;
|
|
6795
2557
|
exports.useDialogRootContext = useDialogRootContext;
|
|
6796
|
-
exports.useDirection = useDirection;
|
|
6797
|
-
exports.useDismiss = useDismiss;
|
|
6798
2558
|
exports.useDrawerProviderContext = useDrawerProviderContext;
|
|
6799
2559
|
exports.useDrawerRootContext = useDrawerRootContext;
|
|
6800
2560
|
exports.useDrawerSnapPoints = useDrawerSnapPoints;
|
|
6801
|
-
exports.useFloatingNodeId = useFloatingNodeId;
|
|
6802
|
-
exports.useFloatingParentNodeId = useFloatingParentNodeId;
|
|
6803
|
-
exports.useFloatingTree = useFloatingTree;
|
|
6804
2561
|
exports.useImplicitActiveTrigger = useImplicitActiveTrigger;
|
|
6805
|
-
exports.useInteractions = useInteractions;
|
|
6806
|
-
exports.useOnFirstRender = useOnFirstRender;
|
|
6807
|
-
exports.useOpenInteractionType = useOpenInteractionType;
|
|
6808
2562
|
exports.useOpenStateTransitions = useOpenStateTransitions;
|
|
6809
2563
|
exports.useRole = useRole;
|
|
6810
2564
|
exports.useScrollAreaRootContext = useScrollAreaRootContext;
|
|
6811
2565
|
exports.useScrollAreaViewportContext = useScrollAreaViewportContext;
|
|
6812
|
-
exports.useScrollLock = useScrollLock;
|
|
6813
|
-
exports.useStore = useStore;
|
|
6814
2566
|
exports.useSyncedFloatingRootContext = useSyncedFloatingRootContext;
|
|
6815
2567
|
exports.useTriggerDataForwarding = useTriggerDataForwarding;
|
|
6816
2568
|
exports.useTriggerRegistration = useTriggerRegistration;
|