@opencorestack/opengridx 2.1.0 → 3.0.1

package/lib/components/DataGrid/DataGrid.css

@@ -47,20 +47,28 @@
   position: relative;
   z-index: 3;
 }
-.ogx__pinned-rows--top {
+/* Header + top-pinned rows, and bottom-pinned rows + aggregation footer, each stick as one block,
+   so they stack instead of overlapping whatever their heights (column group rows, detail panels). */
+.ogx__sticky-top {
   position: sticky;
-  top: var(--ogx-header-height);
-  z-index: 10; 
-  background: var(--ogx-grid-background);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+  top: 0;
+  z-index: 10;
+  flex-shrink: 0;
 }
-.ogx__pinned-rows--bottom {
+.ogx__sticky-bottom {
   position: sticky;
   bottom: 0;
   z-index: 10;
+  flex-shrink: 0;
+  margin-top: auto;
+}
+.ogx__pinned-rows--top {
+  background: var(--ogx-grid-background);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+.ogx__pinned-rows--bottom {
   background: var(--ogx-grid-background);
   box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
-  margin-top: auto;
 }
 .ogx--loading {
   opacity: 0.6;
@@ -80,6 +88,13 @@
   justify-content: center;
   z-index: var(--ogx-z-index-modal);
 }
+/* No height prop: fill the container, as a block child of a sized box (height: 100%) or as a
+   flex item (flex: 1 with min-height: 0). In an auto-height parent 100% resolves to auto. */
+.ogx--fill {
+  height: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+}
 .ogx--auto-height {
   height: auto;
 }
@@ -87,14 +102,14 @@
   overflow-y: visible;
 }
 .ogx__viewport::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: var(--ogx-scrollbar-size, 8px);
+  height: var(--ogx-scrollbar-size, 8px);
 }
 .ogx__viewport::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--ogx-scrollbar-track, transparent);
 }
 .ogx__viewport::-webkit-scrollbar-thumb {
-  background: var(--ogx-color-gray-300);
+  background: var(--ogx-scrollbar-thumb, var(--ogx-color-gray-300));
   border-radius: 4px;
   border: 2px solid transparent;
   background-clip: content-box;
@@ -104,7 +119,7 @@
 }
 .ogx__viewport {
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+  scrollbar-color: var(--ogx-scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--ogx-scrollbar-track, transparent);
 }
 .ogx__empty {
   display: flex;
@@ -128,6 +143,51 @@
   justify-content: center;
   min-height: 200px;
 }
+/* Loading while rows are already shown: the rows stay usable underneath. */
+.ogx__loading-overlay--over-rows {
+  position: absolute;
+  inset: 0;
+  min-height: 0;
+  pointer-events: none;
+  z-index: var(--ogx-z-index-modal);
+  border-radius: var(--ogx-border-radius-lg);
+  overflow: hidden;
+}
+.ogx__loading-overlay--custom {
+  background: color-mix(in srgb, var(--ogx-grid-background) 50%, transparent);
+}
+.ogx__loading-overlay--custom > * {
+  pointer-events: auto;
+}
+.ogx__loading-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: color-mix(in srgb, var(--ogx-color-primary) 25%, transparent);
+  overflow: hidden;
+}
+.ogx__loading-bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 40%;
+  background: var(--ogx-color-primary);
+  animation: ogx-loading-bar 1.2s ease-in-out infinite;
+}
+@keyframes ogx-loading-bar {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ogx__loading-bar::after {
+    animation: none;
+    width: 100%;
+  }
+}
 
 .ogx-error-overlay {
   position: absolute;
@@ -192,6 +252,18 @@
   z-index: 3;
   background: var(--ogx-grid-header-background);
 }
+/* Aligns with the row's drag-handle / expand / checkbox column. */
+.ogx__aggregation-spacer {
+  width: 48px;
+  min-width: 48px;
+  flex-shrink: 0;
+  align-self: stretch;
+}
+.ogx__aggregation-spacer--pinned {
+  position: sticky;
+  z-index: 3;
+  background: var(--ogx-grid-header-background);
+}
 .ogx__aggregation-cell--pinned-right {
   border-left: 1px solid var(--ogx-grid-border-color);
 }
@@ -209,6 +281,7 @@
   box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
 }
 .ogx__aggregation-cell--pinned-right-first {
+  margin-left: auto;
   overflow: visible;
 }
 .ogx__aggregation-cell--pinned-right-first::before {