@react-fabric/form 1.0.0-beta.4 → 1.0.0-beta.40

package/dist/cjs/select/List.js

@@ -13,26 +13,27 @@ var Options = require('./Options.js');
 var useSelect = require('./useSelect.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["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", "data-hide-selected"];
+var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "placeholder", "autoFocus", "options", "height", "groupProperty", "labelProperty", "valueProperty", "multiple", "allowCreate", "searchable", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed", "invalid", "error", "allowClear", "decorateStart", "decorateEnd", "data-inner", "data-hide-selected"];
 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 List = function List(_ref) {
   var _state$query;
-  _ref.ref;
-    var name = _ref.name,
+  var ref = _ref.ref,
+    name = _ref.name,
     value = _ref.value,
     readOnly = _ref.readOnly,
     disabled = _ref.disabled,
     required = _ref.required,
-    placeholder = _ref.placeholder;
-    _ref.autoFocus;
-    var options = _ref.options,
+    placeholder = _ref.placeholder,
+    autoFocus = _ref.autoFocus,
+    options = _ref.options,
     height = _ref.height,
     groupProperty = _ref.groupProperty,
     labelProperty = _ref.labelProperty,
     valueProperty = _ref.valueProperty,
     multiple = _ref.multiple,
     allowCreate = _ref.allowCreate,
+    searchable = _ref.searchable,
     createOption = _ref.createOption,
     matcher = _ref.matcher,
     renderer = _ref.renderer,
@@ -138,9 +139,10 @@ var List = function List(_ref) {
           }
         } else if (evt.key === "Backspace") {
           !state.query && handleRemove();
-        } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (state.activeIndex === null) {
-            setActiveIndex(state.selectedIndex);
+        } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
+            var _state$selectedIndex;
+            setActiveIndex((_state$selectedIndex = state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0);
           }
           setTimeout(function () {
             var _props$onKeyDown;
@@ -185,6 +187,14 @@ var List = function List(_ref) {
       });
     }
   }, [state.value, state.query, placeholder, renderer]);
+  react.useLayoutEffect(function () {
+    setTimeout(function () {
+      var _listRef$current$stat;
+      state.selectedIndex && ((_listRef$current$stat = listRef.current[state.selectedIndex]) === null || _listRef$current$stat === void 0 ? void 0 : _listRef$current$stat.scrollIntoView({
+        block: "center"
+      }));
+    }, 100);
+  }, [state.selectedIndex]);
   return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, {
       showClear: !utilities.isEmpty(state.value),
@@ -197,23 +207,32 @@ var List = function List(_ref) {
       className: "z-1 rounded-b-none",
       "data-inner": true,
       wrapperRef: refs.setReference,
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+        role: "none",
         "data-select-display": "true",
-        className: "group flex-1 py-1 px-2 truncate text-start flex gap-1 flex-wrap",
-        children: [!hideSelected && displayValue, /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread(_objectSpread({
+        className: classNames("group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start", multiple ? "flex-wrap" : "flex-nowrap overflow-hidden")
+      }, referenceProps), {}, {
+        onMouseUp: function onMouseUp(e) {
+          var _e$currentTarget$quer;
+          return (_e$currentTarget$quer = e.currentTarget.querySelector("input")) === null || _e$currentTarget$quer === void 0 ? void 0 : _e$currentTarget$quer.focus();
+        },
+        children: [!hideSelected && displayValue, /*#__PURE__*/jsxRuntime.jsx("input", {
+          readOnly: !searchable || readOnly,
           disabled: disabled,
           value: (_state$query = state.query) !== null && _state$query !== void 0 ? _state$query : "",
           "aria-invalid": invalid,
           "data-testid": name,
           name: name,
-          className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24", disabled && "cursor-not-allowed pointer-events-none"),
-          placeholder: utilities.isEmpty(state.value) ? placeholder : ""
-        }, referenceProps), {}, {
+          size: 1,
+          ref: ref,
+          autoFocus: autoFocus,
+          className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+          placeholder: utilities.isEmpty(state.value) ? placeholder : "",
           onChange: function onChange(evt) {
             return handleQuery(evt.target.value);
           }
-        }))]
-      })
+        })]
+      }))
     }), /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
       context: context,
       initialFocus: -1,
