@strictly/react-form 0.0.31 → 0.0.33

package/dist/index.js

@@ -312,6 +312,7 @@ import {
   UnreachableError as UnreachableError2
 } from "@strictly/base";
 import {
+  copy,
   equals,
   flattenAccessorsOfType,
   flattenTypesOfType,
@@ -322,6 +323,7 @@ import {
   valuePathToTypePath
 } from "@strictly/define";
 import {
+  action,
   computed,
   observable,
   runInAction
@@ -332,8 +334,8 @@ var Validation = /* @__PURE__ */ ((Validation2) => {
   Validation2[Validation2["Always"] = 2] = "Always";
   return Validation2;
 })(Validation || {});
-var _valueChanged_dec, _dirty_dec, _accessors_dec, _knownFields_dec, _fields_dec, _validation_dec, _errorOverrides_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errorOverrides, _validation;
-_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errorOverrides_dec = [observable.shallow], _validation_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed], _dirty_dec = [computed], _valueChanged_dec = [computed];
+var _validateAll_dec, _validateField_dec, _setFieldValue_dec, _valueChanged_dec, _dirty_dec, _accessors_dec, _knownFields_dec, _fields_dec, _value_dec, _validation_dec, _errorOverrides_dec, _fieldOverrides_dec, _observableValue_dec, _init, _observableValue, _fieldOverrides, _errorOverrides, _validation;
+_observableValue_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errorOverrides_dec = [observable.shallow], _validation_dec = [observable.shallow], _value_dec = [computed], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed], _dirty_dec = [computed], _valueChanged_dec = [computed], _setFieldValue_dec = [action], _validateField_dec = [action], _validateAll_dec = [action];
 var FormModel = class {
   constructor(type, originalValue, adapters, mode) {
     this.type = type;
@@ -341,7 +343,7 @@ var FormModel = class {
     this.adapters = adapters;
     this.mode = mode;
     __runInitializers(_init, 5, this);
-    __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _observableValue, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _fieldOverrides, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
     __privateAdd(this, _errorOverrides, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
     __privateAdd(this, _validation, __runInitializers(_init, 20, this, {})), __runInitializers(_init, 23, this);
@@ -352,11 +354,11 @@ var FormModel = class {
     // maintains the value paths of lists when the original order is destroyed by deletes or reordering
     __publicField(this, "listIndicesToKeys", {});
     this.originalValues = flattenValuesOfType(type, originalValue, this.listIndicesToKeys);
-    this.value = mobxCopy(type, originalValue);
+    this.observableValue = mobxCopy(type, originalValue);
     this.flattenedTypeDefs = flattenTypesOfType(type);
     const conversions = flattenValueTo(
       type,
-      this.value,
+      originalValue,
       () => {
       },
       (_t, fieldValue, _setter, typePath, valuePath) => {
@@ -390,6 +392,9 @@ var FormModel = class {
         throw new UnreachableError2(this.mode);
     }
   }
+  get value() {
+    return copy(this.type, this.observableValue);
+  }
   get fields() {
     return new Proxy(
       this.knownFields,
@@ -409,7 +414,7 @@ var FormModel = class {
   get knownFields() {
     return flattenValueTo(
       this.type,
-      this.value,
+      this.observableValue,
       () => {
       },
       // TODO swap these to valuePath, typePath in flatten
@@ -451,7 +456,7 @@ var FormModel = class {
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
     const fieldTypeDef = this.flattenedTypeDefs[typePath];
-    const context = this.toContext(this.value, valuePath);
+    const context = this.toContext(this.observableValue, valuePath);
     const defaultValue = create(valuePath, context);
     const {
       value,
@@ -543,9 +548,9 @@ var FormModel = class {
   get accessors() {
     return flattenAccessorsOfType(
       this.type,
-      this.value,
+      this.observableValue,
       (value) => {
-        this.value = mobxCopy(this.type, value);
+        this.observableValue = mobxCopy(this.type, value);
       },
       this.listIndicesToKeys
     );
@@ -567,7 +572,7 @@ var FormModel = class {
     });
   }
   get valueChanged() {
-    return !equals(this.type, this.value, this.originalValue);
+    return !equals(this.type, this.observableValue, this.originalValue);
   }
   typePath(valuePath) {
     return valuePathToTypePath(this.type, valuePath, true);
@@ -592,7 +597,7 @@ var FormModel = class {
       elementTypePath,
       // TODO what can we use for the value path here?
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      this.toContext(this.value, valuePath)
+      this.toContext(this.observableValue, valuePath)
     );
     const originalList = accessor.value;
     const newList = [
@@ -647,7 +652,7 @@ var FormModel = class {
   internalSetFieldValue(valuePath, value, validation) {
     const { revert } = this.getAdapterForValuePath(valuePath);
     assertExists(revert, "setting value not supported {}", valuePath);
-    const conversion = revert(value, valuePath, this.toContext(this.value, valuePath));
+    const conversion = revert(value, valuePath, this.toContext(this.observableValue, valuePath));
     const accessor = this.getAccessorForValuePath(valuePath);
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value];
@@ -702,7 +707,7 @@ var FormModel = class {
       convert,
       create
     } = adapter2;
-    const context = this.toContext(this.value, valuePath);
+    const context = this.toContext(this.observableValue, valuePath);
     const value = create(valuePath, context);
     const {
       value: displayValue
@@ -719,11 +724,11 @@ var FormModel = class {
       this.validation = {};
       this.fieldOverrides = {};
       this.errorOverrides = {};
-      this.value = mobxCopy(this.type, value);
+      this.observableValue = mobxCopy(this.type, value);
     });
   }
   isValuePathActive(valuePath) {
-    const values = flattenValuesOfType(this.type, this.value, this.listIndicesToKeys);
+    const values = flattenValuesOfType(this.type, this.observableValue, this.listIndicesToKeys);
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
@@ -766,18 +771,14 @@ var FormModel = class {
     return displayedValue !== originalDisplayedValue;
   }
   validateField(valuePath, validation = 2 /* Always */) {
-    runInAction(() => {
-      this.validation[valuePath] = validation;
-      delete this.errorOverrides[valuePath];
-    });
+    this.validation[valuePath] = validation;
+    delete this.errorOverrides[valuePath];
     return this.fields[valuePath].error == null;
   }
   validateAll(validation = 2 /* Always */) {
     const accessors = toArray(this.accessors);
-    runInAction(() => {
-      accessors.forEach(([valuePath]) => {
-        this.validation[valuePath] = validation;
-      });
+    accessors.forEach(([valuePath]) => {
+      this.validation[valuePath] = validation;
     });
     return accessors.every(
       ([valuePath]) => {
@@ -791,32 +792,50 @@ var FormModel = class {
   }
 };
 _init = __decoratorStart(null);
-_value = new WeakMap();
+_observableValue = new WeakMap();
 _fieldOverrides = new WeakMap();
 _errorOverrides = new WeakMap();
 _validation = new WeakMap();
-__decorateElement(_init, 4, "value", _value_dec, FormModel, _value);
+__decorateElement(_init, 4, "observableValue", _observableValue_dec, FormModel, _observableValue);
 __decorateElement(_init, 4, "fieldOverrides", _fieldOverrides_dec, FormModel, _fieldOverrides);
 __decorateElement(_init, 4, "errorOverrides", _errorOverrides_dec, FormModel, _errorOverrides);
 __decorateElement(_init, 4, "validation", _validation_dec, FormModel, _validation);
+__decorateElement(_init, 2, "value", _value_dec, FormModel);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
 __decorateElement(_init, 2, "dirty", _dirty_dec, FormModel);
 __decorateElement(_init, 2, "valueChanged", _valueChanged_dec, FormModel);
+__decorateElement(_init, 1, "setFieldValue", _setFieldValue_dec, FormModel);
+__decorateElement(_init, 1, "validateField", _validateField_dec, FormModel);
+__decorateElement(_init, 1, "validateAll", _validateAll_dec, FormModel);
 __decoratorMetadata(_init, FormModel);
 
 // core/mobx/hooks.tsx
 import {
   useCallback
 } from "react";
+
+// core/mobx/peek.ts
+import { when } from "mobx";
+function peek(operation) {
+  let result;
+  void when(() => {
+    result = operation();
+    return true;
+  });
+  return result;
+}
+
+// core/mobx/hooks.tsx
 function useDefaultMobxFormHooks(model, {
   onValidFieldSubmit,
   onValidFormSubmit
 } = {}) {
   const onFieldValueChange = useCallback(
     function(path, value) {
-      const validation = Math.min(model.getValidation(path), 1 /* Changed */);
+      const activeValidation = peek(() => model.getValidation(path));
+      const validation = Math.min(activeValidation, 1 /* Changed */);
       model.setFieldValue(path, value, validation);
     },
     [model]
@@ -836,8 +855,16 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = useCallback(
     function(path) {
       setTimeout(function() {
-        if (model.isValuePathActive(path) && model.isFieldDirty(path) && model.fields[path].error == null) {
-          model.validateField(path, Math.max(1 /* Changed */, model.getValidation(path)));
+        const [
+          validate4,
+          activeValidation
+        ] = peek(() => [
+          model.isValuePathActive(path) && model.isFieldDirty(path) && model.fields[path].error == null,
+          model.getValidation(path)
+        ]);
+        if (validate4) {
+          const validation = Math.max(1 /* Changed */, activeValidation);
+          model.validateField(path, validation);
         }
       }, 100);
     },
@@ -845,8 +872,10 @@ function useDefaultMobxFormHooks(model, {
   );
   const onFormSubmit = useCallback(
     function() {
-      if (model.validateSubmit()) {
-        onValidFormSubmit == null ? void 0 : onValidFormSubmit(model.value);
+      const valid = peek(() => model.validateSubmit());
+      if (valid && onValidFormSubmit) {
+        const value = peek(() => model.value);
+        onValidFormSubmit(value);
       }
     },
     [
@@ -1002,7 +1031,7 @@ var IntegerToStringConverter = class {
 
 // field_converters/NullableToBooleanConverter.ts
 import {
-  copy
+  copy as copy2
 } from "@strictly/define";
 var NullableToBooleanConverter = class {
   constructor(typeDef, prototype, nullType, defaultToNull = true) {
@@ -1021,7 +1050,7 @@ var NullableToBooleanConverter = class {
   }
   revert(from) {
     if (from) {
-      const value = copy(this.typeDef, this.prototype);
+      const value = copy2(this.typeDef, this.prototype);
       return {
         type: 0 /* Success */,
         value
@@ -1042,7 +1071,7 @@ import {
   reverse
 } from "@strictly/base";
 import {
-  copy as copy2
+  copy as copy3
 } from "@strictly/define";
 var AbstractSelectValueTypeConverter = class {
   constructor(typeDef, values, defaultValueKey, noSuchValueError, required) {
@@ -1061,7 +1090,7 @@ var AbstractSelectValueTypeConverter = class {
         value: null
       };
     }
-    const value = prototype == null ? prototype : copy2(this.typeDef, prototype);
+    const value = prototype == null ? prototype : copy3(this.typeDef, prototype);
     return {
       type: 0 /* Success */,
       value
@@ -1191,7 +1220,7 @@ import {
 } from "react";
 
 // util/Partial.tsx
-import { observer } from "mobx-react";
+import { Observer } from "mobx-react";
 import {
   forwardRef,
   useMemo
@@ -1277,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,
@@ -1314,8 +1343,8 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
             ref
           }, curriedProps), exposedProps)
         );
-      }
-    )
+      } });
+    }
   );
 }
 function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
@@ -1395,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) {
@@ -1419,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, [
@@ -1459,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";
@@ -1504,7 +1533,7 @@ function FieldView({
     form,
     valuePath
   ]);
-  return /* @__PURE__ */ jsx4(Observer, { children: () => {
+  return /* @__PURE__ */ jsx4(Observer2, { children: () => {
     const {
       value,
       error
@@ -1533,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);
@@ -1587,7 +1616,7 @@ function DefaultList({
       indexKeys[index]
     ];
   }).filter(function([
-    _value2,
+    _value,
     _index,
     key
   ]) {
@@ -1959,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();
@@ -2029,6 +2058,7 @@ export {
   mergeAdaptersWithValidators,
   mergeFieldAdaptersWithTwoWayConverter,
   mergeValidators,
+  peek,
   prototypingFieldValueFactory,
   subFormFieldAdapters,
   trimmingStringAdapter,

package/index.ts

@@ -7,6 +7,7 @@ export * from './core/mobx/FormModel'
 export * from './core/mobx/hooks'
 export * from './core/mobx/mergeFieldAdaptersWithTwoWayConverter'
 export * from './core/mobx/mergeFieldAdaptersWithValidators'
+export * from './core/mobx/peek'
 export * from './core/mobx/subFormFieldAdapters'
 export * from './core/props'
 export * from './field_converters/IntegerToStringConverter'

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.31",
+  "version": "0.0.33",
   "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>
 }