@salutejs/plasma-new-hope 0.384.0-dev.0 → 0.385.0

package/dist/emotion/cjs/hooks/useResizeObserver.js

@@ -20,12 +20,9 @@ const useResizeObserver = (ref, callback)=>{
                 callback(current);
             });
         });
-        resizeObserver.observe(ref.current);
+        resizeObserver.observe(current);
         return ()=>{
-            /* istanbul ignore if: убираем проверку на рефы из покрытия */ if (!ref?.current) {
-                return;
-            }
-            resizeObserver.unobserve(ref.current);
+            resizeObserver.disconnect();
         };
     }, [
         ref

package/dist/emotion/cjs/index.js

@@ -3,6 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "plasmaCore", {
+    enumerable: true,
+    get: function() {
+        return _plasmaCore;
+    }
+});
+const _plasmaCore = /*#__PURE__*/ _interop_require_wildcard(require("./plasmaCore"));
 _export_star(require("./mixins"), exports);
 _export_star(require("./engines"), exports);
 _export_star(require("./hooks"), exports);
@@ -113,3 +120,44 @@ function _export_star(from, to) {
     });
     return from;
 }
+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;
+}

package/dist/emotion/cjs/plasmaCore/components/Badge/Badge.js

@@ -0,0 +1,132 @@
+"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 Badge () {
+        return Badge;
+    },
+    get badgeRootSizes () {
+        return badgeRootSizes;
+    },
+    get badgeSizes () {
+        return badgeSizes;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
+const _tokens = require("../../utils/tokens");
+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 badgeSizes = {
+    l: {
+        textMarginX: '0.25rem',
+        textMarginLeftAfterContent: '0.25rem'
+    },
+    s: {
+        textMarginX: '0.125rem',
+        textMarginLeftAfterContent: '0.125rem'
+    }
+};
+const badgeRootSizes = {
+    l: {
+        height: '1.5rem',
+        padding: '0.25rem',
+        minWidth: '1.5rem',
+        borderRadius: '0.75rem',
+        fontSize: '0.75rem'
+    },
+    s: {
+        height: '1rem',
+        padding: '0.125rem',
+        minWidth: '1rem',
+        borderRadius: '0.5rem',
+        fontSize: '0.625rem'
+    }
+};
+const StyledText = _styledcomponents.default.span``;
+const StyledContent = _styledcomponents.default.div`
+    display: flex;
+`;
+const StyledBadge = _styledcomponents.default.div`
+    ${_tokens.caption};
+
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+
+    width: max-content;
+
+    ${({ size, circled })=>(0, _styledcomponents.css)`
+        ${badgeRootSizes[size]};
+        ${circled && (0, _styledcomponents.css)`
+                width: ${badgeRootSizes[size].minWidth};
+                padding-left: 0;
+                padding-right: 0;
+            `}
+
+        ${StyledText} {
+            margin-left: ${badgeSizes[size].textMarginX};
+            margin-right: ${badgeSizes[size].textMarginX};
+        }
+
+        ${StyledContent} ~ ${StyledText} {
+            margin-left: ${badgeSizes[size].textMarginLeftAfterContent};
+        }
+    `};
+`;
+const Badge = ({ size = 'l', text, contentLeft, ...rest })=>/*#__PURE__*/ _react.default.createElement(StyledBadge, {
+        size: size,
+        ...rest
+    }, contentLeft && /*#__PURE__*/ _react.default.createElement(StyledContent, null, contentLeft), text && /*#__PURE__*/ _react.default.createElement(StyledText, null, text));

package/dist/emotion/cjs/plasmaCore/components/Badge/index.js

@@ -0,0 +1,19 @@
+"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 Badge () {
+        return _Badge.Badge;
+    },
+    get badgeSizes () {
+        return _Badge.badgeSizes;
+    }
+});
+const _Badge = require("./Badge");

package/dist/emotion/cjs/plasmaCore/components/Button/Button.js

