@ainias42/react-bootstrap-mobile 0.1.31 → 0.2.0

package/dist/src/Components/DragAndDrop/DropArea.d.ts

@@ -2,6 +2,4 @@ import * as React from 'react';
 import { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
 import { DroppableProps } from 'react-beautiful-dnd';
 export type DropAreaProps = RbmComponentProps<Omit<DroppableProps, 'children'>, WithNoStringAndChildrenProps>;
-declare function DropArea({ children, style, className, ...dropProps }: DropAreaProps): React.JSX.Element | null;
-declare const DropAreaMemo: typeof DropArea;
-export { DropAreaMemo as DropArea };
+export declare const DropArea: ({ children, style, className, ...dropProps }: DropAreaProps) => React.JSX.Element | null;

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function useClientLayoutEffect(...params: Parameters<typeof React.useLayoutEffect>): void;

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

@@ -1 +1 @@
-export declare function useDelayed<Args extends any[]>(callback: (...args: Args) => void | Promise<void>, dependencies: any[], delay?: number, maxDelay?: number): (...newArgs: Args) => void;
+export declare function useDelayed<Args extends any[]>(callback: (...args: Args) => void | Promise<void>, dependencies: any[], delay?: number, maxDelay?: number | undefined): (...newArgs: Args) => void;

package/dist/src/Components/Layout/Block.d.ts

@@ -3,5 +3,5 @@
 import { RbmComponentProps } from '../RbmComponentProps';
 import { ViewWithoutListenersProps } from './ViewWithoutListeners';
 export type BlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<ViewWithoutListenersProps<AsType>>;
-declare const BlockMemo: import("../../helper/withForwardRef").RefComponent<BlockProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
+declare const BlockMemo: import("../../helper/withForwardRef").RefComponent<BlockProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLInputElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement | SVGSetElement>;
 export { BlockMemo as Block };

package/dist/src/Components/Layout/Flex.d.ts

@@ -6,5 +6,5 @@ export type FlexProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponent
     horizontal?: boolean;
     grow?: boolean;
 }>;
-declare const tmp: import("../../helper/withForwardRef").RefComponent<FlexProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
+declare const tmp: import("../../helper/withForwardRef").RefComponent<FlexProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLInputElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement | SVGSetElement>;
 export { tmp as Flex };

package/dist/src/Components/Layout/Inline.d.ts

@@ -3,5 +3,5 @@
 import { RbmComponentProps } from '../RbmComponentProps';
 import { ViewWithoutListenersProps } from './ViewWithoutListeners';
 export type InlineProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<ViewWithoutListenersProps<AsType>>;
-declare const InlineMemo: import("../../helper/withForwardRef").RefComponent<InlineProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
+declare const InlineMemo: import("../../helper/withForwardRef").RefComponent<InlineProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLInputElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement | SVGSetElement>;
 export { InlineMemo as Inline };

package/dist/src/Components/Layout/InlineBlock.d.ts

@@ -6,5 +6,5 @@ export type InlineBlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmCo
     id?: string;
     title?: string;
 }>;
-declare const InlineBlockMemo: import("../../helper/withForwardRef").RefComponent<InlineBlockProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
+declare const InlineBlockMemo: import("../../helper/withForwardRef").RefComponent<InlineBlockProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLInputElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement | SVGSetElement>;
 export { InlineBlockMemo as InlineBlock };

package/dist/src/Components/Layout/View.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { ComponentRef, PropsWithChildren, ReactNode, RefAttributes } from 'react';
+import { PropsWithChildren } from 'react';
 import { Override } from '../../TypeHelpers';
 export type ViewProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<Override<React.ComponentPropsWithoutRef<AsType>, {
     as?: AsType;
     children?: React.ReactNode;
 }>>;
-declare const ViewMemo: <AsType extends keyof JSX.IntrinsicElements>(props: ViewProps<AsType> & RefAttributes<ComponentRef<AsType>>) => ReactNode | null;
-export { ViewMemo as View };
+export declare const View: import("../../helper/withForwardRef").RefComponent<ViewProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLInputElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement | SVGSetElement>;

