@dreamtree-org/twreact-ui 1.1.73 → 1.2.0

package/dist/index.esm.js

@@ -5709,7 +5709,7 @@ function FieldInput(_ref) {
   });
 }
 
-var _excluded$x = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "replaceDefaultActions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent", "interactive", "onSave", "onEdit", "onRowAdd", "onRowDelete"],
+var _excluded$x = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "replaceDefaultActions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent", "interactive", "onSave", "onEdit", "onRowAdd", "onRowDelete", "editKeyBinding", "newRowPosition", "addRowRef", "onInitAddRow", "renderAddRowButton", "renderExternalAddRow"],
   _excluded2$4 = ["_key", "_isNew"];
 function ownKeys$B(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -5722,7 +5722,7 @@ var DEFAULT_THEME = {
   menuBg: "bg-white",
   menuItemHover: "hover:bg-gray-50"
 };
-var Table = function Table(_ref) {
+var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   var _validationErrors$;
   var _ref$data = _ref.data,
     initialData = _ref$data === void 0 ? DEFAULT_DATA : _ref$data,
@@ -5792,6 +5792,14 @@ var Table = function Table(_ref) {
     onEdit = _ref.onEdit,
     onRowAdd = _ref.onRowAdd,
     onRowDelete = _ref.onRowDelete,
+    _ref$editKeyBinding = _ref.editKeyBinding,
+    editKeyBinding = _ref$editKeyBinding === void 0 ? "e" : _ref$editKeyBinding,
+    _ref$newRowPosition = _ref.newRowPosition,
+    newRowPosition = _ref$newRowPosition === void 0 ? "bottom" : _ref$newRowPosition,
+    addRowRef = _ref.addRowRef,
+    onInitAddRow = _ref.onInitAddRow,
+    renderAddRowButton = _ref.renderAddRowButton,
+    renderExternalAddRow = _ref.renderExternalAddRow,
     props = _objectWithoutProperties$1(_ref, _excluded$x);
   theme = _objectSpread$B(_objectSpread$B({}, DEFAULT_THEME), theme);
   // State
@@ -6069,9 +6077,10 @@ var Table = function Table(_ref) {
       return _objectSpread$B(_objectSpread$B({}, prev), {}, _defineProperty$4({}, rowKey, nextRowEdits));
     });
   }, [newRows, tableData, onEdit]);
