@alfalab/core-components 19.11.1 → 20.0.0

package/masked-input/cssm/index.d.ts

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

package/masked-input/cssm/index.js

@@ -1,14 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('react-merge-refs');
-require('text-mask-core');
-require('../../input/cssm');
-require('./index.module.css');
-
-
-
-exports.MaskedInput = Component.MaskedInput;
-exports.PLACEHOLDER_CHAR = Component.PLACEHOLDER_CHAR;

package/masked-input/cssm/index.module.css

@@ -1,3 +0,0 @@
-.textHidden input {
-    opacity: 0;
-}

package/modal/cssm/Component.desktop.d.ts

@@ -1,51 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BaseModalProps } from "../../base-modal";
-type ModalDesktopProps = BaseModalProps & {
-    /**
-     * Ширина модального окна
-     * @default "m"
-     */
-    size?: 's' | 'm' | 'l';
-    /**
-     * Растягивает модальное окно на весь экран
-     */
-    fullscreen?: boolean;
-    /**
-     * Фиксирует позицию модального окна после открытия,
-     * предотвращая скачки, если контент внутри будет меняться
-     */
-    fixedPosition?: boolean;
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
-    hasCloser?: boolean;
-};
-declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
-    /**
-     * Ширина модального окна
-     * @default "m"
-     */
-    size?: "s" | "m" | "l" | undefined;
-    /**
-     * Растягивает модальное окно на весь экран
-     */
-    fullscreen?: boolean | undefined;
-    /**
-     * Фиксирует позицию модального окна после открытия,
-     * предотвращая скачки, если контент внутри будет меняться
-     */
-    fixedPosition?: boolean | undefined;
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
-    hasCloser?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps>;
-    Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
-    Closer: React.FC<import("./components/closer/Component").CloserProps>;
-};
-export { ModalDesktopProps, ModalDesktop };

package/modal/cssm/Component.desktop.js

@@ -1,66 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('./tslib.es6-ce870b46.js');
-var React = require('react');
-var cn = require('classnames');
-var coreComponentsBaseModal = require('../../base-modal/cssm');
-var mergeRefs = require('react-merge-refs');
-require('./Context.js');
-require('../../button/cssm');
-require('./components/closer/index.module.css');
-var components_closer_Component = require('./components/closer/Component.js');
-require('./components/header/Component.js');
-require('./components/header/desktop.module.css');
-var components_header_Component_desktop = require('./components/header/Component.desktop.js');
-require('./components/content/Component.js');
-require('./components/content/desktop.module.css');
-var components_content_Component_desktop = require('./components/content/Component.desktop.js');
-require('./components/footer/layout.module.css');
-require('./components/footer/Component.js');
-require('./components/footer/desktop.module.css');
-var components_footer_Component_desktop = require('./components/footer/Component.desktop.js');
-var styles = require('./desktop.module.css');
-var transitions = require('./transitions.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 transitions__default = /*#__PURE__*/_interopDefaultLegacy(transitions);
-
-var ModalDesktopComponent = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.size, size = _c === void 0 ? 's' : _c, fixedPosition = _a.fixedPosition, fullscreen = _a.fullscreen, children = _a.children, className = _a.className, wrapperClassName = _a.wrapperClassName, _d = _a.transitionProps, transitionProps = _d === void 0 ? {} : _d, restProps = tslib_es6.__rest(_a, ["size", "fixedPosition", "fullscreen", "children", "className", "wrapperClassName", "transitionProps"]);
-    var modalRef = React.useRef(null);
-    var handleEntered = React.useCallback(function (node, isAppearing) {
-        if (fixedPosition && modalRef.current) {
-            var content = modalRef.current.querySelector("." + styles__default['default'].component);
-            if (content) {
-                var marginTop = window.getComputedStyle(content).marginTop;
-                content.style.marginTop = marginTop;
-            }
-        }
-        if (transitionProps.onEntered) {
-            transitionProps.onEntered(node, isAppearing);
-        }
-    }, [fixedPosition, transitionProps]);
-    return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, tslib_es6.__assign({}, restProps, { ref: mergeRefs__default['default']([ref, modalRef]), wrapperClassName: cn__default['default'](styles__default['default'].wrapper, wrapperClassName, (_b = {},
-            _b[styles__default['default'].fullscreen] = fullscreen,
-            _b)), className: cn__default['default'](styles__default['default'].component, className, !fullscreen && styles__default['default'][size]), backdropProps: {
-            invisible: fullscreen,
-        }, transitionProps: tslib_es6.__assign(tslib_es6.__assign({ classNames: transitions__default['default'] }, transitionProps), { onEntered: handleEntered }) }), React__default['default'].Children.map(children, function (child) {
-        return React.isValidElement(child)
-            ? React.cloneElement(child, { size: child.props.size || size, fullscreen: fullscreen })
-            : child;
-    })));
-});
-var ModalDesktop = Object.assign(ModalDesktopComponent, {
-    Content: components_content_Component_desktop.ContentDesktop,
-    Header: components_header_Component_desktop.HeaderDesktop,
-    Footer: components_footer_Component_desktop.FooterDesktop,
-    Closer: components_closer_Component.Closer,
-});
-
-exports.ModalDesktop = ModalDesktop;

package/modal/cssm/Component.mobile.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BaseModalProps } from "../../base-modal";
-type ModalMobileProps = BaseModalProps & {
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
-    hasCloser?: boolean;
-};
-declare const ModalMobile: React.ForwardRefExoticComponent<BaseModalProps & {
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
-    hasCloser?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./components/content/Component").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps>;
-    Closer: React.FC<import("./components/closer/Component").CloserProps>;
-};
-export { ModalMobileProps, ModalMobile };

package/modal/cssm/Component.mobile.js

@@ -1,53 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('./tslib.es6-ce870b46.js');
-var React = require('react');
-var cn = require('classnames');
-var coreComponentsBaseModal = require('../../base-modal/cssm');
-require('./Context.js');
-require('../../button/cssm');
-require('./components/closer/index.module.css');
-var components_closer_Component = require('./components/closer/Component.js');
-require('./components/header/Component.js');
-require('./components/content/Component.js');
-require('./components/footer/layout.module.css');
-require('./components/footer/Component.js');
-var transitions = require('./transitions.module.css');
-var hooks = require('@alfalab/hooks');
-require('./components/header/mobile.module.css');
-var components_header_Component_mobile = require('./components/header/Component.mobile.js');
-require('./components/content/mobile.module.css');
-var components_content_Component_mobile = require('./components/content/Component.mobile.js');
-require('./components/footer/mobile.module.css');
-var components_footer_Component_mobile = require('./components/footer/Component.mobile.js');
-var styles = require('./mobile.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 transitions__default = /*#__PURE__*/_interopDefaultLegacy(transitions);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-var ModalMobileComponent = React.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, restProps = tslib_es6.__rest(_a, ["children", "className"]);
-    var size = hooks.useMedia([
-        ['s', '(max-width: 375px)'],
-        ['m', '(min-width: 376px)'],
-    ], 's')[0];
-    return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, tslib_es6.__assign({}, restProps, { ref: ref, transitionProps: tslib_es6.__assign({ classNames: transitions__default['default'] }, restProps.transitionProps), className: cn__default['default'](className, styles__default['default'].component), backdropProps: {
-            invisible: true,
-        } }), React__default['default'].Children.map(children, function (child) {
-        return React.isValidElement(child)
-            ? React.cloneElement(child, { size: child.props.size || size, fullscreen: true })
-            : child;
-    })));
-});
-var ModalMobile = Object.assign(ModalMobileComponent, {
-    Content: components_content_Component_mobile.ContentMobile,
-    Header: components_header_Component_mobile.HeaderMobile,
-    Footer: components_footer_Component_mobile.FooterMobile,
-    Closer: components_closer_Component.Closer,
-});
-
-exports.ModalMobile = ModalMobile;

package/modal/cssm/Component.responsive.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ModalDesktopProps } from "./Component.desktop";
-import { ModalMobileProps } from "./Component.mobile";
-type ModalResponsiveProps = ModalMobileProps & ModalDesktopProps;
-declare const ModalResponsive: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
-    hasCloser?: boolean | undefined;
-} & {
-    size?: "s" | "m" | "l" | undefined;
-    fullscreen?: boolean | undefined;
-    fixedPosition?: boolean | undefined;
-    hasCloser?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component").HeaderProps>;
-    Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps> | React.FC<import("./components/content/Component").ContentProps>;
-    Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps> | React.FC<import("./components/footer/Component").FooterProps>;
-    Closer: React.FC<import("./components/closer/Component").CloserProps>;
-};
-export { ModalResponsiveProps, ModalResponsive };

package/modal/cssm/Component.responsive.js

