@farmzone/fz-react-ui 1.0.13 → 1.0.15

package/dist/index.cjs

@@ -446,7 +446,7 @@ function Input({ className, type, ...props }) {
       "data-slot": "input",
       className: cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input border-gray-300 flex h-8 w-full min-w-0 rounded-sm border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[1px]",
+        "focus-visible:border-blue-600 focus-visible:ring-blue-600/30 focus-visible:ring-[1px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       ),
@@ -1096,43 +1096,50 @@ function Radio(props) {
     "--radio-checked": checkColor,
     "--radio-unchecked": unCheckColor
   };
-  const control = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5", wrapperClassName), style: colorVars, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      RadioGroupPrimitive__namespace.Item,
-      {
-        value,
-        disabled,
-        id: inputId,
-        className: cn(
-          "group relative size-4 shrink-0 rounded-full border box-border transition-colors duration-200 outline-none",
-          "border-(--radio-unchecked) data-[state=checked]:border-(--radio-checked)",
-          "data-[state=unchecked]:hover:opacity-80",
-          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "relative flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.CircleIcon,
+  const control = /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: cn("flex items-center gap-1.5", disabled ? "cursor-not-allowed" : "cursor-pointer", wrapperClassName),
+      style: colorVars,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadioGroupPrimitive__namespace.Item,
           {
+            value,
+            disabled,
+            id: inputId,
             className: cn(
-              "absolute top-1/2 left-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 fill-(--radio-checked) text-(--radio-checked) transition-opacity duration-200",
-              indicatorClassName
-            )
+              "group relative size-4 shrink-0 rounded-full border box-border transition-colors duration-200 outline-none",
+              "border-(--radio-unchecked) data-[state=checked]:border-(--radio-checked)",
+              "data-[state=unchecked]:hover:opacity-80",
+              disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "relative flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.CircleIcon,
+              {
+                className: cn(
+                  "absolute top-1/2 left-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 fill-(--radio-checked) text-(--radio-checked) transition-opacity duration-200",
+                  indicatorClassName
+                )
+              }
+            ) })
           }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        htmlFor: inputId,
-        className: cn(
-          "text-sm font-medium cursor-pointer text-black select-none",
-          disabled && "cursor-not-allowed text-gray-400 opacity-50",
-          labelClassName
         ),
-        children: label
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-sm font-medium text-black select-none",
+              disabled && "text-gray-400 opacity-50",
+              labelClassName
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
   const withTooltip = (node) => {
     if (!disabled || !disabledMessage) return node;
     return /* @__PURE__ */ jsxRuntime.jsx(Tooltip2, { content: disabledMessage, position: "bottom", asChild: true, sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: node }) });
@@ -1179,11 +1186,7 @@ function RadioGroup(props) {
       value,
       onValueChange: (newValue) => onChange(newValue),
       disabled,
-      className: cn(
-        "flex flex-wrap gap-3",
-        direction === "horizontal" ? "flex-row" : "flex-col",
-        containerClassName
-      ),
+      className: cn("flex flex-wrap gap-3", direction === "horizontal" ? "flex-row" : "flex-col", containerClassName),
       children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
         Radio,
         {
@@ -2562,9 +2565,11 @@ function DatePickerRange(props) {
     const dateToShow = position === "end" ? endInputValue || startInputValue : startInputValue || endInputValue;
     toggleCalendar(dateToShow);
   };
-  const handleFieldEnter = () => {
-    onKeyDownEnter?.();
+  const handleFieldEnter = (value) => {
     closeCalendar();
+    if (onKeyDownEnter && value.length === 10) {
+      onKeyDownEnter();
+    }
   };
   const inputClassName = cn(
     "w-full px-2 py-1.25 border border-gray-300 shadow-xs outline-none text-sm rounded-sm pr-7 transition-colors",
@@ -2624,7 +2629,10 @@ function DatePickerRange(props) {
             className: inputClassName,
             maxLength: 10,
             onKeyDown: (e) => {
-              if (e.key === "Enter") handleFieldEnter();
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleFieldEnter(startInputValue);
+              }
             }
           }
         ),
@@ -2652,7 +2660,10 @@ function DatePickerRange(props) {
             className: inputClassName,
             maxLength: 10,
             onKeyDown: (e) => {
-              if (e.key === "Enter") handleFieldEnter();
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleFieldEnter(endInputValue);
+              }
             }
           }
         ),
@@ -2747,9 +2758,11 @@ function DatePickerSingle(props) {
     onBlur?.(formatted);
     closeCalendar();
   };
