@farmzone/fz-react-ui 1.0.16 → 1.0.18

package/dist/index.d.cts

@@ -652,6 +652,7 @@ interface Column<T> {
     sortable?: boolean;
     sort?: "asc" | "desc" | null;
     fixed?: TableFixed;
+    tooltipText?: (value: unknown, record: T, index: number) => ReactNode;
 }
 
 interface CheckboxInfo {
@@ -970,6 +971,7 @@ type SelectOption<P> = BaseOption<P> & {
     placeholder?: string;
     containerClassName?: string;
     canReset?: boolean;
+    autoSubmit?: boolean;
 };
 type RadioOption<P> = BaseOption<P> & {
     type: "radio";

package/dist/index.d.ts

@@ -652,6 +652,7 @@ interface Column<T> {
     sortable?: boolean;
     sort?: "asc" | "desc" | null;
     fixed?: TableFixed;
+    tooltipText?: (value: unknown, record: T, index: number) => ReactNode;
 }
 
 interface CheckboxInfo {
@@ -970,6 +971,7 @@ type SelectOption<P> = BaseOption<P> & {
     placeholder?: string;
     containerClassName?: string;
     canReset?: boolean;
+    autoSubmit?: boolean;
 };
 type RadioOption<P> = BaseOption<P> & {
     type: "radio";

package/dist/index.js

@@ -4105,45 +4105,15 @@ function TableHeader(props) {
     };
   };
   const renderColumnTitle = (column, isClickableHead) => {
-    const baseClasses = "pt-0.5 select-none";
+    const baseClasses = "pt-0.5 select-none truncate";
     const subTitleClasses = column.key === "subTitle" ? "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800" : "";
-    if (column.align === "left") {
-      return /* @__PURE__ */ jsxs("div", { className: "flex item-center w-full", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: `pl-3 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) }),
-        column.sortable && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `w-5 flex flex-col gap-[1.5px] items-center justify-center cursor-pointer ${isClickableHead}`,
-            children: renderSortIcon(column.key)
-          }
-        )
-      ] });
-    }
-    if (column.align === "center") {
-      return /* @__PURE__ */ jsxs("div", { className: "flex justify-center w-full", children: [
-        /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center ${column.sortable ? "pl-5" : ""}`, children: /* @__PURE__ */ jsx("span", { className: `whitespace-nowrap ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) }),
-        column.sortable && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `w-5 flex flex-col gap-[1.5px] items-center justify-center cursor-pointer ${isClickableHead}`,
-            children: renderSortIcon(column.key)
-          }
-        )
-      ] });
-    }
-    if (column.align === "right") {
-      return /* @__PURE__ */ jsxs("div", { className: "flex justify-end w-full", children: [
-        column.sortable && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `w-5 flex flex-col gap-[1.5px] items-center justify-center cursor-pointer ${isClickableHead}`,
-            children: renderSortIcon(column.key)
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: `pr-3 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) })
-      ] });
-    }
-    return /* @__PURE__ */ jsx("span", { className: `px-1.5 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title });
+    const hasSortIcon = column.sortable;
+    const textAlignClass = column.align === "center" ? "text-center" : column.align === "right" ? "text-right" : "text-left";
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
+      hasSortIcon && column.align === "center" && /* @__PURE__ */ jsx("div", { className: "w-5 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: `flex-1 px-3 ${textAlignClass} ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }),
+      hasSortIcon && /* @__PURE__ */ jsx("div", { className: `w-6 shrink-0 flex items-center justify-center cursor-pointer ${isClickableHead}`, children: renderSortIcon(column.key) })
+    ] });
   };
   const createGroupHeaders = () => {
     const mainGroups2 = {};
@@ -4563,32 +4533,64 @@ function TableEmpty(props) {
     /* @__PURE__ */ jsx("span", { className: "text-md text-gray-500", children: "\uB4F1\uB85D\uB41C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
   ] }) }) });
 }
