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