@ainias42/react-bootstrap-mobile 0.2.16 → 1.0.0

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);

package/src/Components/Layout/Grid/Grid.tsx

@@ -4,15 +4,16 @@ import { Block } from '../Block';
 import classNames from 'classnames';
 import styles from './grid.scss';
 import { ForwardedRef, useMemo } from 'react';
-import { withForwardRef } from "../../../helper/withForwardRef";
+import { withMemo } from "../../../helper/withMemo";
 
 export type GridProps = RbmComponentProps<{
     columns?: number;
     rows?: number;
     useContainerWidth?: boolean;
+    ref?:ForwardedRef<HTMLDivElement>
 }>;
 
-function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false, className, __allowChildren }: GridProps, ref?:ForwardedRef<HTMLDivElement>) {
+export const Grid = withMemo(function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false,ref,  className, __allowChildren }: GridProps) {
     // Variables
     const appliedStyle = useMemo(
         () => ({
@@ -47,8 +48,4 @@ function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = fal
             {children}
         </Block>
     );
-}
-
-// Need RowMemo for autocompletion of phpstorm
-const GridMemo = withForwardRef(Grid, styles);
-export { GridMemo as Grid };
+}, styles);

package/src/Components/Layout/Grow.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import styles from './layout.scss';
 import classNames from 'classnames';
-import { withForwardRef } from "../../helper/withForwardRef";
 import { ForwardedRef } from "react";
+import { withMemo } from "../../helper/withMemo";
 
 export type GrowProps = RbmComponentProps<{
     center?: boolean;
     weight?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    ref?: ForwardedRef<HTMLDivElement>
 }>;
 
-export const Grow = withForwardRef(function Grow({ className, children, center = false, style, weight = 1 }: GrowProps, ref?: ForwardedRef<HTMLDivElement>) {
+export const Grow = withMemo(function Grow({ className, children, center = false, style, weight = 1, ref }: GrowProps ) {
     // Variables
 
     // States

package/src/Components/Layout/Inline.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import classNames from 'classnames';
-
 import styles from './layout.scss';
 import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
-import { withForwardRef } from '../../helper/withForwardRef';
-import { ComponentRef, ForwardedRef } from 'react';
+import { withMemo } from "../../helper/withMemo";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
 
-export type InlineProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
+export type InlineProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType>
 >;
 
-function Inline<AsType extends keyof JSX.IntrinsicElements = 'span'>(
+export const Inline = withMemo(function Inline<AsType extends keyof JSX.IntrinsicElements = 'span'>(
     { children, as = 'span' as AsType, className, ...props }: InlineProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
 ) {
     // Variables
 
@@ -36,13 +35,8 @@ function Inline<AsType extends keyof JSX.IntrinsicElements = 'span'>(
             className={classNames(styles.inline, className)}
             as={as as AsType}
             {...(props as ViewWithoutListenersProps<AsType>)}
-            ref={ref}
         >
             {children}
         </ViewWithoutListeners>
     );
-}
-
-// Need InlineMemo for autocompletion of phpstorm
-const InlineMemo = withForwardRef(Inline, styles);
-export { InlineMemo as Inline };
+}, styles);

package/src/Components/Layout/InlineBlock.tsx

@@ -1,22 +1,21 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import classNames from 'classnames';
-
 import styles from './layout.scss';
 import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
-import { ComponentRef, ForwardedRef } from 'react';
-import { withForwardRef } from '../../helper/withForwardRef';
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from "../../helper/withMemo";
 
-export type InlineBlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
+export type InlineBlockProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType> & {
     id?: string
     title?: string
 }
 >;
 
-function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>(
+export const InlineBlock = withMemo(function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>(
     { children, as = 'span' as AsType, className, ...props }: InlineBlockProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
 ) {
     // Variables
 
@@ -39,13 +38,8 @@ function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>(
             {...(props as ViewWithoutListenersProps<AsType>)}
             className={classNames(styles.inlineBlock, className)}
             as={as as AsType}
-            ref={ref}
         >
             {children}
         </ViewWithoutListeners>
     );
-}
-
-// Need InlineMemo for autocompletion of phpstorm
-const InlineBlockMemo = withForwardRef(InlineBlock, styles);
-export { InlineBlockMemo as InlineBlock };
+}, styles);

package/src/Components/Layout/View.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { ComponentRef, ForwardedRef, PropsWithChildren } from 'react';
 import { Override } from '../../TypeHelpers';
-import { withForwardRef } from "../../helper/withForwardRef";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from "../../helper/withMemo";
 
-export type ViewProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<
-    Override<React.ComponentPropsWithoutRef<AsType>, { as?: AsType; children?: React.ReactNode }>
+export type ViewProps<AsType extends keyof IntrinsicElements> = PropsWithChildren<
+    Override<React.ComponentPropsWithoutRef<AsType>, { as?: AsType; children?: React.ReactNode, ref?: ForwardedRef<ComponentRef<AsType>> }>
 >;
 
-export const View = withForwardRef(function View<AsType extends keyof JSX.IntrinsicElements>(
-    {children, as, ...otherProps}: ViewProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
+export const View = withMemo(function View<AsType extends keyof JSX.IntrinsicElements>(
+    {children, as,ref, ...otherProps}: ViewProps<AsType>
 ) {
     // Variables
 

package/src/Components/Layout/ViewWithoutListeners.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { ComponentRef, DOMAttributes, ForwardedRef } from 'react';
+import { DOMAttributes, ForwardedRef } from 'react';
 import { View, ViewProps } from './View';
-import { withForwardRef } from "../../helper/withForwardRef";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from "../../helper/withMemo";
 
-export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements> = Omit<
+export type ViewWithoutListenersProps<AsType extends keyof IntrinsicElements> = Omit<
     ViewProps<AsType>,
     keyof DOMAttributes<AsType>
 > & { children?: React.ReactNode, dangerouslySetInnerHTML?: {
@@ -12,9 +14,8 @@ export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements
         __html: string | TrustedHTML;
     } | undefined;   };
 
-export const ViewWithoutListeners = withForwardRef(function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
-    { children, ...props }: ViewWithoutListenersProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
+export const ViewWithoutListeners = withMemo(function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
+    { children,ref, ...props }: ViewWithoutListenersProps<AsType>,
 ) {
     // Variables
 
@@ -32,7 +33,7 @@ export const ViewWithoutListeners = withForwardRef(function ViewWithoutListeners
 
     // Render Functions
     return (
-        <View {...props} ref={ref}>
+        <View {...props} ref={ref as ForwardedRef<SVGElement|HTMLElement>}>
             {children}
         </View>
     );