ydb-embedded-ui 3.2.0 → 3.2.1

package/dist/components/AsideNavigation/AsideHeaderTooltip/AsideHeaderTooltip.scss

@@ -1,16 +0,0 @@
-.nv-aside-header-tooltip {
-    &.yc-popup {
-        border: none;
-        box-shadow: none;
-
-        animation-name: none;
-    }
-
-    &__text {
-        padding: 6px 12px;
-
-        color: var(--yc-color-text-light-primary);
-        border-radius: 4px;
-        background-color: var(--yc-color-base-float-heavy);
-    }
-}

package/dist/components/AsideNavigation/AsideHeaderTooltip/AsideHeaderTooltip.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import block from 'bem-cn-lite';
-import {Popup, PopupPlacement} from '@gravity-ui/uikit';
-import './AsideHeaderTooltip.scss';
-
-const b = block('nv-aside-header-tooltip');
-const popupPlacement: PopupPlacement = ['right'];
-
-export interface AsideHeaderTooltipProps {
-    anchor: HTMLElement | null;
-    text: React.ReactNode;
-}
-
-export const AsideHeaderTooltip: React.FC<AsideHeaderTooltipProps> = ({anchor, text}) => {
-    const anchorRef = React.useRef(anchor);
-
-    React.useEffect(() => {
-        anchorRef.current = anchor;
-    }, [anchor]);
-    if (!anchor) {
-        return null;
-    }
-
-    return (
-        <Popup
-            className={b()}
-            open={true}
-            anchorRef={anchorRef}
-            placement={popupPlacement}
-            disableEscapeKeyDown={true}
-            disableOutsideClick={true}
-            disableLayer={true}
-        >
-            <div className={b('text')}>{text}</div>
-        </Popup>
-    );
-};

package/dist/components/AsideNavigation/CompositeBar/CompositeBar.scss

@@ -1,108 +0,0 @@
-.nv-composite-bar {
-    $class: &;
-
-    flex: 1 0 auto;
-
-    width: 100%;
-    min-height: 40px;
-
-    &__root-menu-item {
-        cursor: pointer;
-    }
-
-    &__root-menu-item.yc-list__item_selected:not(&__root-menu-item_compact) {
-        background-color: var(--yc-color-base-selection);
-    }
-
-    & &__root-menu-item_compact#{&}__root-menu-item {
-        background-color: transparent;
-    }
-
-    &__menu-item {
-        display: flex;
-        align-items: center;
-
-        width: 100%;
-        height: 100%;
-    }
-
-    &__menu-icon-place {
-        display: flex;
-        flex-shrink: 0;
-        justify-content: center;
-        align-items: center;
-
-        width: var(--nv-aside-header-min-width);
-        height: 100%;
-    }
-
-    #{$class} &__menu-icon {
-        color: var(--yc-color-text-misc);
-    }
-
-    &__menu-title {
-        overflow: hidden;
-
-        width: 100%;
-
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    &__root-collapse-item {
-        cursor: pointer;
-    }
-
-    &__collapse-item {
-        display: flex;
-        align-items: center;
-
-        width: 100%;
-        height: 100%;
-        padding: 0 16px;
-    }
-
-    &__collapse-items-popup-content {
-        padding: 4px 0;
-    }
-
-    &__link {
-        display: flex;
-        align-items: center;
-
-        width: 100%;
-        height: 100%;
-
-        &,
-        &:hover,
-        &:active,
-        &:visited,
-        &:focus {
-            text-decoration: none;
-
-            color: inherit;
-            outline: none;
-        }
-    }
-
-    &__btn-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        width: 100%;
-        height: 100%;
-
-        @at-root .yc-list__item_active &:not(&_current) {
-            background-color: var(--yc-color-base-simple-hover);
-        }
-
-        &::before {
-            border-radius: 0;
-        }
-
-        &_current {
-            background-color: var(--yc-color-base-selection);
-        }
-    }
-}

package/dist/components/AsideNavigation/CompositeBar/CompositeBar.tsx

