@stack-spot/citric-react 0.1.0

package/dist/components/MenuOverlay/Menu.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { createElement, useEffect, useMemo } from 'react';
+import { ValueController } from '../../utils/ValueController.js';
+import { CitricComponent } from '../CitricComponent.js';
+import { IconButton } from '../IconBox.js';
+import { useOverlayController } from '../Overlay/context.js';
+import { MenuProvider, useMenuController, useMenuState } from './context.js';
+import { keyboardNavigation } from './keyboard.js';
+// Arbitrary time (ms) to wait before running a function that needs the view to be updated with the next state value.
+const RENDER_DELAY = 20;
+function Submenu({ children, label, className, icon, iconRight }) {
+    const controller = useMenuController();
+    return (_jsxs("button", { className: listToClass([className, 'submenu']), onClick: (e) => {
+            e.stopPropagation();
+            const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined;
+            controller?.setValue({ items: children, label, parent: controller?.getValue() });
+            const isOpenedWithMouse = e.detail > 0;
+            if (!isOpenedWithMouse) {
+                setTimeout(() => {
+                    const firstFocusable = menu?.querySelector('a, button');
+                    if (firstFocusable instanceof HTMLElement)
+                        firstFocusable.focus();
+                }, RENDER_DELAY);
+            }
+        }, children: [icon, _jsx("span", { children: label }), iconRight] }));
+}
+function MenuSection({ children, label, className }) {
+    return (_jsxs("section", { className: className, children: [label && _jsx("h6", { children: label }), _jsx("nav", { children: _jsx(MenuItems, { items: children }) }), !label && _jsx("hr", {})] }));
+}
+function MenuAction({ label, active, href, icon, iconRight, className, onClick, ...props }) {
+    const overlayController = useOverlayController();
+    const children = _jsxs(_Fragment, { children: [icon, typeof label === 'string' ? _jsx("span", { children: label }) : label.element, iconRight] });
+    return createElement(href ? 'a' : 'button', {
+        href,
+        'aria-label': typeof label === 'string' ? label : label.id,
+        className: listToClass([className, active && 'active']),
+        onClick: (e) => {
+            overlayController?.close();
+            onClick?.(e);
+        },
+        ...props,
+    }, children);
+}
+function hasSections(items) {
+    return items.some(i => 'children' in i && i.children.length && i.type === 'section');
+}
+function hasSubmenus(items) {
+    return items.some(i => 'children' in i && i.children.length && i.type === 'collapsible');
+}
+function MenuItems({ items }) {
+    return useMemo(() => items.map((item, index) => {
+        if ('children' in item && item.type === 'section')
+            return _jsx(MenuSection, { ...item }, item.label || index);
+        if ('children' in item && item.type === 'collapsible')
+            return _jsx(Submenu, { ...item }, item.label || index);
+        return _jsx(MenuAction, { ...item }, (typeof item.label === 'string' ? item.label : item.label?.id) || index);
+    }), [items]);
+}
+/**
+ * TODO: make the height changes animated.
+ */
+export function Menu({ items, appearance, bgLevel, header, roundedItems, showBorders, showShadows, spaced, className, onKeyDown, ...props }) {
+    const controller = useMemo(() => new ValueController({ items }), []);
+    const current = useMenuState(controller);
+    const { sectioned, collapsible } = useMemo(() => ({ sectioned: hasSections(current.items), collapsible: hasSubmenus(current.items) }), [current.items]);
+    const tag = header || sectioned || collapsible ? 'div' : 'nav';
+    const t = useTranslate(dictionary);
+    useEffect(() => {
+        if (items !== controller.getValue().items)
+            controller.setValue({ items });
+    }, [items]);
+    return (_jsx(MenuProvider, { value: controller, children: _jsxs(CitricComponent, { tag: tag, component: "menu", className: listToClass([
+                className, appearance, roundedItems && 'rounded-items', showBorders && 'bordered', showShadows === false && 'no-shadow',
+                spaced && 'spaced', bgLevel && `bg-${bgLevel}`,
+            ]), onKeyDown: (e) => {
+                keyboardNavigation(e);
+                onKeyDown?.(e);
+            }, ...props, children: [header && _jsx("header", { children: header }), current.parent && (_jsxs("div", { className: "back-button", children: [_jsx(IconButton, { icon: "ArrowLeft", "aria-label": t.goBack, onClick: (e) => {
+                                e.stopPropagation();
+                                const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined;
+                                if (current.parent)
+                                    controller.setValue(current.parent);
+                                setTimeout(() => {
+                                    const lastItem = Array.from(menu?.querySelectorAll('a, button') ?? []).find(el => el.textContent === current.label);
+                                    if (lastItem instanceof HTMLElement)
+                                        lastItem.focus();
+                                }, RENDER_DELAY);
+                            } }), _jsx("span", { children: current.label || t.goBack })] })), sectioned ? _jsx(MenuItems, { items: current.items }) : _jsx("nav", { children: _jsx(MenuItems, { items: current.items }) })] }) }));
+}
+const dictionary = {
+    en: {
+        goBack: 'Go back',
+    },
+    pt: {
+        goBack: 'Voltar',
+    },
+};
+//# sourceMappingURL=Menu.js.map

