@sio-group/ui-datatable 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sio-group/ui-datatable
 
+## 0.1.5
+
+### Patch Changes
+
+- Added inline input class
+
+## 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"
           }
         ),
@@ -368,7 +367,7 @@ var InlineInputCell = ({
     document.addEventListener("keydown", handleEsc);
     return () => document.removeEventListener("keydown", handleEsc);
   }, [setShowEdit]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: showEdit ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { noValidate: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "inline-input", children: showEdit ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { noValidate: true, children: [
     formField.type === "select" || formField.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "select",
       {

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"
           }
         ),
@@ -342,7 +341,7 @@ var InlineInputCell = ({
     document.addEventListener("keydown", handleEsc);
     return () => document.removeEventListener("keydown", handleEsc);
   }, [setShowEdit]);
-  return /* @__PURE__ */ jsx7(Fragment3, { children: showEdit ? /* @__PURE__ */ jsxs4("form", { noValidate: true, children: [
+  return /* @__PURE__ */ jsx7("div", { className: "inline-input", children: showEdit ? /* @__PURE__ */ jsxs4("form", { noValidate: true, children: [
     formField.type === "select" || formField.type === "radio" ? /* @__PURE__ */ jsx7(
       "select",
       {

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.5",
   "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>

package/src/components/cell-types/InlineInputCell.tsx

@@ -42,7 +42,7 @@ export const InlineInputCell = <T extends { id: string | number }>({
     }, [setShowEdit]);
 
     return (
-        <>
+        <div className="inline-input">
             {showEdit ? (
                 <form noValidate>
                     {formField.type === "select" || formField.type === "radio" ? (
@@ -115,6 +115,6 @@ export const InlineInputCell = <T extends { id: string | number }>({
                     </Button>
                 </>
             )}
-        </>
+        </div>
     )
 }