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

package/picker-button/utils-87b0c1c6.d.ts

@@ -1,80 +0,0 @@
-import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape, OptionsListProps } from "./typings-f48223d2";
-declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
-declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
-declare const joinOptions: ({ selected, selectedMultiple, }: {
-    selected?: OptionShape | undefined;
-    selectedMultiple?: OptionShape[] | undefined;
-}) => ReactNode[] | null;
-declare function processOptions(options: BaseSelectProps['options'], selected?: BaseSelectProps['selected'], filterFn?: (option: OptionShape | GroupShape) => boolean, filterGroup?: boolean): {
-    filteredOptions: (OptionShape | GroupShape)[];
-    flatOptions: OptionShape[];
-    selectedOptions: OptionShape[];
-};
-type useVisibleOptionsArgs = {
-    /**
-     * Количество видимых пунктов
-     */
-    visibleOptions: number;
-    /**
-     * Реф на контейнер с пунтами меню
-     */
-    listRef: RefObject<HTMLElement>;
-    /**
-     * Реф на контейнер, которому нужно установить высоту
-     */
-    styleTargetRef?: RefObject<HTMLElement>;
-    /**
-     * Флаг открытия меню
-     */
-    open?: boolean;
-    /**
-     * Позволяет вызвать пересчет высоты
-     */
-    invalidate?: unknown;
-    /**
-     * Список вариантов выбора
-     */
-    options?: Array<OptionShape | GroupShape>;
-    /**
-     * Максимальный размер варианта выбора
-     */
-    size?: Extract<OptionsListProps['size'], number>;
-    /**
-     * Учитывать действительное число вариантов выбора
-     */
-    actualOptionsCount?: boolean;
-};
-declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, options, size, actualOptionsCount, }: useVisibleOptionsArgs): void;
-declare function defaultFilterFn(optionText: string, search: string): boolean;
-declare function defaultGroupAccessor(option: GroupShape): string | undefined;
-declare function defaultAccessor(option: OptionShape): string;
-declare function usePrevious<T>(value: T): T | undefined;
-declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
-declare function getSelectTestIds(dataTestId: string): {
-    select: string;
-    option: string;
-    optionsList: string;
-    clearButton: string;
-    applyButton: string;
-    field: string;
-    fieldFormControl: string;
-    fieldLeftAddons: string;
-    fieldRightAddons: string;
-    fieldError: string;
-    fieldHint: string;
-    searchInput: string;
-    searchFormControl: string;
-    searchInner: string;
-    searchLeftAddons: string;
-    searchRightAddons: string;
-    searchError: string;
-    searchHint: string;
-    bottomSheet: string;
-    bottomSheetHeader: string;
-    bottomSheetContent: string;
-    modal: string;
-    modalHeader: string;
-    modalContent: string;
-};
-export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultGroupAccessor, defaultAccessor, usePrevious, lastIndexOf, getSelectTestIds };

package/plate/moderncssm/Component.responsive.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BasePlateProps } from "./components/base-plate/index";
-type PlateProps = Omit<BasePlateProps, 'styles'> & {
-    /**
-     * Контрольная точка, с нее начинается desktop версия
-     * @default 1024
-     */
-    breakpoint?: number;
-    /**
-     * Значение по-умолчанию для хука useMatchMedia
-     */
-    defaultMatchMediaValue?: boolean | (() => boolean);
-};
-declare const Plate: React.ForwardRefExoticComponent<Omit<BasePlateProps, "styles"> & {
-    /**
-     * Контрольная точка, с нее начинается desktop версия
-     * @default 1024
-     */
-    breakpoint?: number | undefined;
-    /**
-     * Значение по-умолчанию для хука useMatchMedia
-     */
-    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { PlateProps, Plate };

package/plate/moderncssm/Component.responsive.js

@@ -1,26 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useMatchMedia } from '../../mq/moderncssm';
-import { PlateDesktop } from './desktop/Component.desktop.js';
-import { PlateMobile } from './mobile/Component.mobile.js';
-import './components/base-plate/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '../../icon-button/moderncssm';
-import './PortalContext-a2966a2c.js';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import './components/button-list/component.js';
-import './components/base-plate/index.module.css';
-import './desktop/desktop.module.css';
-import './mobile/mobile.module.css';
-
-const Plate = forwardRef(({ children, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
-    const query = `(min-width: ${breakpoint}px)`;
-    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
-    const Component = isDesktop ? PlateDesktop : PlateMobile;
-    return (React.createElement(Component, { ref: ref, ...restProps }, children));
-});
-Plate.displayName = 'Plate';
-
-export { Plate };

package/plate/moderncssm/PortalContext-a2966a2c.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare function getDataTestId(dataTestId: string, element: string): string;
-declare function getDataTestId(dataTestId?: string, element?: string): string | undefined;
-type PortalContextType = () => Element | null;
-declare const PortalContext: import("react").Context<PortalContextType>;
-export { getDataTestId, PortalContext };

package/plate/moderncssm/PortalContext-a2966a2c.js

@@ -1,10 +0,0 @@
-import { createContext } from 'react';
-
-function getDataTestId(dataTestId, element) {
-    const elementPart = element ? `-${element.toLowerCase()}` : '';
-    return dataTestId ? `${dataTestId}${elementPart}` : undefined;
-}
-
-createContext(() => null);
-
-export { getDataTestId as g };

package/plate/moderncssm/browser-a216f694.d.ts

@@ -1,6 +0,0 @@
-declare function isWebkitBased(): boolean;
-declare const browser: {
-    getScrollbarSize: () => number;
-    isWebkitBased: typeof isWebkitBased;
-};
-export { browser };

package/plate/moderncssm/components/base-plate/Component.d.ts

@@ -1,120 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
-import { ButtonProps } from "../../../../button";
-type BasePlateProps = {
-    /**
-     * Управление наличием закрывающего крестика
-     */
-    hasCloser?: boolean;
-    /**
-     * Управление наличием стрелки скрытия контента
-     */
-    foldable?: boolean;
-    /**
-     * Управление видимостью контента (controlled)
-     */
-    folded?: boolean;
-    /**
-     * Начальное состояние контента при foldable={ true }
-     */
-    defaultFolded?: boolean;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот для субаддонов (слева от крестика)
-     */
-    subAddons?: ReactNode | Array<ReactElement<ButtonProps>>;
-    /**
-     * Включить/выключить скругление
-     */
-    rounded?: boolean;
-    /**
-     * Включить/Выключить обводку
-     */
-    border?: boolean;
-    /**
-     * Включить/выключить тени
-     */
-    shadow?: boolean;
-    /**
-     * Включить/выключить ограничение максимальной ширины контента в 560px
-     */
-    limitContentWidth?: boolean;
-    /**
-     * Дочерние элементы
-     */
-    children?: ReactNode;
-    /**
-     * Заголовок компонента
-     */
-    title?: ReactNode;
-    /**
-     * Вид заголовка
-     */
-    titleView?: 'bold' | 'light';
-    /**
-     * Вид компонента
-     */
-    view?: 'common' | 'negative' | 'positive' | 'attention' | 'custom';
-    /**
-     * Фон компонента при view=custom
-     */
-    background?: string;
-    /**
-     * Цвет бордера у компонента при view=custom
-     */
-    borderColor?: string;
-    /**
-     * Набор действий
-     */
-    buttons?: ReactNode | Array<ReactElement<ButtonProps>>;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для кнопок
-     */
-    buttonsClassName?: string;
-    /**
-     * Дополнительный класс для контента
-     */
-    contentClassName?: string;
-    /**
-     * Дополнительный класс для субаддонов
-     */
-    subAddonsClassName?: string;
-    /**
-     * Обработчик клика по плашке
-     */
-    onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Обработчик клика по крестику
-     */
-    onClose?: (event?: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик сворачивания
-     */
-    onToggle?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, payload: {
-        folded: boolean;
-    }) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Количество строк
-     */
-    rowLimit?: 1 | 2 | 3;
-    /**
-     * Основные стили компонента.
-     */
-    styles?: {
-        [key: string]: string;
-    };
-};
-declare const BasePlate: React.ForwardRefExoticComponent<BasePlateProps & React.RefAttributes<HTMLDivElement>>;
-export { BasePlateProps, BasePlate };

package/plate/moderncssm/components/base-plate/Component.js

@@ -1,98 +0,0 @@
-import React, { forwardRef, useRef, useState, useCallback } from 'react';
-import mergeRefs from 'react-merge-refs';
-import cn from 'classnames';
-import { IconButton } from '../../../../icon-button/moderncssm';
-import { g as getDataTestId } from '../../PortalContext-a2966a2c.js';
-import { useFocus } from '@alfalab/hooks';
-import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
-import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
-import { ButtonList } from '../button-list/component.js';
-import commonStyles from './index.module.css';
-
-/* eslint-disable complexity */
-const BasePlate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: foldedProp, defaultFolded = true, rounded = true, limitContentWidth = true, leftAddons, subAddons, children, buttons, title, titleView = 'bold', view = 'common', border = view !== 'custom', shadow = view === 'custom', className, buttonsClassName, contentClassName, subAddonsClassName, dataTestId, onClick, onClose, onToggle, rowLimit, styles = {}, background, borderColor, }, ref) => {
-    const plateRef = useRef(null);
-    const contentRef = useRef(null);
-    const subAddonsRef = useRef(null);
-    const [focused] = useFocus(plateRef, 'keyboard');
-    const [isHidden, setIsHidden] = useState(false);
-    const [foldedState, setFoldedState] = useState(defaultFolded);
-    const uncontrolled = foldedProp === undefined;
-    const foldable = !!title && !!children && foldableProp;
-    const folded = uncontrolled ? foldedState : foldedProp;
-    const hasButtons = !!buttons && typeof buttons !== 'boolean';
-    const hasContent = children || hasButtons;
-    const hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
-    const hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
-    const rowLimitStyles = rowLimit && commonStyles[`rowLimit${rowLimit}`];
-    const handleClick = useCallback((event) => {
-        const target = event.target;
-        const eventInsideComponent = plateRef.current && plateRef.current.contains(target);
-        const eventInsideContent = contentRef.current && contentRef.current.contains(target);
-        const eventInsideSubAddons = subAddonsRef.current && subAddonsRef.current.contains(target);
-        const clickSimilarKeys = ['Enter', ' '].includes(event.key);
-        const shouldChangeIsFolded = eventInsideComponent &&
-            !eventInsideContent &&
-            !eventInsideSubAddons &&
-            (event.type === 'click' || clickSimilarKeys);
-        if (foldable && shouldChangeIsFolded) {
-            if (uncontrolled) {
-                setFoldedState(!foldedState);
-            }
-            if (onToggle) {
-                onToggle(event, { folded: !(uncontrolled ? foldedState : foldedProp) });
-            }
-        }
-        if (onClick) {
-            onClick(event);
-        }
-    }, [foldable, onClick, uncontrolled, onToggle, foldedState, foldedProp]);
-    const handleClose = useCallback((event) => {
-        setIsHidden(true);
-        if (onClose) {
-            onClose(event);
-        }
-    }, [onClose]);
-    return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("div", { className: cn(commonStyles.component, commonStyles[view], {
-            [commonStyles.foldable]: foldable,
-            [commonStyles.focused]: focused,
-            [commonStyles.isHidden]: hasCloser && isHidden,
-            [commonStyles.isFolded]: foldable && folded,
-            [commonStyles.rounded]: rounded,
-            [commonStyles.rect]: !rounded,
-            [commonStyles.noBorder]: !border,
-            [commonStyles.shadow]: shadow,
-        }, className), style: {
-            ...(view === 'custom' && { background, borderColor }),
-        }, onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs([plateRef, ref]), 
-        /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
-        React.createElement("div", { className: commonStyles.inner },
-            leftAddons && React.createElement("div", { className: commonStyles.leftAddons }, leftAddons),
-            React.createElement("div", { className: cn(commonStyles.contentContainer, contentClassName, {
-                    [commonStyles.withoutTitle]: !title && hasAnyAddons,
-                    [commonStyles.limitWidth]: limitContentWidth,
-                }) },
-                title && (React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'title'), className: cn(commonStyles[titleView], {
-                        [styles[titleView]]: Boolean(styles[titleView]),
-                    }) }, title)),
-                hasContent && (React.createElement("div", { ref: contentRef, className: cn(commonStyles.content, {
-                        [commonStyles.isFolded]: foldable && folded,
-                    }) },
-                    children && (React.createElement("div", { className: cn(commonStyles.description, styles.description, rowLimitStyles) }, children)),
-                    hasButtons && (React.createElement("div", { className: styles.footer },
-                        React.createElement(ButtonList, { buttons: buttons, containerClassName: cn(commonStyles.containerButton, buttonsClassName), buttonClassName: cn(commonStyles.button, buttonsClassName) })))))),
-            hasSubAddons && (React.createElement("div", { ref: subAddonsRef, className: commonStyles.subAddons },
-                React.createElement(ButtonList, { buttons: subAddons, containerClassName: cn(subAddonsClassName, commonStyles.rowReverse), buttonClassName: commonStyles.button }))),
-            foldable && (React.createElement("div", { className: commonStyles.rightAddons },
-                React.createElement("div", { className: cn(commonStyles.folder, {
-                        [commonStyles.isFolded]: folded,
-                    }) },
-                    React.createElement(ChevronDownMIcon, null)))),
-            hasCloser && !foldable && (React.createElement("div", { className: commonStyles.rightAddons },
-                React.createElement(IconButton, { className: commonStyles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon, size: 'xxs', onClick: handleClose }))))));
-});
-
-export { BasePlate };

