@mantine/schedule 9.6.0 → 9.6.2

package/styles.css

@@ -215,6 +215,37 @@
     cursor: default;
   }
 
+  .m_1ac94670:where([data-cascade]) {
+    z-index: var(--event-z-index, 3);
+    transition: z-index 0s;
+  }
+
+  .m_1ac94670:where([data-cascade]) .m_71699dc6 {
+      box-shadow: 0 0 0 1px var(--mantine-color-body);
+    }
+
+  @media (hover: hover) {
+
+  .m_1ac94670:where([data-cascade]):where(:not([data-resizing], [data-dragging])):hover {
+        z-index: var(--event-z-index-raised, 9);
+        transition-delay: var(--event-raise-delay, 600ms);
+  }
+}
+
+  @media (hover: none) {
+
+  .m_1ac94670:where([data-cascade]):where(:not([data-resizing], [data-dragging])):active {
+        z-index: var(--event-z-index-raised, 9);
+        transition-delay: var(--event-raise-delay, 600ms);
+  }
+}
+
+  /* Keyboard focus reveals a covered event immediately, hover waits for the dwell delay */
+
+  .m_1ac94670:where([data-cascade]):where(:not([data-resizing], [data-dragging])):where(:focus-visible) {
+        z-index: var(--event-z-index-raised, 9);
+      }
+
   .m_1ac94670:where([data-resizing]) {
     z-index: 10;
   }
@@ -233,6 +264,10 @@
   }
 }
 
+  .m_1ac94670:where([data-cascade][data-resizing]) {
+    z-index: var(--event-cascade-interaction-z-index, 999);
+  }
+
   .m_1ac94670:where([data-hanging='start'], [data-hanging='both'])::before {
       content: '';
       position: absolute;
@@ -751,6 +786,19 @@
   position: relative;
 }
 
+/* Cascade events stack with an unbounded z-index, keep them out of the sticky header's layer */
+
+.m_9389813:where(:has([data-cascade])) {
+    isolation: isolate;
+
+    /* Drag and resize feedback must stay above every cascade column */
+    --event-cascade-interaction-z-index: 999;
+  }
+
+.m_9389813:where(:has([data-cascade])) .m_2d4819df {
+      z-index: var(--event-cascade-interaction-z-index);
+    }
+
 .m_9389813:where(:first-of-type) .m_cd179e73:where([data-first]) {
     border-top-color: transparent;
   }
@@ -936,9 +984,82 @@
   }
 }
 
-.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging]) .m_c5cd9a77 {
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_c5cd9a77:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_c5cd9a77:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+.m_cddb9413 {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40%;
+  max-width: calc(2.5rem * var(--mantine-scale));
+  height: calc(0.25rem * var(--mantine-scale));
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  cursor: ns-resize;
+  pointer-events: all;
+  z-index: 4;
+  touch-action: none;
+  background-color: var(--bg-event-color);
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.m_cddb9413::before {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25rem * var(--mantine-scale)) calc(-0.375rem * var(--mantine-scale));
+  }
+
+.m_cddb9413:where([data-edge='top']) {
+    top: 0;
+  }
+
+.m_cddb9413:where([data-edge='bottom']) {
+    bottom: 0;
+  }
+
+.m_c5cd9a77:where(:hover, [data-resizing]) .m_cddb9413 {
+    opacity: 0.5;
+  }
+
+@media (hover: hover) {
+
+  .m_cddb9413:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (hover: none) {
+
+  .m_cddb9413:active {
+    opacity: 0.8;
+  }
+}
+
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
+.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging])
+  .m_c5cd9a77:not([data-resizing]) {
   pointer-events: none;
 }
+.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging])
+  .m_c5cd9a77:not([data-resizing]) .m_cddb9413 {
+    pointer-events: none;
+    opacity: 0;
+  }
 
 .m_c6f08d70 {
   position: relative;
@@ -1816,16 +1937,100 @@
   }
 }
 