package/dist/src/Components/Layout/ViewWithoutListeners.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentRef, DOMAttributes, ReactNode, RefAttributes } from 'react';
+import { DOMAttributes } from 'react';
 import { ViewProps } from './View';
 export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements> = Omit<ViewProps<AsType>, keyof DOMAttributes<AsType>> & {
     children?: React.ReactNode;
@@ -7,5 +7,4 @@ export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements
         __html: string | TrustedHTML;
     } | undefined;
 };
-declare const ViewWithoutListenersMemo: <AsType extends keyof JSX.IntrinsicElements>(props: ViewWithoutListenersProps<AsType> & RefAttributes<ComponentRef<AsType>>) => ReactNode;
-export { ViewWithoutListenersMemo as ViewWithoutListeners };
+export declare const ViewWithoutListeners: import("../../helper/withForwardRef").RefComponent<ViewWithoutListenersProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLInputElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement | SVGSetElement>;

package/dist/src/Components/Toast/ToastContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const ToastContext: import("react").Context<(<Data>(text: string, action?: {
+    name: string;
+    onClick: (data?: Data) => void;
+    onClickData?: Data;
+}, duration?: number) => void)>;
+export declare function useToast(): <Data>(text: string, action?: {
+    name: string;
+    onClick: (data?: Data | undefined) => void;
+    onClickData?: Data | undefined;
+} | undefined, duration?: number | undefined) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.1.31",
+  "version": "0.2.0",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -8,7 +8,10 @@
     "build": "node bin/build.js && webpack",
     "build:production": "node bin/build.js && webpack --env production",
     "update packages": "node bin/updateCopies.js",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint:noCache": "eslint \"src/{**/*,*}.{js,jsx,tsx,ts}\" --max-warnings 0",
+    "lint": "npm run lint:noCache -- --cache",
+    "lint:fix": "npm run lint -- --fix"
   },
   "repository": {
     "type": "git",
@@ -29,64 +32,72 @@
   },
   "homepage": "https://github.com/Ainias/Bootstrap-React-Mobile#readme",
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "react": ">=17.0.0",
+    "@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",
+    "bootstrap": "^5.3.3",
+    "react": ">=18.0.0",
     "react-beautiful-dnd": "^13.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-transform-typescript": "^7.16.8",
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@types/react": ">=17.0.0",
-    "@types/react-beautiful-dnd": "^13.1.3",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": ">=17.0.0",
-    "@types/react-redux": "^7.1.18",
-    "@types/react-table": "^7.7.9",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.30.0",
-    "babel-loader": "^8.2.5",
-    "bootstrap": "^5.1.0",
-    "css-loader": "^6.7.1",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.25.1",
-    "html-webpack-plugin": "^5.5.0",
+    "ajv": "^8.14.0",
+    "bootstrap": "^5.3.3",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.3.1",
+    "react-beautiful-dnd": "^13.1.1",
+    "@babel/core": "^7.24.6",
+    "@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",
+    "@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-beautiful-dnd": "^13.1.8",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": ">=18.0.0",
+    "@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",
+    "babel-loader": "^9.1.3",
+    "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-plugin-react-hooks": "^4.6.2",
+    "html-webpack-plugin": "^5.6.0",
     "loader-utils": "3.2.1",
-    "mini-css-extract-plugin": "^2.6.0",
-    "prettier": "^2.3.2",
-    "sass": "^1.53.0",
-    "sass-loader": "^12.6.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.1",
-    "ts-loader": "^9.2.9",
-    "typescript": "^5.2.2",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1"
+    "mini-css-extract-plugin": "^2.9.0",
+    "prettier": "^3.2.5",
+    "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"
   },
   "dependencies": {
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "classnames": "^2.3.1",
+    "@ainias42/js-helper": ">=0.8.14",
+    "@types/react-virtualized-auto-sizer": "^1.0.4",
+    "classnames": "^2.5.1",
     "isomorphic-style-loader": "^5.3.2",
-    "@ainias42/js-helper": ">=0.8.10",
     "react-color": "^2.19.3",
-    "react-table": "^7.7.0",
-    "react-virtualized-auto-sizer": "^1.0.7",
-    "react-window": "^1.8.8",
-    "react-window-infinite-loader": "^1.0.8",
-    "styled-jsx": "^5.0.2"
+    "react-table": "^7.8.0",
+    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-window": "^1.8.10",
+    "react-window-infinite-loader": "^1.0.9"
   }
 }