@@ -0,0 +1,96 @@
+"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 Button () {
+        return Button;
+    },
+    get ButtonContentWrapper () {
+        return ButtonContentWrapper;
+    },
+    get ButtonLoader () {
+        return ButtonLoader;
+    },
+    get ButtonRoot () {
+        return ButtonRoot;
+    },
+    get ButtonText () {
+        return ButtonText;
+    },
+    get StyledSpinner () {
+        return StyledSpinner;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+const _mixins = require("../../utils/mixins");
+const _Spinner = require("../Spinner");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ButtonRoot = _styledcomponents.default.button`
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    a& {
+        text-decoration: none;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    ${({ $isLoading: isLoading })=>!isLoading && _mixins.applyDisabled}
+
+    ${_mixins.applyBlur}
+`;
+const ButtonLoader = _styledcomponents.default.div`
+    position: absolute;
+`;
+const StyledSpinner = (0, _styledcomponents.default)(_Spinner.Spinner)`
+    width: 1.375rem;
+`;
+const ButtonContentWrapper = _styledcomponents.default.span`
+    display: flex;
+    align-items: inherit;
+    justify-content: inherit;
+    width: 100%;
+
+    ${({ $isLoading: isLoading })=>isLoading && 'opacity: 0;'}
+`;
+const ButtonText = _styledcomponents.default.span`
+    box-sizing: border-box;
+
+    ${_mixins.applyEllipsis}
+
+    ${({ $isContentLeft: isContentLeft })=>isContentLeft && 'margin-left: 0.375rem;'}
+    ${({ $isContentRight: isContentRight })=>isContentRight && 'margin-right: 0.375rem;'}
+`;
+const Button = /*#__PURE__*/ _react.default.forwardRef(// eslint-disable-next-line prefer-arrow-callback
+function Button(props, ref) {
+    return /*#__PURE__*/ _react.default.createElement(ButtonRoot, {
+        ref: ref,
+        ...props
+    });
+});
+Button.defaultProps = {
+    pin: 'square-square',
+    outlined: false
+};

package/dist/emotion/cjs/plasmaCore/components/Button/Button.mixins.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getButtonSizesMixin", {
+    enumerable: true,
+    get: function() {
+        return getButtonSizesMixin;
+    }
+});
+const _styledcomponents = require("styled-components");
+const _mixins = require("../../utils/mixins");
+const _utils = require("../../utils/utils");
+const getButtonSizesMixin = (sizes, typos)=>({ size, pin, outlined, focused, $isContentLeft: isContentLeft, $isContentRight: isContentRight, shiftLeft, shiftRight, square, stretch, theme })=>{
+        let { paddingX } = sizes[size];
+        if (square) {
+            paddingX = sizes[size].paddingY;
+        } else if (stretch) {
+            paddingX = sizes[size].paddingStretchX;
+        } else if (isContentLeft || isContentRight) {
+            paddingX = sizes[size].paddingContentX;
+        }
+        return (0, _styledcomponents.css)`
+        height: ${sizes[size].height};
+        padding: ${sizes[size].paddingY} ${paddingX};
+        border-radius: ${(0, _utils.convertRoundnessMatrix)(pin, sizes[size].radius, sizes[size].radiusCircle)};
+
+        ${stretch && 'width: 100%;'}
+        ${square && ` width: ${sizes[size].height};`}
+        ${shiftLeft && `margin-left: calc(-1 * ${paddingX});`}
+        ${shiftRight && `margin-right: calc(-1 * ${paddingX});`}
+        ${typos[size]}
+
+        ${(0, _mixins.addFocus)({
+            ...theme,
+            focused,
+            outlined,
+            outlineRadius: (0, _utils.convertRoundnessMatrix)(pin, `calc(${sizes[size].radius} + var(--plasma-outline-size))`, `calc(${sizes[size].radiusCircle} + var(--plasma-outline-size))`)
+        })}
+    `;
+    };

package/dist/emotion/cjs/plasmaCore/components/Button/Button.props.js

@@ -0,0 +1,67 @@
+"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 buttonSizes () {
+        return buttonSizes;
+    },
+    get buttonTypography () {
+        return buttonTypography;
+    },
+    get buttonViews () {
+        return buttonViews;
+    }
+});
+const _mixins = require("../../utils/mixins");
+const _tokens = require("../../utils/tokens");
+const buttonViews = {
+    primary: _mixins.views.primary,
+    secondary: _mixins.views.secondary,
+    success: _mixins.views.success,
+    warning: _mixins.views.warning,
+    critical: _mixins.views.critical,
+    checked: _mixins.views.checked,
+    overlay: _mixins.views.overlay,
+    clear: _mixins.views.clear
+};
+const buttonSizes = {
+    l: {
+        height: 'var(--plasma-button-l-height)',
+        paddingY: 'var(--plasma-button-l-padding-y)',
+        paddingX: 'var(--plasma-button-l-padding-x)',
+        paddingContentX: 'var(--plasma-button-l-padding-content-x)',
+        paddingStretchX: 'var(--plasma-button-l-padding-stretch-x)',
+        radius: 'var(--plasma-button-l-radius)',
+        radiusCircle: 'var(--plasma-button-l-radius-circle)'
+    },
+    m: {
+        height: 'var(--plasma-button-m-height)',
+        paddingY: 'var(--plasma-button-m-padding-y)',
+        paddingX: 'var(--plasma-button-m-padding-x)',
+        paddingContentX: 'var(--plasma-button-m-padding-content-x)',
+        paddingStretchX: 'var(--plasma-button-m-padding-stretch-x)',
+        radius: 'var(--plasma-button-m-radius)',
+        radiusCircle: 'var(--plasma-button-m-radius-circle)'
+    },
+    s: {
+        height: 'var(--plasma-button-s-height)',
+        paddingY: 'var(--plasma-button-s-padding-y)',
+        paddingX: 'var(--plasma-button-s-padding-x)',
+        paddingContentX: 'var(--plasma-button-s-padding-content-x)',
+        paddingStretchX: 'var(--plasma-button-s-padding-stretch-x)',
+        radius: 'var(--plasma-button-s-radius)',
+        radiusCircle: 'var(--plasma-button-s-radius-circle)'
+    }
+};
+const buttonTypography = {
+    l: _tokens.button1,
+    m: _tokens.button1,
+    s: _tokens.button2
+};

