@sio-group/ui-datatable 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sio-group/ui-datatable
 
+## 0.1.4
+
+### Patch Changes
+
+- Bug: Fix action cel behavior
+
+## 0.1.3
+
+### Patch Changes
+
+- style datatable dropdown
+- Updated dependencies
+  - @sio-group/ui-modal@0.4.3
+
 ## 0.1.2
 
 ### 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

@@ -8,9 +8,13 @@
   --sio-color-error: #EF4444;
   --sio-color-warning: #F59E0B;
   --sio-color-info: #06B6D4;
+  --sio-datatable-bg: var(--sio-color-white);
   --sio-datatable-border: var(--sio-color-light-gray);
   --sio-datatable-striped: #f9fafb;
   --sio-datatable-hover: #f1f5f9;
+  --sio-datatable-shadow: 0 4px 8px 0;
+  --sio-datatable-shadow-color: rgba(0,0,0, .2);
+  --sio-datatable-border-radius: 3px;
   --sio-form-border: var(--sio-color-light-gray);
   --sio-form-bg: var(--sio-color-white);
 }
@@ -150,5 +154,34 @@
 .datatable .empty-state {
   margin: 25px;
 }
+.datatable .action-group {
+  display: flex;
+  gap: 3px;
+}
+.datatable .action-dropdown {
+  position: relative;
+  display: inline-block;
+}
+.datatable .action-dropdown__menu {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background: var(--sio-datatable-bg);
+  box-shadow: var(--sio-datatable-shadow) var(--sio-datatable-shadow-color);
+  border: 1px solid var(--sio-datatable-border);
+  border-radius: var(--sio-datatable-border-radius);
+  z-index: 1000;
+}
+.datatable .action-dropdown__menu .btn {
+  display: flex;
+  width: 100%;
+  min-width: 150px;
+  padding: 8px 16px;
+  border: none;
+  gap: 5px;
+}
+.datatable .action-dropdown__menu .btn:hover {
+  background-color: var(--sio-datatable-hover);
+}
 
 /*# sourceMappingURL=index.css.map */

package/dist/styles/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/assets/scss/tokens/_color.scss","../../src/assets/scss/tokens/_datatable.scss","../../src/assets/scss/index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;;ACjBF;EACE;EAEA;EACA;EAEA;EACA;EACA;;;ACJA;EACE;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;;AAIA;AAAA;EAEE;EACA;;AAIJ;EACE;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/assets/scss/tokens/_color.scss","../../src/assets/scss/tokens/_datatable.scss","../../src/assets/scss/index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;ACrBF;EACE;EAEA;EACA;EAEA;EACA;EACA;;;ACJA;EACE;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;;AAIA;AAAA;EAEE;EACA;;AAIJ;EACE;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAMA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"index.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sio-group/ui-datatable",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@sio-group/ui-core": "0.4.0",
     "@sio-group/ui-pagination": "0.1.1",
-    "@sio-group/ui-modal": "0.4.2"
+    "@sio-group/ui-modal": "0.4.3"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4",

package/src/assets/scss/index.scss

@@ -160,11 +160,41 @@
     margin: 25px;
   }
 
-  .action-cell {
-    .action-group {}
+  .action {
+    &-cel {}
 
-    .action-dropdown {
-      &__menu {}
+    &-group {
+      display: flex;
+      gap: 3px;
+    }
+
+    &-dropdown {
+      position: relative;
+      display: inline-block;
+
+      &__menu {
+        position: fixed;
+        display: flex;
+        flex-direction: column;
+        background: var(--sio-datatable-bg);
+        box-shadow: var(--sio-datatable-shadow) var(--sio-datatable-shadow-color);
+        border: 1px solid var(--sio-datatable-border);
+        border-radius: var(--sio-datatable-border-radius);
+        z-index: 1000;
+
+        .btn {
+          display: flex;
+          width: 100%;
+          min-width: 150px;
+          padding: 8px 16px;
+          border: none;
+          gap: 5px;
+
+          &:hover {
+            background-color: var(--sio-datatable-hover);
+          }
+        }
+      }
     }
   }
-}
+}

package/src/assets/scss/tokens/_color.scss

@@ -10,9 +10,13 @@
   --sio-color-warning: #F59E0B;
   --sio-color-info: #06B6D4;
 
+  --sio-datatable-bg: var(--sio-color-white);
   --sio-datatable-border: var(--sio-color-light-gray);
   --sio-datatable-striped: #f9fafb;
   --sio-datatable-hover: #f1f5f9;
+  --sio-datatable-shadow: 0 4px 8px 0;
+  --sio-datatable-shadow-color: rgba(0,0,0, .2);
+  --sio-datatable-border-radius: 3px;
 
   --sio-form-border: var(--sio-color-light-gray);
   --sio-form-bg: var(--sio-color-white);

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>