qbs-react-grid 1.1.40 → 1.1.42

package/es/qbsTable/CustomTableCell.js

@@ -52,12 +52,14 @@ export var ActionCell = /*#__PURE__*/React.memo(function (_ref2) {
     handleMenuActions = _ref2.handleMenuActions,
     dataTheme = _ref2.dataTheme,
     actionProps = _ref2.actionProps,
-    tableBodyRef = _ref2.tableBodyRef;
+    tableBodyRef = _ref2.tableBodyRef,
+    rowIndex = _ref2.rowIndex;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MenuDropDown, {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,
     rowData: rowData,
     dataTheme: dataTheme,
+    rowIndex: rowIndex,
     handleMenuActions: handleMenuActions
   }));
 });

package/es/qbsTable/QbsTable.js

@@ -121,7 +121,7 @@ var QbsTable = function QbsTable(_ref) {
     var keys = event.target.checked ? data.map(function (item) {
       return item.id;
     }) : [];
-    var updatedKeys = [].concat(checkedKeys, keys);
+    var updatedKeys = [].concat(keys);
     setCheckedKeys(updatedKeys);
     handleChecked(updatedKeys);
   }, [data]);

package/es/qbsTable/commontypes.d.ts

@@ -41,7 +41,7 @@ export interface ActionProps {
     icon: React.ReactNode;
     toolTip?: string;
     hidden?: boolean;
-    hide?: (data: any) => boolean;
+    hide?: (data: any, index?: number) => boolean;
 }
 export interface QbsTableProps {
     isLoading?: boolean;

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

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

package/es/qbsTable/utilities/menuDropDown.js

@@ -6,12 +6,17 @@ var MenuDropDown = function MenuDropDown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
     rowData = _ref.rowData,
-    tableBodyRef = _ref.tableBodyRef;
+    tableBodyRef = _ref.tableBodyRef,
+    rowIndex = _ref.rowIndex;
   var _useState = useState(false),
     openMenu = _useState[0],
     setOpenMenu = _useState[1];
   var menuButtonRef = useRef(null);
   var menuRef = useRef(null);
+  var dropRef = useRef(null);
+  var _useState2 = useState('bottom-position'),
+    dropdownPosition = _useState2[0],
+    setDropdownPosition = _useState2[1];
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -23,9 +28,11 @@ var MenuDropDown = function MenuDropDown(_ref) {
       document.removeEventListener('click', handleClickOutside);
     };
   }, []);
-  var toggleMenu = function toggleMenu() {
-    setOpenMenu(!openMenu);
-  };
+
+  // const toggleMenu = () => {
+  //   setOpenMenu(!openMenu);
+  // };
+
   var handleMenuItemClick = function handleMenuItemClick(slug) {
     var _slug$action;
     handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
@@ -36,10 +43,50 @@ var MenuDropDown = function MenuDropDown(_ref) {
     var _result$length;
     var result = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
       var _item$hide;
-      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData));
+      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData, rowIndex));
     });
     return (_result$length = result === null || result === void 0 ? void 0 : result.length) != null ? _result$length : 0;
   };
+  var _useState3 = useState({
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    }),
+    menuPosition = _useState3[0],
+    setMenuPosition = _useState3[1];
+  var toggleMenu = function toggleMenu() {
+    if (!openMenu && menuButtonRef.current) {
+      var rect = menuButtonRef.current.getBoundingClientRect();
+      var topSpace = rect.top;
+      var bottomSpace = window.innerHeight - rect.bottom;
+      var leftSpace = rect.left;
+      var rightSpace = window.innerWidth - rect.right;
+      var dropdownHeight = 200;
+      var dropdownWidth = 200;
+      var newPosition = 'bottom-right';
+      if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
+        newPosition = 'top-right';
+      }
+      if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
+        newPosition = newPosition.replace('right', 'left');
+      }
+      if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
+        newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
+      }
+      setDropdownPosition(newPosition);
+      setMenuPosition({
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+        bottom: window.innerHeight - rect.bottom,
+        right: window.innerWidth - rect.right
+      });
+    }
+    setTimeout(function () {
+      setOpenMenu(!openMenu);
+    }, 200);
+  };
+  var buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
   return /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-menu-dropdown",
     ref: menuRef