@@ -1,68 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('./tslib.es6-ce870b46.js');
-var React = require('react');
-require('classnames');
-require('../../base-modal/cssm');
-require('react-merge-refs');
-require('./Context.js');
-require('../../button/cssm');
-require('./components/closer/index.module.css');
-var components_closer_Component = require('./components/closer/Component.js');
-require('./components/header/Component.js');
-require('./components/header/desktop.module.css');
-require('./components/header/Component.desktop.js');
-require('./components/content/Component.js');
-require('./components/content/desktop.module.css');
-require('./components/content/Component.desktop.js');
-require('./components/footer/layout.module.css');
-require('./components/footer/Component.js');
-require('./components/footer/desktop.module.css');
-require('./components/footer/Component.desktop.js');
-require('./desktop.module.css');
-require('./transitions.module.css');
-var Component_desktop = require('./Component.desktop.js');
-var hooks = require('@alfalab/hooks');
-require('./components/header/mobile.module.css');
-require('./components/header/Component.mobile.js');
-require('./components/content/mobile.module.css');
-require('./components/content/Component.mobile.js');
-require('./components/footer/mobile.module.css');
-require('./components/footer/Component.mobile.js');
-require('./mobile.module.css');
-var Component_mobile = require('./Component.mobile.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var ResponsiveContext = React__default['default'].createContext({
-    view: 'desktop',
-});
-function createResponsive(desktop, mobile) {
-    function ResponsiveChild(props) {
-        var view = React.useContext(ResponsiveContext).view;
-        var Child = view === 'desktop' ? desktop : mobile;
-        return React__default['default'].createElement(Child, tslib_es6.__assign({}, props));
-    }
-    return ResponsiveChild;
-}
-var ModalResponsiveComponent = React.forwardRef(function (_a, ref) {
-    var children = _a.children, restProps = tslib_es6.__rest(_a, ["children"]);
-    var view = hooks.useMedia([
-        ['mobile', '(max-width: 767px)'],
-        ['desktop', '(min-width: 768px)'],
-    ], 'desktop')[0];
-    var contextValue = React.useMemo(function () { return ({ view: view }); }, [view]);
-    var Component = view === 'desktop' ? Component_desktop.ModalDesktop : Component_mobile.ModalMobile;
-    return (React__default['default'].createElement(ResponsiveContext.Provider, { value: contextValue },
-        React__default['default'].createElement(Component, tslib_es6.__assign({ ref: ref }, restProps), children)));
-});
-var ModalResponsive = Object.assign(ModalResponsiveComponent, {
-    Header: createResponsive(Component_desktop.ModalDesktop.Header, Component_mobile.ModalMobile.Header),
-    Content: createResponsive(Component_desktop.ModalDesktop.Content, Component_mobile.ModalMobile.Content),
-    Footer: createResponsive(Component_desktop.ModalDesktop.Footer, Component_mobile.ModalMobile.Footer),
-    Closer: components_closer_Component.Closer,
-});
-
-exports.ModalResponsive = ModalResponsive;

package/modal/cssm/Context.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { BaseModalContext } from "../../base-modal";
-declare const ModalContext: import("react").Context<BaseModalContext>;
-export { ModalContext };

package/modal/cssm/Context.js

@@ -1,7 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var coreComponentsBaseModal = require('../../base-modal/cssm');
-
-var ModalContext = coreComponentsBaseModal.BaseModalContext;
-
-exports.ModalContext = ModalContext;

package/modal/cssm/components/closer/Component.d.ts

@@ -1,17 +0,0 @@
-import { ButtonHTMLAttributes, FC } from 'react';
-type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Позиция крестика
-     */
-    align?: 'left' | 'right';
-    /**
-     * Флаг, что модальное окно открыто на весь экран
-     */
-    fullscreen?: boolean;
-};
-declare const Closer: FC<CloserProps>;
-export { CloserProps, Closer };

package/modal/cssm/components/closer/Component.js

@@ -1,26 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../tslib.es6-ce870b46.js');
-var React = require('react');
-var cn = require('classnames');
-require('../../../../base-modal/cssm');
-var Context = require('../../Context.js');
-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 styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-var Closer = function (_a) {
-    var className = _a.className, fullscreen = _a.fullscreen, align = _a.align, restProps = tslib_es6.__rest(_a, ["className", "fullscreen", "align"]);
-    var onClose = React.useContext(Context.ModalContext).onClose;
-    var handleClick = React.useCallback(function (event) {
-        onClose(event, 'closerClick');
-    }, [onClose]);
-    return (React__default['default'].createElement(coreComponentsButton.Button, tslib_es6.__assign({ type: 'button', view: 'ghost', className: cn__default['default'](styles__default['default'].closer, className, fullscreen && styles__default['default'].fullscreen, align && styles__default['default'][align]), "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick }, restProps)));
-};
-
-exports.Closer = Closer;

package/modal/cssm/components/closer/index.module.css

@@ -1,56 +0,0 @@
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-3xl: 40px;
-}
-:root {
-    --modal-vertical-padding: var(--gap-3xl);
-
-    /* sizes */
-
-    /* paddings */
-
-    /* closer */
-    --modal-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
-
-    /* sticky */
-
-    /* scroll */
-}
-.closer {
-    width: 48px;
-    height: 48px;
-    background-image: var(--modal-closer-icon);
-    background-position: center;
-    background-repeat: no-repeat;
-    flex-shrink: 0;
-    transition: opacity 0.2s ease-out
-}
-.closer:hover {
-        opacity: 0.7;
-    }
-.closer:active {
-        opacity: 0.5;
-    }
-.left,
-.right {
-    position: sticky;
-    top: calc(var(--modal-vertical-padding) * -1);
-}
-.right {
-    margin-left: auto;
-}
-.fullscreen {
-    top: 0;
-}

package/modal/cssm/components/content/Component.d.ts

@@ -1,19 +0,0 @@
-import { FC, ReactNode } from 'react';
-type ContentProps = {
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Растягивает контент на всю высоту
-     */
-    flex?: boolean;
-};
-declare const Content: FC<ContentProps & {
-    styles: Record<string, string>;
-}>;
-export { ContentProps, Content };