package/plate/moderncssm/components/base-plate/index.d.ts

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

package/plate/moderncssm/components/base-plate/index.js

@@ -1,11 +0,0 @@
-export { BasePlate } from './Component.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../../icon-button/moderncssm';
-import '../../PortalContext-a2966a2c.js';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../button-list/component.js';
-import './index.module.css';

package/plate/moderncssm/components/base-plate/index.module.css

@@ -1,271 +0,0 @@
-/* */
-
-:root {
-    /* border */
-    --plate-border-left: 2px;
-    --plate-border-width: 1px;
-    --plate-border-radius: var(--border-radius-l);
-
-    /* width limit */
-
-    --plate-width-limit: 560px;
-
-    /* custom view */
-    --plate-background: transparent;
-    --plate-border-color: var(--color-light-neutral-translucent-700);
-    --plate-box-shadow: var(--shadow-s);
-}
-
-.component {
-    position: relative;
-    display: inline-flex;
-    box-sizing: border-box;
-    color: var(--color-light-text-primary);
-    width: 100%;
-    min-height: 56px;
-    padding: var(--gap-s);
-    outline: none
-}
-
-.component:before {
-        content: '';
-        width: var(--plate-border-left);
-        position: absolute;
-        height: 100%;
-        top: 0;
-        left: 0;
-    }
-
-.foldable {
-    cursor: pointer;
-}
-
-.component * {
-    box-sizing: border-box;
-}
-
-.focused {
-    outline: 2px solid var(--focus-color);
-    outline-offset: 2px;
-}
-
-.inner {
-    position: relative;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-}
-
-.rounded:before, .noBorder:before {
-        display: none;
-    }
-
-.shadow:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-    box-shadow: var(--plate-box-shadow);
-    pointer-events: none;
-}
-
-.rounded {
-    border-radius: var(--plate-border-radius)
-}
-
-.rounded.shadow:after {
-        border-radius: var(--plate-border-radius);
-    }
-
-.common {
-    background-color: var(--color-light-neutral-translucent-200);
-    border: var(--plate-border-width) solid var(--color-light-neutral-translucent-700)
-}
-
-.common:before {
-        background-color: var(--color-light-neutral-translucent-700);
-    }
-
-.negative {
-    background-color: var(--color-light-status-muted-negative);
-    border: var(--plate-border-width) solid var(--color-light-status-negative)
-}
-
-.negative:before {
-        background-color: var(--color-light-status-negative);
-    }
-
-.positive {
-    background-color: var(--color-light-status-muted-positive);
-    border: var(--plate-border-width) solid var(--color-light-status-positive)
-}
-
-.positive:before {
-        background-color: var(--color-light-status-positive);
-    }
-
-.attention {
-    background-color: var(--color-light-status-muted-attention);
-    border: var(--plate-border-width) solid var(--color-light-status-attention)
-}
-
-.attention:before {
-        background-color: var(--color-light-status-attention);
-    }
-
-.custom {
-    background: var(--plate-background);
-    border: var(--plate-border-width) solid var(--plate-border-color)
-}
-
-.custom:before {
-        background-color: var(--plate-border-color);
-    }
-
-.rect,
-.noBorder {
-    border: none;
-}
-
-.isHidden {
-    display: none;
-}
-
-.leftAddons,
-.rightAddons {
-    display: inline-flex;
-    padding: var(--gap-2xs);
-}
-
-.leftAddons {
-    flex-shrink: 0;
-    min-width: 24px;
-    margin-right: var(--gap-2xs);
-}
-
-.subAddons {
-    cursor: default;
-    align-self: flex-start;
-}
-
-.rowReverse {
-    display: flex;
-    flex-direction: row-reverse;
-}
-
-.bold,
-.light {
-    word-break: break-word;
-}
-
-.light {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 400;
-    padding: 6px var(--gap-s) 6px var(--gap-2xs);
-}
-
-.foldable .content {
-    max-height: 300vh;
-}
-
-.content {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 400;
-
-    overflow: hidden;
-    transition: max-height 2s ease-in-out;
-    cursor: default
-}
-
-.content.isFolded.isFolded {
-        max-height: 0;
-        transition: max-height 1s cubic-bezier(0, 1, 0, 1);
-    }
-
-.contentContainer {
-    flex: 1;
-    margin-right: auto
-}
-
-.contentContainer.withoutTitle {
-        padding-top: var(--gap-3xs);
-    }
-
-.limitWidth {
-    max-width: var(--plate-width-limit);
-}
-
-.description {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 400;
-}
-
-.closer,
-.folder {
-    display: block;
-    height: 24px;
-    width: 24px;
-    opacity: 1;
-    transition: opacity 0.2s ease;
-    cursor: pointer;
-    margin-left: var(--gap-s)
-}
-
-.closer:hover, .folder:hover {
-        opacity: 0.7;
-    }
-
-.closer:active, .folder:active {
-        opacity: 0.5;
-    }
-
-.folder {
-    transition: transform 0.15s ease-in-out, opacity 0.2s ease;
-    transform: var(--arrow-transform)
-}
-
-.folder.isFolded {
-        transform: rotate(0deg);
-    }
-
-.containerButton {
-    display: flex;
-}
-
-.subAddons .button:not(:first-child) {
-        margin-right: var(--gap-xs);
-    }
-
-.containerButton .button:not(:last-child) {
-        margin-right: var(--gap-xs);
-    }
-
-.rowLimit1 {
-    -webkit-line-clamp: 1;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    word-break: break-all;
-}
-
-.rowLimit2 {
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.rowLimit3 {
-    -webkit-line-clamp: 3;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}

package/plate/moderncssm/components/button-list/component.d.ts

@@ -1,17 +0,0 @@
-import { FC, ReactNode } from 'react';
-type ButtonListProps = {
-    /**
-     * Кнопки для рендера
-     */
-    buttons: ReactNode;
-    /**
-     * Дополнительный класс для контейнера
-     */
-    containerClassName?: string;
-    /**
-     * Дополнительный класс для кнопок
-     */
-    buttonClassName?: string;
-};
-declare const ButtonList: FC<ButtonListProps>;
-export { ButtonListProps, ButtonList };