@alfalab/core-components 19.11.1 → 20.0.0

package/base-modal/cssm/utils.d.ts

@@ -1,5 +0,0 @@
-declare function isScrolledToTop(target: HTMLElement): boolean;
-declare function isScrolledToBottom(target: HTMLElement): boolean;
-declare function hasScrollbar(target: HTMLElement): boolean;
-declare const handleContainer: (container: HTMLElement) => () => void;
-export { isScrolledToTop, isScrolledToBottom, hasScrollbar, handleContainer };

package/base-modal/cssm/utils.js

@@ -1,80 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function isScrolledToTop(target) {
-    return target.scrollTop <= 0;
-}
-function isScrolledToBottom(target) {
-    return target.scrollHeight - target.offsetHeight <= target.scrollTop;
-}
-function hasScrollbar(target) {
-    return target.scrollHeight > target.clientHeight;
-}
-var getScrollbarSize = function () {
-    var scrollDiv = document.createElement('div');
-    scrollDiv.style.width = '99px';
-    scrollDiv.style.height = '99px';
-    scrollDiv.style.position = 'absolute';
-    scrollDiv.style.top = '-9999px';
-    scrollDiv.style.overflow = 'scroll';
-    document.body.appendChild(scrollDiv);
-    var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    document.body.removeChild(scrollDiv);
-    return scrollbarSize;
-};
-var isOverflowing = function (container) {
-    if (document.body === container) {
-        return window.innerWidth > document.documentElement.clientWidth;
-    }
-    return container.scrollHeight > container.clientHeight;
-};
-var getPaddingRight = function (node) {
-    return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
-};
-var handleContainer = function (container) {
-    var restoreStyle = [];
-    if (isOverflowing(container)) {
-        // Вычисляет размер до применения `overflow hidden` для избежания скачков
-        var scrollbarSize = getScrollbarSize();
-        restoreStyle.push({
-            value: container.style.paddingRight,
-            key: 'padding-right',
-            el: container,
-        });
-        // Вычисляем стили, чтобы получить реальный `padding` c шириной сколлбара
-        // eslint-disable-next-line no-param-reassign
-        container.style.paddingRight = getPaddingRight(container) + scrollbarSize + "px";
-    }
-    var parent = container.parentElement;
-    var scrollContainer = 
-    // TODO: заменить на optional chaining
-    parent &&
-        parent.nodeName === 'HTML' &&
-        window.getComputedStyle(parent).overflowY === 'scroll'
-        ? parent
-        : container;
-    // Блокируем скролл даже если отсутствует скроллбар
-    if (scrollContainer.style.overflow !== 'hidden') {
-        restoreStyle.push({
-            value: scrollContainer.style.overflow,
-            key: 'overflow',
-            el: scrollContainer,
-        });
-    }
-    scrollContainer.style.overflow = 'hidden';
-    return function () {
-        restoreStyle.forEach(function (_a) {
-            var value = _a.value, el = _a.el, key = _a.key;
-            if (value) {
-                el.style.setProperty(key, value);
-            }
-            else {
-                el.style.removeProperty(key);
-            }
-        });
-    };
-};
-
-exports.handleContainer = handleContainer;
-exports.hasScrollbar = hasScrollbar;
-exports.isScrolledToBottom = isScrolledToBottom;
-exports.isScrolledToTop = isScrolledToTop;

package/bottom-sheet/Component-75c61faf.js

@@ -1,56 +0,0 @@
-var React = require('react');
-var coreComponentsBackdrop = require('../backdrop');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/*! *****************************************************************************
-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.
-***************************************************************************** */
-exports.__assign = function () {
-    exports.__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 exports.__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 SwipeableBackdrop = function (_a) {
-    var opacity = _a.opacity, handlers = _a.handlers, opacityTimeout = _a.opacityTimeout, backdropProps = __rest(_a, ["opacity", "handlers", "opacityTimeout"]);
-    return (React__default['default'].createElement("div", exports.__assign({}, handlers, { style: {
-            opacity: opacity,
-            transition: opacity === 1 ? "opacity " + opacityTimeout + "ms ease-in-out" : '',
-        } }),
-        React__default['default'].createElement(coreComponentsBackdrop.Backdrop, exports.__assign({}, backdropProps))));
-};
-
-exports.SwipeableBackdrop = SwipeableBackdrop;

package/bottom-sheet/cssm/Component-3a3629ef.js

@@ -1,56 +0,0 @@
-var React = require('react');
-var coreComponentsBackdrop = require('../../backdrop/cssm');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/*! *****************************************************************************
-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.
-***************************************************************************** */
-exports.__assign = function () {
-    exports.__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 exports.__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 SwipeableBackdrop = function (_a) {
-    var opacity = _a.opacity, handlers = _a.handlers, opacityTimeout = _a.opacityTimeout, backdropProps = __rest(_a, ["opacity", "handlers", "opacityTimeout"]);
-    return (React__default['default'].createElement("div", exports.__assign({}, handlers, { style: {
-            opacity: opacity,
-            transition: opacity === 1 ? "opacity " + opacityTimeout + "ms ease-in-out" : '',
-        } }),
-        React__default['default'].createElement(coreComponentsBackdrop.Backdrop, exports.__assign({}, backdropProps))));
-};
-
-exports.SwipeableBackdrop = SwipeableBackdrop;

package/bottom-sheet/cssm/component.d.ts

@@ -1,55 +0,0 @@
-/// <reference types="react-transition-group" />
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-import { TransitionProps } from 'react-transition-group/Transition';
-type BottomSheetProps = {
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-    /**
-     * Управление видимостью
-     */
-    open: boolean;
-    /**
-     * Заголовок
-     */
-    title?: ReactNode;
-    /**
-     * Кнопка действия (обычно, это кнопка закрытия)
-     */
-    actionButton?: ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс
-     */
-    contentClassName?: string;
-    /**
-     * TransitionProps, прокидываются в компонент CSSTransitionProps.
-     */
-    transitionProps?: Partial<TransitionProps>;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Будет ли свайпаться на десктопе
-     * @default false
-     */
-    desktopSwipeable?: boolean;
-    /**
-     * Обработчик закрытия
-     */
-    onClose: () => void;
-};
-declare const CLOSE_OFFSET = 0.2;
-declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
-export { BottomSheetProps, CLOSE_OFFSET, BottomSheet };

package/bottom-sheet/cssm/component.js

@@ -1,150 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_swipeableBackdrop_Component = require('./Component-3a3629ef.js');
-var React = require('react');
-var cn = require('classnames');
-var reactSwipeable = require('react-swipeable');
-var coreComponentsBaseModal = require('../../base-modal/cssm');
-var coreComponentsTypography = require('../../typography/cssm');
-require('./components/footer/index.module.css');
-var components_footer_Component = require('./components/footer/Component.js');
-require('../../backdrop/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 styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-var TIMEOUT = 300;
-var SWIPE_CLOSE_VELOCITY = 0.4;
-var MIN_BACKDROP_OPACITY = 0.2;
-var CLOSE_OFFSET = 0.2;
-var BottomSheet = React.forwardRef(function (_a, ref) {
-    var _b, _c;
-    var open = _a.open, title = _a.title, actionButton = _a.actionButton, contentClassName = _a.contentClassName, className = _a.className, children = _a.children, zIndex = _a.zIndex, _d = _a.transitionProps, transitionProps = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, _e = _a.desktopSwipeable, trackMouse = _e === void 0 ? false : _e, onClose = _a.onClose;
-    var _f = React.useState(0), sheetOffset = _f[0], setSheetOffset = _f[1];
-    var _g = React.useState(1), backdropOpacity = _g[0], setBackdropOpacity = _g[1];
-    var _h = React.useState(false), scrollLocked = _h[0], setScrollLocked = _h[1];
-    var sheetHeight = React.useRef(0);
-    var scrollableContainer = React.useRef(null);
-    var scrollableContainerScrollValue = React.useRef(0);
-    var getBackdropOpacity = function (offset) {
-        if (sheetHeight.current === 0)
-            return MIN_BACKDROP_OPACITY;
-        var opacity = 1 - (1 - MIN_BACKDROP_OPACITY) * (offset / sheetHeight.current);
-        return Number(opacity.toFixed(2));
-    };
-    var getSheetOffset = function (deltaY) {
-        var offset = deltaY > 0 ? 0 : -deltaY;
-        offset -= scrollableContainerScrollValue.current;
-        return Math.floor(Math.max(0, offset));
-    };
-    /**
-     * Если контент внутри шторки скроллится - то шторка не должна свайпаться
-     */
-    var shouldSkipSwiping = function () {
-        if (!scrollableContainer.current) {
-            return false;
-        }
-        if (!scrollableContainerScrollValue.current) {
-            scrollableContainerScrollValue.current = Math.floor(scrollableContainer.current.scrollTop);
-        }
-        return scrollableContainer.current.scrollTop > 0;
-    };
-    var handleBackdropSwipedDown = function (_a) {
-        var velocity = _a.velocity;
-        if (velocity > SWIPE_CLOSE_VELOCITY) {
-            onClose();
-        }
-    };
-    var handleSheetSwipedDown = function (_a) {
-        var velocity = _a.velocity;
-        if (shouldSkipSwiping()) {
-            return;
-        }
-        var shouldClose = sheetOffset > sheetHeight.current * CLOSE_OFFSET || velocity > SWIPE_CLOSE_VELOCITY;
-        if (shouldClose) {
-            onClose();
-        }
-        else {
-            setSheetOffset(0);
-            setBackdropOpacity(1);
-        }
-    };
-    var handleSheetSwiped = function () {
-        setScrollLocked(false);
-        scrollableContainerScrollValue.current = 0;
-    };
-    var handleSheetSwiping = function (_a) {
-        var deltaY = _a.deltaY;
-        if (shouldSkipSwiping()) {
-            return;
-        }
-        var offset = getSheetOffset(deltaY);
-        var opacity = getBackdropOpacity(offset);
-        setSheetOffset(offset);
-        setBackdropOpacity(opacity);
-        /**
-         * Если шторка начинает свайпаться, то блокируем скролл внутри нее
-         */
-        if (offset > 0) {
-            setScrollLocked(true);
-        }
-    };
-    var backdropSwipeablehandlers = reactSwipeable.useSwipeable({
-        onSwipedDown: handleBackdropSwipedDown,
-        delta: 100,
-        trackMouse: trackMouse,
-    });
-    var sheetSwipeablehandlers = reactSwipeable.useSwipeable({
-        onSwiping: handleSheetSwiping,
-        onSwipedDown: handleSheetSwipedDown,
-        onSwiped: handleSheetSwiped,
-        delta: 5,
-        trackMouse: trackMouse,
-    });
-    var handleExited = React.useCallback(function (node) {
-        setBackdropOpacity(1);
-        if (transitionProps.onExited) {
-            transitionProps.onExited(node);
-        }
-    }, [transitionProps]);
-    var handleEntered = React.useCallback(function (node, isAppearing) {
-        if (!sheetHeight.current) {
-            sheetHeight.current = node.getBoundingClientRect().height;
-        }
-        setBackdropOpacity(1);
-        if (transitionProps.onEntered) {
-            transitionProps.onEntered(node, isAppearing);
-        }
-    }, [transitionProps]);
-    React.useEffect(function () {
-        if (!open) {
-            setSheetOffset(0);
-        }
-    }, [open]);
-    var getSwipeStyles = function () { return ({
-        transform: sheetOffset ? "translateY(" + sheetOffset + "px)" : '',
-    }); };
-    return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, { open: open, ref: ref, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, onBackdropClick: onClose, scrollHandler: scrollableContainer, Backdrop: components_swipeableBackdrop_Component.SwipeableBackdrop, backdropProps: {
-            opacity: backdropOpacity,
-            handlers: backdropSwipeablehandlers,
-            opacityTimeout: TIMEOUT,
-        }, className: styles__default['default'].modal, transitionProps: components_swipeableBackdrop_Component.__assign(components_swipeableBackdrop_Component.__assign({ appear: true, timeout: TIMEOUT, classNames: styles__default['default'] }, transitionProps), { onExited: handleExited, onEntered: handleEntered }) },
-        React__default['default'].createElement("div", components_swipeableBackdrop_Component.__assign({ className: cn__default['default'](styles__default['default'].component, className, (_b = {},
-                _b[styles__default['default'].withTransition] = !sheetOffset,
-                _b)), style: getSwipeStyles() }, sheetSwipeablehandlers),
-            React__default['default'].createElement("div", { className: styles__default['default'].marker }),
-            React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].scrollableContainer, (_c = {},
-                    _c[styles__default['default'].scrollLocked] = scrollLocked,
-                    _c[styles__default['default'].withPadding] = !actionButton,
-                    _c)), ref: scrollableContainer },
-                title && (React__default['default'].createElement(coreComponentsTypography.Typography.Title, { view: 'small', font: 'system', tag: 'h2', className: styles__default['default'].title, color: 'primary' }, title)),
-                React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].content, contentClassName) }, children),
-                actionButton && React__default['default'].createElement(components_footer_Component.Footer, null, actionButton)))));
-});
-
-exports.BottomSheet = BottomSheet;
-exports.CLOSE_OFFSET = CLOSE_OFFSET;

package/bottom-sheet/cssm/components/footer/Component.d.ts

@@ -1,13 +0,0 @@
-import { FC, ReactNode } from 'react';
-type FooterProps = {
-    /**
-     * Контент футера
-     */
-    children?: ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-};
-declare const Footer: FC<FooterProps>;
-export { FooterProps, Footer };

package/bottom-sheet/cssm/components/footer/Component.js

@@ -1,26 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var coreComponentsBaseModal = require('../../../../base-modal/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 styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-var Footer = function (_a) {
-    var _b;
-    var children = _a.children, className = _a.className;
-    var _c = React.useContext(coreComponentsBaseModal.BaseModalContext), footerHighlighted = _c.footerHighlighted, setHasFooter = _c.setHasFooter;
-    React.useEffect(function () {
-        setHasFooter(true);
-    }, [setHasFooter]);
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].footer, className, (_b = {},
-            _b[styles__default['default'].highlighted] = footerHighlighted,
-            _b)) }, children));
-};
-
-exports.Footer = Footer;