@stack-spot/portal-layout 0.0.62 → 0.0.64

package/dist/components/tour/PortalSwitcherStep.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Image, Text } from '@citric/core';
+import { tourStepBuilder } from '@stack-spot/portal-components';
+import { useTranslate } from '@stack-spot/portal-translate';
+export const usePortalSwitcherStep = () => {
+    const t = useTranslate(translations);
+    return tourStepBuilder({
+        selector: '.portal-switcher',
+        title: t.title,
+        content: _jsxs(_Fragment, { children: [_jsx(Image, { src: "https://marketing.stackspot.com/switch-v2.gif", alt: t.imageAlt }), _jsx(Box, { px: 5, py: 3, children: _jsx(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: t.description }) })] }),
+        position: 'right',
+        style: {
+            width: '300px',
+        },
+    });
+};
+const translations = {
+    en: {
+        title: 'Expand Your Horizons with Stackspot',
+        description: 'Easily switch between EDP and AI to enhance your projects. Access a wide range of resources with just one click and take your projects to a new level of efficiency. Start your journey now!',
+        imageAlt: 'GIF describing how to use product switcher and navigate between AI and EDP portals',
+    },
+    pt: {
+        title: 'Expanda Seus Horizontes com Stackspot',
+        description: 'Troque facilmente entre EDP e AI para aprimorar seus projetos. Acesse uma ampla gama de recursos com apenas um clique e leve seus projetos para um novo nível de eficiência. Comece sua jornada agora!',
+        imageAlt: 'GIF mostrando como usar o alternador de produtos e navegar entre os portais AI e EDP',
+    },
+};
+//# sourceMappingURL=PortalSwitcherStep.js.map

package/dist/components/tour/PortalSwitcherStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalSwitcherStep.js","sourceRoot":"","sources":["../../../src/components/tour/PortalSwitcherStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAY,eAAe,EAAE,MAAM,+BAA+B,CAAA;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAa,EAAE;IAClD,MAAM,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IACpC,OAAO,eAAe,CAAC;QACrB,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,OAAO,EAAE,8BACP,KAAC,KAAK,IAAC,GAAG,EAAC,+CAA+C,EAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,GAAI,EAC9E,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YACf,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,YAAE,CAAC,CAAC,WAAW,GAAQ,GACnF,IACL;QACH,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE;YACL,KAAK,EAAE,OAAO;SACf;KACF,CAAC,CAAA;AACJ,CAAC,CAAA;AAKD,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE;QACF,KAAK,EAAE,qCAAqC;QAC5C,WAAW,EAAE,8LAA8L;QAC3M,QAAQ,EAAE,oFAAoF;KAC/F;IACD,EAAE,EAAE;QACF,KAAK,EAAE,uCAAuC;QAC9C,WAAW,EAAE,wMAAwM;QACrN,QAAQ,EAAE,sFAAsF;KACjG;CACF,CAAA"}

package/dist/index.d.ts

@@ -9,7 +9,6 @@ export { Toaster } from './components/Toaster.js';
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
 export { MenuSections } from './components/menu/MenuSections.js';
 export * from './components/menu/types.js';
-export { TextWithPointingArrow } from './components/tour/utils.js';
 export * from './components/types.js';
 export * from './elements.js';
 export * from './errors.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}

package/dist/index.js

@@ -9,7 +9,6 @@ export { Toaster } from './components/Toaster.js';
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
 export { MenuSections } from './components/menu/MenuSections.js';
 export * from './components/menu/types.js';
-export { TextWithPointingArrow } from './components/tour/utils.js';
 export * from './components/types.js';
 export * from './elements.js';
 export * from './errors.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}

package/dist/utils.d.ts

@@ -22,6 +22,33 @@ interface FocusOptions {
      */
     ignore?: string;
 }
+/**
+ * Checks if an element can receive focus.
+ *
+ * Elements can receive focus only if:
+ * - they exist;
+ * - they're visible;
+ * - they're not disabled;
+ * - they are a focusable tag name or have a positive tab index;
+ * - they don't have a negative tab index.
+ * @param element the element to check.
+ * @returns true if the element is focusable, false otherwise.
+ */
+export declare function isFocusable(element?: Element | null): boolean;
+/**
+ * Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
+ * and accessibility attributes.
+ *
+ * Decision making:
+ * - If the element is focusable, focus it.
+ * - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
+ * - If the element is controlled by another, try to focus the controller, based in this same algorithm.
+ * - Otherwise, try to focus its parent.
+ *
+ * If no focusable element is found. Nothing happens.
+ * @param element the element to focus.
+ */
+export declare function focusAccessibleElement(element?: Element | null): void;
 /**
  * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
  *

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAWrE;AAED,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC7E,KAAK,kBAAkB,GAAG,WAAW,GAAG,WAAW,EAAE,CAAA;AAErD,UAAU,YAAY;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAWD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,EAAE,EAAE,QAAa,EAAE,MAAM,EAAE,GAAE,YAAiB,QA0B/H;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,QAKpC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAWrE;AAED,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC7E,KAAK,kBAAkB,GAAG,WAAW,GAAG,WAAW,EAAE,CAAA;AAErD,UAAU,YAAY;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAWD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,WAYnD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,QAO9D;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,EAAE,EAAE,QAAa,EAAE,MAAM,EAAE,GAAE,YAAiB,QA0B/H;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,QAKpC"}

package/dist/utils.js

@@ -38,6 +38,56 @@ const selectors = {
     textarea: 'select:not(:disabled)',
     other: '[tabindex]:not([tabindex="-1"])',
 };
+/**
+ * Checks if an element can receive focus.
+ *
+ * Elements can receive focus only if:
+ * - they exist;
+ * - they're visible;
+ * - they're not disabled;
+ * - they are a focusable tag name or have a positive tab index;
+ * - they don't have a negative tab index.
+ * @param element the element to check.
+ * @returns true if the element is focusable, false otherwise.
+ */
+export function isFocusable(element) {
+    if (!element)
+        return false;
+    // is disabled: return false
+    if (element.ariaDisabled || element.getAttribute('disabled') !== null)
+        return false;
+    // is invisible: return false
+    if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true }))
+        return false;
+    // has tab index: return false if negative, true otherwise
+    const tabIndexStr = element.getAttribute('tabindex');
+    const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined;
+    if (tabIndex !== undefined)
+        return tabIndex >= 0;
+    // check the tag name
+    return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '');
+}
+/**
+ * Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
+ * and accessibility attributes.
+ *
+ * Decision making:
+ * - If the element is focusable, focus it.
+ * - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
+ * - If the element is controlled by another, try to focus the controller, based in this same algorithm.
+ * - Otherwise, try to focus its parent.
+ *
+ * If no focusable element is found. Nothing happens.
+ * @param element the element to focus.
+ */
+export function focusAccessibleElement(element) {
+    let elementToFocus = element;
+    while (elementToFocus && !isFocusable(elementToFocus)) {
+        const controlledBy = elementToFocus.id ? document.querySelector(`[aria-controls=${elementToFocus.id}]`) : undefined;
+        elementToFocus = (controlledBy ?? elementToFocus.parentElement);
+    }
+    elementToFocus?.focus?.();
+}
 /**
  * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
  *

package/dist/utils.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,9 +8,9 @@
     "@citric/core": ">=6.0.0",
     "@citric/icons": ">=5.7.1",
     "@citric/ui": ">=5.7.2",
-    "@reactour/tour": ">=3.6.2",
     "@stack-spot/portal-theme": ">=0.0.11",
     "@stack-spot/portal-translate": ">=0.0.6",
+    "@stack-spot/portal-components": ">=0.0.17",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "styled-components": ">=6.1.1"

package/src/Layout.tsx

@@ -1,4 +1,4 @@
-import { ProviderProps, TourProvider } from '@reactour/tour'
+import { TourProps, TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components'
 import { CSSToCitricAdapter, WithStyle, listToClass } from '@stack-spot/portal-theme'
 import '@stack-spot/portal-theme/dist/theme.css'
 import { ReactElement, ReactNode, useEffect } from 'react'
@@ -11,8 +11,7 @@ import { SilentErrorBoundary } from './components/error/SilentErrorBoundary'
 import { MenuContent } from './components/menu/MenuContent'
 import { MenuSections } from './components/menu/MenuSections'
 import { MenuProps } from './components/menu/types'
-import { defaultTourConfig } from './components/tour/config'
-import { portalSwitcherStep } from './components/tour/steps/PortalSwitcherStep'
+import { usePortalSwitcherStep } from './components/tour/PortalSwitcherStep'
 import { elementIds, getLayoutElements } from './elements'
 import { LayoutContext, LayoutProvider } from './layout-context'
 import './layout.css'
@@ -24,7 +23,7 @@ interface Props extends WithStyle, LayoutContext {
   extra?: ReactNode,
   errorDescriptor?: DescriptionFn,
   onError?: ErrorHandler,
-  tourProps?: Omit<ProviderProps, 'children'>,
+  tourProps?: TourProps,
 }
 
 interface RawProps extends WithStyle, LayoutContext {
@@ -35,7 +34,7 @@ interface RawProps extends WithStyle, LayoutContext {
   extra?: ReactNode,
   errorDescriptor?: DescriptionFn,
   onError?: ErrorHandler,
-  tourProps?: Omit<ProviderProps, 'children'>,
+  tourProps?: TourProps,
 }
 
 export const RawLayout = (
@@ -47,6 +46,7 @@ export const RawLayout = (
   const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
   const { layout } = getLayoutElements()
   const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
+  const portalSwitcherStep = usePortalSwitcherStep()
 
   const classes = [
     menuContent && !isCompactedOnlyIcons ? 'menu-content-visible' : undefined,
@@ -55,8 +55,11 @@ export const RawLayout = (
     isCompactedOnlyIcons ? 'menu-compact' : undefined,
   ]
 
-  const tourPropsWithDefaults = { ...defaultTourConfig(), ...(tourProps || {}) }
-  tourPropsWithDefaults.steps.unshift(portalSwitcherStep)
+  const tourPropsWithDefaults = { ...defaultTourConfig, ...(tourProps || {}) }
+  tourPropsWithDefaults.steps = [
+    portalSwitcherStep,
+    ...tourPropsWithDefaults.steps,
+  ].filter(isNewTourStep)
 
   useEffect(() => {
     if (errorDescriptor) ErrorManager.setDescriptionFunction(errorDescriptor)
@@ -66,7 +69,7 @@ export const RawLayout = (
   return (
     <CSSToCitricAdapter>
       <LayoutProvider anchorTag={anchorTag}>
-        <TourProvider {...tourPropsWithDefaults} >
+        <TourProvider config={tourPropsWithDefaults} >
           <div id={elementIds.layout} className={listToClass(classes)} style={style}>
             {children && <div id={elementIds.page}>
               <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>

package/src/LayoutOverlayManager.tsx

@@ -8,7 +8,7 @@ import { getDictionary } from './dictionary'
 import { LayoutElements, elementIds, getLayoutElements } from './elements'
 import { ElementNotFound, LayoutError } from './errors'
 import { showToaster as showReactToaster } from './toaster'
-import { focusFirstChild, valueOfLayoutVar } from './utils'
+import { focusAccessibleElement, focusFirstChild, valueOfLayoutVar } from './utils'
 
 interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
   showButton?: boolean,
@@ -49,6 +49,10 @@ class LayoutOverlayManager {
   private setContent: OverlayContentSetter = {}
   private elements?: LayoutElements
   private onModalClose?: () => void
+  /**
+   * Last element with focus before an overlay is shown.
+   */
+  private lastActiveElement: Element | null = null
 
   private setupElements() {
     this.elements = getLayoutElements()
@@ -102,6 +106,7 @@ class LayoutOverlayManager {
   }
 
   private showOverlay(element: HTMLElement | null | undefined, extraClasses: string[] = [], blockMainContent = true) {
+    this.lastActiveElement = document.activeElement
     element?.classList.add('visible', ...extraClasses)
     this.setInteractivity(element, true)
     if (blockMainContent) this.setMainContentInteractivity(false)
@@ -207,6 +212,15 @@ class LayoutOverlayManager {
     )
   }
 
+  /**
+   * Focus the element that had focus before the last overlay was opened. If the element is not visible anymore, another one that makes
+   * sense (accessibility-wise) is focused.
+   */
+  private focusLastActiveElement() {
+    focusAccessibleElement(this.lastActiveElement)
+    this.lastActiveElement = null
+  }
+
   closeModal(runCloseListener = true) {
     this.elements?.modal?.classList.remove('visible')
     this.elements?.backdrop?.setAttribute('class', '')
@@ -226,6 +240,7 @@ class LayoutOverlayManager {
         }
         if (this.setContent.modal) this.setContent.modal(undefined)
         this.hideOverlay(this.elements?.modal)
+        this.focusLastActiveElement()
       },
       animationMS,
     )
@@ -250,6 +265,7 @@ class LayoutOverlayManager {
         }
         if (this.setContent.rightPanel) this.setContent.rightPanel(undefined)
         this.hideOverlay(this.elements?.rightPanel)
+        this.focusLastActiveElement()
       },
       animationMS,
     )

package/src/components/tour/PortalSwitcherStep.tsx

@@ -0,0 +1,36 @@
+import { Box, Image, Text } from '@citric/core'
+import { TourStep, tourStepBuilder } from '@stack-spot/portal-components'
+import { useTranslate } from '@stack-spot/portal-translate'
+export const usePortalSwitcherStep = (): TourStep => {
+  const t = useTranslate(translations)
+  return tourStepBuilder({
+    selector: '.portal-switcher',
+    title: t.title,
+    content: <>
+      <Image src="https://marketing.stackspot.com/switch-v2.gif" alt={t.imageAlt} />
+      <Box px={5} py={3}>
+        <Text appearance="microtext1" colorScheme="inverse.contrastText">{t.description}</Text>
+      </Box>
+    </>,
+    position: 'right',
+    style: {
+      width: '300px',
+    },
+  })
+}
+
+
+
+
+const translations = {
+  en: {
+    title: 'Expand Your Horizons with Stackspot',
+    description: 'Easily switch between EDP and AI to enhance your projects. Access a wide range of resources with just one click and take your projects to a new level of efficiency. Start your journey now!',
+    imageAlt: 'GIF describing how to use product switcher and navigate between AI and EDP portals',
+  },
+  pt: {
+    title: 'Expanda Seus Horizontes com Stackspot',
+    description: 'Troque facilmente entre EDP e AI para aprimorar seus projetos. Acesse uma ampla gama de recursos com apenas um clique e leve seus projetos para um novo nível de eficiência. Comece sua jornada agora!',
+    imageAlt: 'GIF mostrando como usar o alternador de produtos e navegar entre os portais AI e EDP',
+  },
+}

