@salutejs/plasma-b2c 1.640.0-dev.0 → 1.641.0

package/dist/styled-components/cjs/components/Modal/Modal.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Modal", {
+    enumerable: true,
+    get: function() {
+        return Modal;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactdom = /*#__PURE__*/ _interop_require_default(require("react-dom"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
+const _styledcomponents1 = require("@salutejs/plasma-new-hope/styled-components");
+const _ModalsContext = require("./ModalsContext");
+const _ModalView = require("./ModalView");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const ESCAPE_KEYCODE = 27;
+const wrapperHideAnimation = (0, _styledcomponents.keyframes)([
+    `from{opacity:1;}to{opacity:0;}`
+]);
+const bodyShowAnimation = (0, _styledcomponents.keyframes)([
+    `from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}`
+]);
+const bodyHideAnimation = (0, _styledcomponents.keyframes)([
+    `from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-100%);}`
+]);
+const StyledWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "Modal__StyledWrapper",
+    componentId: "sc-c1a3a85-0"
+})([
+    `position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;`,
+    ``
+], ({ isHiding })=>isHiding && (0, _styledcomponents.css)([
+        `animation:0.1s `,
+        ` ease-out;`
+    ], wrapperHideAnimation));
+const StyledOverlay = _styledcomponents.default.div.withConfig({
+    displayName: "Modal__StyledOverlay",
+    componentId: "sc-c1a3a85-1"
+})([
+    `position:absolute;`,
+    `;width:100%;height:100%;background-color:`,
+    `;backdrop-filter:var(--backdrop-filter);cursor:`,
+    `;`
+], ({ $withBlur })=>{
+    return (0, _styledcomponents.css)([
+        `--background-color:`,
+        `;--backdrop-filter:`,
+        `;`
+    ], $withBlur ? 'rgba(35, 35, 35, 0.2)' : 'rgba(8, 8, 8, 0.56)', $withBlur ? 'blur(1rem)' : 'none');
+}, ({ transparent })=>transparent ? 'transparent' : 'var(--background-color)', ({ clickable })=>clickable ? 'pointer' : 'default');
+const StyledModal = _styledcomponents.default.div.withConfig({
+    displayName: "Modal__StyledModal",
+    componentId: "sc-c1a3a85-2"
+})([
+    `position:absolute;height:100%;pointer-events:none;`,
+    ``
+], ({ isHiding })=>(0, _styledcomponents.css)([
+        `animation:0.4s `,
+        ` ease-out;`
+    ], isHiding ? bodyHideAnimation : bodyShowAnimation));
+const NoScroll = (0, _styledcomponents.createGlobalStyle)([
+    `body{overflow-y:hidden;}`
+]);
+const Modal = ({ id, isOpen, opened, onClose, onOverlayClick, onEscKeyDown, closeOnEsc = true, closeOnOverlayClick = true, withBlur, initialFocusRef, focusAfterRef, ...rest })=>{
+    const innerIsOpen = Boolean(isOpen || opened);
+    const uniqId = _styledcomponents1.plasmaCore.useUniqId();
+    const innerId = id || uniqId;
+    const wrapperRef = (0, _react.useRef)(null);
+    const portalRef = (0, _react.useRef)(null);
+    const trapRef = (0, _styledcomponents1.useFocusTrap)(true, initialFocusRef, focusAfterRef);
+    const controller = (0, _react.useContext)(_ModalsContext.ModalsContext);
+    const [, forceRender] = (0, _react.useState)(false);
+    const onOverlayKeyDown = (0, _react.useCallback)((event)=>{
+        if (!closeOnOverlayClick) {
+            return;
+        }
+        if (onOverlayClick) {
+            onOverlayClick(event);
+            return;
+        }
+        onClose?.();
+    }, [
+        closeOnOverlayClick,
+        onOverlayClick,
+        onClose
+    ]);
+    (0, _react.useEffect)(()=>{
+        let portal = document.getElementById(_ModalsContext.MODALS_PORTAL_ID);
+        if (!portal) {
+            portal = document.createElement('div');
+            portal.setAttribute('id', _ModalsContext.MODALS_PORTAL_ID);
+            portal.setAttribute('aria-live', 'off');
+            portal.setAttribute('role', 'presentation');
+            portal.style.position = 'relative';
+            portal.style.zIndex = '9000';
+            document.body.appendChild(portal);
+        }
+        portalRef.current = portal;
+        /**
+         * Изменение стейта нужно для того, чтобы модальное окно
+         * отобразилось после записи DOM элемента в portalRef.current
+         */ forceRender(true);
+    }, []);
+    (0, _react.useEffect)(()=>{
+        const onKeyDown = (event)=>{
+            if (closeOnEsc && event.keyCode === ESCAPE_KEYCODE && wrapperRef.current && portalRef.current && portalRef.current.contains(wrapperRef.current) && portalRef.current.children[portalRef.current.children.length - 1] === wrapperRef.current) {
+                if (onEscKeyDown) {
+                    onEscKeyDown(event);
+                    return;
+                }
+                onClose?.();
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return ()=>{
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, [
+        onClose,
+        onEscKeyDown,
+        closeOnEsc
+    ]);
+    (0, _react.useEffect)(()=>{
+        return ()=>{
+            controller.unregister(innerId);
+        };
+    }, [
+        controller.unregister,
+        innerId
+    ]);
+    if (innerIsOpen) {
+        controller.register(innerId);
+    } else {
+        return null;
+    }
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(NoScroll, null), portalRef.current && /*#__PURE__*/ _reactdom.default.createPortal(/*#__PURE__*/ _react.default.createElement(StyledWrapper, {
+        ref: wrapperRef
+    }, /*#__PURE__*/ _react.default.createElement(StyledOverlay, {
+        transparent: controller.items.indexOf(innerId) !== 0,
+        clickable: closeOnOverlayClick,
+        onClick: onOverlayKeyDown,
+        $withBlur: withBlur
+    }), /*#__PURE__*/ _react.default.createElement(StyledModal, null, /*#__PURE__*/ _react.default.createElement(_ModalView.ModalView, {
+        onClose: onClose,
+        ref: trapRef,
+        ...rest
+    }))), portalRef.current));
+};

package/dist/styled-components/cjs/components/Modal/ModalView.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ModalView", {
+    enumerable: true,
+    get: function() {
+        return ModalView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+const _plasmaicons = require("@salutejs/plasma-icons");
+const _Button = require("../_Button");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const StyledWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "ModalView__StyledWrapper",
+    componentId: "sc-53f3095-0"
+})([
+    `display:flex;align-items:center;height:100%;`
+]);
+const StyledBody = _styledcomponents.default.div.withConfig({
+    displayName: "ModalView__StyledBody",
+    componentId: "sc-53f3095-1"
+})([
+    `position:relative;width:25rem;max-width:100%;border-radius:1.25rem;background-color:var(--surface-solid-card);pointer-events:all;`
+]);
+const StyledContent = _styledcomponents.default.div.withConfig({
+    displayName: "ModalView__StyledContent",
+    componentId: "sc-53f3095-2"
+})([
+    `padding:2rem;`
+]);
+const StyledButtonClose = (0, _styledcomponents.default)((0, _Button.Button)({
+    design: 'web'
+})).attrs(()=>({
+        view: 'clear'
+    })).withConfig({
+    displayName: "ModalView__StyledButtonClose",
+    componentId: "sc-53f3095-3"
+})([
+    `position:absolute;top:0;right:0;margin:2rem;width:auto;height:auto;padding:0;`
+]);
+const ModalView = /*#__PURE__*/ _react.default.forwardRef(({ role = 'dialog', closeButtonAriaLabel, children, onClose, showCloseButton = true, ...rest }, ref)=>{
+    return /*#__PURE__*/ _react.default.createElement(StyledWrapper, null, /*#__PURE__*/ _react.default.createElement(StyledBody, {
+        ...rest,
+        ref: ref,
+        role: role,
+        "aria-modal": "true"
+    }, /*#__PURE__*/ _react.default.createElement(StyledContent, null, children), showCloseButton && /*#__PURE__*/ _react.default.createElement(StyledButtonClose, {
+        "aria-label": closeButtonAriaLabel,
+        onClick: onClose,
+        size: "s",
+        contentLeft: /*#__PURE__*/ _react.default.createElement(_plasmaicons.IconClose, {
+            size: "s",
+            color: "inherit"
+        })
+    })));
+});

package/dist/styled-components/cjs/components/Modal/ModalsContext.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get MODALS_PORTAL_ID () {
+        return MODALS_PORTAL_ID;
+    },
+    get ModalsContext () {
+        return ModalsContext;
+    },
+    get ModalsProvider () {
+        return ModalsProvider;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+/**
+ * Хранилище модальных окон.
+ */ class ModalsController {
+    register(id) {
+        const indexOfElement = this.items.indexOf(id);
+        if (indexOfElement >= 0) {
+            return;
+        }
+        return this.items.push(id);
+    }
+    unregister(id) {
+        const indexOfElement = this.items.indexOf(id);
+        if (indexOfElement < 0) {
+            return;
+        }
+        this.items.splice(indexOfElement, 1);
+    }
+    constructor(){
+        _define_property(this, "items", []);
+    }
+}
+const controller = new ModalsController();
+const MODALS_PORTAL_ID = 'plasma-modals-root';
+const ModalsContext = /*#__PURE__*/ _react.default.createContext(controller);
+const ModalsProvider = ({ children })=>{
+    (0, _react.useEffect)(()=>{
+        return ()=>{
+            const portal = document.createElement('div');
+            if (portal && document.body.contains(portal)) {
+                document.body.removeChild(portal);
+            }
+        };
+    }, []);
+    return /*#__PURE__*/ _react.default.createElement(ModalsContext.Provider, {
+        value: controller
+    }, children);
+};

package/dist/styled-components/cjs/components/Modal/index.js

@@ -10,13 +10,15 @@ function _export(target, all) {
 }
 _export(exports, {
     get Modal () {
-        return _plasmahope.Modal;
+        return _Modal.Modal;
     },
     get ModalView () {
-        return _plasmahope.ModalView;
+        return _ModalView.ModalView;
     },
     get ModalsProvider () {
-        return _plasmahope.ModalsProvider;
+        return _ModalsContext.ModalsProvider;
     }
 });
-const _plasmahope = require("@salutejs/plasma-hope");
+const _Modal = require("./Modal");
+const _ModalsContext = require("./ModalsContext");
+const _ModalView = require("./ModalView");

package/dist/styled-components/cjs/components/Range/Range.clear.config.js

@@ -148,6 +148,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 -0.438rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -225,6 +226,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 -0.438rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -302,6 +304,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 -0.438rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0.313rem;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -379,6 +382,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 -0.438rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0.188rem;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -456,6 +460,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 -0.688rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/Range/Range.config.js

@@ -123,6 +123,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -199,6 +200,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -275,6 +277,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0.313rem;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -351,6 +354,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0.188rem;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -427,6 +431,7 @@ const config = {
                 ${_styledcomponents.rangeTokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem;
 
                 ${_styledcomponents.rangeTokens.titleCaptionOffset}: 0;
+                ${_styledcomponents.rangeTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.rangeTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.rangeTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.rangeTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);