@ainias42/react-bootstrap-mobile 0.1.14 → 0.1.16

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

@@ -4,11 +4,13 @@ type OnClickListener<Data> = OptionalListener<'onClick', Data>;
 type OnMouseDownListener<Data> = OptionalListener<'onMouseDown', Data>;
 type OnMouseUpListener<Data> = OptionalListener<'onMouseUp', Data>;
 type OnMouseMoveListener<Data> = OptionalListener<'onMouseMove', Data>;
-export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, HrefType extends string | undefined> = RbmComponentProps<{
+type OnDropListener<Data> = OptionalListener<'onDrop', Data>;
+type OnDragOverListener<Data> = OptionalListener<'onDragOver', Data>;
+export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData, OnMouseEnterData, OnMouseLeaveData, HrefType extends string | undefined> = RbmComponentProps<{
     interactable?: boolean;
     href?: HrefType;
     preventDefault?: boolean;
     stopPropagation?: boolean;
-} & OnClickListener<OnClickData> & OnMouseDownListener<OnMouseDownData> & OnMouseMoveListener<OnMouseMoveData> & OnMouseUpListener<OnMouseUpData> & OptionalListener<'onClickCapture', OnClickCaptureData>>;
-declare const ClickableMemo: import("../../helper/withForwardRef").RefComponent<ClickableProps<unknown, unknown, unknown, unknown, unknown, string | undefined>, HTMLAnchorElement | HTMLSpanElement>;
+} & OnClickListener<OnClickData> & OnMouseDownListener<OnMouseDownData> & OnMouseMoveListener<OnMouseMoveData> & OnMouseUpListener<OnMouseUpData> & OnDropListener<OnDropData> & OnDragOverListener<OnDragOverData> & OptionalListener<'onClickCapture', OnClickCaptureData> & OptionalListener<'onMouseEnter', OnMouseEnterData> & OptionalListener<'onMouseLeave', OnMouseLeaveData>>;
+declare const ClickableMemo: import("../../helper/withForwardRef").RefComponent<ClickableProps<unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, string | undefined>, HTMLAnchorElement | HTMLSpanElement>;
 export { ClickableMemo as Clickable };

package/dist/src/Components/Dialog/DialogBackground.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
-import { EmptyProps } from '../../helper/EmptyProps';
-export type DialogBackgroundProps = RbmComponentProps<EmptyProps>;
-declare function DialogBackground({ children, className, style }: DialogBackgroundProps): React.JSX.Element;
-declare const DialogBackgroundMemo: typeof DialogBackground;
-export { DialogBackgroundMemo as DialogBackground };
+export type DialogBackgroundProps = RbmComponentProps<{
+    title?: string;
+}>;
+export declare const DialogBackground: ({ children, className, style, title }: DialogBackgroundProps) => React.JSX.Element;

package/dist/src/Components/Dialog/DialogContainer.d.ts

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
+import { ShowDialog } from './DialogContext';
 import { EmptyProps } from '../../helper/EmptyProps';
 export type DialogContainerProps = PropsWithChildren<EmptyProps>;
-declare function DialogContainer({ children }: DialogContainerProps): React.JSX.Element;
-declare const DialogContainerMemo: typeof DialogContainer;
-export { DialogContainerMemo as DialogContainer };
+export type DialogContainerRef = {
+    showDialog: ShowDialog;
+};
+export declare const DialogContainer: import("../../helper/withForwardRef").RefComponent<{
+    children?: React.ReactNode;
+}, DialogContainerRef>;

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

@@ -3,7 +3,9 @@ import { Override } from '@ainias42/js-helper';
 import { OptionalListener } from '../../Hooks/useListener';
 import { HTMLAttributes } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
