@react-fabric/form 1.0.0-beta.9 → 1.0.2

package/dist/esm/select/useSelect.js

@@ -4,33 +4,39 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useDebounce } from '@react-fabric/core';
-import { matchString, isString, dedupe, groupBy, isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
+import { matchString, isString, dedupe, compareValues, groupBy, EMPTY_ARRAY, isArray } from '@react-fabric/utilities';
 import { useMemo, useDeferredValue, useRef, useCallback, useReducer, useEffect } from 'react';
 import { getSelectedValue, makeOption } from './helpers.js';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useSelect = function useSelect(_ref) {
-  var _ref$options = _ref.options,
-    options = _ref$options === void 0 ? EMPTY_ARRAY : _ref$options,
-    value = _ref.value,
-    autoComplete = _ref.autoComplete,
-    _ref$multiple = _ref.multiple,
-    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-    _ref$allowCreate = _ref.allowCreate,
-    allowCreate = _ref$allowCreate === void 0 ? false : _ref$allowCreate,
-    _ref$groupProperty = _ref.groupProperty,
-    groupProperty = _ref$groupProperty === void 0 ? "" : _ref$groupProperty,
-    _ref$valueProperty = _ref.valueProperty,
-    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
-    _ref$labelProperty = _ref.labelProperty,
-    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
-    _ref$createOption = _ref.createOption,
-    createOption = _ref$createOption === void 0 ? makeOption : _ref$createOption,
-    matcher = _ref.matcher,
-    onQuery = _ref.onQuery,
-    onChange = _ref.onChange,
-    onSelect = _ref.onSelect;
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function useSelect(props) {
+  var _props$options = props.options,
+    options = _props$options === void 0 ? EMPTY_ARRAY : _props$options,
+    value = props.value,
+    autoComplete = props.autoComplete,
+    _props$alwaysOpen = props.alwaysOpen,
+    alwaysOpen = _props$alwaysOpen === void 0 ? false : _props$alwaysOpen,
+    _props$defaultOpen = props.defaultOpen,
+    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? false : _props$multiple,
+    _props$allowCreate = props.allowCreate,
+    allowCreate = _props$allowCreate === void 0 ? false : _props$allowCreate,
+    _props$groupProperty = props.groupProperty,
+    groupProperty = _props$groupProperty === void 0 ? "" : _props$groupProperty,
+    _props$valueProperty = props.valueProperty,
+    valueProperty = _props$valueProperty === void 0 ? "value" : _props$valueProperty,
+    _props$labelProperty = props.labelProperty,
+    labelProperty = _props$labelProperty === void 0 ? "label" : _props$labelProperty,
+    sortProperty = props.sortProperty,
+    _props$createOption = props.createOption,
+    createOption = _props$createOption === void 0 ? makeOption : _props$createOption,
+    matcher = props.matcher,
+    onQuery = props.onQuery,
+    onChange = props.onChange,
+    onSelect = props.onSelect;
+
   // value state
   var emptyValue = useMemo(function () {
     return multiple ? [] : "";
@@ -42,16 +48,17 @@ var useSelect = function useSelect(_ref) {
   var focusableRef = useRef(null);
   var listContentRef = useRef([]);
   var optionsRef = useRef([]);
-  var macthOption = useCallback(function (item, query) {
+  var matchOption = useCallback(function (item, query) {
     var _matcher, _item$labelProperty;
     return (_matcher = matcher === null || matcher === void 0 ? void 0 : matcher(item, query)) !== null && _matcher !== void 0 ? _matcher : matchString((_item$labelProperty = item[labelProperty]) !== null && _item$labelProperty !== void 0 ? _item$labelProperty : item, query);
-  }, [matcher]);
+  }, [labelProperty, matcher]);
   var fireChange = useCallback(function (value) {
     setTimeout(function () {
       onSelect === null || onSelect === void 0 || onSelect(value !== null && value !== void 0 ? value : emptyValue);
+      // @ts-expect-error ignore
       onChange === null || onChange === void 0 || onChange(getSelectedValue(value, emptyValue, valueProperty));
     }, 50);
-  }, [emptyValue, onSelect, onChange]);
+  }, [onSelect, emptyValue, onChange, valueProperty]);
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "open") {
         var index = state.items.indexOf(state.multiple ? state.value[0] : state.value);
@@ -63,13 +70,15 @@ var useSelect = function useSelect(_ref) {
       if (action.type === "close") {
         return _objectSpread(_objectSpread({}, state), {}, {
           activeIndex: null,
+          activeItem: null,
           open: false
         });
       }
       if (action.type === "active" && state.open) {
         if (autoComplete && action.index !== null) state.query = state.items[action.index];
         return _objectSpread(_objectSpread({}, state), {}, {
-          activeIndex: action.index
+          activeIndex: action.index,
+          activeItem: action.index !== null ? state.items[action.index] : null
         });
       }
       if (action.type === "setValue") {
@@ -83,6 +92,7 @@ var useSelect = function useSelect(_ref) {
         var newState = _objectSpread(_objectSpread({}, state), {}, {
           value: state.emptyValue,
           activeIndex: null,
+          activeItem: null,
           selectedIndex: autoComplete ? state.multiple ? (_action$value = action.value) === null || _action$value === void 0 ? void 0 : _action$value.length : 0 : state.items.indexOf(action.value)
         });
         if (action.value !== undefined) {
@@ -100,7 +110,7 @@ var useSelect = function useSelect(_ref) {
             newState.value = action.value;
           }
         }
-        if (!state.multiple) newState.open = false;
+        if (!state.multiple) newState.open = alwaysOpen;
         fireChange(newState.value);
         return newState;
       }
@@ -133,19 +143,20 @@ var useSelect = function useSelect(_ref) {
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query].concat(_toConsumableArray(optionList)));
         }
+        if (sortProperty) optionList = optionList.sort(compareValues("asc", sortProperty !== true ? sortProperty : undefined));
         var grouped = groupBy(optionList, groupProperty, "");
         if (action.open) _newState.open = true;
         _newState.items = [];
         // add new item if allowCreate
         if (allowCreate && action.query) _newState.items.push({
           ___create___: true,
-          value: createOption(action.query)
+          value: action.query
         });
-        Object.entries(grouped).forEach(function (_ref2) {
+        Object.entries(grouped).forEach(function (_ref) {
           var _newState$items;
-          var _ref3 = _slicedToArray(_ref2, 2),
-            key = _ref3[0],
-            list = _ref3[1];
+          var _ref2 = _slicedToArray(_ref, 2),
+            key = _ref2[0],
+            list = _ref2[1];
           if (key) {
             _newState.items.push({
               ___group___: true,
@@ -159,32 +170,38 @@ var useSelect = function useSelect(_ref) {
             return !opt.___group___;
           });
           _newState.activeIndex = _index >= 0 ? _index : null;
+          _newState.activeItem = _index >= 0 ? _newState.items[_index] : null;
         } else {
           _newState.activeIndex = null;
+          _newState.activeItem = null;
         }
         listContentRef.current = _newState.items;
         return _newState;
       }
       return state;
-    }, {
-      multiple: multiple,
-      emptyValue: emptyValue,
-      open: false,
-      loading: false,
-      activeIndex: null,
-      selectedIndex: null,
-      value: emptyValue,
-      // filter
-      query: undefined,
-      // dropdown items
-      items: []
+    }, {}, function () {
+      return {
+        multiple: multiple,
+        emptyValue: emptyValue,
+        open: alwaysOpen || defaultOpen,
+        loading: false,
+        activeIndex: null,
+        activeItem: null,
+        selectedIndex: null,
+        value: emptyValue,
+        // filter
+        query: undefined,
+        // dropdown items
+        items: []
+      };
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
   useEffect(function () {
     if (!multiple) {
-      var _ref4;
+      var _ref3;
+      // @ts-expect-error ignore
       var newOption = (allowCreate || autoComplete) && deferred ? createOption(deferred) : undefined;
       var hasValue = options.find(function (opt) {
         var _opt$valueProperty;
@@ -201,22 +218,22 @@ var useSelect = function useSelect(_ref) {
       });
       dispatch({
         type: "setValue",
-        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : ""
+        value: (_ref3 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref3 !== void 0 ? _ref3 : deferred
       });
     }
     if (multiple) {
       optionsRef.current = [];
       var _value = (isArray(deferred) ? deferred : []).map(function (item) {
-        var _ref5;
+        var _ref4;
         var newOption = (allowCreate || autoComplete) && item ? createOption(item) : undefined;
         var hasValue = options.find(function (opt) {
           var _opt$valueProperty2;
-          return ((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt) === deferred;
+          return ((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt) === item;
         });
         if (!hasValue && newOption) {
           optionsRef.current.push(newOption);
         }
-        return (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : "";
+        return (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : item;
       });
       optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), _toConsumableArray(options !== null && options !== void 0 ? options : []));
       dispatch({
@@ -228,14 +245,15 @@ var useSelect = function useSelect(_ref) {
         value: _value
       });
     }
-  }, [deferred, options, multiple, allowCreate, autoComplete, createOption]);
+  }, [deferred, options, multiple, allowCreate, autoComplete, createOption, valueProperty]);
   var fireQuery = useDebounce(function (query) {
     void Promise.resolve(onQuery === null || onQuery === void 0 ? void 0 : onQuery(query)).then(function (options) {
+      // @ts-expect-error ignore
       var newOptions = _toConsumableArray(options);
       // if autocomplete inject other filtered options from history
       if (autoComplete) {
         newOptions.push.apply(newOptions, _toConsumableArray(optionsRef.current.filter(function (opt) {
-          return macthOption === null || macthOption === void 0 ? void 0 : macthOption(opt, query);
+          return matchOption === null || matchOption === void 0 ? void 0 : matchOption(opt, query);
         })));
       }
       dispatch({
@@ -246,7 +264,7 @@ var useSelect = function useSelect(_ref) {
         setActive: true
       });
     });
-  }, [onQuery]);
+  }, [onQuery], 300);
 
   // handlers
   var handleQuery = useCallback(function (query) {
@@ -270,11 +288,11 @@ var useSelect = function useSelect(_ref) {
         open: true,
         setActive: true,
         options: optionsRef.current.filter(function (opt) {
-          return macthOption === null || macthOption === void 0 ? void 0 : macthOption(opt, query);
+          return matchOption === null || matchOption === void 0 ? void 0 : matchOption(opt, query);
         })
       });
     }
-  }, [macthOption, onQuery]);
+  }, [fireQuery, matchOption, onQuery]);
   var handleChange = useCallback(function (value) {
     var values = value;
     if (autoComplete && multiple && value) {
@@ -298,7 +316,7 @@ var useSelect = function useSelect(_ref) {
       type: "options",
       options: optionsRef.current
     });
-  }, []);
+  }, [autoComplete, createOption, multiple]);
   var handleRemove = useCallback(function (index) {
     dispatch({
       type: "removeItem",
@@ -316,11 +334,17 @@ var useSelect = function useSelect(_ref) {
     });
   }, []);
   var setActiveIndex = useCallback(function (index) {
-    dispatch({
+    if (index && index > -1) dispatch({
       type: "active",
       index: index
     });
   }, []);
+  var clearActiveIndex = useCallback(function () {
+    dispatch({
+      type: "active",
+      index: null
+    });
+  }, []);
   return {
     state: state,
     listRef: listRef,
@@ -329,13 +353,14 @@ var useSelect = function useSelect(_ref) {
     handleChange: handleChange,
     handleRemove: handleRemove,
     handleQuery: handleQuery,
-    macthOption: macthOption,
+    clearActiveIndex: clearActiveIndex,
+    macthOption: matchOption,
     setActiveIndex: setActiveIndex,
     setOpen: setOpen,
     setItemRef: function setItemRef(index, node) {
       listRef.current[index] = node;
     }
   };
-};
+}
 
 export { useSelect };

package/{src/input/ColorPicker.module.css → dist/esm/types/schema.js}

@@ -1,3 +1,5 @@
+'use client';
+
 /*
  * React Fabric
  * @version: 1.0.0
@@ -21,31 +23,20 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .colorPicker {
-    --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;
-    }
-
-    & label {
-      @apply !text-base;
-    }
-
-    & :global(.flexbox-fix) {
-      @apply !border-t-muted justify-center;
-
-      & > div > div {
-        @apply text-center;
-      }
+var DATA_TYPES = /*#__PURE__*/function (DATA_TYPES) {
+  DATA_TYPES["TEXT"] = "text";
+  DATA_TYPES["COLOR"] = "color";
+  DATA_TYPES["BOOL"] = "bool";
+  DATA_TYPES["DATE"] = "date";
+  DATA_TYPES["DATETIME"] = "datetime";
+  DATA_TYPES["STRING"] = "string";
+  DATA_TYPES["NUMBER"] = "number";
+  DATA_TYPES["RANGE"] = "range";
+  DATA_TYPES["FILE"] = "file";
+  DATA_TYPES["AVATAR"] = "avatar";
+  DATA_TYPES["SCHEMA"] = "schema";
+  return DATA_TYPES;
+}({});
+var SCHEMA_CUSTOM_LIST = "--CUSTOM--";
 
-      & span > div {
-        box-shadow: 0 0 1px 1px theme(borderColor.base) inset !important;
-      }
-    }
-  }
-}
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST };

package/dist/esm/utils/eventHandlers.js

@@ -1,6 +1,7 @@
 'use client';
 
-import { debounce } from '@react-fabric/utilities';
+import { useFloatingTree } from '@floating-ui/react';
+import { useDebounce } from '@react-fabric/core';
 
 /*
  * React Fabric
@@ -26,16 +27,25 @@ import { debounce } from '@react-fabric/utilities';
  */
 
 /** ***************** common handler for enter press *******************/
-var handleEnter = function handleEnter(callback) {
+function useHandleEnter(callback) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref$stopPropagation = _ref.stopPropagation,
     stopPropagation = _ref$stopPropagation === void 0 ? false : _ref$stopPropagation,
     _ref$preventDefault = _ref.preventDefault,
     preventDefault = _ref$preventDefault === void 0 ? false : _ref$preventDefault;
-  var cbHandle = debounce(callback !== null && callback !== void 0 ? callback : function () {
+  var cbHandle = useDebounce(callback !== null && callback !== void 0 ? callback : function () {
     return undefined;
-  }, 100);
+  }, [callback], 100);
+  var tree = useFloatingTree();
   return function (e) {
+    // prevent propagation of event if input within dropdown (work around for floating-ui typeahead)
+    if (tree && e.key !== "Escape") {
+      e === null || e === void 0 || e.stopPropagation();
+    }
+    // blur input on escape key press
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+    }
     if (!e.shiftKey && !e.altKey && !e.metaKey && e.key === "Enter" && callback) {
       if (stopPropagation) e === null || e === void 0 || e.stopPropagation();
       cbHandle(e);
@@ -45,6 +55,6 @@ var handleEnter = function handleEnter(callback) {
       }
     }
   };
-};
+}
 
