@react-fabric/form 1.0.0-beta.6 → 1.0.0-beta.60

package/dist/types/select/List.d.ts

@@ -1,4 +1,12 @@
 import { type SelectProps } from "../types";
-export declare const List: <T extends unknown = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, multiple, allowCreate, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: SelectProps<T> & {
+/**
+ * List component for selecting items from a list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ *
+ * @param {SelectProps<T>} props - The properties for the List component.
+ * @returns {JSX.Element} The rendered List component.
+ */
+export declare const List: <T extends AnyObject = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, infoProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
     height?: string | number;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/Options.d.ts

@@ -1,6 +1,7 @@
-import { type ReactElement, type ReactNode } from "react";
-export declare const Options: ({ ref, style, items, active, className, itemRef, empty, valueProperty, labelProperty, itemProps, children, ...rest }: {
+import { type ReactElement } from "react";
+export declare const Options: ({ ref, style, items, active, className, itemRef, empty, info, valueProperty, labelProperty, itemProps, children, ...rest }: {
     ref: AnyObject;
+    info?: AnyObject;
     itemRef: AnyObject;
     style?: AnyObject;
     items: AnyObject[];
@@ -10,5 +11,5 @@ export declare const Options: ({ ref, style, items, active, className, itemRef,
     valueProperty?: AnyObject;
     labelProperty?: AnyObject;
     itemProps: (item: AnyObject) => AnyObject;
-    children: (item: AnyObject, label: string) => ReactNode;
+    children: (item: AnyObject, label: string) => React.ReactNode;
 } & KeyValue) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/Select.d.ts

@@ -1,2 +1,10 @@
 import { type SelectProps } from "../types";
-export declare const Select: <T extends unknown = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, groupProperty, labelProperty, valueProperty, multiple, searchable, allowCreate, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Select component for selecting items from a dropdown list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ *
+ * @param {SelectProps<T>} props - The properties for the Select component.
+ * @returns {JSX.Element} The rendered Select component.
+ */
+export declare const Select: <T extends AnyObject = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, infoProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/useSelect.d.ts

@@ -1,23 +1,26 @@
-/// <reference types="react" />
 interface State {
     multiple: boolean;
     emptyValue: AnyObject;
     open: boolean;
     loading: boolean;
     activeIndex: number | null;
+    activeItem: AnyObject;
     selectedIndex: number | null;
     value: AnyObject;
     query?: string;
     items: AnyObject[];
 }
-export declare const useSelect: ({ options, value, autoComplete, multiple, allowCreate, groupProperty, valueProperty, labelProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
+export declare const useSelect: ({ options, value, autoComplete, alwaysOpen, defaultOpen, multiple, allowCreate, groupProperty, valueProperty, labelProperty, sortProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
     value?: AnyObject;
     options?: AnyObject[];
     multiple?: boolean;
+    alwaysOpen?: boolean;
+    defaultOpen?: boolean;
     allowCreate?: boolean;
     groupProperty?: AnyObject;
     valueProperty?: AnyObject;
     labelProperty?: AnyObject;
+    sortProperty?: AnyObject;
     autoComplete?: boolean;
     matcher?: (item: AnyObject, query: string) => boolean;
     createOption?: (query: string) => AnyObject;
@@ -28,17 +31,18 @@ export declare const useSelect: ({ options, value, autoComplete, multiple, allow
     state: State | {
         value: any;
         activeIndex: null;
+        activeItem: null;
         selectedIndex: any;
         multiple: boolean;
         emptyValue: AnyObject;
         open: boolean;
         loading: boolean;
-        query?: string | undefined;
+        query?: string;
         items: AnyObject[];
     };
-    listRef: import("react").MutableRefObject<HTMLElement[]>;
-    focusableRef: import("react").RefObject<HTMLElement>;
-    listContentRef: import("react").MutableRefObject<any[]>;
+    listRef: import("react").RefObject<HTMLElement[]>;
+    focusableRef: import("react").RefObject<HTMLElement | null>;
+    listContentRef: import("react").RefObject<any[]>;
     handleChange: (value?: AnyObject) => void;
     handleRemove: (index?: number) => void;
     handleQuery: (query: string) => void;

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

@@ -1,14 +1,18 @@
-/// <reference types="react" />
 import { type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type ReactElement } from "react";
 export interface InputProps<V = string> extends TestProps {
     /**
      * value
      */
-    value?: V;
+    value?: V | null;
+    /**
+     * default value
+     */
+    defaultValue?: V | null;
     /**
      * change handler
      */
-    onChange?: (value?: V) => void;
+    onChange?: (value: V | null) => void;
     /**
      * on focus event handler
      */
@@ -45,10 +49,13 @@ export interface InputProps<V = string> extends TestProps {
      *
      */
     decorateEnd?: JSX.Element | string | number | boolean;
+    decorateEndShowWhenEmpty?: boolean;
+    decorateEndHideWhenEmpty?: boolean;
     /**
      * info label at bottom
      */
     info?: string;
+    monospace?: boolean;
     /**
      * required
      */
@@ -90,7 +97,15 @@ export interface InputProps<V = string> extends TestProps {
      */
     labelWidth?: string;
 }
-export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<InputProps, "value" | "onChange"> {
+export interface BaseSelectProps<T extends AnyObject = string> {
+    /**
+     * open dropdown by default
+     */
+    defaultOpen?: boolean;
+    /**
+     * hide dropdown handle
+     */
+    hideHandle?: boolean;
     /**
      * list options
      */
@@ -107,6 +122,14 @@ export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<Inpu
      * value property name
      */
     valueProperty?: keyof T;
+    /**
+     * value property name
+     */
+    infoProperty?: keyof T;
+    /**
+     * value property name
+     */
+    sortProperty?: keyof T | true;
     /**
      * searchable list
      */
@@ -115,6 +138,10 @@ export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<Inpu
      * allow create item
      */
     allowCreate?: boolean;
+    /**
+     * empty list display
+     */
+    emptyDisplay?: ReactElement;
     /**
      * create new item object
      */
@@ -132,7 +159,8 @@ export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<Inpu
      */
     matcher?: (option: T, query: string) => boolean;
 }
-export type SelectProps<T> = BaseSelectProps<T> & ({
+type BaseSelectType<T> = BaseSelectProps<T> & RefProp<HTMLInputElement> & Omit<InputProps, "value" | "onChange">;
+export type SelectProps<T> = BaseSelectType<T> & ({
     /**
      * is multiple selection
      */
@@ -167,3 +195,4 @@ export type SelectProps<T> = BaseSelectProps<T> & ({
      */
     onChange?: (value?: string[]) => void;
 });
+export {};

package/dist/types/types/schema.d.ts

@@ -1,59 +1,104 @@
-interface BaseSchemaDef {
+import { type Elements } from "@react-fabric/core/dist/types/types";
+import { type DateLike } from "@react-fabric/date";
+export declare enum DATA_TYPES {
+    TEXT = "text",
+    COLOR = "color",
+    BOOL = "bool",
+    DATE = "date",
+    DATETIME = "datetime",
+    STRING = "string",
+    NUMBER = "number",
+    RANGE = "range",
+    FILE = "file",
+    AVATAR = "avatar",
+    SCHEMA = "schema"
+}
+export declare const SCHEMA_CUSTOM_LIST = "--CUSTOM--";
+interface SingleValue {
+    multiple?: false;
+    minItems?: never;
+    maxItems?: never;
+}
+interface MultipleValue {
+    multiple: true;
+    minItems?: number;
+    maxItems?: number;
+}
+export type ValueType = SingleValue | MultipleValue;
+interface BaseSchema {
     id: string;
     label: string;
     datatype: string;
     required?: boolean;
-    multiple?: boolean;
-    defaultValue?: AnyObject;
 }
-interface SchemaDef extends BaseSchemaDef {
-    datatype: "text" | "color";
+export interface DefaultSchema extends BaseSchema {
+    datatype: DATA_TYPES.TEXT | DATA_TYPES.COLOR;
 }
-interface BooleanSchema extends BaseSchemaDef {
-    datatype: "boolean";
-    defaultValue?: boolean;
+export interface BooleanSchema extends BaseSchema {
+    datatype: DATA_TYPES.BOOL;
 }
-interface StringSchema extends BaseSchemaDef {
-    datatype: "string";
-    options?: string[];
+export interface StringSchema extends BaseSchema {
+    datatype: DATA_TYPES.STRING;
     regex?: string;
-    identifierType?: string;
+    options?: string[];
+    optionList?: string;
+    allowCustom?: boolean;
 }
-interface RangeSchema extends BaseSchemaDef {
-    datatype: "range";
+export interface RangeSchema extends BaseSchema {
+    datatype: DATA_TYPES.RANGE;
     min?: number;
     max?: number;
     step?: number;
-    defaultValue?: [number, number];
 }
-interface NumberSchema extends BaseSchemaDef {
-    datatype: "number";
-    min?: number;
-    max?: number;
-    step?: number;
-    defaultValue?: number;
+export interface DateSchema extends BaseSchema {
+    datatype: DATA_TYPES.DATE | DATA_TYPES.DATETIME;
+    min?: DateLike;
+    max?: DateLike;
 }
-interface DecimalSchema extends BaseSchemaDef {
-    datatype: "decimal";
+export interface NumberSchema extends BaseSchema {
+    datatype: DATA_TYPES.NUMBER;
     min?: number;
     max?: number;
     step?: number;
-    defaultValue?: number;
 }
-export interface FileSchema extends BaseSchemaDef {
-    datatype: "file";
+export interface FileSchema extends BaseSchema {
+    datatype: DATA_TYPES.FILE;
     accept?: string;
 }
-export interface AvatarSchema extends BaseSchemaDef {
-    datatype: "avatar";
+export interface AvatarSchema extends BaseSchema {
+    datatype: DATA_TYPES.AVATAR;
     multiple?: false;
 }
-export type SchemaType = SchemaDef | BooleanSchema | StringSchema | RangeSchema | NumberSchema | DecimalSchema | FileSchema | AvatarSchema;
-export interface ChildSchema extends BaseSchemaDef {
-    datatype: "schema";
+export type SchemaType = (DefaultSchema & ValueType) | (BooleanSchema & ValueType) | (StringSchema & ValueType) | (RangeSchema & ValueType) | (DateSchema & ValueType) | (NumberSchema & ValueType) | (FileSchema & ValueType) | (AvatarSchema & ValueType);
+export interface ChildSchema extends BaseSchema {
+    datatype: DATA_TYPES.SCHEMA;
     inline?: boolean;
     schema: SchemaType[];
-    defaultValue?: never;
 }
-export type FormSchema = SchemaType | ChildSchema;
+export type SchemaDef = SchemaType | (ChildSchema & ValueType);
+export type FormSchema = SchemaDef[];
+export interface SchemaEditorProps {
+    /**
+     * default form schema
+     */
+    schemaDef: FormSchema;
+    /**
+     * is dynamic schema (allow add/remove)
+     */
+    dynamic?: boolean;
+    /**
+     * acceptable list of data types
+     */
+    acceptableTypes?: DATA_TYPES[];
+    /**
+     * available option lists in application
+     */
+    optionLists?: string[];
+    /**
+     * footer actions
+     */
+    children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
+    onChange?: (schema: FormSchema) => void;
+    onSubmit?: (schema: FormSchema) => void;
+}
 export {};

package/dist/types/utils/eventHandlers.d.ts

@@ -1,9 +1,9 @@
 import { type KeyboardEvent, type MouseEvent } from "react";
 /** ***************** common handler for enter press *******************/
-export declare const handleEnter: (callback?: (e: KeyboardEvent) => void, { stopPropagation, preventDefault, }?: {
+export declare const useHandleEnter: (callback?: (e: KeyboardEvent) => void, { stopPropagation, preventDefault, }?: {
     stopPropagation?: boolean;
     preventDefault?: boolean;
-}) => (e: KeyboardEvent) => false | undefined;
+}) => (e: KeyboardEvent<HTMLInputElement>) => false | undefined;
 /** ***************** common handler for mouse primary click *******************/
 export declare const handleClick: (callback?: (e: MouseEvent) => void, { stopPropagation, preventDefault, }?: {
     stopPropagation?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.60",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -11,9 +11,11 @@
   "types": "dist/types/index.d.ts",
   "directories": {
     "src": "src",
+    "styles": "css",
     "test": "tests"
   },
   "files": [
+    "css",
     "src",
     "dist"
   ],
@@ -33,32 +35,32 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/react": "0.26.24",
-    "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.6",
-    "@react-fabric/utilities": "^1.0.0-beta.6",
-    "classnames": "^2.5.1",
-    "color": "^4.2.3",
-    "react-color": "^2.19.3",
-    "react-hook-form": "^7.52.1"
+    "@dnd-kit/core": "~6.3.1",
+    "@dnd-kit/modifiers": "~9.0.0",
+    "@dnd-kit/sortable": "~10.0.0",
+    "@dnd-kit/utilities": "~3.2.2",
+    "@floating-ui/react": "~0.27.16",
+    "@hookform/resolvers": "~5.2.2",
+    "@react-fabric/core": "^1.0.0-beta.60",
+    "@react-fabric/date": "^1.0.0-beta.60",
+    "@react-fabric/utilities": "^1.0.0-beta.60",
+    "classnames": "~2.5.1",
+    "color": "~5.0.2",
+    "react-color": "~2.19.3",
+    "react-hook-form": "~7.65.0"
   },
   "peerDependencies": {
-    "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-i18next": "^15.0.2"
+    "i18next": "~25.6.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-i18next": "~16.2.1"
   },
   "devDependencies": {
-    "@types/axios": "^0.14.0",
-    "@types/react-color": "^3.0.12"
+    "@types/react-color": "~3.0.13"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "21167df13cedeae8b365e87b9bab6d7401298cb6"
+  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
 }

package/src/builder/FileField.tsx

@@ -21,28 +21,41 @@
  * 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 } from "@react-fabric/core";
-import { FileUtil, Format } from "@react-fabric/utilities";
+import {
+  Button,
+  CoreIcons,
+  Icon,
+  ProgressBar,
+  Tooltip,
+} from "@react-fabric/core";
+import { FileUtil, Format, isString } from "@react-fabric/utilities";
 import { Fragment } from "react";
-import { type UploadHandler, useFileUploader } from "../hooks/useFileUploader";
+import { useTranslation } from "react-i18next";
+import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
 import { Field } from "../input/Field";
 import { HiddenInput } from "../input/Hidden";
-import { type FileSchema } from "../types/schema";
+import { type FileSchema, type ValueType } from "../types/schema";
 
 export const FileField = ({
   uploadHandler,
   inline,
   label,
   accept,
-  multiple = false,
   value,
+  fileUrl,
+  multiple,
+  invalid,
+  error,
   ...rest
-}: Partial<FileSchema> & {
+}: Partial<FileSchema & ValueType> & {
   value?: AnyObject;
   inline?: boolean;
+  invalid?: boolean;
+  error?: AnyObject;
   fileUrl?: (path: string) => string;
   uploadHandler: UploadHandler;
 }) => {
+  const { t } = useTranslation();
   const { pending, files, list, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
     value,
@@ -51,29 +64,48 @@ export const FileField = ({
 
   return (
     <Fragment>
-      <Field plain inline={inline} label={label} className="inline-block">
+      <Field plain inline={inline} label={label}>
         <HiddenInput hiddenValue={multiple ? list : list?.[0]} {...rest} />
-        <span>
-          <Button
-            badge={pending > 0 ? `${pending}` : undefined}
-            data-ref="filebtn"
-          >
-            <Fragment>
-              <span>Add file</span>
-              <input
-                type="file"
-                accept={accept}
-                multiple={multiple}
-                className="absolute inset-0 opacity-0 z-5"
-                onChange={(e) => [
-                  upload(e.target.files),
-                  (e.target.value = ""),
-                ]}
-              />
-            </Fragment>
-          </Button>
-        </span>
       </Field>
+      <Tooltip
+        color="danger-200"
+        content={
+          isString(error)
+            ? `${error}`
+            : error &&
+              (t(
+                error?.key,
+                error.values
+                  ? {
+                      ...error?.values,
+                      label: t(
+                        error.values?.label ?? "form:badkey",
+                        error.values?.path,
+                      ),
+                    }
+                  : {},
+              ) as string)
+        }
+        disabled={!error}
+      >
+        <Button
+          badge={pending > 0 ? `${pending}` : undefined}
+          color={error ? "danger" : undefined}
+          variant={error ? "soft" : undefined}
+          data-ref="filebtn"
+        >
+          <Fragment>
+            <span>Add file</span>
+            <input
+              type="file"
+              accept={accept}
+              multiple={multiple}
+              className="absolute inset-0 opacity-0 z-5"
+              onChange={(e) => [upload(e.target.files), (e.target.value = "")]}
+            />
+          </Fragment>
+        </Button>
+      </Tooltip>
       <br />
       <div className="bg-alternate">
         {files.map((file, idx) => (
@@ -92,18 +124,18 @@ export const FileField = ({
               </div>
               {file.progress && (
                 <Icon
-                  icon="mdi mdi-stop-circle"
+                  icon={CoreIcons.stop}
                   bg="danger"
                   color="white"
                   size="sm"
-                  className="p-[2px]"
+                  className="p-0.5"
                   aria-label="abort"
                   onClick={() => file.abort?.()}
                 />
               )}
               {!file.progress && (
                 <Icon
-                  icon="mdi mdi-trash-can"
+                  icon={CoreIcons.trash}
                   color="danger"
                   size="sm"
                   aria-label="remove"