@stack-spot/portal-layout 0.0.26 → 0.0.28

package/dist/components/menu/PageSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"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"}

package/dist/components/menu/types.d.ts

@@ -67,11 +67,19 @@ export interface MenuSection extends Action {
     customContent?: ReactNode;
     active?: boolean;
     onOpen?: () => void;
+    className?: string;
 }
 interface BaseMenuProps {
     sections?: MenuSection[];
     compact?: boolean;
     customContent?: ReactNode;
+    settings?: {
+        show?: boolean;
+        onClick?: () => void;
+        href?: string;
+        active?: boolean;
+        className?: string;
+    };
 }
 export interface MenuPropsWithStaticContent extends BaseMenuProps {
     content?: MenuSectionContent;

package/dist/components/menu/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;CAC3C;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM,EAAE,YAAY;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE7C,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,IAAI,EAAE,YAAY,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,GAAG,CAAC,MAAM,kBAAkB,CAAC,CAAC;IAC1D;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,0BAA2B,SAAQ,aAAa;IAC/D,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,2BAA4B,SAAQ,aAAa;IAChE;;;;;OAKG;IACH,OAAO,EAAE,kBAAkB,GAAG,CAAC,MAAM,kBAAkB,CAAC,CAAC;IACzD;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC;CACvB;AAED,MAAM,MAAM,SAAS,GAAG,0BAA0B,GAAG,2BAA2B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"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"}

package/dist/components/menu/use-check-text-overflow.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function useCheckTextOverflow(): {
+    overflow: boolean;
+    ref: import("react").RefObject<HTMLParagraphElement>;
+};
+//# sourceMappingURL=use-check-text-overflow.d.ts.map

package/dist/components/menu/use-check-text-overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-check-text-overflow.d.ts","sourceRoot":"","sources":["../../../src/components/menu/use-check-text-overflow.tsx"],"names":[],"mappings":";AAEA,wBAAgB,oBAAoB;;;EAuBnC"}

package/dist/components/menu/use-check-text-overflow.js

@@ -0,0 +1,20 @@
+import { useState, useRef, useEffect } from 'react';
+export function useCheckTextOverflow() {
+    const [overflow, setOverflow] = useState(false);
+    const ref = useRef(null);
+    const checkOverflow = () => {
+        if (!ref.current) {
+            return;
+        }
+        const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth;
+        if (hasOverflow === overflow) {
+            return;
+        }
+        setOverflow(hasOverflow);
+    };
+    useEffect(() => {
+        checkOverflow();
+    }, [ref.current]);
+    return { overflow, ref };
+}
+//# sourceMappingURL=use-check-text-overflow.js.map

package/dist/components/menu/use-check-text-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-check-text-overflow.js","sourceRoot":"","sources":["../../../src/components/menu/use-check-text-overflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAM;SACP;QAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAA;QAErE,IAAI,WAAW,KAAK,QAAQ,EAAE;YAC5B,OAAM;SACP;QAED,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;IACjB,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAC1B,CAAC"}

package/dist/components/menu/use-keyboard-controls.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface Props {
+    onHide?: () => void;
+    visible: boolean;
+    querySelectors: string;
+    onPressEscape?: () => void;
+}
+export declare function useKeyboardControls({ onHide, visible, querySelectors, onPressEscape }: Props): import("react").RefObject<HTMLDivElement>;
+export {};
+//# sourceMappingURL=use-keyboard-controls.d.ts.map

package/dist/components/menu/use-keyboard-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard-controls.d.ts","sourceRoot":"","sources":["../../../src/components/menu/use-keyboard-controls.tsx"],"names":[],"mappings":";AAEA,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,EAAE,KAAK,6CA8E5F"}

package/dist/components/menu/use-keyboard-controls.js

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useRef } from 'react';
+export function useKeyboardControls({ onHide, visible, querySelectors, onPressEscape }) {
+    const wrapper = useRef(null);
+    const onRemoveListeners = () => {
+        document.removeEventListener('keydown', keyboardControls);
+        document.removeEventListener('click', hide);
+    };
+    const keyboardControls = useCallback((event) => {
+        const target = event?.target;
+        function getSelectableAnchors() {
+            return wrapper.current?.querySelectorAll(querySelectors) ?? [];
+        }
+        function handleArrows(key = event.key) {
+            const anchors = getSelectableAnchors();
+            let i = 0;
+            while (i < anchors.length && document.activeElement !== anchors[i])
+                i++;
+            const next = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1]);
+            next?.focus?.();
+        }
+        const handlers = {
+            Escape: () => {
+                onPressEscape?.();
+                onHide?.();
+                onRemoveListeners();
+            },
+            Enter: () => {
+                target?.click();
+            },
+            Tab: () => {
+                const anchors = getSelectableAnchors();
+                if (document.activeElement === anchors[anchors.length - 1])
+                    onHide?.();
+                else {
+                    handleArrows('ArrowDown');
+                    event.preventDefault();
+                }
+            },
+            ArrowUp: () => {
+                handleArrows();
+            },
+            ArrowDown: () => {
+                handleArrows();
+            },
+        };
+        handlers[event.key]?.();
+    }, [onPressEscape, visible]);
+    const hide = useCallback((event) => {
+        const target = event.target;
+        // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
+        const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target);
+        const isAction = target?.classList?.contains('action') || !!target?.closest('.action');
+        if (!isClickInsideSelectionList || isAction)
+            onHide?.();
+    }, []);
+    useEffect(() => {
+        if (visible) {
+            document.addEventListener('keydown', keyboardControls);
+            document.addEventListener('keydown', keyboardControls);
+            if (onHide)
+                setTimeout(() => document.addEventListener('click', hide), 50);
+        }
+        else {
+            onRemoveListeners();
+        }
+        return () => {
+            // Remove the event listener
+            document.removeEventListener('keydown', keyboardControls);
+            document.removeEventListener('click', hide);
+        };
+    }, [visible, keyboardControls]);
+    return wrapper;
+}
+//# sourceMappingURL=use-keyboard-controls.js.map

package/dist/components/menu/use-keyboard-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard-controls.js","sourceRoot":"","sources":["../../../src/components/menu/use-keyboard-controls.tsx"],"names":[],"mappings":"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"}

package/dist/components/menu/useCheckTextOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckTextOverflow.js","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAM;SACP;QAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAA;QAErE,IAAI,WAAW,KAAK,QAAQ,EAAE;YAC5B,OAAM;SACP;QAED,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;IACjB,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAC1B,CAAC"}
+{"version":3,"file":"useCheckTextOverflow.js","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAM;QACR,CAAC;QAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAA;QAErE,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAM;QACR,CAAC;QAED,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;IACjB,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAC1B,CAAC"}

package/dist/components/types.d.ts

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+interface CustomLabel {
+    id: string;
+    element: ReactNode;
+}
 export interface Action {
-    label: string;
+    label: string | CustomLabel;
     onClick?: () => void;
     href?: string;
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
 }
 export type PortalAcronym = 'EDP' | 'AI' | 'HUB';
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;CAClE;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,SAAS,CAAC;CACpB;AACD,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;CAClE;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,CAAA"}

package/dist/layout.css

@@ -39,7 +39,7 @@ body {
 
 #layout {
   --header-height: 56px;
-  --menu-sections-width: 87px;
+  --menu-sections-width: 135px;
   --menu-content-width: 233px;
   --menu-item-height: 74px;
   --modal-animation-duration: 0.3s;
@@ -50,7 +50,7 @@ body {
 }
 
 #layout.menu-compact {
-  --menu-sections-width: 56px;
+  --menu-sections-width: 135px;
   --menu-item-height: 56px;
 }
 
@@ -147,8 +147,8 @@ body {
   position: relative;
 }
 
-#layout.menu-compact .section-label {
-  display: none;
+#menuSections .sections-footer {
+  padding: 16px;
 }
 
 #menuSections .toggle,
@@ -161,7 +161,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   transition: background-color 0.2s;
   cursor: pointer;
@@ -175,7 +175,6 @@ body {
   height: 24px;
   transform: scaleY(0);
   transition: transform ease-in 0.2s;
-  background-color: var(--primary-500);
   border-radius: 50%;
   left: 0;
 }
@@ -186,6 +185,7 @@ body {
 
 #menuSections > ul li.active a:before {
   transform: scaleY(1);
+  background-color: var(--primary-500);
 }
 
 #menuSections .toggle:hover,
@@ -195,6 +195,11 @@ body {
   background: var(--light-500);
 }
 
+#menuSections > ul li:not(.active) a:hover:before {
+  transform: scaleY(1); 
+  background-color: var(--light-contrastText);
+}
+
 #menuSections .toggle i {
   position: relative;
 }
@@ -430,3 +435,19 @@ i {
   height: 0;
   overflow: hidden;
 }
+
+#menuSections .section-submenu {
+  position: relative;
+}
+
+#menuSections .section-submenu-icon {
+  opacity: 0;
+  position: absolute;
+  top: 27%;
+  right: 10px;
+  background-color: inherit;
+}
+
+#menuSections .section-submenu-icon:focus-visible {
+  opacity: 1; 
+}

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
   "peerDependencies": {
     "@citric/core": ">=5.7.0",
     "@citric/icons": ">=5.7.0",
@@ -33,9 +37,5 @@
   },
   "dependencies": {
     "react-toastify": "^9.1.3"
-  },
-  "scripts": {
-    "build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   }
 }

package/src/components/PortalSwitcher.tsx

@@ -1,13 +1,14 @@
-import { Box, Button, Flex, IconBox, Styles, Text } from '@citric/core'
+import { Button, Flex, IconBox, Text } from '@citric/core'
 import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
-import { Dropdown, DropdownItem } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
-import { ReactNode, useRef, useState } from 'react'
+import { ReactNode, useState } from 'react'
+import styled from 'styled-components'
+import { SelectionList, announce } from '..'
 import { AI } from '../svg/AI'
 import { EDP } from '../svg/EDP'
 import { HUB } from '../svg/HUB'
 import { Logo } from '../svg/Logo'
-import { announce } from '..'
 import { PortalAcronym } from './types'
 
 
@@ -23,62 +24,79 @@ export interface PortalSwitcherProps {
   portals?: Portal[],
 }
 
-const styles: Styles = {
-  currentPortal: {
-    p: 3,
-    r: 'xs',
-    cursor: 'pointer',
-    '&:hover': {
-      bg: 'light.500',
-    },
-  },
-  dropdown: {
-    position: 'absolute',
-    top: '50px',
-    bg: 'light.300',
-    width: 12,
-    p: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    maxWidth: '360px',
-    boxShadow: '4px 4px 48px 0px #000000',
-  },
-  dropdownWraper: {
-    display: 'flex',
-    flexDirection: 'column',
-    p: 3,
-    gap: '8px',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'light.500',
-    borderRadius: 'sm',
-  },
-  dropdownItem: {
-    p: 5,
-    bg: 'light.400',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'light.500',
-    borderRadius: 'sm',
-  },
-} satisfies Styles
+const PortalSwitcherBox = styled(Flex)`
+  flex-direction: column;
+  align-items: start;
+
+  .current-portal {
+    padding: 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: ${theme.color.light[500]};
+    }
+  }
+
+  .selection-list {
+    max-width: 360px;
+    box-shadow: 4px 4px 48px 0px #000000;
+    position: absolute; 
+    top: 50px;
+
+    .selection-list-content {
+      padding: 8px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: ${theme.color.light['500']};
+
+      &> ul {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .action {
+        padding: 16px;
+        background-color: ${theme.color.light['400']};
+        border-width: 1px;
+        border-style: solid;
+        border-color: ${theme.color.light['500']};
+        border-radius: 4px;
+
+        &:hover, &:hover a {
+          background-color: ${theme.color.light['500']};
+        }
+
+        a {
+          height: auto;
+          transition: unset;
+          align-items: flex-start;
 
-export const PortalSwitcher = ({ portals }: PortalSwitcherProps) => {
+          i:nth-child(3) {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+ 
+`
+export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
-  const dropRef = useRef<HTMLUListElement>(null)
   const t = useTranslate(translations)
   const currentPortal = portals?.find(portal => location.href.startsWith(portal.url))
 
-  return <Flex flexDirection="column">
+  return <PortalSwitcherBox>
     {currentPortal ?
       <Button
+        className="current-portal"
         appearance="text"
         colorScheme="light"
         aria-label={t.portalSwitcher}
         onClick={() => {
           setIsOpen(true)
           announce(`${t.portalSwitcher} ${t.selected}`)
-        }} sx={styles.currentPortal}>
+        }}>
         <Flex alignItems="center">
           {Logos[currentPortal.acronym]}
           <IconBox size="xs" ml={3}>
@@ -87,28 +105,25 @@ export const PortalSwitcher = ({ portals }: PortalSwitcherProps) => {
         </Flex>
       </Button> :
       <Logo />}
