@react-fabric/form 1.0.0-beta.55 → 1.0.0-beta.57

package/src/input/Hidden.tsx

@@ -33,6 +33,10 @@ interface Props {
    * hidden value will fire change for form update
    */
   hiddenValue?: AnyObject;
+  /**
+   * default avatar image
+   */
+  defaultValue?: string;
   /**
    * form onChange handler
    */
@@ -49,6 +53,7 @@ interface Props {
  */
 export const HiddenInput = ({
   hiddenValue,
+  defaultValue,
   onChange,
   // @ts-expect-error ignore
   // eslint-disable-next-line react/prop-types
@@ -62,11 +67,10 @@ export const HiddenInput = ({
   name,
 }: Props) => {
   useEffect(() => {
-    hiddenValue &&
-      setTimeout(() => {
-        onChange?.(hiddenValue);
-      }, 50);
-  }, [hiddenValue]);
+    setTimeout(() => {
+      onChange?.(hiddenValue ?? defaultValue);
+    }, 50);
+  }, [hiddenValue, defaultValue]);
   return (
     <Fragment>
       <input type="hidden" onChange={onChange} value={value} name={name} />

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
    */
@@ -211,8 +214,8 @@ export const Slider = ({
         <div
           ref={rangerInstance.trackElRef}
           className={classNames(
-            "flex-1 relative flex items-center",
-            vertical ? "my-2 w-8" : "mx-2 h-8",
+            "relative flex items-center",
+            vertical ? "my-2 w-8" : "flex-1 mx-2 h-8",
           )}
           style={{ height: vertical ? height : undefined }}
         >
@@ -259,10 +262,10 @@ export const Slider = ({
                 {displayValue && (
                   <div
                     className={classNames(
-                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap",
+                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap pointer-events-none",
                       "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45",
                       vertical
-                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2"
+                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"
                         : "top-1/2 -translate-y-1/2",
                       !vertical &&
                         (percentage > 50

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(() => {
@@ -130,7 +131,7 @@ export const Textarea = ({
       {...rest}
     >
       <textarea
-        className="appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-20 resize-none"
+        className="appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-12 resize-none"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}

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/select/List.tsx

@@ -61,6 +61,7 @@ export const List = <T extends AnyObject = string>({
   groupProperty,
   labelProperty,
   valueProperty,
+  infoProperty,
   sortProperty,
   multiple,
   allowCreate,
@@ -106,6 +107,7 @@ export const List = <T extends AnyObject = string>({
     value,
     options,
     multiple,
+    alwaysOpen: true,
     groupProperty,
     labelProperty,
     valueProperty,
@@ -320,6 +322,7 @@ export const List = <T extends AnyObject = string>({
           itemRef={setItemRef}
           itemProps={makeItemProps}
           empty={emptyDisplay}
+          info={state.activeItem?.[infoProperty ?? "info"]}
         >
           {(item, label) => renderer?.(item) ?? label}
         </Options>

package/src/select/Options.tsx

@@ -34,6 +34,7 @@ export const Options = ({
   className,
   itemRef,
   empty,
+  info,
   valueProperty = "id",
   labelProperty = "label",
   itemProps,
@@ -41,6 +42,7 @@ export const Options = ({
   ...rest
 }: {
   ref: AnyObject;
+  info?: AnyObject;
   itemRef: AnyObject;
   style?: AnyObject;
   items: AnyObject[];
@@ -55,29 +57,48 @@ export const Options = ({
   return (
     <div
       ref={ref}
-      className={classNames(
-        "bg-base select-none overflow-x-hidden overflow-y-auto",
-        className,
-      )}
+      className={classNames("bg-base select-none flex flex-col", className)}
       style={style}
       {...rest}
     >
-      {items.length === 0 &&
-        (empty ?? (
-          <EmptyContent message={<Trans i18nKey="form:select.emptyList" />} />
-        ))}
-      {items.map((item, index) => {
-        if (item.___group___)
-          return (
-            <p
-              key={index}
-              className="px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t"
-            >
-              {item.label}
-            </p>
-          );
+      <div className={classNames("overflow-x-hidden overflow-y-auto flex-1")}>
+        {items.length === 0 &&
+          (empty ?? (
+            <EmptyContent message={<Trans i18nKey="form:select.emptyList" />} />
+          ))}
+        {items.map((item, index) => {
+          if (item.___group___)
+            return (
+              <p
+                key={index}
+                className="px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t"
+              >
+                {item.label}
+              </p>
+            );
+
+          if (item.___create___)
+            return (
+              <div
+                role="none"
+                key={index}
+                tabIndex={active === index ? 0 : -1}
+                ref={(el: AnyObject) => itemRef(index, el)}
+                data-active={active === index ? true : undefined}
+                className={classNames(
+                  "block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none",
+                  "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
+                )}
+                {...itemProps(item)}
+              >
+                <Trans
+                  i18nKey="form:select.createOption"
+                  values={{ query: item.value ?? item }}
+                  components={[<strong key="t0">query</strong>]}
+                />
+              </div>
+            );
 
-        if (item.___create___)
           return (
             <div
               role="none"
@@ -86,36 +107,19 @@ export const Options = ({
               ref={(el: AnyObject) => itemRef(index, el)}
               data-active={active === index ? true : undefined}
               className={classNames(
-                "block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none",
+                "block text-start truncate px-2 py-1 leading-normal cursor-pointer",
                 "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
               )}
               {...itemProps(item)}
             >
-              <Trans
-                i18nKey="form:select.createOption"
-                values={{ query: item.value ?? item }}
-                components={[<strong key="t0">query</strong>]}
-              />
+              {children(item, item[labelProperty] ?? item)}
             </div>
           );
-
-        return (
-          <div
-            role="none"
-            key={index}
-            tabIndex={active === index ? 0 : -1}
-            ref={(el: AnyObject) => itemRef(index, el)}
-            data-active={active === index ? true : undefined}
-            className={classNames(
-              "block text-start truncate px-2 py-1 leading-normal cursor-pointer",
-              "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
-            )}
-            {...itemProps(item)}
-          >
-            {children(item, item[labelProperty] ?? item)}
-          </div>
-        );
-      })}
+        })}
+      </div>
+      {info && (
+        <div className="px-2 py-1 text-sm bg-dimmed text-muted">{info}</div>
+      )}
     </div>
   );
 };

package/src/select/Select.tsx

@@ -70,6 +70,7 @@ export const Select = <T extends AnyObject = string>({
   labelProperty = "label" as AnyObject,
   valueProperty = "id" as AnyObject,
   sortProperty,
+  infoProperty,
   multiple,
   searchable,
   allowCreate,
@@ -357,6 +358,7 @@ export const Select = <T extends AnyObject = string>({
               itemRef={setItemRef}
               itemProps={makeItemProps}
               empty={emptyDisplay}
+              info={state.activeItem?.[infoProperty ?? "info"]}
             >
               {(item, label) => renderer?.(item) ?? label}
             </Options>

package/src/select/useSelect.tsx

@@ -65,6 +65,7 @@ interface State {
   open: boolean;
   loading: boolean;
   activeIndex: number | null;
+  activeItem: AnyObject;
   selectedIndex: number | null;
   value: AnyObject;
   // filter
@@ -76,8 +77,9 @@ interface State {
 export const useSelect = ({
   options = EMPTY_ARRAY,
   value,
-  defaultOpen = false,
   autoComplete,
+  alwaysOpen = false,
+  defaultOpen = false,
   multiple = false,
   allowCreate = false,
   groupProperty = "",
@@ -93,6 +95,7 @@ export const useSelect = ({
   value?: AnyObject;
   options?: AnyObject[];
   multiple?: boolean;
+  alwaysOpen?: boolean;
   defaultOpen?: boolean;
   allowCreate?: boolean;
   groupProperty?: AnyObject;
@@ -149,12 +152,16 @@ export const useSelect = ({
         };
       }
       if (action.type === "close") {
-        return { ...state, activeIndex: null, open: false };
+        return { ...state, activeIndex: null, activeItem: null, open: false };
       }
       if (action.type === "active" && state.open) {
         if (autoComplete && action.index !== null)
           state.query = state.items[action.index];
-        return { ...state, activeIndex: action.index };
+        return {
+          ...state,
+          activeIndex: action.index,
+          activeItem: state.items[action.index ?? -1],
+        };
       }
       if (action.type === "setValue") {
         return {
@@ -170,6 +177,7 @@ export const useSelect = ({
           ...state,
           value: state.emptyValue,
           activeIndex: null,
+          activeItem: null,
           selectedIndex: autoComplete
             ? state.multiple
               ? action.value?.length
@@ -192,7 +200,7 @@ export const useSelect = ({
             newState.value = action.value;
           }
         }
-        if (!state.multiple) newState.open = false;
+        if (!state.multiple) newState.open = alwaysOpen;
         fireChange(newState.value);
         return newState;
       }
@@ -261,9 +269,10 @@ export const useSelect = ({
     {
       multiple,
       emptyValue,
-      open: defaultOpen,
+      open: alwaysOpen || defaultOpen,
       loading: false,
       activeIndex: null,
+      activeItem: null,
       selectedIndex: null,
       value: emptyValue,
       // filter
@@ -407,7 +416,7 @@ export const useSelect = ({
   }, []);
 
   const setActiveIndex = useCallback((index: number | null) => {
-    dispatch({ type: "active", index });
+    index && index > -1 && dispatch({ type: "active", index });
   }, []);
 
   return {

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
    */
@@ -150,6 +154,10 @@ export interface BaseSelectProps<T extends AnyObject = string> {
    * value property name
    */
   valueProperty?: keyof T;
+  /**
+   * value property name
+   */
+  infoProperty?: keyof T;
   /**
    * value property name
    */