@vimeo/iris/components/Menu/Menu.minors.esm.js

Vimeo Design System

import { b as __rest, c as __assign, _ as __read } from '../../tslib.es6-7f0e734f.js';
import React__default, { useRef, useState, useEffect } from 'react';
import { Header, Wrapper, ItemStyled, Toggle, Action, SubMenu } from './Menu.style.esm.js';
import { ChevronDown } from '../../icons/ui/ChevronDown.esm.js';
import { Focus } from '../../utils/css.esm.js';
import 'styled-components';
import 'polished';
import '../../tokens/core.esm.js';
import '../../tokens/color/index.esm.js';
import '../../tokens/color/background/background.esm.js';
import '../../tokens/util/readToken.esm.js';
import '../../color/colors.esm.js';
import '../../tokens/util/clamp.esm.js';
import '../../tokens/color/format/format.esm.js';
import '../../tokens/color/format/primary.esm.js';
import '../../tokens/color/format/secondary.esm.js';
import '../../tokens/color/format/tertiary.esm.js';
import '../../tokens/color/rainbow/rainbow.esm.js';
import '../../tokens/color/rainbow/conic/index.esm.js';
import '../../tokens/color/rainbow/conic/sm.esm.js';
import '../../tokens/color/rainbow/conic/xl.esm.js';
import '../../tokens/color/rainbow/linear/index.esm.js';
import '../../tokens/color/rainbow/linear/sm.esm.js';
import '../../tokens/color/rainbow/linear/xl.esm.js';
import '../../tokens/color/livestream/livestream.esm.js';
import '../../tokens/color/status/status.esm.js';
import '../../tokens/color/status/caution.esm.js';
import '../../tokens/color/status/negative.esm.js';
import '../../tokens/color/status/positive.esm.js';
import '../../tokens/color/stroke/stroke.esm.js';
import '../../tokens/color/surface/surface.esm.js';
import '../../tokens/color/text/text.esm.js';
import '../../tokens/util/round.esm.js';
import '../../tokens/color/upsell/upsell.esm.js';
import '../../tokens/color/upsell/sm.esm.js';
import '../../tokens/color/upsell/xl.esm.js';
import '../../tokens/color/upsell/new.esm.js';
import '../../tokens/edge/edge.esm.js';
import '../../tokens/space/space.esm.js';
import '../../tokens/typography/index.esm.js';
import '../../tokens/typography/size/size.esm.js';

function Section(_a) {
    var children = _a.children, _b = _a.title, title = _b === void 0 ? null : _b, props = __rest(_a, ["children", "title"]);
    return (React__default.createElement("div", __assign({}, props),
        title && React__default.createElement(Header, null, title),
        children));
}
function Item(_a) {
    var action = _a.action, active = _a.active, children = _a.children, href = _a.href, _b = _a.toggle, toggle = _b === void 0 ? false : _b, icon = _a.icon, 
    /** Function called if item is toggled open */
    onOpen = _a.onOpen, 
    /** Function called if item is toggled close */
    onClose = _a.onClose, props = __rest(_a, ["action", "active", "children", "href", "toggle", "icon", "onOpen", "onClose"]);
    var init = useRef(true);
    var _c = __read(useState(!toggle), 2), open = _c[0], setOpen = _c[1];
    useEffect(function () {
        // Prevent calling onClose on mount
        if (init.current) {
            init.current = false;
        }
        else if (open) {
            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
        }
        else {
            onClose === null || onClose === void 0 ? void 0 : onClose();
        }
    }, [onClose, onOpen, open]);
    var doToggle = function () { return toggle && setOpen(function (open) { return !open; }); };
    var doAction = function (e) {
        action.onClick && action.onClick(e);
    };
    var simpleKids = typeof children === 'object' && !children.props
        ? children.flat().filter(function (child) { return typeof child === 'string'; })
        : children;
    var complexKids = typeof children === 'object' &&
        !children.props &&
        children.flat().filter(function (child) { return typeof child !== 'string'; });
    if (complexKids.length === 0)
        complexKids = false;
    var link = simpleKids && href;
    var $height = open && complexKids.length;
    return (React__default.createElement(Wrapper, { active: active, "$height": $height },
        React__default.createElement(ItemStyled, __assign({ as: link ? 'a' : 'button', href: href, onClick: doToggle }, props),
            toggle && (React__default.createElement(Toggle, { open: open },
                React__default.createElement(ChevronDown, null),
                React__default.createElement(Focus, { parent: Toggle, isKeyboardOnly: true }))),
            action && (React__default.createElement(Action, { onClick: doAction },
                action.icon,
                React__default.createElement(Focus, { parent: Action, isKeyboardOnly: true }))),
            icon && icon,
            simpleKids,
            React__default.createElement(Focus, { parent: ItemStyled, isKeyboardOnly: true })),
        open && complexKids && (React__default.createElement(SubMenu, { total: complexKids.length }, complexKids))));
}

export { Item, Section };