@alfalab/core-components 20.2.0 → 20.4.0

package/toast/cssm/component.js

@@ -0,0 +1,125 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var reactTransitionGroup = require('react-transition-group');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+var coreComponentsToastPlate = require('../../toast-plate/cssm');
+var coreComponentsPopover = require('../../popover/cssm');
+var coreComponentsPortal = require('../../portal/cssm');
+var coreComponentsStack = require('../../stack/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 mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+/*! *****************************************************************************
+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 CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles__default['default'].enter,
+    enterActive: styles__default['default'].enterActive,
+    exit: styles__default['default'].exit,
+    exitActive: styles__default['default'].exitActive,
+};
+var DefaultToastPlate = React.forwardRef(function (props, ref) { return (React__default['default'].createElement(coreComponentsToastPlate.ToastPlate, __assign({ ref: ref }, props))); });
+var Toast = React.forwardRef(function (_a, ref) {
+    var _b;
+    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? coreComponentsStack.stackingOrder.TOAST : _e, _f = _a.ToastPlate, ToastPlate = _f === void 0 ? DefaultToastPlate : _f, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, restProps = __rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer"]);
+    var plateRef = React.useRef(null);
+    var timerId = React.useRef(0);
+    var prevOpen = hooks.usePrevious(open);
+    var startTimer = React.useCallback(function () {
+        clearTimeout(timerId.current);
+        timerId.current = window.setTimeout(onClose, autoCloseDelay);
+    }, [autoCloseDelay, onClose]);
+    var stopTimer = React.useCallback(function () {
+        clearTimeout(timerId.current);
+    }, []);
+    var handleMouseEnter = React.useCallback(function (event) {
+        stopTimer();
+        if (onMouseEnter) {
+            onMouseEnter(event);
+        }
+    }, [onMouseEnter, stopTimer]);
+    var handleMouseLeave = React.useCallback(function (event) {
+        startTimer();
+        if (onMouseLeave) {
+            onMouseLeave(event);
+        }
+    }, [onMouseLeave, startTimer]);
+    var handleTouchStart = React.useCallback(function (event) {
+        stopTimer();
+        if (onTouchStart) {
+            onTouchStart(event);
+        }
+    }, [onTouchStart, stopTimer]);
+    var handleClickOutside = React.useCallback(function () {
+        onClose();
+        stopTimer();
+    }, [onClose, stopTimer]);
+    hooks.useClickOutside(plateRef, handleClickOutside);
+    React.useEffect(function () {
+        if (open !== prevOpen && open) {
+            startTimer();
+        }
+    }, [open, prevOpen, startTimer, stopTimer]);
+    var props = {
+        block: block,
+        onClose: onClose,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onTouchStart: handleTouchStart,
+        ref: mergeRefs__default['default']([ref, plateRef]),
+    };
+    if (anchorElement) {
+        return (React__default['default'].createElement(coreComponentsPopover.Popover, { open: open, anchorElement: anchorElement, position: position, offset: offset, popperClassName: styles__default['default'].popoverInner, className: cn__default['default']((_b = {}, _b[styles__default['default'].block] = block, _b)), transition: { timeout: 150 }, getPortalContainer: getPortalContainer, zIndex: zIndex },
+            React__default['default'].createElement(ToastPlate, __assign({}, restProps, { style: style, className: className }, props))));
+    }
+    return (React__default['default'].createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default['default'].createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer },
+        React__default['default'].createElement(reactTransitionGroup.CSSTransition, { unmountOnExit: true, in: open, timeout: 150, classNames: CSS_TRANSITION_CLASS_NAMES },
+            React__default['default'].createElement(ToastPlate, __assign({}, restProps, { className: cn__default['default'](styles__default['default'].fixed, styles__default['default'].toastPlate, className), style: __assign(__assign({}, style), { bottom: bottomOffset && bottomOffset + "px", zIndex: computedZIndex }) }, props))))); }));
+});
+
+exports.Toast = Toast;

package/toast/cssm/index.d.ts

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

package/toast/cssm/index.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var component = require('./component.js');
+require('react');
+require('react-merge-refs');
+require('react-transition-group');
+require('classnames');
+require('@alfalab/hooks');
+require('../../toast-plate/cssm');
+require('../../popover/cssm');
+require('../../portal/cssm');
+require('../../stack/cssm');
+require('./index.module.css');
+
+
+
+exports.Toast = component.Toast;

package/toast/cssm/index.module.css

@@ -0,0 +1,48 @@
+:root {
+    --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xl: 32px;
+}
+:root {
+    --toast-box-shadow: var(--shadow-m);
+}
+.toastPlate {
+    box-shadow: var(--toast-box-shadow);
+}
+.popoverInner {
+    border: none;
+    border-radius: var(--toast-plate-border-radius);
+    box-shadow: var(--toast-box-shadow);
+    background-color: transparent;
+}
+.block {
+    width: 100%;
+}
+.fixed {
+    position: fixed;
+    bottom: var(--gap-2xl);
+    transition: opacity 150ms ease-in-out, transform 150ms ease-in-out
+}
+.fixed.enter {
+        opacity: 0;
+        transform: scale(0.98);
+    }
+.fixed.enterActive {
+        opacity: 1;
+        transform: scale(1);
+    }
+.fixed.exit {
+        opacity: 1;
+        transform: scale(1);
+    }
+.fixed.exitActive {
+        opacity: 0;
+        transform: scale(0.98);
+    }

