qbs-react-grid 2.2.3 → 2.2.4

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 (6) hide show
  1. package/es/qbsTable/utilities/VerticalDropDownMenu.d.ts +1 -1
  2. package/es/qbsTable/utilities/VerticalDropDownMenu.js +23 -32
  3. package/lib/qbsTable/utilities/VerticalDropDownMenu.d.ts +1 -1
  4. package/lib/qbsTable/utilities/VerticalDropDownMenu.js +23 -32
  5. package/package.json +1 -1
  6. package/src/qbsTable/utilities/VerticalDropDownMenu.tsx +23 -32
package/es/qbsTable/utilities/VerticalDropDownMenu.d.ts CHANGED
@@ -5,7 +5,7 @@ type Props = {
5
5
  handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
6
6
  rowData?: any;
7
7
  dataTheme?: string;
8
- tableBodyRef: React.RefObject<HTMLDivElement>;
8
+ tableBodyRef: React.RefObject<HTMLDivElement | null>;
9
9
  rowIndex?: number;
10
10
  wheelWrapperRef?: React.RefObject<HTMLDivElement>;
11
11
  };
package/es/qbsTable/utilities/VerticalDropDownMenu.js CHANGED
@@ -77,43 +77,34 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
77
77
  };
78
78
  var toggleMenu = function toggleMenu() {
79
79
  if (!openMenu && menuButtonRef.current) {
80
- var _tableBodyRef$current;
80
+ var _actionDropDown$filte3;
81
81
  var rect = menuButtonRef.current.getBoundingClientRect();
82
- var windowHeight = window.innerHeight;
83
- var menuHeight = (actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
82
+ var viewportPadding = 8;
83
+ var menuGap = 4;
84
+ var dropdownWidth = 200;
85
+ var visibleItems = (_actionDropDown$filte3 = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
84
86
  var _item$hide2;
85
87
  return !item.hidden && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex));
86
- }).length) * 40; // 40px per menu item
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;
88
+ })) != null ? _actionDropDown$filte3 : [];
89
+ var menuHeight = visibleItems.length * 40;
90
+ var spaceBelow = window.innerHeight - rect.bottom;
91
+ var openBelow = spaceBelow >= menuHeight + menuGap;
91
92
 
92
- // Check if there's enough space below
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);
93
+ // Anchor to trigger; prefer opening toward inline-start (left in LTR).
94
+ var left = rect.right - dropdownWidth;
95
+ if (left < viewportPadding) {
96
+ left = rect.left;
97
+ }
98
+ if (left + dropdownWidth > window.innerWidth - viewportPadding) {
99
+ left = Math.max(viewportPadding, rect.left - dropdownWidth);
103
100
  }
104
- if (spaceBelow >= menuHeight) {
105
- // Open below
106
- setPosition({
107
- top: rect.bottom + window.scrollY - rect.height,
108
- left: leftPosition
109
- });
110
- } else {
111
- // Open above
112
- setPosition({
113
- top: rect.top + window.scrollY - menuHeight,
114
- left: leftPosition
115
- });
101
+ if (left + dropdownWidth > window.innerWidth - viewportPadding) {
102
+ left = window.innerWidth - viewportPadding - dropdownWidth;
116
103
  }
104
+ setPosition({
105
+ top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
106
+ left: left
107
+ });
117
108
  }
118
109
  setTimeout(function () {
119
110
  setOpenMenu(function (prev) {
@@ -129,7 +120,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
129
120
  width: 200,
130
121
  top: position.top,
131
122
  left: position.left,
132
- position: 'absolute'
123
+ position: 'fixed'
133
124
  }
134
125
  }, /*#__PURE__*/React.createElement("div", {
135
126
  className: "py-1"
package/lib/qbsTable/utilities/VerticalDropDownMenu.d.ts CHANGED
@@ -5,7 +5,7 @@ type Props = {
5
5
  handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
6
6
  rowData?: any;
7
7
  dataTheme?: string;
8
- tableBodyRef: React.RefObject<HTMLDivElement>;
8
+ tableBodyRef: React.RefObject<HTMLDivElement | null>;
9
9
  rowIndex?: number;
10
10
  wheelWrapperRef?: React.RefObject<HTMLDivElement>;
11
11
  };
package/lib/qbsTable/utilities/VerticalDropDownMenu.js CHANGED
@@ -84,43 +84,34 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
84
84
  };
85
85
  var toggleMenu = function toggleMenu() {
86
86
  if (!openMenu && menuButtonRef.current) {
87
- var _tableBodyRef$current;
87
+ var _actionDropDown$filte3;
88
88
  var rect = menuButtonRef.current.getBoundingClientRect();
89
- var windowHeight = window.innerHeight;
90
- var menuHeight = (actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
89
+ var viewportPadding = 8;
90
+ var menuGap = 4;
91
+ var dropdownWidth = 200;
92
+ var visibleItems = (_actionDropDown$filte3 = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
91
93
  var _item$hide2;
92
94
  return !item.hidden && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex));
93
- }).length) * 40; // 40px per menu item
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;
95
+ })) != null ? _actionDropDown$filte3 : [];
96
+ var menuHeight = visibleItems.length * 40;
97
+ var spaceBelow = window.innerHeight - rect.bottom;
98
+ var openBelow = spaceBelow >= menuHeight + menuGap;
98
99
 
