ydb-embedded-ui 3.1.0 → 3.2.1

package/dist/components/AsideNavigation/Logo/Logo.scss

@@ -1,43 +0,0 @@
-.nv-aside-header-logo {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-
-    height: 32px;
-    margin: 12px 0;
-
-    font-family: 'Rubik', sans-serif;
-
-    &__logo-btn-place {
-        display: flex;
-        flex-shrink: 0;
-        justify-content: center;
-        align-items: center;
-
-        width: var(--nv-aside-header-min-width);
-    }
-
-    &__logo {
-        font-family: 'Rubik', sans-serif;
-        font-size: 16px;
-        line-height: 20px;
-        vertical-align: middle;
-    }
-
-    &__logo-link {
-        &,
-        &:hover,
-        &:active,
-        &:visited,
-        &:focus {
-            text-decoration: none;
-
-            color: inherit;
-            outline: none;
-        }
-    }
-
-    .yc-root &__btn-logo.button2_theme_flat.button2_hovered_yes::before {
-        background-color: transparent;
-    }
-}

package/dist/components/AsideNavigation/Logo/Logo.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import block from 'bem-cn-lite';
-import {Button, Icon} from '@gravity-ui/uikit';
-
-import './Logo.scss';
-
-const b = block('nv-aside-header-logo');
-
-export interface LogoProps {
-    onLogoIconClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    logoText: (() => React.ReactNode) | string;
-    logoIcon: SVGIconData;
-    logoIconClassName?: string;
-    logoIconSize?: string | number;
-    logoTextSize?: string | number;
-    logoHref?: string;
-    isCompact: boolean;
-    logoWrapper?: (node: React.ReactNode, isCompact: boolean) => React.ReactNode;
-}
-
-export const Logo: React.FC<LogoProps> = ({
-    onLogoIconClick,
-    logoText,
-    logoIcon,
-    logoIconSize = 24,
-    logoTextSize = 16,
-    logoHref = '/',
-    logoIconClassName,
-    isCompact,
-    logoWrapper,
-}) => {
-    const hasClickHandler = typeof onLogoIconClick === 'function';
-    const hasLogoWrapper = typeof logoWrapper === 'function';
-
-    const linkProps = hasClickHandler
-        ? {}
-        : {
-              target: '_self',
-              href: logoHref,
-          };
-
-    const button = (
-        <Button
-            view="flat"
-            size="l"
-            className={b('btn-logo')}
-            component={hasLogoWrapper ? 'span' : undefined}
-            onClick={onLogoIconClick}
-            {...linkProps}
-        >
-            <Icon data={logoIcon} size={logoIconSize} className={logoIconClassName} />
-        </Button>
-    );
-
-    let logo: React.ReactNode;
-
-    if (typeof logoText === 'function') {
-        logo = logoText();
-    } else {
-        logo = (
-            <div className={b('logo')} style={{fontSize: logoTextSize}}>
-                {logoText}
-            </div>
-        );
-    }
-
-    return (
-        <div className={b()}>
-            <div className={b('logo-btn-place')}>
-                {typeof logoWrapper === 'function' ? logoWrapper(button, isCompact) : button}
-            </div>
-            {!isCompact &&
-                (typeof logoWrapper === 'function' ? (
-                    logoWrapper(logo, isCompact)
-                ) : (
-                    <a {...linkProps} className={b('logo-link')} onClick={onLogoIconClick}>
-                        {logo}
-                    </a>
-                ))}
-        </div>
-    );
-};

package/dist/components/AsideNavigation/Settings/README.md

