@firecms/ui 3.0.0-rc.2 → 3.0.0-rc.3

package/dist/index.umd.js

@@ -27728,251 +27728,122 @@
     }
     return t15;
   }
-  const DateTimeField = (t0) => {
-    const $ = reactCompilerRuntime.c(57);
-    const {
-      value,
-      label,
-      onChange,
-      disabled,
-      clearable,
-      mode: t1,
-      error,
-      size: t2,
-      className,
-      style,
-      inputClassName,
-      invisible
-    } = t0;
-    const mode = t1 === void 0 ? "date" : t1;
-    const size = t2 === void 0 ? "large" : t2;
+  const DateTimeField = ({
+    value,
+    label,
+    onChange,
+    disabled,
+    clearable,
+    mode = "date",
+    error,
+    size = "large",
+    className,
+    style,
+    inputClassName,
+    invisible
+  }) => {
     const inputRef = React.useRef(null);
     const [focused, setFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState("");
+    const [isTyping, setIsTyping] = React.useState(false);
     const invalidValue = value !== void 0 && value !== null && !(value instanceof Date);
     useInjectStyles("DateTimeField", inputStyles);
-    let t3;
-    if ($[0] !== onChange) {
-      t3 = (e) => {
-        e.preventDefault();
+    const handleClear = (e) => {
+      e.preventDefault();
+      setInternalValue("");
+      setIsTyping(false);
+      onChange?.(null);
+    };
+    const valueAsInputValue = (dateValue, mode_0) => {
+      if (!dateValue) {
+        return "";
+      }
+      const pad = (n) => n.toString().padStart(2, "0");
+      const year = dateValue.getFullYear();
+      const month = pad(dateValue.getMonth() + 1);
+      const day = pad(dateValue.getDate());
+      if (mode_0 === "date") {
+        return `${year}-${month}-${day}`;
+      } else {
+        const hours = pad(dateValue.getHours());
+        const minutes = pad(dateValue.getMinutes());
+        return `${year}-${month}-${day}T${hours}:${minutes}`;
+      }
+    };
+    const handleInputChange = (e_0) => {
+      const inputValue = e_0.target.value;
+      setInternalValue(inputValue);
+      setIsTyping(true);
+      if (!inputValue) {
         onChange?.(null);
-      };
-      $[0] = onChange;
-      $[1] = t3;
-    } else {
-      t3 = $[1];
-    }
-    const handleClear = t3;
-    const valueAsInputValue = _temp2$1;
-    let t4;
-    if ($[2] !== mode || $[3] !== onChange) {
-      t4 = (e_0) => {
-        const inputValue = e_0.target.value;
-        if (!inputValue) {
-          onChange?.(null);
-          return;
+        return;
+      }
+      try {
+        const parsed = new Date(inputValue);
+        if (isNaN(parsed.getTime())) {
+          throw new Error("Invalid date");
         }
         let newDate;
-        try {
-          if (mode === "date_time") {
-            const [datePart, timePart] = inputValue.split("T");
-            const [year_0, month_0, day_0] = datePart.split("-").map(Number);
-            const [hours_0, minutes_0] = timePart.split(":").map(Number);
-            newDate = new Date(year_0, month_0 - 1, day_0, hours_0, minutes_0);
-          } else {
-            const [year_1, month_1, day_1] = inputValue.split("-").map(Number);
-            newDate = new Date(year_1, month_1 - 1, day_1);
-          }
-        } catch (t52) {
-          newDate = null;
+        if (mode === "date") {
+          const userTimezoneOffset = parsed.getTimezoneOffset() * 6e4;
+          newDate = new Date(parsed.getTime() + userTimezoneOffset);
+        } else {
+          newDate = parsed;
         }
         onChange?.(newDate);
-      };
-      $[2] = mode;
-      $[3] = onChange;
-      $[4] = t4;
-    } else {
-      t4 = $[4];
-    }
-    const handleInputChange = t4;
-    let t5;
-    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx("style", { children: inputStyles });
-      $[5] = t5;
-    } else {
-      t5 = $[5];
-    }
-    const t6 = !invisible && fieldBackgroundMixin;
-    const t7 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
-    const t8 = size === "smallest";
-    const t9 = size === "small";
-    const t10 = size === "medium";
-    const t11 = size === "large";
-    let t12;
-    if ($[6] !== className || $[7] !== t10 || $[8] !== t11 || $[9] !== t6 || $[10] !== t7 || $[11] !== t8 || $[12] !== t9) {
-      t12 = cls("rounded-md relative max-w-full", t6, t7, {
-        "min-h-[28px]": t8,
-        "min-h-[32px]": t9,
-        "min-h-[42px]": t10,
-        "min-h-[64px]": t11
-      }, className);
-      $[6] = className;
-      $[7] = t10;
-      $[8] = t11;
-      $[9] = t6;
-      $[10] = t7;
-      $[11] = t8;
-      $[12] = t9;
-      $[13] = t12;
-    } else {
-      t12 = $[13];
-    }
-    let t13;
-    if ($[14] !== disabled) {
-      t13 = () => {
+      } catch (e_1) {
+        return;
+      }
+    };
+    const handleFocus = () => {
+      setFocused(true);
+      setIsTyping(true);
+      setInternalValue(valueAsInputValue(value ?? null, mode));
+    };
+    const handleBlur = () => {
+      setFocused(false);
+      setIsTyping(false);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: inputStyles }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls("rounded-md relative max-w-full", !invisible && fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+        "min-h-[28px]": size === "smallest",
+        "min-h-[32px]": size === "small",
+        "min-h-[42px]": size === "medium",
+        "min-h-[64px]": size === "large"
+      }, className), style, onClick: () => {
         if (!disabled) {
           inputRef.current?.focus();
         }
-      };
-      $[14] = disabled;
-      $[15] = t13;
-    } else {
-      t13 = $[15];
-    }
-    let t14;
-    if ($[16] !== disabled || $[17] !== error || $[18] !== focused || $[19] !== label) {
-      t14 = label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-500", disabled ? "opacity-50" : ""), shrink: true, children: label });
-      $[16] = disabled;
-      $[17] = error;
-      $[18] = focused;
-      $[19] = label;
-      $[20] = t14;
-    } else {
-      t14 = $[20];
-    }
-    const t15 = mode === "date_time" ? "datetime-local" : "date";
-    const t16 = valueAsInputValue(value ?? null, mode);
-    let t17;
-    let t18;
-    if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-      t17 = () => setFocused(true);
-      t18 = () => setFocused(false);
-      $[21] = t17;
-      $[22] = t18;
-    } else {
-      t17 = $[21];
-      t18 = $[22];
-    }
-    const t19 = clearable ? "pr-14" : "pr-12";
-    const t20 = size === "smallest";
-    const t21 = size === "small";
-    const t22 = size === "medium";
-    const t23 = size === "large";
-    let t24;
-    if ($[23] !== disabled || $[24] !== inputClassName || $[25] !== label || $[26] !== t19 || $[27] !== t20 || $[28] !== t21 || $[29] !== t22 || $[30] !== t23) {
-      t24 = cls("w-full outline-none bg-transparent leading-normal text-base px-3", t19, "rounded-md", {
-        "min-h-[28px]": t20,
-        "min-h-[32px]": t21,
-        "min-h-[42px]": t22,
-        "min-h-[64px]": t23
-      }, label ? "pt-8 pb-2" : "py-2", inputClassName, disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500");
-      $[23] = disabled;
-      $[24] = inputClassName;
-      $[25] = label;
-      $[26] = t19;
-      $[27] = t20;
-      $[28] = t21;
-      $[29] = t22;
-      $[30] = t23;
-      $[31] = t24;
-    } else {
-      t24 = $[31];
-    }
-    let t25;
-    if ($[32] !== disabled || $[33] !== handleInputChange || $[34] !== t15 || $[35] !== t16 || $[36] !== t24) {
-      t25 = /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, type: t15, value: t16, onChange: handleInputChange, onFocus: t17, onBlur: t18, disabled, className: t24 });
-      $[32] = disabled;
-      $[33] = handleInputChange;
-      $[34] = t15;
-      $[35] = t16;
-      $[36] = t24;
-      $[37] = t25;
-    } else {
-      t25 = $[37];
-    }
-    let t26;
-    if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-      t26 = (e_2) => {
-        e_2.stopPropagation();
-        inputRef.current?.showPicker();
-      };
-      $[38] = t26;
-    } else {
-      t26 = $[38];
-    }
-    let t27;
-    if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
-      t27 = /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: t26, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIcon, { color: "disabled" }) });
-      $[39] = t27;
-    } else {
-      t27 = $[39];
-    }
-    let t28;
-    if ($[40] !== clearable || $[41] !== handleClear || $[42] !== value) {
-      t28 = clearable && value && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) });
-      $[40] = clearable;
-      $[41] = handleClear;
-      $[42] = value;
-      $[43] = t28;
-    } else {
-      t28 = $[43];
-    }
-    let t29;
-    if ($[44] !== style || $[45] !== t12 || $[46] !== t13 || $[47] !== t14 || $[48] !== t25 || $[49] !== t28) {
-      t29 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t12, style, onClick: t13, children: [
-        t14,
-        t25,
-        t27,
-        t28
-      ] });
-      $[44] = style;
-      $[45] = t12;
-      $[46] = t13;
-      $[47] = t14;
-      $[48] = t25;
-      $[49] = t28;
-      $[50] = t29;
-    } else {
-      t29 = $[50];
-    }
-    let t30;
-    if ($[51] !== invalidValue || $[52] !== value) {
-      t30 = invalidValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center m-2", children: [
+      }, children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          InputLabel,
+          {
+            className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-500", disabled ? "opacity-50" : ""),
+            shrink: true,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, type: mode === "date_time" ? "datetime-local" : "date", value: isTyping ? internalValue : valueAsInputValue(value ?? null, mode), onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled, className: cls("w-full outline-none bg-transparent leading-normal text-base px-3", clearable ? "pr-14" : "pr-12", "rounded-md", {
+          "min-h-[28px]": size === "smallest",
+          "min-h-[32px]": size === "small",
+          "min-h-[42px]": size === "medium",
+          "min-h-[64px]": size === "large"
+        }, label ? "pt-8 pb-2" : "py-2", inputClassName, disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500") }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: (e_2) => {
+          e_2.stopPropagation();
+          inputRef.current?.showPicker();
+        }, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIcon, { color: "disabled" }) }),
+        clearable && value && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+      ] }),
+      invalidValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center m-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { size: "small", color: "error" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: "Invalid date value for this field" }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: `The provided value is: ${JSON.stringify(value)}` })
         ] })