99
- // Check if there's enough space below
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);
100
+ // Anchor to trigger; prefer opening toward inline-start (left in LTR).
101
+ var left = rect.right - dropdownWidth;
102
+ if (left < viewportPadding) {
103
+ left = rect.left;
104
+ }
105
+ if (left + dropdownWidth > window.innerWidth - viewportPadding) {
106
+ left = Math.max(viewportPadding, rect.left - dropdownWidth);
110
107
  }
111
- if (spaceBelow >= menuHeight) {
112
- // Open below
113
- setPosition({
114
- top: rect.bottom + window.scrollY - rect.height,
115
- left: leftPosition
116
- });
117
- } else {
118
- // Open above
119
- setPosition({
120
- top: rect.top + window.scrollY - menuHeight,
121
- left: leftPosition
122
- });
108
+ if (left + dropdownWidth > window.innerWidth - viewportPadding) {
109
+ left = window.innerWidth - viewportPadding - dropdownWidth;
123
110
  }
111
+ setPosition({
112
+ top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
113
+ left: left
114
+ });
124
115
  }
125
116
  setTimeout(function () {
126
117
  setOpenMenu(function (prev) {
@@ -136,7 +127,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
136
127
  width: 200,
137
128
  top: position.top,
138
129
  left: position.left,
139
- position: 'absolute'
130
+ position: 'fixed'
140
131
  }
141
132
  }, /*#__PURE__*/_react["default"].createElement("div", {
142
133
  className: "py-1"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qbs-react-grid",
3
- "version": "2.2.3",
3
+ "version": "2.2.4",
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
@@ -10,7 +10,7 @@ type Props = {
10
10
  handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
11
11
  rowData?: any;
12
12
  dataTheme?: string;
13
- tableBodyRef: React.RefObject<HTMLDivElement>;
13
+ tableBodyRef: React.RefObject<HTMLDivElement | null>;
14
14
  rowIndex?: number;
15
15
  wheelWrapperRef?: React.RefObject<HTMLDivElement>;
16
16
  };
@@ -87,42 +87,33 @@ const VerticalMenuDropdown: React.FC<Props> = ({
87
87
  const toggleMenu = () => {
88
88
  if (!openMenu && menuButtonRef.current) {
89
89
  const rect = menuButtonRef.current.getBoundingClientRect();
90
- const windowHeight = window.innerHeight;
91
- const menuHeight =
92
- actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex)).length *
93
- 40; // 40px per menu item
94
-
95
- // Get table boundaries for RTL positioning
96
- const tableRect = tableBodyRef.current?.getBoundingClientRect();
90
+ const viewportPadding = 8;
91
+ const menuGap = 4;
97
92
  const dropdownWidth = 200;
93
+ const visibleItems =
94
+ actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex)) ?? [];
95
+ const menuHeight = visibleItems.length * 40;
98
96
 
99
- // Check if there's enough space below
100
- const spaceBelow = windowHeight - rect.bottom;
97
+ const spaceBelow = window.innerHeight - rect.bottom;
98
+ const openBelow = spaceBelow >= menuHeight + menuGap;
101
99
 
102
- let leftPosition = rect.left - dropdownWidth;
100
+ // Anchor to trigger; prefer opening toward inline-start (left in LTR).
101
+ let left = rect.right - dropdownWidth;
103
102
 
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);
103
+ if (left < viewportPadding) {
104
+ left = rect.left;
111
105
  }
112
-
113
- if (spaceBelow >= menuHeight) {
114
- // Open below
115
- setPosition({
116
- top: rect.bottom + window.scrollY - rect.height,
117
- left: leftPosition
118
- });
119
- } else {
120
- // Open above
121
- setPosition({
122
- top: rect.top + window.scrollY - menuHeight,
123
- left: leftPosition
124
- });
106
+ if (left + dropdownWidth > window.innerWidth - viewportPadding) {
107
+ left = Math.max(viewportPadding, rect.left - dropdownWidth);
125
108
  }
109
+ if (left + dropdownWidth > window.innerWidth - viewportPadding) {
110
+ left = window.innerWidth - viewportPadding - dropdownWidth;
111
+ }
112
+
113
+ setPosition({
114
+ top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
115
+ left,
116
+ });
126
117
  }
127
118
  setTimeout(() => {
128
119
  setOpenMenu(prev => !prev);
@@ -138,7 +129,7 @@ const VerticalMenuDropdown: React.FC<Props> = ({
138
129
  width: 200,
139
130
  top: position.top,
140
131
  left: position.left,
141
- position: 'absolute'
132
+ position: 'fixed',
142
133
  }}
143
134
  >
144
135
  <div className="py-1">