package/dist/components/MenuOverlay/Menu.js.map

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

package/dist/components/MenuOverlay/context.d.ts

@@ -0,0 +1,6 @@
+import { ValueController } from '../../utils/ValueController.js';
+import { MenuState } from './types.js';
+export declare const MenuProvider: import("react").Provider<ValueController<MenuState> | undefined>;
+export declare function useMenuController(): ValueController<MenuState> | undefined;
+export declare function useMenuState(controller?: ValueController<MenuState>): MenuState;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/MenuOverlay/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAInC,eAAO,MAAM,YAAY,kEAAmB,CAAA;AAE5C,wBAAgB,iBAAiB,2CAEhC;AAED,wBAAgB,YAAY,CAAC,UAAU,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,aAOnE"}

package/dist/components/MenuOverlay/context.js

@@ -0,0 +1,16 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+const context = createContext(undefined);
+export const MenuProvider = context.Provider;
+export function useMenuController() {
+    return useContext(context);
+}
+export function useMenuState(controller) {
+    const controllerFromContext = useMenuController();
+    controller ??= controllerFromContext;
+    if (!controller)
+        throw new Error('useMenuState used outside the context of a Menu');
+    const [state, setState] = useState(controller.getValue());
+    useEffect(() => controller.onChange(setState));
+    return state;
+}
+//# sourceMappingURL=context.js.map

package/dist/components/MenuOverlay/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/MenuOverlay/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAItE,MAAM,OAAO,GAAG,aAAa,CAAyC,SAAS,CAAC,CAAA;AAEhF,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ,CAAA;AAE5C,MAAM,UAAU,iBAAiB;IAC/B,OAAO,UAAU,CAAC,OAAO,CAAC,CAAA;AAC5B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,UAAuC;IAClE,MAAM,qBAAqB,GAAG,iBAAiB,EAAE,CAAA;IACjD,UAAU,KAAK,qBAAqB,CAAA;IACpC,IAAI,CAAC,UAAU;QAAE,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAA;IACnF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAA;IACzD,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC9C,OAAO,KAAK,CAAA;AACd,CAAC"}

package/dist/components/MenuOverlay/index.d.ts

