@react-fabric/form 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/types/types/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-export interface InputProps<V = string> {
+import { type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+export interface InputProps<V = string> extends TestProps {
     /**
      * value
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.31",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -37,10 +37,10 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/react": "0.26.24",
+    "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.3",
-    "@react-fabric/utilities": "^1.0.0-beta.1",
+    "@react-fabric/core": "^1.0.0-beta.31",
+    "@react-fabric/utilities": "^1.0.0-beta.31",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -48,8 +48,8 @@
   },
   "peerDependencies": {
     "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-i18next": "^15.0.2"
   },
   "devDependencies": {
@@ -60,5 +60,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "2ce2a968f48d6ffc338f5da3a0cf67232d0c6864"
+  "gitHead": "de71c6875264d385666d0fa441785b9884951561"
 }

package/src/form/Form.tsx

@@ -89,6 +89,10 @@ export const Form = <K extends KeyValue>({
     defaultValues: defaultValues as DefaultValues<K>,
   });
 
+  useEffect(() => {
+    form.reset();
+  }, []);
+
   const [, startTransition] = useTransition();
   const changeHandler = useDebounce(onChange, [onChange]);
   useEffect(() => {
@@ -118,12 +122,16 @@ export const Form = <K extends KeyValue>({
       submit: () => form.handleSubmit(onSubmit),
       validate: async () => await form.trigger(),
       getValues: () => form.getValues(),
-      setValues: (v) => form.reset(v),
+      setValues: (v) => setTimeout(() => form.reset(v), 50),
       setValue: (k, v) =>
-        form.setValue(k as AnyObject, v, {
-          shouldDirty: false,
-          shouldTouch: false,
-        }),
+        setTimeout(
+          () =>
+            form.setValue(k as AnyObject, v, {
+              shouldDirty: false,
+              shouldTouch: false,
+            }),
+          50,
+        ),
     }),
     [onSubmit, form, form.formState, defaultValues],
   );

package/src/input/ArrayInput.tsx

@@ -23,18 +23,23 @@
 
 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 {
+  Button,
+  cloneChildren,
+  CoreIcons,
+  Icon,
+  Tooltip,
+} from "@react-fabric/core";
 import { 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";
@@ -77,6 +82,10 @@ export interface ArrayInputProps {
    * minimum required length
    */
   minItems?: number;
+  /**
+   * maximum length
+   */
+  maxItems?: number;
   /**
    * field name to focus on add
    */
@@ -92,11 +101,12 @@ export interface ArrayInputProps {
    * add item button label
    */
   addLabel?: string;
+  buttonPosition?: "top" | "bottom" | "both";
   /**
    * fixed length list
    */
   fixedList?: boolean;
-  arrayRef?: RefObject<{
+  arrayRef?: Ref<{
     addItem: (item: AnyObject) => void;
     removeItem: (idx: number) => void;
   }>;
@@ -104,6 +114,19 @@ export interface ArrayInputProps {
    * Add item
    */
   onAdd?: () => AnyObject;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+  /**
+   * inline label and input
+   */
+  inline?: boolean;
+  /**
+   * label width for inline
+   */
+  labelWidth?: string;
 }
 
 export const ArrayInput = ({
@@ -112,12 +135,14 @@ export const ArrayInput = ({
   addLabel,
   fixedList,
   focusName = "",
+  buttonPosition = "bottom",
   onAdd,
   arrayRef,
   enableSorting,
   disabled = false,
   readOnly = false,
   minItems = 0,
+  maxItems = Number.MAX_SAFE_INTEGER,
   ...rest
 }: ArrayInputProps) => {
   const { t } = useTranslation("form");
@@ -227,9 +252,55 @@ export const ArrayInput = ({
   // @ts-expect-error ignore
   SortableItem.displayName = "SortableItem";
 
+  const addButton = useMemo(
+    () => (
+      <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
+            size="sm"
+            aria-label="Add item"
+            icon={CoreIcons.insert}
+            onClick={() => handleAdd(onAdd?.())}
+            data-invalid={!!error}
+            disabled={!!disabled || readOnly || fields.length > maxItems}
+            className={classNames(classes.addButton, "me-10")}
+          >
+            {addLabel ?? t("addArray")}
+          </Button>
+        </Tooltip>
+      </div>
+    ),
+    [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems],
+  );
+
   return (
     <div className={classes.arrayInput}>
-      <FieldWrapper {...rest}>
+      <FieldWrapper
+        {...rest}
+        appendLabel={
+          <div className="-me-2">
+            {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
+          </div>
+        }
+      >
         <Wrapper>
           {fields.map((item, index) => (
             <SortableItem
@@ -242,7 +313,7 @@ export const ArrayInput = ({
                     index,
                     name: `${name}.${index}`,
                   })
-                : Children.map(children, (child: AnyObject) =>
+                : cloneChildren(children, (child: AnyObject) =>
                     cloneElement(
                       child,
                       Object.assign(
@@ -279,40 +350,7 @@ export const ArrayInput = ({
           ))}
         </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/ColorInput.tsx

@@ -21,7 +21,19 @@
  * 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";
@@ -30,6 +42,7 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import { type InputProps } from "../types";
@@ -74,6 +87,38 @@ export const ColorInput = ({
     [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,
+  });
+  const dismiss = useDismiss(context, {
+    referencePress: true,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+  ]);
+
   return (
     <div
       className={classNames(
@@ -92,36 +137,56 @@ export const ColorInput = ({
           {decorateStart}
         </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>
+      <button
+        data-ref="button"
+        className="flex-1 flex items-center"
+        ref={refs.setReference}
+        {...getReferenceProps()}
+        data-inner-clickable="true"
+        data-dropdown-open={isOpen ? true : undefined}
+      >
+        <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,
+          }}
+        >
+          {!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()}
+        >
+          <ColorPicker
+            {...rest}
+            onChange={handleChange}
+            defaultColor={defaultColor}
+            value={actualValue}
+          />
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            strokeWidth={0.5}
+            className="fill-base stroke-muted"
+          />
+        </div>
+      )}
       {!disabled && showPicker && (
         <Icon
           icon={CoreIcons.colorPicker}

package/src/input/ColorPicker.module.css

@@ -26,26 +26,40 @@
     --color-shadow: theme(borderColor.base);
 
     & input {
-      @apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;
-
       padding: 0 4px !important;
+
       line-height: 2;
+      color: theme(textColor.base);
+
+      background-color: theme(backgroundColor.base);
+      border: 1px solid theme(borderColor.base);
+      border-radius: theme(borderRadius.sm);
+      box-shadow: none;
+
+      &:focus {
+        border-color: theme(borderColor.primary.DEFAULT);
+      }
     }
 
     & label {
-      @apply !text-base;
+      color: theme(textColor.base);
     }
 
     & :global(.flexbox-fix) {
-      @apply !border-t-muted justify-center;
+      justify-content: center;
+      border-color: theme(borderColor.muted);
 
       & > div > div {
-        @apply text-center;
+        text-align: center;
       }
 
       & span > div {
         box-shadow: 0 0 1px 1px theme(borderColor.base) inset !important;
       }
     }
+
+    & :global(.saturation-black) ~ div {
+      pointer-events: none;
+    }
   }
 }

package/src/input/ColorPicker.tsx

@@ -135,12 +135,9 @@ export const ColorPicker: FC<ColorProps> = memo(
           {
             default: {
               hue: {
-                borderRadius: "99px",
                 boxShadow: "0 0 1px 1px var(--color-shadow)",
               },
               alpha: {
-                height: "1rem",
-                borderRadius: "99px",
                 backgroundColor: "var(--fabric-bg)",
                 boxShadow: "0 0 1px 1px var(--color-shadow)",
               },
@@ -158,36 +155,6 @@ export const ColorPicker: FC<ColorProps> = memo(
                 boxShadow:
                   "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
               },
-              Alpha: {
-                alpha: {
-                  paddingRight: "calc(1rem - 2px)",
-                },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
-                },
-              },
-              Hue: {
-                hue: {
-                  paddingRight: "calc(1rem - 2px)",
-                },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
-                },
-              },
-              Saturation: {
-                circle: {
-                  width: "0.5rem",
-                  borderRadius: "99px",
-                  height: "0.5rem",
-                  transform: "translate(-0.25rem, -0.25rem)",
-                },
-              },
               checkboard: {
                 white: "transparent",
                 black: "red",

package/src/input/Field.tsx

@@ -21,12 +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 { cloneChildren } from "@react-fabric/core";
 import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
-import { Children, cloneElement } from "react";
+import { cloneElement } from "react";
 import classes from "../internal/Field.module.css";
 import { FieldWrapper } from "../internal/FieldWrapper";
 
@@ -90,13 +91,10 @@ export const Field = ({
           !vertical && "flex flex-nowrap",
         )}
       >
-        {Children.map(
-          children,
-          (child) =>
-            child &&
-            cloneElement(child as AnyObject, {
-              "data-inner": true,
-            }),
+        {cloneChildren(children, (child: AnyObject) =>
+          cloneElement(child, {
+            "data-inner": true,
+          }),
         )}
       </div>
     </FieldWrapper>

package/src/input/File.module.css

@@ -24,19 +24,33 @@
 @layer comp {
   .fileInput {
     &::-webkit-file-upload-button {
-      @apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer;
+      cursor: pointer;
+
+      padding-block: 0;
+
+      color: theme(textColor.white);
+
+      opacity: 0.8;
+      background-color: theme(backgroundColor.primary.500);
+      border: 0;
+      border-radius: theme(borderRadius.DEFAULT);
+
+      &:hover {
+        opacity: 0.9;
+      }
     }
 
     &[aria-invalid="true"]::-webkit-file-upload-button {
-      @apply bg-danger-500;
+      background-color: theme(backgroundColor.danger.500);
     }
 
     &:disabled::-webkit-file-upload-button {
-      @apply bg-muted pointer-events-none;
+      pointer-events: none;
+      background-color: theme(backgroundColor.muted);
     }
 
     &[readOnly] {
-      @apply pointer-events-none;
+      pointer-events: none;
     }
   }
 }

package/src/input/Hidden.tsx

@@ -54,7 +54,9 @@ export const HiddenInput = ({
   name,
 }: Props) => {
   useEffect(() => {
-    onChange?.(hiddenValue);
+    setTimeout(() => {
+      onChange?.(hiddenValue);
+    }, 50);
   }, [hiddenValue]);
   return (
     <Fragment>

package/src/input/Input.tsx

@@ -104,7 +104,7 @@ export const Input = ({
         type={type}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}

package/src/input/Number.tsx

@@ -116,7 +116,7 @@ export const Number = ({
         step={step}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}

package/src/input/Password.tsx

@@ -129,7 +129,7 @@ export const Password = ({
         type={show ? "text" : "password"}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}