package/toast-plate/cssm/component.d.ts

@@ -0,0 +1,109 @@
+/// <reference types="react" />
+import React from 'react';
+import { HTMLAttributes, ReactNode, MouseEvent } from "react";
+type BadgeIcons = {
+    negative: JSX.Element;
+    positive: JSX.Element;
+    attention: JSX.Element;
+};
+type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контентной области
+     */
+    contentClassName?: string;
+    /**
+     * Дочерние элементы
+     */
+    children?: ReactNode;
+    /**
+     * Заголовок компонента
+     */
+    title?: ReactNode;
+    /**
+     * Вид бэйджа
+     */
+    badge?: 'negative' | 'positive' | 'attention';
+    /**
+     * Слот слева, заменяет стандартную иконку
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Кнопка действия
+     */
+    actionButton?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Управляет отображением кнопки закрытия уведомления
+     */
+    hasCloser?: boolean;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Обработчик клика по крестику
+     */
+    onClose?: (event?: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Функция, с помощью которой можно переопределить иконки в Badge
+     */
+    getBadgeIcons?: (icons: BadgeIcons) => BadgeIcons;
+};
+declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для контентной области
+     */
+    contentClassName?: string | undefined;
+    /**
+     * Дочерние элементы
+     */
+    children?: React.ReactNode;
+    /**
+     * Заголовок компонента
+     */
+    title?: React.ReactNode;
+    /**
+     * Вид бэйджа
+     */
+    badge?: "positive" | "attention" | "negative" | undefined;
+    /**
+     * Слот слева, заменяет стандартную иконку
+     */
+    leftAddons?: React.ReactNode;
+    /**
+     * Кнопка действия
+     */
+    actionButton?: React.ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Управляет отображением кнопки закрытия уведомления
+     */
+    hasCloser?: boolean | undefined;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean | undefined;
+    /**
+     * Обработчик клика по крестику
+     */
+    onClose?: ((event?: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined) => void) | undefined;
+    /**
+     * Функция, с помощью которой можно переопределить иконки в Badge
+     */
+    getBadgeIcons?: ((icons: BadgeIcons) => BadgeIcons) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { BadgeIcons, ToastPlateProps, ToastPlate };

package/toast-plate/cssm/component.js

@@ -0,0 +1,88 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsButton = require('../../button/cssm');
+var coreComponentsBadge = require('../../badge/cssm');
+var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
+var AlertCircleMIcon = require('@alfalab/icons-glyph/AlertCircleMIcon');
+var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
+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 styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+/*! *****************************************************************************
+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 iconDefaultComponents = {
+    negative: React__default['default'].createElement(CrossCircleMIcon.CrossCircleMIcon, { className: styles__default['default'].badgeIcon }),
+    positive: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles__default['default'].badgeIcon }),
+    attention: React__default['default'].createElement(AlertCircleMIcon.AlertCircleMIcon, { className: styles__default['default'].badgeIcon }),
+};
+var ToastPlate = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var dataTestId = _a.dataTestId, className = _a.className, contentClassName = _a.contentClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, restProps = __rest(_a, ["dataTestId", "className", "contentClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons"]);
+    var needRenderLeftAddons = Boolean(leftAddons || badge);
+    var iconComponents = getBadgeIcons
+        ? getBadgeIcons(iconDefaultComponents)
+        : iconDefaultComponents;
+    var handleClose = React.useCallback(function (event) {
+        if (onClose) {
+            onClose(event);
+        }
+    }, [onClose]);
+    return (React__default['default'].createElement("div", __assign({ className: cn__default['default'](styles__default['default'].component, (_b = {}, _b[styles__default['default'].block] = block, _b[styles__default['default'].hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
+        React__default['default'].createElement("div", { className: styles__default['default'].contentWrap },
+            React__default['default'].createElement("div", { className: cn__default['default'](contentClassName, styles__default['default'].content) },
+                needRenderLeftAddons && (React__default['default'].createElement("div", { className: styles__default['default'].leftAddons }, leftAddons || (React__default['default'].createElement(coreComponentsBadge.Badge, { view: 'icon', content: badge && iconComponents[badge], iconColor: badge, className: styles__default['default'].badge, dataTestId: 'badge' })))),
+                React__default['default'].createElement("div", null,
+                    title && React__default['default'].createElement("div", { className: styles__default['default'].title }, title),
+                    children && React__default['default'].createElement("div", { className: styles__default['default'].children }, children))),
+            actionButton && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].actionSection, (_c = {},
+                    _c[styles__default['default'].hasCloser] = hasCloser,
+                    _c)) }, actionButton)),
+            hasCloser && (React__default['default'].createElement(coreComponentsButton.Button, { colors: 'inverted', className: cn__default['default'](styles__default['default'].closeButton), view: 'ghost', onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', leftAddons: React__default['default'].createElement(CrossMIcon.CrossMIcon, null) })))));
+});
+
+exports.ToastPlate = ToastPlate;

package/toast-plate/cssm/index.d.ts

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

package/toast-plate/cssm/index.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var component = require('./component.js');
+require('react');
+require('classnames');
+require('../../button/cssm');
+require('../../badge/cssm');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CrossCircleMIcon');
+require('@alfalab/icons-glyph/AlertCircleMIcon');
+require('@alfalab/icons-glyph/CrossMIcon');
+require('./index.module.css');
+
+
+
+exports.ToastPlate = component.ToastPlate;