@formality-ui/react 0.1.0 → 0.2.1

package/README.md

@@ -606,13 +606,14 @@ plain `<input>` use `ref={forwardRef}`. For **MUI v9** components (e.g.
 slotProps={{ input: { ref: forwardRef } }}
 ```
 
-**Runtime caveat (important).** Today `Field` delivers the RHF ref via the
-React-special `ref` key, **not** a top-level `forwardRef` prop. To receive it
-as `forwardRef` on a bare function component, either wrap your component with
-`React.forwardRef`, or target React 19's ref-as-prop. Making `Field` deliver a
-top-level `forwardRef` key for bare components is a future runtime task; the
-type ships the **intended contract now** so consumers can stop hand-rolling
-`WithFormality`.
+**Runtime delivery (important).** `<Field>` delivers the RHF ref as a regular,
+top-level `forwardRef` prop — no `React.forwardRef` wrap is required for a
+plain function component that destructures `forwardRef` and wires it to the
+inner input (`ref={forwardRef}`). Consumers migrating off the old
+React-special `ref` key: a `React.forwardRef`-wrapped component should consume
+`props.forwardRef` (PRD §20.4), and under React 19 ref-as-prop use `forwardRef`
+directly. The type ships the **intended contract** so consumers can stop
+hand-rolling `WithFormality`.
 
 ## Utilities
 

package/dist/index.cjs

@@ -562,11 +562,18 @@ function useInferredInputs(options) {
     selectProps,
     formDefaultFieldProps,
     providerDefaultFieldProps,
-    conditions = [],
-    subscribesTo = []
+    conditions,
+    subscribesTo
   } = options;
+  const signature = JSON.stringify({
+    selectProps,
+    formDefaultFieldProps,
+    providerDefaultFieldProps,
+    conditions,
+    subscribesTo
+  });
   return react.useMemo(() => {
-    const inferred = [...subscribesTo];
+    const inferred = [...subscribesTo ?? []];
     if (providerDefaultFieldProps) {
       inferred.push(...core.inferFieldsFromDescriptor(providerDefaultFieldProps));
     }
@@ -576,17 +583,11 @@ function useInferredInputs(options) {
     if (selectProps) {
       inferred.push(...core.inferFieldsFromDescriptor(selectProps));
     }
-    if (conditions.length > 0) {
+    if (conditions && conditions.length > 0) {
       inferred.push(...core.inferFieldsFromConditions(conditions));
     }
     return [...new Set(inferred)];
-  }, [
-    providerDefaultFieldProps,
-    formDefaultFieldProps,
-    selectProps,
-    conditions,
-    subscribesTo
-  ]);
+  }, [signature]);
 }
 
 // src/hooks/useConditions.ts
@@ -1117,21 +1118,33 @@ function Field({
             [inputConfig.inputFieldProp ?? "value"]: formattedValue,
             onChange: handleChange(field.onChange),
             onBlur: field.onBlur,
-            ref: field.ref
+            forwardRef: field.ref
           }
         });
         const Component = inputConfig.component;
+        const isHostComponent = typeof inputConfig.component === "string";
         const template = inputConfig.template ?? providerConfig.inputTemplates[type] ?? providerConfig.defaultInputTemplate;
         const TemplateComponent = template;
-        const renderedField = TemplateComponent ? /* @__PURE__ */ jsxRuntime.jsx(
-          TemplateComponent,
-          {
-            Field: Component,
-            fieldProps: finalProps,
-            fieldState,
-            formState
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(Component, { ...finalProps });
+        let renderedField;
+        if (TemplateComponent) {
+          renderedField = /* @__PURE__ */ jsxRuntime.jsx(
+            TemplateComponent,
+            {
+              Field: Component,
+              fieldProps: finalProps,
+              fieldState,
+              formState
+            }
+          );
+        } else if (isHostComponent) {
+          const { forwardRef: hostRef, ...restHostProps } = finalProps;
+          renderedField = react.createElement(inputConfig.component, {
+            ...restHostProps,
+            ref: hostRef
+          });
+        } else {
+          renderedField = /* @__PURE__ */ jsxRuntime.jsx(Component, { ...finalProps });
+        }
         if (typeof children === "function") {
           const result = children({
             fieldState,