@conform-to/react 0.4.0-pre.3 → 0.4.1

package/module/base.js

@@ -0,0 +1,107 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+
+var _excluded = ["hidden", "className", "style"];
+/**
+ * Triggering react custom change event
+ * Solution based on dom-testing-library
+ * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+ * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+ */
+function setNativeValue(element, value) {
+  var {
+    set: valueSetter
+  } = Object.getOwnPropertyDescriptor(element, 'value') || {};
+  var prototype = Object.getPrototypeOf(element);
+  var {
+    set: prototypeValueSetter
+  } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else {
+    if (valueSetter) {
+      valueSetter.call(element, value);
+    } else {
+      throw new Error('The given element does not have a value setter');
+    }
+  }
+}
+function useInputControl(ref) {
+  function getInputElement() {
+    var $input = ref.current;
+    if (!$input) {
+      console.warn('input ref is not available; Maybe you forget to setup the ref?');
+    }
+    return $input;
+  }
+  return {
+    onChange(eventLikeOrString) {
+      var $input = getInputElement();
+      var value = typeof eventLikeOrString === 'string' ? eventLikeOrString : eventLikeOrString.target.value;
+      if ($input && $input.value !== value) {
+        $input.dispatchEvent(new InputEvent('beforeinput', {
+          bubbles: true,
+          cancelable: true
+        }));
+        setNativeValue($input, value);
+        $input.dispatchEvent(new InputEvent('input', {
+          bubbles: true,
+          cancelable: true
+        }));
+      }
+    },
+    onInput(eventLikeOrString) {
+      this.onChange(eventLikeOrString);
+    },
+    onFocus() {
+      var $input = getInputElement();
+      if ($input) {
+        $input.dispatchEvent(new FocusEvent('focusin', {
+          bubbles: true,
+          cancelable: true
+        }));
+        $input.dispatchEvent(new FocusEvent('focus', {
+          cancelable: true
+        }));
+      }
+    },
+    onBlur() {
+      var $input = getInputElement();
+      if ($input) {
+        $input.dispatchEvent(new FocusEvent('focusout', {
+          bubbles: true,
+          cancelable: true
+        }));
+        $input.dispatchEvent(new FocusEvent('blur', {
+          cancelable: true
+        }));
+      }
+    }
+  };
+}
+function BaseInputImpl(_ref, ref) {
+  var {
+      hidden = true,
+      className,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/createElement('input', _objectSpread2({
+    ref,
+    className: hidden ? '' : className,
+    style: hidden ? {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0,0,0,0)',
+      whiteSpace: 'nowrap',
+      borderWidth: 0
+    } : style
+  }, props));
+}
+var BaseInput = /*#__PURE__*/forwardRef(BaseInputImpl);
+
+export { BaseInput, useInputControl };

package/module/helpers.js

@@ -17,23 +17,19 @@ function input(config) {
     pattern: config.pattern,
     multiple: config.multiple
   };
-
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-
   if (isCheckboxOrRadio) {
     attributes.value = value !== null && value !== void 0 ? value : 'on';
     attributes.defaultChecked = config.defaultValue === attributes.value;
   } else {
     attributes.defaultValue = config.defaultValue;
   }
-
   return attributes;
 }
 function select(config) {
   var _config$defaultValue;
-
   var attributes = {
     name: config.name,
     form: config.form,
@@ -41,16 +37,13 @@ function select(config) {
     required: config.required,
     multiple: config.multiple
   };
-
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-
   return attributes;
 }
 function textarea(config) {
   var _config$defaultValue2;
-
   var attributes = {
     name: config.name,
     form: config.form,
@@ -60,11 +53,9 @@ function textarea(config) {
     maxLength: config.maxLength,
     autoFocus: Boolean(config.initialError)
   };
-
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-
   return attributes;
 }