-      ] });
-      $[51] = invalidValue;
-      $[52] = value;
-      $[53] = t30;
-    } else {
-      t30 = $[53];
-    }
-    let t31;
-    if ($[54] !== t29 || $[55] !== t30) {
-      t31 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        t5,
-        t29,
-        t30
-      ] });
-      $[54] = t29;
-      $[55] = t30;
-      $[56] = t31;
-    } else {
-      t31 = $[56];
-    }
-    return t31;
+      ] })
+    ] });
   };
   const inputStyles = `
     /* Hide the default calendar icon in Chrome, Safari, Edge, Opera */
@@ -27987,25 +27858,6 @@
         -moz-appearance:textfield;
     }
   `;
-  function _temp$3(n) {
-    return n.toString().padStart(2, "0");
-  }
-  function _temp2$1(dateValue, mode_0) {
-    if (!dateValue) {
-      return "";
-    }
-    const pad = _temp$3;
-    const year = dateValue.getFullYear();
-    const month = pad(dateValue.getMonth() + 1);
-    const day = pad(dateValue.getDate());
-    if (mode_0 === "date") {
-      return `${year}-${month}-${day}`;
-    } else {
-      const hours = pad(dateValue.getHours());
-      const minutes = pad(dateValue.getMinutes());
-      return `${year}-${month}-${day}T${hours}:${minutes}`;
-    }
-  }
   const widthClasses = {
     xs: "max-w-xs min-w-xs w-xs",
     sm: "max-w-sm min-w-sm w-sm",
@@ -28136,7 +27988,7 @@
     const t22 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
     let t23;
     if ($[16] !== className || $[17] !== t17 || $[18] !== t18 || $[19] !== t19 || $[20] !== t20 || $[21] !== t21 || $[22] !== t22) {
-      t23 = cls(paperMixin, "z-30", "relative", "outline-none focus:outline-none", t17, t18, "text-surface-accent-900 dark:text-white", "justify-center items-center", t19, "ease-in-out duration-200", t20, t21, t22, className);
+      t23 = cls(paperMixin, "rounded-2xl", "z-30", "relative", "overflow-hidden", "outline-none focus:outline-none", t17, t18, "text-surface-accent-900 dark:text-white", "justify-center items-center", t19, "ease-in-out duration-200", t20, t21, t22, className);
       $[16] = className;
       $[17] = t17;
       $[18] = t18;
@@ -28210,7 +28062,7 @@
     const t3 = translucent ? "backdrop-blur-sm" : "";
     let t4;
     if ($[0] !== className || $[1] !== position || $[2] !== t3) {
-      t4 = cls(defaultBorderMixin, "py-3 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60", t3, className);
+      t4 = cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60", t3, className);
       $[0] = className;
       $[1] = position;
       $[2] = t3;
@@ -28252,7 +28104,7 @@
     let t2;
     if ($[2] !== className || $[3] !== includeMargin) {
       t2 = cls("flex-grow", {
-        "my-6 mx-6": includeMargin
+        "my-8 mx-8": includeMargin
       }, className);
       $[2] = className;
       $[3] = includeMargin;
@@ -28313,7 +28165,7 @@
     let t4;
     if ($[8] !== className || $[9] !== includeMargin) {
       t4 = cls({
-        "mt-6 mx-6": includeMargin
+        "mt-8 mx-8": includeMargin
       }, className);
       $[8] = className;
       $[9] = includeMargin;
@@ -28911,7 +28763,7 @@
     }
     let t3;
     if ($[3] !== className) {
-      t3 = cls(paperMixin, focusedDisabled, "shadow py-2 z-30", className);
+      t3 = cls(paperMixin, focusedDisabled, "py-2 z-30", className);
       $[3] = className;
       $[4] = t3;
     } else {
@@ -28966,7 +28818,7 @@
     } = t0;
     const dense = t1 === void 0 ? false : t1;
     const t2 = onClick && "cursor-pointer";
-    const t3 = dense ? "px-3 py-1.5" : "px-4 py-2";
+    const t3 = dense ? "px-4 py-1.5" : "px-4 py-2";
     let t4;
     if ($[0] !== className || $[1] !== t2 || $[2] !== t3) {
       t4 = cls(t2, "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4", t3, className);
@@ -32100,6 +31952,8 @@
         return "bg-primary";
       case "secondary":
         return "bg-secondary";
+      case "warning":
+        return "bg-orange-500";
       case "error":
         return "bg-red-500";
       default: