@alfalab/core-components 19.11.1 → 20.0.0

package/picker-button/esm/Component-174802a0.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { Button } from '../../button/esm';
-import { ArrowDownMIcon } from '@alfalab/icons-classic/ArrowDownMIcon';
-import { ArrowDownSIcon } from '@alfalab/icons-classic/ArrowDownSIcon';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-function __rest(s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-var styles = {"iconContainer":"picker-button__iconContainer_19z2g","open":"picker-button__open_19z2g"};
-require('./field/index.css');
-
-var Field = function (_a) {
-    var _b = _a.buttonSize, buttonSize = _b === void 0 ? 'm' : _b, view = _a.view, label = _a.label, open = _a.open, multiple = _a.multiple, rightAddons = _a.rightAddons, Arrow = _a.Arrow, innerProps = _a.innerProps, className = _a.className, selected = _a.selected, selectedMultiple = _a.selectedMultiple, valueRenderer = _a.valueRenderer, restProps = __rest(_a, ["buttonSize", "view", "label", "open", "multiple", "rightAddons", "Arrow", "innerProps", "className", "selected", "selectedMultiple", "valueRenderer"]);
-    var Icon = buttonSize === 'xs' ? ArrowDownSIcon : ArrowDownMIcon;
-    var buttonProps = __assign(__assign({}, restProps), innerProps);
-    return (React.createElement(Button, __assign({}, buttonProps, { rightAddons: React.createElement("span", { className: cn(styles.iconContainer, open && styles.open) },
-            React.createElement(Icon, { "data-test-id": 'picker-button-icon' })), block: true, view: view, size: buttonSize, className: cn(styles.component, view === 'primary' && styles.primary, className) }), label));
-};
-
-export { Field as F, __rest as _, __assign as a };

package/plate/cssm/Component.d.ts

@@ -1,74 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode, MouseEvent, ReactElement, KeyboardEvent } from "react";
-import { ComponentProps as ButtonProps } from "../../button";
-type PlateProps = {
-    /**
-     * Управление наличием закрывающего крестика
-     */
-    hasCloser?: boolean;
-    /**
-     * Управление наличием стрелки скрытия контента
-     */
-    foldable?: boolean;
-    /**
-     * Управление видимостью контента (controlled)
-     */
-    folded?: boolean;
-    /**
-     * Начальное состояние контента при foldable={ true }
-     */
-    defaultFolded?: boolean;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Дочерние элементы
-     */
-    children?: ReactNode;
-    /**
-     * Заголовок компонента
-     */
-    title?: ReactNode;
-    /**
-     * Вид компонента
-     */
-    view?: 'common' | 'negative' | 'positive' | 'attention';
-    /**
-     * Набор действий
-     */
-    buttons?: Array<ReactElement<ButtonProps>>;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для кнопок
-     */
-    buttonsClassName?: string;
-    /**
-     * Дополнительный класс для контента
-     */
-    contentClassName?: string;
-    /**
-     * Обработчик клика по плашке
-     */
-    onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Обработчик клика по крестику
-     */
-    onClose?: (event?: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик сворачивания
-     */
-    onToggle?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, payload: {
-        folded: boolean;
-    }) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-declare const Plate: React.ForwardRefExoticComponent<PlateProps & React.RefAttributes<HTMLDivElement>>;
-export { PlateProps, Plate };

package/plate/cssm/Component.js

@@ -1,101 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var mergeRefs = require('react-merge-refs');
-var hooks = require('@alfalab/hooks');
-var coreComponentsButton = require('../../button/cssm');
-var styles = require('./index.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-var Plate = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var hasCloser = _a.hasCloser, _f = _a.foldable, foldableProp = _f === void 0 ? false : _f, foldedProp = _a.folded, _g = _a.defaultFolded, defaultFolded = _g === void 0 ? true : _g, leftAddons = _a.leftAddons, children = _a.children, _h = _a.buttons, buttons = _h === void 0 ? [] : _h, title = _a.title, _j = _a.view, view = _j === void 0 ? 'common' : _j, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle;
-    var plateRef = React.useRef(null);
-    var contentRef = React.useRef(null);
-    var focused = hooks.useFocus(plateRef, 'keyboard')[0];
-    var _k = React.useState(false), isHidden = _k[0], setIsHidden = _k[1];
-    var _l = React.useState(defaultFolded), foldedState = _l[0], setFoldedState = _l[1];
-    var uncontrolled = foldedProp === undefined;
-    var foldable = !!title && !!children && foldableProp;
-    var folded = uncontrolled ? foldedState : foldedProp;
-    var hasButtons = Array.isArray(buttons) && buttons.length > 0;
-    var hasContent = children || hasButtons;
-    var handleClick = React.useCallback(function (event) {
-        var eventInsideComponent = plateRef.current && plateRef.current.contains(event.target);
-        var eventInsideContent = contentRef.current && contentRef.current.contains(event.target);
-        var clickSimilarKeys = ['Enter', ' '].includes(event.key);
-        var shouldChangeIsFolded = eventInsideComponent &&
-            !eventInsideContent &&
-            (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]);
-    var handleClose = React.useCallback(function (event) {
-        setIsHidden(true);
-        if (onClose) {
-            onClose(event);
-        }
-    }, [onClose]);
-    var renderButtons = React.useCallback(function () { return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].buttons, buttonsClassName) }, buttons.map(function (button, index) {
-        return button
-            ? React__default['default'].cloneElement(button, {
-                // eslint-disable-next-line react/no-array-index-key
-                key: index,
-                size: 'xs',
-                view: index === 0 ? 'outlined' : 'link',
-                className: cn__default['default'](button.props.className, styles__default['default'].button),
-            })
-            : null;
-    }))); }, [buttons, buttonsClassName]);
-    return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][view], (_b = {},
-            _b[styles__default['default'].focused] = focused,
-            _b[styles__default['default'].isHidden] = hasCloser && isHidden,
-            _b[styles__default['default'].isFolded] = foldable && folded,
-            _b), className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs__default['default']([plateRef, ref]), 
-        /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
-        React__default['default'].createElement("div", { className: styles__default['default'].inner },
-            leftAddons && React__default['default'].createElement("div", { className: styles__default['default'].leftAddons }, leftAddons),
-            React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].contentContainer, contentClassName, (_c = {},
-                    _c[styles__default['default'].withoutTitle] = !title,
-                    _c)) },
-                title && React__default['default'].createElement("div", { className: styles__default['default'].title }, title),
-                hasContent && (React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles__default['default'].content, (_d = {},
-                        _d[styles__default['default'].isFolded] = foldable && folded,
-                        _d)) },
-                    React__default['default'].createElement("div", { className: styles__default['default'].contentInner },
-                        children,
-                        hasButtons ? renderButtons() : null)))),
-            foldable && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].folder, (_e = {},
-                    _e[styles__default['default'].isFolded] = folded,
-                    _e)) })),
-            hasCloser && !foldable && (React__default['default'].createElement(coreComponentsButton.Button, { className: styles__default['default'].closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))));
-});
-/**
- * Для отображения в сторибуке
- */
-Plate.defaultProps = {
-    foldable: false,
-    defaultFolded: true,
-    view: 'common',
-};
-
-exports.Plate = Plate;

