@alfalab/core-components 47.12.1-beta.0 → 47.13.0

package/tab-bar/moderncssm/components/tab/Component.js

@@ -1,29 +0,0 @@
-import React, { forwardRef, isValidElement, cloneElement } from 'react';
-import cn from 'classnames';
-import { Indicator } from '../../../../indicator/moderncssm';
-import { Typography } from '../../../../typography/moderncssm';
-import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
-import styles from './index.module.css';
-
-const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
-    const handleClick = (event) => {
-        onChange?.(id);
-        onClick?.(event);
-    };
-    const { className: commonClassName, labelClassName: commonLabelClassName, selectedClassName: commonSelectedClassName, iconClassName: commonIconClassName, } = tabClassNames;
-    return (React.createElement(Component, { "data-test-id": dataTestId, tabIndex: 0, ...(Component === 'button' ? { type: 'button' } : null), ...restProps, href: href, id: id, ref: ref, className: cn(styles.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, {
-            [styles[accentColor]]: selected,
-        }), onClick: handleClick },
-        React.createElement("div", { className: cn(styles.icon, commonIconClassName, iconClassName) }, isValidElement(icon) ? cloneElement(icon, { selected }) : icon),
-        React.createElement(Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn(styles.label, commonLabelClassName, labelClassName, {
-                [styles.labelSelected]: selected,
-            }) }, isValidElement(label) ? cloneElement(label, { selected }) : label),
-        showIndicator && (React.createElement("div", { className: styles.indicator },
-            React.createElement(Indicator, { ...indicatorProps, height: indicatorProps?.value ? 16 : undefined, border: {
-                    width: 2,
-                    color: INDICATOR_BORDER_COLOR[bgColor],
-                }, backgroundColor: INDICATOR_BG_COLOR[accentColor] })))));
-});
-const Tab = TabComponent;
-
-export { Tab };

package/tab-bar/moderncssm/components/tab/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/tab-bar/moderncssm/components/tab/index.js

@@ -1,7 +0,0 @@
-export { Tab } from './Component.js';
-import 'react';
-import 'classnames';
-import '../../../../indicator/moderncssm';
-import '../../../../typography/moderncssm';
-import '../../consts.js';
-import './index.module.css';

package/tab-bar/moderncssm/components/tab/index.module.css

@@ -1,66 +0,0 @@
-/* */
-
-.component {
-    box-sizing: border-box;
-    background-color: transparent;
-    -webkit-tap-highlight-color: transparent;
-    outline: none;
-    border: 0;
-    margin: 0;
-    box-shadow: none;
-    border-radius: 0;
-    -webkit-user-select: none;
-            user-select: none;
-    vertical-align: middle;
-    appearance: none;
-    text-decoration: none;
-    min-width: 0;
-    cursor: pointer;
-
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    flex: 1 0 0;
-    align-items: center;
-    padding: var(--gap-xs) 0;
-    color: var(--color-light-neutral-translucent-700);
-}
-
-.primary {
-    color: var(--color-light-accent-primary);
-}
-
-.secondary {
-    color: var(--color-light-accent-secondary);
-}
-
-.icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-    width: 100%;
-}
-
-.label {
-    -webkit-line-clamp: 1;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    word-break: break-all;
-    flex-shrink: 0;
-
-    color: var(--color-light-text-secondary);
-}
-
-.labelSelected {
-    color: inherit;
-}
-
-.indicator {
-    position: absolute;
-    top: 3px;
-    left: calc(50% + var(--gap-2xs));
-    height: 16px;
-    min-width: 16px;
-}

package/tab-bar/moderncssm/consts.d.ts

@@ -1,9 +0,0 @@
-declare const INDICATOR_BORDER_COLOR: {
-    'modal-bg-primary': string;
-    'modal-bg-alt-primary': string;
-};
-declare const INDICATOR_BG_COLOR: {
-    primary: string;
-    secondary: string;
-};
-export { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR };

package/tab-bar/moderncssm/consts.js

@@ -1,10 +0,0 @@
-const INDICATOR_BORDER_COLOR = {
-    'modal-bg-primary': 'var(--color-light-base-bg-primary)',
-    'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
-};
-const INDICATOR_BG_COLOR = {
-    primary: 'var(--color-light-accent-primary)',
-    secondary: 'var(--color-light-accent-secondary)',
-};
-
-export { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR };

