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

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var components_Menu_Menu_style = require('./Menu.style.js');
var icons_ui_ChevronDown = require('../../icons/ui/ChevronDown.js');
var utils_css = require('../../utils/css.js');
require('styled-components');
require('polished');
require('../../tokens/core.js');
require('../../tokens/color/index.js');
require('../../tokens/color/background/background.js');
require('../../tokens/util/readToken.js');
require('../../color/colors.js');
require('../../tokens/util/clamp.js');
require('../../tokens/color/format/format.js');
require('../../tokens/color/format/primary.js');
require('../../tokens/color/format/secondary.js');
require('../../tokens/color/format/tertiary.js');
require('../../tokens/color/rainbow/rainbow.js');
require('../../tokens/color/rainbow/conic/index.js');
require('../../tokens/color/rainbow/conic/sm.js');
require('../../tokens/color/rainbow/conic/xl.js');
require('../../tokens/color/rainbow/linear/index.js');
require('../../tokens/color/rainbow/linear/sm.js');
require('../../tokens/color/rainbow/linear/xl.js');
require('../../tokens/color/livestream/livestream.js');
require('../../tokens/color/status/status.js');
require('../../tokens/color/status/caution.js');
require('../../tokens/color/status/negative.js');
require('../../tokens/color/status/positive.js');
require('../../tokens/color/stroke/stroke.js');
require('../../tokens/color/surface/surface.js');
require('../../tokens/color/text/text.js');
require('../../tokens/util/round.js');
require('../../tokens/color/upsell/upsell.js');
require('../../tokens/color/upsell/sm.js');
require('../../tokens/color/upsell/xl.js');
require('../../tokens/color/upsell/new.js');
require('../../tokens/edge/edge.js');
require('../../tokens/space/space.js');
require('../../tokens/typography/index.js');
require('../../tokens/typography/size/size.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function Section(_a) {
    var children = _a.children, _b = _a.title, title = _b === void 0 ? null : _b, props = tslib_es6.__rest(_a, ["children", "title"]);
    return (React__default["default"].createElement("div", tslib_es6.__assign({}, props),
        title && React__default["default"].createElement(components_Menu_Menu_style.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 = tslib_es6.__rest(_a, ["action", "active", "children", "href", "toggle", "icon", "onOpen", "onClose"]);
    var init = React.useRef(true);
    var _c = tslib_es6.__read(React.useState(!toggle), 2), open = _c[0], setOpen = _c[1];
    React.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["default"].createElement(components_Menu_Menu_style.Wrapper, { active: active, "$height": $height },
        React__default["default"].createElement(components_Menu_Menu_style.ItemStyled, tslib_es6.__assign({ as: link ? 'a' : 'button', href: href, onClick: doToggle }, props),
            toggle && (React__default["default"].createElement(components_Menu_Menu_style.Toggle, { open: open },
                React__default["default"].createElement(icons_ui_ChevronDown.ChevronDown, null),
                React__default["default"].createElement(utils_css.Focus, { parent: components_Menu_Menu_style.Toggle, isKeyboardOnly: true }))),
            action && (React__default["default"].createElement(components_Menu_Menu_style.Action, { onClick: doAction },
                action.icon,
                React__default["default"].createElement(utils_css.Focus, { parent: components_Menu_Menu_style.Action, isKeyboardOnly: true }))),
            icon && icon,
            simpleKids,
            React__default["default"].createElement(utils_css.Focus, { parent: components_Menu_Menu_style.ItemStyled, isKeyboardOnly: true })),
        open && complexKids && (React__default["default"].createElement(components_Menu_Menu_style.SubMenu, { total: complexKids.length }, complexKids))));
}

exports.Item = Item;
exports.Section = Section;