@farmzone/fz-react-ui 1.0.5 → 1.0.7

package/dist/index.d.cts

@@ -1239,6 +1239,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 +1373,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

@@ -1239,6 +1239,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 +1373,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,
@@ -3719,7 +3719,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 })
@@ -4985,7 +4985,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-r border-b border-gray-300/70 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all`,
           style: {
             width,
             minWidth: minWidth || width,
@@ -5077,7 +5077,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 +5085,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 +7624,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,47 +7636,42 @@ function PageFilter(props) {
     onSubmit,
     onReset,
     containerClassName,
-    rowGap = 32,
+    rowGap = 28,
     colGap = 0,
     submitButtonText = "\uAC80\uC0C9",
     resetButtonText = "\uCD08\uAE30\uD654",
     values,
     primaryColor
   } = props;
-  const [localValues, setLocalValues] = useState(values);
   const initialValuesRef = useRef(values);
-  const updateLocal = (updates) => {
-    setLocalValues((prev) => ({ ...prev, ...updates }));
-  };
   const handleInputChange = (key) => (e) => {
-    updateLocal({ [key]: e.target.value });
+    onChange({ [key]: e.target.value });
   };
   const handleSelectChange = (key) => (value) => {
-    updateLocal({ [key]: value });
+    onChange({ [key]: value });
   };
   const handleRadioChange = (key) => (value) => {
-    updateLocal({ [key]: value });
+    onChange({ [key]: value });
   };
   const handleDateChange = (key) => (date) => {
-    updateLocal({ [key]: date });
+    onChange({ [key]: date });
   };
   const handleRangeChangeCurried = (startKey, endKey) => (start, end) => {
-    updateLocal({ [startKey]: start, [endKey]: end });
+    onChange({ [startKey]: start, [endKey]: end });
   };
   const handleCheckboxChange = (key) => (checked) => {
-    updateLocal({ [key]: checked ? "true" : "false" });
+    onChange({ [key]: checked ? "true" : "false" });
   };
   const handleSubmit = () => {
-    onChange(localValues);
     onSubmit();
   };
   const handleReset = () => {
-    setLocalValues(initialValuesRef.current);
+    onChange(initialValuesRef.current);
     onReset?.();
   };
   const renderFilterOption = (option, gap, index) => {
     const optionKey = option.key;
-    const currentValue = String(localValues[optionKey] ?? "");
+    const currentValue = String(values[optionKey] ?? "");
     const rowGap2 = index !== 0 ? option.label ? gap : 5 : 0;
     switch (option.type) {
       case "input":
@@ -7751,16 +7746,13 @@ function PageFilter(props) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
-        "flex flex-col gap-3 bg-white py-3 px-5 border-t-main border-t-1 shadow-panel",
-        containerClassName
-      ),
+      className: cn("flex flex-col gap-3 bg-white py-3 px-5 border-t-main border-t-1 shadow-panel", containerClassName),
       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 })
           ] })
@@ -9506,7 +9498,8 @@ function DetailModalFrame(props) {
     contentClassName,
     renderExtraContent,
     renderFooterExtra,
-    onDirtyChange
+    onDirtyChange,
+    headerType
   } = props;
   const controller = useDetailController({ mode, onModeChange });
   useEffect(() => {
@@ -9545,7 +9538,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,