package/tab-bar/moderncssm/index.d.ts

@@ -1,2 +0,0 @@
-export { TabBar } from "./Component";
-export { TabBarProps, TabProps } from "./types";

package/tab-bar/moderncssm/index.js

@@ -1,10 +0,0 @@
-export { TabBar } from './Component.js';
-import 'react';
-import 'classnames';
-import '../../shared/moderncssm';
-import './components/tab/Component.js';
-import '../../indicator/moderncssm';
-import '../../typography/moderncssm';
-import './consts.js';
-import './components/tab/index.module.css';
-import './index.module.css';

package/tab-bar/moderncssm/index.module.css

@@ -1,23 +0,0 @@
-/* */
-
-.component {
-    display: flex;
-    justify-content: center;
-    height: 64px;
-    max-height: 64px;
-    box-sizing: border-box;
-    overflow: hidden;
-    transition: box-shadow 0.2s ease
-}
-
-.component.modal-bg-primary {
-        background-color: var(--color-light-base-bg-primary);
-    }
-
-.component.modal-bg-alt-primary {
-        background-color: var(--color-light-base-bg-alt-primary);
-    }
-
-.border {
-    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
-}

package/tab-bar/moderncssm/shared/index.d.ts

@@ -1 +0,0 @@
-export { getTabBarTestIds } from "../utils";

package/tab-bar/moderncssm/shared/index.js

@@ -1,2 +0,0 @@
-export { getTabBarTestIds } from '../utils.js';
-import '../../../shared/moderncssm';

package/tab-bar/moderncssm/types.d.ts

@@ -1,107 +0,0 @@
-import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import { IndicatorProps } from "../../indicator";
-type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
-interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для таба используется модификатор -tab
-     */
-    dataTestId?: string;
-    /**
-     * Дополнительные классы для таба.
-     */
-    tabClassNames?: {
-        /**
-         *  Дополнительный класс таба
-         */
-        className?: string;
-        /**
-         * Дополнительный класс таба в выбранном состоянии
-         */
-        selectedClassName?: string;
-        /**
-         * Дополнительный класс подписи
-         */
-        labelClassName?: string;
-        /**
-         * Дополнительный класс враппера иконки
-         */
-        iconClassName?: string;
-    };
-    /**
-     * Список табов
-     */
-    children: TabElementType[];
-    /**
-     * Идентификатор выбранного таба
-     */
-    selectedId?: string;
-    /**
-     * Включает верхний бордер
-     */
-    border?: boolean;
-    /**
-     * Обработчик изменения выбранного таба
-     */
-    onChange?: (id: string) => void;
-    /**
-     * Цвет активного таба
-     */
-    accentColor?: 'primary' | 'secondary';
-    /**
-     * Цвет фона
-     */
-    bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
-}
-type AdditionalTabProps = Record<string, unknown>;
-interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
-    /**
-     * Кастомный компонент таба.
-     * @default button
-     */
-    Component?: ElementType;
-    /**
-     * Идентификатор таба
-     */
-    id: string;
-    /**
-     *  Лейбл
-     */
-    label: ReactNode;
-    /**
-     * Иконка
-     */
-    icon: ReactNode;
-    /**
-     * Показать индикатор
-     */
-    showIndicator?: boolean;
-    /**
-     * Свойства индикатора
-     */
-    indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
-    /**
-     *  Дополнительный класс таба
-     */
-    className?: string;
-    /**
-     * Дополнительный класс таба в выбранном состоянии
-     */
-    selectedClassName?: string;
-    /**
-     * Дополнительный класс подписи
-     */
-    labelClassName?: string;
-    /**
-     * Дополнительный класс враппера иконки
-     */
-    iconClassName?: string;
-}
-interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
-    selected: boolean;
-}
-export { TabBarProps, TabProps, PrivateTabProps };

package/tab-bar/moderncssm/types.js

@@ -1 +0,0 @@
-

package/tab-bar/moderncssm/utils.d.ts

@@ -1,5 +0,0 @@
-declare function getTabBarTestIds(dataTestId: string): {
-    tabBar: string;
-    tab: string;
-};
-export { getTabBarTestIds };

package/tab-bar/moderncssm/utils.js

@@ -1,10 +0,0 @@
-import { getDataTestId } from '../../shared/moderncssm';
-
-function getTabBarTestIds(dataTestId) {
-    return {
-        tabBar: dataTestId,
-        tab: getDataTestId(dataTestId, 'tab'),
-    };
-}
-
-export { getTabBarTestIds };

package/table/moderncssm/component.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-declare const Table: import("react").ForwardRefExoticComponent<import("react").TableHTMLAttributes<HTMLTableElement> & {
-    compactView?: boolean | undefined;
-    compactHorizontal?: boolean | undefined;
-    className?: string | undefined;
-    children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
-    wrapper?: boolean | undefined;
-    pagination?: import("react").ReactNode;
-    dataTestId?: string | undefined;
-    stickyHeader?: boolean | undefined;
-} & import("react").RefAttributes<HTMLTableElement>> & {
-    TBody: import("react").FC<import("./components/index").TBodyProps>;
-    THead: import("react").FC<import("./components/index").THeadProps>;
-    THeadCell: ({ children, className, dataTestId, style, width, textAlign, hidden, ...restProps }: import("./components/index").THeadCellProps) => import("react").JSX.Element | null;
-    TSortableHeadCell: ({ children, className, defaultIsSortedDesc, isSortedDesc, textAlign, onSort, ...restProps }: import("./components/index").TSortableHeadCellProps) => import("react").JSX.Element;
-    TCell: ({ className, style, dataTestId, children, index, ...restProps }: import("./components/index").TCellProps) => import("react").JSX.Element | null;
-    TRow: ({ children, className, selected, withoutBorder, dataTestId, ...restProps }: import("./components/index").TRowProps) => import("react").JSX.Element;
-    TExpandableRow: ({ className, selected, expanded, defaultExpanded, onToggle, renderContent, ...restProps }: import("./components/index").TExpandableRowProps) => import("react").JSX.Element;
-    Pagination: import("react").FC<import("./components/index").PaginationProps>;
-};
-export { Table };

package/table/moderncssm/component.js

@@ -1,44 +0,0 @@
-import { Table as Table$1 } from './components/table/Component.js';
-import { Pagination } from './components/pagination/Component.js';
-import { THead } from './components/thead/Component.js';
-import { THeadCell } from './components/thead-cell/Component.js';
-import { TSortableHeadCell } from './components/tsortable-head-cell/Component.js';
-import { TBody } from './components/tbody/Component.js';
-import { TCell } from './components/tcell/Component.js';
-import { TRow } from './components/trow/Component.js';
-import { TExpandableRow } from './components/texpandable-row/Component.js';
-import 'react';
-import 'classnames';
-import './components/table-context/index.js';
-import './components/table/utils.js';
-import './utils.js';
-import './components/table/index.module.css';
-import '../../pagination/moderncssm';
-import '../../select/moderncssm/desktop';
-import './components/pagination/select-field/index.js';
-import '../../button/moderncssm';
-import './components/pagination/select-field/index.module.css';
-import './components/pagination/index.module.css';
-import './components/thead/index.module.css';
-import './components/thead-cell/index.module.css';
-import './components/tsortable-head-cell/sort-icon-asc.js';
-import './components/tsortable-head-cell/sort-icon-desc.js';
-import './components/tsortable-head-cell/sort-icon-unset.js';
-import './components/tsortable-head-cell/index.module.css';
-import './components/tbody/index.module.css';
-import './components/tcell/index.module.css';
-import './components/trow/index.module.css';
-import './components/texpandable-row/index.module.css';
-
-const Table = Object.assign(Table$1, {
-    TBody,
-    THead,
-    THeadCell,
-    TSortableHeadCell,
-    TCell,
-    TRow,
-    TExpandableRow,
-    Pagination,
-});
-
-export { Table };

package/table/moderncssm/components/index.d.ts

@@ -1,9 +0,0 @@
-export * from "./table/index";
-export * from "./pagination/index";
-export * from "./thead/index";
-export * from "./thead-cell/index";
-export * from "./tsortable-head-cell/index";
-export * from "./tbody/index";
-export * from "./tcell/index";
-export * from "./trow/index";
-export * from "./texpandable-row/index";

