@sio-group/ui-datatable 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sio-group/ui-datatable
 
+## 0.1.4
+
+### Patch Changes
+
+- Bug: Fix action cel behavior
+
 ## 0.1.3
 
 ### Patch Changes

package/dist/index.cjs

@@ -205,13 +205,15 @@ var ActionCell = ({
     if (dropdownRef.current && triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       dropdownRef.current.style.left = `${rect.left}px`;
-      dropdownRef.current.style.top = `${rect.top}px`;
+      dropdownRef.current.style.top = `${rect.bottom}px`;
     }
   };
   (0, import_react2.useEffect)(() => {
     if (!isOpen) return;
+    positionDropdown();
     const handleOutside = (e) => {
       if (dropdownRef.current?.contains(e.target)) return;
+      if (triggerRef.current?.contains(e.target)) return;
       setIsOpen(false);
     };
     document.addEventListener("mousedown", handleOutside, false);
@@ -248,10 +250,7 @@ var ActionCell = ({
             "aria-label": "Acties",
             "aria-expanded": isOpen,
             "aria-haspopup": "menu",
-            onClick: () => {
-              setIsOpen(!isOpen);
-              positionDropdown();
-            },
+            onClick: () => setIsOpen(!isOpen),
             children: renderMenuIcon ? renderMenuIcon() : "\u22EE"
           }
         ),

package/dist/index.js

@@ -179,13 +179,15 @@ var ActionCell = ({
     if (dropdownRef.current && triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       dropdownRef.current.style.left = `${rect.left}px`;
-      dropdownRef.current.style.top = `${rect.top}px`;
+      dropdownRef.current.style.top = `${rect.bottom}px`;
     }
   };
   useEffect(() => {
     if (!isOpen) return;
+    positionDropdown();
     const handleOutside = (e) => {
       if (dropdownRef.current?.contains(e.target)) return;
+      if (triggerRef.current?.contains(e.target)) return;
       setIsOpen(false);
     };
     document.addEventListener("mousedown", handleOutside, false);
@@ -222,10 +224,7 @@ var ActionCell = ({
             "aria-label": "Acties",
             "aria-expanded": isOpen,
             "aria-haspopup": "menu",
-            onClick: () => {
-              setIsOpen(!isOpen);
-              positionDropdown();
-            },
+            onClick: () => setIsOpen(!isOpen),
             children: renderMenuIcon ? renderMenuIcon() : "\u22EE"
           }
         ),

package/dist/styles/index.css

@@ -163,7 +163,7 @@
   display: inline-block;
 }
 .datatable .action-dropdown__menu {
-  position: absolute;
+  position: fixed;
   display: flex;
   flex-direction: column;
   background: var(--sio-datatable-bg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sio-group/ui-datatable",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",

package/src/assets/scss/index.scss

@@ -173,7 +173,7 @@
       display: inline-block;
 
       &__menu {
-        position: absolute;
+        position: fixed;
         display: flex;
         flex-direction: column;
         background: var(--sio-datatable-bg);

package/src/components/ActionCell.tsx

@@ -15,15 +15,18 @@ export const ActionCell = <T extends { id: string | number }> ({
         if (dropdownRef.current && triggerRef.current) {
             const rect: DOMRect = triggerRef.current.getBoundingClientRect();
             dropdownRef.current.style.left = `${rect.left}px`;
-            dropdownRef.current.style.top = `${rect.top}px`;
+            dropdownRef.current.style.top = `${rect.bottom}px`;
         }
     }
 
     useEffect(() => {
         if (!isOpen) return;
 
+        positionDropdown();
+
         const handleOutside = (e: MouseEvent | Event) => {
             if (dropdownRef.current?.contains(e.target as Node)) return;
+            if (triggerRef.current?.contains(e.target as Node)) return;
             setIsOpen(false);
         }
 
@@ -65,10 +68,7 @@ export const ActionCell = <T extends { id: string | number }> ({
                         aria-label="Acties"
                         aria-expanded={isOpen}
                         aria-haspopup="menu"
-                        onClick={() => {
-                            setIsOpen(!isOpen);
-                            positionDropdown();
-                        }}
+                        onClick={() => setIsOpen(!isOpen)}
                     >
                         {renderMenuIcon ? renderMenuIcon() : '⋮'}
                     </button>