@ainias42/react-bootstrap-mobile 0.2.0 → 0.2.1

package/dist/src/Components/Clickable/Clickable.d.ts

@@ -6,8 +6,9 @@ type OnPointerDownListener<Data> = OptionalListener<'onPointerDown', Data, Point
 type OnPointerUpListener<Data> = OptionalListener<'onPointerUp', Data, PointerEvent>;
 type OnPointerMoveListener<Data> = OptionalListener<'onPointerMove', Data, PointerEvent>;
 type OnDropListener<Data> = OptionalListener<'onDrop', Data>;
+type OnDragStartListener<Data> = OptionalListener<'onDragStart', Data>;
 type OnDragOverListener<Data> = OptionalListener<'onDragOver', Data>;
-export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData, OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType extends string | undefined> = RbmComponentProps<{
+export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragStartData, OnDragOverData, OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType extends string | undefined> = RbmComponentProps<{
     interactable?: boolean;
     href?: HrefType;
     target?: string;
@@ -15,6 +16,8 @@ export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMous
     stopPropagation?: boolean;
     useReactOnMouseLeave?: boolean;
     id?: string;
-} & OnClickListener<OnClickData> & OnPointerDownListener<OnMouseDownData> & OnPointerMoveListener<OnMouseMoveData> & OnPointerUpListener<OnMouseUpData> & OnDropListener<OnDropData> & OnDragOverListener<OnDragOverData> & OptionalListener<'onClickCapture', OnClickCaptureData> & OptionalListener<'onMouseEnter', OnMouseEnterData> & OptionalListener<'onMouseLeave', OnMouseLeaveData, MouseEvent | ReactMouseEvent> & OptionalListener<'onDoubleClick', OnDoubleClickData>>;
-declare const ClickableMemo: import("../../helper/withForwardRef").RefComponent<ClickableProps<unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, string | undefined>, HTMLAnchorElement | HTMLSpanElement>;
+    tabIndex?: number;
+    draggable?: boolean;
+} & OnClickListener<OnClickData> & OnPointerDownListener<OnMouseDownData> & OnPointerMoveListener<OnMouseMoveData> & OnPointerUpListener<OnMouseUpData> & OnDropListener<OnDropData> & OnDragStartListener<OnDragStartData> & OnDragOverListener<OnDragOverData> & OptionalListener<'onClickCapture', OnClickCaptureData> & OptionalListener<'onMouseEnter', OnMouseEnterData> & OptionalListener<'onMouseLeave', OnMouseLeaveData, MouseEvent | ReactMouseEvent> & OptionalListener<'onDoubleClick', OnDoubleClickData>>;
+declare const ClickableMemo: import("../../helper/withForwardRef").RefComponent<ClickableProps<unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, string | undefined>, HTMLAnchorElement | HTMLSpanElement>;
 export { ClickableMemo as Clickable };

package/dist/src/Components/FormElements/Button/Button.d.ts

@@ -5,9 +5,12 @@ import { HTMLAttributes } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { ButtonType } from "./ButtonType";
 import { Flavor } from "../../Flavor";
+import { Size } from "../../../Size";
 export type ButtonProps<ClickData> = RbmComponentProps<Override<HTMLAttributes<HTMLButtonElement>, {
     type?: ButtonType;
     disabled?: boolean;
     flavor?: Flavor;
+    fullWidth?: boolean;
+    size?: Omit<Size, "xxLarge" | "xLarge" | "large" | "xSmall">;
 } & OptionalListener<'onClick', ClickData>>>;
-export declare const Button: <ClickData>({ children, className, disabled, flavor, type, ...props }: ButtonProps<ClickData>) => React.JSX.Element;
+export declare const Button: <ClickData>({ children, className, disabled, size, fullWidth, flavor, type, ...props }: ButtonProps<ClickData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Controller/HookForm.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormProviderProps } from "react-hook-form";
+type FieldValues = Record<string, any>;
+export type HookFormProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined> = FormProviderProps<TFieldValues, TContext, TTransformedValues> & {
+    onSend?: () => void;
+};
+export declare const HookForm: <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>({ children, onSend, ...methods }: HookFormProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+export {};

package/dist/src/Components/FormElements/Controller/InputController.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const InputController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Input/Input").InputProps<unknown, unknown, unknown> & import("react").RefAttributes<HTMLInputElement>, "value" | "ref" | "onBlur" | "name" | "onChangeText"> & {
+    name: string;
+}, HTMLInputElement>;

