@awsui/components-react/side-navigation/internal.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign } from "tslib";
import React, { useCallback, useState, useEffect, useMemo } from 'react';
import clsx from 'clsx';
import ExpandableSection from '../expandable-section';
import Icon from '../icon';
import styles from './styles.css.js';
import useFocusVisible from '../internal/hooks/focus-visible';
import { hasActiveLink } from './util';
export function Header(_a) {
    var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow;
    var focusVisible = useFocusVisible();
    var onClick = useCallback(function (event) {
        if (event.button !== 0 || event.ctrlKey || event.altKey || event.shiftKey || event.metaKey) {
            return;
        }
        fireFollow(definition, event);
    }, [fireFollow, definition]);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: styles.header },
            React.createElement("a", __assign({}, focusVisible, { href: definition.href, className: styles['header-link'], "aria-current": definition.href === activeHref ? 'page' : undefined, onClick: onClick }), definition.text)),
        React.createElement(Divider, { variant: "header" })));
}
export function ItemList(_a) {
    var variant = _a.variant, items = _a.items, activeHref = _a.activeHref, fireChange = _a.fireChange, fireFollow = _a.fireFollow;
    return (React.createElement("ul", { className: clsx(styles.list, styles["list-variant-" + variant]) }, items.map(function (item, i) { return (React.createElement("li", { key: i, className: styles['list-item'] },
        item.type === 'divider' && React.createElement(Divider, { variant: "default" }),
        item.type === 'link' && (React.createElement(Link, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
        item.type === 'section' && (React.createElement(Section, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
        item.type === 'link-group' && (React.createElement(LinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
        item.type === 'expandable-link-group' && (React.createElement(ExpandableLinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })))); })));
}
function Divider(_a) {
    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
    return React.createElement("hr", { className: clsx(styles.divider, styles["divider-" + variant]) });
}
function Link(_a) {
    var _b;
    var definition = _a.definition, expanded = _a.expanded, activeHref = _a.activeHref, fireFollow = _a.fireFollow;
    var isActive = definition.href === activeHref;
    var focusVisible = useFocusVisible();
    var onClick = useCallback(function (event) {
        event.stopPropagation();
        if (event.button !== 0 || event.ctrlKey || event.altKey || event.shiftKey || event.metaKey) {
            return;
        }
        fireFollow(definition, event);
    }, [fireFollow, definition]);
    return (React.createElement(React.Fragment, null,
        React.createElement("a", __assign({}, focusVisible, { href: definition.href, className: clsx(styles.link, (_b = {}, _b[styles['link-active']] = isActive, _b)), target: definition.external ? '_blank' : undefined, rel: definition.external ? 'noopener' : undefined, "aria-expanded": expanded, "aria-current": definition.href === activeHref ? 'page' : undefined, onClick: onClick }),
            definition.text,
            definition.external && React.createElement(Icon, { name: "external", className: styles['external-icon'] })),
        definition.info && React.createElement("span", { className: styles.info }, definition.info)));
}
function Section(_a) {
    var _b;
    var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow, fireChange = _a.fireChange;
    var _c = useState((_b = definition.defaultExpanded) !== null && _b !== void 0 ? _b : true), expanded = _c[0], setExpanded = _c[1];
    var onExpandedChange = useCallback(function (e) {
        fireChange(definition, e.detail.expanded);
        setExpanded(e.detail.expanded);
    }, [definition, fireChange]);
    useEffect(function () {
        var _a;
        setExpanded((_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : true);
    }, [definition]);
    return (React.createElement(ExpandableSection, { variant: "footer", expanded: expanded, onChange: onExpandedChange, className: styles.section, header: definition.text },
        React.createElement(ItemList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
}
function LinkGroup(_a) {
    var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow, fireChange = _a.fireChange;
    var onHeaderFollow = useCallback(function (_definition, event) {
        fireFollow(definition, event);
    }, [fireFollow, definition]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text }, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref }),
        React.createElement(ItemList, { variant: "link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
}
function ExpandableLinkGroup(_a) {
    var definition = _a.definition, fireFollow = _a.fireFollow, fireChange = _a.fireChange, activeHref = _a.activeHref;
    var containsActiveLink = useMemo(function () {
        return activeHref ? hasActiveLink(definition.items, activeHref) : false;
    }, [activeHref, definition.items]);
    var _b = useState(function () {
        var _a;
        return (_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : (definition.href === activeHref || containsActiveLink);
    }), expanded = _b[0], setExpanded = _b[1];
    var _c = useState(), userExpanded = _c[0], setUserExpanded = _c[1];
    useEffect(function () { return setUserExpanded(undefined); }, [definition]);
    useEffect(function () {
        setExpanded(definition.href === activeHref || containsActiveLink);
    }, [definition.href, containsActiveLink, activeHref]);
    useEffect(function () {
        if (definition.defaultExpanded !== undefined) {
            setExpanded(definition.defaultExpanded);
        }
    }, [definition]);
    var onExpandedChange = useCallback(function (e) {
        fireChange(definition, e.detail.expanded);
        setUserExpanded(e.detail.expanded);
    }, [definition, fireChange]);
    var onHeaderFollow = useCallback(function (_definition, event) {
        fireFollow(definition, event);
        setUserExpanded(true);
        if (!expanded) {
            fireChange(definition, true);
        }
    }, [fireFollow, definition, expanded, fireChange]);
    return (React.createElement(ExpandableSection, { className: styles['expandable-link-group'], variant: "navigation", expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, onChange: onExpandedChange, header: React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text }, expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref }) },
        React.createElement(ItemList, { variant: "expandable-link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
}