package/table/moderncssm/components/index.js

@@ -1,31 +0,0 @@
-export { Table } from './table/Component.js';
-export { Pagination } from './pagination/Component.js';
-export { THead } from './thead/Component.js';
-export { THeadCell } from './thead-cell/Component.js';
-export { TSortableHeadCell } from './tsortable-head-cell/Component.js';
-export { TBody } from './tbody/Component.js';
-export { TCell } from './tcell/Component.js';
-export { TRow } from './trow/Component.js';
-export { TExpandableRow } from './texpandable-row/Component.js';
-import 'react';
-import 'classnames';
-import './table-context/index.js';
-import './table/utils.js';
-import '../utils.js';
-import './thead/index.module.css';
-import './table/index.module.css';
-import '../../../pagination/moderncssm';
-import '../../../select/moderncssm/desktop';
-import './pagination/select-field/index.js';
-import '../../../button/moderncssm';
-import './pagination/select-field/index.module.css';
-import './pagination/index.module.css';
-import './thead-cell/index.module.css';
-import './tsortable-head-cell/sort-icon-asc.js';
-import './tsortable-head-cell/sort-icon-desc.js';
-import './tsortable-head-cell/sort-icon-unset.js';
-import './tsortable-head-cell/index.module.css';
-import './tbody/index.module.css';
-import './tcell/index.module.css';
-import './trow/index.module.css';
-import './texpandable-row/index.module.css';

package/table/moderncssm/components/pagination/Component.d.ts

@@ -1,26 +0,0 @@
-import { FC } from 'react';
-import { PaginationProps as CorePaginationProps } from "../../../../pagination";
-type PaginationProps = CorePaginationProps & {
-    /**
-     * Количество строк на страницу
-     */
-    perPage?: number;
-    /**
-     * Возможные варианты разбивки
-     */
-    possiblePerPage?: number[];
-    /**
-     * Обработчик переключения perPage
-     */
-    onPerPageChange?: (perPage: number) => void;
-    /**
-     * Скрывает переключатель количества строк на страницу
-     */
-    hidePerPageSelect?: boolean;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-declare const Pagination: FC<PaginationProps>;
-export { PaginationProps, Pagination };

package/table/moderncssm/components/pagination/Component.js

@@ -1,35 +0,0 @@
-import React, { useContext, useMemo, useCallback } from 'react';
-import cn from 'classnames';
-import { Pagination as Pagination$1 } from '../../../../pagination/moderncssm';
-import { SelectDesktop } from '../../../../select/moderncssm/desktop';
-import { TableContext } from '../table-context/index.js';
-import { CustomSelectField } from './select-field/index.js';
-import styles from './index.module.css';
-import '../../../../button/moderncssm';
-import './select-field/index.module.css';
-
-const Pagination = ({ perPage = 25, possiblePerPage = [25, 50, 100], onPerPageChange = () => null, hidePerPageSelect = false, pagesCount, onPageChange = () => null, className, dataTestId, ...restPaginationProps }) => {
-    const { wrapperRef } = useContext(TableContext);
-    const options = useMemo(() => Array.from(new Set(possiblePerPage.concat(perPage)))
-        .sort((a, b) => a - b)
-        .map((value) => ({
-        key: value.toString(),
-        content: `Показывать по ${value}`,
-    })), [perPage, possiblePerPage]);
-    const handlePerPageChange = useCallback(({ selected }) => {
-        onPerPageChange(Number(selected?.key));
-    }, [onPerPageChange]);
-    const handlePageChange = useCallback((pageIndex) => {
-        onPageChange(pageIndex);
-        setTimeout(() => {
-            if (wrapperRef.current) {
-                wrapperRef.current.scrollIntoView();
-            }
-        }, 0);
-    }, [onPageChange, wrapperRef]);
-    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
-        hidePerPageSelect === false && (React.createElement(SelectDesktop, { options: options, selected: perPage.toString(), onChange: handlePerPageChange, preventFlip: false, size: 's', className: styles.select, optionsListClassName: styles.menu, optionClassName: styles.option, Field: CustomSelectField })),
-        pagesCount > 1 && (React.createElement(Pagination$1, { pagesCount: pagesCount, onPageChange: handlePageChange, className: styles.pagination, ...restPaginationProps }))));
-};
-
-export { Pagination };

