@dnd-kit/dom 0.3.1 → 0.3.2
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/index.cjs +84 -42
- package/index.cjs.map +1 -1
- package/index.js +84 -42
- package/index.js.map +1 -1
- package/package.json +5 -5
package/index.cjs
CHANGED
|
@@ -325,8 +325,8 @@ var Cursor = class extends abstract.Plugin {
|
|
|
325
325
|
});
|
|
326
326
|
}
|
|
327
327
|
};
|
|
328
|
-
var
|
|
329
|
-
var _roots_dec, _targetRoot_dec, _sourceRoot_dec, _additionalRoots_dec, _a, _registeredRules, _init, _additionalRoots, _StyleSheetManager_instances, syncStyles_fn, inject_fn;
|
|
328
|
+
var styleRegistry = /* @__PURE__ */ new Map();
|
|
329
|
+
var _roots_dec, _targetRoot_dec, _sourceRoot_dec, _additionalRoots_dec, _a, _registeredRules, _init, _additionalRoots, _StyleSheetManager_instances, syncStyles_fn, inject_fn, injectStyleElement_fn, injectAdoptedSheet_fn;
|
|
330
330
|
var StyleSheetManager = class extends (_a = abstract.CorePlugin, _additionalRoots_dec = [state.reactive], _sourceRoot_dec = [state.derived], _targetRoot_dec = [state.derived], _roots_dec = [state.derived], _a) {
|
|
331
331
|
constructor(manager) {
|
|
332
332
|
super(manager);
|
|
@@ -407,50 +407,20 @@ syncStyles_fn = function() {
|
|
|
407
407
|
};
|
|
408
408
|
};
|
|
409
409
|
inject_fn = function(root, cssRules) {
|
|
410
|
-
let
|
|
411
|
-
if (!
|
|
412
|
-
|
|
413
|
-
|
|
410
|
+
let rootStyles = styleRegistry.get(root);
|
|
411
|
+
if (!rootStyles) {
|
|
412
|
+
rootStyles = /* @__PURE__ */ new Map();
|
|
413
|
+
styleRegistry.set(root, rootStyles);
|
|
414
414
|
}
|
|
415
|
-
let registration =
|
|
415
|
+
let registration = rootStyles.get(cssRules);
|
|
416
416
|
if (!registration) {
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
"Cannot inject styles: This browser doesn't support adoptedStyleSheets"
|
|
420
|
-
);
|
|
421
|
-
}
|
|
422
|
-
const targetWindow = utilities.isDocument(root) ? root.defaultView : root.ownerDocument.defaultView;
|
|
423
|
-
const { CSSStyleSheet } = targetWindow != null ? targetWindow : {};
|
|
424
|
-
if (!CSSStyleSheet) {
|
|
425
|
-
if (process.env.NODE_ENV !== "production") {
|
|
426
|
-
console.error(
|
|
427
|
-
"Cannot inject styles: CSSStyleSheet constructor not available"
|
|
428
|
-
);
|
|
429
|
-
}
|
|
417
|
+
const created = utilities.isDocument(root) ? __privateMethod(this, _StyleSheetManager_instances, injectStyleElement_fn).call(this, root, rootStyles, cssRules) : __privateMethod(this, _StyleSheetManager_instances, injectAdoptedSheet_fn).call(this, root, rootStyles, cssRules);
|
|
418
|
+
if (!created) {
|
|
430
419
|
return () => {
|
|
431
420
|
};
|
|
432
421
|
}
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
root.adoptedStyleSheets.push(sheet);
|
|
436
|
-
registration = {
|
|
437
|
-
sheet,
|
|
438
|
-
refCount: 0,
|
|
439
|
-
cleanup: () => {
|
|
440
|
-
var _a5;
|
|
441
|
-
if (utilities.isDocument(root) || utilities.isShadowRoot(root) && ((_a5 = root.host) == null ? void 0 : _a5.isConnected)) {
|
|
442
|
-
const index = root.adoptedStyleSheets.indexOf(sheet);
|
|
443
|
-
if (index !== -1) {
|
|
444
|
-
root.adoptedStyleSheets.splice(index, 1);
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
|
-
rootSheets.delete(cssRules);
|
|
448
|
-
if (rootSheets.size === 0) {
|
|
449
|
-
sheetRegistry.delete(root);
|
|
450
|
-
}
|
|
451
|
-
}
|
|
452
|
-
};
|
|
453
|
-
rootSheets.set(cssRules, registration);
|
|
422
|
+
registration = created;
|
|
423
|
+
rootStyles.set(cssRules, registration);
|
|
454
424
|
}
|
|
455
425
|
registration.refCount++;
|
|
456
426
|
let disposed = false;
|
|
@@ -463,6 +433,78 @@ inject_fn = function(root, cssRules) {
|
|
|
463
433
|
}
|
|
464
434
|
};
|
|
465
435
|
};
|
|
436
|
+
/**
|
|
437
|
+
* For Document roots, prepend a <style> element to <head> so that any
|
|
438
|
+
* @layer declarations appear before layers from regular stylesheets,
|
|
439
|
+
* giving them the lowest cascade priority.
|
|
440
|
+
*/
|
|
441
|
+
injectStyleElement_fn = function(root, rootStyles, cssRules) {
|
|
442
|
+
const style = root.createElement("style");
|
|
443
|
+
style.textContent = cssRules;
|
|
444
|
+
root.head.prepend(style);
|
|
445
|
+
const observer = new MutationObserver((entries) => {
|
|
446
|
+
for (const entry of entries) {
|
|
447
|
+
for (const node of Array.from(entry.removedNodes)) {
|
|
448
|
+
if (node === style) {
|
|
449
|
+
root.head.prepend(style);
|
|
450
|
+
return;
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
});
|
|
455
|
+
observer.observe(root.head, { childList: true });
|
|
456
|
+
return {
|
|
457
|
+
refCount: 0,
|
|
458
|
+
cleanup: () => {
|
|
459
|
+
observer.disconnect();
|
|
460
|
+
style.remove();
|
|
461
|
+
rootStyles.delete(cssRules);
|
|
462
|
+
if (rootStyles.size === 0) {
|
|
463
|
+
styleRegistry.delete(root);
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
};
|
|
467
|
+
};
|
|
468
|
+
/**
|
|
469
|
+
* For ShadowRoot roots, use adoptedStyleSheets to avoid DOM side effects
|
|
470
|
+
* like interfering with :first-child or :nth-child selectors.
|
|
471
|
+
*/
|
|
472
|
+
injectAdoptedSheet_fn = function(root, rootStyles, cssRules) {
|
|
473
|
+
if (!("adoptedStyleSheets" in root && Array.isArray(root.adoptedStyleSheets)) && process.env.NODE_ENV !== "production") {
|
|
474
|
+
console.error(
|
|
475
|
+
"Cannot inject styles: This browser doesn't support adoptedStyleSheets"
|
|
476
|
+
);
|
|
477
|
+
}
|
|
478
|
+
const targetWindow = root.ownerDocument.defaultView;
|
|
479
|
+
const { CSSStyleSheet } = targetWindow != null ? targetWindow : {};
|
|
480
|
+
if (!CSSStyleSheet) {
|
|
481
|
+
if (process.env.NODE_ENV !== "production") {
|
|
482
|
+
console.error(
|
|
483
|
+
"Cannot inject styles: CSSStyleSheet constructor not available"
|
|
484
|
+
);
|
|
485
|
+
}
|
|
486
|
+
return null;
|
|
487
|
+
}
|
|
488
|
+
const sheet = new CSSStyleSheet();
|
|
489
|
+
sheet.replaceSync(cssRules);
|
|
490
|
+
root.adoptedStyleSheets.push(sheet);
|
|
491
|
+
return {
|
|
492
|
+
refCount: 0,
|
|
493
|
+
cleanup: () => {
|
|
494
|
+
var _a5;
|
|
495
|
+
if (utilities.isShadowRoot(root) && ((_a5 = root.host) == null ? void 0 : _a5.isConnected)) {
|
|
496
|
+
const index = root.adoptedStyleSheets.indexOf(sheet);
|
|
497
|
+
if (index !== -1) {
|
|
498
|
+
root.adoptedStyleSheets.splice(index, 1);
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
rootStyles.delete(cssRules);
|
|
502
|
+
if (rootStyles.size === 0) {
|
|
503
|
+
styleRegistry.delete(root);
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
};
|
|
507
|
+
};
|
|
466
508
|
__decorateElement(_init, 4, "additionalRoots", _additionalRoots_dec, StyleSheetManager, _additionalRoots);
|
|
467
509
|
__decorateElement(_init, 2, "sourceRoot", _sourceRoot_dec, StyleSheetManager);
|
|
468
510
|
__decorateElement(_init, 2, "targetRoot", _targetRoot_dec, StyleSheetManager);
|
|
@@ -522,7 +564,7 @@ var CSS_RULES = `
|
|
|
522
564
|
transform-origin: var(${CSS_PREFIX}transform-origin) !important;
|
|
523
565
|
}
|
|
524
566
|
|
|
525
|
-
@layer {
|
|
567
|
+
@layer dnd-kit {
|
|
526
568
|
:where([${ATTRIBUTE}][popover]) {
|
|
527
569
|
overflow: visible;
|
|
528
570
|
background: unset;
|