-export { handleEnter };
+export { useHandleEnter };

package/dist/esm/utils/getColor.js

@@ -25,20 +25,20 @@ import { isColor } from '@react-fabric/utilities';
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var getColor = function getColor(color) {
+function getColor(color) {
   if (color && isColor(color)) {
     return color;
   }
-};
-var getBgClass = function getBgClass(bg) {
+}
+function getBgClass(bg) {
   if (bg && !isColor(bg)) {
     return "bg-".concat(bg);
   }
-};
-var getColorClass = function getColorClass(color) {
+}
+function getColorClass(color) {
   if (color && !isColor(color)) {
     return "text-".concat(color);
   }
-};
+}
 
 export { getBgClass, getColor, getColorClass };

package/dist/esm/utils/getProps.js

@@ -0,0 +1,49 @@
+'use client';
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+function getWrapperProps(props) {
+  return {
+    appendLabel: props.appendLabel,
+    name: props.name,
+    info: props.info,
+    inline: props.inline,
+    label: props.label,
+    labelWidth: props.labelWidth,
+    required: props.required,
+    disabled: props.disabled,
+    width: props.width,
+    error: props.error,
+    invalid: props.invalid,
+    borderless: props.borderless,
+    decorateEnd: props.decorateEnd,
+    decorateEndHideWhenEmpty: props.decorateEndHideWhenEmpty,
+    decorateEndShowWhenEmpty: props.decorateEndShowWhenEmpty,
+    decorateStart: props.decorateStart
+  };
+}
+
+export { getWrapperProps };