package/table/moderncssm/components/pagination/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/table/moderncssm/components/pagination/index.js

@@ -1,10 +0,0 @@
-export { Pagination } from './Component.js';
-import 'react';
-import 'classnames';
-import '../../../../pagination/moderncssm';
-import '../../../../select/moderncssm/desktop';
-import '../table-context/index.js';
-import './select-field/index.js';
-import '../../../../button/moderncssm';
-import './select-field/index.module.css';
-import './index.module.css';

package/table/moderncssm/components/pagination/index.module.css

@@ -1,44 +0,0 @@
-/* */
-
-.component {
-    position: sticky;
-    left: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    width: 100%;
-    padding: var(--gap-xl) var(--gap-m) var(--gap-2xl);
-    border-top: 1px solid var(--color-light-neutral-400);
-    box-sizing: border-box;
-}
-
-.pagesWrapper {
-    display: flex;
-}
-
-.tag.tag {
-    flex-shrink: 0;
-    margin-right: var(--gap-xs);
-    padding: 0 var(--gap-xs);
-    min-width: 32px
-}
-
-.tag.tag:last-child {
-        margin-right: 0;
-    }
-
-.tag.tag.tagActive {
-        cursor: default;
-    }
-
-.pagination {
-    margin-left: auto;
-}
-
-.menu {
-    margin: var(--gap-2xs) 0;
-}
-
-.option {
-    min-width: 208px;
-}

package/table/moderncssm/components/pagination/select-field/index.d.ts

@@ -1,3 +0,0 @@
-import { SelectProps } from "../../../../../select";
-declare const CustomSelectField: SelectProps['Field'];
-export { CustomSelectField };

package/table/moderncssm/components/pagination/select-field/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { Button } from '../../../../../button/moderncssm';
-import styles from './index.module.css';
-
-const CustomSelectField = ({ selected, innerProps, Arrow, open }) => {
-    const { ref, ...restInnerProps } = innerProps;
-    return (React.createElement("div", { ref: ref },
-        React.createElement(Button, { ...restInnerProps, size: 'xxs', view: 'transparent', className: cn(styles.field, { [styles.open]: open }), rightAddons: Arrow }, selected?.content)));
-};
-
-export { CustomSelectField };

package/table/moderncssm/components/pagination/select-field/index.module.css

@@ -1,11 +0,0 @@
-/* */
-
-.field svg {
-        width: 18px;
-        height: 18px;
-    }
-
-.open,
-.open:hover {
-    background-color: var(--color-light-neutral-translucent-200-hover);
-}

package/table/moderncssm/components/table/Component.d.ts

@@ -1,72 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode, TableHTMLAttributes } from "react";
-type TableProps = TableHTMLAttributes<HTMLTableElement> & {
-    /**
-     * Компактный вид
-     */
-    compactView?: boolean;
-    /**
-     * Уменьшение горизонтальных паддингов
-     */
-    compactHorizontal?: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дочерние компоненты
-     */
-    children: React.ReactElement | React.ReactElement[];
-    /**
-     * Оборачивает таблицу в стилизованный контейнер
-     */
-    wrapper?: boolean;
-    /**
-     * Слот для пагинации
-     */
-    pagination?: ReactNode;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Если true то заголовок будет фиксироваться при скроле
-     */
-    stickyHeader?: boolean;
-};
-declare const Table: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & {
-    /**
-     * Компактный вид
-     */
-    compactView?: boolean | undefined;
-    /**
-     * Уменьшение горизонтальных паддингов
-     */
-    compactHorizontal?: boolean | undefined;
-    /**
-     * Дополнительный класс
-     */
-    className?: string | undefined;
-    /**
-     * Дочерние компоненты
-     */
-    children: React.ReactElement | React.ReactElement[];
-    /**
-     * Оборачивает таблицу в стилизованный контейнер
-     */
-    wrapper?: boolean | undefined;
-    /**
-     * Слот для пагинации
-     */
-    pagination?: ReactNode;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string | undefined;
-    /**
-     * Если true то заголовок будет фиксироваться при скроле
-     */
-    stickyHeader?: boolean | undefined;
-} & React.RefAttributes<HTMLTableElement>>;
-export { TableProps, Table };