package/plate/cssm/index.d.ts

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

package/plate/cssm/index.js

@@ -1,13 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('react');
-require('classnames');
-require('react-merge-refs');
-require('@alfalab/hooks');
-require('../../button/cssm');
-require('./index.module.css');
-var Component = require('./Component.js');
-
-
-
-exports.Plate = Component.Plate;

package/plate/cssm/index.module.css

@@ -1,170 +0,0 @@
-:root {
-    --color-static-status-green: #13a463;
-    --color-static-status-grey: #6d7986;
-    --color-static-status-orange: #de6a00;
-    --color-static-status-red: #d91d0b;
-}
-:root {
-    --color-light-bg-attention-muted: #fff3e0;
-    --color-light-bg-negative-muted: #feebea;
-    --color-light-bg-positive-muted: #ebf9f1;
-    --color-light-bg-secondary: #f3f4f5;
-    --color-light-border-link: #007aff;
-    --color-light-text-primary: #0b1f35;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-xl: 24px;
-    --gap-2xs-neg: -4px;
-}
-:root {
-    --border-radius-m: 8px;
-}
-:root {
-    --focus-color: var(--color-light-border-link);
-    --arrow-transform: rotate(180deg);
-}
-:root {
-    /* border */
-    --plate-border: 1px solid;
-    --plate-border-radius: var(--border-radius-m);
-
-    /* icons */
-    --plate-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
-    --plate-arrow-icon: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
-}
-.component {
-    position: relative;
-    display: inline-flex;
-    box-sizing: border-box;
-    border-radius: var(--plate-border-radius);
-    border: var(--plate-border);
-    color: var(--color-light-text-primary);
-    width: 100%;
-    min-height: 56px;
-    padding: var(--gap-m);
-    outline: none;
-    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;
-}
-.common {
-    background-color: var(--color-light-bg-secondary);
-    border-color: var(--color-static-status-grey);
-}
-.negative {
-    background-color: var(--color-light-bg-negative-muted);
-    border-color: var(--color-static-status-red);
-}
-.positive {
-    background-color: var(--color-light-bg-positive-muted);
-    border-color: var(--color-static-status-green);
-}
-.attention {
-    background-color: var(--color-light-bg-attention-muted);
-    border-color: var(--color-static-status-orange);
-}
-.isHidden {
-    display: none;
-}
-.leftAddons {
-    flex-shrink: 0;
-    min-width: 24px;
-    margin-right: var(--gap-s);
-}
-.title {
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 700;
-
-    word-break: break-word;
-}
-.content {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 400;
-
-    max-height: 300vh;
-    overflow: hidden;
-    transition: max-height 2s ease-in-out;
-    padding: var(--gap-2xs);
-    margin: var(--gap-2xs-neg);
-    cursor: default
-}
-.content.isFolded {
-        max-height: 0;
-        transition: max-height 1s cubic-bezier(0, 1, 0, 1);
-    }
-.contentContainer {
-    flex: 1;
-    max-width: 586px;
-    margin-right: auto
-}
-.contentContainer.withoutTitle {
-        padding-top: var(--gap-3xs);
-    }
-.title + .content > .contentInner {
-    padding-top: var(--gap-xs);
-}
-.closer,
-.folder {
-    display: block;
-    height: 24px;
-    width: 24px;
-    opacity: 1;
-    transition: opacity 0.2s ease;
-    cursor: pointer;
-    margin-left: var(--gap-m)
-}
-.closer:hover, .folder:hover {
-        opacity: 0.7;
-    }
-.closer:active, .folder:active {
-        opacity: 0.5;
-    }
-.closer {
-    background: var(--plate-closer-icon) center no-repeat;
-}
-.folder {
-    background: var(--plate-arrow-icon) center no-repeat;
-    transition: transform 0.15s ease-in-out, opacity 0.2s ease;
-    transform: var(--arrow-transform)
-}
-.folder.isFolded {
-        transform: rotate(0deg);
-    }
-.buttons {
-    margin-top: var(--gap-xl);
-}
-.button {
-    margin-right: var(--gap-s)
-}
-.button:last-child {
-        margin-right: 0;
-    }