-  var handleAddRow = useCallback(function () {
+  var _handleAddRow = useCallback(function (positionOverride) {
     var _columnsState$find, _columnsState$;
-    var newKey = "new-".concat(Date.now());
+    var targetPos = typeof positionOverride === "string" && (positionOverride === "top" || positionOverride === "bottom") ? positionOverride : newRowPosition || "bottom";
+    var newKey = "new-".concat(Date.now(), "-").concat(Math.random().toString(36).substring(2, 6));
     var newRowObj = {
       _key: newKey,
       _isNew: true
@@ -6081,23 +6090,51 @@ var Table = function Table(_ref) {
       newRowObj[col.key] = (_col$defaultValue = col.defaultValue) !== null && _col$defaultValue !== void 0 ? _col$defaultValue : "";
     });
     setNewRows(function (prev) {
+      if (targetPos === "top") {
+        return [newRowObj].concat(_toConsumableArray$1(prev));
+      }
       return [].concat(_toConsumableArray$1(prev), [newRowObj]);
     });
     var firstColKey = ((_columnsState$find = columnsState.find(function (c) {
       return c.isVisible !== false;
     })) === null || _columnsState$find === void 0 ? void 0 : _columnsState$find.key) || ((_columnsState$ = columnsState[0]) === null || _columnsState$ === void 0 ? void 0 : _columnsState$.key);
+    var initialRowIndex = targetPos === "top" ? 0 : tableData.length + newRows.length;
     setActiveCell({
       rowKey: newKey,
       colKey: firstColKey,
-      rowIndex: tableData.length + newRows.length
+      rowIndex: initialRowIndex
     });
     setEditingCell({
       rowKey: newKey,
       colKey: firstColKey,
-      rowIndex: tableData.length + newRows.length
+      rowIndex: initialRowIndex
+    });
+    onRowAdd === null || onRowAdd === void 0 || onRowAdd(newRowObj, targetPos);
+  }, [columnsState, tableData.length, newRows.length, onRowAdd, newRowPosition]);
+  useImperativeHandle(ref, function () {
+    return {
+      addRow: function addRow(pos) {
+        return _handleAddRow(pos);
+      },
+      addNewRow: function addNewRow(pos) {
+        return _handleAddRow(pos);
+      },
+      handleAddRow: function handleAddRow(pos) {
+        return _handleAddRow(pos);
+      },
+      tableContainerRef: tableContainerRef.current
+    };
+  }, [_handleAddRow]);
+  useEffect(function () {
+    if (addRowRef) {
+      addRowRef.current = function (pos) {
+        return _handleAddRow(pos);
+      };
+    }
+    onInitAddRow === null || onInitAddRow === void 0 || onInitAddRow(function (pos) {
+      return _handleAddRow(pos);
     });
-    onRowAdd === null || onRowAdd === void 0 || onRowAdd(newRowObj);
-  }, [columnsState, tableData.length, newRows.length, onRowAdd]);
+  }, [addRowRef, onInitAddRow, _handleAddRow]);
   var handleDeleteNewRow = useCallback(function (rowKey) {
     setNewRows(function (prev) {
       return prev.filter(function (r) {
@@ -6361,6 +6398,15 @@ var Table = function Table(_ref) {
       };
     });
   }, [limitOptions]);
+  var isEditKey = useCallback(function (key, e) {
+    if (typeof editKeyBinding === "function") {
+      return editKeyBinding(e);
+    }
+    if (typeof editKeyBinding === "string" && editKeyBinding.trim() !== "") {
+      return key.toLowerCase() === editKeyBinding.toLowerCase();
+    }
+    return key.toLowerCase() === "e" || key === "Insert";
+  }, [editKeyBinding]);
   var handleTableKeyDown = useCallback(function (e) {
     if (!interactive) return;
     var key = e.key,
@@ -6373,24 +6419,33 @@ var Table = function Table(_ref) {
       }
       return;
     }
-    // Enter: Save changes only when there are modified changes (isDirty)
-    if (key === "Enter") {
+    // Enter: Save changes when there are modified changes (isDirty)
+    if (key === "Enter" && isDirty) {
       var _e$target;
       if (((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.tagName) === "TEXTAREA" && shiftKey) {
         return;
       }
-      if (isDirty) {
-        e.preventDefault();
-        setEditingCell(null);
-        if (isValid && !isSaving) {
-          handleSave();
-        }
+      e.preventDefault();
+      setEditingCell(null);
+      if (isValid && !isSaving) {
+        handleSave();
       }
       return;
     }
+    // Standard Edit Key ('e' or custom editKeyBinding) when focused on active cell and not editing: enter edit mode
+    if (isEditKey(key, e) && activeCell && !editingCell) {
+      var col = visibleColumns.find(function (c) {
+        return c.key === activeCell.colKey;
+      });
+      if (col && col.editable !== false) {
+        e.preventDefault();
+        setEditingCell(activeCell);
+        return;
+      }
+    }
     var currentCell = activeCell || editingCell;
     if (!currentCell) return;
-    var allRows = [].concat(_toConsumableArray$1(paginatedData), _toConsumableArray$1(newRows));
+    var allRows = newRowPosition === "top" ? [].concat(_toConsumableArray$1(newRows), _toConsumableArray$1(paginatedData)) : [].concat(_toConsumableArray$1(paginatedData), _toConsumableArray$1(newRows));
     if (allRows.length === 0 || visibleColumns.length === 0) return;
     var rIdx = allRows.findIndex(function (r, idx) {
       var rKey = r._key || getRowKey(r, startIndex + idx);
@@ -6709,6 +6764,26 @@ var Table = function Table(_ref) {
     invalidCellSet: invalidCellSet,
     pendingEdits: pendingEdits
   };
+  var renderAddRowClickableRow = useCallback(function () {
+    return jsx("tr", {
+      onClick: function onClick() {
+        return _handleAddRow(newRowPosition);
+      },
+      className: "bg-primary-50/40 hover:bg-primary-100/70 active:bg-primary-100 transition-colors border-t-2 border-b-2 border-dashed border-primary-300 cursor-pointer group",
+      children: jsx("td", {
+        colSpan: visibleCount,
+        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800",
+        children: jsxs("div", {
+          className: "flex items-center justify-start gap-2",
+          children: [jsx(Plus, {
+            className: "w-4 h-4 text-primary-600 group-hover:scale-110 transition-transform"
+          }), jsx("span", {
+            children: "Click here to add new record instantly...."
+          })]
+        })
+      })
+    });
+  }, [_handleAddRow, newRowPosition, visibleCount]);
   return jsxs("div", {
     ref: tableContainerRef,
     tabIndex: interactive ? 0 : undefined,
@@ -6753,7 +6828,14 @@ var Table = function Table(_ref) {
         })]
       }), jsxs("div", {
         className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto",
-        children: [interactive && isDirty && jsxs("div", {
+        children: [interactive && (renderAddRowButton || renderExternalAddRow) && jsx("div", {
+          className: "flex items-center gap-2",
+          children: typeof (renderAddRowButton || renderExternalAddRow) === "function" ? (renderAddRowButton || renderExternalAddRow)({
+            addRow: _handleAddRow,
+            handleAddRow: _handleAddRow,
+            newRowPosition: newRowPosition
+          }) : renderAddRowButton || renderExternalAddRow
+        }), interactive && isDirty && jsxs("div", {
           className: "flex items-center gap-2 flex-wrap",
           children: [jsxs("button", {
             type: "button",
@@ -6949,9 +7031,9 @@ var Table = function Table(_ref) {
               className: "pb-4"
             })]
           })]
-        }), jsxs("tbody", {
+        }), jsx("tbody", {
           className: "divide-y divide-gray-200",
-          children: [loading ? jsx("tr", {
+          children: loading ? jsx("tr", {
             children: jsx("td", {
               colSpan: visibleCount,
               className: "px-6 py-8 text-center",
@@ -6965,32 +7047,43 @@ var Table = function Table(_ref) {
                 })]
               })
             })
-          }) : paginatedData.length === 0 && newRows.length === 0 ? jsx("tr", {
-            children: jsx("td", {
-              colSpan: visibleCount,
-              className: "px-6 py-8 text-center",
-              children: jsxs("div", {
-                className: "flex flex-col items-center gap-2",
-                children: [jsx("div", {
-                  className: "text-primary-400",
-                  children: jsx(List, {
-                    className: "h-8 w-8"
-                  })
-                }), jsx("span", {
-                  className: "text-sm text-primary-500",
-                  children: "No results found."
-                })]
+          }) : paginatedData.length === 0 && newRows.length === 0 ? jsxs(Fragment, {
+            children: [interactive && newRowPosition === "top" && renderAddRowClickableRow(), jsx("tr", {
+              children: jsx("td", {
+                colSpan: visibleCount,
+                className: "px-6 py-8 text-center",
+                children: jsxs("div", {
+                  className: "flex flex-col items-center gap-2",
+                  children: [jsx("div", {
+                    className: "text-primary-400",
+                    children: jsx(List, {
+                      className: "h-8 w-8"
+                    })
+                  }), jsx("span", {
+                    className: "text-sm text-primary-500",
+                    children: "No results found."
+                  })]
+                })
               })
-            })
+            }), interactive && newRowPosition !== "top" && renderAddRowClickableRow()]
           }) : jsxs(Fragment, {
-            children: [paginatedData.map(function (row, rowIndexInPage) {
+            children: [interactive && newRowPosition === "top" && renderAddRowClickableRow(), interactive && newRowPosition === "top" && newRows.map(function (newRow, newIdx) {
+              return jsx(TableRow, _objectSpread$B({
+                row: newRow,
+                rowIndexInPage: newIdx,
+                startIndex: 0,
+                visibleCount: visibleCount,
+                isNewRow: true,
+                onDeleteNewRow: handleDeleteNewRow
+              }, rowSharedProps), newRow._key);
+            }), paginatedData.map(function (row, rowIndexInPage) {
               return jsx(TableRow, _objectSpread$B({
                 row: row,
                 rowIndexInPage: rowIndexInPage,
                 startIndex: startIndex,
                 visibleCount: visibleCount
               }, rowSharedProps), getRowKey(row, startIndex + rowIndexInPage));
-            }), interactive && newRows.map(function (newRow, newIdx) {
+            }), interactive && newRowPosition !== "top" && newRows.map(function (newRow, newIdx) {
               return jsx(TableRow, _objectSpread$B({
                 row: newRow,
                 rowIndexInPage: paginatedData.length + newIdx,
@@ -6999,23 +7092,8 @@ var Table = function Table(_ref) {
                 isNewRow: true,
                 onDeleteNewRow: handleDeleteNewRow
               }, rowSharedProps), newRow._key);
-            })]
-          }), interactive && jsx("tr", {
-            onClick: handleAddRow,
-            className: "bg-primary-50/40 hover:bg-primary-100/70 active:bg-primary-100 transition-colors border-t-2 border-dashed border-primary-300 cursor-pointer group",
-            children: jsx("td", {
-              colSpan: visibleCount,
-              className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800",
-              children: jsxs("div", {
-                className: "flex items-center justify-start gap-2",
-                children: [jsx(Plus, {
-                  className: "w-4 h-4 text-primary-600 group-hover:scale-110 transition-transform"
-                }), jsx("span", {
-                  children: "Click here to add new record instantly...."
-                })]
-              })
-            })
-          })]
+            }), interactive && newRowPosition !== "top" && renderAddRowClickableRow()]
+          })
         })]
       }))
     }), isMobileView && jsx("div", {
@@ -7063,7 +7141,7 @@ var Table = function Table(_ref) {
       theme: safeTheme
     })]
   });
-};
+});
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -13684,7 +13762,7 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
 });
 Accordion.displayName = "Accordion";
 
