@ainias42/react-bootstrap-mobile 0.1.16 → 0.1.18

package/src/Components/Menu/Menu.tsx

@@ -10,6 +10,7 @@ import {withRenderBrowserOnly} from '../../helper/withRenderBrowserOnly';
 import {useWindow} from '../../WindowContext/WindowContext';
 import {MenuItem} from "./MenuItem";
 import {MenuCloseContextProvider} from "./MenuCloseContext";
+import {createPortal} from "react-dom";
 
 export type MenuItemType = {
     label: string;
@@ -33,6 +34,8 @@ export type MenuProps = RbmComponentProps<
     }
 >;
 
+export const MENU_CONTAINER_CLASS = "rbm-menu-container";
+
 export const Menu = withMemo(
     withRenderBrowserOnly(function Menu({
                                             className,
@@ -53,6 +56,10 @@ export const Menu = withMemo(
         const window = useWindow();
 
         // States
+        const [portalContainer] = useState<HTMLDivElement>(() => {
+            return document.createElement('div');
+        });
+
         const [innerX, setInnerX] = useState(x);
         const [innerY, setInnerY] = useState(y);
 
@@ -74,6 +81,18 @@ export const Menu = withMemo(
             return undefined;
         }, [isOpen, onClose, window]);
 
+        useLayoutEffect(() => {
+            if (!isOpen) {
+                return;
+            }
+            let elem = window?.document.body.querySelector("." + MENU_CONTAINER_CLASS);
+            if (!elem) {
+                elem = window?.document.body;
+            }
+            elem?.appendChild(portalContainer)
+        }, [isOpen, portalContainer, window?.document.body]);
+
+
         useLayoutEffect(() => {
             if (!menuRef.current) {
                 return;
@@ -81,7 +100,7 @@ export const Menu = withMemo(
             const width = parseFloat(getComputedStyle(menuRef.current).width);
             let newX = x;
             if (newX > (window?.innerWidth ?? 0) - width) {
-                newX -= width+offsetX;
+                newX -= width + offsetX;
             }
 
             if (newX < 0) {
@@ -98,7 +117,7 @@ export const Menu = withMemo(
             const height = parseFloat(getComputedStyle(menuRef.current).height);
             let newY = y;
             if (newY > (window?.innerHeight ?? 0) - height) {
-                newY -= height+offsetY;
+                newY -= height + offsetY;
             }
 
             if (newY < 0) {
@@ -116,28 +135,32 @@ export const Menu = withMemo(
         }
 
         return (
-            <MenuCloseContextProvider value={onClose}>
-                <Block
-                    className={classNames(className, styles.menu)}
-                    style={{...style, top: innerY, left: innerX}}
-                    ref={menuRef}
-                    __allowChildren="all"
-                >
-                    {items?.map((item) => {
-                        const icon = (!!item.icon && typeof item.icon === "object" && "color" in item.icon) ? item.icon.icon : item.icon;
-                        const iconColor = (!!item.icon && typeof item.icon === "object" && "color" in item.icon) ? item.icon.color : undefined;
-
-                        return <MenuItem key={item.key}
-                                         onClick={item.callback}
-                                         className={classNames(styles.item, item.className)}
-                                         onMouseEnter={item.onMouseEnter}
-                                         icon={icon}
-                                         iconColor={iconColor}
-                                         onMouseLeave={item.onMouseLeave}>{item.label}</MenuItem>;
-                    })}
-                    {children}
-                </Block>
-            </MenuCloseContextProvider>
+            <>
+                {createPortal(
+                    <MenuCloseContextProvider value={onClose}>
+                        <Block
+                            className={classNames(className, styles.menu)}
+                            style={{...style, top: innerY, left: innerX}}
+                            ref={menuRef}
+                            __allowChildren="all"
+                        >
+                            {items?.map((item) => {
+                                const icon = (!!item.icon && typeof item.icon === "object" && "color" in item.icon) ? item.icon.icon : item.icon;
+                                const iconColor = (!!item.icon && typeof item.icon === "object" && "color" in item.icon) ? item.icon.color : undefined;
+
+                                return <MenuItem key={item.key}
+                                                 onClick={item.callback}
+                                                 className={classNames(styles.item, item.className)}
+                                                 onMouseEnter={item.onMouseEnter}
+                                                 icon={icon}
+                                                 iconColor={iconColor}
+                                                 onMouseLeave={item.onMouseLeave}>{item.label}</MenuItem>;
+                            })}
+                            {children}
+                        </Block>
+                    </MenuCloseContextProvider>
+                    , portalContainer)}
+            </>
         );
     }),
     styles

package/src/Components/Menu/Submenu.tsx

@@ -17,6 +17,8 @@ export type SubmenuProps = RbmComponentProps<{
     label: string, icon?: IconSource;
     iconColor?: string;
     disabled?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 }, WithNoStringAndChildrenProps>;
 
 export const Submenu = withMemo(function Submenu({
@@ -26,7 +28,9 @@ export const Submenu = withMemo(function Submenu({
                                                      iconColor,
                                                      className,
                                                      style,
-                                                     disabled = false
+                                                     disabled = false,
+                                                     onMouseEnter,
+                                                     onMouseLeave,
                                                  }: SubmenuProps) {
     // Refs
 
@@ -52,11 +56,13 @@ export const Submenu = withMemo(function Submenu({
         setOpenLeft(right + parseFloat(width) >= (window?.innerWidth ?? 0));
         setOpenTop(top + parseFloat(height) >= (window?.innerHeight ?? 0));
         setIsOpen(true);
-    }, [window?.innerHeight, window?.innerWidth]);
+        onMouseEnter?.();
+    }, [onMouseEnter, window?.innerHeight, window?.innerWidth]);
 
     const closeSubmenu = useCallback(() => {
         setIsOpen(false);
-    }, []);
+        onMouseLeave?.();
+    }, [onMouseLeave]);
 
     const closeParent = useMenuClose();
     const closeAllMenus = useCallback(() => {

package/src/Components/Menu/menu.scss

@@ -4,6 +4,10 @@
   border: 1px solid var(--border-light);
   border-radius: 2px;
   z-index: 1000;
+
+  &.hidden {
+    visibility: hidden;
+  }
 }
 
 .divider {
@@ -33,7 +37,7 @@
     white-space: nowrap;
 
     .icon {
-      padding-right: 4px;
+      margin-right: 4px;
     }
   }
 

package/src/Components/Text/Text.tsx

@@ -11,6 +11,7 @@ import { ViewProps } from '../Layout/View';
 export const TEXT_PRIO = {
     primary: styles.primary,
     secondary: styles.secondary,
+    tertiary: styles.tertiary,
     heading: styles.heading,
 };
 

package/src/Components/Text/text.scss

@@ -1,8 +1,12 @@
-$primaryColor: #000000;
-$secondaryColor: #717171;
+$primaryColor: #18181B; // Gray-900
+$secondaryColor: #71717a; // Gray-500
+$tertiaryColor: #A1A1AA; // Gray-400
 
 :root {
-  --text-primary-default-color: $primaryColor;
+  --text-primary-default-color: #{$primaryColor};
+  --text-prmary: #{$primaryColor};
+  --text-secondary: #{$secondaryColor};
+  --text-tertiary: #{$tertiaryColor};
 }
 
 .text {
@@ -21,11 +25,15 @@ $secondaryColor: #717171;
   }
 
   &.primary {
-    color: $primaryColor
+    color: var(--text-primary)
   }
 
   &.secondary {
-    color: $secondaryColor;
+    color: var(--text-secondary);
+  }
+
+  &.tertiary {
+    color: var(--text-tertiary);
   }
 
   &.xsmall {

package/src/Components/Toast/toast.scss

@@ -18,6 +18,7 @@
   background-color: rgba(0, 0, 0, 0.8);
   min-height: 48px;
   line-height: 1.5;
+  --text-primary-default-color: white;
   color: white;
   font-size: 0.77rem;
   letter-spacing: normal;

package/src/scss/_colors.scss

@@ -1,11 +1,11 @@
 @include design($material) {
   --flavor-accent: #37474f;
-  --flavor-focus: var(--flavor-accent);
 }
 
 :root {
   --border-light: #cecece;
   --border-strong: #717171;
+  --flavor-basic: #000000
 }
 
 @include design($flat) {

package/src/scss/_flavorMixin.scss

@@ -1,3 +1,10 @@
+@use 'sass:selector';
+
 @mixin flavorSelection($varName) {
-  #{$varName}: var(--flavor-accent);
+  &:global(.flavor-accent) {
+    #{$varName}: var(--flavor-accent);
+  }
+  &:global(.flavor-basic) {
+    #{$varName}: var(--flavor-basic);
+  }
 }