package/dist/types/builder/FileField.d.ts

@@ -1,8 +1,11 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
-import { type FileSchema } from "../types/schema";
-export declare const FileField: ({ uploadHandler, inline, label, accept, multiple, value, ...rest }: Partial<FileSchema> & {
-    value?: AnyObject;
+import { type FileSchema, type ValueType } from "../types/schema";
+export declare function FileField({ uploadHandler, inline, label, accept, value, onChange, multiple, error, invalid, ...rest }: Partial<FileSchema & ValueType> & {
+    value?: never;
     inline?: boolean;
+    invalid?: boolean;
+    error?: AnyObject;
+    onChange?: (value: AnyObject) => void;
     fileUrl?: (path: string) => string;
     uploadHandler: UploadHandler;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/types/builder/FormField.d.ts

@@ -1,9 +1,11 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
+import { type BaseSelectProps } from "../types";
 import { type SchemaType } from "../types/schema";
-export declare const FormField: ({ id, label, required, inline, prefix, autoFocus, defaultValue, fileUrl, uploadHandler, ...rest }: SchemaType & {
+export declare function FormField<T extends AnyObject = string>({ id, label, required, inline, prefix, autoFocus, optionLists, fileUrl, uploadHandler, ...rest }: SchemaType & {
     inline?: boolean;
     prefix?: string;
     autoFocus?: boolean;
+    optionLists?: KeyValue<BaseSelectProps<T>>;
     fileUrl?: (path: string) => string;
     uploadHandler?: UploadHandler;
-}) => import("react/jsx-runtime").JSX.Element | undefined;
+}): import("react").JSX.Element | undefined;

package/dist/types/builder/SchemaEditor.d.ts

@@ -0,0 +1,6 @@
+import { type SchemaEditorProps } from "../types/schema";
+/**
+ * SchemaEditor component allows users to edit a schema definition.
+ * It provides a form interface to modify schema properties dynamically.
+ */
+export declare function SchemaEditor({ schemaDef, dynamic, acceptableTypes, optionLists, children, onSubmit, onChange, }: SchemaEditorProps): import("react").JSX.Element;

package/dist/types/builder/components/AddSchemaFields.d.ts

@@ -0,0 +1,2 @@
+import { type ModalProps } from "@react-fabric/core";
+export declare function AddSchemaFields(props: ModalProps): import("react").JSX.Element;

package/dist/types/builder/components/SchemaArrayForm.d.ts

@@ -0,0 +1,2 @@
+import { type SchemaEditorProps } from "../../types/schema";
+export declare function SchemaArrayForm({ dynamic, acceptableTypes, optionLists }: Partial<SchemaEditorProps>): import("react").JSX.Element;

package/dist/types/builder/components/SchemaField.d.ts

@@ -0,0 +1,12 @@
+import type { SchemaDef } from "../../types/schema";
+import { type SchemaEditorProps } from "../../types/schema";
+export declare function SchemaField({ id, index, field, fieldId, getModel, onRemove, defaultOpen, optionLists, dynamic, onTypeChange, acceptableTypes, }: {
+    id: string;
+    index: number;
+    field: string;
+    fieldId: string;
+    defaultOpen?: boolean;
+    onRemove: () => void;
+    getModel: () => SchemaDef;
+    onTypeChange: (val: SchemaDef) => void;
+} & Omit<SchemaEditorProps, "schemaDef" | "onChange">): import("react").JSX.Element;

package/dist/types/form/Controller.d.ts

@@ -4,7 +4,7 @@ export interface ControllerProps {
      * field name
      */
     name?: string;
-    children: ReactElement | ((props: {
+    children: ReactElement<KeyValue> | ((props: {
         name: string;
         error?: string;
         checked: boolean;
@@ -14,7 +14,49 @@ export interface ControllerProps {
         disabled?: boolean;
         onBlur: () => void;
         onChange: (value: AnyObject) => void;
-        inputRef?: React.Ref<HTMLInputElement>;
+        ref?: React.Ref<AnyObject>;
     }) => ReactElement);
 }
-export declare const Controller: ({ name, children, ...rest }: ControllerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * This component is used to wrap form controls
+ * and provide them with the necessary props and state management.
+ *
+ * It uses the `Controller` component from `react-hook-form`
+ * to manage the form state and validation.
+ *
+ * It accepts a `name` prop to identify the form control,
+ * and a `children` prop which can either be a React element
+ * or a function that receives the necessary props to render the control.
+ *
+ * The component will pass down the following props to the child:
+ * - `name`: the name of the form control
+ * - `error`: any validation error message
+ * - `checked`: whether the control is checked (for checkboxes/radios)
+ * - `value`: the current value of the control
+ * - `invalid`: whether the control is invalid
+ * - `readOnly`: whether the control is read-only (disabled during submission)
+ * - `disabled`: whether the control is disabled
+ * - `onBlur`: function to call when the control loses focus
+ * - `onChange`: function to call when the control value changes
+ * - `ref`: a ref to the control element
+ * * The component also handles the `ref` prop to ensure that it is passed correctly
+ * to the child component, allowing for proper focus management and DOM access.
+ *
+ * @example
+ * ```jsx
+ * <Controller
+ *   name="username"
+ *   children={({ name, error, checked, value, invalid, readOnly, onChange }) => (
+ *     <input
+ *       type="text"
+ *       name={name}
+ *       onChange={onChange}
+ *       readOnly={readOnly}
+ *       aria-invalid={invalid}
+ *       value={value}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare function Controller(props: ControllerProps): import("react").JSX.Element;