@strictly/react-form 0.0.32 → 0.0.34

package/.out/util/Partial.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { observer } from 'mobx-react';
+import { Observer } from 'mobx-react';
 import { forwardRef, useMemo, } from 'react';
 export function createSimplePartialComponent(Component, curriedProps) {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -65,7 +65,7 @@ export function createPartialObserverComponent(Component, curriedPropsSource, ad
 }
 export function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return observer(forwardRef(function (props, ref) {
+    return forwardRef(function (props, ref) {
         // forward ref types are really difficult to work with
         // still needs a cast as `extends ComponentType<any>` != `ComponentType<any>`
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion
@@ -90,10 +90,12 @@ export function createUnsafePartialObserverComponent(Component, curriedPropsSour
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
             Object.assign({}, props),
         ]);
-        // TODO is there any way we can memoize this transformation?
-        const curriedProps = curriedPropsSource(additionalProps);
-        return (_jsx(C, Object.assign({ ref: ref }, curriedProps, exposedProps)));
-    }));
+        return (_jsx(Observer, { children: () => {
+                // TODO is there any way we can memoize this transformation?
+                const curriedProps = curriedPropsSource(additionalProps);
+                return (_jsx(C, Object.assign({ ref: ref }, curriedProps, exposedProps)));
+            } }));
+    });
 }
 export function usePartialObserverComponent(
 // has to be first so eslint react-hooks/exhaustive-deps can find the callback

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: es6
 CJS Build start
 ESM Build start
-CJS dist/index.cjs 64.18 KB
-CJS ⚡️ Build success in 121ms
-ESM dist/index.js 60.02 KB
-ESM ⚡️ Build success in 126ms
+ESM dist/index.js 60.01 KB
+ESM ⚡️ Build success in 127ms
+CJS dist/index.cjs 64.19 KB
+CJS ⚡️ Build success in 158ms
 DTS Build start
-DTS ⚡️ Build success in 6938ms
-DTS dist/index.d.cts 38.43 KB
-DTS dist/index.d.ts  38.43 KB
-Done in 8.16s.
+DTS ⚡️ Build success in 6824ms
+DTS dist/index.d.cts 38.69 KB
+DTS dist/index.d.ts  38.69 KB
+Done in 8.27s.

package/.turbo/turbo-check-types.log

@@ -1,3 +1,3 @@
 yarn run v1.22.22
 $ tsc -b
-Done in 0.37s.
+Done in 0.41s.

package/core/mobx/hooks.tsx

@@ -1,5 +1,6 @@
 import {
   type ReadonlyTypeOfType,
+  type Type,
   type ValueOfType,
 } from '@strictly/define'
 import {
@@ -13,13 +14,25 @@ import {
 import { peek } from './peek'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type ValueOfModel<M extends FormModel<any, any, any, any, any>> = M extends FormModel<infer T, any, any, any, any>
+type FormModelInterface<T extends Type = any> = Pick<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  FormModel<T, any, any, any, any>,
+  | 'fields'
+  | 'value'
+  | 'getValidation'
+  | 'validateField'
+  | 'setFieldValue'
+  | 'validateSubmit'
+  | 'isFieldDirty'
+  | 'isValuePathActive'
+>
+
+type ValueOfModel<M extends FormModelInterface> = M extends FormModelInterface<infer T>
   ? ValueOfType<ReadonlyTypeOfType<T>>
   : never
 
 export function useDefaultMobxFormHooks<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  M extends FormModel<any, any, any, any, any>,
+  M extends FormModelInterface,
   F extends M['fields'] = M['fields'],
 >(
   model: M,

package/dist/index.cjs

@@ -1306,36 +1306,36 @@ function createPartialObserverComponent(Component, curriedPropsSource, additiona
   );
 }
 function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return (0, import_mobx_react.observer)(
-    (0, import_react2.forwardRef)(
-      function(props, ref) {
-        const C = Component;
-        const [
-          additionalProps,
-          exposedProps
-        ] = additionalPropKeys.reduce(
-          function([
+  return (0, import_react2.forwardRef)(
+    function(props, ref) {
+      const C = Component;
+      const [
+        additionalProps,
+        exposedProps
+      ] = additionalPropKeys.reduce(
+        function([
+          additionalProps2,
+          exposedProps2
+        ], key) {
+          const value = props[
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            key
+          ];
+          delete exposedProps2[key];
+          additionalProps2[key] = value;
+          return [
             additionalProps2,
             exposedProps2
-          ], key) {
-            const value = props[
-              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-              key
-            ];
-            delete exposedProps2[key];
-            additionalProps2[key] = value;
-            return [
-              additionalProps2,
-              exposedProps2
-            ];
-          },
-          [
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            {},
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            __spreadValues({}, props)
-          ]
-        );
+          ];
+        },
+        [
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          {},
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          __spreadValues({}, props)
+        ]
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mobx_react.Observer, { children: () => {
         const curriedProps = curriedPropsSource(additionalProps);
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           C,
@@ -1343,8 +1343,8 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
             ref
           }, curriedProps), exposedProps)
         );
-      }
-    )
+      } });
+    }
   );
 }
 function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