-var _excluded$s = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass"];
+var _excluded$s = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass", "wrapperProps"];
 function ownKeys$w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SIZE_CLASSES = {
@@ -13751,7 +13829,6 @@ var COLOR_PRESETS = {
   }
 };
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _props$wrapperProps;
   var id = _ref.id,
     name = _ref.name,
     label = _ref.label,
@@ -13779,6 +13856,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     color = _ref$color === void 0 ? "primary" : _ref$color,
     iconClass = _ref.iconClass,
     checkedClass = _ref.checkedClass,
+    wrapperProps = _ref.wrapperProps,
     props = _objectWithoutProperties$1(_ref, _excluded$s);
   var autoId = useId();
   var inputId = id || "".concat(autoId, "-checkbox");
@@ -13819,7 +13897,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   } : {};
   return jsxs("div", _objectSpread$w(_objectSpread$w({
     className: wrapperCls
-  }, (_props$wrapperProps = props === null || props === void 0 ? void 0 : props.wrapperProps) !== null && _props$wrapperProps !== void 0 ? _props$wrapperProps : {}), {}, {
+  }, wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {}), {}, {
     children: [label && labelPosition === "left" && jsx("label", {
       htmlFor: inputId,
       className: "".concat(sizeClass.label, " select-none mr-2"),
@@ -13838,7 +13916,6 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
         className: "peer absolute inset-0 m-0 p-0 opacity-0 z-10",
         // ensure we set checked only from the boolean (avoid undefined)
         checked: Boolean(currentChecked),
-        defaultChecked: defaultChecked,
         onChange: handleChange,
         disabled: disabled,
         required: required,
@@ -13865,6 +13942,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     })]
   }));
 });
+Checkbox.displayName = "Checkbox";
 
 var _excluded$r = ["value", "defaultValue", "onChange", "swatches", "showAlpha", "size", "disabled", "className", "label", "id"];
 function ownKeys$v(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }