qbs-react-grid 2.0.15 → 2.0.16

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 (4) hide show
  1. package/es/qbsTable/utilities/VerticalDropDownMenu.js +17 -2
  2. package/lib/qbsTable/utilities/VerticalDropDownMenu.js +17 -2
  3. package/package.json +1 -1
  4. package/src/qbsTable/utilities/VerticalDropDownMenu.tsx +23 -3
package/es/qbsTable/utilities/VerticalDropDownMenu.js CHANGED
@@ -77,6 +77,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
77
77
  };
78
78
  var toggleMenu = function toggleMenu() {
79
79
  if (!openMenu && menuButtonRef.current) {
80
+ var _tableBodyRef$current;
80
81
  var rect = menuButtonRef.current.getBoundingClientRect();
81
82
  var windowHeight = window.innerHeight;
82
83
  var menuHeight = (actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
@@ -84,19 +85,33 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
84
85
  return !item.hidden && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex));
85
86
  }).length) * 40; // 40px per menu item
86
87
 
88
+ // Get table boundaries for RTL positioning
89
+ var tableRect = (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 ? void 0 : _tableBodyRef$current.getBoundingClientRect();
90
+ var dropdownWidth = 200;
91
+
87
92
  // Check if there's enough space below
88
93
  var spaceBelow = windowHeight - rect.bottom;
94
+ var leftPosition = rect.left - dropdownWidth;
95
+
96
+ // For RTL, adjust positioning to stay within table bounds
97
+ if (document.documentElement.dir === 'rtl' && tableRect) {
98
+ // Calculate the right edge position for RTL
99
+ var rightEdge = rect.right;
100
+ leftPosition = Math.min(rightEdge, tableRect.right - dropdownWidth);
101
+ // Ensure it doesn't go beyond the left edge of the table
102
+ leftPosition = Math.max(leftPosition, tableRect.left);
103
+ }
89
104
  if (spaceBelow >= menuHeight) {
90
105
  // Open below
91
106
  setPosition({
92
107
  top: rect.bottom + window.scrollY - rect.height,
93
- left: rect.left - 200
108
+ left: leftPosition
94
109
  });
95
110
  } else {
96
111
  // Open above
97
112
  setPosition({
98
113
  top: rect.top + window.scrollY - menuHeight,
99
- left: rect.left - 200
114
+ left: leftPosition
100
115
  });
101
116
  }
102
117
  }
package/lib/qbsTable/utilities/VerticalDropDownMenu.js CHANGED
@@ -84,6 +84,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
84
84
  };
85
85
  var toggleMenu = function toggleMenu() {
86
86
  if (!openMenu && menuButtonRef.current) {
87
+ var _tableBodyRef$current;
87
88
  var rect = menuButtonRef.current.getBoundingClientRect();
88
89
  var windowHeight = window.innerHeight;
89
90
  var menuHeight = (actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
@@ -91,19 +92,33 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
91
92
  return !item.hidden && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex));
92
93
  }).length) * 40; // 40px per menu item
93
94
 
95
+ // Get table boundaries for RTL positioning
96
+ var tableRect = (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 ? void 0 : _tableBodyRef$current.getBoundingClientRect();
97
+ var dropdownWidth = 200;
98
+
94
99
  // Check if there's enough space below
95
100
  var spaceBelow = windowHeight - rect.bottom;
101
+ var leftPosition = rect.left - dropdownWidth;
102
+
103
+ // For RTL, adjust positioning to stay within table bounds
104
+ if (document.documentElement.dir === 'rtl' && tableRect) {
105
+ // Calculate the right edge position for RTL
106
+ var rightEdge = rect.right;
107
+ leftPosition = Math.min(rightEdge, tableRect.right - dropdownWidth);
108
+ // Ensure it doesn't go beyond the left edge of the table
109
+ leftPosition = Math.max(leftPosition, tableRect.left);
110
+ }
96
111
  if (spaceBelow >= menuHeight) {
97
112
  // Open below
98
113
  setPosition({
99
114
  top: rect.bottom + window.scrollY - rect.height,
100
- left: rect.left - 200
115
+ left: leftPosition
101
116
  });
102
117
  } else {
103
118
  // Open above
104
119
  setPosition({
105
120
  top: rect.top + window.scrollY - menuHeight,
106
- left: rect.left - 200
121
+ left: leftPosition
107
122
  });
108
123
  }
109
124
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qbs-react-grid",
3
- "version": "2.0.15",
3
+ "version": "2.0.16",
4
4
  "description": "A React table component",
5
5
  "main": "lib/index.js",
6
6
  "typings": "lib/index.d.ts",
package/src/qbsTable/utilities/VerticalDropDownMenu.tsx CHANGED
@@ -92,20 +92,35 @@ const VerticalMenuDropdown: React.FC<Props> = ({
92
92
  actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex)).length *
93
93
  40; // 40px per menu item
94
94
 
95
+ // Get table boundaries for RTL positioning
96
+ const tableRect = tableBodyRef.current?.getBoundingClientRect();
97
+ const dropdownWidth = 200;
98
+
95
99
  // Check if there's enough space below
96
100
  const spaceBelow = windowHeight - rect.bottom;
97
101
 
102
+ let leftPosition = rect.left - dropdownWidth;
103
+
104
+ // For RTL, adjust positioning to stay within table bounds
105
+ if (document.documentElement.dir === 'rtl' && tableRect) {
106
+ // Calculate the right edge position for RTL
107
+ const rightEdge = rect.right;
108
+ leftPosition = Math.min(rightEdge, tableRect.right - dropdownWidth);
109
+ // Ensure it doesn't go beyond the left edge of the table
110
+ leftPosition = Math.max(leftPosition, tableRect.left);
111
+ }
112
+
98
113
  if (spaceBelow >= menuHeight) {
99
114
  // Open below
100
115
  setPosition({
101
116
  top: rect.bottom + window.scrollY - rect.height,
102
- left: rect.left - 200
117
+ left: leftPosition
103
118
  });
104
119
  } else {
105
120
  // Open above
106
121
  setPosition({
107
122
  top: rect.top + window.scrollY - menuHeight,
108
- left: rect.left - 200
123
+ left: leftPosition
109
124
  });
110
125
  }
111
126
  }
@@ -119,7 +134,12 @@ const VerticalMenuDropdown: React.FC<Props> = ({
119
134
  <div
120
135
  className="absolute z-50 min-w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 vertical-menu-dropdown-content"
121
136
  ref={menuRef}
122
- style={{ width: 200, top: position.top, left: position.left, position: 'absolute' }}
137
+ style={{
138
+ width: 200,
139
+ top: position.top,
140
+ left: position.left,
141
+ position: 'absolute'
142
+ }}
123
143
  >
124
144
  <div className="py-1">
125
145
  {actionDropDown?.map(item =>