@react-fabric/form 1.0.0-beta.46 → 1.0.0-beta.48

package/src/builder/FormField.tsx

@@ -79,6 +79,7 @@ export const FormField = ({
     if (rest.datatype === DATA_TYPES.BOOL) return Switch;
     if (rest.datatype === DATA_TYPES.TEXT) return Textarea;
     if (rest.datatype === DATA_TYPES.DATE) return DateInput;
+    if (rest.datatype === DATA_TYPES.DATETIME) return DateInput;
     if (rest.datatype === DATA_TYPES.COLOR) return ColorInput;
     if (hasOptions) return Select;
 
@@ -104,7 +105,13 @@ export const FormField = ({
       return {
         min: rest.min,
         max: rest.max,
-        type: rest.type,
+        type: "date",
+      };
+    if (rest.datatype === DATA_TYPES.DATETIME)
+      return {
+        min: rest.min,
+        max: rest.max,
+        type: "datetime",
       };
     if (rest.datatype === DATA_TYPES.TEXT) return { rows: 3 };
     if (rest.datatype === DATA_TYPES.COLOR) return { showPicker: true };

package/src/builder/components/SchemaField.tsx

@@ -190,7 +190,8 @@ export const SchemaField = ({
           } as StringSchema);
         } else if (type === DATA_TYPES.DATE) {
           reset = Object.assign(reset, {
-            type: "date",
+            min: modelRef.min,
+            max: modelRef.max,
           } as DateSchema);
         } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
           reset = Object.assign(reset, {

package/src/form/Form.tsx

@@ -40,6 +40,12 @@ import {
   type FormState,
 } from "react-hook-form";
 
+type NestedKeyOf<T extends object> = {
+  [K in keyof T & (string | number)]: T[K] extends object
+    ? `${K}` | `${K}.${NestedKeyOf<T[K]>}`
+    : K;
+}[keyof T & (string | number)];
+
 export interface FormRef<K extends KeyValue> {
   state: FormState<K>;
   reset: () => void;
@@ -47,7 +53,7 @@ export interface FormRef<K extends KeyValue> {
   submit: () => void;
   validate: () => Promise<boolean>;
   getValues: () => K;
-  setValue: (key: keyof K, value: AnyObject) => void;
+  setValue: (key: NestedKeyOf<K>, value: AnyObject) => void;
   setValues: (values: K) => void;
 }
 

package/src/input/ArrayInput.tsx

@@ -30,7 +30,7 @@ import {
   Icon,
   Tooltip,
 } from "@react-fabric/core";
-import { isString } from "@react-fabric/utilities";
+import { isFalse, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   cloneElement,
@@ -48,7 +48,7 @@ import { FieldWrapper } from "../internal/FieldWrapper";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
 
-export interface ArrayInputProps {
+export interface ArrayInputProps<T extends AnyObject = string> {
   /**
    * input label
    */
@@ -107,13 +107,25 @@ export interface ArrayInputProps {
    */
   fixedList?: boolean;
   arrayRef?: Ref<{
-    addItem: (item: AnyObject) => void;
+    addItem: (item: T) => void;
     removeItem: (idx: number) => void;
   }>;
   /**
-   * Add item
+   * add new item
    */
   onAdd?: () => AnyObject;
+  /**
+   * on item remove
+   */
+  onRemove?: (item: T, idx: number) => void;
+  /**
+   * before item remove
+   */
+  onBeforeRemove?: (item: T, idx: number) => Promise<boolean> | boolean;
+  /**
+   * can remove item
+   */
+  canRemove?: (props: { item: T; index: number; lastItem: boolean }) => boolean;
 
   /**
    * field width
@@ -129,7 +141,7 @@ export interface ArrayInputProps {
   labelWidth?: string;
 }
 
-export const ArrayInput = ({
+export const ArrayInput = <T extends AnyObject = string>({
   name,
   children,
   addLabel,
@@ -137,6 +149,9 @@ export const ArrayInput = ({
   focusName = "",
   buttonPosition = "bottom",
   onAdd,
+  onRemove,
+  onBeforeRemove,
+  canRemove,
   arrayRef,
   enableSorting,
   disabled = false,
@@ -144,7 +159,7 @@ export const ArrayInput = ({
   minItems = 0,
   maxItems = Number.MAX_SAFE_INTEGER,
   ...rest
-}: ArrayInputProps) => {
+}: ArrayInputProps<T>) => {
   const { t } = useTranslation("form");
   const form = useFormContext();
 
@@ -153,6 +168,7 @@ export const ArrayInput = ({
 
   const { fields, append, remove, move } = useFieldArray({
     name,
+    keyName: "__ID__",
     control: form.control,
   });
 
@@ -164,7 +180,7 @@ export const ArrayInput = ({
   );
 
   const handleAdd = useCallback(
-    (item: AnyObject) => {
+    (item: T) => {
       append(item);
       setTimeout(() => {
         form.setFocus(
@@ -175,6 +191,19 @@ export const ArrayInput = ({
     [name, fields, focusName],
   );
 
+  const handleRemove = useCallback(
+    (item: T, index: number) => {
+      const ret = onBeforeRemove?.(item, index);
+      void Promise.resolve(ret).then((b) => {
+        if (!isFalse(b)) {
+          remove(index);
+          onRemove?.(item, index);
+        }
+      });
+    },
+    [remove, onRemove, onBeforeRemove],
+  );
+
   useImperativeHandle(arrayRef, () => ({
     addItem: handleAdd,
     removeItem: remove,
@@ -184,7 +213,7 @@ export const ArrayInput = ({
     ({ children }: PropsWithChildren) => {
       if (enableSorting) {
         // pass id list to dnd context
-        const idMap = fields.map((item) => item.id);
+        const idMap = fields.map((item) => item.__ID__);
         const handleDragEnd = (e: DragEndEvent) => {
           if (e.over && e.active.id !== e.over.id) {
             // find index of item and drop over
@@ -304,8 +333,8 @@ export const ArrayInput = ({
         <Wrapper>
           {fields.map((item, index) => (
             <SortableItem
-              key={item.id}
-              id={item.id}
+              key={item.__ID__}
+              id={item.__ID__}
               className="flex items-center flex-nowrap gap-2 mb-1"
             >
               {typeof children === "function"
@@ -342,8 +371,17 @@ export const ArrayInput = ({
                   color="danger"
                   variant="link"
                   className="self-end"
-                  disabled={disabled || readOnly || fields.length <= minItems}
-                  onClick={() => remove(index)}
+                  disabled={
+                    disabled ||
+                    readOnly ||
+                    fields.length <= minItems ||
+                    canRemove?.({
+                      item: item as T,
+                      index,
+                      lastItem: index + 1 === fields.length,
+                    }) !== false
+                  }
+                  onClick={() => handleRemove(item as T, index)}
                 />
               )}
             </SortableItem>

package/src/input/AvatarInput.tsx

@@ -37,14 +37,17 @@ export interface Props extends RefProp {
    */
   value?: string;
   /**
-   * avatar stream src
+   * avatar name
    */
-  src?: string;
+  avatarName?: string;
   size?: string | number;
   /**
    * upload handler to store file in temp storage
    */
   uploadHandler: UploadHandler;
+  /**
+   * file stream path
+   */
   fileUrl?: (path: string) => string;
   /**
    * change handler
@@ -57,15 +60,16 @@ export interface Props extends RefProp {
 }
 
 export const AvatarInput = ({
-  src,
   size = "6rem",
+  avatarName,
+  value,
   fileUrl,
   uploadHandler,
   ...rest
 }: Props) => {
   const { files, list, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
-    rest.value,
+    value,
     false,
   );
 
@@ -92,13 +96,13 @@ export const AvatarInput = ({
   }, [files, list]);
 
   useEffect(() => {
-    src && setBase64(fileUrl?.(src) ?? src);
-  }, [src]);
+    value && setBase64(fileUrl?.(value) ?? value);
+  }, [value]);
 
   return (
     <div className="flex flex-nowrap items-end">
       <div className="inline-block leading-none rounded-full relative outline overflow-hidden">
-        <Avatar name="temp" size={size} avatar={base64} />
+        <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">
           <span>Edit</span>
           <input

package/src/input/DateInput.tsx

@@ -37,6 +37,7 @@ import {
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type DateLike, DatePanel, DateUtil } from "@react-fabric/date";
 import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
 import {
   type ChangeEvent,
   startTransition,
@@ -49,8 +50,7 @@ import {
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
-import classNames from "classnames";
+import { useHandleEnter } from "../utils";
 
 export interface DateProps
   extends InputProps<string>,
@@ -105,10 +105,7 @@ export const DateInput = ({
     setInputValue(deferred ? DateUtil.format(deferred, inputFormat) : "");
   }, [deferred, inputFormat]);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {

package/src/input/File.tsx

@@ -36,14 +36,13 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useRef,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface FileInputProps
   extends InputProps<AnyObject>,
@@ -100,10 +99,7 @@ export const FileInput = ({
   const [actualValue, setActualValue] = useState<File | File[] | null>();
   const deferred = useDeferredValue(value);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred);

package/src/input/Input.tsx

@@ -22,18 +22,17 @@
  */
 
 import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
 import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
-import classNames from "classnames";
+import { useHandleEnter } from "../utils";
 
 export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
   /**
@@ -64,10 +63,7 @@ export const Input = ({
   const [actualValue, setActualValue] = useState("");
   const deferred = useDeferredValue(value);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred ?? "");

package/src/input/Number.tsx

@@ -26,13 +26,12 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface NumberProps
   extends InputProps<number>,
@@ -73,10 +72,7 @@ export const Number = ({
   const [actualValue, setActualValue] = useState<"" | number>("");
   const deferred = useDeferredValue(value);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred ?? "");

package/src/input/Password.tsx

@@ -28,14 +28,13 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useState,
   type ChangeEvent,
 } from "react";
 import { useTranslation } from "react-i18next";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
   /**
@@ -72,10 +71,7 @@ export const Password = ({
   const [actualValue, setActualValue] = useState("");
   const deferred = useDeferredValue(value);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred ?? "");

package/src/input/Search.tsx

@@ -28,14 +28,13 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useRef,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
   /**
@@ -87,10 +86,7 @@ export const Search = ({
     250,
   );
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(handleSearch),
-    [handleSearch],
-  );
+  const handleEnterPressed = useHandleEnter(handleSearch);
 
   useEffect(() => {
     setActualValue(deferred ?? "");
@@ -103,8 +99,8 @@ export const Search = ({
       setActualValue(value ?? "");
       onChange?.(value ?? null);
 
-      // value was cleared so force fire onSearch
-      if (searchOnChange) {
+      // when e is undefined value was cleared so force fire onSearch
+      if (!e || searchOnChange) {
         handleSearch();
       }
     },

package/src/input/Textarea.tsx

@@ -32,7 +32,7 @@ import {
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface TextareaProps
   extends InputProps,
@@ -102,6 +102,10 @@ export const Textarea = ({
     }
   }, [actualValue, variableRows, rows, maxRows]);
 
+  const handleEnterPressed = useHandleEnter(onEnterPressed, {
+    preventDefault: !!onEnterPressed,
+  });
+
   return (
     <InputWrapper
       showClear={!!actualValue && !disabled && !readOnly}
@@ -133,9 +137,7 @@ export const Textarea = ({
         onBlur={onBlur}
         onFocus={onFocus}
         onChange={handleChange}
-        onKeyDown={handleEnter(onEnterPressed, {
-          preventDefault: !!onEnterPressed,
-        })}
+        onKeyDown={handleEnterPressed}
       />
     </InputWrapper>
   );

package/src/internal/FieldWrapper.tsx

@@ -22,6 +22,7 @@
  */
 
 import classNames from "classnames";
+import { ErrorIcon } from "./ErrorIcon";
 
 export const FieldWrapper = ({
   label,
@@ -35,6 +36,8 @@ export const FieldWrapper = ({
   children,
   listing,
   className,
+  invalid,
+  error,
   "data-inner": isInner,
 }: KeyValue) => {
   return (
@@ -72,6 +75,7 @@ export const FieldWrapper = ({
               ✽
             </span>
           )}
+          <ErrorIcon invalid={invalid} error={error} />
           <div className="flex-1" />
           {appendLabel && <span className="flex-content">{appendLabel}</span>}
         </div>

package/src/select/AutoComplete.tsx

@@ -293,6 +293,7 @@ export const AutoComplete = ({
           data-testid={name}
           name={name}
           size={1}
+          ref={ref}
           onInput={onInput}
           autoFocus={autoFocus}
           rows={!multiple && expandOnEdit && state.open ? 5 : 1}

package/src/select/List.tsx

@@ -53,6 +53,7 @@ export const List = <T extends AnyObject = string>({
   groupProperty,
   labelProperty,
   valueProperty,
+  sortProperty,
   multiple,
   allowCreate,
   searchable,
@@ -100,6 +101,7 @@ export const List = <T extends AnyObject = string>({
     groupProperty,
     labelProperty,
     valueProperty,
+    sortProperty,
     allowCreate,
     createOption,
     matcher,

package/src/select/Select.tsx

@@ -61,6 +61,7 @@ export const Select = <T extends AnyObject = string>({
   groupProperty,
   labelProperty = "label" as AnyObject,
   valueProperty = "id" as AnyObject,
+  sortProperty,
   multiple,
   searchable,
   allowCreate,
@@ -93,6 +94,7 @@ export const Select = <T extends AnyObject = string>({
     groupProperty,
     labelProperty,
     valueProperty,
+    sortProperty,
     allowCreate,
     createOption,
     matcher,

package/src/select/useSelect.tsx

@@ -83,6 +83,7 @@ export const useSelect = ({
   groupProperty = "",
   valueProperty = "id",
   labelProperty = "label",
+  sortProperty,
   createOption = makeOption,
   matcher,
   onQuery,
@@ -97,6 +98,7 @@ export const useSelect = ({
   groupProperty?: AnyObject;
   valueProperty?: AnyObject;
   labelProperty?: AnyObject;
+  sortProperty?: AnyObject;
   autoComplete?: boolean;
   matcher?: (item: AnyObject, query: string) => boolean;
   createOption?: (query: string) => AnyObject;
@@ -226,7 +228,8 @@ export const useSelect = ({
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query, ...optionList]);
         }
-        optionList = optionList.sort(compareValues("asc", labelProperty));
+        if (sortProperty)
+          optionList = optionList.sort(compareValues("asc", sortProperty));
         const grouped = groupBy(optionList, groupProperty, "");
         if (action.open) newState.open = true;
         newState.items = [];

package/src/types/index.ts

@@ -150,6 +150,10 @@ export interface BaseSelectProps<T extends AnyObject = string> {
    * value property name
    */
   valueProperty?: keyof T;
+  /**
+   * value property name
+   */
+  sortProperty?: keyof T | true;
   /**
    * searchable list
    */

package/src/types/schema.ts

@@ -29,6 +29,7 @@ export enum DATA_TYPES {
   COLOR = "color",
   BOOL = "bool",
   DATE = "date",
+  DATETIME = "datetime",
   STRING = "string",
   NUMBER = "number",
   RANGE = "range",
@@ -84,8 +85,7 @@ export interface RangeSchema extends BaseSchema {
 }
 
 export interface DateSchema extends BaseSchema {
-  datatype: DATA_TYPES.DATE;
-  type?: "date" | "datetime";
+  datatype: DATA_TYPES.DATE | DATA_TYPES.DATETIME;
   min?: DateLike;
   max?: DateLike;
 }

package/src/utils/eventHandlers.ts

@@ -23,19 +23,25 @@
 
 /* istanbul ignore file */
 
-import { debounce } from "@react-fabric/utilities";
+import { useFloatingTree } from "@floating-ui/react";
+import { useDebounce } from "@react-fabric/core";
 import { type KeyboardEvent, type MouseEvent } from "react";
 
 /** ***************** common handler for enter press *******************/
-export const handleEnter = (
+export const useHandleEnter = (
   callback?: (e: KeyboardEvent) => void,
   {
     stopPropagation = false,
     preventDefault = false,
   }: { stopPropagation?: boolean; preventDefault?: boolean } = {},
 ) => {
-  const cbHandle = debounce(callback ?? (() => undefined), 100);
+  const cbHandle = useDebounce(callback ?? (() => undefined), [callback], 100);
+  const tree = useFloatingTree();
   return (e: KeyboardEvent) => {
+    // prevent propagation of event if input within dropdown (work around for floating-ui typeahead)
+    if (tree && e.key !== "Escape") {
+      e?.stopPropagation();
+    }
     if (
       !e.shiftKey &&
       !e.altKey &&