react-compose-form 0.0.4 → 0.0.5-beta.1

package/README.md

@@ -1,12 +1,12 @@
 # react-compose-form
 
 [![npm version](https://img.shields.io/npm/v/react-compose-form.svg)](https://www.npmjs.com/package/react-compose-form)
-[![Publish](https://github.com/kearisp/react-compose-form/actions/workflows/publish-latest.yml/badge.svg?event=release)](https://github.com/kearisp/react-compose-form/actions/workflows/publish-latest.yml)
+[![Beta](https://github.com/kearisp/react-compose-form/actions/workflows/publish-beta.yml/badge.svg?branch=v0.0.5&event=pull_request)](https://github.com/kearisp/react-compose-form/actions/workflows/publish-beta.yml)
 [![License](https://img.shields.io/npm/l/react-compose-form)](https://github.com/kearisp/react-compose-form/blob/master/LICENSE)
 
 [![npm total downloads](https://img.shields.io/npm/dt/react-compose-form.svg)](https://www.npmjs.com/package/react-compose-form)
 [![bundle size](https://img.shields.io/bundlephobia/minzip/react-compose-form)](https://bundlephobia.com/package/react-compose-form)
-![Coverage](https://gist.githubusercontent.com/kearisp/f17f46c6332ea3bb043f27b0bddefa9f/raw/coverage-react-compose-form-latest.svg)
+![Coverage](https://gist.githubusercontent.com/kearisp/f17f46c6332ea3bb043f27b0bddefa9f/raw/coverage-react-compose-form-beta.svg)
 
 ```shell
 npm i react-hook-form react-compose-form

package/lib/blocks/FormControl.d.ts

@@ -1,10 +1,11 @@
 import { ComponentType } from "react";
-import { ControllerRenderProps, Message, ValidationRule, ControllerFieldState } from "react-hook-form";
+import { Control, ControllerRenderProps, Message, ValidationRule, ControllerFieldState } from "react-hook-form";
 export type FormFieldProps<P = unknown> = P & Partial<ControllerRenderProps & ControllerFieldState>;
 export type FormControlProps<P = unknown> = Omit<P, "as" | "name" | "disabled" | "required" | keyof ControllerFieldState | keyof ControllerRenderProps> & {
     as?: ComponentType<FormFieldProps<P>>;
     name: string;
     disabled?: boolean;
     required?: Message | ValidationRule<boolean>;
+    control?: Control;
 };
 export declare const FormControl: <P = unknown>(props: FormControlProps<P>) => import("react/jsx-runtime").JSX.Element;

package/lib/blocks/FormControl.js

@@ -13,11 +13,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
 import { FormControlContext } from "../contexts";
 import { useFormGroupName } from "../hooks";
-export const FormControl = (props) => {
-    const { as: Component = "input", name, disabled = false, required } = props, rest = __rest(props, ["as", "name", "disabled", "required"]);
+const ControllerWithContext = (props) => {
     const { control } = useFormContext();
+    return (_jsx(Controller, Object.assign({}, props, { control: control })));
+};
+export const FormControl = (props) => {
+    const { as: Component = "input", name, disabled = false, required, control } = props, rest = __rest(props, ["as", "name", "disabled", "required", "control"]);
     const fullName = useFormGroupName(name);
-    return (_jsx(Controller, { control: control, disabled: disabled, name: fullName, rules: {
+    const C = control ? Controller : ControllerWithContext;
+    return (_jsx(C, { control: control, disabled: disabled, name: fullName, rules: {
             required
         }, render: ({ field, fieldState }) => {
             return (_jsx(FormControlContext, { value: fieldState, children: _jsx(Component, Object.assign({}, rest, field)) }));

package/lib/blocks/FormSubmit.d.ts

@@ -0,0 +1,8 @@
+import { ElementType } from "react";
+import { Control } from "react-hook-form";
+import { PolymorphicComponentProps } from "../types/PolymorphicComponentProps";
+type FormSubmitProps<T extends ElementType = "button"> = PolymorphicComponentProps<T, {
+    control?: Control;
+}>;
+export declare const FormSubmit: <T extends ElementType = "button">(props: FormSubmitProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/blocks/FormSubmit.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+export const FormSubmit = (props) => {
+    const Component = props.control ? SubmitWrapper : SubmitWrapperWithContext;
+    return (_jsx(Component, Object.assign({}, props, { control: props.control })));
+};
+const SubmitWrapperWithContext = (props) => {
+    const { control } = useFormContext();
+    return (_jsx(SubmitWrapper, Object.assign({}, props, { control: control })));
+};
+const SubmitWrapper = (props) => {
+    const { as: Component = "button", control } = props, rest = __rest(props, ["as", "control"]);
+    return (_jsx(Component, Object.assign({}, rest)));
+};

package/lib/types/PolymorphicComponentProps.d.ts

@@ -0,0 +1,7 @@
+import { ElementType, ComponentPropsWithoutRef } from "react";
+type AsProp<T extends ElementType> = {
+    as?: T;
+};
+type PropsToOmit<T extends ElementType, P> = keyof (AsProp<T> & P);
+export type PolymorphicComponentProps<T extends ElementType, Props = {}> = Props & AsProp<T> & Omit<ComponentPropsWithoutRef<T>, PropsToOmit<T, Props>>;
+export {};

package/lib/types/PolymorphicComponentProps.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-compose-form",
-    "version": "0.0.4",
+    "version": "0.0.5-beta.1",
     "description": "Composable form components built on top of React Hook Form",
     "author": "Kris Papercut <krispcut@gmail.com>",
     "license": "MIT",