-.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f,
-.m_6b2099af:where([data-event-interaction]) .m_41ce8f1f,
-.m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f {
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_41ce8f1f:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_41ce8f1f:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+.m_b20accbb {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40%;
+  max-width: calc(2.5rem * var(--mantine-scale));
+  height: calc(0.25rem * var(--mantine-scale));
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  cursor: ns-resize;
+  pointer-events: all;
+  z-index: 4;
+  touch-action: none;
+  background-color: var(--bg-event-color);
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.m_b20accbb::before {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25rem * var(--mantine-scale)) calc(-0.375rem * var(--mantine-scale));
+  }
+
+.m_b20accbb:where([data-edge='top']) {
+    top: 0;
+  }
+
+.m_b20accbb:where([data-edge='bottom']) {
+    bottom: 0;
+  }
+
+.m_41ce8f1f:where(:hover, [data-resizing]) .m_b20accbb {
+    opacity: 0.5;
+  }
+
+@media (hover: hover) {
+
+  .m_b20accbb:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (hover: none) {
+
+  .m_b20accbb:active {
+    opacity: 0.8;
+  }
+}
+
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
+.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f:not([data-resizing]),
+.m_6b2099af:where([data-event-interaction]) .m_41ce8f1f:not([data-resizing]),
+.m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f:not([data-resizing]) {
   pointer-events: none;
 }
+.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f:not([data-resizing]) .m_b20accbb, .m_6b2099af:where([data-event-interaction]) .m_41ce8f1f:not([data-resizing]) .m_b20accbb, .m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f:not([data-resizing]) .m_b20accbb {
+    pointer-events: none;
+    opacity: 0;
+  }
 
 .m_cd58ae46 {
   position: relative;
 }
 
+/* Cascade events stack with an unbounded z-index, keep them out of the sticky header's layer */
+
+.m_cd58ae46:where(:has([data-cascade])) {
+    isolation: isolate;
+
+    /* Drag and resize feedback must stay above every cascade column */
+    --event-cascade-interaction-z-index: 999;
+  }
+
+.m_cd58ae46:where(:has([data-cascade])) .m_e0da287 {
+      z-index: var(--event-cascade-interaction-z-index);
+    }
+
 .m_8ac0cbcd {
   display: block;
   width: 100%;
@@ -2749,6 +2954,22 @@
   }
 }
 
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_9cc838bf:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_9cc838bf:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
 .m_d6d6dd52 {
   position: absolute;
   inset-inline: calc(0.0625rem * var(--mantine-scale));
@@ -2810,10 +3031,46 @@
   pointer-events: none;
 }
 
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
 .m_25154d8d:where([data-event-interaction], [data-slot-dragging])
-  .m_9cc838bf {
+  .m_9cc838bf:not([data-resizing]) {
   pointer-events: none;
 }
+.m_25154d8d:where([data-event-interaction], [data-slot-dragging])
+  .m_9cc838bf:not([data-resizing]) .m_97715629 {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+.m_9cc838bf .m_97715629 {
+    background-color: var(--bg-event-color);
+  }
+
+.m_9cc838bf .m_97715629:where([data-edge='start']) {
+      left: 0;
+    }
+
+.m_9cc838bf .m_97715629:where([data-edge='end']) {
+      right: 0;
+    }
+
+.m_9cc838bf:hover .m_97715629 {
+    opacity: 0.5;
+  }
+
+.m_9cc838bf .m_97715629:hover {
+    opacity: 0.8;
+  }
+
+.m_9cc838bf:where([data-resizing]) .m_97715629:where([data-active]) {
+    opacity: 0.8;
+  }
+
+.m_9cc838bf:where([data-resizing]) .m_97715629:not([data-active]) {
+    opacity: 0;
+    pointer-events: none;
+  }
 
 .m_25154d8d:where([data-resizing]) * {
     cursor: ew-resize !important;
@@ -3190,6 +3447,22 @@
   }
 }
 
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_3c19323d:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_3c19323d:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
 .m_682c45d0 {
   position: absolute;
   height: var(--resources-week-view-all-day-height);
@@ -3250,10 +3523,46 @@
   pointer-events: none;
 }
 
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
 .m_ed4c47cf:where([data-event-interaction], [data-slot-dragging])
-  .m_3c19323d {
+  .m_3c19323d:not([data-resizing]) {
   pointer-events: none;
 }
+.m_ed4c47cf:where([data-event-interaction], [data-slot-dragging])
+  .m_3c19323d:not([data-resizing]) .m_30c8fd6b {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+.m_3c19323d .m_30c8fd6b {
+    background-color: var(--bg-event-color);
+  }
+
+.m_3c19323d .m_30c8fd6b:where([data-edge='start']) {
+      left: 0;
+    }
+
+.m_3c19323d .m_30c8fd6b:where([data-edge='end']) {
+      right: 0;
+    }
+
+.m_3c19323d:hover .m_30c8fd6b {
+    opacity: 0.5;
+  }
+
+.m_3c19323d .m_30c8fd6b:hover {
+    opacity: 0.8;
+  }
+
+.m_3c19323d:where([data-resizing]) .m_30c8fd6b:where([data-active]) {
+    opacity: 0.8;
+  }
+
+.m_3c19323d:where([data-resizing]) .m_30c8fd6b:not([data-active]) {
+    opacity: 0;
+    pointer-events: none;
+  }
 
 .m_ed4c47cf:where([data-resizing]) * {
     cursor: ew-resize !important;