package/popover/cssm/Component.d.ts

@@ -1,93 +0,0 @@
-/// <reference types="react-transition-group" />
-/// <reference types="react" />
-import React from 'react';
-import { CSSProperties, MutableRefObject, ReactNode } from "react";
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import { BasePlacement, VariationPlacement } from '@popperjs/core';
-type RefElement = HTMLElement | null;
-type Position = BasePlacement | VariationPlacement;
-type PopoverProps = {
-    /**
-     * Управление состоянием поповера (открыт/закрыт)
-     */
-    open: boolean;
-    /**
-     * Элемент, относительного которого появляется поповер
-     */
-    anchorElement: RefElement;
-    /**
-     * Позиционирование поповера
-     */
-    position?: Position;
-    /**
-     * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
-     */
-    preventFlip?: boolean;
-    /**
-     * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
-     */
-    preventOverflow?: boolean;
-    /**
-     * Если `true`, будет отрисована стрелочка
-     */
-    withArrow?: boolean;
-    /**
-     * Смещение поповера.
-     * Если позиционирование top, bottom, то [x, y].
-     * Если позиционирование left, right то [y, x].
-     */
-    offset?: [number, number];
-    /**
-     * Дополнительный класс для поповера
-     */
-    popperClassName?: string;
-    /**
-     * Дополнительный класс для стрелочки
-     */
-    arrowClassName?: string;
-    /**
-     * Функция, возвращающая контейнер, в который будет рендериться поповер
-     */
-    getPortalContainer?: () => HTMLElement;
-    /**
-     * CSSTransitionProps, прокидываются в компонент CSSTransitionProps.
-     */
-    transition?: CSSTransitionProps;
-    /**
-     * Выставляет кастомное свойство transition-duration
-     */
-    transitionDuration?: CSSProperties['transitionDuration'];
-    /**
-     * Рендерит компонент, обернутый в Transition
-     */
-    withTransition?: boolean;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Хранит функцию, с помощью которой можно обновить положение компонента
-     */
-    update?: MutableRefObject<() => void>;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,
-     * по очереди для каждой позиции из этого списка.
-     * Если не передавать, то поповер открывается в противоположном направлении от переданного position.
-     */
-    fallbackPlacements?: Position[];
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-};
-declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
-export { Position, PopoverProps, Popover };