@ainias42/react-bootstrap-mobile 0.2.16 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.16",
+  "version": "1.0.1",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -37,71 +37,71 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "bootstrap": "^5.3.3",
-    "react": ">=18.0.0",
+    "react": "^19.1.1",
     "react-beautiful-dnd": "^13.1.1",
-    "react-hook-form": "^7.53.0"
+    "react-hook-form": "^7.62.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.6",
+    "@babel/core": "^7.28.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-typescript": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
+    "@babel/plugin-transform-typescript": "^7.28.0",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@types/react": ">=18.0.0",
+    "@types/react": "^19.1.11",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": ">=18.0.0",
+    "@types/react-dom": "^19.1.7",
     "@types/react-table": "^7.7.20",
     "@types/react-window": "^1.8.8",
     "@types/react-window-infinite-loader": "^1.0.9",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
-    "ajv": "^8.14.0",
-    "babel-loader": "^9.1.3",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "ajv": "^8.17.1",
+    "babel-loader": "^10.0.0",
     "bootstrap": "^5.3.3",
-    "css-layering-webpack-plugin": "^0.3.0",
+    "css-layering-webpack-plugin": "^0.4.0",
     "css-loader": "^7.1.2",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "html-webpack-plugin": "^5.6.0",
-    "loader-utils": "3.2.1",
-    "mini-css-extract-plugin": "^2.9.0",
-    "prettier": "^3.2.5",
-    "react": ">=18.0.0",
+    "html-webpack-plugin": "^5.6.4",
+    "loader-utils": "^3.3.1",
+    "mini-css-extract-plugin": "^2.9.4",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
     "react-beautiful-dnd": "^13.1.1",
-    "react-dom": ">=18.3.1",
-    "react-hook-form": "^7.53.0",
-    "sass": "^1.77.2",
-    "sass-loader": "^14.2.1",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.4.5",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.62.0",
+    "sass": "^1.90.0",
+    "sass-loader": "^16.0.5",
+    "terser-webpack-plugin": "^5.3.14",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   },
   "dependencies": {
-    "@ainias42/js-helper": ">=0.8.16",
-    "@types/react-virtualized-auto-sizer": "^1.0.4",
-    "@uiw/react-color": "^2.5.5",
+    "@ainias42/js-helper": "^0.8.17",
+    "@types/react-virtualized-auto-sizer": "1.0.4",
+    "@uiw/react-color": "^2.8.0",
     "classnames": "^2.5.1",
-    "isomorphic-style-loader": "^5.3.2",
+    "isomorphic-style-loader": "^5.4.0",
     "react-color": "^2.19.3",
     "react-table": "^7.8.0",
-    "react-virtualized-auto-sizer": "^1.0.24",
-    "react-window": "^1.8.10",
-    "react-window-infinite-loader": "^1.0.9",
-    "yup": "^1.6.1"
+    "react-virtualized-auto-sizer": "^1.0.26",
+    "react-window": "^1.8.11",
+    "react-window-infinite-loader": "^1.0.10",
+    "yup": "^1.7.0"
   }
 }

package/src/Components/ActionSheet/ActionSheet.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
-import { Ref, useCallback, useImperativeHandle, useState } from 'react';
+import { ForwardedRef, useCallback, useImperativeHandle, useState } from 'react';
 import { Clickable } from '../Clickable/Clickable';
 import { Container } from '../Layout/Container';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Icon, IconSource } from '../Icon/Icon';
-
 import styles from './actionSheet.scss';
-import { withForwardRef } from '../../helper/withForwardRef';
 import classNames from 'classnames';
 import { InlineBlock } from '../Layout/InlineBlock';
 import { Text } from '../Text/Text';
 import { Flex } from '../Layout/Flex';
 import { Block } from '../Layout/Block';
