@farmzone/fz-react-ui 1.0.12 → 1.0.14

package/dist/index.js

@@ -48,7 +48,7 @@ var buttonVariants = cva(
         carousel: "bg-white border border-gray-300 hover:bg-gray-100 hover:text-black rounded-full",
         accent: "btn-grad text-white rounded-full",
         metal: "btn-metal text-white min-w-22",
-        ghost: "p-1 h-auto rounded-sm bg-transparent hover:bg-sub-lightgray text-sub-darkgray hover:bg-inherit",
+        ghost: "p-1 h-auto rounded-sm bg-transparent text-sub-darkgray transition-colors hover:bg-gray-100",
         link: "bg-transparent border-none text-main-blue underline-offset-4 hover:underline h-auto p-0"
       },
       size: {
@@ -412,7 +412,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
       ),
@@ -2528,9 +2528,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",
@@ -2590,7 +2592,10 @@ function DatePickerRange(props) {
             className: inputClassName,
             maxLength: 10,
             onKeyDown: (e) => {
-              if (e.key === "Enter") handleFieldEnter();
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleFieldEnter(startInputValue);
+              }
             }
           }
         ),
@@ -2618,7 +2623,10 @@ function DatePickerRange(props) {
             className: inputClassName,
             maxLength: 10,
             onKeyDown: (e) => {
-              if (e.key === "Enter") handleFieldEnter();
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleFieldEnter(endInputValue);
+              }
             }
           }
         ),
@@ -2713,9 +2721,11 @@ function DatePickerSingle(props) {
     onBlur?.(formatted);
     closeCalendar();
   };
-  const handleFieldEnter = () => {
-    onKeyDownEnter?.();
+  const handleFieldEnter = (value2) => {
     closeCalendar();
+    if (onKeyDownEnter && value2.length === 10) {
+      onKeyDownEnter();
+    }
   };
   const calendarNode = /* @__PURE__ */ jsx(
     CalendarPortal,
@@ -2764,12 +2774,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"
         }
@@ -4544,7 +4557,7 @@ function TableEmpty(props) {
   const { columnCount } = props;
   return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columnCount, className: "border-none bg-white p-0 align-middle", children: /* @__PURE__ */ jsxs(Empty, { className: "flex min-h-72 w-full flex-col items-center justify-center gap-1", children: [
     /* @__PURE__ */ jsx(TriangleAlert, { className: "size-8 shrink-0 text-gray-400", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsx("span", { className: "text-lg text-gray-500", children: "\uB4F1\uB85D\uB41C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+    /* @__PURE__ */ jsx("span", { className: "text-md text-gray-500", children: "\uB4F1\uB85D\uB41C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
   ] }) }) });
 }
 function TableCellContent(props) {
@@ -4707,15 +4720,26 @@ function Table(props) {
     if (!isDynamicHeight) return;
     const el = scrollRef.current;
     if (!el) return;
+    const pageContainer = el.parentElement?.parentElement;
+    const isContainerConstrained = (container2) => {
+      if (!container2) return false;
+      const style = window.getComputedStyle(container2);
+      return style.overflow === "hidden" || style.overflowY === "hidden";
+    };
+    const getContainerBottom = () => {
+      if (isContainerConstrained(pageContainer)) {
+        return Math.min(pageContainer.getBoundingClientRect().bottom, window.innerHeight);
+      }
+      return window.innerHeight;
+    };
     const update = () => {
       const top = el.getBoundingClientRect().top;
       const footerH = footerRef.current?.getBoundingClientRect().height ?? 0;
-      setTableHeight(window.innerHeight - top - footerH - 24);
+      setTableHeight(getContainerBottom() - top - footerH - 24);
     };
     update();
     window.addEventListener("resize", update);
     const observer = new ResizeObserver(update);
-    const pageContainer = el.parentElement?.parentElement;
     if (pageContainer) observer.observe(pageContainer);
     const footer = footerRef.current;
     if (footer) observer.observe(footer);
@@ -4728,9 +4752,15 @@ function Table(props) {
     if (!isDynamicHeight) return;
     const el = scrollRef.current;
     if (!el) return;
+    const pageContainer = el.parentElement?.parentElement;
     const top = el.getBoundingClientRect().top;
     const footerH = footerRef.current?.getBoundingClientRect().height ?? 0;
-    setTableHeight(window.innerHeight - top - footerH - 24);
+    const isContainerConstrained = !!pageContainer && (() => {
+      const style = window.getComputedStyle(pageContainer);
+      return style.overflow === "hidden" || style.overflowY === "hidden";
+    })();
+    const containerBottom = isContainerConstrained ? Math.min(pageContainer.getBoundingClientRect().bottom, window.innerHeight) : window.innerHeight;
+    setTableHeight(containerBottom - top - footerH - 24);
   }, [showSkeleton, showEmpty]);
   const selectedKeysRef = useRef(selectedKeys);
   selectedKeysRef.current = selectedKeys;
@@ -7782,7 +7812,8 @@ function PageFilter(props) {
           {
             value: currentValue,
             onChange: handleDateChange(optionKey),
-            placeholder: option.placeholder
+            placeholder: option.placeholder,
+            onKeyDownEnter: handleSubmit
           }
         ) }, String(optionKey));
       case "date-range":
@@ -7791,7 +7822,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":