@@ -1977,7 +1977,7 @@ var MantineFormImpl = class {
       this
     );
   }
-  // TODO have an option to bind to a Text/(value: T) => JSX.Element for viewing form fields
+  // TODO have an option to bind to a Text/(value: T) => ReactNode for viewing form fields
 };
 _init2 = __decoratorStart(null);
 _fields = new WeakMap();

package/dist/index.d.cts

@@ -4,6 +4,7 @@ import { ValueOf, SimplifyDeep, ReadonlyDeep, UnionToIntersection, StringKeyOf,
 import { ComponentType, RefAttributes, ComponentProps, ForwardRefExoticComponent, PropsWithoutRef, Ref, DependencyList } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CheckboxProps, PillProps, RadioProps, RadioGroupProps, TextInputProps, SelectProps } from '@mantine/core';
+import { Observer } from 'mobx-react';
 
 declare enum UnreliableFieldConversionType {
     Success = 0,
@@ -180,8 +181,9 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     validateSubmit(): boolean;
 }
 
-type ValueOfModel<M extends FormModel<any, any, any, any, any>> = M extends FormModel<infer T, any, any, any, any> ? ValueOfType<ReadonlyTypeOfType<T>> : never;
-declare function useDefaultMobxFormHooks<M extends FormModel<any, any, any, any, any>, F extends M['fields'] = M['fields']>(model: M, { onValidFieldSubmit, onValidFormSubmit, }?: {
+type FormModelInterface<T extends Type = any> = Pick<FormModel<T, any, any, any, any>, 'fields' | 'value' | 'getValidation' | 'validateField' | 'setFieldValue' | 'validateSubmit' | 'isFieldDirty' | 'isValuePathActive'>;
+type ValueOfModel<M extends FormModelInterface> = M extends FormModelInterface<infer T> ? ValueOfType<ReadonlyTypeOfType<T>> : never;
+declare function useDefaultMobxFormHooks<M extends FormModelInterface, F extends M['fields'] = M['fields']>(model: M, { onValidFieldSubmit, onValidFormSubmit, }?: {
     onValidFieldSubmit?: <Path extends keyof F>(valuePath: Path) => void;
     onValidFormSubmit?: (value: ValueOfModel<M>) => void;
 }): {
@@ -376,7 +378,7 @@ type FieldViewProps<F extends Fields, K extends keyof F> = {
         onBlur: () => void;
         onValueChange: (v: ValueTypeOfField<F[K]>) => void;
         onSubmit: () => void;
-    }) => JSX.Element;
+    }) => ReturnType<NonNullable<ComponentProps<typeof Observer>['render']>>;
 };
 
 type SuppliedListProps<Value = any, ListPath extends string = string> = {

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { ValueOf, SimplifyDeep, ReadonlyDeep, UnionToIntersection, StringKeyOf,
 import { ComponentType, RefAttributes, ComponentProps, ForwardRefExoticComponent, PropsWithoutRef, Ref, DependencyList } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CheckboxProps, PillProps, RadioProps, RadioGroupProps, TextInputProps, SelectProps } from '@mantine/core';
+import { Observer } from 'mobx-react';
 
 declare enum UnreliableFieldConversionType {
     Success = 0,
@@ -180,8 +181,9 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     validateSubmit(): boolean;
 }
 
-type ValueOfModel<M extends FormModel<any, any, any, any, any>> = M extends FormModel<infer T, any, any, any, any> ? ValueOfType<ReadonlyTypeOfType<T>> : never;
-declare function useDefaultMobxFormHooks<M extends FormModel<any, any, any, any, any>, F extends M['fields'] = M['fields']>(model: M, { onValidFieldSubmit, onValidFormSubmit, }?: {
+type FormModelInterface<T extends Type = any> = Pick<FormModel<T, any, any, any, any>, 'fields' | 'value' | 'getValidation' | 'validateField' | 'setFieldValue' | 'validateSubmit' | 'isFieldDirty' | 'isValuePathActive'>;
+type ValueOfModel<M extends FormModelInterface> = M extends FormModelInterface<infer T> ? ValueOfType<ReadonlyTypeOfType<T>> : never;
+declare function useDefaultMobxFormHooks<M extends FormModelInterface, F extends M['fields'] = M['fields']>(model: M, { onValidFieldSubmit, onValidFormSubmit, }?: {
     onValidFieldSubmit?: <Path extends keyof F>(valuePath: Path) => void;
     onValidFormSubmit?: (value: ValueOfModel<M>) => void;
 }): {
@@ -376,7 +378,7 @@ type FieldViewProps<F extends Fields, K extends keyof F> = {
         onBlur: () => void;
         onValueChange: (v: ValueTypeOfField<F[K]>) => void;
         onSubmit: () => void;
-    }) => JSX.Element;
+    }) => ReturnType<NonNullable<ComponentProps<typeof Observer>['render']>>;
 };
 
 type SuppliedListProps<Value = any, ListPath extends string = string> = {

package/dist/index.js

@@ -1220,7 +1220,7 @@ import {
 } from "react";
 
 // util/Partial.tsx
-import { observer } from "mobx-react";
+import { Observer } from "mobx-react";
 import {
   forwardRef,
   useMemo
@@ -1306,36 +1306,36 @@ function createPartialObserverComponent(Component, curriedPropsSource, additiona
   );
 }
 function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return observer(
-    forwardRef(
-      function(props, ref) {
-        const C = Component;
-        const [
-          additionalProps,
-          exposedProps
-        ] = additionalPropKeys.reduce(
-          function([
+  return forwardRef(
+    function(props, ref) {
+      const C = Component;
+      const [
+        additionalProps,
+        exposedProps
+      ] = additionalPropKeys.reduce(
+        function([
+          additionalProps2,
+          exposedProps2
+        ], key) {
+          const value = props[
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            key
+          ];
+          delete exposedProps2[key];
+          additionalProps2[key] = value;
+          return [
             additionalProps2,
             exposedProps2
-          ], key) {
-            const value = props[
-              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-              key
-            ];
-            delete exposedProps2[key];
-            additionalProps2[key] = value;
-            return [
-              additionalProps2,
-              exposedProps2
-            ];
-          },
-          [
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            {},
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            __spreadValues({}, props)
-          ]
-        );
+          ];
+        },
+        [
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          {},
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          __spreadValues({}, props)
+        ]
+      );
+      return /* @__PURE__ */ jsx(Observer, { children: () => {
         const curriedProps = curriedPropsSource(additionalProps);
         return /* @__PURE__ */ jsx(
           C,
@@ -1343,8 +1343,8 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
             ref
           }, curriedProps), exposedProps)
         );
-      }
-    )
+      } });
+    }
   );
 }
 function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