@@ -0,0 +1,3 @@
+import { MenuOverlayProps } from './types.js';
+export declare const MenuOverlay: ({ id, items, appearance, bgLevel, header, roundedItems, showBorders, showShadows, spaced, menuClass, menuStyle, children, ...props }: MenuOverlayProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MenuOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,eAAO,MAAM,WAAW,GAAI,sIAEzB,gBAAgB,4CAgBlB,CAAA"}

package/dist/components/MenuOverlay/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useMemo } from 'react';
+import { IconButton } from '../IconBox.js';
+import { Overlay } from '../Overlay/index.js';
+import { Menu } from './Menu.js';
+export const MenuOverlay = ({ id, items, appearance, bgLevel, header, roundedItems, showBorders, showShadows, spaced, menuClass, menuStyle, children, ...props }) => {
+    const t = useTranslate(dictionary);
+    const randomId = useMemo(() => `${Math.random()}`, []);
+    const menuProps = {
+        items, appearance, bgLevel, roundedItems, showBorders, showShadows, spaced, header, className: menuClass, style: menuStyle,
+    };
+    return (_jsx(Overlay, { content: _jsx(Menu, { ...menuProps }), attributes: { id: id || randomId, style: { margin: '8px' } }, triggerOn: "click", ...props, children: children ?? _jsx(IconButton, { icon: "EllipsisVertical", "aria-label": t.open }) }));
+};
+const dictionary = {
+    en: {
+        open: 'Open menu',
+    },
+    pt: {
+        open: 'Abrir menu',
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/components/MenuOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuOverlay/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAG7B,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAC/G,EAAE,EAAE;IACrB,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IACtD,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS;KAC3H,CAAA;IACD,OAAO,CACL,KAAC,OAAO,IACN,OAAO,EAAE,KAAC,IAAI,OAAK,SAAS,GAAI,EAChC,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,QAAQ,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAC5D,SAAS,EAAC,OAAO,KACb,KAAK,YAER,QAAQ,IAAI,KAAC,UAAU,IAAC,IAAI,EAAC,kBAAkB,gBAAa,CAAC,CAAC,IAAI,GAAI,GAC/D,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,IAAI,EAAE,WAAW;KAClB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,YAAY;KACnB;CACmB,CAAA"}

package/dist/components/MenuOverlay/keyboard.d.ts

@@ -0,0 +1,2 @@
+export declare function keyboardNavigation(event: React.KeyboardEvent): void;
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/components/MenuOverlay/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/keyboard.ts"],"names":[],"mappings":"AA8CA,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,QAa5D"}

package/dist/components/MenuOverlay/keyboard.js

@@ -0,0 +1,66 @@
+// TODO: scroll the element into view when it's focused. Very important for accessibility in scrollable menus.
+function getCurrent(element) {
+    return element instanceof HTMLElement
+        ? element.querySelector('button:focus, a:focus')
+        : null;
+}
+function getMenuItems(element) {
+    return element instanceof HTMLElement ? element.querySelectorAll('button, a') : undefined;
+}
+function focusFirst(element) {
+    const first = getMenuItems(element)?.[0];
+    if (first instanceof HTMLElement)
+        first.focus();
+}
+function focusLast(element) {
+    const all = getMenuItems(element);
+    const last = all?.[all.length];
+    if (last instanceof HTMLElement)
+        last.focus();
+}
+function indexOf(elements, element) {
+    for (let i = 0; i < elements.length; i++) {
+        if (elements[i] === element)
+            return i;
+    }
+    return -1;
+}
+function focusPrevious(element, current) {
+    const all = getMenuItems(element);
+    const index = all ? indexOf(all, current) : -1;
+    if (!all || index === -1)
+        return;
+    const prev = index === 0 ? all[all.length - 1] : all[index - 1];
+    if (prev instanceof HTMLElement)
+        prev.focus();
+}
+function focusNext(element, current) {
+    const all = getMenuItems(element);
+    const index = all ? indexOf(all, current) : -1;
+    if (!all || index === -1)
+        return;
+    const next = index >= all.length - 1 ? all[0] : all[index + 1];
+    if (next instanceof HTMLElement)
+        next.focus();
+}
+export function keyboardNavigation(event) {
+    if (!['ArrowUp', 'ArrowDown'].includes(event.key))
+        return;
+    event.stopPropagation();
+    event.preventDefault();
+    const menu = event.target instanceof HTMLElement ? event.target.closest('[data-citric="menu"]') : undefined;
+    const current = getCurrent(menu);
+    if (event.key === 'ArrowUp') {
+        if (current)
+            focusPrevious(menu, current);
+        else
+            focusLast(menu);
+    }
+    else {
+        if (current)
+            focusNext(menu, current);
+        else
+            focusFirst(menu);
+    }
+}
+//# sourceMappingURL=keyboard.js.map

package/dist/components/MenuOverlay/keyboard.js.map

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

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

@@ -0,0 +1,166 @@
+import { HTMLExtension } from '../../types.js';
+import { BaseOverlayProps } from '../Overlay/types.js';
+interface CustomLabel {
+    /**
+     * A unique identifier for this label. This is also used to read this label to screen readers.
+     */
+    id: string;
+    /**
+     * A custom label that can be made up of any React component.
+     */
+    element: React.ReactNode;
+}
+interface Action {
+    /**
+     * The label of the action.
+     */
+    label: string | CustomLabel;
+    /**
+     * Function to run on a click.
+     */
+    onClick?: (event?: React.MouseEvent) => void;
+    /**
+     * URL to open on a click.
+     */
+    href?: string;
+    /**
+     * Target of the URL to open.
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * Language of the linked document.
+     */
+    lang?: React.AnchorHTMLAttributes<HTMLAnchorElement>['lang'];
+    /**
+     * Language of the destination URL.
+     */
+    hrefLang?: React.AnchorHTMLAttributes<HTMLAnchorElement>['hrefLang'];
+    /**
+     * The title of the action.
+     */
+    title?: string;
+    /**
+     * Whether or not this link/button is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+interface ItemWithIcon {
+    /**
+     * An Icon to appear at the left of the item.
+     */
+    icon?: React.ReactElement;
+    /**
+     * An Icon to appear at the right of the item.
+     */
+    iconRight?: React.ReactElement;
+}
+export interface ListAction extends ItemWithIcon, Action {
+    /**
+     * Whether or not this option is currently active.
+     */
+    active?: boolean;
+    /**
+     * A class to be added to this item.
+     */
+    className?: string;
+}
+interface ListGroup {
+    /**
+     * If this group is rendered as a section with its items right below it or a collapsible, which requires a click to open a submenu.
+     */
+    type?: 'section' | 'collapsible';
+    /**
+     * The items of this group.
+     */
+    children: ListItem[];
+    /**
+    * A class to be added to this item.
+    */
+    className?: string;
+}
+export interface ListSection extends ListGroup {
+    type: 'section';
+    /**
+     * The section's title.
+     */
+    label?: string;
+}
+export interface ListCollapsible extends ListGroup, ItemWithIcon {
+    type?: 'collapsible';
+    /**
+     * The title of the collapsible menu.
+     */
+    label: string;
+}
+export type ListItem = ListSection | ListCollapsible | ListAction;
+export interface MenuState {
+    items: ListItem[];
+    parent?: MenuState;
+    label?: string;
+}
+export interface BaseMenuProps {
+    /**
+     * The options in the selection list.
+     */
+    items: ListItem[];
+    /**
+     * A header for the menu.
+     */
+    header?: React.ReactNode;
+    /**
+     * Whether or not to render spaces between the items and the sides of the menu.
+     *
+     * @default false
+     */
+    spaced?: boolean;
+    /**
+     * Wheter or not to render borders.
+     *
+     * @default false
+     */
+    showBorders?: boolean;
+    /**
+     * Whether or not to use rounded corners for each menu item.
+     *
+     * @default false
+     */
+    roundedItems?: boolean;
+    /**
+     * Use 'square' for sharp corners and 'circle' for rounded corners.
+     *
+     * @default 'circle'
+     */
+    appearance?: 'square' | 'circle';
+    /**
+     * The level of the background color. Use this to lighten or darken the background.
+     *
+     * @default 300
+     */
+    bgLevel?: 300 | 400 | 500 | 600;
+    /**
+     * Whether or not to render shadows behind the menu.
+     *
+     * @default true
+     */
+    showShadows?: boolean;
+    /**
+     * A class for the menu element.
+     */
+    menuClass?: string;
+    /**
+     * Styles for the menu element.
+     */
+    menuStyle?: React.CSSProperties;
+}
+export type MenuProps = HTMLExtension<'div', BaseMenuProps, 'children'>;
+export interface BaseMenuOverlayProps extends BaseMenuProps, Omit<BaseOverlayProps<'div'>, 'tag' | 'onRenderChild' | 'content' | 'triggerOn' | 'reference'> {
+    /**
+     * A unique id for this menu. If not provided, a random number will be used.
+     */
+    id?: string;
+}
+export type MenuOverlayProps = HTMLExtension<'div', BaseMenuOverlayProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

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

package/dist/components/MenuOverlay/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/MenuOverlay/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/MenuOverlay/types.ts"],"names":[],"mappings":""}

package/dist/components/Overlay/context.d.ts

@@ -0,0 +1,4 @@
+import { OverlayController } from './types.js';
+export declare const OverlayProvider: import("react").Provider<OverlayController | undefined>;
+export declare function useOverlayController(): OverlayController | undefined;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/Overlay/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAI3C,eAAO,MAAM,eAAe,yDAAmB,CAAA;AAE/C,wBAAgB,oBAAoB,kCAEnC"}

package/dist/components/Overlay/context.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+const context = createContext(undefined);
+export const OverlayProvider = context.Provider;
+export function useOverlayController() {
+    return useContext(context);
+}
+//# sourceMappingURL=context.js.map

package/dist/components/Overlay/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/Overlay/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGjD,MAAM,OAAO,GAAG,aAAa,CAAgC,SAAS,CAAC,CAAA;AAEvE,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC,QAAQ,CAAA;AAE/C,MAAM,UAAU,oBAAoB;IAClC,OAAO,UAAU,CAAC,OAAO,CAAC,CAAA;AAC5B,CAAC"}

package/dist/components/Overlay/index.d.ts

@@ -0,0 +1,14 @@
+import { OverlayProps } from './types.js';
+/**
+ * These todos are in order of priority.
+ *
+ * TODO: update position when the size changes. Currently, the top position seems out of place whenever the height changes. The same is
+ * probably true for the left position if the width changes.
+ * TODO: hoverDelayMS
+ * TODO: reposition the overlay when it's under a scrollable element other then the body and this element is scrolled.
+ * TODO: close the overlay when it's under a scrollable element other then the body and the element that triggered the tooltip becomes
+ * hidden by the scroll.
+ * TODO: use React Portal to implement overlays. The current implementation will lose every React context in the tree.
+ */
+export declare function Overlay<T extends keyof React.JSX.IntrinsicElements>({ tag, children, content, position, triggerOn, attributes, onRenderChild, autoFocusBehavior, ...props }: OverlayProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,YAAY,EAAE,MAAM,SAAS,CAAA;AAEzD;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,EAAE,EACnE,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAmB,EACnB,UAAU,EACV,aAAa,EACb,iBAA8B,EAC9B,GAAG,KAAK,EACT,EAAE,YAAY,CAAC,CAAC,CAAC,2CA6GjB"}

package/dist/components/Overlay/index.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { showOverlay } from '../../overlay.js';
+import { focusFirstChild } from '../../utils/acessibility.js';
+import { OverlayProvider } from './context.js';
+/**
+ * These todos are in order of priority.
+ *
+ * TODO: update position when the size changes. Currently, the top position seems out of place whenever the height changes. The same is
+ * probably true for the left position if the width changes.
+ * TODO: hoverDelayMS
+ * TODO: reposition the overlay when it's under a scrollable element other then the body and this element is scrolled.
+ * TODO: close the overlay when it's under a scrollable element other then the body and the element that triggered the tooltip becomes
+ * hidden by the scroll.
+ * TODO: use React Portal to implement overlays. The current implementation will lose every React context in the tree.
+ */
+export function Overlay({ tag, children, content, position = 'top', triggerOn = 'hover', attributes, onRenderChild, autoFocusBehavior = 'keyboard', ...props }) {
+    const controller = useRef({ close: () => Promise.resolve() });
+    const wrapper = useRef(null);
+    // props that don't require removing and reattaching the event listeners
+    const dynamic = useRef({ tag, content, position, attributes });
+    useEffect(() => {
+        dynamic.current = { tag, content, position, attributes };
+    }, [tag, content, position, attributes]);
+    useEffect(() => {
+        let visible = false;
+        let hideOnClickOutside;
+        let hideOnEsc;
+        let hideOverlay;
+        let removeRefocusTargetListener;
+        function getTarget() {
+            const target = wrapper.current?.firstChild;
+            return target instanceof HTMLElement ? target : undefined;
+        }
+        if (onRenderChild) {
+            const target = getTarget();
+            if (target)
+                onRenderChild(target);
+        }
+        async function show(event) {
+            if (visible)
+                return;
+            visible = true;
+            const target = getTarget();
+            if (!target)
+                return;
+            const { overlay, hide: hideFn } = showOverlay({
+                tag: dynamic.current.tag,
+                content: ['string', 'number', 'boolean'].includes(typeof dynamic.current.content)
+                    ? dynamic.current.content
+                    : _jsx(OverlayProvider, { value: controller.current, children: dynamic.current.content }),
+                target,
+                position: dynamic.current.position,
+                attributes: dynamic.current.attributes,
+            });
+            hideOverlay = hideFn;
+            function onHide(condition) {
+                return (event) => {
+                    if (condition(event))
+                        controller.current.close();
+                };
+            }
+            if (event.type === 'click') {
+                event.stopPropagation();
+                hideOnClickOutside = onHide(e => e instanceof MouseEvent && e.button === 0 && !overlay.contains(e.target));
+                hideOnEsc = onHide(e => e instanceof KeyboardEvent && e.key === 'Escape');
+                document.addEventListener('click', hideOnClickOutside);
+                document.addEventListener('keydown', hideOnEsc);
+            }
+            //focus target when the last overlay element loses focus
+            function refocusTarget(e) {
+                if (e.key === 'Tab' && e.target instanceof HTMLElement) {
+                    const allItems = Array.from(e.target.closest('[data-citric="menu"]')?.querySelectorAll('a, button') ?? []);
+                    if (e.target === allItems[allItems.length - 1]) {
+                        getTarget()?.focus();
+                        e.preventDefault();
+                    }
+                }
+            }
+            overlay.addEventListener('keydown', refocusTarget);
+            removeRefocusTargetListener = () => overlay.removeEventListener('keydown', refocusTarget);
+            // auto-focus
+            const openedWithMouse = event instanceof MouseEvent && event.detail > 0;
+            if (autoFocusBehavior === 'always' || (autoFocusBehavior === 'keyboard' && !openedWithMouse)) {
+                setTimeout(() => focusFirstChild(overlay), 20);
+            }
+        }
+        controller.current.close = async () => {
+            visible = false;
+            if (hideOnClickOutside)
+                document.removeEventListener('click', hideOnClickOutside);
+            if (hideOnEsc)
+                document.removeEventListener('keydown', hideOnEsc);
+            removeRefocusTargetListener?.();
+            await hideOverlay?.();
+        };
+        if (triggerOn === 'hover') {
+            getTarget()?.addEventListener('mouseenter', show);
+            getTarget()?.addEventListener('mouseleave', controller.current.close);
+            getTarget()?.addEventListener('focus', show);
+            getTarget()?.addEventListener('blur', controller.current.close);
+            return () => {
+                getTarget()?.removeEventListener('mouseenter', show);
+                getTarget()?.removeEventListener('mouseleave', controller.current.close);
+                getTarget()?.removeEventListener('focus', show);
+                getTarget()?.removeEventListener('blur', controller.current.close);
+            };
+        }
+        if (triggerOn === 'click') {
+            getTarget()?.addEventListener('click', show);
+            return () => {
+                getTarget()?.removeEventListener('click', show);
+                if (hideOnClickOutside)
+                    document.removeEventListener('click', hideOnClickOutside);
+            };
+        }
+    }, [wrapper.current, triggerOn]);
+    return _jsx("div", { ref: wrapper, ...props, children: children });
+}
+//# sourceMappingURL=index.js.map

package/dist/components/Overlay/index.js.map

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