@farmzone/fz-react-ui 1.0.6 → 1.0.8

package/dist/index.cjs

@@ -248,7 +248,7 @@ function TooltipContent({
 var Z_INDEX = {
   TABLE_COL_STICKY: 1,
   TABLE_FIXED_CELL: 5,
-  TABLE_FIXED_HEADER_CELL: 10,
+  TABLE_FIXED_HEADER_CELL: 15,
   LOCAL_OVERLAY: 10,
   LAYOUT_HEADER: 20,
   DROPDOWN_LOCAL: 20,
@@ -499,12 +499,10 @@ function Input2(props) {
   const actualType = type === "password" && showPassword ? "text" : type;
   const handlePasswordToggle = () => setShowPassword((prev) => !prev);
   const finalRightIcon = rightIcon || (shouldShowPasswordToggle ? /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    "div",
     {
-      type: "button",
       onClick: handlePasswordToggle,
       className: "text-muted-foreground hover:text-foreground cursor-pointer transition-colors",
-      disabled,
       children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" })
     }
   ) : null);
@@ -3753,7 +3751,7 @@ function confirmModal(options) {
 }
 function TableFooter(props) {
   const { paginationInfo, renderLeft, renderRight } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-4 min-h-16", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-4 min-h-16 border-t-1 border-gray-100", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start flex-1 min-w-0", children: renderLeft }),
     paginationInfo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5", children: /* @__PURE__ */ jsxRuntime.jsx(Pagination, { ...paginationInfo }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end flex-1 min-w-0", children: renderRight })
@@ -3963,8 +3961,6 @@ function ArrowIcon(props) {
     }
   );
 }