@@ -48,10 +95,17 @@ var MenuDropDown = function MenuDropDown(_ref) {
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/React.createElement(ThreeDotIcon, null)), openMenu && /*#__PURE__*/React.createElement("div", {
-    className: 'qbs-table-qbs-table-menu-dropdown-content'
+    className: 'qbs-table-qbs-table-menu-dropdown-content',
+    ref: dropRef,
+    style: {
+      top: dropdownPosition.startsWith('bottom') ? menuPosition.top + window.scrollY + 20 + "px" : 'auto',
+      bottom: dropdownPosition.startsWith('top') ? menuPosition.bottom + 20 + "px" : 'auto',
+      left: dropdownPosition.endsWith('right') ? menuPosition.left + 10 + "px" : 'auto',
+      right: dropdownPosition.endsWith('left') ? window.innerWidth - menuPosition.left - buttonWidth + 10 + "px" : 'auto'
+    }
   }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
     var _item$hide2;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData)) && /*#__PURE__*/React.createElement("a", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex)) && /*#__PURE__*/React.createElement("a", {
       key: item.title,
       className: "p-2 leading-7 hover:bg-background ",
       onClick: function onClick(e) {

package/lib/qbsTable/CustomTableCell.js

@@ -60,12 +60,14 @@ var ActionCell = /*#__PURE__*/_react["default"].memo(function (_ref2) {
     handleMenuActions = _ref2.handleMenuActions,
     dataTheme = _ref2.dataTheme,
     actionProps = _ref2.actionProps,
-    tableBodyRef = _ref2.tableBodyRef;
+    tableBodyRef = _ref2.tableBodyRef,
+    rowIndex = _ref2.rowIndex;
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,
     rowData: rowData,
     dataTheme: dataTheme,
+    rowIndex: rowIndex,
     handleMenuActions: handleMenuActions
   }));
 });

package/lib/qbsTable/QbsTable.js

@@ -127,7 +127,7 @@ var QbsTable = function QbsTable(_ref) {
     var keys = event.target.checked ? data.map(function (item) {
       return item.id;
     }) : [];
-    var updatedKeys = [].concat(checkedKeys, keys);
+    var updatedKeys = [].concat(keys);
     setCheckedKeys(updatedKeys);
     handleChecked(updatedKeys);
   }, [data]);

package/lib/qbsTable/commontypes.d.ts

@@ -41,7 +41,7 @@ export interface ActionProps {
     icon: React.ReactNode;
     toolTip?: string;
     hidden?: boolean;
-    hide?: (data: any) => boolean;
+    hide?: (data: any, index?: number) => boolean;
 }
 export interface QbsTableProps {
     isLoading?: boolean;

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

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

package/lib/qbsTable/utilities/menuDropDown.js

@@ -12,12 +12,17 @@ var MenuDropDown = function MenuDropDown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
     rowData = _ref.rowData,
-    tableBodyRef = _ref.tableBodyRef;
+    tableBodyRef = _ref.tableBodyRef,
+    rowIndex = _ref.rowIndex;
   var _useState = (0, _react.useState)(false),
     openMenu = _useState[0],
     setOpenMenu = _useState[1];
   var menuButtonRef = (0, _react.useRef)(null);
   var menuRef = (0, _react.useRef)(null);
+  var dropRef = (0, _react.useRef)(null);
+  var _useState2 = (0, _react.useState)('bottom-position'),
+    dropdownPosition = _useState2[0],
+    setDropdownPosition = _useState2[1];
   (0, _react.useEffect)(function () {
     var handleClickOutside = function handleClickOutside(event) {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -29,9 +34,11 @@ var MenuDropDown = function MenuDropDown(_ref) {
       document.removeEventListener('click', handleClickOutside);
     };
   }, []);
-  var toggleMenu = function toggleMenu() {
-    setOpenMenu(!openMenu);
-  };
+
+  // const toggleMenu = () => {
+  //   setOpenMenu(!openMenu);
+  // };
+
   var handleMenuItemClick = function handleMenuItemClick(slug) {
     var _slug$action;
     handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
@@ -42,10 +49,50 @@ var MenuDropDown = function MenuDropDown(_ref) {
     var _result$length;
     var result = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
       var _item$hide;
-      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData));
+      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData, rowIndex));
     });
     return (_result$length = result === null || result === void 0 ? void 0 : result.length) != null ? _result$length : 0;
   };
