@opencorestack/opengridx 3.5.1 → 3.7.0

package/lib/components/Cell/Cell.tsx

@@ -258,9 +258,9 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
 
     if (isPinned && pinnedOffset !== undefined) {
         if (pinnedPosition === 'left') {
-            style.left = pinnedOffset;
+            style.insetInlineStart = pinnedOffset;
         } else {
-            style.right = pinnedOffset;
+            style.insetInlineEnd = pinnedOffset;
         }
     }
 

package/lib/components/ColumnGroupHeader/ColumnGroupHeader.css

@@ -8,7 +8,7 @@
     display: flex;
     align-items: stretch;
     background: var(--ogx-grid-header-background);
-    border-bottom: 1px solid var(--ogx-grid-border-color);
+    border-bottom: var(--ogx-grid-row-divider-width) solid var(--ogx-grid-row-divider-color, var(--ogx-grid-border-color));
     /* No overflow clipping: it would make the row the scroll container of its sticky (pinned) cells. */
     flex-shrink: 0;
     min-height: var(--ogx-header-height, 48px);
@@ -23,15 +23,15 @@
     box-sizing: border-box;
     position: relative;
     overflow: hidden;
-    /* Same border UI as primary header cells: half-height right divider */
+    /* Same border UI as primary header cells: half-height divider on the end edge */
 }
 .ogx-col-group-cell:not(:last-child)::after {
     content: '';
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     top: 25%;
     height: 50%;
-    width: 1px;
+    width: var(--ogx-grid-header-column-divider-width);
     background-color: var(--ogx-color-gray-300, #cbd5e1);
     opacity: 0.5;
 }

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.css

@@ -2,7 +2,7 @@
   position: absolute;
   top: 0;
   /* Inside the header cell: the cell clips overflow, so a handle straddling the border lost its outer half. */
-  right: 0;
+  inset-inline-end: 0;
   width: 8px;
   height: 100%;
   cursor: col-resize;
@@ -16,8 +16,8 @@
 }
 /* Right-pinned columns grow leftwards: their handle sits on the left edge. */
 .ogx-column-resize-handle--start {
-  right: auto;
-  left: 0;
+  inset-inline-end: auto;
+  inset-inline-start: 0;
   justify-content: flex-start;
 }
 .ogx-column-resize-handle:focus-visible .ogx-column-resize-handle__line {

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { clampResizeWidth } from './clampResizeWidth';
+import { isRtl, logicalArrowKey } from '../../utils/direction';
 
 
 export interface ColumnResizeHandleProps {
@@ -23,6 +24,8 @@ interface ActiveResize {
     pointerId: number;
     startX: number;
     startWidth: number;
+    /** The grid lays out right to left: the handle's edge grows the column towards the left. */
+    rtl: boolean;
     lastUpdate: number;
     moved: boolean;
 }
@@ -53,7 +56,8 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
     useEffect(() => () => { activeRef.current = null; }, []);
 
     const widthAt = useCallback((active: ActiveResize, clientX: number) => {
-        const deltaX = clientX - active.startX;
+        // Pointer movement towards the column's end edge, in screen pixels.
+        const deltaX = (clientX - active.startX) * (active.rtl ? -1 : 1);
         const raw = active.startWidth + (edge === 'start' ? -deltaX : deltaX);
         return clampResizeWidth(raw, active.startWidth, minWidth, maxWidth);
     }, [edge, minWidth, maxWidth]);
@@ -67,6 +71,7 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
             startX: event.clientX,
             // The logical stored width: reliable for pinned, flex, and normal columns.
             startWidth: currentWidth,
+            rtl: isRtl(event.currentTarget),
             lastUpdate: 0,
             moved: false,
         };
@@ -97,6 +102,16 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
         if (!active || event.pointerId !== active.pointerId) return;
         activeRef.current = null;
         setIsDragging(false);
+        // Release explicitly: the implicit release only follows a real pointerup, and a capture left on
+        // this handle (a synthetic press on the live mouse pointer, or an interrupted drag) would keep
+        // the pointer's later events from reaching the rest of the page.
+        if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+            try {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            } catch {
+                // Already released.
+            }
+        }
         if (active.moved || event.clientX !== active.startX) {
             // The drag may end over the header cell, which would take the synthesized click as a sort.
             suppressNextClick();
@@ -114,7 +129,8 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
         if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
         event.preventDefault();
         event.stopPropagation();
-        const step = (event.shiftKey ? 50 : 10) * (event.key === 'ArrowRight' ? 1 : -1);
+        const key = logicalArrowKey(event.key, isRtl(event.currentTarget));
+        const step = (event.shiftKey ? 50 : 10) * (key === 'ArrowRight' ? 1 : -1);
         onResize(field, clampResizeWidth(currentWidth + step, currentWidth, minWidth, maxWidth));
     }, [field, currentWidth, onResize, onAutosize, minWidth, maxWidth]);
 

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.css

