@farmzone/fz-react-ui 1.0.17 → 1.0.19

package/dist/index.d.cts

@@ -976,6 +976,7 @@ type SelectOption<P> = BaseOption<P> & {
 type RadioOption<P> = BaseOption<P> & {
     type: "radio";
     options: Array<SelectableOption>;
+    autoSubmit?: boolean;
 };
 type DateOption<P> = BaseOption<P> & {
     type: "date";
@@ -988,6 +989,7 @@ type DateRangeOption<P> = BaseOption<P> & {
 type CheckboxOption<P> = BaseOption<P> & {
     type: "checkbox";
     options: Array<SelectableOption>;
+    autoSubmit?: boolean;
 };
 type FilterOption<P> = InputOption<P> | SelectOption<P> | RadioOption<P> | DateOption<P> | DateRangeOption<P> | CheckboxOption<P>;
 interface FilterRow<P> {

package/dist/index.d.ts

@@ -976,6 +976,7 @@ type SelectOption<P> = BaseOption<P> & {
 type RadioOption<P> = BaseOption<P> & {
     type: "radio";
     options: Array<SelectableOption>;
+    autoSubmit?: boolean;
 };
 type DateOption<P> = BaseOption<P> & {
     type: "date";
@@ -988,6 +989,7 @@ type DateRangeOption<P> = BaseOption<P> & {
 type CheckboxOption<P> = BaseOption<P> & {
     type: "checkbox";
     options: Array<SelectableOption>;
+    autoSubmit?: boolean;
 };
 type FilterOption<P> = InputOption<P> | SelectOption<P> | RadioOption<P> | DateOption<P> | DateRangeOption<P> | CheckboxOption<P>;
 interface FilterRow<P> {

package/dist/index.js

@@ -717,7 +717,7 @@ function Slider(props) {
           RadixSlider.Track,
           {
             className: cn(
-              "relative h-[3px] grow rounded-full bg-blackA7",
+              "relative h-[3px] grow rounded-full bg-gray-200",
               orientation === "vertical" && "w-[3px] h-full",
               trackClassName
             ),
@@ -725,7 +725,7 @@ function Slider(props) {
               RadixSlider.Range,
               {
                 className: cn(
-                  "absolute h-full rounded-full bg-white",
+                  "absolute h-full rounded-full bg-[#009fe3]",
                   orientation === "vertical" && "w-full",
                   rangeClassName
                 )
@@ -733,17 +733,18 @@ function Slider(props) {
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        (value ?? defaultValue).map((_, index) => /* @__PURE__ */ jsx(
           RadixSlider.Thumb,
           {
             className: cn(
-              "block size-5 rounded-[10px] bg-white shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_5px] focus:shadow-blackA5 focus:outline-none",
+              "block size-4 rounded-full bg-white border-2 border-[#009fe3] shadow-md hover:border-[#0090cf] focus:outline-none focus:ring-2 focus:ring-[#009fe3]/40 focus:ring-offset-1",
               disabled && "cursor-not-allowed opacity-50",
               thumbClassName
             ),
-            "aria-label": ariaLabel
-          }
-        )
+            "aria-label": index === 0 ? ariaLabel : `${ariaLabel} max`
+          },
+          index
+        ))
       ]
     }
   );
@@ -4105,45 +4106,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 +4534,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
@@ -5018,6 +5021,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]
@@ -5187,51 +5195,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(
@@ -6095,7 +6115,7 @@ function FilePreviewViewerSession(props) {
   useEffect(() => {
     if (!showNavigation) return;
     const [prevIndex, nextIndex] = getAdjacentIndexes(currentIndex, fileArray.length);
-    const urlsToPreload = [prevIndex, nextIndex].filter((idx) => idx !== currentIndex).map((idx) => fileArray[idx]);
+    const urlsToPreload = [prevIndex, nextIndex].filter((idx) => idx !== currentIndex).map((idx) => fileArray[idx]).filter((url) => url !== void 0);
     preloadPreviewImages(urlsToPreload);
   }, [showNavigation, currentIndex, fileArray]);
   useEffect(() => {
@@ -7731,7 +7751,7 @@ var SubmitForm = Object.assign(SubmitFormRoot, {
 function LabeledFilterOption(props) {
   const { label, children, gap } = props;
   return /* @__PURE__ */ jsxs("div", { style: { marginLeft: gap }, className: "flex flex-row items-center gap-4", children: [
-    label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-60 shrink-0", children: label }),
+    label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-60 shrink-0 select-none", children: label }),
     children
   ] });
 }
@@ -7750,15 +7770,26 @@ 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, autoSubmit) => (value) => {
     onChange({ [key]: value });
-    if (autoSubmit) onSubmit();
+    if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
   };
-  const handleRadioChange = (key) => (value) => {
+  const handleRadioChange = (key, autoSubmit) => (value) => {
     onChange({ [key]: value });
+    if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
   };
   const handleDateChange = (key) => (date) => {
     onChange({ [key]: date });
@@ -7766,13 +7797,17 @@ function PageFilter(props) {
   const handleRangeChangeCurried = (startKey, endKey) => (start, end) => {
     onChange({ [startKey]: start, [endKey]: end });
   };
-  const handleCheckboxChange = (key) => (checked) => {
-    onChange({ [key]: checked ? "true" : "false" });
+  const handleCheckboxChange = (key, autoSubmit) => (checked) => {
+    const value = checked ? "true" : "false";
+    onChange({ [key]: value });
+    if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
   };
   const handleSubmit = () => {
+    pendingAutoSubmitRef.current = null;
     onSubmit();
   };
   const handleReset = () => {
+    pendingAutoSubmitRef.current = null;
     onChange(initialValuesRef.current);
     onReset?.();
   };
@@ -7811,7 +7846,7 @@ function PageFilter(props) {
           {
             name: String(optionKey),
             value: currentValue,
-            onChange: handleRadioChange(optionKey),
+            onChange: handleRadioChange(optionKey, option.autoSubmit),
             options: option.options,
             direction: "horizontal"
           }
@@ -7843,7 +7878,7 @@ function PageFilter(props) {
             checked: currentValue === "true",
             name: String(optionKey),
             value: currentValue,
-            onChange: handleCheckboxChange(optionKey)
+            onChange: handleCheckboxChange(optionKey, option.autoSubmit)
           }
         ) }, String(optionKey));
       default: {