-    <Dropdown sx={styles.dropdown} ref={dropRef} onClose={() => setIsOpen(false)} visible={isOpen} visibleHeight="24rem">
-      <Box sx={styles.dropdownWraper}>
-        {portals?.map((portal, index) => (
-          <DropdownItem
-            as="a"
-            key={index}
-            onClick={() => announce(`${portal.acronym} ${t.selected}`)}
-            sx={styles.dropdownItem}
-            aria-label={`${portal.acronym}: ${t[portal.acronym]}`} href={portal.url}>
-            <Flex flexWrap="nowrap">
-              <Flex flexDirection="column">
-                {Logos[portal.acronym]}
-                <Text appearance="microtext1" mt={3} colorScheme="light.700">{t[portal.acronym]}</Text>
-              </Flex>
-              <IconBox>
-                {portal.acronym === currentPortal?.acronym ? <CheckCircleFill /> : <ArrowRight />}
-              </IconBox>
-            </Flex>
-          </DropdownItem>))}
-      </Box>
-    </Dropdown>
-  </Flex >
+    <SelectionList
+      items={portals?.map(portal => ({
+        label: {
+          id: portal.acronym,
+          element: <Flex flexDirection="column">
+            {Logos[portal.acronym]}
+            <Text appearance="microtext1" mt={3} colorScheme="light.700">{t[portal.acronym]}</Text>
+          </Flex>,
+        },
+        target: '_self',
+        href: portal.url,
+        active: currentPortal?.acronym == portal.acronym,
+        onClick: () => announce(`${portal.acronym} ${t.selected}`),
+        iconRight: portal.acronym === currentPortal?.acronym ? <CheckCircleFill /> : <ArrowRight />,
+      }))}
+      visible={isOpen}
+      maxHeight="21rem"
+      onHide={() => setIsOpen(false)} />
+  </PortalSwitcherBox >
 }
 
 

package/src/components/SelectionList.tsx

@@ -3,8 +3,9 @@ import { ArrowLeft, Check, ChevronRight } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ReactElement, useMemo, useState } from 'react'
 import { styled } from 'styled-components'
+import { useKeyboardControls } from './menu/use-keyboard-controls'
 import { Action } from './types'
 
 interface ItemWithIcon {
@@ -72,7 +73,6 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
   .selection-list-content {
     display: flex;
     flex-direction: column;
-    border-radius: 0.5rem;
     background: ${theme.color.light['500']};
     border-radius: 0.5rem;
     border: 1px solid ${theme.color.light['600']};
@@ -121,11 +121,13 @@ function renderAction({ label, href, onClick, icon, iconRight, active, target }:
     onClose?.()
   }
 
+  const isTextLabel = typeof label === 'string'
+
   return (
-    <li key={label} className="action">
+    <li key={isTextLabel ? label : label.id} className="action">
       <a href={href} onClick={handleClick} target={target} tabIndex={0} aria-selected={active}>
         {icon && <IconBox>{icon}</IconBox>}
-        <Text appearance="body2" className="label">{label}</Text>
+        {isTextLabel ? <Text appearance="body2" className="label">{label}</Text> : label.element}
         {iconRight && <IconBox>{iconRight}</IconBox>}
         {active && <IconBox><Check /></IconBox>}
       </a>
@@ -171,7 +173,6 @@ export const SelectionList = ({
   id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
 }: SelectionListProps) => {
   const t = useTranslate(dictionary)
-  const wrapper = useRef<HTMLDivElement>(null)
   const [current, setCurrent] = useState<CurrentItemList>({ items })
 
   const listItems = useMemo(
@@ -185,63 +186,7 @@ export const SelectionList = ({
     )),
     [current],
   )
-
-  const keyboardControls = useCallback((event: KeyboardEvent) => {
-    const target = event?.target as HTMLElement | null
-
-    function getSelectableAnchors() {
-      return wrapper.current?.querySelectorAll('li.action a, li.collapsible a, button') ?? []
-    }
-
-    function handleArrows(key = event.key) {
-      const anchors = getSelectableAnchors()
-      let i = 0
-      while (i < anchors.length && document.activeElement !== anchors[i]) i++
-      const next: any = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
-      next?.focus?.()
-    }
-
-    const handlers: Record<string, (() => void) | undefined> = {
-      Escape: () => {
-        onHide?.()
-        event.stopPropagation()
-        event.preventDefault()
-      },
-      Enter: () => target?.click(),
-      Tab: () => {
-        const anchors = getSelectableAnchors()
-        if (document.activeElement === anchors[anchors.length - 1]) onHide?.()
-        else {
-          handleArrows('ArrowDown')
-          event.preventDefault()
-        }
-      },
-      ArrowUp: handleArrows,
-      ArrowDown: handleArrows,
-    }
-
-    handlers[event.key]?.()
-  }, [])
-
-  const hide = useCallback((event: Event) => {
-    const target = (event.target as HTMLElement | null)
-    // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
-    const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
-    const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
-    if (!isClickInsideSelectionList || isAction) onHide?.()
-  }, [])
-
-  useEffect(() => {
-    if (visible) {
-      setCurrent({ items })
-      document.addEventListener('keydown', keyboardControls)
-      if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
-    }
-    else {
-      document.removeEventListener('keydown', keyboardControls)
-      document.removeEventListener('click', hide)
-    }
-  }, [visible])
+  const wrapper = useKeyboardControls({ onHide, querySelectors: 'li.action a, li.collapsible a, button', visible })
 
   return (
     <SelectionBox