-export type ButtonProps<ClickData> = RbmComponentProps<Override<HTMLAttributes<HTMLButtonElement>, OptionalListener<'onClick', ClickData>>>;
-declare function Button<ClickData>({ children, className, ...props }: ButtonProps<ClickData>): React.JSX.Element;
-declare const ButtonMemo: typeof Button;
-export { ButtonMemo as Button };
+import { ButtonType } from "./ButtonType";
+export type ButtonProps<ClickData> = RbmComponentProps<Override<HTMLAttributes<HTMLButtonElement>, {
+    type?: ButtonType;
+    disabled?: boolean;
+} & OptionalListener<'onClick', ClickData>>>;
+export declare const Button: <ClickData>({ children, className, disabled, type, ...props }: ButtonProps<ClickData>) => React.JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare enum ButtonType {
+    Primary = "primary",
+    Secondary = "secondary"
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../../../RbmComponentProps';
+import { Override } from '../../../../TypeHelpers';
+import { Listener } from '../../../Hooks/useListener';
+import { FileType } from "./FileType";
+import { MultipleFileInputProps } from "./MultipleFileInput";
+export type FileInputProps<OnChangeFileData> = RbmComponentProps<Override<Omit<MultipleFileInputProps<unknown>, "onChangeFiles" | "maxFiles" | "onChangeFilesData" | "mimeTypes" | "showDeleteButton">, {
+    value?: FileType;
+    mimeType?: string;
+    required?: boolean;
+} & Listener<'onChangeFile', OnChangeFileData, FileType | undefined>>>;
+export declare const FileInput: <OnChangeData>({ value, mimeType, required, ...otherProps }: FileInputProps<OnChangeData>) => React.JSX.Element;

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

@@ -0,0 +1,7 @@
+export type FileType = {
+    name: string;
+    data: string;
+    mimeType: string;
+    uploaded?: boolean;
+    blob?: Blob;
+};

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../../../RbmComponentProps';
+import { Override } from '../../../../TypeHelpers';
+import { InputHTMLAttributes } from 'react';
+import { Listener } from '../../../Hooks/useListener';
+import { FileType } from "./FileType";
+export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<Override<Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'>, {
+    value: FileType[];
+    label?: string;
+    mimeTypes?: string[];
+    maxFiles?: number;
+    maxSizePerFile?: number;
+    onError?: (error: string) => void;
+    allowOverride?: boolean;
+    showDeleteButton?: boolean;
+} & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>>>;
+export declare const MultipleFileInput: <OnChangeData>({ className, style, value, label, mimeTypes, maxFiles, maxSizePerFile, allowOverride, onError, showDeleteButton, ...otherProps }: MultipleFileInputProps<OnChangeData>) => React.JSX.Element;

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

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

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

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { InputHTMLAttributes } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
-export type SwitchProps = RbmComponentProps<Override<InputHTMLAttributes<HTMLInputElement>, {
+import { OptionalListener } from "../../Hooks/useListener";
+export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<Override<InputHTMLAttributes<HTMLInputElement>, {
     preLabel?: string;
     label?: string;
     children?: string;
     isLabelBeforeSwitch?: boolean;
     isDual?: boolean;
-    onChangeChecked?(isChecked: boolean): void;
-}>>;
-export declare const Switch: ({ children, label, preLabel, isLabelBeforeSwitch, isDual, id, className, style, onChange, onChangeChecked, ...props }: SwitchProps) => React.JSX.Element;
+} & OptionalListener<"onChangeChecked", OnChangeCheckedData, boolean>>>;
+export declare const Switch: <OnChangeCheckedData>({ children, label, preLabel, isLabelBeforeSwitch, isDual, id, className, style, onChange, ...props }: SwitchProps<OnChangeCheckedData>) => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useMousePosition(): import("react").MutableRefObject<{
+    x: number;
+    y: number;
+}>;

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

@@ -0,0 +1,4 @@
+export declare function useWindowDimensions(): {
+    x: number;
+    y: number;
+};

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

@@ -6,9 +6,8 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 export type IconSource = IconProp | string | IconDefinition;
 export type IconProps = RbmComponentProps<Override<FontAwesomeIconProps, {
+    noMargin?: boolean;
     icon: IconSource;
     alt?: string;
 }>>;
-declare function Icon({ icon, alt, className, style, title, ...props }: IconProps): React.JSX.Element;
-declare const IconMemo: typeof Icon;
-export { IconMemo as Icon };
+export declare const Icon: ({ icon, alt, className, noMargin, style, title, ...props }: IconProps) => React.JSX.Element;

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

@@ -3,7 +3,8 @@ import { RbmComponentProps } from '../../RbmComponentProps';
 export type GridProps = RbmComponentProps<{
     columns?: number;
     rows?: number;
+    useContainerWidth?: boolean;
 }>;
