@react-fabric/form 1.0.0-beta.54 → 1.0.0-beta.56

package/src/builder/FileField.tsx

@@ -21,7 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, Icon, ProgressBar, Tooltip } from "@react-fabric/core";
+import {
+  Button,
+  CoreIcons,
+  Icon,
+  ProgressBar,
+  Tooltip,
+} from "@react-fabric/core";
 import { FileUtil, Format, isString } from "@react-fabric/utilities";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
@@ -118,7 +124,7 @@ export const FileField = ({
               </div>
               {file.progress && (
                 <Icon
-                  icon="mdi mdi-stop-circle"
+                  icon={CoreIcons.stop}
                   bg="danger"
                   color="white"
                   size="sm"
@@ -129,7 +135,7 @@ export const FileField = ({
               )}
               {!file.progress && (
                 <Icon
-                  icon="mdi mdi-trash-can"
+                  icon={CoreIcons.trash}
                   color="danger"
                   size="sm"
                   aria-label="remove"

package/src/input/AvatarInput.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Avatar, Icon, ProgressBar } from "@react-fabric/core";
+import { Avatar, CoreIcons, Icon, ProgressBar } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { useEffect, useState } from "react";
 import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
@@ -36,6 +36,10 @@ export interface Props extends RefProp {
    * actual avatar storage path
    */
   value?: string;
+  /**
+   * default avatar image
+   */
+  defaultValue?: string;
   /**
    * avatar name
    */
@@ -71,6 +75,7 @@ export const AvatarInput = ({
   size = "6rem",
   avatarName,
   value,
+  defaultValue,
   fileUrl,
   uploadHandler,
   ...rest
@@ -99,16 +104,19 @@ export const AvatarInput = ({
         })
       );
     } else {
-      setBase64("");
+      setBase64(fileUrl?.(defaultValue ?? "") ?? defaultValue ?? "");
     }
-  }, [files, list]);
+  }, [files, list, defaultValue]);
 
   useEffect(() => {
+    !value &&
+      defaultValue &&
+      setBase64(fileUrl?.(defaultValue) ?? defaultValue);
     value && setBase64(fileUrl?.(value) ?? value);
-  }, [value]);
+  }, [value, defaultValue]);
 
   return (
-    <div className="flex flex-nowrap items-end">
+    <div className="flex flex-nowrap items-end overflow-hidden">
       <div className="inline-block leading-none rounded-full relative outline overflow-hidden">
         <Avatar name={avatarName ?? "temp"} size={size} avatar={base64} />
         <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1">
@@ -121,9 +129,9 @@ export const AvatarInput = ({
           />
         </div>
       </div>
-      <HiddenInput hiddenValue={list?.[0]?.path} {...rest} />
+      <HiddenInput hiddenValue={list?.[0]?.path ?? defaultValue} {...rest} />
       {files.map((file, idx) => (
-        <div key={idx} className="px-2 py-1 flex-1">
+        <div key={idx} className="px-2 py-1 flex-1 overflow-hidden">
           <div className="flex flex-nowrap gap-1 items-center">
             <div className="flex-initial truncate pe-2">{file.filename}</div>
             {file.error && (
@@ -133,20 +141,21 @@ export const AvatarInput = ({
             )}
             {file.progress && (
               <Icon
-                icon="mdi mdi-stop-circle"
+                icon={CoreIcons.stop}
                 bg="danger"
                 color="white"
                 size="sm"
-                className="p-[2px]"
+                className="p-[2px] flex-content"
                 aria-label="abort"
                 onClick={() => file.abort?.()}
               />
             )}
             {!file.progress && (
               <Icon
-                icon="mdi mdi-trash-can"
+                icon={CoreIcons.trash}
                 color="danger"
                 size="sm"
+                className="flex-content"
                 aria-label="remove"
                 onClick={() => remove(file.key)}
               />

package/src/input/ColorInput.tsx

@@ -96,10 +96,11 @@ export const ColorInput = ({
 
   const handleChange = useCallback(
     (e?: string) => {
-      setActualValue(e ?? defaultColor);
-      onChange != null && startTransition(() => onChange(e ?? null));
+      const value = e ?? defaultColor;
+      setActualValue(value);
+      onChange != null && startTransition(() => onChange(value ?? null));
     },
-    [onChange],
+    [onChange, defaultColor],
   );
 
   const arrowRef = useRef(null);
@@ -200,6 +201,7 @@ export const ColorInput = ({
       )}
       {!disabled && showPicker && (
         <Icon
+          className="flex-content p-1"
           icon={CoreIcons.colorPicker}
           onClick={() =>
             (window as AnyObject).EyeDropper &&

package/src/input/ColorPicker.tsx

@@ -137,50 +137,55 @@ export const ColorPicker: FC<ColorProps> = memo(
     );
 
     return (
-      <SketchPicker
-        width="16rem"
-        className={"fabric-colorPicker"}
-        styles={
-          {
-            default: {
-              hue: {
-                boxShadow: "0 0 1px 1px var(--color-shadow)",
+      <div
+        // prevent default on mouse down to avoid selection issues
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        <SketchPicker
+          width="16rem"
+          className={"fabric-colorPicker"}
+          styles={
+            {
+              default: {
+                hue: {
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
+                },
+                alpha: {
+                  backgroundColor: "var(--fabric-bg)",
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
+                },
+                color: {
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
+                },
+                saturation: {
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
+                },
+                activeColor: {
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
+                },
+                picker: {
+                  backgroundColor: "var(--fabric-bg)",
+                  boxShadow:
+                    "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
+                },
+                checkboard: {
+                  white: "transparent",
+                  black: "red",
+                },
               },
-              alpha: {
-                backgroundColor: "var(--fabric-bg)",
-                boxShadow: "0 0 1px 1px var(--color-shadow)",
-              },
-              color: {
-                boxShadow: "0 0 1px 1px var(--color-shadow)",
-              },
-              saturation: {
-                boxShadow: "0 0 1px 1px var(--color-shadow)",
-              },
-              activeColor: {
-                boxShadow: "0 0 1px 1px var(--color-shadow)",
-              },
-              picker: {
-                backgroundColor: "var(--fabric-bg)",
-                boxShadow:
-                  "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
-              },
-              checkboard: {
-                white: "transparent",
-                black: "red",
-              },
-            },
-          } as AnyObject
-        }
-        color={actualValue}
-        presetColors={swatches}
-        disableAlpha={hideAlpha}
-        onChange={({ rgb: { a = 1, ...rgb } }) =>
-          setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
-        }
-        onChangeComplete={({ rgb: { a = 1, ...rgb } }) =>
-          handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
-        }
-      />
+            } as AnyObject
+          }
+          color={actualValue}
+          presetColors={swatches}
+          disableAlpha={hideAlpha}
+          onChange={({ rgb: { a = 1, ...rgb } }) =>
+            setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
+          }
+          onChangeComplete={({ rgb: { a = 1, ...rgb } }) =>
+            handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
+          }
+        />
+      </div>
     );
   },
 );

package/src/input/DateInput.tsx

@@ -88,6 +88,7 @@ export const DateInput = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   error,
   type = "date",
@@ -102,7 +103,7 @@ export const DateInput = ({
 }: DateProps) => {
   const [actualValue, setActualValue] = useState("");
   const [inputValue, setInputValue] = useState("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
   const inputFormat = useMemo(
     () => (type === "datetime" ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd"),
@@ -118,7 +119,7 @@ export const DateInput = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.currentTarget.value;
+      const value = e?.currentTarget.value ?? defaultValue;
       if (value) {
         const parsed = DateUtil.parseDate(value);
         setActualValue(parsed?.toISOString?.());
@@ -131,7 +132,7 @@ export const DateInput = ({
         onChange != null && startTransition(() => onChange(null));
       }
     },
-    [onChange, inputFormat],
+    [onChange, inputFormat, defaultValue],
   );
 
   const handleDateChange = useCallback(

package/src/input/Input.tsx

@@ -58,6 +58,7 @@ export const Input = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   error,
   monospace,
@@ -69,7 +70,7 @@ export const Input = ({
   ...rest
 }: TextInputProps) => {
   const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
   const handleEnterPressed = useHandleEnter(onEnterPressed);
 
@@ -79,11 +80,11 @@ export const Input = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.target.value;
+      const value = e?.target.value ?? defaultValue;
       setActualValue(value ?? "");
       onChange?.(value ?? null);
     },
-    [onchange],
+    [onChange, defaultValue],
   );
 
   return (

package/src/input/Number.tsx

@@ -66,6 +66,7 @@ export const Number = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   name,
   min,
@@ -78,7 +79,7 @@ export const Number = ({
   ...rest
 }: NumberProps) => {
   const [actualValue, setActualValue] = useState<"" | number>("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
   const handleEnterPressed = useHandleEnter(onEnterPressed);
 
@@ -88,11 +89,11 @@ export const Number = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const number = e?.target.valueAsNumber;
+      const number = e?.target.valueAsNumber ?? defaultValue;
       setActualValue(number ?? "");
       onChange?.(number ?? null);
     },
-    [onChange],
+    [onChange, defaultValue],
   );
 
   return (

package/src/input/Password.tsx

@@ -63,6 +63,7 @@ export const Password = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   showToggle,
   onBlur,
@@ -75,7 +76,7 @@ export const Password = ({
   const [show, setShow] = useState(false);
 
   const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
   const handleEnterPressed = useHandleEnter(onEnterPressed);
 
@@ -85,11 +86,11 @@ export const Password = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.target.value;
+      const value = e?.target.value ?? defaultValue;
       setActualValue(value ?? "");
       onChange?.(value ?? null);
     },
-    [onChange],
+    [onChange, defaultValue],
   );
 
   return (

package/src/input/RangeSlider.tsx

@@ -38,7 +38,7 @@ import { type InputProps } from "../types";
 export interface RangeProps
   extends Omit<
     InputProps<[number, number]>,
-    "placeholder" | "allowClear" | "children"
+    "placeholder" | "allowClear" | "children" | "defaultValue"
   > {
   /**
    * min value

package/src/input/Search.tsx

@@ -74,6 +74,7 @@ export const Search = ({
   required,
   searching,
   placeholder,
+  defaultValue,
   autoFocus,
   hideHandle,
   allowClear = true,
@@ -86,7 +87,7 @@ export const Search = ({
   ...rest
 }: SearchProps) => {
   const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
   const refValue = useRef("");
   const handleSearch = useDebounce(
@@ -103,7 +104,7 @@ export const Search = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.target.value;
+      const value = e?.target.value ?? defaultValue;
       refValue.current = value ?? "";
       setActualValue(value ?? "");
       onChange?.(value ?? null);
@@ -113,7 +114,7 @@ export const Search = ({
         handleSearch();
       }
     },
-    [onChange, searchOnChange, handleSearch],
+    [onChange, searchOnChange, handleSearch, defaultValue],
   );
 
   return (

package/src/input/Slider.tsx

@@ -36,7 +36,10 @@ import { useRanger } from "../ranger";
 import { type InputProps } from "../types";
 
 export interface SliderProps
-  extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children"> {
+  extends Omit<
+    InputProps<number>,
+    "placeholder" | "allowClear" | "children" | "defaultValue"
+  > {
   /**
    * min value
    */

package/src/input/Switch.tsx

@@ -147,7 +147,7 @@ export const Switch = ({
           actualValue && getBgClass(color ? `${color}-500` : "primary-500"),
           !actualValue &&
             (defaultColor ? getBgClass(`${defaultColor}-500`) : "bg-tint-200"),
-          "relative grid grid-cols-2 items-center h-6 min-w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out",
+          "relative grid grid-cols-2 items-center h-[1.5em] min-w-[2.5em] cursor-pointer rounded-full p-[0.25em] transition-colors duration-200 ease-in-out",
         )}
         style={{
           backgroundColor: actualValue
@@ -177,10 +177,10 @@ export const Switch = ({
           className={classNames(
             !disabled && "shadow-sm",
             actualValue ? "translate-x-[100%]" : "translate-x-0",
-            "pointer-events-none inline-block h-4 start-1 absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out",
+            "pointer-events-none inline-block h-[1em] start-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out",
           )}
           style={{
-            width: "calc(50% - 0.25rem)",
+            width: "calc(50% - 0.25em)",
           }}
         />
         {(!!onLabel || !!offLabel) && (

package/src/input/Textarea.tsx

@@ -74,6 +74,7 @@ export const Textarea = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   rows = 5,
   maxRows = 12,
@@ -87,7 +88,7 @@ export const Textarea = ({
 }: TextareaProps) => {
   const [actualValue, setActualValue] = useState("");
   const [fixedRows, setFixedRows] = useState(rows);
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
   const wrapperRef = useRef(null);
 
   useEffect(() => {
@@ -96,11 +97,11 @@ export const Textarea = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLTextAreaElement>) => {
-      const value = e?.target.value;
+      const value = e?.target.value ?? defaultValue;
       setActualValue(value ?? "");
       onChange?.(value ?? null);
     },
-    [onChange],
+    [onChange, defaultValue],
   );
 
   useEffect(() => {

package/src/select/AutoComplete.tsx

@@ -190,7 +190,7 @@ export const AutoComplete = ({
             return false;
           } else {
             onEnterPressed?.(evt);
-            submitRef.current?.click();
+            setOpen(false);
           }
         } else if (evt.key === "Backspace") {
           !state.query && multiple && handleRemove();

package/src/types/index.ts

@@ -32,6 +32,10 @@ export interface InputProps<V = string> extends TestProps {
    * value
    */
   value?: V | null;
+  /**
+   * default value
+   */
+  defaultValue?: V | null;
   /**
    * change handler
    */