feat(wrapper): wrapper component allow to use custom fields

BREAKING CHANGE: Wrapper is the new way to register a custom component

src/Wrapper.tsx

@@ -0,0 +1,58 @@
+import React, { Fragment } from 'react'
+import { EventChange, Field } from '.'
+
+type Props = {
+   component: React.JSXElementConstructor<any>
+} & any
+
+function WrapperComponent(
+   { component, ...rest }: Props,
+   ref: React.RefObject<Field>
+) {
+   const Component = component
+   const [value, setValue] = React.useState<any>(null)
+
+   function handleOnChange(e: any) {
+      if (ref.current) {
+         ref.current.value = e
+         ref.current?.dispatchEvent(new CustomEvent('input', { detail: e }))
+      }
+   }
+
+   function handleOnBlur(e: any) {
+      if (ref.current) {
+         ref.current.value = e
+         ref.current?.dispatchEvent(new CustomEvent('blur', { detail: true }))
+      }
+   }
+
+   function handleEvent(e: EventChange) {
+      setValue(e.detail ?? e.target.value)
+   }
+
+   React.useEffect(() => {
+      if (ref.current) {
+         ref.current.addEventListener('input', handleEvent)
+      }
+      return () => {
+         if (ref.current) {
+            ref.current.removeEventListener('input', handleEvent)
+         }
+      }
+   }, [ref.current])
+
+   return (
+      <Fragment>
+         <div ref={ref} hidden />
+         <Component
+            {...rest}
+            value={value}
+            selected={ref.current?.value}
+            onChange={handleOnChange}
+            onBlur={handleOnBlur}
+         />
+      </Fragment>
+   )
+}
+
+export const Wrapper = React.forwardRef(WrapperComponent)