@@ -1,282 +0,0 @@
-import React from 'react';
-import block from 'bem-cn-lite';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import {List, Icon, Popup, PopupPlacement} from '@gravity-ui/uikit';
-
-import {AsideHeaderMenuItem} from '../types';
-import i18n from '../i18n';
-import {AsideHeaderTooltip} from '../AsideHeaderTooltip/AsideHeaderTooltip';
-
-import dotsIcon from '../../../assets/icons/dots.svg';
-
-import './CompositeBar.scss';
-
-const b = block('nv-composite-bar');
-export const ITEM_HEIGHT = 40;
-const POPUP_ITEM_HEIGHT = 28;
-const COLLAPSE_ITEM_ID = 'nv-collapse-item-id';
-const popupPlacement: PopupPlacement = ['right-start', 'right-end', 'right'];
-
-const getSelectedItemIndex = (items: AsideHeaderMenuItem[]) => {
-    const index = items.findIndex(({current}) => Boolean(current));
-    return index === -1 ? undefined : index;
-};
-
-interface ItemProps {
-    item: AsideHeaderMenuItem;
-    isCompact: boolean;
-    collapseItems: AsideHeaderMenuItem[] | null;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-    onClick?: () => void;
-}
-
-const Item: React.FC<ItemProps> = ({item, isCompact, collapseItems, onClick}) => {
-    const [tooltipAnchor, setTooltipAnchor] = React.useState<HTMLDivElement | null>(null);
-    const [open, toggleOpen] = React.useState<boolean>(false);
-    const popupAnchor = React.useRef<HTMLDivElement>(null);
-
-    const tooltipText = item.tooltipText || item.title;
-    const iconSize = item.iconSize || 24;
-    const isCollapseItem = item.id === COLLAPSE_ITEM_ID;
-
-    const node = (
-        <div
-            className={b('menu-item')}
-            ref={popupAnchor}
-            onClick={() => {
-                if (typeof item.onItemClick === 'function') {
-                    item.onItemClick(item, false);
-                }
-                if (isCollapseItem) {
-                    toggleOpen(!open);
-                    setTooltipAnchor(null);
-                }
-                onClick?.();
-            }}
-        >
-            <div className={b('menu-icon-place')}>
-                {isCompact ? (
-                    <React.Fragment>
-                        <div
-                            onMouseEnter={(event) => !open && setTooltipAnchor(event.currentTarget)}
-                            onMouseLeave={() => setTooltipAnchor(null)}
-                            className={b('btn-icon', {current: Boolean(item.current)})}
-                        >
-                            {item.icon && (
-                                <Icon data={item.icon} size={iconSize} className={b('menu-icon')} />
-                            )}
-                        </div>
-                        <AsideHeaderTooltip anchor={tooltipAnchor} text={tooltipText} />
-                    </React.Fragment>
-                ) : (
-                    item.icon && (
-                        <Icon data={item.icon} size={iconSize} className={b('menu-icon')} />
-                    )
-                )}
-            </div>
-            <div className={b('menu-title')} title={item.title}>
-                {item.title}
-            </div>
-            {isCollapseItem && Array.isArray(collapseItems) && Boolean(popupAnchor.current) && (
-                <Popup
-                    placement={popupPlacement}
-                    open={open}
-                    anchorRef={popupAnchor}
-                    onClose={() => toggleOpen(false)}
-                >
-                    <div className={b('collapse-items-popup-content')}>
-                        <List
-                            itemClassName={b('root-collapse-item')}
-                            items={collapseItems}
-                            selectedItemIndex={getSelectedItemIndex(collapseItems)}
-                            itemHeight={POPUP_ITEM_HEIGHT}
-                            itemsHeight={collapseItems.length * POPUP_ITEM_HEIGHT}
-                            virtualized={false}
-                            filterable={false}
-                            sortable={false}
-                            renderItem={(collapseItem) => {
-                                const collapseNode = (
-                                    <div
-                                        className={b('collapse-item')}
-                                        onClick={() => {
-                                            if (typeof collapseItem.onItemClick === 'function') {
-                                                collapseItem.onItemClick(collapseItem, true);
-                                            }
-                                        }}
-                                    >
-                                        {collapseItem.title}
-                                    </div>
-                                );
-                                if (typeof collapseItem.itemWrapper === 'function') {
-                                    return collapseItem.itemWrapper(
-                                        collapseNode,
-                                        collapseItem,
-                                        true,
-                                        isCompact,
-                                    );
-                                }
-
-                                return collapseItem.link ? (
-                                    <a href={collapseItem.link} className={b('link')}>
-                                        {collapseNode}
-                                    </a>
-                                ) : (
-                                    collapseNode
-                                );
-                            }}
-                        />
-                    </div>
-                </Popup>
-            )}
-        </div>
-    );
-
-    if (typeof item.itemWrapper === 'function') {
-        return item.itemWrapper(node, item, false, isCompact) as React.ReactElement;
-    }
-
-    return item.link ? (
-        <a href={item.link} className={b('link')}>
-            {node}
-        </a>
-    ) : (
-        node
-    );
-};
-Item.displayName = 'Item';
-
-interface CompositeBarProps {
-    items: AsideHeaderMenuItem[];
-    isCompact: boolean;
-    onClickItem?: (item: AsideHeaderMenuItem) => void;
-}
-
-interface CompositeBarState {
-    height: string | number;
-    activeItemIndex?: number;
-}
-
-interface OnResizeArgs {
-    width: number;
-    height: number;
-}
-
-export class CompositeBar extends React.Component<CompositeBarProps> {
-    render() {
-        return (
-            <React.Fragment>
-                <div className={b()} style={{height: this.state.height}}>
-                    {this.props.items.length !== 0 && (
-                        <AutoSizer onResize={this.onResize}>
-                            {({width, height}) => {
-                                const style = {
-                                    width,
-                                    height,
-                                };
-                                return <div style={style}>{this.renderMenu(height)}</div>;
-                            }}
-                        </AutoSizer>
-                    )}
-                </div>
-            </React.Fragment>
-        );
-    }
-
-    state: CompositeBarState = {
-        height: 'auto',
-        activeItemIndex: undefined,
-    };
-
-    private currentItemsCount = 0;
-    private skipCheckResize = false;
-
-    private onResize = ({height}: OnResizeArgs) => {
-        if (this.skipCheckResize) {
-            this.skipCheckResize = false;
-            return;
-        }
-
-        const desiredHeight = this.currentItemsCount * ITEM_HEIGHT;
-        if (height < desiredHeight) {
-            if (this.state.height !== desiredHeight) {
-                this.skipCheckResize = true;
-                this.setState({height: desiredHeight});
-            }
-        } else if (this.state.height !== 'auto') {
-            this.skipCheckResize = true;
-            this.setState({height: 'auto'});
-        }
-    };
-
-    private renderMenu(height: number) {
-        const {items, isCompact, onClickItem} = this.props;
-        const capacity = Math.max(1, Math.floor(height / ITEM_HEIGHT));
-        let listItems: AsideHeaderMenuItem[] | null;
-        let collapseItems: AsideHeaderMenuItem[] | null = null;
-        if (capacity === 1) {
-            listItems = items.filter((item) => item.pinned);
-            collapseItems = [...items.filter((item) => !item.pinned)];
-            if (collapseItems.length > 0) {
-                listItems.push(this.getCollapseItem());
-            }
-        } else if (capacity < items.length) {
-            const extraCount = items.filter(
-                (item, idx) => item.pinned && idx >= capacity - 1,
-            ).length;
-            const pinnedFlag = items.reduceRight(
-                (acc, curr, idx) => {
-                    const useExtraCount = !curr.pinned && idx < capacity - 1 && acc.extraCount > 0;
-                    acc.flags.unshift(curr.pinned || useExtraCount);
-                    return {
-                        flags: acc.flags,
-                        extraCount: acc.extraCount - Number(useExtraCount),
-                    };
-                },
-                {flags: [] as boolean[], extraCount},
-            ).flags;
-            listItems = items.filter(
-                (item, idx) => item.pinned || (idx < capacity - 1 && !pinnedFlag[idx]),
-            );
-            collapseItems = items.filter(
-                (item, idx) => !item.pinned && (idx >= capacity - 1 || pinnedFlag[idx]),
-            );
-            if (collapseItems.length > 0) {
-                listItems.push(this.getCollapseItem());
-            }
-        } else {
-            listItems = [...items];
-        }
-        this.currentItemsCount = listItems.length;
-
-        return (
-            <List
-                items={listItems}
-                selectedItemIndex={isCompact ? undefined : getSelectedItemIndex(listItems)}
-                itemHeight={ITEM_HEIGHT}
-                itemClassName={b('root-menu-item', {compact: isCompact})}
-                itemsHeight={listItems.length * ITEM_HEIGHT}
-                virtualized={false}
-                filterable={false}
-                sortable={false}
-                renderItem={(item) => (
-                    <Item
-                        item={item}
-                        isCompact={isCompact}
-                        collapseItems={collapseItems}
-                        onClick={() => onClickItem?.(item)}
-                    />
-                )}
-            />
-        );
-    }
-
-    private getCollapseItem(): AsideHeaderMenuItem {
-        return {
-            id: COLLAPSE_ITEM_ID,
-            title: i18n('label_more'),
-            icon: dotsIcon,
-            iconSize: 16,
-        };
-    }
-}

