@farmzone/fz-react-ui 1.0.6 → 1.0.8

package/dist/index.d.cts

@@ -650,6 +650,8 @@ interface CheckboxInfo {
     selectedKeys: Array<string | number>;
     onSelectionChange: (keys: Array<string | number>) => void;
     fixed?: boolean;
+    disabledKeys?: Array<string | number>;
+    disabledTooltip?: React.ReactNode | ((key: string | number) => React.ReactNode);
 }
 type DragEndResult = {
     type: "row" | "column";
@@ -674,6 +676,8 @@ interface TableProps<T> {
     onColumnDragEnd?: (result: DragEndResult) => void;
     tooltipConfig?: "always" | "overflow" | false;
     isDynamicHeight?: boolean;
+    showHorizontalDivider?: boolean;
+    showVerticalDivider?: boolean;
 }
 declare function Table<T>(props: TableProps<T>): react.JSX.Element;
 
@@ -1239,6 +1243,8 @@ interface DetailModalFrameProps<T, S extends z.ZodTypeAny = z.ZodTypeAny> {
     renderFooterExtra?: ReactNode;
     /** isDirty 상태 외부 노출 — 라우터 blocker 등에서 활용 */
     onDirtyChange?: (isDirty: boolean) => void;
+    /** 제공 시 ModalIconHeader로 렌더링 (read 모드: 이 type, edit 모드: "edit" 자동 적용) */
+    headerType?: ModalType;
 }
 declare function DetailModalFrame<T, S extends z.ZodTypeAny = z.ZodTypeAny>(props: DetailModalFrameProps<T, S>): react.JSX.Element;
 
@@ -1371,7 +1377,7 @@ declare const textVariants: (props?: ({
 declare const Z_INDEX: {
     readonly TABLE_COL_STICKY: 1;
     readonly TABLE_FIXED_CELL: 5;
-    readonly TABLE_FIXED_HEADER_CELL: 10;
+    readonly TABLE_FIXED_HEADER_CELL: 15;
     readonly LOCAL_OVERLAY: 10;
     readonly LAYOUT_HEADER: 20;
     readonly DROPDOWN_LOCAL: 20;

package/dist/index.d.ts

@@ -650,6 +650,8 @@ interface CheckboxInfo {
     selectedKeys: Array<string | number>;
     onSelectionChange: (keys: Array<string | number>) => void;
     fixed?: boolean;
+    disabledKeys?: Array<string | number>;
+    disabledTooltip?: React.ReactNode | ((key: string | number) => React.ReactNode);
 }
 type DragEndResult = {
     type: "row" | "column";
@@ -674,6 +676,8 @@ interface TableProps<T> {
     onColumnDragEnd?: (result: DragEndResult) => void;
     tooltipConfig?: "always" | "overflow" | false;
     isDynamicHeight?: boolean;
+    showHorizontalDivider?: boolean;
+    showVerticalDivider?: boolean;
 }
 declare function Table<T>(props: TableProps<T>): react.JSX.Element;
 
@@ -1239,6 +1243,8 @@ interface DetailModalFrameProps<T, S extends z.ZodTypeAny = z.ZodTypeAny> {
     renderFooterExtra?: ReactNode;
     /** isDirty 상태 외부 노출 — 라우터 blocker 등에서 활용 */
     onDirtyChange?: (isDirty: boolean) => void;
+    /** 제공 시 ModalIconHeader로 렌더링 (read 모드: 이 type, edit 모드: "edit" 자동 적용) */
+    headerType?: ModalType;
 }
 declare function DetailModalFrame<T, S extends z.ZodTypeAny = z.ZodTypeAny>(props: DetailModalFrameProps<T, S>): react.JSX.Element;
 
@@ -1371,7 +1377,7 @@ declare const textVariants: (props?: ({
 declare const Z_INDEX: {
     readonly TABLE_COL_STICKY: 1;
     readonly TABLE_FIXED_CELL: 5;
-    readonly TABLE_FIXED_HEADER_CELL: 10;
+    readonly TABLE_FIXED_HEADER_CELL: 15;
     readonly LOCAL_OVERLAY: 10;
     readonly LAYOUT_HEADER: 20;
     readonly DROPDOWN_LOCAL: 20;

package/dist/index.js

@@ -214,7 +214,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,
@@ -465,12 +465,10 @@ function Input2(props) {
   const actualType = type === "password" && showPassword ? "text" : type;
   const handlePasswordToggle = () => setShowPassword((prev) => !prev);
   const finalRightIcon = rightIcon || (shouldShowPasswordToggle ? /* @__PURE__ */ jsx(
-    "button",
+    "div",
     {
-      type: "button",
       onClick: handlePasswordToggle,
       className: "text-muted-foreground hover:text-foreground cursor-pointer transition-colors",
-      disabled,
       children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
     }
   ) : null);
@@ -3719,7 +3717,7 @@ function confirmModal(options) {
 }
 function TableFooter(props) {
   const { paginationInfo, renderLeft, renderRight } = props;
-  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-4 min-h-16", children: [
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-4 min-h-16 border-t-1 border-gray-100", children: [
     /* @__PURE__ */ jsx("div", { className: "flex justify-start flex-1 min-w-0", children: renderLeft }),
     paginationInfo && /* @__PURE__ */ jsx("div", { className: "px-5", children: /* @__PURE__ */ jsx(Pagination, { ...paginationInfo }) }),
     /* @__PURE__ */ jsx("div", { className: "flex justify-end flex-1 min-w-0", children: renderRight })
@@ -3929,8 +3927,6 @@ function ArrowIcon(props) {
     }
   );
 }
-var DEFAULT_SORT_KEY = "";
-var DEFAULT_SORT_ORDER = "asc";
 var DEFAULT_SORT_OPTIONS = {
   visibleType: "always",
   sortKey: "",
@@ -3979,27 +3975,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) => {
@@ -4635,9 +4622,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 = useRef(null);
   const footerRef = useRef(null);
   const [tableHeight, setTableHeight] = useState(500);
@@ -4679,11 +4668,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 = useRef(selectedKeys);
   selectedKeysRef.current = selectedKeys;
   const onSelectionChangeRef = useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
+  const disabledKeysRef = useRef(disabledKeys);
+  disabledKeysRef.current = disabledKeys;
+  const disabledTooltipRef = useRef(disabledTooltip);
+  disabledTooltipRef.current = disabledTooltip;
   const dataRef = useRef(data);
   dataRef.current = data;
   const onRowClickRef = useRef(onRowClick);
@@ -4698,6 +4690,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 = useMemo(() => {
     const checkboxCol = {
       key: "__checkbox__",
@@ -4712,19 +4706,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__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ 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);
@@ -4985,7 +4984,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,
@@ -5077,7 +5076,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__ */ jsxs("div", { className: "bg-white rounded shadow-panel", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded shadow-table border border-gray-200 overflow-hidden", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -5085,7 +5084,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__ */ jsxs("table", { className: "w-full table-fixed", children: [
+        children: /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed border-spacing-0", children: [
           /* @__PURE__ */ jsx(
             TableHeader,
             {
@@ -7624,7 +7623,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-5", children: [
+  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 }),
     children
   ] });
@@ -7636,7 +7635,7 @@ function PageFilter(props) {
     onSubmit,
     onReset,
     containerClassName,
-    rowGap = 32,
+    rowGap = 28,
     colGap = 0,
     submitButtonText = "\uAC80\uC0C9",
     resetButtonText = "\uCD08\uAE30\uD654",
@@ -7750,9 +7749,9 @@ function PageFilter(props) {
       style: primaryColor ? { borderTopColor: primaryColor } : void 0,
       children: /* @__PURE__ */ jsx("div", { className: "relative flex flex-col", style: { gap: `${colGap}px` }, children: rows.map((row, ix) => {
         const isLastRow = rows.length - 1 === ix;
-        return /* @__PURE__ */ jsxs("div", { className: "flex flex-row min-h-12", children: [
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-row min-h-11", children: [
           row.options.map((option, index) => renderFilterOption(option, rowGap, index)),
-          isLastRow && /* @__PURE__ */ jsxs("div", { className: "ml-4 flex flex-row items-center gap-2", children: [
+          isLastRow && /* @__PURE__ */ jsxs("div", { className: "ml-2 flex flex-row items-center gap-2", children: [
             /* @__PURE__ */ jsx(Button, { variant: "search", onClick: handleSubmit, children: submitButtonText }),
             onReset && /* @__PURE__ */ jsx(Button, { variant: "reset", onClick: handleReset, children: resetButtonText })
           ] })
@@ -9498,7 +9497,8 @@ function DetailModalFrame(props) {
     contentClassName,
     renderExtraContent,
     renderFooterExtra,
-    onDirtyChange
+    onDirtyChange,
+    headerType
   } = props;
   const controller = useDetailController({ mode, onModeChange });
   useEffect(() => {
@@ -9537,7 +9537,14 @@ function DetailModalFrame(props) {
   const isEditMode = controller.mode === "edit";
   const canEdit = Boolean(editSchema && (editFields || renderEditBody));
   return /* @__PURE__ */ jsxs(Modal, { isOpen: open, onClose: handleClose, contentClassName: cn("max-w-2xl", contentClassName), children: [
-    /* @__PURE__ */ jsx(ModalHeader, { className: "flex flex-row items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-900", children: title }) }),
+    headerType ? /* @__PURE__ */ jsx(
+      ModalIconHeader,
+      {
+        type: isEditMode ? "edit" : headerType,
+        title,
+        onClose: handleClose
+      }
+    ) : /* @__PURE__ */ jsx(ModalHeader, { className: "flex flex-row items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-900", children: title }) }),
     /* @__PURE__ */ jsxs(ModalBody, { className: "flex-1 min-h-0 overflow-hidden p-0 flex flex-col", children: [
       /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
         DetailContent,