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

package/_virtual/_rollupPluginBabelHelpers.js

@@ -4,17 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -24,10 +21,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -39,7 +34,6 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
 

package/base.d.ts

@@ -0,0 +1,17 @@
+import { type InputHTMLAttributes, type RefObject } from 'react';
+declare type EventLikeOrString = {
+    target: {
+        value: string;
+    };
+} | string;
+declare type InputControl = {
+    onChange: (eventLikeOrString: EventLikeOrString) => void;
+    onInput: (eventLikeOrString: EventLikeOrString) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+};
+export declare function useInputControl(ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>): InputControl;
+export declare const BaseInput: import("react").ForwardRefExoticComponent<{
+    name: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value" | "defaultValue"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/base.js

@@ -0,0 +1,112 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var react = require('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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/react.createElement('input', _rollupPluginBabelHelpers.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__*/react.forwardRef(BaseInputImpl);
+
+exports.BaseInput = BaseInput;
+exports.useInputControl = useInputControl;

package/helpers.d.ts

@@ -1,8 +1,37 @@
 import { type FieldConfig, type Primitive } from '@conform-to/dom';
-import { type InputHTMLAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from 'react';
+import { type HTMLInputTypeAttribute } from 'react';
+interface FieldProps {
+    name: string;
+    form?: string;
+    required?: boolean;
+    autoFocus?: boolean;
+}
+interface InputProps<Schema> extends FieldProps {
+    type?: HTMLInputTypeAttribute;
+    minLength?: number;
+    maxLength?: number;
+    min?: Schema extends number ? number : string | number;
+    max?: Schema extends number ? number : string | number;
+    step?: Schema extends number ? number : string | number;
+    pattern?: string;
+    multiple?: boolean;
+    value?: string;
+    defaultChecked?: boolean;
+    defaultValue?: string;
+}
+interface SelectProps extends FieldProps {
+    defaultValue?: string | number | readonly string[] | undefined;
+    multiple?: boolean;
+}
+interface TextareaProps extends FieldProps {
+    minLength?: number;
+    maxLength?: number;
+    defaultValue?: string;
+}
 export declare function input<Schema extends Primitive>(config: FieldConfig<Schema>, { type, value }?: {
-    type?: string;
+    type?: HTMLInputTypeAttribute;
     value?: string;
-}): InputHTMLAttributes<HTMLInputElement>;
-export declare function select<Schema extends Primitive | Array<Primitive>>(config: FieldConfig<Schema>): SelectHTMLAttributes<HTMLSelectElement>;
-export declare function textarea<Schema extends Primitive>(config: FieldConfig<Schema>): TextareaHTMLAttributes<HTMLTextAreaElement>;
+}): InputProps<Schema>;
+export declare function select<Schema extends Primitive | Array<Primitive>>(config: FieldConfig<Schema>): SelectProps;
+export declare function textarea<Schema extends Primitive>(config: FieldConfig<Schema>): TextareaProps;
+export {};

package/helpers.js

@@ -21,23 +21,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,
@@ -45,16 +41,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,
@@ -64,11 +57,9 @@ function textarea(config) {
     maxLength: config.maxLength,
     autoFocus: Boolean(config.initialError)
   };
-
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-
   return attributes;
 }
 

package/hooks.d.ts

@@ -66,7 +66,7 @@ interface Form<Schema extends Record<string, any>> {
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
  */
 export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
 /**
@@ -107,7 +107,7 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
 /**
  * Returns all the information about the fieldset.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usefieldset
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldset
  */
 export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldsetConfig<Schema>): Fieldset<Schema>;
 export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Schema>): Fieldset<Schema>;
@@ -124,7 +124,7 @@ declare type ListCommandPayload<Schema, Type extends ListCommand<FieldValue<Sche
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
  */
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
     Array<{
@@ -160,7 +160,7 @@ interface InputControl<Element extends {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
  */
 export declare function useControlledInput<Element extends {
     focus: () => void;