@ainias42/react-bootstrap-mobile 0.1.16 → 0.1.17

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

@@ -1,16 +1,18 @@
 import { RbmComponentProps } from '../RbmComponentProps';
 import { OptionalListener } from '../Hooks/useListener';
+import { MouseEvent as ReactMouseEvent, MouseEvent } from 'react';
 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, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData, OnMouseEnterData, OnMouseLeaveData, HrefType extends string | undefined> = RbmComponentProps<{
+export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData, OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType extends string | undefined> = RbmComponentProps<{
     interactable?: boolean;
     href?: HrefType;
     preventDefault?: boolean;
     stopPropagation?: boolean;
-} & 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>;
+    useReactOnMouseLeave?: boolean;
+} & OnClickListener<OnClickData> & OnMouseDownListener<OnMouseDownData> & OnMouseMoveListener<OnMouseMoveData> & OnMouseUpListener<OnMouseUpData> & OnDropListener<OnDropData> & OnDragOverListener<OnDragOverData> & OptionalListener<'onClickCapture', OnClickCaptureData> & OptionalListener<'onMouseEnter', OnMouseEnterData> & OptionalListener<'onMouseLeave', OnMouseLeaveData, MouseEvent | ReactMouseEvent> & OptionalListener<'onDoubleClick', OnDoubleClickData>>;
+declare const ClickableMemo: import("../../helper/withForwardRef").RefComponent<ClickableProps<unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, string | undefined>, HTMLAnchorElement | HTMLSpanElement>;
 export { ClickableMemo as Clickable };

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

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
 import { DraggableProps } from 'react-beautiful-dnd';
 export type DragItemProps = RbmComponentProps<Omit<DraggableProps, 'children'>, WithNoStringAndChildrenProps>;
-declare function DragItem({ children, ...dragProps }: DragItemProps): React.JSX.Element;
+declare function DragItem({ children, className, ...dragProps }: DragItemProps): React.JSX.Element;
 declare const DragItemMemo: typeof DragItem;
 export { DragItemMemo as DragItem };

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

@@ -0,0 +1,4 @@
+export declare enum Flavor {
+    Accent = "flavor-accent",
+    Basic = "flavor-basic"
+}

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

@@ -4,8 +4,10 @@ import { OptionalListener } from '../../Hooks/useListener';
 import { HTMLAttributes } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { ButtonType } from "./ButtonType";
+import { Flavor } from "../../Flavor";
 export type ButtonProps<ClickData> = RbmComponentProps<Override<HTMLAttributes<HTMLButtonElement>, {
     type?: ButtonType;
     disabled?: boolean;
+    flavor?: Flavor;
 } & OptionalListener<'onClick', ClickData>>>;
-export declare const Button: <ClickData>({ children, className, disabled, type, ...props }: ButtonProps<ClickData>) => React.JSX.Element;
+export declare const Button: <ClickData>({ children, className, disabled, flavor, type, ...props }: ButtonProps<ClickData>) => React.JSX.Element;

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

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

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

@@ -22,4 +22,5 @@ export type MenuProps = RbmComponentProps<{
     offsetX?: number;
     offsetY?: number;
 }>;
+export declare const MENU_CONTAINER_CLASS = "rbm-menu-container";
 export declare const Menu: ({ className, style, items, y, x, isOpen, onClose, children, offsetY, offsetX, }: MenuProps) => React.JSX.Element | null;

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

@@ -6,5 +6,7 @@ export type SubmenuProps = RbmComponentProps<{
     icon?: IconSource;
     iconColor?: string;
     disabled?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 }, WithNoStringAndChildrenProps>;
-export declare const Submenu: ({ children, label, icon, iconColor, className, style, disabled }: SubmenuProps) => React.JSX.Element;
+export declare const Submenu: ({ children, label, icon, iconColor, className, style, disabled, onMouseEnter, onMouseLeave, }: SubmenuProps) => React.JSX.Element;

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