-declare function Grid({ style, children, columns, rows, className, __allowChildren }: GridProps): React.JSX.Element;
+declare function Grid({ style, children, columns, rows, useContainerWidth, className, __allowChildren }: GridProps): React.JSX.Element;
 declare const GridMemo: typeof Grid;
 export { GridMemo as Grid };

package/dist/src/Components/Layout/Grid/GridItem.d.ts

@@ -2,12 +2,14 @@ import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 export type GridItemProps = RbmComponentProps<{
     size: number;
+    xs?: number;
     sm?: number;
     md?: number;
     lg?: number;
     xl?: number;
     xxl?: number;
     print?: number;
+    startXxs?: number;
     startXs?: number;
     startSm?: number;
     startMd?: number;
@@ -15,6 +17,7 @@ export type GridItemProps = RbmComponentProps<{
     startXl?: number;
     startXxl?: number;
     startPrint?: number;
+    orderXxs?: number;
     orderXs?: number;
     orderSm?: number;
     orderMd?: number;
@@ -23,6 +26,6 @@ export type GridItemProps = RbmComponentProps<{
     orderXxl?: number;
     orderPrint?: number;
 }>;
-declare function GridItem({ style, children, className, __allowChildren, size, sm, md, lg, xl, xxl, print, startXs, startMd, startSm, startLg, startXl, startXxl, startPrint, orderXs, orderSm, orderMd, orderLg, orderXxl, orderXl, orderPrint, }: GridItemProps): React.JSX.Element;
+declare function GridItem({ style, children, className, __allowChildren, size, xs, sm, md, lg, xl, xxl, print, startXxs, startXs, startMd, startSm, startLg, startXl, startXxl, startPrint, orderXxs, orderXs, orderSm, orderMd, orderLg, orderXxl, orderXl, orderPrint, }: GridItemProps): React.JSX.Element;
 declare const GridItemMemo: typeof GridItem;
 export { GridItemMemo as GridItem };

package/dist/src/Components/Menu/HoverMenu.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { RbmChildWithoutString, RbmComponentProps, WithNoStringAndChildrenProps } from "../RbmComponentProps";
+export type HoverMenuProps = RbmComponentProps<{
+    items: RbmChildWithoutString;
+    onClick?: () => void;
+}, WithNoStringAndChildrenProps>;
+export declare const HoverMenu: ({ children, items, className, style, onClick, }: HoverMenuProps) => React.JSX.Element;

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

@@ -1,17 +1,25 @@
 import * as React from 'react';
-import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
+import { RbmComponentProps } from '../RbmComponentProps';
 import { IconSource } from '../Icon/Icon';
-export type MenuItem = {
+export type MenuItemType = {
     label: string;
-    callback: () => void;
-    icon?: IconSource;
+    icon?: IconSource | {
+        icon: IconSource;
+        color: string;
+    };
     key: string;
+    className?: string;
+    callback: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 };
 export type MenuProps = RbmComponentProps<{
-    items: MenuItem[];
+    items?: MenuItemType[];
     x: number;
     y: number;
     isOpen: boolean;
     onClose: () => void;
-}, WithNoChildren>;
-export declare const Menu: ({ className, style, items, y, x, isOpen, onClose }: MenuProps) => React.JSX.Element | null;
+    offsetX?: number;
+    offsetY?: number;
+}>;
+export declare const Menu: ({ className, style, items, y, x, isOpen, onClose, children, offsetY, offsetX, }: MenuProps) => React.JSX.Element | null;

package/dist/src/Components/Menu/MenuCloseContext.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const MenuCloseContextProvider: React.Provider<() => void>;
+export declare function useMenuClose(): () => void;

package/dist/src/Components/Menu/MenuDivider.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MenuDivider: () => React.JSX.Element;

package/dist/src/Components/Menu/MenuItem.d.ts

@@ -0,0 +1,23 @@
+import { IconSource } from "../Icon/Icon";
+import React, { ReactNode } from "react";
+import { RbmComponentProps, WithChildren } from "../RbmComponentProps";
+import Element = React.JSX.Element;
+export type MenuItemProps<Item = undefined> = RbmComponentProps<{
+    icon?: IconSource;
+    iconColor?: string;
+    className?: string;
+    children: string | ReactNode;
+    disabled?: boolean;
+    active?: boolean;
+} & ({
+    onClick: (item: Item) => void;
+    onMouseEnter?: (item: Item) => void;
+    onMouseLeave?: (item: Item) => void;
+    item?: undefined;
+} | {
+    onClick: (item: Item) => void;
+    onMouseEnter?: (item: Item) => void;
+    onMouseLeave?: (item: Item) => void;
+    item: Item;
+}), WithChildren>;
+export declare const MenuItem: <Item>({ children, icon, iconColor, className, onClick, onMouseEnter, onMouseLeave, active, item, disabled, ...props }: MenuItemProps<Item>) => Element;

package/dist/src/Components/Menu/Submenu.d.ts

@@ -0,0 +1,10 @@
+import { RbmComponentProps, WithNoStringAndChildrenProps } from "../RbmComponentProps";
+import { IconSource } from "../Icon/Icon";
+import React from "react";
+export type SubmenuProps = RbmComponentProps<{
+    label: string;
+    icon?: IconSource;
+    iconColor?: string;
+    disabled?: boolean;
+}, WithNoStringAndChildrenProps>;
+export declare const Submenu: ({ children, label, icon, iconColor, className, style, disabled }: SubmenuProps) => React.JSX.Element;

package/dist/src/Components/Menu/useMenu.d.ts

@@ -1,3 +1,3 @@
 import { MouseEvent } from 'react';
 import { MenuProps } from './Menu';
-export declare function useMenu(): readonly [(e: MouseEvent) => void, Omit<MenuProps, "items">];
+export declare function useMenu(): readonly [(e: MouseEvent) => void, Omit<MenuProps, "children" | "items">];

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

@@ -18,6 +18,10 @@ export type WithNoStringAndChildrenProps = {
 export type WithStringProps = {
     children?: Recursive<string>;
 };
+export type WithChildren = {
+    children: ReactNode;
+    __allowChildren?: "text" | "all" | "html";
+};
 export type WithStringAndChildrenProps = {
     children: Recursive<string>;
 };

package/dist/src/ListRow/ListRow.d.ts

@@ -0,0 +1 @@
+export declare const ListRow: () => null;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "node bin/build.js && webpack",
     "build:production": "node bin/build.js && webpack --env production",
-    "update packages": "node bin/updateCopies.js"
+    "update packages": "node bin/updateCopies.js",
+    "typecheck": "tsc --no-emit"
   },
   "repository": {
     "type": "git",
@@ -28,10 +29,10 @@
   },
   "homepage": "https://github.com/Ainias/Bootstrap-React-Mobile#readme",
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@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",
     "react-beautiful-dnd": "^13.1.1"
   },
@@ -81,7 +82,7 @@
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "classnames": "^2.3.1",
     "isomorphic-style-loader": "^5.3.2",
-    "@ainias42/js-helper": ">=0.8.1",
+    "@ainias42/js-helper": ">=0.8.9",
     "react-color": "^2.19.3",
     "react-table": "^7.7.0",
     "react-virtualized-auto-sizer": "^1.0.7",

package/src/Components/Clickable/Clickable.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { OptionalListener, useListener } from '../Hooks/useListener';
+import {RbmComponentProps} from '../RbmComponentProps';
+import {OptionalListener, useListener} from '../Hooks/useListener';
 
 import styles from './clickable.scss';
 import classNames from 'classnames';
-import { useCallback, MouseEvent, ForwardedRef } from 'react';
-import { withForwardRef } from '../../helper/withForwardRef';
+import {useCallback, MouseEvent, ForwardedRef} from 'react';
+import {withForwardRef} from '../../helper/withForwardRef';
 
 type OnClickListener<Data> = OptionalListener<'onClick', Data>;
 type OnMouseDownListener<Data> = OptionalListener<'onMouseDown', Data>;
 type OnMouseUpListener<Data> = OptionalListener<'onMouseUp', Data>;
 type OnMouseMoveListener<Data> = OptionalListener<'onMouseMove', Data>;
+type OnDropListener<Data> = OptionalListener<'onDrop', Data>;
+type OnDragOverListener<Data> = OptionalListener<'onDragOver', Data>;
 
 export type ClickableProps<
     OnClickData,
@@ -18,6 +20,10 @@ export type ClickableProps<
     OnMouseMoveData,
     OnMouseUpData,
     OnClickCaptureData,
+    OnDropData,
+    OnDragOverData,
+    OnMouseEnterData,
+    OnMouseLeaveData,
     HrefType extends string | undefined
 > = RbmComponentProps<
     {
@@ -26,10 +32,14 @@ export type ClickableProps<
         preventDefault?: boolean;
         stopPropagation?: boolean;
     } & OnClickListener<OnClickData> &
-        OnMouseDownListener<OnMouseDownData> &
-        OnMouseMoveListener<OnMouseMoveData> &
-        OnMouseUpListener<OnMouseUpData> &
-        OptionalListener<'onClickCapture', OnClickCaptureData>
+    OnMouseDownListener<OnMouseDownData> &
+    OnMouseMoveListener<OnMouseMoveData> &
+    OnMouseUpListener<OnMouseUpData> &
+    OnDropListener<OnDropData> &
+    OnDragOverListener<OnDragOverData> &
+    OptionalListener<'onClickCapture', OnClickCaptureData> &
+    OptionalListener<'onMouseEnter', OnMouseEnterData> &
+    OptionalListener<'onMouseLeave', OnMouseLeaveData>
 >;
 
 function Clickable<
@@ -38,6 +48,10 @@ function Clickable<
     OnMouseMoveData,
     OnMouseUpData,
     OnClickCaptureData,
+    OnDropData,
+    OnDragOverData,
+    OnMouseEnterData,
+    OnMouseLeaveData,
     HrefType extends string | undefined
 >(
     {
@@ -46,10 +60,10 @@ function Clickable<
         style,
         href,
         interactable = true,
-        preventDefault = true,
+        preventDefault = false,
         stopPropagation = true,
         ...clickData
-    }: ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, HrefType>,
+    }: ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, HrefType>,
     ref: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>
 ) {
     // Variables
@@ -124,7 +138,7 @@ function Clickable<
     );
 
     const onClickCaptureInner = useListener<'onClickCapture', OnClickCaptureData>('onClickCapture', clickData);
