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

package/dist/cjs/form/Form.js

@@ -89,13 +89,17 @@ var Form = function Form(_ref) {
         return form.getValues();
       },
       setValues: function setValues(v) {
-        return form.reset(v);
+        return setTimeout(function () {
+          return form.reset(v);
+        }, 50);
       },
       setValue: function setValue(k, v) {
-        return form.setValue(k, v, {
-          shouldDirty: false,
-          shouldTouch: false
-        });
+        return setTimeout(function () {
+          return form.setValue(k, v, {
+            shouldDirty: false,
+            shouldTouch: false
+          });
+        }, 50);
       }
     };
   }, [onSubmit, form, form.formState, defaultValues]);

package/dist/cjs/select/Select.js

@@ -217,15 +217,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 +237,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();

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;
@@ -206,7 +206,7 @@ var useSelect = function useSelect(_ref) {
     }
     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) {
@@ -285,7 +285,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/dist/esm/form/Form.js

@@ -89,13 +89,17 @@ var Form = function Form(_ref) {
         return form.getValues();
       },
       setValues: function setValues(v) {
-        return form.reset(v);
+        return setTimeout(function () {
+          return form.reset(v);
+        }, 50);
       },
       setValue: function setValue(k, v) {
-        return form.setValue(k, v, {
-          shouldDirty: false,
-          shouldTouch: false
-        });
+        return setTimeout(function () {
+          return form.setValue(k, v, {
+            shouldDirty: false,
+            shouldTouch: false
+          });
+        }, 50);
       }
     };
   }, [onSubmit, form, form.formState, defaultValues]);

package/dist/esm/select/Select.js

@@ -217,15 +217,16 @@ var Select = function Select(_ref) {
     wrapperRef: refs.setReference,
     className: state.open ? "!z-[99]" : ""
   }, rest), {}, {
-    children: [/*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/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__*/jsx("input", _objectSpread(_objectSpread({
+      children: [displayValue, /*#__PURE__*/jsx("input", {
         readOnly: !searchable || readOnly,
         disabled: disabled,
         value: (_state$query = state.query) !== null && _state$query !== void 0 ? _state$query : "",
@@ -236,13 +237,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: isEmpty(state.value) ? placeholder : ""
-      }, referenceProps), {}, {
+        placeholder: isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);
         }
-      }))]
-    }), !state.loading && /*#__PURE__*/jsx(Icon, {
+      })]
+    })), !state.loading && /*#__PURE__*/jsx(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();

package/dist/esm/select/useSelect.js

@@ -4,7 +4,7 @@ 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, dedupe, groupBy, isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
+import { matchString, isString, dedupe, groupBy, isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
 import { useMemo, useDeferredValue, useRef, useCallback, useReducer, useEffect } from 'react';
 import { getSelectedValue, makeOption } from './helpers.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 (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;
@@ -206,7 +206,7 @@ var useSelect = function useSelect(_ref) {
     }
     if (multiple) {
       optionsRef.current = [];
-      var _value = (deferred !== null && deferred !== void 0 ? deferred : []).map(function (item) {
+      var _value = (isArray(deferred) ? deferred : []).map(function (item) {
         var _ref5;
         var newOption = (allowCreate || autoComplete) && item ? createOption(item) : undefined;
         var hasValue = options.find(function (opt) {
@@ -285,7 +285,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 = dedupe([].concat(_toConsumableArray(isArray(values) ? values : [values]), _toConsumableArray(optionsRef.current)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,8 +39,8 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.4",
-    "@react-fabric/utilities": "^1.0.0-beta.4",
+    "@react-fabric/core": "^1.0.0-beta.5",
+    "@react-fabric/utilities": "^1.0.0-beta.5",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -60,5 +60,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "47b0aede19252a3a3ef8df75c08a21caabde8100"
+  "gitHead": "7d4a7ed1ea9890652826bef58d01c31280d761c8"
 }

package/src/form/Form.tsx

@@ -118,12 +118,16 @@ export const Form = <K extends KeyValue>({
       submit: () => form.handleSubmit(onSubmit),
       validate: async () => await form.trigger(),
       getValues: () => form.getValues(),
-      setValues: (v) => form.reset(v),
+      setValues: (v) => setTimeout(() => form.reset(v), 50),
       setValue: (k, v) =>
-        form.setValue(k as AnyObject, v, {
-          shouldDirty: false,
-          shouldTouch: false,
-        }),
+        setTimeout(
+          () =>
+            form.setValue(k as AnyObject, v, {
+              shouldDirty: false,
+              shouldTouch: false,
+            }),
+          50,
+        ),
     }),
     [onSubmit, form, form.formState, defaultValues],
   );

package/src/select/Select.tsx

@@ -273,6 +273,7 @@ export const Select = <T extends AnyObject = string>({
           "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={(e) =>
           e.currentTarget.querySelector<HTMLElement>("input")?.focus()
         }
@@ -294,7 +295,6 @@ export const Select = <T extends AnyObject = string>({
             multiple && "min-w-24",
           )}
           placeholder={isEmpty(state.value) ? placeholder : ""}
-          {...referenceProps}
           onChange={(evt) => handleQuery(evt.target.value)}
         />
       </div>

package/src/select/useSelect.tsx

@@ -27,6 +27,7 @@ import {
   EMPTY_ARRAY,
   groupBy,
   isArray,
+  isString,
   matchString,
 } from "@react-fabric/utilities";
 import {
@@ -173,9 +174,9 @@ export const useSelect = ({
         if (action.value !== undefined) {
           if (multiple) {
             const values = [];
-            if (action.value && autoComplete)
+            if (isString(action.value))
               values.push(...action.value.split(/,\s?/));
-            else if (action.value) values.push(action.value);
+            else values.push(action.value);
             newState.value = [...state.value];
             values.forEach((value: AnyObject) => {
               newState.value = newState.value.includes?.(value)
@@ -287,19 +288,21 @@ export const useSelect = ({
     }
     if (multiple) {
       optionsRef.current = [];
-      const value = (deferred ?? []).map((item: AnyObject) => {
-        const newOption =
-          (allowCreate || autoComplete) && item
-            ? createOption(item)
-            : undefined;
-        const hasValue = options.find(
-          (opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred,
-        );
-        if (!hasValue && newOption) {
-          optionsRef.current.push(newOption);
-        }
-        return hasValue ?? newOption ?? "";
-      });
+      const value = (isArray(deferred) ? deferred : []).map(
+        (item: AnyObject) => {
+          const newOption =
+            (allowCreate || autoComplete) && item
+              ? createOption(item)
+              : undefined;
+          const hasValue = options.find(
+            (opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred,
+          );
+          if (!hasValue && newOption) {
+            optionsRef.current.push(newOption);
+          }
+          return hasValue ?? newOption ?? "";
+        },
+      );
       optionsRef.current = [...optionsRef.current, ...(options ?? [])];
       dispatch({ type: "options", options: optionsRef.current });
       dispatch({
@@ -367,7 +370,11 @@ export const useSelect = ({
       value: value?.___create___ ? value.value : value,
     });
     if (value?.___create___) {
-      optionsRef.current = [...optionsRef.current, createOption(value.value)];
+      let val = [value.value];
+      if (multiple) {
+        val = value.value.split(/,\s?/);
+      }
+      optionsRef.current = [...optionsRef.current, ...val.map(createOption)];
     }
     if (autoComplete) {
       optionsRef.current = dedupe([