+function TableCellTooltip({ children, content }) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      TooltipPrimitive.Content,
+      {
+        side: "bottom",
+        sideOffset: 5,
+        collisionPadding: 8,
+        className: "relative animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 z-50 w-full max-w-[500px] origin-(--radix-tooltip-content-transform-origin) rounded-md bg-neutral-700 text-sm font-medium text-white",
+        style: { zIndex: Z_INDEX.TOOLTIP },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "px-3 py-[5px] break-words whitespace-normal custom-view-scrollbar",
+              style: { overflowY: "auto", maxHeight: "250px" },
+              children: content
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TooltipPrimitive.Arrow,
+            {
+              className: cn(
+                "z-50 w-2.5 h-2.5 translate-y-[calc(-50%_-_0px)] rotate-45 rounded-[2px]",
+                "bg-neutral-700 !fill-neutral-700"
+              ),
+              style: { fill: "currentColor" }
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+}
 function TableCellContent(props) {
   const { cellContent, tooltipText, align, tooltipConfig, onCellClick } = props;
-  const textRef = useRef(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
-  useEffect(() => {
-    if (tooltipConfig !== "overflow") return;
-    const el = textRef.current;
-    if (!el) return;
-    const check = () => setIsOverflowing(el.scrollWidth > el.clientWidth);
-    check();
-    const observer = new ResizeObserver(check);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [tooltipConfig]);
+  const observerRef = useRef(null);
+  const refCallback = useCallback(
+    (el) => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+      if (!el || tooltipConfig !== "overflow") return;
+      const check = () => setIsOverflowing(el.scrollWidth > el.clientWidth);
+      const observer = new ResizeObserver(check);
+      observer.observe(el);
+      observerRef.current = observer;
+    },
+    [tooltipConfig]
+  );
   const shouldShowTooltip = tooltipConfig === "always" || tooltipConfig === "overflow" && isOverflowing;
   const textAlign = align === "center" ? "center" : align === "right" ? "right" : "left";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: textRef,
-      className: `ellipsis-1-line table-item w-full min-w-0 ${onCellClick ? "hover:text-main cursor-pointer" : "cursor-default"}`,
-      style: { textAlign },
-      onClick: onCellClick,
-      children: shouldShowTooltip ? /* @__PURE__ */ jsx(Tooltip2, { content: tooltipText, position: "bottom", asChild: true, children: /* @__PURE__ */ jsx("span", { children: cellContent }) }) : cellContent
-    }
-  );
+  const divClassName = `ellipsis-1-line table-item w-full min-w-0 ${onCellClick ? "hover:text-main cursor-pointer" : "cursor-default"}`;
+  if (!shouldShowTooltip) {
+    return /* @__PURE__ */ jsx("div", { ref: refCallback, className: divClassName, style: { textAlign }, onClick: onCellClick, children: cellContent });
+  }
+  return /* @__PURE__ */ jsx(TableCellTooltip, { content: tooltipText, children: /* @__PURE__ */ jsx("div", { ref: refCallback, className: divClassName, style: { textAlign }, onClick: onCellClick, children: cellContent }) });
 }
 
 // src/components/Table/config/utils.ts
@@ -4706,7 +4708,13 @@ function Table(props) {
     showHorizontalDivider = true,
     showVerticalDivider = true
   } = props;
-  const { fixed = false, onSelectionChange, selectedKeys = [], disabledKeys = [], disabledTooltip } = checkboxInfo ?? {};
+  const {
+    fixed = false,
+    onSelectionChange,
+    selectedKeys = [],
+    disabledKeys = [],
+    disabledTooltip
+  } = checkboxInfo ?? {};
   const scrollRef = useRef(null);
   const footerRef = useRef(null);
   const [tableHeight, setTableHeight] = useState(500);
@@ -5012,6 +5020,11 @@ function Table(props) {
       }
     }
   }, [orderedColumns]);