@@ -4,6 +4,7 @@ import { ViewProps } from '../Layout/View';
 export declare const TEXT_PRIO: {
     primary: string;
     secondary: string;
+    tertiary: string;
     heading: string;
 };
 export declare const TEXT_SIZE: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {

package/src/Components/Clickable/Clickable.tsx

@@ -4,8 +4,9 @@ import {OptionalListener, useListener} from '../Hooks/useListener';
 
 import styles from './clickable.scss';
 import classNames from 'classnames';
-import {useCallback, MouseEvent, ForwardedRef} from 'react';
+import {useCallback, MouseEvent as ReactMouseEvent, ForwardedRef, useEffect, MouseEvent} from 'react';
 import {withForwardRef} from '../../helper/withForwardRef';
+import {useComposedRef} from "../Hooks/useComposedRef";
 
 type OnClickListener<Data> = OptionalListener<'onClick', Data>;
 type OnMouseDownListener<Data> = OptionalListener<'onMouseDown', Data>;
@@ -24,6 +25,7 @@ export type ClickableProps<
     OnDragOverData,
     OnMouseEnterData,
     OnMouseLeaveData,
+    OnDoubleClickData,
     HrefType extends string | undefined
 > = RbmComponentProps<
     {
@@ -31,6 +33,7 @@ export type ClickableProps<
         href?: HrefType;
         preventDefault?: boolean;
         stopPropagation?: boolean;
+        useReactOnMouseLeave?: boolean;
     } & OnClickListener<OnClickData> &
     OnMouseDownListener<OnMouseDownData> &
     OnMouseMoveListener<OnMouseMoveData> &
@@ -39,7 +42,8 @@ export type ClickableProps<
     OnDragOverListener<OnDragOverData> &
     OptionalListener<'onClickCapture', OnClickCaptureData> &
     OptionalListener<'onMouseEnter', OnMouseEnterData> &
-    OptionalListener<'onMouseLeave', OnMouseLeaveData>
+    OptionalListener<'onMouseLeave', OnMouseLeaveData, MouseEvent|ReactMouseEvent> &
+    OptionalListener<'onDoubleClick', OnDoubleClickData>
 >;
 
 function Clickable<
@@ -52,6 +56,7 @@ function Clickable<
     OnDragOverData,
     OnMouseEnterData,
     OnMouseLeaveData,
+    OnDoubleClickData,
     HrefType extends string | undefined
 >(
     {
@@ -62,8 +67,9 @@ function Clickable<
         interactable = true,
         preventDefault = false,
         stopPropagation = true,
+        useReactOnMouseLeave = false,
         ...clickData
-    }: ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, HrefType>,
+    }: ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType>,
     ref: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>
 ) {
     // Variables
@@ -71,11 +77,12 @@ function Clickable<
     // States
 
     // Refs
+    const clickableRef = useComposedRef(ref);
 
     // Callbacks
     const onClickInner = useListener<'onClick', OnClickData>('onClick', clickData);
     const realOnClick = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onClick) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -91,7 +98,7 @@ function Clickable<
 
     const onMouseDownInner = useListener<'onMouseDown', OnMouseDownData>('onMouseDown', clickData);
     const realOnMouseDown = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onMouseDown) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -107,7 +114,7 @@ function Clickable<
 
     const onMouseMoveInner = useListener<'onMouseMove', OnMouseMoveData>('onMouseMove', clickData);
     const realOnMouseMove = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onMouseMove) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -123,7 +130,7 @@ function Clickable<
 
     const onMouseUpInner = useListener<'onMouseUp', OnMouseUpData>('onMouseUp', clickData);
     const realOnMouseUp = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onMouseUp) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -139,7 +146,7 @@ function Clickable<
 
     const onClickCaptureInner = useListener<'onClickCapture', OnClickCaptureData>('onClickCapture', clickData);
     const realOnClickCapture = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onClickCapture) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -155,7 +162,7 @@ function Clickable<
 
     const onDropInner = useListener<'onDrop', OnDropData>('onDrop', clickData);
     const realOnDrop = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onDrop) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -171,7 +178,7 @@ function Clickable<
 
     const onDragOver = useListener<'onDragOver', OnDragOverData>('onDragOver', clickData);
     const realOnDragOver = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onDragOver) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -187,7 +194,7 @@ function Clickable<
 
     const onMouseEnter = useListener<'onMouseEnter', OnMouseEnterData>('onMouseEnter', clickData);
     const realOnMouseEnter = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onMouseEnter) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -203,7 +210,7 @@ function Clickable<
 
     const onMouseLeave = useListener<'onMouseLeave', OnMouseLeaveData>('onMouseLeave', clickData);
     const realOnMouseLeave = useCallback(
-        (e: MouseEvent) => {
+        (e: Event|ReactMouseEvent) => {
             if (clickData.onMouseLeave) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -217,7 +224,33 @@ function Clickable<
         [clickData.onMouseLeave, onMouseLeave, preventDefault, stopPropagation]
     );
 
+    const onDoubleClick = useListener<'onDoubleClick', OnDoubleClickData>('onDoubleClick', clickData);
+    const realOnDoubleClick = useCallback(
+        (e: Event|ReactMouseEvent) => {
+            if (clickData.onDoubleClick) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onDoubleClick(e);
+            }
+        },
+        [clickData.onDoubleClick, onDoubleClick, preventDefault, stopPropagation]
+    );
+
     // Effects
+    useEffect(() => {
+        if (useReactOnMouseLeave) {
+            return undefined;
+        }
+        const elem = clickableRef.current;
+        elem?.addEventListener('mouseleave', realOnMouseLeave);
+        return () => {
+            elem?.removeEventListener('mouseleave', realOnMouseLeave);
+        };
+    }, [useReactOnMouseLeave, clickableRef, realOnMouseLeave]);
 
     // Other
 
@@ -235,18 +268,19 @@ function Clickable<
         onDrop: realOnDrop,
         onDragOver: realOnDragOver,
         onMouseEnter: realOnMouseEnter,
-        onMouseLeave: realOnMouseLeave,
+        onMouseLeave: useReactOnMouseLeave ? realOnMouseLeave : undefined,
+        onDoubleClick: realOnDoubleClick,
         tabIndex: interactable ? 0 : undefined,
     };
     if (typeof href === 'string') {
         return (
-            <a {...props} href={href} ref={ref as ForwardedRef<HTMLAnchorElement>}>
+            <a {...props} href={href} ref={clickableRef as ForwardedRef<HTMLAnchorElement>}>
                 {children}
             </a>
         );
     }
     return (
-        <span {...props} ref={ref as ForwardedRef<HTMLSpanElement>}>
+        <span {...props} ref={clickableRef as ForwardedRef<HTMLSpanElement>}>
             {children}
         </span>
     );