package/dist/components/AsideNavigation/Content/Content.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-export type RenderContentType = (data: {size: number}) => React.ReactNode;
-
-interface ContentProps {
-    renderContent?: RenderContentType;
-    className?: string;
-    size: number;
-}
-
-interface RenderContentProps {
-    renderContent: RenderContentType;
-    size: number;
-}
-
-const RenderContent: React.FC<RenderContentProps> = React.memo(({renderContent, size}) => {
-    return <React.Fragment>{renderContent({size})}</React.Fragment>;
-});
-
-RenderContent.displayName = 'RenderContent';
-
-export const Content: React.FC<ContentProps> = ({size, className, renderContent}) => {
-    return (
-        <div
-            className={className}
-            style={{
-                ...({'--nv-aside-header-size': `${size}px`} as React.CSSProperties),
-            }}
-        >
-            {typeof renderContent === 'function' && (
-                <RenderContent size={size} renderContent={renderContent} />
-            )}
-        </div>
-    );
-};

package/dist/components/AsideNavigation/Drawer/Drawer.scss

@@ -1,76 +0,0 @@
-.nv-drawer {
-    &__item {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-
-        height: 100%;
-
-        background-color: var(--yc-color-base-background);
-        will-change: transform;
-    }
-
-    &__item-transition-enter {
-        transform: translate(-100%, 0);
-    }
-
-    &__item-transition-enter-active {
-        transition: transform 300ms;
-        transform: translate(0, 0);
-    }
-
-    &__item-transition-enter-done {
-        // it is hack to prevent text blur after animation in any browsers
-        filter: blur(0px);
-
-        transform: translateZ(0);
-    }
-
-    &__item-transition-exit {
-        transform: translate(0, 0);
-    }
-
-    &__item-transition-exit-active {
-        transition: transform 300ms;
-        transform: translate(-100%, 0);
-    }
-
-    &__item-transition-exit-done {
-        visibility: hidden;
-    }
-
-    &__veil {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
-        background-color: var(--yc-color-sfx-veil);
-    }
-
-    &__veil-transition-enter {
-        opacity: 0;
-    }
-
-    &__veil-transition-enter-active {
-        opacity: 1;
-
-        transition: opacity 300ms;
-    }
-
-    &__veil-transition-exit {
-        opacity: 1;
-    }
-
-    &__veil-transition-exit-active {
-        opacity: 0;
-
-        transition: opacity 300ms;
-    }
-
-    &__veil-transition-exit-done {
-        visibility: hidden;
-    }
-}