+  const tableMinWidth = useMemo(() => {
+    const allUserColsHaveWidth = orderedColumns.every((col) => col.key === "__checkbox__" || col.width !== void 0);
+    if (!allUserColsHaveWidth) return void 0;
+    return orderedColumns.reduce((sum, col) => sum + parseColPx(col), 0);
+  }, [orderedColumns]);
   const estimatedLeadingPinnedWidth = useMemo(
     () => leadingPinnedCols.reduce((sum, col) => sum + parseColPx(col), 0),
     [leadingPinnedCols]
@@ -5095,7 +5108,7 @@ function Table(props) {
             TableCellContent,
             {
               cellContent,
-              tooltipText: String(record[col.key] ?? ""),
+              tooltipText: col.tooltipText ? col.tooltipText(record[col.key], record, rowIdx) : String(record[col.key] ?? ""),
               align: align ?? "",
               tooltipConfig: col.key === "__checkbox__" ? false : tooltipConfig,
               onCellClick: col.key !== "__checkbox__" && onRowClickRef.current ? () => onRowClickRef.current?.(record, rowIdx) : void 0
@@ -5181,51 +5194,63 @@ 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__ */ jsxs("table", { className: "w-full table-fixed border-spacing-0", children: [
-          /* @__PURE__ */ jsx(
-            TableHeader,
-            {
-              columns: orderedColumns,
-              getAlignStyle,
-              sortOption,
-              onSortChange,
-              onColumnDragStartCapture: handleColumnDragStartCapture,
-              onColumnDragStart: handleColumnDragStart,
-              onColumnDrop: handleColumnDrop,
-              onColumnDragEnd: handleColumnDragEnd,
-              onColumnDragOver: handleColumnDragOver,
-              isColumnDraggable
-            }
-          ),
-          /* @__PURE__ */ jsx("tbody", { className: "w-full h-full", children: showSkeleton ? Array.from({ length: 3 }).map((_, rowIdx) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50", children: [
-            leadingPinnedCols.map((col, idx) => /* @__PURE__ */ jsx(SkeletonTd, { col, showSquare: idx === 0 && !!checkboxInfo }, `leading-${idx}`)),
-            leftColspan > 0 && /* @__PURE__ */ jsx("td", { colSpan: leftColspan, style: { padding: 0, border: "none" } }),
-            virtualItems.map((vc) => /* @__PURE__ */ jsx(SkeletonTd, { col: groupCols[vc.index] }, `group-${vc.index}`)),
-            rightColspan > 0 && /* @__PURE__ */ jsx("td", { colSpan: rightColspan, style: { padding: 0, border: "none" } }),
-            trailingPinnedCols.map((col, idx) => /* @__PURE__ */ jsx(SkeletonTd, { col }, `trailing-${idx}`))
-          ] }, rowIdx)) : showEmpty ? /* @__PURE__ */ jsx(TableEmpty, { columnCount: allColumns.length }) : rows.map((row) => {
-            const rowId = String(getRowKey(row.original, row.index));
-            return /* @__PURE__ */ jsx(
-              TableDataRow,
-              {
-                record: row.original,
-                rowIdx: row.index,
-                rowId,
-                draggable: rowDraggable && !showSkeleton,
-                onDragStart: handleRowDragStart,
-                onDragOver: handleRowDragOver,
-                onDrop: handleRowDrop,
-                onDragEnd: handleRowDragEnd,
-                leftColspan,
-                rightColspan,
-                renderLeadingPinnedCols,
-                renderVisibleGroupCols,
-                renderTrailingPinnedCols
-              },
-              row.id
-            );
-          }) })
-        ] })
+        children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: `table-fixed border-spacing-0${tableMinWidth === void 0 ? " w-full" : ""}`,
+            style: tableMinWidth !== void 0 ? { width: tableMinWidth, minWidth: tableMinWidth } : {
+              minWidth: orderedColumns.reduce(
+                (sum, col) => sum + (col.key === "__checkbox__" || col.width !== void 0 ? parseColPx(col) : 80),
+                0
+              )
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                TableHeader,
+                {
+                  columns: orderedColumns,
+                  getAlignStyle,
+                  sortOption,
+                  onSortChange,
+                  onColumnDragStartCapture: handleColumnDragStartCapture,
+                  onColumnDragStart: handleColumnDragStart,
+                  onColumnDrop: handleColumnDrop,
+                  onColumnDragEnd: handleColumnDragEnd,
+                  onColumnDragOver: handleColumnDragOver,
+                  isColumnDraggable
+                }
+              ),
+              /* @__PURE__ */ jsx("tbody", { className: "w-full h-full", children: showSkeleton ? Array.from({ length: 3 }).map((_, rowIdx) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50", children: [
+                leadingPinnedCols.map((col, idx) => /* @__PURE__ */ jsx(SkeletonTd, { col, showSquare: idx === 0 && !!checkboxInfo }, `leading-${idx}`)),
+                leftColspan > 0 && /* @__PURE__ */ jsx("td", { colSpan: leftColspan, style: { padding: 0, border: "none" } }),
+                virtualItems.map((vc) => /* @__PURE__ */ jsx(SkeletonTd, { col: groupCols[vc.index] }, `group-${vc.index}`)),
+                rightColspan > 0 && /* @__PURE__ */ jsx("td", { colSpan: rightColspan, style: { padding: 0, border: "none" } }),
+                trailingPinnedCols.map((col, idx) => /* @__PURE__ */ jsx(SkeletonTd, { col }, `trailing-${idx}`))
+              ] }, rowIdx)) : showEmpty ? /* @__PURE__ */ jsx(TableEmpty, { columnCount: allColumns.length }) : rows.map((row) => {
+                const rowId = String(getRowKey(row.original, row.index));
+                return /* @__PURE__ */ jsx(
+                  TableDataRow,
+                  {
+                    record: row.original,
+                    rowIdx: row.index,
+                    rowId,
+                    draggable: rowDraggable && !showSkeleton,
+                    onDragStart: handleRowDragStart,
+                    onDragOver: handleRowDragOver,
+                    onDrop: handleRowDrop,
+                    onDragEnd: handleRowDragEnd,
+                    leftColspan,
+                    rightColspan,
+                    renderLeadingPinnedCols,
+                    renderVisibleGroupCols,
+                    renderTrailingPinnedCols
+                  },
+                  row.id
+                );
+              }) })
+            ]
+          }
+        )
       }
     ),
     !showSkeleton && (paginationInfo || renderFooter?.renderLeft || renderFooter?.renderRight) && /* @__PURE__ */ jsx("div", { ref: footerRef, children: /* @__PURE__ */ jsx(
@@ -7744,11 +7769,22 @@ function PageFilter(props) {
     primaryColor
   } = props;
   const initialValuesRef = useRef(values);
+  const pendingAutoSubmitRef = useRef(null);
+  const onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+  useEffect(() => {
+    const pending = pendingAutoSubmitRef.current;
+    if (pending && String(values[pending.key] ?? "") === pending.value) {
+      pendingAutoSubmitRef.current = null;
+      onSubmitRef.current();
+    }
+  }, [values]);
   const handleInputChange = (key) => (e) => {
     onChange({ [key]: e.target.value });
   };
-  const handleSelectChange = (key) => (value) => {
+  const handleSelectChange = (key, autoSubmit) => (value) => {
     onChange({ [key]: value });
+    if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
   };
   const handleRadioChange = (key) => (value) => {
     onChange({ [key]: value });
@@ -7763,9 +7799,11 @@ function PageFilter(props) {
     onChange({ [key]: checked ? "true" : "false" });
   };
   const handleSubmit = () => {
+    pendingAutoSubmitRef.current = null;
     onSubmit();
   };
   const handleReset = () => {
+    pendingAutoSubmitRef.current = null;
     onChange(initialValuesRef.current);
     onReset?.();
   };
@@ -7791,7 +7829,7 @@ function PageFilter(props) {
           Select2,
           {
             value: currentValue,
-            onChange: handleSelectChange(optionKey),
+            onChange: handleSelectChange(optionKey, option.autoSubmit),
             options: option.options,
             placeholder: option.placeholder || "\uC120\uD0DD",
             canReset: option.canReset ?? true,