package/react-bootstrap-mobile.scss

@@ -1,6 +1,6 @@
 @import "src/scss/variables";
-@import "src/scss/mobileMixin";
+@import "src/scss/designMixin";
+@import "src/scss/flavorMixin";
 @import "src/scss/default";
-@import "src/scss/animations";
 @import "src/scss/baseClasses";
 @import "src/scss/colors";

package/src/Components/Card/Card.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
-
 import styles from './card.scss';
 import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';

package/src/Components/Dialog/DialogContainer.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import {ComponentType, ForwardedRef, PropsWithChildren, useCallback, useImperativeHandle, useState} from 'react';
+import { ComponentType, ForwardedRef, PropsWithChildren, useCallback, useImperativeHandle, useState } from 'react';
 import { PromiseWithHandlers } from '@ainias42/js-helper';
 import { DialogProvider, ShowDialog } from './DialogContext';
 import { Dialog } from './Dialog';
-import { EmptyProps } from '../../helper/EmptyProps';
-import {withForwardRef} from "../../helper/withForwardRef";
+import { withForwardRef } from "../../helper/withForwardRef";
 import { Block } from "../Layout/Block";
 
 export type DialogContainerProps = PropsWithChildren<{
@@ -22,7 +21,10 @@ export type DialogContainerRef = {
     showDialog: ShowDialog;
 }
 
-export const DialogContainer = withForwardRef(function DialogContainer({ children, dialogClassName }: DialogContainerProps, ref: ForwardedRef<DialogContainerRef>) {
+export const DialogContainer = withForwardRef(function DialogContainer({
+                                                                           children,
+                                                                           dialogClassName
+                                                                       }: DialogContainerProps, ref: ForwardedRef<DialogContainerRef>) {
     // Variables
     const [dialogs, setDialogs] = useState<DialogData[]>([]);
     const [, setLastId] = useState(0);
@@ -39,7 +41,7 @@ export const DialogContainer = withForwardRef(function DialogContainer({ childre
         setLastId((oldId) => {
             const id = oldId + 1;
             setDialogs((oldDialogs) => {
-                return [...oldDialogs, { id, component, props, resultPromise: promise }] as DialogData[];
+                return [...oldDialogs, {id, component, props, resultPromise: promise}] as DialogData[];
             });
             return id;
         });
@@ -72,14 +74,14 @@ export const DialogContainer = withForwardRef(function DialogContainer({ childre
         <DialogProvider value={showDialog}>
             {children}
             <Block className={dialogClassName}>
-            {dialogs.map((d) => {
-                const DialogComponent = d.component;
-                return (
-                    <Dialog {...d.props} key={d.id} onClose={onClose} identifier={d.id}>
-                        <DialogComponent {...d.props} />
-                    </Dialog>
-                );
-            })}
+                {dialogs.map((d) => {
+                    const DialogComponent = d.component;
+                    return (
+                        <Dialog {...d.props} key={d.id} onClose={onClose} identifier={d.id}>
+                            <DialogComponent {...d.props} />
+                        </Dialog>
+                    );
+                })}
             </Block>
         </DialogProvider>
     );

package/src/Components/Dialog/DialogContext.ts

@@ -12,7 +12,10 @@ export type ShowDialog = <
     props?: Omit<P, 'close'>
 ) => Promise<R | void>;
 
-const DialogContext = React.createContext<ShowDialog>(() => Promise.reject());
+const DialogContext = React.createContext<ShowDialog>(() => {
+    console.error("DialogContext not initialized");
+    return Promise.reject("DialogContext not initialized")
+});
 export const DialogProvider = DialogContext.Provider;
 
 export function useDialog() {

package/src/Components/DragAndDrop/DropArea.tsx

@@ -6,7 +6,7 @@ import { useStrictEnabled } from './useStrictEnabled';
 
 export type DropAreaProps = RbmComponentProps<Omit<DroppableProps, 'children'>, WithNoStringAndChildrenProps>;
 
-function DropArea({ children, style, className, ...dropProps }: DropAreaProps) {
+export const DropArea = withMemo(function DropArea({ children, style, className, ...dropProps }: DropAreaProps) {
     // Variables
 
     // Refs
@@ -37,8 +37,4 @@ function DropArea({ children, style, className, ...dropProps }: DropAreaProps) {
             )}
         </Droppable>
     );
-}
-
-// Need DropAreaMemo for autocompletion of phpstorm
-const DropAreaMemo = withMemo(DropArea);
-export { DropAreaMemo as DropArea };
+});

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {Override} from '@ainias42/js-helper';
-import {OptionalListener, useListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
+import {OptionalListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
 
 import styles from './button.scss';
 import classNames from 'classnames';

package/src/Components/FormElements/ColorInput/ColorInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useCallback, useRef, useState, MouseEvent, useEffect, useLayoutEffect} from 'react';
+import {useCallback, useRef, useState, MouseEvent} from 'react';
 import {Color, ColorChangeHandler, ColorResult, SketchPicker} from 'react-color';
 import {OptionalListener, useListener} from '../../Hooks/useListener';
 import {withMemo} from '../../../helper/withMemo';
@@ -7,6 +7,7 @@ import {withMemo} from '../../../helper/withMemo';
 import styles from './colorInput.scss';
 import {useSharedSelectedColor} from './sharedSelectedColor';
 import {Menu} from "../../Menu/Menu";
+import { useClientLayoutEffect } from "../../Hooks/useClientLayoutEffect";
 
 export type ColorInputProps<OnChangeData> = {
     defaultValue?: string;
@@ -112,7 +113,7 @@ function ColorInput<OnChangeData>({
     );
 
     // Effects
-    useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         if (!modalRef.current) {
             return;
         }

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

@@ -48,7 +48,7 @@ export const FileInput = withMemo(function FileInput<OnChangeData>({
 
     // Other
 
-    // Render Functions
+    //  Render Functions
     return <MultipleFileInput maxFiles={1} value={innerValue} onChangeFiles={onChangeFiles}
                               mimeTypes={mimeTypes} showDeleteButton={!required} {...multipleFileInputProps}/>;
 

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

@@ -187,7 +187,6 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
             }
 
             indexRef.current = index;
-            console.log("LOG-d inputRef dispatch", inputRef.current);
             inputRef.current.dispatchEvent(new MouseEvent("click"));
         }, [allowOverride]);
 
@@ -236,7 +235,6 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                 </Flex>
                 <Flex horizontal={true} className={styles.previewContainer}>
                     {value?.map((file, index) => {
-                        console.log("LOG-d file", file);
                         return <Grow className={styles.preview} center={true} key={file.data}>
                             <Clickable
                                 onDrop={onDrop}
@@ -252,7 +250,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                                         <Icon icon={faTimesCircle}/>
                                     </Clickable>}
                             </Clickable>
-                        </Grow>
+                        </Grow>;
                     })}
                     <Grow className={classNames(styles.addFile, {[styles.hidden]: value.length >= maxFiles})} center={true}>
                         <Clickable

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Input, InputProps } from './Input';
 import { withMemo } from '../../../helper/withMemo';
-
 import styles from './input.scss';
 import classNames from 'classnames';
 

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

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import {
     ChangeEvent,
-    ChangeEventHandler,
     InputHTMLAttributes,
-    KeyboardEvent, KeyboardEventHandler,
+    KeyboardEvent,
     MutableRefObject,
-    useCallback, useMemo,
-    useRef,
-    useState
+    useCallback, useEffect,
+    useMemo,
 } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
@@ -41,6 +39,7 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             onKeyDown,
             inline = false,
             value,
+            onChangeText,
             ...otherProps
         }: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>,
         ref: MutableRefObject<HTMLInputElement> | null
@@ -53,7 +52,7 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
                 return value;
             }
             if (typeof value === "string") {
-                if (value === "-"){
+                if (value === "-") {
                     return value;
                 }
 
@@ -76,7 +75,7 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
                 }
             }
             return "";
-        }, [value])
+        }, [value, otherProps.max, otherProps.min, otherProps.type]);
         // Refs
         const innerRef = useComposedRef(ref);
 
@@ -86,23 +85,23 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             otherProps
         );
         const onChange = useCallback(
-            (e: ChangeEvent<HTMLInputElement>|KeyboardEvent<HTMLInputElement>) => {
-                if (otherProps.onChangeText) {
+            (e: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => {
+                if (onChangeText) {
                     if (otherProps.type === "number") {
                         if (e.currentTarget.value === "-") {
-                            otherProps.onChangeText(e.currentTarget.value);
+                            onChangeText(e.currentTarget.value);
                             return;
                         }
 
                         const val = !Number.isNaN(Number(e.currentTarget.value)) ? e.currentTarget.value : !Number.isNaN(parseFloat(e.currentTarget.value)) ? String(parseFloat(e.currentTarget.value)) : "";
-                        otherProps.onChangeText(val);
+                        onChangeText(val);
                     } else {
-                        otherProps.onChangeText(e.currentTarget.value);
+                        onChangeText(e.currentTarget.value);
                     }
                 }
                 onChangeWithData(e);
             },
-            [onChangeWithData, otherProps.onChangeText, otherProps.type]
+            [onChangeWithData, onChangeText, otherProps.type]
         );
 
         const [onBlur, otherPropsWithoutBlur] = useListenerWithExtractedProps<'onBlur', OnBlurData>(
@@ -122,7 +121,7 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
                     if (otherProps.type === "number") {
                         const stringValue = (e.target as HTMLInputElement).value;
                         const val = !Number.isNaN(Number(stringValue)) ? stringValue : !Number.isNaN(parseFloat(stringValue)) ? String(parseFloat(stringValue)) : "";
-                        otherProps.onEnter(val)
+                        otherProps.onEnter(val);
                     } else {
                         otherProps.onEnter((e.target as HTMLInputElement).value);
                     }
@@ -130,15 +129,14 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
 
                 if (otherProps.type === "number") {
                     const step = otherProps.step ? Number(otherProps.step) : 1;
-                    if (e.key === "ArrowUp"){
+                    if (e.key === "ArrowUp") {
                         let newValue = (parseFloat(e.currentTarget.value) || 0) + step;
                         if (otherProps.max !== undefined && newValue > Number(otherProps.max)) {
-                           newValue = Number(otherProps.max);
+                            newValue = Number(otherProps.max);
                         }
                         e.currentTarget.value = newValue.toString();
                         onChange(e);
-                    }
-                    else if (e.key === "ArrowDown"){
+                    } else if (e.key === "ArrowDown") {
                         let newValue = (parseFloat(e.currentTarget.value) || 0) - step;
                         if (otherProps.min !== undefined && newValue < Number(otherProps.min)) {
                             newValue = Number(otherProps.min);
@@ -148,18 +146,30 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
                     }
                 }
             },
-            [otherProps.onEnter, onKeyDown, otherProps.type]
+            [onKeyDown, onChange, otherProps]
         );
 
         // Effects
         useOnChangeDone(onChangeDone, innerRef);
 
+        useEffect(() => {
+            // Add the onChangeDone for numbers
+            if (otherProps.type === "number") {
+                const elem = innerRef.current;
+                elem?.addEventListener('blur', onChangeDone);
+                return () => {
+                    elem?.removeEventListener('blur', onChangeDone);
+                };
+            }
+            return undefined;
+        }, [ref, onChangeDone, innerRef, otherProps.type]);
+
+
         // Other
 
         // Render Functions
 
         return (
-            // eslint-disable-next-line jsx-a11y/label-has-associated-control
             <label className={classNames(styles.input, {[styles.inline]: inline}, className)} style={style}>
                 {label ? <span className={styles.label}>{label}</span> : null}
                 <input

package/src/Components/FormElements/Select/Select.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import { ChangeEventHandler, SelectHTMLAttributes, useCallback } from 'react';
-import {OptionalListener, useListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
+import {OptionalListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
 
 import styles from './select.scss';
 import { withMemo } from '../../../helper/withMemo';