-    const realOnClickCaptureInner = useCallback(
+    const realOnClickCapture = useCallback(
         (e: MouseEvent) => {
             if (clickData.onClickCapture) {
                 if (stopPropagation) {
@@ -139,6 +153,70 @@ function Clickable<
         [clickData.onClickCapture, onClickCaptureInner, preventDefault, stopPropagation]
     );
 
+    const onDropInner = useListener<'onDrop', OnDropData>('onDrop', clickData);
+    const realOnDrop = useCallback(
+        (e: MouseEvent) => {
+            if (clickData.onDrop) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onDropInner(e);
+            }
+        },
+        [clickData.onDrop, onDropInner, preventDefault, stopPropagation]
+    );
+
+    const onDragOver = useListener<'onDragOver', OnDragOverData>('onDragOver', clickData);
+    const realOnDragOver = useCallback(
+        (e: MouseEvent) => {
+            if (clickData.onDragOver) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onDragOver(e);
+            }
+        },
+        [clickData.onDragOver, onDragOver, preventDefault, stopPropagation]
+    );
+
+    const onMouseEnter = useListener<'onMouseEnter', OnMouseEnterData>('onMouseEnter', clickData);
+    const realOnMouseEnter = useCallback(
+        (e: MouseEvent) => {
+            if (clickData.onMouseEnter) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onMouseEnter(e);
+            }
+        },
+        [clickData.onMouseEnter, onMouseEnter, preventDefault, stopPropagation]
+    );
+
+    const onMouseLeave = useListener<'onMouseLeave', OnMouseLeaveData>('onMouseLeave', clickData);
+    const realOnMouseLeave = useCallback(
+        (e: MouseEvent) => {
+            if (clickData.onMouseLeave) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onMouseLeave(e);
+            }
+        },
+        [clickData.onMouseLeave, onMouseLeave, preventDefault, stopPropagation]
+    );
+
     // Effects
 
     // Other
