From 2f3f82146f9405667894d10c817f1ccf26869fcc Mon Sep 17 00:00:00 2001
From: Daniel Cohen Gindi <danielgindi@gmail.com>
Date: Wed, 15 Apr 2026 09:08:10 +0300
Subject: [PATCH] cleanup old rtl residue - do not apply direction to
 grid-stack-rtl

---
 demo/right-to-left(rtl).html |  7 +++++-
 src/gridstack.scss           | 41 +++++++++++++++---------------------
 src/types.ts                 |  2 +-
 3 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/demo/right-to-left(rtl).html b/demo/right-to-left(rtl).html
index 8c7f28a68..56ed76714 100644
--- a/demo/right-to-left(rtl).html
+++ b/demo/right-to-left(rtl).html
@@ -32,7 +32,12 @@ <h1>RTL Demo</h1>
       {x: 6, y: 0, w: 2, h: 2},
     ];
     items.forEach((item, i) => item.content = 'item ' + i);
-    let grid = GridStack.init({rtl: true, children: items});
+    let grid = GridStack.init({
+        rtl: true,
+        float: true,
+        children: items,
+        resizable: {handles: 'sw,se'}
+    });
 
     function addWidget() {
       let w = {
diff --git a/src/gridstack.scss b/src/gridstack.scss
index 92805a27e..20ae00101 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -8,14 +8,7 @@
  .grid-stack {
    position: relative;
  }
- 
- .grid-stack-rtl {
-   direction: ltr;
-   > .grid-stack-item {
-     direction: rtl;
-   }
- }
- 
+
  .grid-stack-placeholder > .placeholder-content {
    background-color: rgba(0,0,0,0.1);
    margin: 0;
@@ -23,7 +16,7 @@
    width: auto;
    z-index: 0 !important;
  }
- 
+
  // make those more unique as to not conflict with side panel items
  .grid-stack > .grid-stack-item {
    position: absolute;
@@ -31,7 +24,7 @@
    top: 0; // some default to reduce at least first row inline styles
    width: var(--gs-column-width); // reduce 1x1 items inline styles
    height: var(--gs-cell-height);
- 
+
    > .grid-stack-item-content {
      margin: 0;
      position: absolute;
@@ -60,7 +53,7 @@
      left: var(--gs-item-margin-left);
    }
  }
- 
+
  .grid-stack-item {
    > .ui-resizable-handle {
      position: absolute;
@@ -69,10 +62,10 @@
      -ms-touch-action: none;
      touch-action: none;
    }
- 
+
    &.ui-resizable-disabled > .ui-resizable-handle,
    &.ui-resizable-autohide > .ui-resizable-handle { display: none; }
- 
+
    > .ui-resizable-ne,
    > .ui-resizable-nw,
    > .ui-resizable-se,
@@ -81,21 +74,21 @@
      background-repeat: no-repeat;
      background-position: center;
    }
- 
+
    > .ui-resizable-ne {
      transform: rotate(45deg);
    }
    > .ui-resizable-sw {
      transform: rotate(45deg);
    }
- 
+
    > .ui-resizable-nw {
      transform: rotate(-45deg);
    }
    > .ui-resizable-se {
      transform: rotate(-45deg);
    }
- 
+
    > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); left: var(--gs-item-margin-left); }
    > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: var(--gs-item-margin-top); left: 25px; right: 25px; }
    > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); right: var(--gs-item-margin-right); }
@@ -104,44 +97,44 @@
    > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: var(--gs-item-margin-bottom); right: 25px; }
    > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); left: var(--gs-item-margin-left); }
    > .ui-resizable-w  { cursor: w-resize;  width: 10px; top: 15px; bottom: 15px; left: var(--gs-item-margin-left); }
- 
+
    &.ui-draggable-dragging {
      &> .ui-resizable-handle {
        display: none !important;
      }
    }
- 
+
    &.ui-draggable-dragging {
      will-change: left, right, top;
    }
- 
+
    &.ui-resizable-resizing {
      will-change: width, height;
    }
  }
- 
+
  // not .grid-stack-item specific to also affect dragIn regions
  .ui-draggable-dragging,
  .ui-resizable-resizing {
    z-index: 10000; // bootstrap modal has a z-index of 1050
- 
+
    > .grid-stack-item-content {
      box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
      opacity: 0.8;
    }
  }
- 
+
  .grid-stack-animate,
  .grid-stack-animate .grid-stack-item {
    transition: left $animation_speed, right $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed;
  }
- 
+
  .grid-stack-animate .grid-stack-item.ui-draggable-dragging,
  .grid-stack-animate .grid-stack-item.ui-resizable-resizing,
  .grid-stack-animate .grid-stack-item.grid-stack-placeholder{
    transition: left 0s, right 0s, top 0s, height 0s, width 0s;
  }
- 
+
  // make those more unique as to not conflict with side panel items, but apply to all column layouts (so not in loop below)
  .grid-stack > .grid-stack-item[gs-y="0"] {
    top: 0px;
diff --git a/src/types.ts b/src/types.ts
index 056957be9..8de253af0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -354,7 +354,7 @@ export interface GridStackOptions {
   row?: number;
 
   /**
-   * if true turns grid to RTL. Possible values are true, false, 'auto' (default?: 'auto')
+   * if true turns grid to RTL, and applies the `grid-stack-rtl class`. Possible values are true, false, 'auto' (default?: 'auto')
    * See [example](http://gridstack.github.io/gridstack.js/demo/right-to-left(rtl).html)
    */
   rtl?: boolean | 'auto';