@vimeo/iris/components/Sidebar/Sidebar.esm.js

Vimeo Design System

import { b as __rest, _ as __read, c as __assign } from '../../tslib.es6-7f0e734f.js';
import React__default, { useRef, useState, useLayoutEffect, cloneElement } from 'react';
import { Item, Break } from './Sidebar.minors.esm.js';
import { SidebarStyled, PanelStyled, Dismiss } from './Sidebar.style.esm.js';
import { withIris } from '../../utils/HOCs/withIris.esm.js';
import { useStateTransmorphic } from '../../utils/hooks/useStateTransmorphic.esm.js';
import { useLayoutStyles } from '../../utils/hooks/useLayoutStyles.esm.js';
import { DismissX } from '../../icons/ui/DismissX.esm.js';
import 'styled-components';
import '../Button/Button.esm.js';
import '../Button/Button.style.esm.js';
import 'polished';
import '../Button/Button.config.esm.js';
import '../Button/FeaturedIcon.esm.js';
import '../../themes/index.esm.js';
import '../../color/colors.esm.js';
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 '../../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';
import '../LoaderCircular/LoaderCircular.esm.js';
import '../LoaderCircular/LoaderCircular.style.esm.js';
import '../../utils/hooks/useDeprecate.esm.js';
import '../../utils/general/mergeReactRefs.esm.js';
import '../../utils/css.esm.js';
import '../Tip/Tip.esm.js';
import '../Tip/Tip.settings.esm.js';
import '../Tip/Tip.style.esm.js';
import '../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.esm.js';
import 'react-dom';
import '../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.style.esm.js';
import '../../utils/hooks/usePortal_DEPRECATED/useMountAnimations.esm.js';
import '../../utils/hooks/useIsomorphicEffect.esm.js';
import '../../utils/DOM/getComputedStyles.esm.js';
import '../../utils/DOM/animate.esm.js';
import '../../utils/events/onEvent.esm.js';
import '../../utils/hooks/usePortal_DEPRECATED/coordinates.esm.js';
import '../../utils/hooks/usePortal_DEPRECATED/Anchor.esm.js';
import '../../utils/hooks/useOutsideClick.esm.js';
import '../../utils/DOM/SSR.esm.js';
import '../../utils/DOM/createPortalOutlet.esm.js';
import '../../utils/DOM/createElement.esm.js';
import '../../utils/hooks/useIrisError.esm.js';
import '../../utils/general/generateUID.esm.js';
import '../../typography/Paragraph/Paragraph.esm.js';
import '../../typography/Paragraph/Paragraph.style.esm.js';
import '../../typography/Text/Text.esm.js';
import '../../typography/Text/Text.style.esm.js';
import '../../typography/typography.esm.js';
import '../../typography/Text/EditableText.esm.js';
import '../../utils/DOM/geometry.esm.js';

var Sidebar = withIris(SidebarComponent);
Sidebar.Item = Item;
Sidebar.Break = Break;
function SidebarComponent(_a) {
    var _b, _c, _d;
    var children = _a.children, _e = _a.attach, attach = _e === void 0 ? 'left' : _e, forwardRef = _a.forwardRef, activeStyles = _a.activeStyles, onOpen = _a.onOpen, onClose = _a.onClose, _f = _a.state, state = _f === void 0 ? null : _f, _g = _a.style, style = _g === void 0 ? null : _g, props = __rest(_a, ["children", "attach", "forwardRef", "activeStyles", "onOpen", "onClose", "state", "style"]);
    var _h = __read(useStateTransmorphic(state), 2), active = _h[0], activeSet = _h[1];
    var _j = __read(useLayoutStyles(style), 2), layoutStyles = _j[0], displayStyles = _j[1];
    var sidebarRef = useRef(null);
    var _k = __read(useState(0), 2), sidebarWidth = _k[0], setSidebarWidth = _k[1];
    useLayoutEffect(function () {
        var _a, _b;
        setSidebarWidth((_b = (_a = sidebarRef === null || sidebarRef === void 0 ? void 0 : sidebarRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
    }, [(_b = sidebarRef === null || sidebarRef === void 0 ? void 0 : sidebarRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth]);
    // Extract the active Sidebar.Item's children.
    var panel = (_d = (_c = children.filter(function (_a) {
        var props = _a.props;
        return props.label === active;
    })[0]) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.children;
    // Pass attach prop to Sidebar.Items and bind their onClick.
    function toggle(child) {
        return function (event) {
            var _a, _b;
            (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
            if (active === child.props.label) {
                close();
            }
            if (active !== child.props.label) {
                if (active)
                    onClose === null || onClose === void 0 ? void 0 : onClose(active);
                onOpen === null || onOpen === void 0 ? void 0 : onOpen(child.props.label);
                activeSet(child.props.label);
            }
        };
    }
    function close() {
        if (active)
            onClose === null || onClose === void 0 ? void 0 : onClose(active);
        activeSet(false);
    }
    function cloneChild(child, key) {
        return cloneElement(child, {
            attach: attach === 'left' ? 'right' : 'left',
            onClick: toggle(child),
            key: key,
            isActive: active === child.props.label,
            activeStyles: activeStyles,
        });
    }
    children = children.map(cloneChild);
    return (React__default.createElement("div", { style: __assign({ height: '100%' }, layoutStyles), ref: forwardRef },
        React__default.createElement(SidebarStyled, __assign({ ref: sidebarRef, attach: attach, style: displayStyles }, props), children),
        React__default.createElement(PanelStyled, { attach: attach, visible: panel, offset: sidebarWidth },
            React__default.createElement(Dismiss, { "aria-label": "Dismiss", format: "basic", icon: React__default.createElement(DismissX, null), onClick: close, variant: "minimalTransparent" }),
            panel)));
}

export { Sidebar };