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

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

@@ -1,5 +1,4 @@
-import { type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
-import { type ReactElement } from "react";
+import { type NestedKeys, type ReactElement, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 export interface InputProps<V = string> extends TestProps {
     /**
      * value
@@ -113,23 +112,23 @@ export interface BaseSelectProps<T extends AnyObject = string> {
     /**
      * group by property name
      */
-    groupProperty?: keyof T;
+    groupProperty?: NestedKeys<T>;
     /**
      * label property name
      */
-    labelProperty?: keyof T;
+    labelProperty?: NestedKeys<T>;
     /**
      * value property name
      */
-    valueProperty?: keyof T;
+    valueProperty?: NestedKeys<T>;
     /**
      * value property name
      */
-    infoProperty?: keyof T;
+    infoProperty?: NestedKeys<T>;
     /**
      * value property name
      */
-    sortProperty?: keyof T | true;
+    sortProperty?: NestedKeys<T> | true;
     /**
      * searchable list
      */
@@ -153,7 +152,7 @@ export interface BaseSelectProps<T extends AnyObject = string> {
     /**
      * item renderer
      */
-    renderer?: (option: T) => React.ReactNode;
+    renderer?: (option: T) => ReactElement;
     /**
      * item matcher
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.60",
+  "version": "1.0.0-beta.61",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "@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",
+    "@react-fabric/core": "^1.0.0-beta.61",
+    "@react-fabric/date": "^1.0.0-beta.61",
+    "@react-fabric/utilities": "^1.0.0-beta.61",
     "classnames": "~2.5.1",
     "color": "~5.0.2",
     "react-color": "~2.19.3",
@@ -62,5 +62,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
+  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
 }

package/src/builder/FileField.tsx

@@ -21,13 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  Button,
-  CoreIcons,
-  Icon,
-  ProgressBar,
-  Tooltip,
-} from "@react-fabric/core";
+import { Button, Icon, ProgressBar, Tooltip } from "@react-fabric/core";
 import { FileUtil, Format, isString } from "@react-fabric/utilities";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
@@ -124,7 +118,7 @@ export const FileField = ({
               </div>
               {file.progress && (
                 <Icon
-                  icon={CoreIcons.stop}
+                  icon="icon-[mdi--stop]"
                   bg="danger"
                   color="white"
                   size="sm"
@@ -135,7 +129,7 @@ export const FileField = ({
               )}
               {!file.progress && (
                 <Icon
-                  icon={CoreIcons.trash}
+                  icon="icon-[mdi--trash-can-outline]"
                   color="danger"
                   size="sm"
                   aria-label="remove"

package/src/builder/components/AddSchemaFields.tsx

@@ -21,6 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { yupResolver } from "@hookform/resolvers/yup";
 import {
   Button,
   Content,
@@ -51,7 +52,7 @@ export const AddSchemaFields = (props: ModalProps) => {
   return (
     <Modal {...props}>
       <Form
-        schema={fieldSchema}
+        resolver={yupResolver(fieldSchema)}
         defaultValues={{ fields: [" "] }}
         onSubmit={handleSubmit}
       >

package/src/builder/components/SchemaArrayForm.tsx

@@ -24,13 +24,7 @@
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext } from "@dnd-kit/sortable";
-import {
-  Button,
-  Content,
-  CoreIcons,
-  Header,
-  useOverlayService,
-} from "@react-fabric/core";
+import { Button, Content, Header, useOverlayService } from "@react-fabric/core";
 import { isArray } from "@react-fabric/utilities";
 import { useCallback, useState } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -118,7 +112,7 @@ export const SchemaArrayForm = ({
           <Button
             size="sm"
             variant="link"
-            icon={CoreIcons.insert}
+            icon="icon-[mdi--plus-circle-outline]"
             aria-label="add field"
             onClick={handleAdd}
           />
@@ -126,14 +120,14 @@ export const SchemaArrayForm = ({
         <Button
           size="sm"
           variant="link"
-          icon={CoreIcons.colapseAllVar}
+          icon="icon-[mdi--arrow-collapse-vertical]"
           aria-label="collapse all"
           onClick={() => setDefaultOpen(false)}
         />
         <Button
           size="sm"
           variant="link"
-          icon={CoreIcons.expandAllVar}
+          icon="icon-[mdi--arrow-expand-vertical]"
           aria-label="expand all"
           onClick={() => setDefaultOpen(true)}
         />

package/src/builder/components/SchemaField.tsx

@@ -27,7 +27,6 @@ import {
   Button,
   Collapsable,
   Content,
-  CoreIcons,
   Footer,
   Modal,
   type ModalProps,
@@ -222,7 +221,7 @@ export const SchemaField = ({
               variant="link"
               aria-label="Delete"
               stopPropagation
-              icon={CoreIcons.trash}
+              icon="icon-[mdi--trash-can-outline]"
               onClick={onRemove}
               className="invisible group-hover/field:visible"
             />
@@ -277,7 +276,7 @@ export const SchemaField = ({
                 </Controller>
                 {customOptions && (
                   <Button
-                    icon={CoreIcons.list}
+                    icon="icon-[mdi--list-box-outline]"
                     aria-label="Custom options"
                     onClick={() => {
                       void openOptionModal({ title: `${id} Options` });

package/src/form/Form.tsx

@@ -21,9 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { yupResolver } from "@hookform/resolvers/yup";
 import { useDebounce } from "@react-fabric/core";
-import { EMPTY_OBJECT, type yup } from "@react-fabric/utilities";
+import { EMPTY_OBJECT } from "@react-fabric/utilities";
 import {
   useCallback,
   useEffect,
@@ -35,12 +34,13 @@ import {
 } from "react";
 import {
   FormProvider,
-  type Path,
   useFormContext,
   useForm as useFormHook,
   useWatch,
   type DefaultValues,
   type FormState,
+  type Path,
+  type Resolver,
 } from "react-hook-form";
 
 type NestedKeyOf<T extends object> = {
@@ -63,9 +63,10 @@ export interface FormRef<K extends KeyValue> {
 export interface FormProps<K extends KeyValue = KeyValue> {
   formRef?: Ref<FormRef<K>>;
   /**
-   * form data schema
+   * react-hook-form resolver for validation
+   * @see {@link https://react-hook-form.com/ts#Resolver}
    */
-  schema?: yup.ObjectSchema<K>;
+  resolver?: Resolver<K>;
   /**
    * default data values
    */
@@ -94,10 +95,7 @@ const DEFAULT_SUBMIT = () => undefined;
  * ```jsx
  * <Form
  *   formRef={formRef}
- *   schema={yup.object().shape({
- *     name: yup.string().required("Name is required"),
- *     email: yup.string().email("Invalid email").required("Email is required"),
- *   })}
+ *   resolver={hookformResolver(schema)}
  *   defaultValues={{ name: "", email: "" }}
  *   onSubmit={(values) => {
  *     console.log("Form submitted with values:", values);
@@ -115,7 +113,7 @@ const DEFAULT_SUBMIT = () => undefined;
  */
 export const Form = <K extends KeyValue>({
   formRef,
-  schema,
+  resolver,
   children,
   defaultValues = EMPTY_OBJECT as K,
   onSubmit = DEFAULT_SUBMIT,
@@ -125,7 +123,7 @@ export const Form = <K extends KeyValue>({
   const ref = useRef<HTMLFormElement>(null);
   const form = useFormHook<K>({
     shouldFocusError: true,
-    resolver: schema && (yupResolver(schema) as AnyObject),
+    resolver,
     defaultValues: defaultValues as DefaultValues<K>,
   });
 
@@ -174,6 +172,7 @@ export const Form = <K extends KeyValue>({
 
   const onInvalid = useCallback((_: AnyObject, e: AnyObject) => {
     const el = e.target;
+    console.log("Invalid:", _, e);
     setTimeout(
       () =>
         el

package/src/hooks/useFormBuilder.tsx

@@ -21,6 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { yupResolver } from "@hookform/resolvers/yup";
 import { EmptyContent } from "@react-fabric/core";
 import { isEmpty, isNil, yup } from "@react-fabric/utilities";
 import { Fragment, useMemo } from "react";
@@ -135,12 +136,18 @@ export const useFormBuilder = <T extends AnyObject = string>(
     () => schema.filter?.((schm) => !!schm.id) ?? [],
     [schema],
   );
-  const schemaDef = yup.object(
-    Object.fromEntries(
-      filteredSchema.map((field) => [field.id, makeYupField(field)]),
-    ),
+  const schemaDef = useMemo(
+    () =>
+      yup.object(
+        Object.fromEntries(
+          filteredSchema.map((field) => [field.id, makeYupField(field)]),
+        ),
+      ),
+    [filteredSchema],
   );
 
+  const resolver = useMemo(() => yupResolver(schemaDef), [schemaDef]);
+
   const formDef = (
     <Fragment>
       {filteredSchema.map((field, idx) => (
@@ -166,6 +173,7 @@ export const useFormBuilder = <T extends AnyObject = string>(
 
   return {
     formDef,
+    resolver,
     schemaDef,
   };
 };

package/src/input/ArrayInput.tsx

@@ -23,13 +23,7 @@
 
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import {
-  Button,
-  cloneChildren,
-  CoreIcons,
-  Icon,
-  Tooltip,
-} from "@react-fabric/core";
+import { Button, cloneChildren, Icon, Tooltip } from "@react-fabric/core";
 import { isFalse, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
@@ -328,7 +322,7 @@ export const ArrayInput = <T extends AnyObject = string>({
           >
             <Icon
               className={isDragging ? "cursor-grabbing" : "cursor-grab"}
-              icon={CoreIcons.dragHandle}
+              icon="icon-[mdi--drag-vertical]"
               {...attributes}
               {...listeners}
             />
@@ -369,7 +363,7 @@ export const ArrayInput = <T extends AnyObject = string>({
           <Button
             size="sm"
             aria-label="Add item"
-            icon={CoreIcons.insert}
+            icon="icon-[mdi--plus-circle-outline]"
             onClick={() => handleAdd(onAdd?.())}
             data-invalid={!!error}
             disabled={!!disabled || readOnly || fields.length > maxItems}
@@ -443,7 +437,7 @@ export const ArrayInput = <T extends AnyObject = string>({
               {canRemove !== false && (
                 <Button
                   aria-label="Remove item"
-                  icon={CoreIcons.remove}
+                  icon="icon-[mdi--minus-circle-outline]"
                   color="danger"
                   variant="link"
                   className="self-end"

package/src/input/AvatarInput.tsx

@@ -21,13 +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 { Avatar, CoreIcons, Icon, ProgressBar } from "@react-fabric/core";
+import { Avatar, Icon, ProgressBar } from "@react-fabric/core";
+import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
 import { useEffect, useState } from "react";
 import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
 import { HiddenInput } from "./Hidden";
-import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
-import classNames from "classnames";
 
 export interface Props extends RefProp {
   /**
@@ -168,7 +168,7 @@ export const AvatarInput = ({
             )}
             {file.progress && (
               <Icon
-                icon={CoreIcons.stop}
+                icon="icon-[mdi--stop]"
                 bg="danger"
                 color="white"
                 size="sm"
@@ -179,7 +179,7 @@ export const AvatarInput = ({
             )}
             {!file.progress && (
               <Icon
-                icon={CoreIcons.trash}
+                icon="icon-[mdi--trash-can-outline]"
                 color="danger"
                 size="sm"
                 className="flex-content"

package/src/input/Checkbox.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import {
@@ -111,10 +111,13 @@ export const Checkbox = ({
   const deferred = useDeferredValue(!!checked);
 
   const iconOn = useMemo(
-    () => iconChecked ?? icon ?? CoreIcons.checkboxOn,
+    () => iconChecked ?? icon ?? "icon-[mdi--checkbox-marked]",
     [icon, iconChecked],
   );
-  const iconOff = useMemo(() => icon ?? CoreIcons.checkboxOff, [icon]);
+  const iconOff = useMemo(
+    () => icon ?? "icon-[mdi--checkbox-blank-outline]",
+    [icon],
+  );
 
   useEffect(() => {
     setActualValue(deferred);

package/src/input/ColorInput.tsx

@@ -33,7 +33,7 @@ import {
   useFloating,
   useInteractions,
 } from "@floating-ui/react";
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import {
   startTransition,
@@ -168,11 +168,7 @@ export const ColorInput = ({
           }}
         >
           {!actualValue && (
-            <Icon
-              size="md"
-              className="text-muted"
-              icon={CoreIcons.colorSwatch}
-            />
+            <Icon size="md" className="text-muted" icon="icon-[mdi--palette]" />
           )}
         </div>
       </button>
@@ -203,7 +199,7 @@ export const ColorInput = ({
       {!disabled && showPicker && (
         <Icon
           className="flex-content p-1"
-          icon={CoreIcons.colorPicker}
+          icon="icon-[mdi--eyedropper]"
           onClick={() =>
             (window as AnyObject).EyeDropper &&
             new (window as AnyObject).EyeDropper()

package/src/input/File.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import {
   FileUtil,
@@ -181,7 +181,7 @@ export const FileInput = ({
                   </span>
                   <Icon
                     className="cursor-pointer opacity-30 hover:opacity-80"
-                    icon={CoreIcons.close}
+                    icon="icon-[mdi--close]"
                     onClick={() => {
                       removeFile(idx);
                     }}

package/src/input/Password.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, CoreIcons, Tooltip } from "@react-fabric/core";
+import { Button, Tooltip } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import {
@@ -114,7 +114,9 @@ export const Password = ({
               color="warning"
               variant="link"
               aria-label={t(show ? "password.hide" : "password.show")}
-              icon={show ? CoreIcons.eyeOff : CoreIcons.eye}
+              icon={
+                show ? "icon-[mdi--eye-off-outline]" : "icon-[mdi--eye-outline]"
+              }
               onClick={() => setShow(!show)}
             />
           </Tooltip>

package/src/input/Radio.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import { useCallback, useMemo, type ChangeEvent } from "react";
@@ -93,10 +93,10 @@ export const Radio = ({
   ...rest
 }: RadioProps) => {
   const iconOn = useMemo(
-    () => iconChecked ?? icon ?? CoreIcons.radioOn,
+    () => iconChecked ?? icon ?? "icon-[mdi--radiobox-marked]",
     [icon, iconChecked],
   );
-  const iconOff = useMemo(() => icon ?? CoreIcons.radioOff, [icon]);
+  const iconOff = useMemo(() => icon ?? "icon-[mdi--radiobox-blank]", [icon]);
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {

package/src/input/Search.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, CoreIcons, Icon, useDebounce } from "@react-fabric/core";
+import { Button, Icon, useDebounce } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import {
   Fragment,
@@ -129,7 +129,7 @@ export const Search = ({
       actionButton={
         <Fragment>
           {searching && (
-            <Icon className="p-2" icon={CoreIcons.spinner} animate="spin" />
+            <Icon className="p-2" icon="icon-[svg-spinners--eclipse]" />
           )}
           {!searching && !hideHandle && (
             <Button
@@ -137,7 +137,7 @@ export const Search = ({
               variant="link"
               aria-label="search"
               disabled={!actualValue}
-              icon={CoreIcons.search}
+              icon="icon-[mdi--magnify]"
               onClick={handleSearch}
             />
           )}

package/src/internal/ErrorIcon.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon, Tooltip } from "@react-fabric/core";
+import { Icon, Tooltip } from "@react-fabric/core";
 import { isString } from "@react-fabric/utilities";
 import { useTranslation } from "react-i18next";
 
@@ -53,7 +53,7 @@ export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
         <Icon
           className="flex-content first:ms-2 self-center"
           color="danger"
-          icon={CoreIcons.alert}
+          icon="icon-[mdi--alert-circle-outline]"
         />
       </Tooltip>
     )

package/src/internal/InputWrapper.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
@@ -147,7 +147,7 @@ export const InputWrapper = ({
       {children}
       {allowClear && showClear && (
         <Icon
-          icon={CoreIcons.close}
+          icon="icon-[mdi--close]"
           onClick={handleClear}
           className={classNames(
             "text-tint-500 hover:text-tint-700 p-1 z-1 flex-content",
@@ -185,7 +185,11 @@ export const InputWrapper = ({
       {textareaExpandable && (
         <Icon
           onClick={() => setExpanded(!isExpanded)}
-          icon={isExpanded ? CoreIcons.arrowCollapse : CoreIcons.arrowExpand}
+          icon={
+            isExpanded
+              ? "icon-[mdi--arrow-collapse]"
+              : "icon-[mdi--arrow-expand]"
+          }
           className="hidden group-hover:block absolute top-0 end-0 bg-base hover:bg-tint-200 p-1 opacity-65 rounded-capped"
         />
       )}
@@ -198,7 +202,7 @@ export const InputWrapper = ({
         ref={elRef}
         className={classNames(
           "relative min-h-8 flex flex-col flex-nowrap",
-          width ? "flex-auto" : "flex-1",
+          width ? "flex-content" : "flex-1",
         )}
         style={{ width, flexBasis: width }}
       >

package/src/select/AutoComplete.tsx

@@ -34,7 +34,7 @@ import {
   useListNavigation,
   useTypeahead,
 } from "@floating-ui/react";
-import { Chip, CoreIcons, Icon } from "@react-fabric/core";
+import { Chip, Icon } from "@react-fabric/core";
 import { isArray, isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useCallback, useId, useLayoutEffect, useMemo, useRef } from "react";
@@ -323,11 +323,10 @@ export const AutoComplete = ({
       </div>
       {state.loading && (
         <Icon
-          animate="spin"
           className={classNames(
             "flex-content p-2 z-0 order-9 text-muted pointer-events-none",
           )}
-          icon={CoreIcons.spinner}
+          icon="icon-[svg-spinners--eclipse]"
         />
       )}
       {state.open && !state.loading && (