@@ -2,6 +2,7 @@
   background: var(--ogx-overlay-background, var(--ogx-color-white));
   border: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-border-color));
   border-radius: var(--ogx-border-radius-sm);
+  font-family: var(--ogx-overlay-font-family, inherit);
   min-width: 250px;
   max-width: 350px;
   box-shadow: var(--ogx-shadow-lg);
@@ -120,7 +121,8 @@
 }
 
 .ogx-column-visibility-panel__label {
-  font-size: var(--ogx-font-size-xs);
+  font-size: var(--ogx-overlay-font-size, var(--ogx-font-size-xs));
+  font-weight: var(--ogx-overlay-font-weight, inherit);
   color: var(--ogx-overlay-text, var(--ogx-color-gray-900));
   user-select: none;
   cursor: inherit;

package/lib/components/DataGrid/DataGrid.css

@@ -3,8 +3,8 @@
   flex-direction: column;
   width: 100%;
   background: var(--ogx-grid-background);
-  border: 1px solid var(--ogx-grid-border-color);
-  border-radius: var(--ogx-border-radius-lg);
+  border: var(--ogx-grid-border-width) solid var(--ogx-grid-border-color);
+  border-radius: var(--ogx-grid-border-radius, var(--ogx-border-radius-lg));
   font-family: var(--ogx-font-family);
   position: relative;
   box-shadow: var(--ogx-shadow-sm);
@@ -12,12 +12,12 @@
   overflow: hidden;
 }
 .ogx > :first-child {
-  border-top-left-radius: calc(var(--ogx-border-radius-lg) - 1px);
-  border-top-right-radius: calc(var(--ogx-border-radius-lg) - 1px);
+  border-top-left-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
+  border-top-right-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
 }
 .ogx > :last-child {
-  border-bottom-left-radius: calc(var(--ogx-border-radius-lg) - 1px);
-  border-bottom-right-radius: calc(var(--ogx-border-radius-lg) - 1px);
+  border-bottom-left-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
+  border-bottom-right-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
 }
 .ogx:hover {
   box-shadow: var(--ogx-shadow-md);
@@ -150,7 +150,7 @@
   min-height: 0;
   pointer-events: none;
   z-index: var(--ogx-z-index-modal);
-  border-radius: var(--ogx-border-radius-lg);
+  border-radius: var(--ogx-grid-border-radius, var(--ogx-border-radius-lg));
   overflow: hidden;
 }
 .ogx__loading-overlay--custom {
@@ -243,7 +243,7 @@
   justify-content: center;
   overflow: hidden;
   box-sizing: border-box;
-  border-right: 1px solid var(--ogx-grid-border-color);
+  border-inline-end: var(--ogx-grid-column-divider-width) solid var(--ogx-grid-column-divider-color, var(--ogx-grid-border-color));
   position: relative;
 }
 .ogx__aggregation-cell--pinned-left,
@@ -265,7 +265,7 @@
   background: var(--ogx-grid-header-background);
 }
 .ogx__aggregation-cell--pinned-right {
-  border-left: 1px solid var(--ogx-grid-border-color);
+  border-inline-start: var(--ogx-grid-column-divider-width) solid var(--ogx-grid-column-divider-color, var(--ogx-grid-border-color));
 }
 .ogx__aggregation-cell--pinned-left-last {
   overflow: visible;
@@ -274,26 +274,32 @@
   content: '';
   position: absolute;
   top: 0;
-  right: -10px;
+  inset-inline-end: -10px;
   bottom: 0;
   width: 10px;
   pointer-events: none;
   box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
 }
 .ogx__aggregation-cell--pinned-right-first {
-  margin-left: auto;
+  margin-inline-start: auto;
   overflow: visible;
 }
 .ogx__aggregation-cell--pinned-right-first::before {
   content: '';
   position: absolute;
   top: 0;
-  left: -10px;
+  inset-inline-start: -10px;
   bottom: 0;
   width: 10px;
   pointer-events: none;
   box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.1);
 }
+.ogx__aggregation-cell--pinned-left-last:dir(rtl)::after {
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
+.ogx__aggregation-cell--pinned-right-first:dir(rtl)::before {
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
 .ogx__aggregation-label {
   font-size: 0.7em;
   text-transform: uppercase;
@@ -321,7 +327,7 @@
 }
 .ogx__group-cell-content {
   font-weight: 500;
-  text-align: left;
+  text-align: start;
   display: flex;
   align-items: center;
   gap: 4px;