+import { withMemo } from "../../helper/withMemo";
 
 export type ActionSheetAction<ActionData> = {
     name: string;
@@ -22,21 +21,22 @@ export type ActionSheetAction<ActionData> = {
     isDeleteAction?: boolean;
 };
 
+export type ActionSheetHandle = {
+    show: () => void;
+    hide: () => void;
+};
+
+
 export type ActionSheetProps = RbmComponentProps<{
     title?: string;
     actions: ActionSheetAction<any>[];
     cancelText?: string;
     onClose?: () => void;
+    ref?: ForwardedRef<ActionSheetHandle>
 }>;
 
-export type ActionSheetHandle = {
-    show: () => void;
-    hide: () => void;
-};
-
-function ActionSheet(
-    { title, actions, cancelText = 'Cancel', className, onClose, style }: ActionSheetProps,
-    ref: Ref<ActionSheetHandle>
+export const ActionSheet = withMemo(function ActionSheet(
+    { title, actions, cancelText = 'Cancel', className, onClose, style, ref }: ActionSheetProps,
 ) {
     const [isOpen, setIsOpen] = useState(false);
 
@@ -109,7 +109,4 @@ function ActionSheet(
             </Container>
         </Clickable>
     );
-}
-
-const ActionSheetMemo = withForwardRef<ActionSheetProps, ActionSheetHandle>(ActionSheet, styles);
-export { ActionSheetMemo as ActionSheet };
+}, styles);

package/src/Components/Clickable/Clickable.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {RbmComponentProps} from '../RbmComponentProps';
 import {OptionalListener, useListener} from '../Hooks/useListener';
-
 import styles from './clickable.scss';
 import classNames from 'classnames';
 import {
@@ -13,8 +12,8 @@ import {
     PointerEvent,
     useRef
 } from 'react';
-import {withForwardRef} from '../../helper/withForwardRef';
 import {useComposedRef} from "../Hooks/useComposedRef";
+import { withMemo } from "../../helper/withMemo";
 
 type OnClickListener<Data> = OptionalListener<'onClick', Data>;
 type OnPointerDownListener<Data> = OptionalListener<'onPointerDown', Data, PointerEvent>;
@@ -49,6 +48,7 @@ export type ClickableProps<
         tabIndex?: number;
         draggable?: boolean
         title?: string;
+        ref?: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>
     } & OnClickListener<OnClickData> &
     OnPointerDownListener<OnMouseDownData> &
     OnPointerMoveListener<OnMouseMoveData> &
@@ -62,7 +62,7 @@ export type ClickableProps<
     OptionalListener<'onDoubleClick', OnDoubleClickData>
 >;
 
-function Clickable<
+export const Clickable = withMemo(function Clickable<
     OnClickData,
     OnPointerDownData,
     OnPointerMoveData,
@@ -90,9 +90,9 @@ function Clickable<
         tabIndex,
         draggable,
         title,
+        ref,
         ...clickData
     }: ClickableProps<OnClickData, OnPointerDownData, OnPointerMoveData, OnPointerUpData, OnClickCaptureData, OnDropData,OnDragStartData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType>,
-    ref: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>
 ) {
     // Variables
 
@@ -328,7 +328,4 @@ function Clickable<
             {children}
         </span>
     );
-}
-
-const ClickableMemo = withForwardRef(Clickable, styles);
-export {ClickableMemo as Clickable};
+}, styles);

package/src/Components/Dialog/DialogContainer.tsx