package/src/Components/DragAndDrop/DragItem.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
-import { Draggable, DraggableProps } from 'react-beautiful-dnd';
+import {withMemo} from '../../helper/withMemo';
+import {RbmComponentProps, WithNoStringAndChildrenProps} from '../RbmComponentProps';
+import {Draggable, DraggableProps} from 'react-beautiful-dnd';
 
 export type DragItemProps = RbmComponentProps<Omit<DraggableProps, 'children'>, WithNoStringAndChildrenProps>;
 
-function DragItem({ children, ...dragProps }: DragItemProps) {
+function DragItem({children, className, ...dragProps}: DragItemProps) {
     // Variables
 
     // Refs
@@ -24,8 +24,8 @@ function DragItem({ children, ...dragProps }: DragItemProps) {
 
     return (
         <Draggable {...dragProps}>
-            {({ innerRef, dragHandleProps, draggableProps }) => (
-                <div {...draggableProps} {...dragHandleProps} ref={innerRef}>
+            {({innerRef, dragHandleProps, draggableProps}) => (
+                <div className={className} {...draggableProps} {...dragHandleProps} ref={innerRef}>
                     {children}
                 </div>
             )}
@@ -35,4 +35,4 @@ function DragItem({ children, ...dragProps }: DragItemProps) {
 
 // Need DragItemMemo for autocompletion of phpstorm
 const DragItemMemo = withMemo(DragItem);
-export { DragItemMemo as DragItem };
+export {DragItemMemo as DragItem};

package/src/Components/Flavor.ts

@@ -0,0 +1,4 @@
+export enum Flavor {
+    Accent = "flavor-accent",
+    Basic = "flavor-basic",
+}

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

@@ -1,23 +1,32 @@
 import * as React from 'react';
-import { Override } from '@ainias42/js-helper';
-import { OptionalListener, useListener } from '../../Hooks/useListener';
+import {Override} from '@ainias42/js-helper';
+import {OptionalListener, useListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
 
 import styles from './button.scss';
 import classNames from 'classnames';
-import { withMemo } from '../../../helper/withMemo';
-import { HTMLAttributes } from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
+import {withMemo} from '../../../helper/withMemo';
+import {HTMLAttributes} from 'react';
+import {RbmComponentProps} from '../../RbmComponentProps';
 import {ButtonType} from "./ButtonType";
+import {Flavor} from "../../Flavor";
 
 export type ButtonProps<ClickData> = RbmComponentProps<
     Override<HTMLAttributes<HTMLButtonElement>, {
-    type?: ButtonType,
+        type?: ButtonType,
         disabled?: boolean;
+        flavor?: Flavor
     } & OptionalListener<'onClick', ClickData>>
 >;
 
-export const Button = withMemo(function Button<ClickData>({ children, className, disabled, type=ButtonType.Primary, ...props }: ButtonProps<ClickData>) {
-    const onClick = useListener<'onClick', ClickData>('onClick', props);
+export const Button = withMemo(function Button<ClickData>({
+                                                              children,
+                                                              className,
+                                                              disabled,
+                                                              flavor = Flavor.Accent,
+                                                              type = ButtonType.Primary,
+                                                              ...props
+                                                          }: ButtonProps<ClickData>) {
+    const [onClick, otherProps] = useListenerWithExtractedProps<'onClick', ClickData>('onClick', props);
 
     const classes = {
         [styles.primary]: type === ButtonType.Primary,
@@ -26,7 +35,8 @@ export const Button = withMemo(function Button<ClickData>({ children, className,
     };
 
     return (
-        <button {...props} disabled={disabled} type="button" onClick={onClick} className={classNames(styles.button, classes, className)}>
+        <button {...otherProps} disabled={disabled} type="button" onClick={onClick}
+                className={classNames(styles.button, classes, flavor, className)}>
             {children}
         </button>
     );

package/src/Components/FormElements/Input/input.scss

@@ -31,7 +31,7 @@
       }
 
       &:focus {
-        background-image: linear-gradient(var(--flavor-focus), var(--flavor-focus)),
+        background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)),
         linear-gradient(to top, transparent 1px, #afafaf 1px);
       }
     }

package/src/Components/FormElements/SearchSelectInput/seachSelectInput.scss

@@ -21,7 +21,7 @@
     padding-bottom: 2px;
 
     &:focus {
-      background-image: linear-gradient(var(--flavor-focus), var(--flavor-focus)),
+      background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)),
       linear-gradient(to top, transparent 1px, #afafaf 1px);
     }
   }

package/src/Components/Icon/Icon.tsx

@@ -1,10 +1,10 @@
-import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import {FontAwesomeIcon, FontAwesomeIconProps} from '@fortawesome/react-fontawesome';
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { Override } from '../../TypeHelpers';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { withMemo } from '../../helper/withMemo';
-import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
+import {RbmComponentProps} from '../RbmComponentProps';
+import {Override} from '../../TypeHelpers';
+import {IconProp} from '@fortawesome/fontawesome-svg-core';
+import {withMemo} from '../../helper/withMemo';
+import {IconDefinition} from '@fortawesome/free-regular-svg-icons';
 import classNames from "classnames";
 
 import styles from "./icon.scss";
@@ -22,7 +22,7 @@ export type IconProps = RbmComponentProps<
     >
 >;
 
-export const Icon = withMemo(function Icon({ icon, alt, className, noMargin=true, style, title, ...props }: IconProps) {
+export const Icon = withMemo(function Icon({icon, alt, className, noMargin = true, style, title, ...props}: IconProps) {
     // Variables
 
     // States
@@ -40,8 +40,11 @@ export const Icon = withMemo(function Icon({ icon, alt, className, noMargin=true
 
     // Render Functions
 
-    if (typeof icon === 'string' && icon.indexOf('.') !== -1) {
-        return <img src={icon} alt={alt} className={classNames(className, {[styles.margin]: !noMargin})} style={style} title={title} />;
+    if (typeof icon === 'string' && (icon.indexOf('.') !== -1 || icon.startsWith("data:"))) {
+        return <img src={icon} alt={alt} className={classNames(styles.imgIcon, className, {[styles.margin]: !noMargin})}
+                    style={style} title={title}/>;
     }
-    return <FontAwesomeIcon {...props} icon={icon as IconProp} className={classNames(className, {[styles.margin]: !noMargin})} style={style} title={title} />;
+    return <FontAwesomeIcon {...props} icon={icon as IconProp}
+                            className={classNames(className, {[styles.margin]: !noMargin})} style={style}
+                            title={title}/>;
 }, styles);

package/src/Components/Icon/icon.scss

@@ -2,3 +2,8 @@
   margin-left: 0.3rem;
   margin-right: 0.3rem;
 }
+.imgIcon {
+  width: calc(1em + 4px);
+  height: calc(1em + 4px);
+  object-fit: contain;
+}

package/src/Components/Layout/Grid/grid.scss

@@ -15,6 +15,31 @@ $columns: 12;
 $breakpoints: $grid-breakpoints;
 $containerBreakpoints: $grid-breakpoints;
 
+@mixin printClasses {
+  @media print {
+    @for $i from 1 through $columns {
+      .item-print-#{$i} {
+        grid-column: auto / span $i;
+      }
+    }
+
+    // Start with `1` because `0` is and invalid value.
+    // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+    @for $i from 1 through ($columns - 1) {
+      .start-print-#{$i} {
+        grid-column-start: $i;
+      }
+    }
+
+    // Add classes for reordering
+    @for $i from -10 through 10 {
+      .order-print-#{$i} {
+        order: $i;
+      }
+    }
+  }
+}
+
 @mixin contentMin($breakpointName) {
   @for $i from 1 through $columns {
     .item-#{$breakpointName}-#{$i} {
@@ -81,6 +106,8 @@ $containerBreakpoints: $grid-breakpoints;
       }
       }
     }
+
+    @include printClasses;
   }
 
   &:not(.useContainerWidth) {
@@ -110,28 +137,7 @@ $containerBreakpoints: $grid-breakpoints;
         }
       }
     }
-  }
-
-  @media print {
-    @for $i from 1 through $columns {
-      .item-print-#{$i} {
-        grid-column: auto / span $i;
-      }
-    }
 
-    // Start with `1` because `0` is and invalid value.
-    // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
-    @for $i from 1 through ($columns - 1) {
-      .start-print-#{$i} {
-        grid-column-start: $i;
-      }
-    }
-
-    // Add classes for reordering
-    @for $i from -10 through 10 {
-      .order-print-#{$i} {
-        order: $i;
-      }
-    }
+    @include printClasses;
   }
 }

package/src/Components/Menu/HoverMenu.tsx

@@ -8,7 +8,9 @@ import {Menu} from "./Menu";
 
 export type HoverMenuProps = RbmComponentProps<{
     items: RbmChildWithoutString,
+    openToSide?: boolean;
     onClick?: () => void;
+    onClose?: () => void;
 }, WithNoStringAndChildrenProps>;
 
 export const HoverMenu = withMemo(function HoverMenu({
@@ -17,6 +19,8 @@ export const HoverMenu = withMemo(function HoverMenu({
                                                          className,
                                                          style,
                                                          onClick,
+    onClose,
+                                                         openToSide
                                                      }: HoverMenuProps) {
     // Refs
 
@@ -34,14 +38,20 @@ export const HoverMenu = withMemo(function HoverMenu({
         if (!hoverItemRef.current) {
             return;
         }
-        const {left, bottom, width, height} = hoverItemRef.current.getBoundingClientRect();
-        setPosition({x: left, y: bottom});
-        setOffset({x: -width, y: height});
-    }, []);
+        const {top, left, bottom, right, width, height} = hoverItemRef.current.getBoundingClientRect();
+        if (openToSide) {
+            setPosition({x: right, y: top});
+            setOffset({x: width, y: -height});
+        } else {
+            setPosition({x: left, y: bottom});
+            setOffset({x: -width, y: height});
+        }
+    }, [openToSide]);
 
     const close = useCallback(() => {
         setIsOpen(false);
-    }, []);
+        onClose?.();
+    }, [onClose]);
 
     const open = useCallback(() => {
         recalculatePosition();
@@ -57,6 +67,7 @@ export const HoverMenu = withMemo(function HoverMenu({
     return <Clickable
         onMouseEnter={open}
         onMouseLeave={close}
+        useReactOnMouseLeave={true}
         onClick={onClick}
         className={classNames(styles.hoverMenu, {[styles.open]: isOpen}, className)}
         style={style}
@@ -64,7 +75,7 @@ export const HoverMenu = withMemo(function HoverMenu({
         __allowChildren="all"
     >
         {children}
-        <Menu x={position.x} y={position.y} isOpen={true} onClose={close} offsetX={offset.x} offsetY={offset.y}>
+        <Menu x={position.x} y={position.y} isOpen={true} onClose={close} offsetX={offset.x} offsetY={offset.y} className={classNames({[styles.hidden]: !isOpen})}>
             {items}
         </Menu>
     </Clickable>;