+  var _useState3 = (0, _react.useState)({
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    }),
+    menuPosition = _useState3[0],
+    setMenuPosition = _useState3[1];
+  var toggleMenu = function toggleMenu() {
+    if (!openMenu && menuButtonRef.current) {
+      var rect = menuButtonRef.current.getBoundingClientRect();
+      var topSpace = rect.top;
+      var bottomSpace = window.innerHeight - rect.bottom;
+      var leftSpace = rect.left;
+      var rightSpace = window.innerWidth - rect.right;
+      var dropdownHeight = 200;
+      var dropdownWidth = 200;
+      var newPosition = 'bottom-right';
+      if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
+        newPosition = 'top-right';
+      }
+      if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
+        newPosition = newPosition.replace('right', 'left');
+      }
+      if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
+        newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
+      }
+      setDropdownPosition(newPosition);
+      setMenuPosition({
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+        bottom: window.innerHeight - rect.bottom,
+        right: window.innerWidth - rect.right
+      });
+    }
+    setTimeout(function () {
+      setOpenMenu(!openMenu);
+    }, 200);
+  };
+  var buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-menu-dropdown",
     ref: menuRef
@@ -54,10 +101,17 @@ var MenuDropDown = function MenuDropDown(_ref) {
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null)), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
-    className: 'qbs-table-qbs-table-menu-dropdown-content'
+    className: 'qbs-table-qbs-table-menu-dropdown-content',
+    ref: dropRef,
+    style: {
+      top: dropdownPosition.startsWith('bottom') ? menuPosition.top + window.scrollY + 20 + "px" : 'auto',
+      bottom: dropdownPosition.startsWith('top') ? menuPosition.bottom + 20 + "px" : 'auto',
+      left: dropdownPosition.endsWith('right') ? menuPosition.left + 10 + "px" : 'auto',
+      right: dropdownPosition.endsWith('left') ? window.innerWidth - menuPosition.left - buttonWidth + 10 + "px" : 'auto'
+    }
   }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
     var _item$hide2;
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData)) && /*#__PURE__*/_react["default"].createElement("a", {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex)) && /*#__PURE__*/_react["default"].createElement("a", {
       key: item.title,
       className: "p-2 leading-7 hover:bg-background ",
       onClick: function onClick(e) {

package/package.json

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

package/src/qbsTable/CustomTableCell.tsx

@@ -37,7 +37,7 @@ export const CheckCell: React.FC<any> = React.memo(
   )
 );
 export const ActionCell: React.FC<any> = React.memo(
-  ({ rowData, handleMenuActions, dataTheme, actionProps, tableBodyRef }) => {
+  ({ rowData, handleMenuActions, dataTheme, actionProps, tableBodyRef, rowIndex }) => {
     return (
       <div>
         <MenuDropDown
@@ -45,6 +45,7 @@ export const ActionCell: React.FC<any> = React.memo(
           actionDropDown={actionProps}
           rowData={rowData}
           dataTheme={dataTheme}
+          rowIndex={rowIndex}
           handleMenuActions={handleMenuActions}
         />
       </div>

package/src/qbsTable/QbsTable.tsx

@@ -7,7 +7,13 @@ import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
-import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
+import {
+  ActionCell,
+  CheckCell,
+  CustomRowStatus,
+  CustomTableCell,
+  ExpandCell
+} from './CustomTableCell';
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
 import debounce from './utilities/debounce';
@@ -102,7 +108,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const handleCheckAll = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const keys = event.target.checked ? data.map(item => item.id) : [];
-      let updatedKeys = [...checkedKeys, ...keys];
+      let updatedKeys = [...keys];
       setCheckedKeys(updatedKeys);
       handleChecked(updatedKeys);
     },

package/src/qbsTable/commontypes.ts

@@ -45,7 +45,7 @@ export interface ActionProps {
   icon: React.ReactNode;
   toolTip?: string;
   hidden?: boolean;
-  hide?: (data: any) => boolean;
+  hide?: (data: any,index?:number) => boolean;
 }
 
 export interface QbsTableProps {

package/src/qbsTable/utilities/menuDropDown.tsx

@@ -11,18 +11,21 @@ type Props = {
   rowData?: any;
   dataTheme?: string;
   tableBodyRef: React.RefObject<HTMLDivElement>;
+  rowIndex?: number;
 };
 
 const MenuDropDown: React.FC<Props> = ({
   actionDropDown,
   handleMenuActions,
   rowData,
-  tableBodyRef
+  tableBodyRef,
+  rowIndex
 }) => {
   const [openMenu, setOpenMenu] = useState(false);
   const menuButtonRef = useRef<HTMLButtonElement | null>(null);
   const menuRef = useRef<HTMLDivElement | null>(null);
-
+  const dropRef = useRef<HTMLDivElement | null>(null);
+  const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
@@ -37,9 +40,9 @@ const MenuDropDown: React.FC<Props> = ({
     };
   }, []);
 
-  const toggleMenu = () => {
-    setOpenMenu(!openMenu);
-  };
+  // const toggleMenu = () => {
+  //   setOpenMenu(!openMenu);
+  // };
 
   const handleMenuItemClick = (slug: ActionProps) => {
     handleMenuActions?.(slug, rowData);
@@ -47,9 +50,55 @@ const MenuDropDown: React.FC<Props> = ({
     setOpenMenu(false);
   };
   const handleShowHideMenu = () => {
-    const result = actionDropDown?.filter((item: any) => !item.hidden && !item?.hide?.(rowData));
+    const result = actionDropDown?.filter(
+      (item: any) => !item.hidden && !item?.hide?.(rowData, rowIndex)
+    );
     return result?.length ?? 0;
   };
+  const [menuPosition, setMenuPosition] = useState({
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  });
+  const toggleMenu = () => {
+    if (!openMenu && menuButtonRef.current) {
+      const rect = menuButtonRef.current.getBoundingClientRect();
+      const topSpace = rect.top;
+      const bottomSpace = window.innerHeight - rect.bottom;
+      const leftSpace = rect.left;
+      const rightSpace = window.innerWidth - rect.right;
+
+      const dropdownHeight = 200;
+      const dropdownWidth = 200;
+
+      let newPosition = 'bottom-right';
+
+      if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
+        newPosition = 'top-right';
+      }
+
+      if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
+        newPosition = newPosition.replace('right', 'left');
+      }
+
+      if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
+        newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
+      }
+
+      setDropdownPosition(newPosition);
+      setMenuPosition({
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+        bottom: window.innerHeight - rect.bottom,
+        right: window.innerWidth - rect.right
+      });
+    }
+    setTimeout(() => {
+      setOpenMenu(!openMenu);
+    }, 200);
+  };
+  const buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
   return (
     <div className="qbs-table-menu-dropdown" ref={menuRef}>
       {handleShowHideMenu() > 0 && (
@@ -58,10 +107,23 @@ const MenuDropDown: React.FC<Props> = ({
         </button>
       )}
       {openMenu && (
-        <div className={'qbs-table-qbs-table-menu-dropdown-content'}>
+        <div
+          className={'qbs-table-qbs-table-menu-dropdown-content'}
+          ref={dropRef}
+          style={{
+            top: dropdownPosition.startsWith('bottom')
+              ? `${menuPosition.top + window.scrollY + 20}px`
+              : 'auto',
+            bottom: dropdownPosition.startsWith('top') ? `${menuPosition.bottom + 20}px` : 'auto',
+            left: dropdownPosition.endsWith('right') ? `${menuPosition.left + 10}px` : 'auto',
+            right: dropdownPosition.endsWith('left')
+              ? `${window.innerWidth - menuPosition.left - buttonWidth + 10}px`
+              : 'auto'
+          }}
+        >
           {actionDropDown?.map(item => (
             <>
-              {!item?.hidden && !item?.hide?.(rowData) && (
+              {!item?.hidden && !item?.hide?.(rowData, rowIndex) && (
                 <a
                   key={item.title}
                   className={`p-2 leading-7 hover:bg-background `}