package/dist/src/Components/FormElements/Controller/MultipleFileInputController.d.ts

@@ -0,0 +1,3 @@
+export declare const MultipleFileInputController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Input/FileInput/MultipleFileInput").MultipleFileInputProps<unknown>, "value" | "ref" | "onBlur" | "name" | "onChangeFiles"> & {
+    name: string;
+}, never>;

package/dist/src/Components/FormElements/Controller/PasswordInputController.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const PasswordInputController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Input/PasswordInput/PasswordInput").PasswordInputProps<unknown, unknown, unknown> & import("react").RefAttributes<HTMLInputElement>, "value" | "ref" | "onBlur" | "name" | "onChangeText"> & {
+    name: string;
+}, HTMLInputElement>;

package/dist/src/Components/FormElements/Controller/SelectController.d.ts

@@ -0,0 +1,3 @@
+export declare const SelectController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Select/Select").SelectProps<unknown>, "value" | "ref" | "onBlur" | "name" | "onChangeValue"> & {
+    name: string;
+}, never>;

package/dist/src/Components/FormElements/Controller/SendFormContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SendFormContext: import("react").Context<(() => void) | undefined>;
+export declare function useSendFormContext(): (() => void) | undefined;

package/dist/src/Components/FormElements/Controller/TextareaController.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TextareaController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Textarea/Textarea").TextareaProps<unknown, unknown> & import("react").RefAttributes<HTMLTextAreaElement>, "value" | "ref" | "onBlur" | "name" | "onChangeText"> & {
+    name: string;
+}, HTMLTextAreaElement>;

package/dist/src/Components/FormElements/Controller/withHookController.d.ts

@@ -0,0 +1,4 @@
+import React, { ComponentProps, ComponentType } from "react";
+export declare function withHookController<C extends ComponentType<any>, OnChangeProp extends keyof ComponentProps<C>>(Comp: C, onChangeProp: OnChangeProp, emptyValue?: any): import("../../../helper/withForwardRef").RefComponent<Omit<React.ComponentProps<C>, "value" | "ref" | "onBlur" | "name" | OnChangeProp> & {
+    name: string;
+}, React.ComponentRef<C>>;

package/dist/src/Components/FormElements/Input/FileInput/MultipleFileInput.d.ts

@@ -13,5 +13,6 @@ export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<Overri
     onError?: (error: string) => void;
     allowOverride?: boolean;
     showDeleteButton?: boolean;
+    error?: string;
 } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>>>;
-export declare const MultipleFileInput: <OnChangeData>({ className, style, value, label, mimeTypes, maxFiles, maxSizePerFile, allowOverride, onError, showDeleteButton, ...otherProps }: MultipleFileInputProps<OnChangeData>) => React.JSX.Element;
+export declare const MultipleFileInput: <OnChangeData>({ className, style, value, label, mimeTypes, maxFiles, maxSizePerFile, allowOverride, onError, showDeleteButton, error, ...otherProps }: MultipleFileInputProps<OnChangeData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Input/Input.d.ts

@@ -7,5 +7,6 @@ export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponen
     inline?: boolean;
     onChangeText?: (newText: string) => void;
     onEnter?: (newText: string) => void;
+    error?: string;
 } & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onBlur', OnBlurData> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
 export declare const Input: import("../../../helper/withForwardRef").RefComponent<InputProps<unknown, unknown, unknown>, HTMLInputElement>;

package/dist/src/Components/FormElements/Select/Select.d.ts

@@ -14,5 +14,6 @@ export type SelectProps<OnChangeData> = RbmComponentProps<Override<SelectHTMLAtt
     onChangeValue?: (newValue: string) => void;
     inline?: boolean;
     small?: boolean;
+    error?: string;
 } & OptionalListener<'onChange', OnChangeData>>>;