@@ -153,7 +231,11 @@ function Clickable<
         onMouseDown: realOnMouseDown,
         onMouseMove: realOnMouseMove,
         onMouseUp: realOnMouseUp,
-        onClickCapture: realOnClickCaptureInner,
+        onClickCapture: realOnClickCapture,
+        onDrop: realOnDrop,
+        onDragOver: realOnDragOver,
+        onMouseEnter: realOnMouseEnter,
+        onMouseLeave: realOnMouseLeave,
         tabIndex: interactable ? 0 : undefined,
     };
     if (typeof href === 'string') {
@@ -171,4 +253,4 @@ function Clickable<
 }
 
 const ClickableMemo = withForwardRef(Clickable, styles);
-export { ClickableMemo as Clickable };
+export {ClickableMemo as Clickable};

package/src/Components/Dialog/DialogBackground.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { withMemo } from '../../helper/withMemo';
 import { RbmComponentProps } from '../RbmComponentProps';
 import { Block } from '../Layout/Block';
-import { EmptyProps } from '../../helper/EmptyProps';
 
 import styles from './dialogBackground.scss';
 import classNames from 'classnames';
+import {Heading} from "../Text/Heading";
 
-export type DialogBackgroundProps = RbmComponentProps<EmptyProps>;
+export type DialogBackgroundProps = RbmComponentProps<{title?: string}>;
 
