@react-fabric/form 1.0.0-beta.35 → 1.0.0-beta.37

package/src/builder/components/SchemaField.tsx

@@ -168,43 +168,46 @@ export const SchemaField = ({
     }, 10);
   }, []);
 
-  const handleTypeChange = useCallback((type: DATA_TYPES) => {
-    if (type) {
-      const modelRef = getModel();
-      let reset = {
-        datatype: type,
-        id: field,
-        label: modelRef.label,
-        defaultValue: modelRef.defaultValue,
-        required: modelRef.required,
-        multiple: type === DATA_TYPES.AVATAR ? false : modelRef.multiple,
-        minItems: modelRef.minItems,
-        maxItems: modelRef.maxItems,
-      } as DefaultSchema & ValueType;
-      if (type === DATA_TYPES.STRING) {
-        reset = Object.assign(reset, {
-          optionList: modelRef.optionList,
-          options: modelRef.options,
-          regex: modelRef.regex,
-        } as StringSchema);
-      } else if (type === DATA_TYPES.DATE) {
-        reset = Object.assign(reset, {
-          type: "date",
-        } as DateSchema);
-      } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
-        reset = Object.assign(reset, {
-          min: modelRef.min,
-          max: modelRef.max,
-          step: modelRef.step,
-        } as NumberSchema);
+  const handleTypeChange = useCallback(
+    (type: DATA_TYPES) => {
+      if (type) {
+        const modelRef = getModel();
+        let reset = {
+          datatype: type,
+          id,
+          label: modelRef.label,
+          defaultValue: modelRef.defaultValue,
+          required: modelRef.required,
+          multiple: type === DATA_TYPES.AVATAR ? false : modelRef.multiple,
+          minItems: modelRef.minItems,
+          maxItems: modelRef.maxItems,
+        } as DefaultSchema & ValueType;
+        if (type === DATA_TYPES.STRING) {
+          reset = Object.assign(reset, {
+            optionList: modelRef.optionList,
+            options: modelRef.options,
+            regex: modelRef.regex,
+          } as StringSchema);
+        } else if (type === DATA_TYPES.DATE) {
+          reset = Object.assign(reset, {
+            type: "date",
+          } as DateSchema);
+        } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
+          reset = Object.assign(reset, {
+            min: modelRef.min,
+            max: modelRef.max,
+            step: modelRef.step,
+          } as NumberSchema);
+        }
+        if (type === DATA_TYPES.AVATAR) {
+          setMultiple(false);
+        }
+        onTypeChange(reset);
+        setType(type);
       }
-      if (type === DATA_TYPES.AVATAR) {
-        setMultiple(false);
-      }
-      onTypeChange(reset);
-      setType(type);
-    }
-  }, []);
+    },
+    [id],
+  );
 
   return (
     <SortableItem id={fieldId} className="flex flex-nowrap gap-1 group/field">
@@ -276,7 +279,7 @@ export const SchemaField = ({
                     icon={CoreIcons.list}
                     aria-label="Custom options"
                     onClick={() => {
-                      void openOptionModal();
+                      void openOptionModal({ title: `${id} Options` });
                     }}
                   />
                 )}

package/src/input/ArrayInput.tsx

@@ -44,7 +44,6 @@ import {
 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";
@@ -257,7 +256,7 @@ export const ArrayInput = ({
     () => (
       <div className="flex justify-end">
         <Tooltip
-          color="danger"
+          color="danger-200"
           content={
             isString(error)
               ? `${error}`
@@ -282,7 +281,7 @@ export const ArrayInput = ({
             onClick={() => handleAdd(onAdd?.())}
             data-invalid={!!error}
             disabled={!!disabled || readOnly || fields.length > maxItems}
-            className={classNames(classes.addButton, "me-10")}
+            className={classNames("fabric-addButton", "me-10")}
           >
             {addLabel ?? t("addArray")}
           </Button>
@@ -293,7 +292,7 @@ export const ArrayInput = ({
   );
 
   return (
-    <div className={classes.arrayInput}>
+    <div className={"fabric-arrayInput"}>
       <FieldWrapper
         {...rest}
         appendLabel={

package/src/input/AvatarInput.tsx

@@ -99,7 +99,7 @@ export const AvatarInput = ({
     <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">
+        <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

@@ -151,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"}

package/src/input/ColorInput.tsx

@@ -127,7 +127,7 @@ export const ColorInput = ({
       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",
+        !noOutline && "bg-(--fabric-input) outline overflow-hidden",
       )}
     >
       {decorateStart && (

package/src/input/ColorPicker.tsx

@@ -32,7 +32,6 @@ import {
   type FC,
 } from "react";
 import { SketchPicker } from "react-color";
-import classes from "./ColorPicker.module.css";
 
 export interface ColorProps {
   /**
@@ -130,7 +129,7 @@ export const ColorPicker: FC<ColorProps> = memo(
     return (
       <SketchPicker
         width="16rem"
-        className={classes.colorPicker}
+        className={"fabric-colorPicker"}
         styles={
           {
             default: {

package/src/input/Field.tsx

@@ -28,7 +28,6 @@ import {
 } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import { cloneElement } from "react";
-import classes from "../internal/Field.module.css";
 import { FieldWrapper } from "../internal/FieldWrapper";
 
 export interface FieldProps extends ChildrenProp, CssProp {
@@ -84,7 +83,7 @@ export const Field = ({
     <FieldWrapper {...rest}>
       <div
         className={classNames(
-          classes.fieldGroup,
+          "fabric-fieldGroup",
           !plain && !noOutline && "outline",
           !plain && "bg-base",
           plain && "flex-wrap",

package/src/input/File.tsx

@@ -44,7 +44,6 @@ import {
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
 import { handleEnter } from "../utils";
-import classes from "./File.module.css";
 
 export interface FileInputProps
   extends InputProps<AnyObject>,
@@ -195,10 +194,8 @@ export const FileInput = ({
       <input
         className={classNames(
           "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
-          classes.fileInput,
-          isArray(actualValue) &&
-            actualValue?.length &&
-            "text-[var(--fabric-bg)]",
+          "fabric-fileInput",
+          isArray(actualValue) && actualValue?.length && "text-(--fabric-bg)",
         )}
         aria-invalid={invalid}
         aria-disabled={disabled}

package/src/input/Radio.tsx

@@ -126,7 +126,7 @@ export const Radio = ({
       <Icon
         className={classNames(
           "p-0.5 hidden peer-checked:inline-block",
-          icon && !iconChecked && "bg-primary-500 text-white",
+          icon && !iconChecked && "bg-primary-500 text-white!",
         )}
         color={invalid ? "danger" : "primary"}
         size="1.25em"

package/src/internal/ErrorIcon.tsx

@@ -48,7 +48,7 @@ export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
               ) as string)
         }
         placement="bottom"
-        color="danger"
+        color="danger-200"
       >
         <Icon
           className="flex-content first:ms-2 self-center"

package/src/internal/FieldWrapper.tsx

@@ -22,7 +22,6 @@
  */
 
 import classNames from "classnames";
-import classes from "./Field.module.css";
 
 export const FieldWrapper = ({
   label,
@@ -41,7 +40,7 @@ export const FieldWrapper = ({
   return (
     <div
       className={classNames(
-        classes.fieldWrapper,
+        "fabric-fieldWrapper",
         className,
         inline ? "flex flex-nowrap gap-1" : "block",
       )}

package/src/internal/InputWrapper.tsx

@@ -34,7 +34,6 @@ import {
 } from "react";
 import { Fragment } from "react/jsx-runtime";
 import { ErrorIcon } from "./ErrorIcon";
-import classes from "./Field.module.css";
 import { FieldWrapper } from "./FieldWrapper";
 
 export const InputWrapper = ({
@@ -104,11 +103,11 @@ export const InputWrapper = ({
       role="none"
       ref={wrapperRef}
       className={classNames(
-        classes.inputWrapper,
-        invalid && classes.invalidWrapper,
+        "fabric-inputWrapper",
+        invalid && "fabric-invalidWrapper",
         !noOutline &&
           !noBorder &&
-          "bg-[var(--fabric-input)] outline overflow-hidden",
+          "bg-(--fabric-input) outline overflow-hidden",
         "flex flex-nowrap items-center flex-1",
         textarea ? "rounded-capped group" : "rounded",
         isExpanded
@@ -129,7 +128,7 @@ export const InputWrapper = ({
         <div
           onClickCapture={doFocus}
           className={classNames(
-            classes.decorate,
+            "fabric-decorate",
             "text-muted leading-none flex-content",
             isString(decorateStart) && "px-1",
           )}
@@ -145,7 +144,7 @@ export const InputWrapper = ({
           onClick={handleClear}
           className={classNames(
             "text-tint-500 hover:text-tint-700 p-1 z-1 flex-content",
-            classes.inputClear,
+            "fabric-inputClear",
             textarea && "self-start mt-1 me-1",
           )}
         />
@@ -154,7 +153,7 @@ export const InputWrapper = ({
         <div
           onClickCapture={doFocus}
           className={classNames(
-            classes.decorate,
+            "fabric-decorate",
             "text-muted leading-none flex-content",
             isString(decorateEnd) && "px-1",
             decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden",

package/src/select/AutoComplete.tsx

@@ -328,7 +328,7 @@ export const AutoComplete = ({
           >
             <Options
               ref={refs.setFloating}
-              className="outline shadow-lg max-h-[40vh] z-[var(--z-popover)]"
+              className="outline shadow-lg max-h-[40vh] z-(--z-popover)"
               style={{
                 width: refs.reference.current?.getBoundingClientRect().width,
                 ...floatingStyles,

package/src/select/Select.tsx

@@ -330,7 +330,7 @@ export const Select = <T extends AnyObject = string>({
           >
             <Options
               ref={refs.setFloating}
-              className="outline shadow-lg max-h-[40vh] z-[var(--z-popover)]"
+              className="outline shadow-lg max-h-[40vh] z-(--z-popover)"
               style={{
                 width: refs.reference.current?.getBoundingClientRect().width,
                 ...floatingStyles,

package/src/types/schema.ts

@@ -150,5 +150,6 @@ export interface SchemaEditorProps {
    */
   children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
 
-  onChange: (schema: FormSchema) => void;
+  onChange?: (schema: FormSchema) => void;
+  onSubmit?: (schema: FormSchema) => void;
 }

package/dist/cjs/input/ArrayInput.module.css

@@ -1 +0,0 @@
-@layer var{.arrayInput{& [data-ref=fieldWrapper]{flex:1 1 0%}& .addButton :global(.buttonInner){color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}}

package/dist/cjs/input/ColorPicker.module.css

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

package/dist/cjs/input/File.module.css

@@ -1 +0,0 @@
-@layer comp{.fileInput{&::-webkit-file-upload-button{background-color:theme(backgroundColor.primary.500);border:0;border-radius:theme(borderRadius.DEFAULT);color:theme(textColor.white);cursor:pointer;opacity:.8;padding-block:0;&:hover{opacity:.9}}&[aria-invalid=true]::-webkit-file-upload-button{background-color:theme(backgroundColor.danger.500)}&:disabled::-webkit-file-upload-button{background-color:theme(backgroundColor.muted);pointer-events:none}&[readOnly]{pointer-events:none}}}

package/dist/cjs/internal/Field.module.css

@@ -1 +0,0 @@
-@layer comp{}@layer var{.inputWrapper{&:after{inset-inline:50%;transition:all .3s;transition-delay:.1s}& .decorate:has([data-ref=button]){align-self:stretch;display:flex}&:has(input[disabled],textarea[disabled]){background-color:theme(colors.tint.50);cursor:not-allowed;& input,& textarea{cursor:not-allowed}}&:focus-within,&:has([data-open=true]){background-color:var(--fabric-input-focus);outline-color:var(--primary);z-index:1;&:not(:has([aria-readonly=true]:not([hidden]))):after{inset-inline:0}}&:global(.fixed){box-shadow:0 0 2rem .5rem var(--fabric-shadow)}& input,& textarea{max-width:100%}&>input[type=number]+.inputClear{margin-inline:-3rem 0}& input::-ms-clear,& select::-ms-clear,& textarea::-ms-clear{display:none}& input[type=search]::-webkit-search-cancel-button{display:none}& input[type=password]:not(:placeholder-shown){font-family:caption;letter-spacing:2px}& input[type=date]::-webkit-calendar-picker-indicator,& input[type=datetime-local]::-webkit-calendar-picker-indicator{appearance:none;display:none}& input[type=date]:global(.empty)::-webkit-datetime-edit,& input[type=datetime-local]:global(.empty)::-webkit-datetime-edit{color:theme(colors.tint.400)}& input:-webkit-autofill{box-shadow:0 0 0 999em var(--fabric-input) inset;-webkit-text-fill-color:theme(colors.accent.700)}& input:-webkit-autofill:focus{box-shadow:0 0 0 999em var(--fabric-input-focus) inset;-webkit-text-fill-color:theme(colors.accent.700)}&.invalidWrapper{outline-color:theme(colors.danger.500);&:after{background-color:theme(colors.danger.500)}}}.fieldGroup{>*{line-height:1}>:not(:first-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-start-radius:0;border-start-start-radius:0}}>:not(:last-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-end-radius:0;border-start-end-radius:0}}}}

package/dist/esm/input/ArrayInput.module.css

@@ -1 +0,0 @@
-@layer var{.arrayInput{& [data-ref=fieldWrapper]{flex:1 1 0%}& .addButton :global(.buttonInner){color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}}

package/dist/esm/input/ColorPicker.module.css

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

package/dist/esm/input/File.module.css

@@ -1 +0,0 @@
-@layer comp{.fileInput{&::-webkit-file-upload-button{background-color:theme(backgroundColor.primary.500);border:0;border-radius:theme(borderRadius.DEFAULT);color:theme(textColor.white);cursor:pointer;opacity:.8;padding-block:0;&:hover{opacity:.9}}&[aria-invalid=true]::-webkit-file-upload-button{background-color:theme(backgroundColor.danger.500)}&:disabled::-webkit-file-upload-button{background-color:theme(backgroundColor.muted);pointer-events:none}&[readOnly]{pointer-events:none}}}

package/dist/esm/internal/Field.module.css

@@ -1 +0,0 @@
-@layer comp{}@layer var{.inputWrapper{&:after{inset-inline:50%;transition:all .3s;transition-delay:.1s}& .decorate:has([data-ref=button]){align-self:stretch;display:flex}&:has(input[disabled],textarea[disabled]){background-color:theme(colors.tint.50);cursor:not-allowed;& input,& textarea{cursor:not-allowed}}&:focus-within,&:has([data-open=true]){background-color:var(--fabric-input-focus);outline-color:var(--primary);z-index:1;&:not(:has([aria-readonly=true]:not([hidden]))):after{inset-inline:0}}&:global(.fixed){box-shadow:0 0 2rem .5rem var(--fabric-shadow)}& input,& textarea{max-width:100%}&>input[type=number]+.inputClear{margin-inline:-3rem 0}& input::-ms-clear,& select::-ms-clear,& textarea::-ms-clear{display:none}& input[type=search]::-webkit-search-cancel-button{display:none}& input[type=password]:not(:placeholder-shown){font-family:caption;letter-spacing:2px}& input[type=date]::-webkit-calendar-picker-indicator,& input[type=datetime-local]::-webkit-calendar-picker-indicator{appearance:none;display:none}& input[type=date]:global(.empty)::-webkit-datetime-edit,& input[type=datetime-local]:global(.empty)::-webkit-datetime-edit{color:theme(colors.tint.400)}& input:-webkit-autofill{box-shadow:0 0 0 999em var(--fabric-input) inset;-webkit-text-fill-color:theme(colors.accent.700)}& input:-webkit-autofill:focus{box-shadow:0 0 0 999em var(--fabric-input-focus) inset;-webkit-text-fill-color:theme(colors.accent.700)}&.invalidWrapper{outline-color:theme(colors.danger.500);&:after{background-color:theme(colors.danger.500)}}}.fieldGroup{>*{line-height:1}>:not(:first-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-start-radius:0;border-start-start-radius:0}}>:not(:last-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-end-radius:0;border-start-end-radius:0}}}}