-export declare const Select: <OnChangeData>({ label, options, className, style, onChangeValue, inline, small, ...otherProps }: SelectProps<OnChangeData>) => React.JSX.Element;
+export declare const Select: <OnChangeData>({ label, options, className, style, onChangeValue, inline, small, error, ...otherProps }: SelectProps<OnChangeData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Textarea/Textarea.d.ts

@@ -9,5 +9,6 @@ export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<Ov
     onEscape?: (newText: string) => void;
     textareaStyles?: CSSProperties & Record<`--${string}`, string | number | undefined>;
     containerRef?: MutableRefObject<HTMLLabelElement | null>;
+    error?: string;
 } & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
 export declare const Textarea: import("../../../helper/withForwardRef").RefComponent<TextareaProps<unknown, unknown>, HTMLTextAreaElement>;

package/dist/src/Components/Hooks/useComposedRef.d.ts

@@ -1,2 +1,2 @@
 import { ForwardedRef } from 'react';
-export declare const useComposedRef: <T>(ref: ForwardedRef<T>, initialValue?: T | null) => import("react").RefObject<T>;
+export declare function useComposedRef<RefVal>(...refs: (ForwardedRef<RefVal> | undefined)[]): (val: RefVal | null) => void;

package/dist/src/Components/Image/Image.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
-import { CSSProperties, DOMAttributes } from 'react';
+import { CSSProperties } from 'react';
 import { Override } from '../../TypeHelpers';
-export type ImageProps = RbmComponentProps<Override<Omit<React.ComponentPropsWithoutRef<'img'>, keyof DOMAttributes<'img'>>, {
+export type ImageProps = RbmComponentProps<Override<React.ComponentPropsWithoutRef<'img'>, {
     src: string;
     style?: CSSProperties;
     alt?: string;

package/dist/src/Size.d.ts

@@ -0,0 +1,8 @@
+export declare enum Size {
+    xSmall = 0,
+    small = 1,
+    medium = 2,
+    large = 3,
+    xLarge = 4,
+    xxLarge = 5
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -38,9 +38,11 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "bootstrap": "^5.3.3",
     "react": ">=18.0.0",
-    "react-beautiful-dnd": "^13.1.1"
+    "react-beautiful-dnd": "^13.1.1",
+    "react-hook-form": "^7.53.0"
   },
   "devDependencies": {
+    "react-hook-form": "^7.53.0",
     "ajv": "^8.14.0",
     "bootstrap": "^5.3.3",
     "react": ">=18.0.0",
@@ -90,7 +92,7 @@
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
-    "@ainias42/js-helper": ">=0.8.14",
+    "@ainias42/js-helper": ">=0.8.15",
     "@types/react-virtualized-auto-sizer": "^1.0.4",
     "classnames": "^2.5.1",
     "isomorphic-style-loader": "^5.3.2",

package/src/Components/Clickable/Clickable.tsx

@@ -4,7 +4,15 @@ import {OptionalListener, useListener} from '../Hooks/useListener';
 
 import styles from './clickable.scss';
 import classNames from 'classnames';
-import { useCallback, MouseEvent as ReactMouseEvent, ForwardedRef, useEffect, MouseEvent, PointerEvent } from 'react';
+import {
+    useCallback,
+    MouseEvent as ReactMouseEvent,
+    ForwardedRef,
+    useEffect,
+    MouseEvent,
+    PointerEvent,
+    useRef, DragEventHandler
+} from 'react';
 import {withForwardRef} from '../../helper/withForwardRef';
 import {useComposedRef} from "../Hooks/useComposedRef";
 
@@ -13,6 +21,7 @@ type OnPointerDownListener<Data> = OptionalListener<'onPointerDown', Data, Point
 type OnPointerUpListener<Data> = OptionalListener<'onPointerUp', Data, PointerEvent>;
 type OnPointerMoveListener<Data> = OptionalListener<'onPointerMove', Data, PointerEvent>;
 type OnDropListener<Data> = OptionalListener<'onDrop', Data>;
+type OnDragStartListener<Data> = OptionalListener<'onDragStart', Data>;
 type OnDragOverListener<Data> = OptionalListener<'onDragOver', Data>;
 
 export type ClickableProps<
@@ -22,6 +31,7 @@ export type ClickableProps<
     OnMouseUpData,
     OnClickCaptureData,
     OnDropData,
+    OnDragStartData,
     OnDragOverData,
     OnMouseEnterData,
     OnMouseLeaveData,
@@ -36,11 +46,14 @@ export type ClickableProps<
         stopPropagation?: boolean;
         useReactOnMouseLeave?: boolean;
         id?: string;
+        tabIndex?: number;
+        draggable?: boolean
     } & OnClickListener<OnClickData> &
     OnPointerDownListener<OnMouseDownData> &
     OnPointerMoveListener<OnMouseMoveData> &
     OnPointerUpListener<OnMouseUpData> &
     OnDropListener<OnDropData> &
+    OnDragStartListener<OnDragStartData> &
     OnDragOverListener<OnDragOverData> &
     OptionalListener<'onClickCapture', OnClickCaptureData> &
     OptionalListener<'onMouseEnter', OnMouseEnterData> &
@@ -55,6 +68,7 @@ function Clickable<
     OnPointerUpData,
     OnClickCaptureData,
     OnDropData,
+    OnDragStartData,
     OnDragOverData,
     OnMouseEnterData,
     OnMouseLeaveData,
@@ -72,8 +86,10 @@ function Clickable<
         preventDefault = false,
         stopPropagation = true,
         useReactOnMouseLeave = false,
+        tabIndex,
+        draggable,
         ...clickData
-    }: ClickableProps<OnClickData, OnPointerDownData, OnPointerMoveData, OnPointerUpData, OnClickCaptureData, OnDropData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType>,
+    }: ClickableProps<OnClickData, OnPointerDownData, OnPointerMoveData, OnPointerUpData, OnClickCaptureData, OnDropData,OnDragStartData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType>,
     ref: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>
 ) {
     // Variables
@@ -81,7 +97,8 @@ function Clickable<
     // States
 
     // Refs
-    const clickableRef = useComposedRef(ref);
+    const clickableRef = useRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>(null);
+    const refSetter = useComposedRef(ref, clickableRef);
 
     // Callbacks
     const onClickInner = useListener<'onClick', OnClickData>('onClick', clickData);
@@ -196,6 +213,22 @@ function Clickable<
         [clickData.onDragOver, onDragOver, preventDefault, stopPropagation]
     );
 