@@ -1,92 +0,0 @@
-### Settings
-
-Компонент для отображения настроек сервиса. Поддерживает
-
-- одно-уровневую и двух-уровневую группировки настроек;
-- поиск по заголовкам настроек;
-- отображение состояния загрузки;
-
-### PropTypes
-
-#### Settings
-
-| Property       | Type     | Required | Default | Description                                                              |
-| :------------- | :------- | :------: | :------ | :----------------------------------------------------------------------- |
-| loading        | boolean  |          |         | флаг неготовности настроек для отображения                               |
-| renderLoading  | Function |          |         | Содержимое компонента на время загрузки                                  |
-| renderNotFound | Function |          |         | Содержимое страницы при отсутствии найденных элементов                   |
-| initialPage    | string   |          |         | Активный раздел настроек по умолчанию в формате "/ид группы/ид страницы" |
-| onPageChange   | Function |          |         | Обработчик события изменения активной страницы настроек                  |
-
-#### Settings.Group
-
-| Property   | Type   | Required | Default | Description                              |
-| :--------- | :----- | :------: | :------ | :--------------------------------------- |
-| id         | string |          |         | Уникальный идентификатор группы настроек |
-| groupTitle | string |   true   |         | заголовок группы страниц настроек        |
-
-#### Settings.Page
-
-| Property | Type      | Required | Default | Description                                                |
-| :------- | :-------- | :------: | :------ | :--------------------------------------------------------- |
-| id       | string    |          |         | Уникальный идентификатор страницы настроек в рамках группы |
-| title    | string    |   true   |         | заголовок страницы настроек                                |
-| icon     | IconProps |   true   |         | данные иконки, отображаемой в меню                         |
-
-#### Settings.Section
-
-| Property  | Type      | Required | Default | Description                            |
-| :-------- | :-------- | :------: | :------ | :------------------------------------- |
-| title     | string    |   true   |         | заголовок раздела настроек на странице |
-| header    | ReactNode |          |         | Шапка секции                           |
-| withBadge | boolean   |          |         | Рисует бэйдж у секции и меню           |
-
-#### Settings.Item
-
-| Property             | Type            | Required | Default  | Description                                 |
-| :------------------- | :-------------- | :------: | :------- | :------------------------------------------ |
-| title                | string          |   true   |          | заголовок настройки                         |
-| renderTitleComponent | Function        |          |          | Произвольное содержимое заголовка настройки |
-| align                | 'top', 'center' |          | 'center' | выравнивание заголовка и контрола           |
-
-### Использование
-
-Смотрите в storybook пример `src/strories/demo/SettingsDemo`.
-
-### Описание
-
-Меню настроек может быть одно-уровневым:
-
-```jsx
-<Settings>
-  <Settings.Page title="Оформление">...</Settings.Page>
-  <Settings.Page title="Коммуникации">...</Settings.Page>
-</Settings>
-```
-
-или двух-уровневым:
-
-```jsx
-<Settings>
-  <Settings.Group groupTitle="Arcanum">
-    <Settings.Page title="Оформление">...</Settings.Page>
-    <Settings.Page title="Коммуникации">...</Settings.Page>
-  </Settings.Group>
-  <Settings.Group groupTitle="General">
-    <Settings.Page title="Оформление">...</Settings.Page>
-    <Settings.Page title="Коммуникации">...</Settings.Page>
-  </Settings.Group>
-</Settings>
-```
-
-Страницы настроек делятся на секции с наборами настроек:
-
-```jsx
-<Settings.Page title="Features" icon={'...'}>
-  <Settings.Section title="Common">
-    <Settings.Item title="Default VCS">...</Settings.Item>
-    <Settings.Item title="Search root">...</Settings.Item>
-  </Settings.Section>
-  <Settings.Section title="Beta functionality">...</Settings.Section>
-</Settings.Page>
-```

package/dist/components/AsideNavigation/Settings/Settings.scss