-function DialogBackground({ children, className, style }: DialogBackgroundProps) {
+export const DialogBackground = withMemo(function DialogBackground({ children, className, style, title }: DialogBackgroundProps) {
     // Variables
 
     // Refs
@@ -28,11 +28,8 @@ function DialogBackground({ children, className, style }: DialogBackgroundProps)
 
     return (
         <Block __allowChildren="all" className={classNames(styles.dialogBackground, className)} style={style}>
+            {!!title && <Heading className={styles.title}>{title}</Heading>}
             {children}
         </Block>
     );
-}
-
-// Need DialogBackgroundMemo for autocompletion of phpstorm
-const DialogBackgroundMemo = withMemo(DialogBackground, styles);
-export { DialogBackgroundMemo as DialogBackground };
+}, styles);

package/src/Components/Dialog/DialogContainer.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { ComponentType, PropsWithChildren, useCallback, 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";
 
 export type DialogContainerProps = PropsWithChildren<EmptyProps>;
 
@@ -15,7 +15,11 @@ type DialogData = {
     resultPromise: PromiseWithHandlers<any>;
 };
 
-function DialogContainer({ children }: DialogContainerProps) {
+export type DialogContainerRef = {
+    showDialog: ShowDialog;
+}
+
+export const DialogContainer = withForwardRef(function DialogContainer({ children }: DialogContainerProps, ref: ForwardedRef<DialogContainerRef>) {
     // Variables
     const [dialogs, setDialogs] = useState<DialogData[]>([]);
     const [, setLastId] = useState(0);
@@ -52,6 +56,10 @@ function DialogContainer({ children }: DialogContainerProps) {
     }, []);
 
     // Effects
+    useImperativeHandle(ref, () => ({
+        showDialog
+    }), [showDialog]);
+
 
     // Other
 
@@ -70,8 +78,4 @@ function DialogContainer({ children }: DialogContainerProps) {
             })}
         </DialogProvider>
     );
-}
-
-// Need DialogContainerMemo for autocompletion of phpstorm
-const DialogContainerMemo = withMemo(DialogContainer);
-export { DialogContainerMemo as DialogContainer };
+});

package/src/Components/Dialog/DialogContext.ts

@@ -16,6 +16,5 @@ const DialogContext = React.createContext<ShowDialog>(() => Promise.reject());
 export const DialogProvider = DialogContext.Provider;
 
 export function useDialog() {
-    const showDialog = useContext(DialogContext);
-    return showDialog as ShowDialog;
+    return useContext(DialogContext);
 }

package/src/Components/Dialog/dialogBackground.scss

@@ -1,4 +1,8 @@
 .dialogBackground {
   background-color: white;
-  padding: 0.3rem;
+  padding: 0.5rem;
+
+  .title {
+    margin: 0 0 0.8rem;
+  }
 }

package/src/Components/DragAndDrop/DropArea.tsx

@@ -29,9 +29,10 @@ function DropArea({ children, style, className, ...dropProps }: DropAreaProps) {
 
     return (
         <Droppable {...dropProps}>
-            {({ innerRef, droppableProps }) => (
+            {({ innerRef, droppableProps, placeholder }) => (
                 <div {...droppableProps} ref={innerRef} style={style} className={className}>
                     {children}
+                    {placeholder}
                 </div>
             )}
         </Droppable>