-  const handleFieldEnter = () => {
-    onKeyDownEnter?.();
+  const handleFieldEnter = (value2) => {
     closeCalendar();
+    if (onKeyDownEnter && value2.length === 10) {
+      onKeyDownEnter();
+    }
   };
   const calendarNode = /* @__PURE__ */ jsxRuntime.jsx(
     CalendarPortal,
@@ -2798,12 +2811,15 @@ function DatePickerSingle(props) {
           disabled,
           className: cn(
             "w-full px-2 py-1.25 border text-sm rounded-sm outline-none shadow-xs transition-colors",
-            validation ? "border-red-600 focus:border-main focus-visible:border-main focus-visible:ring-1 focus-visible:ring-main/30 focus-visible:outline-none" : "border-gray-300 focus:border-main focus-visible:border-main focus-visible:ring-1 focus-visible:ring-main/30 focus-visible:outline-none",
+            validation ? "border-red-600 focus:border-blue-600 focus-visible:border-blue-600 focus-visible:ring-1 focus-visible:ring-blue-600/30 focus-visible:outline-none" : "border-gray-300 focus:border-blue-600 focus-visible:border-blue-600 focus-visible:ring-1 focus-visible:ring-blue-600/30 focus-visible:outline-none",
             disabled ? DATE_PICKER_FIELD_DISABLED_CLASS : "bg-white text-gray-900"
           ),
           maxLength: 10,
           onKeyDown: (e) => {
-            if (e.key === "Enter") handleFieldEnter();
+            if (e.key === "Enter") {
+              e.preventDefault();
+              handleFieldEnter(inputValue);
+            }
           },
           "data-date-input": "true"
         }
@@ -4578,7 +4594,7 @@ function TableEmpty(props) {
   const { columnCount } = props;
   return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columnCount, className: "border-none bg-white p-0 align-middle", children: /* @__PURE__ */ jsxRuntime.jsxs(Empty, { className: "flex min-h-72 w-full flex-col items-center justify-center gap-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: "size-8 shrink-0 text-gray-400", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg text-gray-500", children: "\uB4F1\uB85D\uB41C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-md text-gray-500", children: "\uB4F1\uB85D\uB41C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
   ] }) }) });
 }
 function TableCellContent(props) {
@@ -7833,7 +7849,8 @@ function PageFilter(props) {
           {
             value: currentValue,
             onChange: handleDateChange(optionKey),
-            placeholder: option.placeholder
+            placeholder: option.placeholder,
+            onKeyDownEnter: handleSubmit
           }
         ) }, String(optionKey));
       case "date-range":
@@ -7842,7 +7859,8 @@ function PageFilter(props) {
           {
             startValue: currentValue,
             endValue: String(values[option.endKey] ?? ""),
-            onRangeChange: handleRangeChangeCurried(optionKey, option.endKey)
+            onRangeChange: handleRangeChangeCurried(optionKey, option.endKey),
+            onKeyDownEnter: handleSubmit
           }
         ) }, String(optionKey));
       case "checkbox":
@@ -9227,6 +9245,9 @@ function Sidebar(props) {
   const [overflowVisible, setOverflowVisible] = React6.useState(true);
   const [expandedItems, setExpandedItems] = React6.useState(/* @__PURE__ */ new Set());
   const [expandedSubItems, setExpandedSubItems] = React6.useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = () => setIsCollapsed((prev) => !prev);
+  const isHeaderRenderProp = typeof header === "function";
+  const headerContent = isHeaderRenderProp ? header({ isCollapsed, toggleCollapse }) : header;
   React6.useEffect(() => {
     if (isCollapsed) {
       setOverflowVisible(false);
@@ -9301,21 +9322,22 @@ function Sidebar(props) {
           ${className ?? ""}
         `,
       children: [
-        showCollapseButton && /* @__PURE__ */ jsxRuntime.jsx(
+        showCollapseButton && !isHeaderRenderProp && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => setIsCollapsed((prev) => !prev),
+            onClick: toggleCollapse,
             className: `absolute top-4 z-20 w-6.5 h-6.5 rounded-full flex items-center justify-center transition-colors cursor-pointer ${s.collapseBtn} ${collapseButtonPlacement === "left" ? "left-2" : "right-2"}`,
             children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRightClose, { size: 18, color: primaryColor ?? s.collapseIcon }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 18, color: primaryColor ?? s.collapseIcon })
           }
         ),
+        isHeaderRenderProp && headerContent,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 min-h-0 hide-scrollbar ${overflowVisible ? "overflow-y-auto" : "overflow-hidden"}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: `transition-opacity duration-200 ease-in-out ${isCollapsed ? "opacity-0 pointer-events-none select-none" : "opacity-100"} ${variant === "system-dark" || variant === "system-light" ? "pb-6" : "px-4 pb-6"}`,
             style: { transitionDelay: isCollapsed ? "0ms" : "150ms" },
             children: [
-              header && header,
+              !isHeaderRenderProp && headerContent,
               /* @__PURE__ */ jsxRuntime.jsx("nav", { className: `space-y-6 ${variant === "system-dark" || variant === "system-light" ? "px-1" : ""}`, children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 section.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.sectionTitle, children: section.title }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: section.items.map((item) => {
@@ -9795,7 +9817,16 @@ function DetailModalFrame(props) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(ModalFooter, { className: "flex justify-end", children: isEditMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: handleCancelEdit, disabled: controller.isSaving, children: "\uCDE8\uC18C" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", form: controller.formId, variant: "save", disabled: controller.isSaving, children: "\uC800\uC7A5" })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "submit",
+          form: controller.formId,
+          variant: "save",
+          disabled: controller.isSaving || !controller.isDirty,
+          children: "\uC800\uC7A5"
+        }
+      )
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       canEdit && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: handleEdit, children: "\uC218\uC815" }),
       renderFooterExtra,