@@ -1,128 +0,0 @@
-.nv-settings {
-    display: grid;
-    grid-template-columns: 216px 1fr;
-
-    width: 834px;
-    height: 100%;
-
-    &_loading {
-        grid-template-columns: auto;
-    }
-
-    &__loader {
-        align-self: center;
-        justify-self: center;
-    }
-
-    &__not-found {
-        display: grid;
-        align-items: center;
-        justify-items: center;
-
-        height: 100%;
-    }
-
-    &__menu {
-        border-right: 1px solid var(--yc-color-line-generic);
-    }
-
-    &__heading {
-        margin: 20px 20px 0;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
-    }
-
-    &__search {
-        margin: 12px 20px 16px;
-    }
-
-    &__page {
-        overflow-y: auto;
-
-        padding: 20px;
-    }
-
-    &__section {
-        &-heading {
-            margin: 0;
-
-            font-size: var(--yc-text-body-2-font-size);
-            font-weight: 500;
-            line-height: var(--yc-text-body-2-line-height);
-
-            &_badge {
-                position: relative;
-
-                display: inline-block;
-
-                &::after {
-                    position: absolute;
-                    top: 1px;
-                    right: -8px;
-
-                    display: block;
-
-                    width: 6px;
-                    height: 6px;
-
-                    content: '';
-
-                    border-radius: 50%;
-                    background-color: var(--yc-color-text-danger);
-                }
-            }
-        }
-
-        &-item {
-            margin-top: 24px;
-        }
-
-        & + & {
-            margin-top: 32px;
-        }
-    }
-
-    &__item {
-        display: grid;
-        grid-template-columns: 216px 1fr;
-        justify-items: start;
-
-        &_align_top {
-            align-items: start;
-        }
-
-        &_align_center {
-            align-items: center;
-        }
-    }
-
-    &__item-heading {
-        &_badge {
-            position: relative;
-
-            &::after {
-                position: absolute;
-                top: 1px;
-                right: -10px;
-
-                display: block;
-
-                width: 4px;
-                height: 4px;
-
-                content: '';
-
-                border-radius: 50%;
-                background-color: var(--yc-color-text-danger);
-            }
-        }
-    }
-
-    &__found {
-        font-weight: 500;
-
-        background: var(--yc-color-base-selection);
-    }
-}

package/dist/components/AsideNavigation/Settings/Settings.tsx