@@ -3,11 +3,12 @@ import { ComponentType, ForwardedRef, PropsWithChildren, useCallback, useImperat
 import { PromiseWithHandlers } from '@ainias42/js-helper';
 import { DialogProvider, ShowDialog } from './DialogContext';
 import { Dialog } from './Dialog';
-import { withForwardRef } from "../../helper/withForwardRef";
 import { Block } from "../Layout/Block";
+import { withMemo } from "../../helper/withMemo";
 
 export type DialogContainerProps = PropsWithChildren<{
     dialogClassName?: string
+    ref?: ForwardedRef<DialogContainerRef>
 }>;
 
 type DialogData = {
@@ -21,10 +22,11 @@ export type DialogContainerRef = {
     showDialog: ShowDialog;
 }
 
-export const DialogContainer = withForwardRef(function DialogContainer({
-                                                                           children,
-                                                                           dialogClassName
-                                                                       }: DialogContainerProps, ref: ForwardedRef<DialogContainerRef>) {
+export const DialogContainer = withMemo(function DialogContainer({
+                                                                     children,
+                                                                     dialogClassName,
+                                                                     ref
+                                                                 }: DialogContainerProps) {
     // Variables
     const [dialogs, setDialogs] = useState<DialogData[]>([]);
     const [, setLastId] = useState(0);

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

@@ -1,7 +1,12 @@
-import React, { ComponentProps, ComponentRef, ComponentType, ForwardedRef, useCallback } from "react";
+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";
+import { withMemo } from "../../../helper/withMemo";
 
 export function withHookController<C extends ComponentType<any>, OnChangeProp extends keyof ComponentProps<C>>(Comp: C, onChangeProp: OnChangeProp, emptyValue: any = null) {
     type RefType = ComponentRef<C>;
@@ -9,12 +14,11 @@ export function withHookController<C extends ComponentType<any>, OnChangeProp ex
 
     type Props<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>> = Omit<
         OldProps,
-        'name' | 'onBlur' | OnChangeProp | 'ref' | 'value'
+        'name' | 'onBlur' | OnChangeProp | 'value'
     > & { name: Name };
 
     function WithHookComponent<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>>(
-        {name, ...otherProps}: Props<Values, Name>,
-        ref?: ForwardedRef<RefType>
+        {name, ref, ...otherProps}: Props<Values, Name> & {ref?: ForwardedRef<RefType>},
     ) {
         const children = "children" in otherProps ? otherProps.children : undefined;
 
@@ -25,8 +29,8 @@ export function withHookController<C extends ComponentType<any>, OnChangeProp ex
 
         const internalOnChange = useCallback(
             (arg: any) => {
-                    clearErrors(name);
-                    field.onChange(arg);
+                clearErrors(name);
+                field.onChange(arg);
             },
             [clearErrors, field, name]
         );
@@ -52,5 +56,5 @@ export function withHookController<C extends ComponentType<any>, OnChangeProp ex
         );
     }
 
-    return withForwardRef(WithHookComponent);
+    return withMemo(WithHookComponent);
 }

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

@@ -1,16 +1,14 @@
 import * as React from 'react';
 import {
-    ChangeEvent,
+    ChangeEvent, ForwardedRef,
     InputHTMLAttributes,
     KeyboardEvent,
-    MutableRefObject,
     useCallback, useEffect,
     useMemo, useRef,
 } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-import { withForwardRef } from '../../../helper/withForwardRef';
 import styles from './input.scss';
 import classNames from 'classnames';
 import { useComposedRef } from '../../Hooks/useComposedRef';
@@ -18,6 +16,7 @@ import { useOnChangeDone } from '../hooks/useOnChangeDone';
 import { useSendFormContext } from "../Controller/SendFormContext";
 import { useDebounced } from "../../Hooks/useDebounced";
 import { FormError } from "../FormError";
+import { withMemo } from "../../../helper/withMemo";
 
 export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -28,13 +27,14 @@ export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponen
             onChangeText?: (newText: string) => void;
             onEnter?: (newText: string) => void;
             error?: string,
+            ref?: ForwardedRef<HTMLInputElement>
         } & OptionalListener<'onChange', OnChangeData> &
         OptionalListener<'onBlur', OnBlurData> &
         OptionalListener<'onChangeDone', OnChangeDoneData>
     >
 >;
 
-export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnChangeDoneData>(
+export const Input = withMemo(function Input<OnChangeData, OnBlurData, OnChangeDoneData>(
         {
             label,
             className,
@@ -45,9 +45,9 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             error,
             onChangeText,
             onEnter,
+            ref,
             ...otherProps
         }: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>,
-        ref: MutableRefObject<HTMLInputElement> | null
     ) {
         // Variables
 

package/src/Components/FormElements/Input/PasswordInput/PasswordInput.tsx

@@ -1,15 +1,14 @@
 import React, { ForwardedRef, useCallback, useState } from 'react';
 import { Input, InputProps } from '../Input';
 import { DistributiveOmit } from '../../../../helper/DistributiveOmit';
-import { withForwardRef } from '../../../../helper/withForwardRef';
 import { Flex } from '../../../Layout/Flex';
 import { Grow } from '../../../Layout/Grow';
 import { Icon } from '../../../Icon/Icon';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { Clickable } from '../../../Clickable/Clickable';
-
 import styles from './passwordInput.scss';
 import classNames from 'classnames';
+import { withMemo } from "../../../../helper/withMemo";
 
 export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<
     InputProps<OnChangeData, OnBlurData, OnChangeEndData>,
@@ -17,11 +16,11 @@ export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = Dist
 > & {
     onChangeText?: (newText: string) => void;
     onEnter?: (newText: string) => void;
+    ref?: ForwardedRef<HTMLInputElement>
 };
 
-export const PasswordInput = withForwardRef(function PasswordInput<OnChangeData, OnBlurData, OnChangeEndData>(
-    { className, style, ...props }: PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData>,
-    ref: ForwardedRef<HTMLInputElement>
+export const PasswordInput = withMemo(function PasswordInput<OnChangeData, OnBlurData, OnChangeEndData>(
+    { className, style, ref,...props }: PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData>,
 ) {
     // Variables
     const [isVisible, setIsVisible] = useState(false);

package/src/Components/FormElements/Textarea/Textarea.tsx

@@ -6,17 +6,16 @@ import {
     useCallback,
     KeyboardEvent,
     ChangeEvent,
-    MutableRefObject,
-    CSSProperties, useRef
+    CSSProperties, useRef, ForwardedRef
 } from 'react';
 import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
 import styles from './textarea.scss';
 import classNames from 'classnames';
-import { withForwardRef } from "../../../helper/withForwardRef";
 import { useOnChangeDone } from "../hooks/useOnChangeDone";
 import { useComposedRef } from "../../Hooks/useComposedRef";
 import { InlineBlock } from "../../Layout/InlineBlock";
 import { Text } from "../../Text/Text";
+import { withMemo } from "../../../helper/withMemo";
 
 export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -27,26 +26,28 @@ export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
             onEnter?: (newText: string) => void;
             onEscape?: (newText: string) => void;
             textareaStyles?: CSSProperties & Record<`--${string}`, string | number | undefined>,
-            containerRef?: MutableRefObject<HTMLLabelElement|null>
+            containerRef?: ForwardedRef<HTMLLabelElement>
+            ref?: ForwardedRef<HTMLTextAreaElement>
             error?: string,
         } & OptionalListener<'onChange', OnChangeData>
         & OptionalListener<'onChangeDone', OnChangeDoneData>
     >
 >;
 
-export const Textarea = withForwardRef(function Textarea<OnChangeData, OnChangeDoneData>({
-                                                                                             label,
-                                                                                             className,
-                                                                                             style,
-                                                                                             onKeyUp,
-                                                                                             onChangeText,
-                                                                                             onEnter,
-                                                                                             onEscape,
-                                                                                             textareaStyles,
-                                                                                             containerRef,
-    error,
-                                                                                             ...otherProps
-                                                                                         }: TextareaProps<OnChangeData, OnChangeDoneData>, ref: MutableRefObject<HTMLTextAreaElement> | null) {
+export const Textarea = withMemo(function Textarea<OnChangeData, OnChangeDoneData>({
+                                                                                       label,
+                                                                                       className,
+                                                                                       style,
+                                                                                       onKeyUp,
+                                                                                       onChangeText,
+                                                                                       onEnter,
+                                                                                       onEscape,
+                                                                                       textareaStyles,
+                                                                                       containerRef,
+                                                                                       ref,
+                                                                                       error,
+                                                                                       ...otherProps
+                                                                                   }: TextareaProps<OnChangeData, OnChangeDoneData>) {
     // Refs
     const innerRef = useRef<HTMLTextAreaElement>(null);
     const refSetter = useComposedRef(ref, innerRef);

package/src/Components/FullScreen/FullScreen.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { ComponentPropsWithoutRef, ComponentRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { ComponentPropsWithoutRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Override } from '../../TypeHelpers';
 import { withMemo } from '../../helper/withMemo';
 import { useWindow } from '../../WindowContext/WindowContext';
 import { RbmComponentProps } from '../RbmComponentProps';
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
 
-export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
+export type FullScreenProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     Override<
         ComponentPropsWithoutRef<AsType>,
         { as?: AsType; fullscreenKey?: string; onEnterFullscreen?: () => void; onLeaveFullscreen?: () => void }
@@ -23,7 +25,7 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
     // Variables
 
     // Refs
-    const containerRef = useRef<ComponentRef<AsTag>>(null);
+    const containerRef = useRef<HTMLElement>(null);
     const window = useWindow();
 
     // States
@@ -39,16 +41,14 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
             if ('exitFullscreen' in document) {
                 document.exitFullscreen();
             } else {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
+                // @ts-expect-error this is not in the types but it exists
                 document.webkitCancelFullScreen();
             }
                 return;
         }
 
         if ('webkitRequestFullscreen' in document.body) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
+            // @ts-expect-error this is not in the types but it exists
             containerRef.current?.webkitRequestFullscreen();
         } else {
             containerRef.current?.requestFullscreen();

package/src/Components/Hooks/useDelayed.ts

@@ -9,6 +9,8 @@ export function useDelayed<Args extends any[]>(
     const argsRef = useRef<Args | undefined>(undefined);
     const timeoutRef = useRef<any>(undefined);
     const mayDelayTimeoutRef = useRef<any>(undefined);
+    const maxDelayTimeout = useRef<any>(undefined);
+
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const realCB = useCallback(callback, dependencies);
@@ -40,7 +42,6 @@ export function useDelayed<Args extends any[]>(
         },
         [delay, maxDelay, realCB]
     );
-    const maxDelayTimeout = useRef<any>();
 
     return func;
 }

package/src/Components/Hooks/useOnMount.ts

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 export function useOnMount(cb: () => void | Promise<void> | (() => any)) {
     const called = useRef(false);
     const unmountTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-    const unmountFunc = useRef<() => any | undefined>();
+    const unmountFunc = useRef<() => any | undefined>(undefined);
     useEffect(() => {
         clearTimeout(unmountTimeout.current);
         unmountTimeout.current = undefined;

package/src/Components/Hooks/useRerender.ts

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from "react";
 
 export function useRerender(defaultDelay = 0){
-    const timeoutRef = useRef<ReturnType<typeof setTimeout>|undefined>();
+    const timeoutRef = useRef<ReturnType<typeof setTimeout>|undefined>(undefined);
     const [renderCounter, updateRenderCounter] = useState(0);
     const update = useCallback((delay = defaultDelay) => {
         if (delay === 0){

package/src/Components/Layout/Block.tsx

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import classNames from 'classnames';
-
 import styles from './layout.scss';
 import { ComponentRef, ForwardedRef } from 'react';
-import { withForwardRef } from '../../helper/withForwardRef';
 import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
+import { withMemo } from "../../helper/withMemo";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
 
-export type BlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
-    ViewWithoutListenersProps<AsType>
+export type BlockProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
+    ViewWithoutListenersProps<AsType> & {
+    ref?: ForwardedRef<ComponentRef<AsType>>
+}
 >;
 
-function Block<AsType extends keyof JSX.IntrinsicElements = 'div'>(
-    { children, as = 'div' as AsType, className, ...props }: BlockProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
+export const Block = withMemo(function Block<AsType extends keyof JSX.IntrinsicElements = 'div'>(
+    { children, as = 'div' as AsType, className, ref, ...props }: BlockProps<AsType>,
 ) {
     // Variables
 
@@ -41,8 +43,4 @@ function Block<AsType extends keyof JSX.IntrinsicElements = 'div'>(
             {children}
         </ViewWithoutListeners>
     );
-}
-
-// Need BlockMemo for autocompletion of phpstorm
-const BlockMemo = withForwardRef(Block, styles);
-export { BlockMemo as Block };
+}, styles);

package/src/Components/Layout/Flex.tsx

@@ -1,22 +1,21 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
-
 import styles from './layout.scss';
 import classNames from 'classnames';
-import { ComponentRef, ForwardedRef } from 'react';
-import { withForwardRef } from '../../helper/withForwardRef';
 import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
+import { withMemo } from "../../helper/withMemo";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
 
-export type FlexProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
+export type FlexProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType> & {
         horizontal?: boolean;
         grow?: boolean;
     }
 >;
 
-function Flex<AsType extends keyof JSX.IntrinsicElements = 'div'>(
-    { children, as = 'div' as AsType, className, horizontal = false, grow = false, ...props }: FlexProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
+export const Flex = withMemo(function Flex<AsType extends keyof JSX.IntrinsicElements = 'div'>(
+    { children, as = 'div' as AsType, className, horizontal = false, ref, grow = false, ...props }: FlexProps<AsType>
 ) {
     // Variables
 
@@ -46,7 +45,4 @@ function Flex<AsType extends keyof JSX.IntrinsicElements = 'div'>(
             {children}
         </ViewWithoutListeners>
     );
-}
-
-const tmp = withForwardRef(Flex, styles);
-export { tmp as Flex };
+}, styles);