package/dist/components/AsideNavigation/Drawer/Drawer.tsx

@@ -1,134 +0,0 @@
-import React from 'react';
-import block from 'bem-cn-lite';
-import {CSSTransition, Transition} from 'react-transition-group';
-import './Drawer.scss';
-
-const b = block('nv-drawer');
-const TIMEOUT = 300;
-
-export interface DrawerItemProps {
-    visible: boolean;
-    className?: string;
-}
-
-export const DrawerItem: React.FC<DrawerItemProps> = ({className, visible, children}) => {
-    return (
-        <CSSTransition
-            in={visible}
-            timeout={TIMEOUT}
-            unmountOnExit={true}
-            classNames={b('item-transition')}
-        >
-            <div className={b('item', className)}>{children}</div>
-        </CSSTransition>
-    );
-};
-
-type DrawerChild = React.ReactElement<DrawerItemProps>;
-
-export interface DrawerProps {
-    children: DrawerChild | DrawerChild[];
-    preventSrcollBody?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    onVeilClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onEscape?: () => void;
-}
-
-export const Drawer: React.FC<DrawerProps> = ({
-    className,
-    children,
-    style,
-    onVeilClick,
-    onEscape,
-    preventSrcollBody = true,
-}) => {
-    let someItemVisible = false;
-    React.Children.forEach(children, (child) => {
-        const childElem = child as DrawerChild;
-        if (childElem.type === DrawerItem) {
-            const childVisible = Boolean(childElem.props.visible);
-            if (childVisible) {
-                someItemVisible = true;
-            }
-        }
-    });
-
-    React.useEffect(() => {
-        function onKeyDown(event: KeyboardEvent) {
-            if (event.key === 'Escape') {
-                onEscape?.();
-            }
-        }
-        if (someItemVisible) {
-            window.addEventListener('keydown', onKeyDown);
-        }
-        return () => {
-            window.removeEventListener('keydown', onKeyDown);
-        };
-    }, [onEscape, someItemVisible]);
-
-    React.useEffect(() => {
-        const prevPreventSrcollBody = preventSrcollBody;
-        const cleanupPreventScrollBody = () => {
-            document.body.style.paddingRight = '';
-            document.body.style.paddingBottom = '';
-            document.body.style.overflow = '';
-        };
-        const setPreventScrollBody = () => {
-            const vw = window.innerWidth - document.documentElement.clientWidth;
-            const hw = window.innerHeight - document.documentElement.clientHeight;
-            document.body.style.paddingRight = vw + 'px';
-            document.body.style.paddingBottom = hw + 'px';
-            document.body.style.overflow = 'hidden';
-        };
-        if (prevPreventSrcollBody) {
-            if (someItemVisible) {
-                setPreventScrollBody();
-            } else {
-                cleanupPreventScrollBody();
-            }
-        }
-        return () => {
-            if (prevPreventSrcollBody) {
-                cleanupPreventScrollBody();
-            }
-        };
-    }, [someItemVisible, preventSrcollBody]);
-
-    return (
-        <Transition
-            in={someItemVisible}
-            timeout={{enter: 0, exit: TIMEOUT}}
-            mountOnEnter
-            unmountOnExit
-        >
-            {(state) => {
-                const childrenVisible = someItemVisible && state === 'entered';
-                return (
-                    <div className={b(null, className)} style={style}>
-                        <CSSTransition
-                            in={childrenVisible}
-                            timeout={TIMEOUT}
-                            unmountOnExit={true}
-                            classNames={b('veil-transition')}
-                        >
-                            <div className={b('veil')} onClick={onVeilClick} />
-                        </CSSTransition>
-                        {React.Children.map(children, (child) => {
-                            const childElem = child as DrawerChild;
-                            if (childElem.type === DrawerItem) {
-                                const childVisible = Boolean(childElem.props.visible);
-                                return React.cloneElement(childElem, {
-                                    ...childElem.props,
-                                    visible: childVisible && childrenVisible,
-                                });
-                            }
-                            return child;
-                        })}
-                    </div>
-                );
-            }}
-        </Transition>
-    );
-};

package/dist/components/AsideNavigation/Drawer/index.ts

@@ -1 +0,0 @@
-export * from './Drawer';