+    const onDragStartListener = useListener<'onDragStart', OnDragStartData>('onDragStart', clickData);
+    const realOnDragStartListener = useCallback(
+        (e: ReactMouseEvent) => {
+            if (clickData.onDragStart) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onDragStartListener(e);
+            }
+        },
+        [clickData.onDragStart, onDragStartListener, preventDefault, stopPropagation]
+    );
+
     const onMouseEnter = useListener<'onMouseEnter', OnMouseEnterData>('onMouseEnter', clickData);
     const realOnMouseEnter = useCallback(
         (e: ReactMouseEvent) => {
@@ -276,17 +309,19 @@ function Clickable<
         onMouseEnter: realOnMouseEnter,
         onMouseLeave: useReactOnMouseLeave ? realOnMouseLeave : undefined,
         onDoubleClick: realOnDoubleClick,
-        tabIndex: interactable ? 0 : undefined,
+        tabIndex: interactable ? 0 : tabIndex,
+        draggable,
+        onDragStart: realOnDragStartListener
     };
     if (typeof href === 'string') {
         return (
-            <a {...props} href={href} ref={clickableRef as ForwardedRef<HTMLAnchorElement>}>
+            <a {...props} href={href} ref={refSetter as ForwardedRef<HTMLAnchorElement>}>
                 {children}
             </a>
         );
     }
     return (
-        <span {...props} ref={clickableRef as ForwardedRef<HTMLSpanElement>}>
+        <span {...props} ref={refSetter as ForwardedRef<HTMLSpanElement>}>
             {children}
         </span>
     );

package/src/Components/FormElements/Button/Button.tsx

@@ -1,20 +1,23 @@
 import * as React from 'react';
-import {Override} from '@ainias42/js-helper';
-import {OptionalListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
+import { Override } from '@ainias42/js-helper';
+import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
 
 import styles from './button.scss';
 import classNames from 'classnames';
-import {withMemo} from '../../../helper/withMemo';
-import {HTMLAttributes} from 'react';
-import {RbmComponentProps} from '../../RbmComponentProps';
-import {ButtonType} from "./ButtonType";
-import {Flavor} from "../../Flavor";
+import { withMemo } from '../../../helper/withMemo';
+import { HTMLAttributes } from 'react';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { ButtonType } from "./ButtonType";
+import { Flavor } from "../../Flavor";
+import { Size } from "../../../Size";
 
 export type ButtonProps<ClickData> = RbmComponentProps<
     Override<HTMLAttributes<HTMLButtonElement>, {
         type?: ButtonType,
         disabled?: boolean;
         flavor?: Flavor
+        fullWidth?: boolean;
+        size?: Omit<Size, "xxLarge" | "xLarge" | "large" | "xSmall">
     } & OptionalListener<'onClick', ClickData>>
 >;
 
@@ -22,6 +25,8 @@ export const Button = withMemo(function Button<ClickData>({
                                                               children,
                                                               className,
                                                               disabled,
+                                                              size,
+                                                              fullWidth = false,
                                                               flavor = Flavor.Accent,
                                                               type = ButtonType.Primary,
                                                               ...props
@@ -32,11 +37,12 @@ export const Button = withMemo(function Button<ClickData>({
         [styles.primary]: type === ButtonType.Primary,
         [styles.secondary]: type === ButtonType.Secondary,
         [styles.disabled]: disabled,
+        [styles.small]: size === Size.small
     };
 
     return (
         <button {...otherProps} disabled={disabled} type="button" onClick={onClick}
-                className={classNames(styles.button, classes, flavor, className)}>
+                className={classNames(styles.button, {[styles.fullWidth]: fullWidth}, classes, flavor, className)}>
             {children}
         </button>
     );

package/src/Components/FormElements/Button/button.scss

@@ -53,4 +53,21 @@
     cursor: default;
     pointer-events: none;
   }
+
+  &.small {
+    @include design($material) {
+      min-height: 17px;
+      line-height: 17px;
+      padding: 0 8px;
+    }
+
+    @include design($flat) {
+      line-height: 17px;
+      padding: 4px 9px;
+    }
+  }
+
+  &.fullWidth {
+    width: 100%;
+  }
 }

package/src/Components/FormElements/Controller/HookForm.tsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { FormProvider, FormProviderProps } from "react-hook-form";
+import { withMemo } from "../../../helper/withMemo";
+import { LoadingArea } from "../../LoadingArea/LoadingArea";
+import { SendFormContext } from "./SendFormContext";
+
+type FieldValues = Record<string, any>;
+export type HookFormProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined> =
+    FormProviderProps<TFieldValues, TContext, TTransformedValues>
+    & {
+    onSend?: () => void;
+};
+
+export const HookForm = withMemo(function HookForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>({
+                                                                                                                                                                                       children,
+                                                                                                                                                                                       onSend,
+                                                                                                                                                                                       ...methods
+                                                                                                                                                                                   }: HookFormProps<TFieldValues, TContext, TTransformedValues>) {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Create an inner, as the onSend may have other attributes
+    const innerOnSend = useCallback(() => onSend?.(), [onSend]);
+
+    // Dispatch
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return <FormProvider {...methods}>
+        <SendFormContext.Provider value={innerOnSend}>
+            <LoadingArea loading={methods.formState.isSubmitting} __allowChildren={"all"}>
+                {children}
+            </LoadingArea>
+        </SendFormContext.Provider>
+    </FormProvider>;
+});

package/src/Components/FormElements/Controller/InputController.ts

@@ -0,0 +1,4 @@
+import { Input } from "../Input/Input";
+import { withHookController } from "./withHookController";
+
+export const InputController = withHookController(Input, "onChangeText");

package/src/Components/FormElements/Controller/MultipleFileInputController.ts

@@ -0,0 +1,4 @@
+import { MultipleFileInput } from "../Input/FileInput/MultipleFileInput";
+import { withHookController } from "./withHookController";
+
+export const MultipleFileInputController = withHookController(MultipleFileInput, 'onChangeFiles');

package/src/Components/FormElements/Controller/PasswordInputController.ts

@@ -0,0 +1,4 @@
+import { withHookController } from "./withHookController";
+import { PasswordInput } from "../Input/PasswordInput/PasswordInput";
+
+export const PasswordInputController = withHookController(PasswordInput, "onChangeText");

package/src/Components/FormElements/Controller/SelectController.ts

@@ -0,0 +1,4 @@
+import { withHookController } from "./withHookController";
+import { Select } from "../Select/Select";
+
+export const SelectController = withHookController(Select, "onChangeValue");

package/src/Components/FormElements/Controller/SendFormContext.ts

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+
+export const SendFormContext = createContext<(() => void)|undefined>(undefined);
+
+export function useSendFormContext(){
+    return useContext(SendFormContext);
+}

package/src/Components/FormElements/Controller/TextareaController.ts

@@ -0,0 +1,4 @@
+import { withHookController } from "./withHookController";
+import { Textarea } from "../Textarea/Textarea";
+
+export const TextareaController = withHookController(Textarea, 'onChangeText');

package/src/Components/FormElements/Controller/withHookController.tsx

@@ -0,0 +1,53 @@
+import React, { ComponentProps, ComponentRef, ComponentType, ForwardedRef, useCallback } from "react";
+import { FieldPath, FieldValues, useController, useFormContext } from "react-hook-form";
+import { useComposedRef } from "../../Hooks/useComposedRef";
+import { withForwardRef } from "../../../helper/withForwardRef";
+
+export function withHookController<C extends ComponentType<any>, OnChangeProp extends keyof ComponentProps<C>>(Comp: C, onChangeProp: OnChangeProp, emptyValue: any = null) {
+    type RefType = ComponentRef<C>;
+    type OldProps = ComponentProps<C>;
+
+    type Props<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>> = Omit<
+        OldProps,
+        'name' | 'onBlur' | OnChangeProp | 'ref' | 'value'
+    > & { name: Name };
+
+    function WithHookComponent<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>>(
+        {name, ...otherProps}: Props<Values, Name>,
+        ref?: ForwardedRef<RefType>
+    ) {
+        const children = "children" in otherProps ? otherProps.children : undefined;
+
+        const {field, fieldState} = useController({name});
+        const {clearErrors} = useFormContext();
+        const composedRef = useComposedRef(ref, field.ref);
+        const errorMessage = fieldState.error?.message;
+
+        const internalOnChange = useCallback(
+            (arg: any) => {
+                clearErrors(name);
+                field.onChange(arg);
+            },
+            [clearErrors, field, name]
+        );
+        const onChangeProps = {
+            [onChangeProp]: internalOnChange
+        }
+
+        return (
+            // @ts-expect-error Because of the prop spreading, typescript is really confused here
+            <Comp
+                {...otherProps}
+                {...field}
+                {...onChangeProps}
+                value={field.value ?? emptyValue}
+                ref={composedRef}
+                error={errorMessage}
+            >
+                {children}
+            </Comp>
+        );
+    }
+
+    return withForwardRef(WithHookComponent);
+}

package/src/Components/FormElements/Input/FileInput/MultipleFileInput.tsx

@@ -3,7 +3,6 @@ import {RbmComponentProps} from '../../../RbmComponentProps';
 import {Override} from '../../../../TypeHelpers';
 import {ChangeEventHandler, DragEvent, InputHTMLAttributes, useCallback, useRef} from 'react';
 import {Listener, useListenerWithExtractedProps} from '../../../Hooks/useListener';
-
 import styles from './fileInput.scss';
 import {withMemo} from '../../../../helper/withMemo';
 import classNames from 'classnames';
@@ -17,6 +16,7 @@ import {Image} from '../../../Image/Image';
 import {Clickable} from '../../../Clickable/Clickable';
 import {Inline} from '../../../Layout/Inline';
 import {FileType} from "./FileType";
+import { InlineBlock } from "../../../Layout/InlineBlock";
 
 
 export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
@@ -31,6 +31,7 @@ export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
             onError?: (error: string) => void;
             allowOverride?: boolean
             showDeleteButton?: boolean
+            error?: string,
         } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>
     >
 >;
@@ -46,6 +47,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                                                                                         allowOverride = maxFiles === 1,
                                                                                         onError,
                                                                                         showDeleteButton = true,
+    error,
                                                                                         ...otherProps
                                                                                     }: MultipleFileInputProps<OnChangeData>) {
         // Variables
@@ -275,6 +277,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                         </Clickable>
                     </Grow>
                 </Flex>
+                {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
             </span>
         );
     },

package/src/Components/FormElements/Input/FileInput/fileInput.scss

@@ -79,11 +79,10 @@
 
   .value {
     display: none;
-    //position: absolute;
-    //top: 0;
-    //left: 0;
-    //right: 0;
-    //bottom: 0;
-    //opacity: 0;
+  }
+
+  .error {
+    font-size: 0.7rem;
+    --text-primary-default-color: var(--text-error)
   }
 }