@react-fabric/form 1.0.0-beta.5 → 1.0.0-beta.51

package/src/input/ArrayInput.tsx

@@ -23,27 +23,32 @@
 
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import { Button, CoreIcons, Icon, Tooltip } from "@react-fabric/core";
-import { isString } from "@react-fabric/utilities";
+import {
+  Button,
+  cloneChildren,
+  CoreIcons,
+  Icon,
+  Tooltip,
+} from "@react-fabric/core";
+import { isFalse, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
-  Children,
   cloneElement,
   useCallback,
   useImperativeHandle,
   useMemo,
   type PropsWithChildren,
   type ReactNode,
-  type RefObject,
+  type Ref,
 } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FieldWrapper } from "../internal/FieldWrapper";
-import classes from "./ArrayInput.module.css";
 
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
-export interface ArrayInputProps {
+
+export interface ArrayInputProps<T extends AnyObject = string> {
   /**
    * input label
    */
@@ -77,6 +82,10 @@ export interface ArrayInputProps {
    * minimum required length
    */
   minItems?: number;
+  /**
+   * maximum length
+   */
+  maxItems?: number;
   /**
    * field name to focus on add
    */
@@ -92,34 +101,65 @@ export interface ArrayInputProps {
    * add item button label
    */
   addLabel?: string;
+  buttonPosition?: "top" | "bottom" | "both";
   /**
    * fixed length list
    */
   fixedList?: boolean;
-  arrayRef?: RefObject<{
-    addItem: (item: AnyObject) => void;
+  arrayRef?: Ref<{
+    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
+   */
+  width?: number | string;
+  /**
+   * inline label and input
+   */
+  inline?: boolean;
+  /**
+   * label width for inline
+   */
+  labelWidth?: string;
 }
 
-export const ArrayInput = ({
+export const ArrayInput = <T extends AnyObject = string>({
   name,
   children,
   addLabel,
   fixedList,
   focusName = "",
+  buttonPosition = "bottom",
   onAdd,
+  onRemove,
+  onBeforeRemove,
+  canRemove,
   arrayRef,
   enableSorting,
   disabled = false,
   readOnly = false,
   minItems = 0,
+  maxItems = Number.MAX_SAFE_INTEGER,
   ...rest
-}: ArrayInputProps) => {
+}: ArrayInputProps<T>) => {
   const { t } = useTranslation("form");
   const form = useFormContext();
 
@@ -128,6 +168,7 @@ export const ArrayInput = ({
 
   const { fields, append, remove, move } = useFieldArray({
     name,
+    keyName: "__ID__",
     control: form.control,
   });
 
@@ -139,7 +180,7 @@ export const ArrayInput = ({
   );
 
   const handleAdd = useCallback(
-    (item: AnyObject) => {
+    (item: T) => {
       append(item);
       setTimeout(() => {
         form.setFocus(
@@ -150,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,
@@ -159,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
@@ -227,14 +281,60 @@ export const ArrayInput = ({
   // @ts-expect-error ignore
   SortableItem.displayName = "SortableItem";
 
+  const addButton = useMemo(
+    () => (
+      <div className="flex justify-end">
+        <Tooltip
+          color="danger-200"
+          content={
+            isString(error)
+              ? `${error}`
+              : (t(
+                  error?.key,
+                  error?.values
+                    ? {
+                        ...error?.values,
+                        label: t(
+                          error.values?.label ?? "form:badkey",
+                          error.values?.path,
+                        ),
+                      }
+                    : {},
+                ) as string)
+          }
+        >
+          <Button
+            size="sm"
+            aria-label="Add item"
+            icon={CoreIcons.insert}
+            onClick={() => handleAdd(onAdd?.())}
+            data-invalid={!!error}
+            disabled={!!disabled || readOnly || fields.length > maxItems}
+            className={classNames("fabric-addButton", "me-10")}
+          >
+            {addLabel ?? t("addArray")}
+          </Button>
+        </Tooltip>
+      </div>
+    ),
+    [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems],
+  );
+
   return (
-    <div className={classes.arrayInput}>
-      <FieldWrapper {...rest}>
+    <div className={"fabric-arrayInput"}>
+      <FieldWrapper
+        {...rest}
+        appendLabel={
+          <div className="-me-2">
+            {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
+          </div>
+        }
+      >
         <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"
@@ -242,7 +342,7 @@ export const ArrayInput = ({
                     index,
                     name: `${name}.${index}`,
                   })
-                : Children.map(children, (child: AnyObject) =>
+                : cloneChildren(children, (child: AnyObject) =>
                     cloneElement(
                       child,
                       Object.assign(
@@ -271,48 +371,24 @@ 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>
           ))}
         </Wrapper>
       </FieldWrapper>
-      {!fixedList && onAdd && (
-        <div className="flex justify-end">
-          <Tooltip
-            color="danger"
-            content={
-              isString(error)
-                ? `${error}`
-                : (t(
-                    error?.key,
-                    error?.values
-                      ? {
-                          ...error?.values,
-                          label: t(
-                            error.values?.label ?? "form:badkey",
-                            error.values?.path,
-                          ),
-                        }
-                      : {},
-                  ) as string)
-            }
-          >
-            <Button
-              aria-label="Add item"
-              icon={CoreIcons.insert}
-              onClick={() => handleAdd(onAdd())}
-              data-invalid={!!error}
-              disabled={!!disabled || readOnly}
-              className={classNames(classes.addButton, "me-10")}
-            >
-              {addLabel ?? t("addArray")}
-            </Button>
-          </Tooltip>
-        </div>
-      )}
+      {!fixedList && onAdd && buttonPosition !== "top" && addButton}
     </div>
   );
 };

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,14 +96,14 @@ 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} />
-        <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-opacity-20 hover:bg-opacity-50 bg-black text-white text-xs text-center py-1">
+        <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
             type="file"

package/src/input/Checkbox.tsx

@@ -34,7 +34,7 @@ import {
 } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
 
-export interface CheckboxProps extends RefProp<HTMLInputElement> {
+interface CheckboxProps extends RefProp<HTMLInputElement> {
   /**
    * checkbox label
    */
@@ -50,8 +50,7 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
   /**
    * on checked change
    */
-  onChange?: (checked: boolean | string | number) => void;
-
+  onChange?: (checked: boolean) => void;
   /**
    * disabled input
    */
@@ -94,6 +93,8 @@ export const Checkbox = ({
   width,
   icon,
   iconChecked,
+  // @ts-expect-error ignore
+  required,
   onChange,
   ...rest
 }: CheckboxProps) => {
@@ -150,7 +151,7 @@ export const Checkbox = ({
       <Icon
         className={classNames(
           "p-0.5",
-          actualValue && icon && !iconChecked && "bg-primary-500 text-white",
+          actualValue && icon && !iconChecked && "bg-primary-500 text-white!",
         )}
         size="1.25em"
         color={invalid ? "danger" : "primary"}
@@ -158,7 +159,7 @@ export const Checkbox = ({
       />
       <ErrorIcon invalid={invalid} error={error} />
       {label && (
-        <span className="flex-initial leading-none truncate">{label}</span>
+        <span className="flex-initial leading-tight truncate">{label}</span>
       )}
     </label>
   );

package/src/input/ColorInput.tsx

@@ -21,21 +21,36 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Dropdown, Icon } from "@react-fabric/core";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react";
+import { CoreIcons, Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { isString } from "@react-fabric/utilities";
-import classNames from "classnames";
 import {
   startTransition,
   useCallback,
   useDeferredValue,
   useEffect,
+  useRef,
   useState,
 } from "react";
+import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
 import { ColorPicker, type ColorProps } from "./ColorPicker";
 
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps
+  extends InputProps,
+    Omit<ColorProps, "onChange">,
+    RefProp {
   /**
    * show eydrop picker
    */
@@ -46,14 +61,14 @@ export const ColorInput = ({
   ref,
   required,
   disabled,
-  allowClear,
+  readOnly,
   invalid,
   error,
   value,
   showPicker,
   defaultColor = "",
-  decorateEnd,
-  decorateStart,
+  onBlur,
+  onFocus,
   onChange,
   // @ts-expect-error ignore
   noOutline,
@@ -69,59 +84,107 @@ export const ColorInput = ({
   const handleChange = useCallback(
     (e?: string) => {
       setActualValue(e ?? defaultColor);
-      onChange != null && startTransition(() => onChange(e));
+      onChange != null && startTransition(() => onChange(e ?? null));
     },
     [onChange],
   );
 
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: (open, _, reason) => {
+      if (reason === "reference-press") return;
+      setIsOpen(open);
+    },
+    strategy: "fixed",
+    placement: "bottom",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      offset(9),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+  const click = useClick(context, {
+    enabled: !disabled && !readOnly,
+  });
+  const dismiss = useDismiss(context, {
+    referencePress: true,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+  ]);
+
   return (
-    <div
-      className={classNames(
-        "flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline-tint-200 rounded",
-        !disabled && "bg-base",
-        !noOutline && "bg-[var(--fabric-input)] outline overflow-hidden",
-      )}
+    <InputWrapper
+      showClear={actualValue !== defaultColor && !disabled && !readOnly}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      error={error}
+      {...rest}
     >
-      {decorateStart && (
+      <button
+        data-ref="button"
+        className="flex-1 flex items-center"
+        ref={refs.setReference}
+        {...getReferenceProps({
+          onBlur,
+          onFocus,
+        })}
+        data-inner-clickable="true"
+        data-dropdown-open={isOpen ? true : undefined}
+      >
         <div
-          className={classNames(
-            "text-muted leading-none flex-content",
-            isString(decorateStart) && "px-2",
+          role="none"
+          className="h-[1.5em] min-w-[1.5em] flex-1 flex items-center justify-center self-stretch cursor-pointer m-[0.25em] rounded outline outline-tint-100"
+          style={{
+            backgroundColor: actualValue,
+            opacity: disabled ? 0.65 : 1,
+            pointerEvents: disabled ? "none" : undefined,
+          }}
+        >
+          {!actualValue && (
+            <Icon
+              size="md"
+              className="text-muted"
+              icon={CoreIcons.colorSwatch}
+            />
           )}
+        </div>
+      </button>
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          style={{
+            zIndex: "var(--z-popover)",
+            ...floatingStyles,
+          }}
+          data-ref="dropdownBody"
+          {...getFloatingProps()}
         >
-          {decorateStart}
+          <ColorPicker
+            {...rest}
+            onChange={handleChange}
+            defaultColor={defaultColor}
+            value={actualValue}
+          />
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            strokeWidth={0.5}
+            className="fill-base stroke-muted"
+          />
         </div>
       )}
-      <Dropdown showArrow disabled={disabled}>
-        <button data-ref="button" className="flex-1 flex items-center">
-          <div
-            role="none"
-            className="h-[1.5em] min-w-[1.5em] flex-1 flex items-center justify-center self-stretch cursor-pointer m-[0.25em] rounded outline outline-tint-100"
-            style={{
-              backgroundColor: actualValue,
-              opacity: disabled ? 0.65 : 1,
-              pointerEvents: disabled ? "none" : undefined,
-            }}
-            onClick={(e) =>
-              (e.currentTarget.nextElementSibling as HTMLElement)?.focus()
-            }
-          >
-            {!actualValue && (
-              <Icon
-                size="md"
-                className="text-muted"
-                icon={CoreIcons.colorSwatch}
-              />
-            )}
-          </div>
-        </button>
-        <ColorPicker
-          {...rest}
-          onChange={handleChange}
-          defaultColor={defaultColor}
-          value={actualValue}
-        />
-      </Dropdown>
       {!disabled && showPicker && (
         <Icon
           icon={CoreIcons.colorPicker}
@@ -133,25 +196,6 @@ export const ColorInput = ({
           }
         />
       )}
-      {decorateEnd && (
-        <div
-          className={classNames(
-            "text-muted leading-none flex-content",
-            isString(decorateEnd) && "px-2",
-          )}
-        >
-          {decorateEnd}
-        </div>
-      )}
-      {!disabled && allowClear && actualValue !== defaultColor && (
-        <Icon
-          icon={CoreIcons.close}
-          onClick={() => handleChange()}
-          className={classNames(
-            "text-tint-500 hover:text-tint-700 p-[0.25em] flex-content",
-          )}
-        />
-      )}
-    </div>
+    </InputWrapper>
   );
 };