-var DEFAULT_SORT_KEY = "";
-var DEFAULT_SORT_ORDER = "asc";
 var DEFAULT_SORT_OPTIONS = {
   visibleType: "always",
   sortKey: "",
@@ -4013,27 +4009,18 @@ function TableHeader(props) {
     if (onSortChange) {
       const isActive = sortOption?.sortKey === columnKey;
       const currentOrder = sortOption?.sortOrder;
-      if (isActive) {
-        if (currentOrder === "desc") {
-          onSortChange(columnKey, "asc");
-        } else if (currentOrder === "asc") {
-          onSortChange(DEFAULT_SORT_KEY, DEFAULT_SORT_ORDER);
-        } else {
-          onSortChange(columnKey, "desc");
-        }
+      if (isActive && currentOrder === "desc") {
+        onSortChange(columnKey, "asc");
       } else {
         onSortChange(columnKey, "desc");
       }
       return;
     }
     setInternalSortState((prev) => {
-      if (prev.columnKey !== columnKey) {
-        return { columnKey, order: "desc" };
-      }
-      if (prev.order === "desc") {
+      if (prev.columnKey === columnKey && prev.order === "desc") {
         return { columnKey, order: "asc" };
       }
-      return { columnKey: null, order: null };
+      return { columnKey, order: "desc" };
     });
   };
   const renderSortIcon = (columnKey) => {
@@ -4669,9 +4656,11 @@ function Table(props) {
     paginationInfo,
     renderFooter,
     tooltipConfig = "overflow",
-    isDynamicHeight = true
+    isDynamicHeight = true,
+    showHorizontalDivider = true,
+    showVerticalDivider = true
   } = props;
-  const { fixed = false, onSelectionChange, selectedKeys = [] } = checkboxInfo ?? {};
+  const { fixed = false, onSelectionChange, selectedKeys = [], disabledKeys = [], disabledTooltip } = checkboxInfo ?? {};
   const scrollRef = React6.useRef(null);
   const footerRef = React6.useRef(null);
   const [tableHeight, setTableHeight] = React6.useState(500);
@@ -4713,11 +4702,14 @@ function Table(props) {
     const footerH = footerRef.current?.getBoundingClientRect().height ?? 0;
     setTableHeight(window.innerHeight - top - footerH - 24);
   }, [showSkeleton, showEmpty]);
-  const isAllSelected = data.length > 0 && selectedKeys.length === data.length;
   const selectedKeysRef = React6.useRef(selectedKeys);
   selectedKeysRef.current = selectedKeys;
   const onSelectionChangeRef = React6.useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
+  const disabledKeysRef = React6.useRef(disabledKeys);
+  disabledKeysRef.current = disabledKeys;
+  const disabledTooltipRef = React6.useRef(disabledTooltip);
+  disabledTooltipRef.current = disabledTooltip;
   const dataRef = React6.useRef(data);
   dataRef.current = data;
   const onRowClickRef = React6.useRef(onRowClick);
@@ -4732,6 +4724,8 @@ function Table(props) {
     },
     [rowKey]
   );
+  const selectableKeys = data.map((record, index) => getRowKey(record, index)).filter((key) => !disabledKeys.includes(key));
+  const isAllSelected = selectableKeys.length > 0 && selectableKeys.every((key) => selectedKeys.includes(key));
   const allColumns = React6.useMemo(() => {
     const checkboxCol = {
       key: "__checkbox__",
@@ -4746,19 +4740,24 @@ function Table(props) {
           checked: isAllSelected,
           onChange: () => {
             if (!onSelectionChangeRef.current) return;
-            const allKeys = dataRef.current.map((record, index) => getRowKey(record, index));
+            const allKeys = dataRef.current.map((record, index) => getRowKey(record, index)).filter((key) => !disabledKeysRef.current.includes(key));
             onSelectionChangeRef.current(isAllSelected ? [] : allKeys);
           }
         }
       ),
       render: (_value, record, rowIdx) => {
         const key = getRowKey(record, rowIdx);
+        const isDisabled = disabledKeysRef.current.includes(key);
+        const tooltip = disabledTooltipRef.current;
+        const tooltipContent = isDisabled && tooltip ? typeof tooltip === "function" ? tooltip(key) : tooltip : void 0;
         return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,
           {
             checked: selectedKeysRef.current.includes(key),
+            disabled: isDisabled,
+            tooltipConfig: tooltipContent ? { content: tooltipContent, position: "bottom" } : void 0,
             onChange: () => {
-              if (!onSelectionChangeRef.current) return;
+              if (!onSelectionChangeRef.current || isDisabled) return;
               const cur = selectedKeysRef.current;
               const next = cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key];
               onSelectionChangeRef.current(next);
@@ -5019,7 +5018,7 @@ function Table(props) {
           id: `${col.key}-body`,
           "data-row-cell": "true",
           "data-col-key": col.key,
-          className: `${isCheckbox ? "p-0" : "px-2 py-3"} whitespace-nowrap text-sm text-gray-900 border-r border-b border-gray-200 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all`,
+          className: `${isCheckbox ? "p-0" : "p-3"} whitespace-nowrap text-sm text-gray-900 border-gray-300/70 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all ${showVerticalDivider ? "border-r" : ""} ${showHorizontalDivider ? "border-b" : ""}`,
           style: {
             width,
             minWidth: minWidth || width,
@@ -5111,7 +5110,7 @@ function Table(props) {
     const rest = baseRows.filter((row) => !effectiveRowOrder.includes(String(getRowKey(row.original, row.index))));
     return [...ordered, ...rest];
   }, [baseRows, effectiveRowOrder, getRowKey]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded shadow-panel", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded shadow-table border border-gray-200 overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -5119,7 +5118,7 @@ function Table(props) {
         ref: scrollRef,
         className: "relative w-full overflow-y-auto overflow-x-auto custom-view-scrollbar bg-white",
         style: { height: `${tableHeight}px` },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-fixed", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-fixed border-spacing-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             TableHeader,
             {
@@ -7658,7 +7657,7 @@ var SubmitForm = Object.assign(SubmitFormRoot, {
 });
 function LabeledFilterOption(props) {
   const { label, children, gap } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginLeft: gap }, className: "flex flex-row items-center gap-5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginLeft: gap }, className: "flex flex-row items-center gap-4", children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-60 shrink-0", children: label }),
     children
   ] });
@@ -7670,7 +7669,7 @@ function PageFilter(props) {
     onSubmit,
     onReset,
     containerClassName,
-    rowGap = 32,
+    rowGap = 28,
     colGap = 0,
     submitButtonText = "\uAC80\uC0C9",
     resetButtonText = "\uCD08\uAE30\uD654",
@@ -7784,9 +7783,9 @@ function PageFilter(props) {
       style: primaryColor ? { borderTopColor: primaryColor } : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-col", style: { gap: `${colGap}px` }, children: rows.map((row, ix) => {
         const isLastRow = rows.length - 1 === ix;
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row min-h-12", children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row min-h-11", children: [
           row.options.map((option, index) => renderFilterOption(option, rowGap, index)),
-          isLastRow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 flex flex-row items-center gap-2", children: [
+          isLastRow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-2 flex flex-row items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "search", onClick: handleSubmit, children: submitButtonText }),
             onReset && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "reset", onClick: handleReset, children: resetButtonText })
           ] })
@@ -9532,7 +9531,8 @@ function DetailModalFrame(props) {
     contentClassName,
     renderExtraContent,
     renderFooterExtra,
-    onDirtyChange
+    onDirtyChange,
+    headerType
   } = props;
   const controller = useDetailController({ mode, onModeChange });
   React6.useEffect(() => {
@@ -9571,7 +9571,14 @@ function DetailModalFrame(props) {
   const isEditMode = controller.mode === "edit";
   const canEdit = Boolean(editSchema && (editFields || renderEditBody));
   return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { isOpen: open, onClose: handleClose, contentClassName: cn("max-w-2xl", contentClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { className: "flex flex-row items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-gray-900", children: title }) }),
+    headerType ? /* @__PURE__ */ jsxRuntime.jsx(
+      ModalIconHeader,
+      {
+        type: isEditMode ? "edit" : headerType,
+        title,
+        onClose: handleClose
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { className: "flex flex-row items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-gray-900", children: title }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(ModalBody, { className: "flex-1 min-h-0 overflow-hidden p-0 flex flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
         DetailContent,