@@ -1424,7 +1424,7 @@ import {
   jsonPathPrefix,
   jsonPathUnprefix
 } from "@strictly/define";
-import { observer as observer2 } from "mobx-react";
+import { observer } from "mobx-react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function createFieldsView(valuePath, FieldsView, observableProps) {
   function toKey(subKey) {
@@ -1448,7 +1448,7 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
     var _a;
     (_a = observableProps.onFieldSubmit) == null ? void 0 : _a.call(observableProps, toKey(subKey));
   }
-  const Component = observer2(
+  const Component = observer(
     function(props) {
       const subFields = Object.entries(observableProps.fields).reduce(
         (acc, [
@@ -1488,7 +1488,7 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
 }
 
 // mantine/createFieldView.tsx
-import { Observer } from "mobx-react";
+import { Observer as Observer2 } from "mobx-react";
 import {
   useCallback as useCallback2
 } from "react";
@@ -1533,7 +1533,7 @@ function FieldView({
     form,
     valuePath
   ]);
-  return /* @__PURE__ */ jsx4(Observer, { children: () => {
+  return /* @__PURE__ */ jsx4(Observer2, { children: () => {
     const {
       value,
       error
@@ -1562,13 +1562,13 @@ function createFieldView(valuePath) {
 }
 
 // mantine/createForm.tsx
-import { observer as observer3 } from "mobx-react";
+import { observer as observer2 } from "mobx-react";
 import {
   useCallback as useCallback3
 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function createForm(valuePath, Form, observableProps) {
-  return observer3((props) => {
+  return observer2((props) => {
     const { value } = observableProps.fields[valuePath];
     const onValueChange = useCallback3((value2) => {
       observableProps.onFieldValueChange(valuePath, value2);
@@ -1988,7 +1988,7 @@ var MantineFormImpl = class {
       this
     );
   }
-  // TODO have an option to bind to a Text/(value: T) => JSX.Element for viewing form fields
+  // TODO have an option to bind to a Text/(value: T) => ReactNode for viewing form fields
 };
 _init2 = __decoratorStart(null);
 _fields = new WeakMap();

package/mantine/createFieldView.tsx

@@ -1,5 +1,6 @@
 import { Observer } from 'mobx-react'
 import {
+  type ComponentProps,
   type ComponentType,
   useCallback,
 } from 'react'
@@ -19,7 +20,7 @@ export type FieldViewProps<F extends Fields, K extends keyof F> = {
     onBlur: () => void,
     onValueChange: (v: ValueTypeOfField<F[K]>) => void,
     onSubmit: () => void,
-  }) => JSX.Element,
+  }) => ReturnType<NonNullable<ComponentProps<typeof Observer>['render']>>,
 }
 
 /**

package/mantine/hooks.tsx

@@ -457,5 +457,5 @@ class MantineFormImpl<
     ) as unknown as MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P, never>
   }
 
-  // TODO have an option to bind to a Text/(value: T) => JSX.Element for viewing form fields
+  // TODO have an option to bind to a Text/(value: T) => ReactNode for viewing form fields
 }

package/package.json

@@ -1,10 +1,6 @@
 {
   "author": "Chris <chris.glover@gmail.com> (@madmaw)",
-  "dependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "type-fest": "^4.27.0"
-  },
+  "dependencies": {},
   "description": "Types and utilities for creating React forms",
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
@@ -22,11 +18,14 @@
     "@strictly/support-vite": "*",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "concurrently": "^9.1.2",
     "jsdom": "^25.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "storybook": "^8.4.5",
+    "type-fest": "^4.27.0",
     "vite": "^6.0.5",
     "vitest-matchmedia-mock": "^1.0.6"
   },
@@ -43,6 +42,8 @@
     "@mantine/hooks": "^7.0.0 || ^8.0.0",
     "@strictly/base": "*",
     "@strictly/define": "*",
+    "@types/react": "^19.0.0 || ^18.0.0",
+    "@types/react-dom": "^19.0.0 || ^18.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.1.1",
     "react": "^19.0.0 || ^18.0.0",
@@ -72,7 +73,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "exports": {
     ".": {
       "import": {

package/util/Partial.tsx

@@ -1,5 +1,5 @@
 import { type FriendlyExhaustiveArrayOfUnion } from '@strictly/base'
-import { observer } from 'mobx-react'
+import { Observer } from 'mobx-react'
 import {
   type ComponentProps,
   type ComponentType,
@@ -274,62 +274,65 @@ export function createUnsafePartialObserverComponent<
   additionalPropKeys: readonly (keyof AdditionalProps)[] = [],
 ): UnsafePartialComponent<Component, CurriedProps, AdditionalProps> {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  return observer(
-    forwardRef(
-      function (
-        props: PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>,
-        ref: ForwardedRef<typeof Component>,
-      ) {
-        // forward ref types are really difficult to work with
-        // still needs a cast as `extends ComponentType<any>` != `ComponentType<any>`
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion
-        const C = Component as ComponentType<any>
-        // remove the additional props from the exposed props that get passed in to the component
-        // as this generates react warnings
-        const [
-          additionalProps,
-          exposedProps,
-        ] = additionalPropKeys.reduce<[AdditionalProps, RemainingComponentProps<Component, CurriedProps>]>(
-          function (
-            [
-              additionalProps,
-              exposedProps,
-            ],
-            key,
-          ) {
-            const value = props[
-              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-              key as keyof PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>
-            ]
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            delete exposedProps[key as keyof RemainingComponentProps<Component, CurriedProps>]
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-            additionalProps[key] = value as any
-            return [
-              additionalProps,
-              exposedProps,
-            ]
-          },
+  return forwardRef(
+    function (
+      props: PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>,
+      ref: ForwardedRef<typeof Component>,
+    ) {
+      // forward ref types are really difficult to work with
+      // still needs a cast as `extends ComponentType<any>` != `ComponentType<any>`
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion
+      const C = Component as ComponentType<any>
+      // remove the additional props from the exposed props that get passed in to the component
+      // as this generates react warnings
+      const [
+        additionalProps,
+        exposedProps,
+      ] = additionalPropKeys.reduce<[AdditionalProps, RemainingComponentProps<Component, CurriedProps>]>(
+        function (
           [
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            {} as AdditionalProps,
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            { ...props } as RemainingComponentProps<Component, CurriedProps>,
+            additionalProps,
+            exposedProps,
           ],
-        )
-
-        // TODO is there any way we can memoize this transformation?
-        const curriedProps = curriedPropsSource(additionalProps)
+          key,
+        ) {
+          const value = props[
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            key as keyof PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>
+          ]
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          delete exposedProps[key as keyof RemainingComponentProps<Component, CurriedProps>]
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+          additionalProps[key] = value as any
+          return [
+            additionalProps,
+            exposedProps,
+          ]
+        },
+        [
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          {} as AdditionalProps,
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          { ...props } as RemainingComponentProps<Component, CurriedProps>,
+        ],
+      )
+      return (
+        <Observer>
+          {() => {
+            // TODO is there any way we can memoize this transformation?
+            const curriedProps = curriedPropsSource(additionalProps)
 
-        return (
-          <C
-            ref={ref}
-            {...curriedProps}
-            {...exposedProps}
-          />
-        )
-      },
-    ),
+            return (
+              <C
+                ref={ref}
+                {...curriedProps}
+                {...exposedProps}
+              />
+            )
+          }}
+        </Observer>
+      )
+    },
   ) as UnsafePartialComponent<Component, CurriedProps, AdditionalProps>
 }