package/dist/emotion/cjs/plasmaCore/components/Button/Button.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/emotion/cjs/plasmaCore/components/Button/createButton.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createButton", {
+    enumerable: true,
+    get: function() {
+        return createButton;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Button = require("./Button");
+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;
+}
+function createButton(Root = _Button.ButtonRoot) {
+    // eslint-disable-next-line prefer-arrow-callback
+    return /*#__PURE__*/ (0, _react.forwardRef)(function Button({ children, text, contentLeft, contentRight, square, deviceScale, loader = /*#__PURE__*/ _react.default.createElement(_Button.StyledSpinner, {
+        color: "currentColor",
+        size: 56,
+        deviceScale: deviceScale
+    }), disabled, isLoading, type = 'button', ...rest }, ref) {
+        const isContentLeft = Boolean(contentLeft);
+        const isContentRight = Boolean(contentRight);
+        return /*#__PURE__*/ _react.default.createElement(Root, {
+            ref: ref,
+            type: type,
+            $isContentLeft: isContentLeft,
+            $isContentRight: isContentRight,
+            $isLoading: isLoading,
+            disabled: isLoading || disabled,
+            square: square !== undefined ? square : !text && !children,
+            ...rest
+        }, isLoading && /*#__PURE__*/ _react.default.createElement(_Button.ButtonLoader, null, loader), /*#__PURE__*/ _react.default.createElement(_Button.ButtonContentWrapper, {
+            $isLoading: isLoading
+        }, children, !children && contentLeft, !children && text && /*#__PURE__*/ _react.default.createElement(_Button.ButtonText, {
+            $isContentLeft: isContentLeft,
+            $isContentRight: isContentRight
+        }, text), !children && contentRight));
+    });
+}

package/dist/emotion/cjs/plasmaCore/components/Button/index.js

@@ -0,0 +1,37 @@
+"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 Button () {
+        return _Button.Button;
+    },
+    get ButtonRoot () {
+        return _Button.ButtonRoot;
+    },
+    get buttonSizes () {
+        return _Buttonprops.buttonSizes;
+    },
+    get buttonTypography () {
+        return _Buttonprops.buttonTypography;
+    },
+    get buttonViews () {
+        return _Buttonprops.buttonViews;
+    },
+    get createButton () {
+        return _createButton.createButton;
+    },
+    get getButtonSizesMixin () {
+        return _Buttonmixins.getButtonSizesMixin;
+    }
+});
+const _Button = require("./Button");
+const _Buttonprops = require("./Button.props");
+const _Buttonmixins = require("./Button.mixins");
+const _createButton = require("./createButton");

package/dist/emotion/cjs/plasmaCore/components/Card/Card.js

@@ -0,0 +1,119 @@
+"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 Card () {
+        return Card;
+    },
+    get StyledCard () {
+        return StyledCard;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
+const _tokens = require("../../utils/tokens");
+const _mixins = require("../../utils/mixins");
+const _Typography = require("../Typography");
+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;
+}
+// В этих константах задаем размеры в em, чтобы не зависеть напрямую от пикселей
+// В то же время в числителях - значения в пикселях, взятые из макета
+const fontSize = 16;
+const shadowOffset = 8 / fontSize;
+const shadowSize = 24 / fontSize;
+const outlineSize = 2 / fontSize;
+const DEFAULT_ROUNDNESS = 20;
+const StyledCard = (0, _styledcomponents.default)(_Typography.Body1)`
+    ${_mixins.applyDisabled}
+    ${_mixins.applyRoundness};
+
+    position: relative;
+
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    flex-shrink: 0;
+
+    background: ${_tokens.surfaceCard};
+    box-shadow: 0 ${shadowOffset}em ${shadowSize}em rgba(0, 0, 0, 0.1);
+
+    transition: ${({ theme })=>theme.lowPerformance ? 'unset' : 'transform 0.4s ease-in-out'};
+
+    ${({ focused, outlined, roundness, scaleOnFocus, theme })=>(0, _styledcomponents.css)`
+        ${(0, _mixins.addFocus)({
+        lowPerformance: theme.lowPerformance,
+        focused,
+        outlined,
+        outlineSize: `${outlineSize}rem`,
+        outlineRadius: `${_mixins.radiuses[roundness] + outlineSize}rem`
+    })}
+
+        ${scaleOnFocus && (0, _mixins.syntheticFocus)((0, _styledcomponents.css)`
+                & {
+                    transform: scale(1.04);
+                }
+            `, focused)}
+
+        &:focus {
+            outline: none;
+        }
+    `}
+`;
+const Card = /*#__PURE__*/ _react.default.forwardRef(function Card({ roundness = DEFAULT_ROUNDNESS, children, ...rest }, ref) {
+    return /*#__PURE__*/ _react.default.createElement(StyledCard, {
+        ref: ref,
+        roundness: roundness,
+        ...rest
+    }, children);
+});