feat: add support for React 19 + Semantic-ui-react v3-beta

Author: felixmosh

.github/workflows/main.yml

@@ -24,12 +24,13 @@ jobs:
         env:
           CI: true
 
-      - name: Test
-        run: yarn test --ci --coverage --maxWorkers=2
+      # Build first: the Types spec type-checks the emitted dist/*.d.ts files.
+      - name: Build
+        run: yarn build
         env:
           CI: true
 
-      - name: Build
-        run: yarn build
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
         env:
           CI: true

.gitignore

@@ -5,3 +5,4 @@ node_modules
 dist
 .idea
 .parcel-cache
+coverage

example/package.json

@@ -18,6 +18,6 @@
   },
   "devDependencies": {
     "parcel": "^2.13.3",
-    "typescript": "^5.7.3"
+    "typescript": "^6.0.3"
   }
 }

example/yarn.lock

@@ -1549,10 +1549,10 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typescript@^5.7.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.3.tgz#919b44a7dbb8583a9b856d162be24a54bf80073e"
-  integrity sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==
+typescript@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-6.0.3.tgz#90251dc007916e972786cb94d74d15b185577d21"
+  integrity sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==
 
 update-browserslist-db@^1.1.1:
   version "1.1.2"

package.json

@@ -42,38 +42,39 @@
     "version": "auto-changelog -p && git add CHANGELOG.md"
   },
   "dependencies": {
-    "formsy-react": "^2.3.2",
-    "hoist-non-react-statics": "^3.3.2",
-    "semantic-ui-react": "^2.1.5"
+    "formsy-react": "^2.4.6",
+    "hoist-non-react-statics": "^3.3.2"
   },
   "devDependencies": {
-    "@rsbuild/plugin-react": "^2.0.0",
-    "@rsbuild/plugin-type-check": "^1.3.4",
-    "@rslib/core": "^0.20.3",
-    "@swc/core": "^1.15.32",
+    "@rsbuild/plugin-react": "^2.1.1",
+    "@rsbuild/plugin-type-check": "^1.6.1",
+    "@rslib/core": "^1.0.3",
+    "@types/node":"24.19.2",
+    "@swc/core": "^1.16.18",
     "@swc/jest": "^0.2.39",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
-    "auto-changelog": "^2.4.0",
-    "bumpp": "^11.1.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "auto-changelog": "^2.7.0",
+    "bumpp": "^12.3.0",
     "husky": "^4.2.5",
-    "jest": "^30.3.0",
-    "jest-environment-jsdom": "^30.3.0",
-    "oxfmt": "^0.47.0",
-    "oxlint": "^1.62.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tslib": "^2.8.1",
-    "typescript": "^5.7.3"
+    "jest": "^30.5.2",
+    "jest-environment-jsdom": "^30.5.2",
+    "oxfmt": "^0.72.0",
+    "oxlint": "^1.87.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "semantic-ui-react": "^3.0.0-beta.2",
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "react": ">=16 || >=17 || >=18 || >=19"
+    "react": ">=16 || >=17 || >=18 || >=19",
+    "semantic-ui-react": "^2.1.5 || ^3.0.0-beta.2"
   },
   "husky": {
     "hooks": {

src/Form.tsx

@@ -1,9 +1,10 @@
 import type { InjectedProps } from 'formsy-react';
 import Formsy from 'formsy-react';
+import type { FormsyComponent } from './types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import React, { Component, ComponentProps } from 'react';
 import { Form as SemanticUIForm, StrictFormProps } from 'semantic-ui-react';
-import FormsyCheckbox from './FormsyCheckbox';
+import FormsyCheckbox, { type CheckboxRadioValueType, type IFormsyCheckboxProps } from './FormsyCheckbox';
 import FormsyDropdown, { IFormsyDropdownProps } from './FormsyDropdown';
 import FormsyInput, { IFormsyInputProps } from './FormsyInput';
 import FormsyRadioGroup, { IFormsyRadioGroupProps } from './FormsyRadioGroup';
@@ -17,7 +18,7 @@ class Form extends Component<IFormProps & { forwardedRef: any }> {
   static Radio = SemanticUIForm.Radio;
   static Field = SemanticUIForm.Field;
   static Group = SemanticUIForm.Group;
-  static Checkbox = FormsyCheckbox;
+  static Checkbox: FormsyComponent<IFormsyCheckboxProps, CheckboxRadioValueType> = FormsyCheckbox;
 
   static Input = (props: Omit<IFormsyInputProps, keyof InjectedProps<any>>) => (
     <FormsyInput inputAs={SemanticUIForm.Input} {...props} />
@@ -82,7 +83,20 @@ class Form extends Component<IFormProps & { forwardedRef: any }> {
   }
 }
 
-export default hoistNonReactStatics(
+const FormComponent = hoistNonReactStatics(
   React.forwardRef<Formsy, IFormProps>((props: IFormProps, ref) => <Form {...props} forwardedRef={ref} />),
   Form
 );
+
+/**
+ * Only the static sub-components are re-exported. Intersecting with `typeof Form` instead
+ * would preserve the class's *construct* signature, which makes JSX treat `Form` as a class
+ * component whose props include the internal `forwardedRef` prop — surfacing as a required
+ * prop for every consumer.
+ */
+type FormStatics = Pick<
+  typeof Form,
+  'Button' | 'Radio' | 'Field' | 'Group' | 'Checkbox' | 'Input' | 'TextArea' | 'Select' | 'RadioGroup' | 'Dropdown'
+>;
+
+export default FormComponent as React.ForwardRefExoticComponent<IFormProps & React.RefAttributes<Formsy>> & FormStatics;

src/FormsyCheckbox.tsx

@@ -1,9 +1,10 @@
 import { FormsyInjectedProps, withFormsy } from 'formsy-react';
 import React, { cloneElement, Component, createElement } from 'react';
 import { Checkbox, Form, Radio, StrictFormFieldProps, StrictRadioProps } from 'semantic-ui-react';
+import type { FormsyComponent } from './types';
 import { filterSuirElementProps } from './utils';
 
-type CheckboxRadioValueType = boolean | number | string;
+export type CheckboxRadioValueType = boolean | number | string;
 
 export interface IFormsyCheckboxProps
   extends
@@ -91,4 +92,4 @@ class FormsyCheckbox extends Component<IFormsyCheckboxProps> {
   }
 }
 
-export default withFormsy(FormsyCheckbox);
+export default withFormsy(FormsyCheckbox) as FormsyComponent<IFormsyCheckboxProps, CheckboxRadioValueType>;

src/FormsyDropdown.tsx

@@ -1,7 +1,8 @@
 import { FormsyInjectedProps, withFormsy } from 'formsy-react';
 import React, { cloneElement, Component, createElement } from 'react';
 import { Dropdown, Form, Select, StrictDropdownProps, StrictFormFieldProps } from 'semantic-ui-react';
-import { filterSuirElementProps } from './utils';
+import type { FormsyComponent } from './types';
+import { filterSuirElementProps, resolveControlComponent } from './utils';
 
 type FormsyDropdownValue = StrictDropdownProps['value'];
 
@@ -93,7 +94,7 @@ class FormsyDropdown extends Component<IFormsyDropdownProps> {
       name: undefined,
     };
 
-    const dropdownNode = shortHandMode ? (createElement(inputAs as any, dropdownProps).props as any).control : inputAs;
+    const dropdownNode = shortHandMode ? resolveControlComponent(inputAs) : inputAs;
 
     return (
       <Form.Field
@@ -113,4 +114,4 @@ class FormsyDropdown extends Component<IFormsyDropdownProps> {
   }
 }
 
-export default withFormsy(FormsyDropdown);
+export default withFormsy(FormsyDropdown) as FormsyComponent<IFormsyDropdownProps, FormsyDropdownValue>;

src/FormsyInput.tsx

@@ -1,7 +1,8 @@
 import { FormsyInjectedProps, withFormsy } from 'formsy-react';
 import React, { cloneElement, Component, createElement, InputHTMLAttributes, isValidElement } from 'react';
 import { Form, Input, InputOnChangeData, StrictFormFieldProps, StrictInputProps } from 'semantic-ui-react';
-import { filterSuirElementProps } from './utils';
+import type { FormsyComponent } from './types';
+import { filterSuirElementProps, resolveControlComponent } from './utils';
 
 type SemanticFormField = Pick<StrictFormFieldProps, 'as' | 'className' | 'error' | 'width' | 'inline' | 'disabled'>;
 type SemanticInputProps = Omit<StrictInputProps, 'error'>;
@@ -96,7 +97,7 @@ class FormsyInput extends Component<IFormsyInputProps> {
     };
 
     const isFormField = inputAs === Form.Input || inputAs === Form.TextArea;
-    const inputNode = isFormField ? (createElement(inputAs as any).props as any).control : inputAs;
+    const inputNode = isFormField ? resolveControlComponent(inputAs) : inputAs;
 
     if (isFormField) {
       inputProps.label = undefined;
@@ -130,4 +131,4 @@ class FormsyInput extends Component<IFormsyInputProps> {
   }
 }
 
-export default withFormsy(FormsyInput);
+export default withFormsy(FormsyInput) as FormsyComponent<IFormsyInputProps, any>;

src/FormsyRadioGroup.tsx

@@ -1,6 +1,7 @@
 import { FormsyInjectedProps, withFormsy } from 'formsy-react';
 import React, { Children, cloneElement, Component } from 'react';
 import { Form, RadioProps, StrictFormFieldProps, StrictRadioProps } from 'semantic-ui-react';
+import type { FormsyComponent } from './types';
 import { StrictFormGroupProps } from 'semantic-ui-react/dist/commonjs/collections/Form/FormGroup';
 import { CheckboxProps } from 'semantic-ui-react/dist/commonjs/modules/Checkbox/Checkbox';
 
@@ -99,4 +100,4 @@ class FormsyRadioGroup extends Component<IFormsyRadioGroupProps> {
   }
 }
 
-export default withFormsy(FormsyRadioGroup);
+export default withFormsy(FormsyRadioGroup) as FormsyComponent<IFormsyRadioGroupProps, RadioGroupValueType>;