react-science 20.2.0 → 20.3.1

package/lib/components/form/components/input_groups/form.d.ts

@@ -4,5 +4,12 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
     children: ReactNode;
     layout?: Layout;
 }
+/**
+ * @param props
+ * @deprecated Use `AppForm` instead.
+ * This component will be merged into `AppForm` and removed in a next major release.
+ * During migration, consider removing the `onSubmit` props.
+ * If you did not bound `noValidate` props, you will have to bound `domValidate` to `AppForm`.
+ */
 export declare function Form(props: FormProps): import("react").JSX.Element;
 //# sourceMappingURL=form.d.ts.map

package/lib/components/form/components/input_groups/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,WAAW,SAAU,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,+BAYpC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,WAAW,SAAU,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,+BAYpC"}

package/lib/components/form/components/input_groups/form.js

@@ -1,6 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { formContext } from './form_context.js';
+/**
+ * @param props
+ * @deprecated Use `AppForm` instead.
+ * This component will be merged into `AppForm` and removed in a next major release.
+ * During migration, consider removing the `onSubmit` props.
+ * If you did not bound `noValidate` props, you will have to bound `domValidate` to `AppForm`.
+ */
 export function Form(props) {
     const { children, layout = 'stacked', ...otherProps } = props;
     const contextValue = useMemo(() => {

package/lib/components/form/components/input_groups/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE9D,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACvC,kBAAU,UAAU,YAAG,QAAQ,GAAQ,GAClB,CACxB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD;;;;;;GAMG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE9D,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACvC,kBAAU,UAAU,YAAG,QAAQ,GAAQ,GAClB,CACxB,CAAC;AACJ,CAAC"}

package/lib/components/form/components/layout/form.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode, SyntheticEvent } from 'react';
+import type { FormProps as DomFormProps } from '../input_groups/form.js';
+export interface AppFormProps extends Omit<DomFormProps, 'noValidate'> {
+    domValidate?: boolean;
+    /**
+     * should return meta to pass to `form.handleSubmit`
+     */
+    onSubmitMeta?: (event: SyntheticEvent<HTMLFormElement, SubmitEvent>) => any;
+}
+/**
+ * Mount `form.AppForm` and `Form` with default onSubmit.
+ * It reduces the boilerplate code.
+ */
+export declare const AppForm: MinimalFunctionComponent<MinimalProps<import("react").PropsWithChildren<NoInfer<AppFormProps> & {
+    form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<any, any, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, {
+        readonly Input: typeof import("../input/input.tsx").Input;
+        readonly NumericInput: typeof import("../input/numeric_input.tsx").NumericInput;
+        readonly Checkbox: typeof import("../input/checkbox.tsx").Checkbox;
+        readonly Select: typeof import("../input/select.tsx").Select;
+        readonly Switch: typeof import("../input/switch.tsx").Switch;
+        readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
+        readonly RadioGroup: typeof import("../input/radio_group.tsx").RadioGroup;
+    }, {
+        readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
+        readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;
+        readonly Section: typeof import("./Section.tsx").Section;
+    }>;
+}>>>;
+type MinimalProps<Props extends {
+    form: unknown;
+}> = Omit<Props, 'form'> & {
+    /**
+     * Some properties of form are ignored because it is known to produce type errors on usage.
+     */
+    form: Omit<Props['form'], 'pushFieldValue' | 'insertFieldValue' | 'replaceFieldValue'>;
+};
+type MinimalFunctionComponent<Props> = (props: Props) => ReactNode;
+export {};
+//# sourceMappingURL=form.d.ts.map

package/lib/components/form/components/layout/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/layout/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGzE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IAGH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,eAAe,EAAE,WAAW,CAAC,KAAK,GAAG,CAAC;CAC7E;AAWD;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;IAgCnB,CAAC;AAEF,KAAK,YAAY,CAAC,KAAK,SAAS;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG;IACzE;;OAEG;IACH,IAAI,EAAE,IAAI,CACR,KAAK,CAAC,MAAM,CAAC,EAKb,gBAAgB,GAAG,kBAAkB,GAAG,mBAAmB,CAC5D,CAAC;CACH,CAAC;AACF,KAAK,wBAAwB,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC"}

package/lib/components/form/components/layout/form.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { withForm } from '../../context/use_ts_form.js';
+import { Form as DomForm } from '../input_groups/form.js';
+const props = { children: null };
+// AppForm is a generic component for all forms
+// it will not touch to values inside the form,
+// and unknown is not possible.
+// <AppForm form={form}> would throw an error like "unknown is not compatible with <inferred values type>"
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const defaultValues = undefined;
+/**
+ * Mount `form.AppForm` and `Form` with default onSubmit.
+ * It reduces the boilerplate code.
+ */
+export const AppForm = minimalForm(withForm({
+    defaultValues,
+    props,
+    render: function FormRender(props) {
+        const { form, children, domValidate, onSubmitMeta, ...domProps } = props;
+        const { AppForm } = form;
+        return (_jsx(AppForm, { children: _jsx(DomForm, { onSubmit: (event) => {
+                    event.preventDefault();
+                    const meta = onSubmitMeta?.(
+                    // onSubmit event is not typed properly.
+                    // It uses Event instead of SubmitEvent.
+                    event);
+                    void form.handleSubmit(meta);
+                }, ...domProps, noValidate: !domValidate, children: children }) }));
+    },
+}));
+function minimalForm(component) {
+    return component;
+}
+//# sourceMappingURL=form.js.map

package/lib/components/form/components/layout/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../../src/components/form/components/layout/form.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAY1D,MAAM,KAAK,GAAiB,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE/C,+CAA+C;AAC/C,+CAA+C;AAC/C,+BAA+B;AAC/B,0GAA0G;AAC1G,8DAA8D;AAC9D,MAAM,aAAa,GAAQ,SAAS,CAAC;AAErC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAChC,QAAQ,CAAC;IACP,aAAa;IACb,KAAK;IACL,MAAM,EAAE,SAAS,UAAU,CAAC,KAAK;QAC/B,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;QACzE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAEzB,OAAO,CACL,KAAC,OAAO,cAEN,KAAC,OAAO,IACN,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;oBAEvB,MAAM,IAAI,GAAG,YAAY,EAAE;oBACzB,wCAAwC;oBACxC,wCAAwC;oBACxC,KAAqD,CACtD,CAAC;oBAEF,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;gBAC/B,CAAC,KACG,QAAQ,EACZ,UAAU,EAAE,CAAC,WAAW,YAEvB,QAAQ,GACD,GACF,CACX,CAAC;IACJ,CAAC;CACF,CAAC,CACH,CAAC;AAiBF,SAAS,WAAW,CAClB,SAA0C;IAE1C,OAAO,SAA0D,CAAC;AACpE,CAAC"}

package/lib/components/form/components/layout/index.d.ts

@@ -1,2 +1,3 @@
 export { type Section as _Section } from './Section.js';
+export { AppForm, type AppFormProps } from './form.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/form/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/form/components/layout/index.js

@@ -1,2 +1,2 @@
-export {};
+export { AppForm } from './form.js';
 //# sourceMappingURL=index.js.map

package/lib/components/form/components/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form/components/layout/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form/components/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "20.2.0",
+  "version": "20.3.1",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {

package/src/components/form/components/input_groups/form.tsx

@@ -9,6 +9,13 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
   layout?: Layout;
 }
 
+/**
+ * @param props
+ * @deprecated Use `AppForm` instead.
+ * This component will be merged into `AppForm` and removed in a next major release.
+ * During migration, consider removing the `onSubmit` props.
+ * If you did not bound `noValidate` props, you will have to bound `domValidate` to `AppForm`.
+ */
 export function Form(props: FormProps) {
   const { children, layout = 'stacked', ...otherProps } = props;
 

package/src/components/form/components/layout/form.tsx

@@ -0,0 +1,83 @@
+import type { ReactNode, SyntheticEvent } from 'react';
+
+import { withForm } from '../../context/use_ts_form.js';
+import type { FormProps as DomFormProps } from '../input_groups/form.js';
+import { Form as DomForm } from '../input_groups/form.js';
+
+export interface AppFormProps extends Omit<DomFormProps, 'noValidate'> {
+  domValidate?: boolean;
+  /**
+   * should return meta to pass to `form.handleSubmit`
+   */
+  // Generic meta-result is not possible with higher order component pattern
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onSubmitMeta?: (event: SyntheticEvent<HTMLFormElement, SubmitEvent>) => any;
+}
+
+const props: AppFormProps = { children: null };
+
+// AppForm is a generic component for all forms
+// it will not touch to values inside the form,
+// and unknown is not possible.
+// <AppForm form={form}> would throw an error like "unknown is not compatible with <inferred values type>"
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const defaultValues: any = undefined;
+
+/**
+ * Mount `form.AppForm` and `Form` with default onSubmit.
+ * It reduces the boilerplate code.
+ */
+export const AppForm = minimalForm(
+  withForm({
+    defaultValues,
+    props,
+    render: function FormRender(props) {
+      const { form, children, domValidate, onSubmitMeta, ...domProps } = props;
+      const { AppForm } = form;
+
+      return (
+        <AppForm>
+          {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}
+          <DomForm
+            onSubmit={(event) => {
+              event.preventDefault();
+
+              const meta = onSubmitMeta?.(
+                // onSubmit event is not typed properly.
+                // It uses Event instead of SubmitEvent.
+                event as SyntheticEvent<HTMLFormElement, SubmitEvent>,
+              );
+
+              void form.handleSubmit(meta);
+            }}
+            {...domProps}
+            noValidate={!domValidate}
+          >
+            {children}
+          </DomForm>
+        </AppForm>
+      );
+    },
+  }),
+);
+
+type MinimalProps<Props extends { form: unknown }> = Omit<Props, 'form'> & {
+  /**
+   * Some properties of form are ignored because it is known to produce type errors on usage.
+   */
+  form: Omit<
+    Props['form'],
+    // field array API cause this kind of errors:
+    // Types of property 'pushFieldValue' are incompatible.
+    //  ...
+    //    Type 'any' is not assignable to type 'never'.
+    'pushFieldValue' | 'insertFieldValue' | 'replaceFieldValue'
+  >;
+};
+type MinimalFunctionComponent<Props> = (props: Props) => ReactNode;
+
+function minimalForm<Props extends { form: unknown }>(
+  component: MinimalFunctionComponent<Props>,
+): MinimalFunctionComponent<MinimalProps<Props>> {
+  return component as MinimalFunctionComponent<MinimalProps<Props>>;
+}

package/src/components/form/components/layout/index.ts

@@ -1 +1,2 @@
 export { type Section as _Section } from './Section.js';
+export { AppForm, type AppFormProps } from './form.js';