@datalayer/core
Version:
[](https://datalayer.io)
59 lines (58 loc) • 3.57 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import React, { useCallback, useRef, useState } from 'react';
import clsx from 'clsx';
import { ChevronDownIcon } from '@primer/octicons-react';
import { useVisibilityObserver } from '../../hooks/useVisibilityObserver';
import { useOnClickOutside } from '../../hooks/useOnClickOutside';
import { useKeyboardEscape } from '../../hooks/useKeyboardEscape';
import { useWindowSize } from '../../hooks/useWindowSize';
import styles from './SubdomainNavBar.module.css';
export function NavigationVisbilityObserver({ children, className, ...rest }) {
const navRef = useRef(null);
const [visibilityMap] = useVisibilityObserver(navRef, children);
const { isMedium } = useWindowSize();
const showOverflow = Object.values(visibilityMap).includes(false);
return (_jsxs("ul", { className: clsx(styles['SubdomainNavBar-primary-nav-list'], className), ref: navRef, ...rest, children: [React.Children.map(children, child => {
return React.cloneElement(child, {
className: clsx(child.props.className, isMedium &&
!!visibilityMap[child.props['data-navitemid']] &&
styles['SubdomainNavBar-primary-nav-list-item--visible'], isMedium &&
!visibilityMap[child.props['data-navitemid']] &&
styles['SubdomainNavBar-primary-nav-list-item--invisible']),
});
}), showOverflow && (_jsx(AnchoredOverlay, { visibilityMap: visibilityMap, children: children }))] }));
}
function AnchoredOverlay({ children, className, visibilityMap, }) {
const [anchorEl, setAnchorEl] = useState(null);
const ref = useRef(null);
useOnClickOutside(ref, () => handleClose());
const open = Boolean(anchorEl);
const handleClick = event => {
if (anchorEl) {
handleClose();
}
else {
setAnchorEl(event.currentTarget);
}
};
const handleClose = useCallback(() => {
setAnchorEl(null);
}, []);
useKeyboardEscape(handleClose);
return (_jsxs("li", { className: clsx(styles['SubdomainNavBar-primary-nav-list-item--overflow'], className), ref: ref, children: [_jsxs("button", { "aria-expanded": open ? 'true' : 'false', "aria-controls": "more-navigation", "aria-haspopup": "true", onClick: handleClick, className: clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-more-link']), children: ["More", _jsx(ChevronDownIcon, {})] }), _jsx("div", { id: "more-navigation", style: { display: open ? 'block' : 'none' }, className: clsx(styles['SubdomainNavBar-overflow-menu']), children: _jsx("ul", { className: clsx(styles['SubdomainNavBar-overflow-menu-list']), children: React.Children.map(children, child => {
if (React.isValidElement(child)) {
const navItemChild = child.props['data-navitemid'];
if (!visibilityMap[navItemChild]) {
return (_jsx(React.Fragment, { children: React.cloneElement(child, {
onClick: handleClose,
className: clsx(styles['SubdomainNavBar-overflow-menu-item'], child.props.className),
}) }));
}
}
return null;
}) }) })] }));
}