qbs-react-grid 2.0.12 → 2.0.13

package/es/qbsTable/CustomTableCell.js

@@ -55,14 +55,16 @@ export var ActionCell = /*#__PURE__*/React.memo(function (_ref2) {
     actionProps = _ref2.actionProps,
     tableBodyRef = _ref2.tableBodyRef,
     rowIndex = _ref2.rowIndex,
-    dropType = _ref2.dropType;
+    dropType = _ref2.dropType,
+    wheelWrapperRef = _ref2.wheelWrapperRef;
   return /*#__PURE__*/React.createElement("div", null, dropType == 'vertical' ? /*#__PURE__*/React.createElement(VerticalMenuDropdown, {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,
     rowData: rowData,
     dataTheme: dataTheme,
     rowIndex: rowIndex,
-    handleMenuActions: handleMenuActions
+    handleMenuActions: handleMenuActions,
+    wheelWrapperRef: wheelWrapperRef
   }) : /*#__PURE__*/React.createElement(MenuDropDown, {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,

package/es/qbsTable/QbsTable.js

@@ -124,7 +124,8 @@ var QbsTable = function QbsTable(_ref) {
     setRowViewToggle = _ref.setRowViewToggle,
     _ref$dropType = _ref.dropType,
     dropType = _ref$dropType === void 0 ? 'horizondal' : _ref$dropType,
-    rowHeight = _ref.rowHeight;
+    rowHeight = _ref.rowHeight,
+    isFullScreen = _ref.isFullScreen;
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -291,7 +292,8 @@ var QbsTable = function QbsTable(_ref) {
     defaultRowView: defaultRowView,
     fullWidthView: fullWidthView,
     setTableFullView: setTableFullView,
-    setRowViewToggle: setRowViewToggle
+    setRowViewToggle: setRowViewToggle,
+    isFullScreen: isFullScreen
   };
   var themeToggle = useMemo(function () {
     return document.getElementById('themeToggle');
@@ -588,7 +590,6 @@ var QbsTable = function QbsTable(_ref) {
     var scrollTop = wrapper.scrollTop,
       clientHeight = wrapper.clientHeight;
     var scrollHeight = Math.abs(scroll) + (height - headerHeight);
-
     // Trigger fetch when user scrolls within 100px of bottom
     if (scrollTop + clientHeight >= scrollHeight - 70) {
       loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData(); // fetch next page here
@@ -753,6 +754,7 @@ var QbsTable = function QbsTable(_ref) {
   })), /*#__PURE__*/React.createElement(ActionCell, {
     tableBodyRef: tableBodyRef,
     dropType: dropType,
+    wheelWrapperRef: wheelWrapperRef,
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,

package/es/qbsTable/Toolbar.js

@@ -35,7 +35,9 @@ var ToolBar = function ToolBar(_ref) {
     _ref$fullWidthView = _ref.fullWidthView,
     fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
     setTableFullView = _ref.setTableFullView,
-    setRowViewToggle = _ref.setRowViewToggle;
+    setRowViewToggle = _ref.setRowViewToggle,
+    _ref$isFullScreen = _ref.isFullScreen,
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen;
   var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = useState(searchValue),
     searchParam = _useState[0],
@@ -106,9 +108,9 @@ var ToolBar = function ToolBar(_ref) {
     d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
   }))), tableHeaderActions, /*#__PURE__*/React.createElement("div", {
     className: " pr-1 cursor-pointer relative table_custom_ctions   "
-  }, rowViewToggle && /*#__PURE__*/React.createElement("div", {
+  }, (rowViewToggle || isFullScreen) && /*#__PURE__*/React.createElement("div", {
     className: "flex gap-2 qbs-row-switch-cntainer"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, rowViewToggle && /*#__PURE__*/React.createElement("div", {
     className: "flex gap-2 table_cell_style"
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
@@ -128,7 +130,7 @@ var ToolBar = function ToolBar(_ref) {
     }
   }, /*#__PURE__*/React.createElement(ContentView, {
     className: "" + (!defaultRowView ? 'active' : '')
-  })))), /*#__PURE__*/React.createElement("div", {
+  })))), isFullScreen && /*#__PURE__*/React.createElement("div", {
     className: " table_full_width"
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,

package/es/qbsTable/commontypes.d.ts

@@ -139,6 +139,7 @@ export interface QbsTableProps {
     setRowViewToggle?: (value: boolean) => void;
     dropType?: 'horizondal' | 'vertical';
     rowHeight?: number;
+    isFullScreen?: boolean;
 }
 export interface QbsTableToolbarProps {
     title?: string;
@@ -179,5 +180,6 @@ export interface QbsTableToolbarProps {
     fullWidthView?: boolean;
     setTableFullView?: (value: boolean) => void;
     setRowViewToggle?: (value: boolean) => void;
+    isFullScreen?: boolean;
 }
 export {};

package/es/qbsTable/utilities/VerticalDropDownMenu.d.ts

@@ -7,6 +7,7 @@ type Props = {
     dataTheme?: string;
     tableBodyRef: React.RefObject<HTMLDivElement>;
     rowIndex?: number;
+    wheelWrapperRef?: React.RefObject<HTMLDivElement>;
 };
 declare const VerticalMenuDropdown: React.FC<Props>;
 export default VerticalMenuDropdown;

package/es/qbsTable/utilities/VerticalDropDownMenu.js

@@ -1,3 +1,6 @@
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { ThreeDotIcon } from './icons';
@@ -25,11 +28,40 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
         setOpenMenu(false);
       }
     };
+    var handleScroll = function handleScroll() {
+      setOpenMenu(false);
+    };
     document.addEventListener('click', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+    // Use capture phase to catch all scrolls
+
     return function () {
       document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
     };
   }, []);
+  useEffect(function () {
+    var handleStyleChange = function handleStyleChange() {
+      setOpenMenu(false); // Close the dropdown
+    };
+    var scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
+    if (!scrollbarHandle) return;
+    var observer = new MutationObserver(function (mutations) {
+      for (var _iterator = _createForOfIteratorHelperLoose(mutations), _step; !(_step = _iterator()).done;) {
+        var mutation = _step.value;
+        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+          handleStyleChange();
+        }
+      }
+    });
+    observer.observe(scrollbarHandle, {
+      attributes: true,
+      attributeFilter: ['style']
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, [openMenu]);
   var handleMenuItemClick = function handleMenuItemClick(slug) {
     var _slug$action;
     handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);

package/lib/qbsTable/CustomTableCell.js

@@ -63,14 +63,16 @@ var ActionCell = /*#__PURE__*/_react["default"].memo(function (_ref2) {
     actionProps = _ref2.actionProps,
     tableBodyRef = _ref2.tableBodyRef,
     rowIndex = _ref2.rowIndex,
-    dropType = _ref2.dropType;
+    dropType = _ref2.dropType,
+    wheelWrapperRef = _ref2.wheelWrapperRef;
   return /*#__PURE__*/_react["default"].createElement("div", null, dropType == 'vertical' ? /*#__PURE__*/_react["default"].createElement(_VerticalDropDownMenu["default"], {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,
     rowData: rowData,
     dataTheme: dataTheme,
     rowIndex: rowIndex,
-    handleMenuActions: handleMenuActions
+    handleMenuActions: handleMenuActions,
+    wheelWrapperRef: wheelWrapperRef
   }) : /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,

package/lib/qbsTable/QbsTable.js

@@ -130,7 +130,8 @@ var QbsTable = function QbsTable(_ref) {
     setRowViewToggle = _ref.setRowViewToggle,
     _ref$dropType = _ref.dropType,
     dropType = _ref$dropType === void 0 ? 'horizondal' : _ref$dropType,
-    rowHeight = _ref.rowHeight;
+    rowHeight = _ref.rowHeight,
+    isFullScreen = _ref.isFullScreen;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -297,7 +298,8 @@ var QbsTable = function QbsTable(_ref) {
     defaultRowView: defaultRowView,
     fullWidthView: fullWidthView,
     setTableFullView: setTableFullView,
-    setRowViewToggle: setRowViewToggle
+    setRowViewToggle: setRowViewToggle,
+    isFullScreen: isFullScreen
   };
   var themeToggle = (0, _react.useMemo)(function () {
     return document.getElementById('themeToggle');
@@ -594,7 +596,6 @@ var QbsTable = function QbsTable(_ref) {
     var scrollTop = wrapper.scrollTop,
       clientHeight = wrapper.clientHeight;
     var scrollHeight = Math.abs(scroll) + (height - headerHeight);
-
     // Trigger fetch when user scrolls within 100px of bottom
     if (scrollTop + clientHeight >= scrollHeight - 70) {
       loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData(); // fetch next page here
@@ -759,6 +760,7 @@ var QbsTable = function QbsTable(_ref) {
   })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
     tableBodyRef: tableBodyRef,
     dropType: dropType,
+    wheelWrapperRef: wheelWrapperRef,
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,

package/lib/qbsTable/Toolbar.js

@@ -42,7 +42,9 @@ var ToolBar = function ToolBar(_ref) {
     _ref$fullWidthView = _ref.fullWidthView,
     fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
     setTableFullView = _ref.setTableFullView,
-    setRowViewToggle = _ref.setRowViewToggle;
+    setRowViewToggle = _ref.setRowViewToggle,
+    _ref$isFullScreen = _ref.isFullScreen,
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen;
   var debouncedOnSearch = (0, _react.useCallback)((0, _debounce["default"])(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = (0, _react.useState)(searchValue),
     searchParam = _useState[0],
@@ -113,9 +115,9 @@ var ToolBar = function ToolBar(_ref) {
     d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
   }))), tableHeaderActions, /*#__PURE__*/_react["default"].createElement("div", {
     className: " pr-1 cursor-pointer relative table_custom_ctions   "
-  }, rowViewToggle && /*#__PURE__*/_react["default"].createElement("div", {
+  }, (rowViewToggle || isFullScreen) && /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex gap-2 qbs-row-switch-cntainer"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, rowViewToggle && /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex gap-2 table_cell_style"
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
@@ -135,7 +137,7 @@ var ToolBar = function ToolBar(_ref) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_icons.ContentView, {
     className: "" + (!defaultRowView ? 'active' : '')
-  })))), /*#__PURE__*/_react["default"].createElement("div", {
+  })))), isFullScreen && /*#__PURE__*/_react["default"].createElement("div", {
     className: " table_full_width"
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,

package/lib/qbsTable/commontypes.d.ts

@@ -139,6 +139,7 @@ export interface QbsTableProps {
     setRowViewToggle?: (value: boolean) => void;
     dropType?: 'horizondal' | 'vertical';
     rowHeight?: number;
+    isFullScreen?: boolean;
 }
 export interface QbsTableToolbarProps {
     title?: string;
@@ -179,5 +180,6 @@ export interface QbsTableToolbarProps {
     fullWidthView?: boolean;
     setTableFullView?: (value: boolean) => void;
     setRowViewToggle?: (value: boolean) => void;
+    isFullScreen?: boolean;
 }
 export {};

package/lib/qbsTable/utilities/VerticalDropDownMenu.d.ts

@@ -7,6 +7,7 @@ type Props = {
     dataTheme?: string;
     tableBodyRef: React.RefObject<HTMLDivElement>;
     rowIndex?: number;
+    wheelWrapperRef?: React.RefObject<HTMLDivElement>;
 };
 declare const VerticalMenuDropdown: React.FC<Props>;
 export default VerticalMenuDropdown;

package/lib/qbsTable/utilities/VerticalDropDownMenu.js

@@ -9,6 +9,9 @@ var _icons = require("./icons");
 var _ToolTip = _interopRequireDefault(require("./ToolTip"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
@@ -32,11 +35,40 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
         setOpenMenu(false);
       }
     };
+    var handleScroll = function handleScroll() {
+      setOpenMenu(false);
+    };
     document.addEventListener('click', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+    // Use capture phase to catch all scrolls
+
     return function () {
       document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    var handleStyleChange = function handleStyleChange() {
+      setOpenMenu(false); // Close the dropdown
+    };
+    var scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
+    if (!scrollbarHandle) return;
+    var observer = new MutationObserver(function (mutations) {
+      for (var _iterator = _createForOfIteratorHelperLoose(mutations), _step; !(_step = _iterator()).done;) {
+        var mutation = _step.value;
+        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+          handleStyleChange();
+        }
+      }
+    });
+    observer.observe(scrollbarHandle, {
+      attributes: true,
+      attributeFilter: ['style']
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, [openMenu]);
   var handleMenuItemClick = function handleMenuItemClick(slug) {
     var _slug$action;
     handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/qbsTable/CustomTableCell.tsx

@@ -38,7 +38,16 @@ export const CheckCell: React.FC<any> = React.memo(
   )
 );
 export const ActionCell: React.FC<any> = React.memo(
-  ({ rowData, handleMenuActions, dataTheme, actionProps, tableBodyRef, rowIndex, dropType }) => {
+  ({
+    rowData,
+    handleMenuActions,
+    dataTheme,
+    actionProps,
+    tableBodyRef,
+    rowIndex,
+    dropType,
+    wheelWrapperRef
+  }) => {
     return (
       <div>
         {dropType == 'vertical' ? (
@@ -49,6 +58,7 @@ export const ActionCell: React.FC<any> = React.memo(
             dataTheme={dataTheme}
             rowIndex={rowIndex}
             handleMenuActions={handleMenuActions}
+            wheelWrapperRef={wheelWrapperRef}
           />
         ) : (
           <MenuDropDown

package/src/qbsTable/QbsTable.tsx

@@ -104,7 +104,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
   setTableFullView,
   setRowViewToggle,
   dropType = 'horizondal',
-  rowHeight
+  rowHeight,
+  isFullScreen
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -270,7 +271,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
     defaultRowView: defaultRowView,
     fullWidthView: fullWidthView,
     setTableFullView: setTableFullView,
-    setRowViewToggle: setRowViewToggle
+    setRowViewToggle: setRowViewToggle,
+    isFullScreen: isFullScreen
   };
   const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
@@ -599,7 +601,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
     const { scrollTop, clientHeight } = wrapper;
     const scrollHeight = Math.abs(scroll) + (height - headerHeight);
-
     // Trigger fetch when user scrolls within 100px of bottom
     if (scrollTop + clientHeight >= scrollHeight - 70) {
       loadMoreData?.(); // fetch next page here
@@ -791,6 +792,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                 <ActionCell
                   tableBodyRef={tableBodyRef}
                   dropType={dropType}
+                  wheelWrapperRef={wheelWrapperRef}
                   actionProps={actionProps}
                   className={`${classes.cellClass} ${classes.actionCellClass}`}
                   handleMenuActions={handleMenuActions}

package/src/qbsTable/Toolbar.tsx

@@ -32,7 +32,8 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   defaultRowView = true,
   fullWidthView = false,
   setTableFullView,
-  setRowViewToggle
+  setRowViewToggle,
+  isFullScreen = false
 }) => {
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
   const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
@@ -109,27 +110,31 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
           )}
           {tableHeaderActions}
           <div className=" pr-1 cursor-pointer relative table_custom_ctions   ">
-            {rowViewToggle && (
+            {(rowViewToggle || isFullScreen) && (
               <div className="flex gap-2 qbs-row-switch-cntainer">
-                <div className="flex gap-2 table_cell_style">
-                  <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Default View'}>
-                    <div onClick={() => setRowViewToggle?.(true)}>
-                      <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
-                    </div>
-                  </TooltipComponent>
-                  <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Compact View'}>
-                    <div onClick={() => setRowViewToggle?.(false)}>
-                      <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
-                    </div>
-                  </TooltipComponent>
-                </div>
-                <div className=" table_full_width">
-                  <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Full Screen'}>
-                    <div onClick={() => setTableFullView?.(!fullWidthView)}>
-                      <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
-                    </div>
-                  </TooltipComponent>
-                </div>
+                {rowViewToggle && (
+                  <div className="flex gap-2 table_cell_style">
+                    <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Default View'}>
+                      <div onClick={() => setRowViewToggle?.(true)}>
+                        <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
+                      </div>
+                    </TooltipComponent>
+                    <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Compact View'}>
+                      <div onClick={() => setRowViewToggle?.(false)}>
+                        <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
+                      </div>
+                    </TooltipComponent>
+                  </div>
+                )}
+                {isFullScreen && (
+                  <div className=" table_full_width">
+                    <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Full Screen'}>
+                      <div onClick={() => setTableFullView?.(!fullWidthView)}>
+                        <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
+                      </div>
+                    </TooltipComponent>
+                  </div>
+                )}
               </div>
             )}
 

package/src/qbsTable/commontypes.ts

@@ -142,6 +142,7 @@ export interface QbsTableProps {
   setRowViewToggle?: (value: boolean) => void;
   dropType?: 'horizondal' | 'vertical';
   rowHeight?: number;
+  isFullScreen?: boolean
 }
 
 export interface QbsTableToolbarProps {
@@ -183,4 +184,5 @@ export interface QbsTableToolbarProps {
   fullWidthView?: boolean;
   setTableFullView?: (value: boolean) => void;
   setRowViewToggle?: (value: boolean) => void;
+  isFullScreen?: boolean
 }

package/src/qbsTable/utilities/VerticalDropDownMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+
 import { ActionProps } from '../commontypes';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
@@ -11,6 +12,7 @@ type Props = {
   dataTheme?: string;
   tableBodyRef: React.RefObject<HTMLDivElement>;
   rowIndex?: number;
+  wheelWrapperRef?: React.RefObject<HTMLDivElement>;
 };
 
 const VerticalMenuDropdown: React.FC<Props> = ({
@@ -31,12 +33,44 @@ const VerticalMenuDropdown: React.FC<Props> = ({
         setOpenMenu(false);
       }
     };
+    const handleScroll = () => {
+      setOpenMenu(false);
+    };
 
     document.addEventListener('click', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+    // Use capture phase to catch all scrolls
+
     return () => {
       document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
     };
   }, []);
+  useEffect(() => {
+    const handleStyleChange = () => {
+      setOpenMenu(false); // Close the dropdown
+    };
+
+    const scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
+    if (!scrollbarHandle) return;
+
+    const observer = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+          handleStyleChange();
+        }
+      }
+    });
+
+    observer.observe(scrollbarHandle, {
+      attributes: true,
+      attributeFilter: ['style']
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [openMenu]);
 
   const handleMenuItemClick = (slug: ActionProps) => {
     handleMenuActions?.(slug, rowData);