package/src/index.ts

@@ -9,7 +9,6 @@ export { Toaster } from './components/Toaster'
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent'
 export { MenuSections } from './components/menu/MenuSections'
 export * from './components/menu/types'
-export { TextWithPointingArrow } from './components/tour/utils'
 export * from './components/types'
 export * from './elements'
 export * from './errors'

package/src/utils.ts

@@ -53,6 +53,54 @@ const selectors: Record<TagPriority, string> = {
   other: '[tabindex]:not([tabindex="-1"])',
 }
 
+/**
+ * Checks if an element can receive focus.
+ * 
+ * Elements can receive focus only if:
+ * - they exist;
+ * - they're visible;
+ * - they're not disabled;
+ * - they are a focusable tag name or have a positive tab index;
+ * - they don't have a negative tab index.
+ * @param element the element to check.
+ * @returns true if the element is focusable, false otherwise.
+ */
+export function isFocusable(element?: Element | null) {
+  if (!element) return false
+  // is disabled: return false
+  if (element.ariaDisabled || element.getAttribute('disabled') !== null) return false
+  // is invisible: return false
+  if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })) return false
+  // has tab index: return false if negative, true otherwise
+  const tabIndexStr = element.getAttribute('tabindex')
+  const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined
+  if (tabIndex !== undefined) return tabIndex >= 0
+  // check the tag name
+  return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '')
+}
+
+/**
+ * Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
+ * and accessibility attributes.
+ * 
+ * Decision making:
+ * - If the element is focusable, focus it.
+ * - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
+ * - If the element is controlled by another, try to focus the controller, based in this same algorithm.
+ * - Otherwise, try to focus its parent.
+ * 
+ * If no focusable element is found. Nothing happens.
+ * @param element the element to focus.
+ */
+export function focusAccessibleElement(element?: Element | null) {
+  let elementToFocus = element as HTMLElement | null | undefined
+  while (elementToFocus && !isFocusable(elementToFocus)) {
+    const controlledBy = elementToFocus.id ? document.querySelector(`[aria-controls=${elementToFocus.id}]`) : undefined
+    elementToFocus = (controlledBy ?? elementToFocus.parentElement) as HTMLElement | null | undefined
+  }
+  elementToFocus?.focus?.()
+}
+
 /**
  * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
  * 

package/src/components/tour/Navigation.tsx

@@ -1,29 +0,0 @@
-import { Button, Flex, Text } from '@citric/core'
-import { ProviderProps } from '@reactour/tour'
-import '@stack-spot/portal-theme/dist/theme.css'
-import { useTranslate } from '@stack-spot/portal-translate'
-import React from 'react'
-import { finishTour } from './utils'
-
-
-type ComponentsDict = Exclude<ProviderProps['components'], undefined>
-type NavigationProps = React.ComponentProps<Exclude<ComponentsDict['Navigation'], undefined>>
-
-export const CustomNavigation = ({ currentStep, steps, setCurrentStep }: NavigationProps) => {
-  const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } })
-  return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between">
-    <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
-    <Flex sx={{ gap: '8px' }}>
-      {currentStep > 1 &&
-        <Button sx={{ paddingInline: '20px' }} onClick={() => setCurrentStep(currentStep - 1)} size="sm" colorScheme="light">
-          {t.back}
-        </Button>}
-      <Button sx={{ paddingInline: '20px' }} onClick={() => {
-        if (currentStep + 1 == steps.length) finishTour()
-        setCurrentStep(currentStep + 1)
-      }} size="sm" colorScheme="light">
-        ok
-      </Button>
-    </Flex>
-  </Flex>
-}

package/src/components/tour/config.tsx

@@ -1,23 +0,0 @@
-import { ProviderProps } from '@reactour/tour'
-import { CustomNavigation } from './Navigation'
-import { hasFinishedTour } from './utils'
-
-export const defaultTourConfig: () => Omit<ProviderProps, 'children'> = () => ({
-  steps: [],
-  defaultOpen: !hasFinishedTour(),
-  showBadge: false,
-  showDots: false,
-  showPrevNextButtons: false,
-  showCloseButton: false,
-  styles: {
-    popover: (props) => ({
-      ...props,
-      boxShadow: 'unset',
-      backgroundColor: 'transparent',
-      padding: '0px 14px', // TODO: find a way to make paddings on y axis so it's possible to use the the pointing arrow.
-    }),
-  },
-  components: {
-    Navigation: CustomNavigation,
-  },
-})

package/src/components/tour/steps/PortalSwitcherStep.tsx

@@ -1,47 +0,0 @@
-import { Box, Button, Flex, IconBox, Image, Text } from '@citric/core'
-import { TimesMini } from '@citric/icons'
-import { StepType, useTour } from '@reactour/tour'
-import { useTranslate } from '@stack-spot/portal-translate'
-import { TextWithPointingArrow, finishTour } from '../utils'
-
-const PortalSwitcherStep = () => {
-  const t = useTranslate(translations)
-  const { setIsOpen } = useTour()
-  return <Box bg="inverse.500">
-    <TextWithPointingArrow $position="right">
-      <Flex w={12} pl={5} py={3} flexWrap="nowrap" justifyContent="space-between" alignItems="center">
-        <Text appearance="body2" colorScheme="inverse.contrastText" weight="medium"> {t.title} </Text>
-        <Button appearance="text" size="sm" onClick={() => {
-          finishTour()
-          setIsOpen(false)
-        }}>
-          <IconBox size="xs" colorIcon="inverse.contrastText">
-            <TimesMini />
-          </IconBox>
-        </Button>
-      </Flex>
-    </TextWithPointingArrow>
-    <Image src="https://marketing.stackspot.com/switch-v2.gif"
-      alt="GIF showing how to move from one portal to another" />
-    <Box px={5} py={3}>
-      <Text appearance="microtext1" colorScheme="inverse.contrastText">{t.description}</Text>
-    </Box>
-  </Box >
-}
-
-export const portalSwitcherStep: StepType = {
-  selector: '.portal-switcher',
-  content: PortalSwitcherStep,
-  position: 'right',
-}
-
-const translations = {
-  en: {
-    title: 'Expand Your Horizons with Stackspot',
-    description: 'Easily switch between EDP and AI to enhance your projects. Access a wide range of resources with just one click and take your projects to a new level of efficiency. Start your journey now!',
-  },
-  pt: {
-    title: 'Expanda Seus Horizontes com Stackspot',
-    description: 'Troque facilmente entre EDP e AI para aprimorar seus projetos. Acesse uma ampla gama de recursos com apenas um clique e leve seus projetos para um novo nível de eficiência. Comece sua jornada agora!',
-  },
-}

package/src/components/tour/utils.tsx

@@ -1,58 +0,0 @@
-import { theme } from '@stack-spot/portal-theme'
-import styled from 'styled-components'
-
-export const TextWithPointingArrow = styled.div < {
-  $position: 'right' | 'top' | 'left',
-  $top?: string,
-  $right?: string,
-} > `
-  position: relative;
-  width: 100%;
-  &::after {
-    content: '';
-    position: absolute;
-    border-width: 10px;
-    border-style: solid;
-    border-color: transparent;
-    margin-top: -5px;
-    border-right-color: ${theme.color.inverse[500]};
-    ${({ $position, $top }) => $position === 'right' ?
-    `
-      top: ${$top || '16px'};
-      left: -18px;
-    ` : ''}
-    ${({ $position, $right }) => $position === 'top' ?
-    `
-    bottom: 96%;
-    right: ${$right || '16px'};
-    transform: rotate(90deg);
-    ` : ''}
-    ${({ $position, $top }) => $position === 'left' ?
-    `
-      top: ${$top || '16px'};
-      right: -18px;
-      transform: rotate(180deg);
-    ` : ''}
-  }
-`
-
-const DOMAIN_REGEX = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/)
-const portalUrl = new URL(location.href)
-const cookieDomain = DOMAIN_REGEX.exec(portalUrl.host)?.[0]
-const defaultCookieAttributes = `domain=${cookieDomain}; SameSite=Strict;`
-
-const getCookies = (): Record<string, string> => document.cookie.split('; ').reduce((prev, current) => {
-  const [name, ...value] = current.split('=')
-  prev[name] = value.join('=')
-  return prev
-}, {} as Record<string, string>)
-
-const setCookie = (key: string, value: string) => {
-  document.cookie = `${key}=${value}; ${defaultCookieAttributes}`
-}
-
-const getCookie = (key: string) => getCookies()[key]
-
-export const finishTour = () => setCookie('welcomeTour', 'done')
-
-export const hasFinishedTour = () => !!getCookie('welcomeTour')