@@ -1,270 +0,0 @@
-import React from 'react';
-import block from 'bem-cn-lite';
-import i18n from './i18n';
-
-import {IconProps, Loader} from '@gravity-ui/uikit';
-import {SettingsSearch} from './SettingsSearch/SettingsSearch';
-import {SettingsMenu, SettingsMenuItems, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';
-
-import {getSettingsFromChildren} from './collect-settings';
-import {filterSettings} from './filter-settings';
-import {escapeStringForRegExp} from './helpers';
-
-import './Settings.scss';
-
-const b = block('nv-settings');
-
-interface SettingsProps {
-    initialPage?: string;
-    onPageChange?: (page: string | undefined) => void;
-    children: React.ReactNode;
-    renderNotFound?: () => React.ReactNode;
-    renderLoading?: () => React.ReactNode;
-    loading?: boolean;
-}
-
-interface SettingsGroupProps {
-    id?: string;
-    groupTitle: string;
-    children: React.ReactNode;
-}
-
-interface SettingsPageProps {
-    id?: string;
-    title: string;
-    icon: IconProps;
-    children: React.ReactNode;
-}
-
-interface SettingsSectionProps {
-    title: string;
-    header?: React.ReactNode;
-    children: React.ReactNode;
-    withBadge?: boolean;
-}
-
-interface SettingsItemProps {
-    title: string;
-    renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
-    align?: 'top' | 'center';
-    children: React.ReactNode;
-    withBadge?: boolean;
-}
-
-const ItemContext = React.createContext<React.ReactNode>(undefined);
-
-export function Settings({
-    initialPage,
-    onPageChange,
-    children,
-    renderNotFound,
-    loading,
-    renderLoading,
-}: SettingsProps) {
-    const [search, setSearch] = React.useState('');
-    const [selectedPage, setCurrentPage] = React.useState<string | undefined>(initialPage);
-    const prevSelectedPageRef = React.useRef(initialPage);
-    const searchInputRef = React.useRef<HTMLInputElement>(null);
-    const menuRef = React.useRef<SettingsMenuInstance>(null);
-
-    React.useEffect(() => {
-        menuRef.current?.clearFocus();
-    }, [search]);
-
-    React.useEffect(() => {
-        const handler = () => {
-            menuRef.current?.clearFocus();
-        };
-        window.addEventListener('click', handler);
-        return () => {
-            window.removeEventListener('click', handler);
-        };
-    }, []);
-
-    if (selectedPage !== prevSelectedPageRef.current) {
-        onPageChange?.(selectedPage);
-        prevSelectedPageRef.current = selectedPage;
-    }
-
-    if (loading) {
-        return (
-            <div className={b({loading: true})}>
-                {typeof renderLoading === 'function' ? (
-                    renderLoading()
-                ) : (
-                    <Loader className={b('loader')} size="m" />
-                )}
-            </div>
-        );
-    }
-
-    const {menu, pages} = getSettingsFromChildren(children);
-    filterSettings(pages, search, prepareTitle);
-
-    const settingsMenu: SettingsMenuItems = [];
-    for (const fistLevel of menu) {
-        if ('groupTitle' in fistLevel) {
-            settingsMenu.push({
-                groupTitle: fistLevel.groupTitle,
-                items: fistLevel.items.map((item) => ({
-                    id: item.pageId,
-                    title: item.title,
-                    icon: item.icon,
-                    disabled: pages[item.pageId].hide,
-                    withBadge: item.withBadge,
-                })),
-            });
-        } else {
-            settingsMenu.push({
-                id: fistLevel.pageId,
-                title: fistLevel.title,
-                icon: fistLevel.icon,
-                disabled: pages[fistLevel.pageId].hide,
-                withBadge: fistLevel.withBadge,
-            });
-        }
-    }
-
-    let activePage = selectedPage;
-    if (!activePage || pages[activePage]?.hide) {
-        activePage = undefined;
-        for (const firstLevel of settingsMenu) {
-            if ('groupTitle' in firstLevel) {
-                for (const item of firstLevel.items) {
-                    if (!item.disabled) {
-                        activePage = item.id;
-                        break;
-                    }
-                }
-                if (activePage) {
-                    break;
-                }
-            } else if (!firstLevel.disabled) {
-                activePage = firstLevel.id;
-                break;
-            }
-        }
-    }
-
-    if (activePage !== selectedPage) {
-        setCurrentPage(activePage);
-    }
-
-    return (
-        <div className={b()}>
-            <div
-                className={b('menu')}
-                onClick={() => {
-                    if (searchInputRef.current) {
-                        searchInputRef.current.focus();
-                    }
-                }}
-                onKeyDown={(event) => {
-                    if (menuRef.current) {
-                        if (menuRef.current.handleKeyDown(event)) {
-                            event.preventDefault();
-                        }
-                    }
-                }}
-            >
-                <h2 className={b('heading')}>{i18n('heading_settings')}</h2>
-                <SettingsSearch
-                    inputRef={searchInputRef}
-                    className={b('search')}
-                    onChange={setSearch}
-                />
-                <SettingsMenu
-                    ref={menuRef}
-                    items={settingsMenu}
-                    onChange={setCurrentPage}
-                    activeItem={activePage}
-                />
-            </div>
-            <div className={b('page')}>
-                {activePage ? (
-                    pages[activePage].sections.map((section) => {
-                        if (section.hide) {
-                            return null;
-                        }
-                        return (
-                            <div key={section.title} className={b('section')}>
-                                <h3 className={b('section-heading', {badge: section.withBadge})}>
-                                    {section.title}
-                                </h3>
-                                {section.header ? section.header : null}
-                                {section.items.map(({hide, title, children, titleComponent}) =>
-                                    hide ? null : (
-                                        <div key={title} className={b('section-item')}>
-                                            <ItemContext.Provider value={titleComponent}>
-                                                {children}
-                                            </ItemContext.Provider>
-                                        </div>
-                                    ),
-                                )}
-                            </div>
-                        );
-                    })
-                ) : typeof renderNotFound === 'function' ? (
-                    renderNotFound()
-                ) : (
-                    <div className={b('not-found')}>{i18n('not-found')}</div>
-                )}
-            </div>
-        </div>
-    );
-}
-
-Settings.Group = function SettingsGroup({children}: SettingsGroupProps) {
-    return <React.Fragment>{children}</React.Fragment>;
-};
-
-Settings.Page = function SettingsPage({children}: SettingsPageProps) {
-    return <React.Fragment>{children}</React.Fragment>;
-};
-
-Settings.Section = function SettingsSection({children}: SettingsSectionProps) {
-    return <React.Fragment>{children}</React.Fragment>;
-};
-
-Settings.Item = function SettingsItem({
-    title,
-    children,
-    align = 'center',
-    withBadge,
-}: SettingsItemProps) {
-    const contextTitle = React.useContext(ItemContext);
-    return (
-        <div className={b('item', {align})}>
-            <label className={b('item-heading', {badge: withBadge})}>{contextTitle ?? title}</label>
-            <div>{children}</div>
-        </div>
-    );
-};
-
-function prepareTitle(string: string, search: string) {
-    let temp = string.slice(0);
-    const title: React.ReactNode[] = [];
-    const parts = escapeStringForRegExp(search).split(' ').filter(Boolean);
-    let key = 0;
-    for (const part of parts) {
-        const regex = new RegExp(part, 'ig');
-        const match = regex.exec(temp);
-        if (match) {
-            const m = match[0];
-            const i = match.index;
-            if (i > 0) {
-                title.push(temp.slice(0, i));
-            }
-            title.push(
-                <strong key={key++} className={b('found')}>
-                    {m}
-                </strong>,
-            );
-            temp = temp.slice(i + m.length);
-        }
-    }
-    if (temp) {
-        title.push(temp);
-    }
-    return title;
-}

package/dist/components/AsideNavigation/Settings/SettingsMenu/SettingsMenu.scss

@@ -1,78 +0,0 @@
-.nv-settings-menu {
-    &__group {
-        &-heading {
-            display: inline-block;
-
-            margin-bottom: 12px;
-            padding: 0 20px;
-
-            font-weight: 500;
-            line-height: 18px;
-        }
-
-        & + & {
-            margin-top: 24px;
-        }
-    }
-
-    &__item {
-        $item: &;
-        display: flex;
-        align-items: center;
-
-        height: 40px;
-        padding: 0 20px;
-
-        &[class][class] {
-            color: var(--yc-color-text-primary);
-
-            &#{$item}_disabled {
-                color: var(--yc-color-text-secondary);
-
-                #{$item}-icon {
-                    color: var(--yc-color-base-misc-heavy);
-                }
-            }
-        }
-
-        &-icon {
-            margin-right: 5px;
-
-            color: var(--yc-color-text-misc);
-        }
-
-        &:hover,
-        &_focused {
-            background: var(--yc-color-base-simple-hover);
-        }
-
-        &_selected {
-            background: var(--yc-color-base-selection);
-        }
-
-        &_selected:hover,
-        &_selected#{$item}_focused {
-            background: var(--yc-color-base-selection-hover);
-        }
-
-        &_badge {
-            position: relative;
-
-            &::after {
-                position: absolute;
-                top: calc(50% - 3px);
-                right: 9px;
-
-                display: block;
-
-                width: 6px;
-                height: 6px;
-
-                content: '';
-
-                border-radius: 50%;
-                background-color: var(--yc-color-text-danger);
-            }
-        }
-    }
-}