@farmzone/fz-react-ui 1.0.13 → 1.0.14

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
       ),
@@ -2562,9 +2562,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 +2626,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 +2657,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 +2755,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 +2808,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 +4591,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 +7846,8 @@ function PageFilter(props) {
           {
             value: currentValue,
             onChange: handleDateChange(optionKey),
-            placeholder: option.placeholder
+            placeholder: option.placeholder,
+            onKeyDownEnter: handleSubmit
           }
         ) }, String(optionKey));
       case "date-range":
@@ -7842,7 +7856,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":