@@ -227,11 +246,13 @@ var List = function List(_ref) {
       }, floatingProps), {}, {
         items: state.items,
         active: state.activeIndex,
+        valueProperty: valueProperty,
+        labelProperty: labelProperty,
         itemRef: setItemRef,
         itemProps: makeItemProps,
-        children: function children(item) {
-          var _ref4, _renderer3;
-          return (_ref4 = (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : item[labelProperty]) !== null && _ref4 !== void 0 ? _ref4 : item;
+        children: function children(item, label) {
+          var _renderer3;
+          return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
         }
       }))
     })]

package/dist/cjs/select/Options.js

@@ -34,7 +34,7 @@ var Options = function Options(_ref) {
         i18nKey: "form:select.emptyList"
       })
     })), items.map(function (item, index) {
-      var _item$labelProperty;
+      var _item$value, _item$labelProperty;
       if (item.___group___) return /*#__PURE__*/jsxRuntime.jsx("p", {
         className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t",
         children: item.label
@@ -51,7 +51,7 @@ var Options = function Options(_ref) {
         children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
           i18nKey: "form:select.createOption",
           values: {
-            query: item.value
+            query: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item
           },
           components: [/*#__PURE__*/jsxRuntime.jsx("strong", {
             children: "query"

package/dist/cjs/select/Select.js

@@ -140,6 +140,9 @@ var Select = function Select(_ref) {
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
           }
@@ -217,15 +220,16 @@ var Select = function Select(_ref) {
     wrapperRef: refs.setReference,
     className: state.open ? "!z-[99]" : ""
   }, rest), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
       role: "none",
       "data-select-display": "true",
-      className: classNames("group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start", multiple ? "flex-wrap" : "flex-nowrap overflow-hidden"),
+      className: classNames("group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start", multiple ? "flex-wrap" : "flex-nowrap overflow-hidden")
+    }, referenceProps), {}, {
       onMouseUp: function onMouseUp(e) {
         var _e$currentTarget$quer;
         return (_e$currentTarget$quer = e.currentTarget.querySelector("input")) === null || _e$currentTarget$quer === void 0 ? void 0 : _e$currentTarget$quer.focus();
       },
-      children: [displayValue, /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread(_objectSpread({
+      children: [displayValue, /*#__PURE__*/jsxRuntime.jsx("input", {
         readOnly: !searchable || readOnly,
         disabled: disabled,
         value: (_state$query = state.query) !== null && _state$query !== void 0 ? _state$query : "",
@@ -236,13 +240,12 @@ var Select = function Select(_ref) {
         ref: ref,
         autoFocus: autoFocus,
         className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
-        placeholder: utilities.isEmpty(state.value) ? placeholder : ""
-      }, referenceProps), {}, {
+        placeholder: utilities.isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);
         }
-      }))]
-    }), !state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      })]
+    })), !state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       className: classNames("flex-content p-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto", state.open && "-scale-y-100 pointer-events-none", disabled && "pointer-events-none"),
       onClick: function onClick() {
         return !disabled && openDropdown();
@@ -259,7 +262,7 @@ var Select = function Select(_ref) {
         visuallyHiddenDismiss: true,
         children: /*#__PURE__*/jsxRuntime.jsx(Options.Options, _objectSpread(_objectSpread({
           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: _objectSpread({
             width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
           }, floatingStyles)

package/dist/cjs/select/useSelect.js

@@ -88,7 +88,7 @@ var useSelect = function useSelect(_ref) {
         if (action.value !== undefined) {
           if (multiple) {
             var values = [];
-            if (action.value && autoComplete) values.push.apply(values, _toConsumableArray(action.value.split(/,\s?/)));else if (action.value) values.push(action.value);
+            if (utilities.isString(action.value)) values.push.apply(values, _toConsumableArray(action.value.split(/,\s?/)));else values.push(action.value);
             newState.value = _toConsumableArray(state.value);
             values.forEach(function (value) {
               var _newState$value$inclu, _newState$value;
@@ -133,13 +133,14 @@ var useSelect = function useSelect(_ref) {
         if (autoComplete && action.query !== undefined) {
           optionList = utilities.dedupe([action.query].concat(_toConsumableArray(optionList)));
         }
+        optionList = optionList.sort(utilities.compareValues("asc", labelProperty));
         var grouped = utilities.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) {
           var _newState$items;
@@ -201,22 +202,22 @@ var useSelect = function useSelect(_ref) {
       });
       dispatch({
         type: "setValue",
-        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : ""
+        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : deferred
       });
     }
     if (multiple) {
       optionsRef.current = [];
-      var _value = (deferred !== null && deferred !== void 0 ? deferred : []).map(function (item) {
+      var _value = (utilities.isArray(deferred) ? deferred : []).map(function (item) {
         var _ref5;
         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 (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : item;
       });
       optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), _toConsumableArray(options !== null && options !== void 0 ? options : []));
       dispatch({
@@ -285,7 +286,11 @@ var useSelect = function useSelect(_ref) {
       value: value !== null && value !== void 0 && value.___create___ ? value.value : value
     });
     if (value !== null && value !== void 0 && value.___create___) {
-      optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), [createOption(value.value)]);
+      var val = [value.value];
+      if (multiple) {
+        val = value.value.split(/,\s?/);
+      }
+      optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), _toConsumableArray(val.map(createOption)));
     }
     if (autoComplete) {
       optionsRef.current = utilities.dedupe([].concat(_toConsumableArray(utilities.isArray(values) ? values : [values]), _toConsumableArray(optionsRef.current)));

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

@@ -1,3 +1,5 @@
+'use strict';
+
 /*
  * 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["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;
-      }
-    }
-  }
-}
+exports.DATA_TYPES = DATA_TYPES;
+exports.SCHEMA_CUSTOM_LIST = SCHEMA_CUSTOM_LIST;

package/dist/cjs/utils/getColor.js

@@ -35,6 +35,12 @@ var getBgClass = function getBgClass(bg) {
     return "bg-".concat(bg);
   }
 };
+var getColorClass = function getColorClass(color) {
+  if (color && !utilities.isColor(color)) {
+    return "text-".concat(color);
+  }
+};
 
 exports.getBgClass = getBgClass;
 exports.getColor = getColor;
+exports.getColorClass = getColorClass;

package/dist/esm/builder/FileField.js

@@ -4,26 +4,32 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { Button, Icon, ProgressBar } from '@react-fabric/core';
-import { FileUtil, Format } from '@react-fabric/utilities';
+import { Tooltip, Button, Icon, ProgressBar } from '@react-fabric/core';
+import { isString, FileUtil, Format } from '@react-fabric/utilities';
 import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useFileUploader } from '../hooks/useFileUploader.js';
 import { Field } from '../input/Field.js';
 import { HiddenInput } from '../input/Hidden.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["uploadHandler", "inline", "label", "accept", "multiple", "value"];
+var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple", "invalid", "error"];
 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 FileField = function FileField(_ref) {
+  var _error$values$label, _error$values, _error$values2;
   var uploadHandler = _ref.uploadHandler,
     inline = _ref.inline,
     label = _ref.label,
     accept = _ref.accept,
-    _ref$multiple = _ref.multiple,
-    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-    value = _ref.value,
+    value = _ref.value;
+    _ref.fileUrl;
+    var multiple = _ref.multiple;
+    _ref.invalid;
+    var error = _ref.error,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFileUploader = useFileUploader( /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -49,32 +55,38 @@ var FileField = function FileField(_ref) {
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(Field, {
+    children: [/*#__PURE__*/jsx(Field, {
       plain: true,
       inline: inline,
       label: label,
-      className: "inline-block",
-      children: [/*#__PURE__*/jsx(HiddenInput, _objectSpread({
+      children: /*#__PURE__*/jsx(HiddenInput, _objectSpread({
         hiddenValue: multiple ? list : list === null || list === void 0 ? void 0 : list[0]
-      }, rest)), /*#__PURE__*/jsx("span", {
-        children: /*#__PURE__*/jsx(Button, {
-          badge: pending > 0 ? "".concat(pending) : undefined,
-          "data-ref": "filebtn",
-          children: /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx("span", {
-              children: "Add file"
-            }), /*#__PURE__*/jsx("input", {
-              type: "file",
-              accept: accept,
-              multiple: multiple,
-              className: "absolute inset-0 opacity-0 z-5",
-              onChange: function onChange(e) {
-                return [upload(e.target.files), e.target.value = ""];
-              }
-            })]
-          })
+      }, rest))
+    }), /*#__PURE__*/jsx(Tooltip, {
+      color: "danger-200",
+      content: isString(error) ? "".concat(error) : error && t(error === null || error === void 0 ? void 0 : error.key, error.values ? _objectSpread(_objectSpread({}, error === null || error === void 0 ? void 0 : error.values), {}, {
+        label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
+      }) : {}),
+      disabled: !error,
+      children: /*#__PURE__*/jsx(Button, {
+        badge: pending > 0 ? "".concat(pending) : undefined,
+        color: error ? "danger" : undefined,
+        variant: error ? "soft" : undefined,
+        "data-ref": "filebtn",
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("span", {
+            children: "Add file"
+          }), /*#__PURE__*/jsx("input", {
+            type: "file",
+            accept: accept,
+            multiple: multiple,
+            className: "absolute inset-0 opacity-0 z-5",
+            onChange: function onChange(e) {
+              return [upload(e.target.files), e.target.value = ""];
+            }
+          })]
         })
-      })]
+      })
     }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("div", {
       className: "bg-alternate",
       children: files.map(function (file, idx) {

package/dist/esm/builder/FormField.js

@@ -2,22 +2,25 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isEmpty } from '@react-fabric/utilities';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Controller } from '../form/Controller.js';
 import { ArrayInput } from '../input/ArrayInput.js';
 import { AvatarInput } from '../input/AvatarInput.js';
 import { ColorInput } from '../input/ColorInput.js';
+import { DateInput } from '../input/DateInput.js';
 import { Input } from '../input/Input.js';
 import { Number } from '../input/Number.js';
-import { Range } from '../input/Range.js';
+import { RangeSlider } from '../input/RangeSlider.js';
 import { Switch } from '../input/Switch.js';
 import { Textarea } from '../input/Textarea.js';
 import { Select } from '../select/Select.js';
+import { DATA_TYPES } from '../types/schema.js';
 import { FileField } from './FileField.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["id", "label", "required", "inline", "prefix", "autoFocus", "defaultValue", "fileUrl", "uploadHandler"];
+var _excluded = ["id", "label", "required", "inline", "prefix", "autoFocus", "optionLists", "fileUrl", "uploadHandler"];
 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 FormField = function FormField(_ref) {
@@ -26,9 +29,9 @@ var FormField = function FormField(_ref) {
     required = _ref.required,
     inline = _ref.inline,
     prefix = _ref.prefix,
-    autoFocus = _ref.autoFocus;
-    _ref.defaultValue;
-    var fileUrl = _ref.fileUrl,
+    autoFocus = _ref.autoFocus,
+    optionLists = _ref.optionLists,
+    fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation(),
@@ -36,48 +39,55 @@ var FormField = function FormField(_ref) {
   var fieldName = useMemo(function () {
     return [prefix, id].filter(Boolean).join(".");
   }, [id, prefix]);
+  var hasOptions = useMemo(function () {
+    var _rest$optionList;
+    return rest.datatype === DATA_TYPES.STRING && (rest.optionList === "--CUSTOM--" && !isEmpty(rest.options) || !isEmpty(optionLists === null || optionLists === void 0 ? void 0 : optionLists[(_rest$optionList = rest.optionList) !== null && _rest$optionList !== void 0 ? _rest$optionList : ""]));
+  }, [rest]);
   var E = useMemo(function () {
-    if (rest.datatype === "number" || rest.datatype === "decimal") return Number;
-    if (rest.datatype === "range") return Range;
-    if (rest.datatype === "boolean") return Switch;
-    if (rest.datatype === "text") return Textarea;
-    if (rest.datatype === "color") return ColorInput;
-    if (rest.datatype === "string" && rest.options) return Select;
+    if (rest.datatype === DATA_TYPES.NUMBER) return Number;
+    if (rest.datatype === DATA_TYPES.RANGE) return RangeSlider;
+    if (rest.datatype === DATA_TYPES.BOOL) return Switch;
+    if (rest.datatype === DATA_TYPES.TEXT) return Textarea;
+    if (rest.datatype === DATA_TYPES.DATE) return DateInput;
+    if (rest.datatype === DATA_TYPES.COLOR) return ColorInput;
+    if (hasOptions) return Select;
     return Input;
-  }, [rest.datatype]);
+  }, [rest.datatype, hasOptions]);
   var props = useMemo(function () {
-    var _rest$step, _rest$step2, _rest$min, _rest$max, _rest$step3;
-    if (rest.datatype === "number") return {
+    var _rest$step, _rest$min, _rest$max, _rest$step2, _optionLists, _rest$optionList2;
+    if (rest.datatype === DATA_TYPES.NUMBER) return {
       min: rest.min,
       max: rest.max,
       step: (_rest$step = rest.step) !== null && _rest$step !== void 0 ? _rest$step : 1
     };
-    if (rest.datatype === "decimal") return {
-      min: rest.min,
-      max: rest.max,
-      step: (_rest$step2 = rest.step) !== null && _rest$step2 !== void 0 ? _rest$step2 : 0.1
-    };
-    if (rest.datatype === "range") return {
+    if (rest.datatype === DATA_TYPES.RANGE) return {
       min: (_rest$min = rest.min) !== null && _rest$min !== void 0 ? _rest$min : 1,
       max: (_rest$max = rest.max) !== null && _rest$max !== void 0 ? _rest$max : 99,
-      step: (_rest$step3 = rest.step) !== null && _rest$step3 !== void 0 ? _rest$step3 : 1,
+      step: (_rest$step2 = rest.step) !== null && _rest$step2 !== void 0 ? _rest$step2 : 1,
       showValue: true,
       showLabels: true
     };
-    if (rest.datatype === "text") return {
+    if (rest.datatype === DATA_TYPES.DATE) return {
+      min: rest.min,
+      max: rest.max,
+      type: rest.type
+    };
+    if (rest.datatype === DATA_TYPES.TEXT) return {
       rows: 3
     };
-    if (rest.datatype === "color") return {
+    if (rest.datatype === DATA_TYPES.COLOR) return {
       showPicker: true
     };
-    if (rest.datatype === "string" && rest.options) return {
-      options: rest.options,
+    if (rest.datatype === DATA_TYPES.STRING && hasOptions) return _objectSpread({
       multiple: rest.multiple,
+      allowCreate: rest.allowCustom,
       searchable: true
-    };
+    }, (_optionLists = optionLists === null || optionLists === void 0 ? void 0 : optionLists[(_rest$optionList2 = rest.optionList) !== null && _rest$optionList2 !== void 0 ? _rest$optionList2 : ""]) !== null && _optionLists !== void 0 ? _optionLists : {
+      options: rest.options
+    });
     return {};
-  }, [rest]);
-  if (rest.datatype === "avatar") return uploadHandler && /*#__PURE__*/jsx(Controller, {
+  }, [rest, hasOptions, optionLists]);
+  if (rest.datatype === DATA_TYPES.AVATAR) return uploadHandler && /*#__PURE__*/jsx(Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsx(AvatarInput, {
       uploadHandler: uploadHandler,
@@ -85,7 +95,7 @@ var FormField = function FormField(_ref) {
       name: fieldName
     })
   });
-  if (rest.datatype === "file") return uploadHandler && /*#__PURE__*/jsx(Controller, {
+  if (rest.datatype === DATA_TYPES.FILE) return uploadHandler && /*#__PURE__*/jsx(Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsx(FileField, _objectSpread({
       uploadHandler: uploadHandler,
@@ -94,12 +104,12 @@ var FormField = function FormField(_ref) {
       id: id
     }, rest))
   });
-  return rest.multiple && !("options" in rest) ? /*#__PURE__*/jsx(ArrayInput, {
+  return rest.multiple && !hasOptions ? /*#__PURE__*/jsx(ArrayInput, {
     name: fieldName,
-    label: t(label, label),
+    label: t("fb.".concat(id), label || id),
     required: required,
     onAdd: function onAdd() {
-      return "";
+      return String("");
     },
     children: /*#__PURE__*/jsx(Controller, {
       children: /*#__PURE__*/jsx(E, _objectSpread({}, props))
@@ -108,8 +118,8 @@ var FormField = function FormField(_ref) {
     name: fieldName,
     children: /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({}, props), {}, {
       autoFocus: autoFocus,
-      label: t(label, label),
-      placeholder: t(label, label),
+      label: t("fb.".concat(id), label || id),
+      placeholder: t("fb.".concat(id), label || id),
       required: required,
       inline: inline
     }))