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

package/dist/emotion/es/hooks/useDisableScroll.js

@@ -3,19 +3,19 @@ export function useDisableScroll(ref, enabled = true) {
     useEffect(()=>{
         if (!enabled || !ref.current) return;
         const el = ref.current;
-        const preventScroll = (e)=>{
-            e.preventDefault();
-            e.stopPropagation();
+        // Вертикальный wheel оставляем странице. Горизонтальный жест не должен прокручивать предка.
+        const preventHorizontalWheel = (event)=>{
+            if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
         };
-        el.addEventListener('wheel', preventScroll, {
-            passive: false
-        });
-        el.addEventListener('touchmove', preventScroll, {
+        el.addEventListener('wheel', preventHorizontalWheel, {
             passive: false
         });
         return ()=>{
-            el.removeEventListener('wheel', preventScroll);
-            el.removeEventListener('touchmove', preventScroll);
+            el.removeEventListener('wheel', preventHorizontalWheel);
         };
     }, [
         ref,

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

@@ -15,12 +15,9 @@ import { useEffect } from "react";
                 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/es/index.js

@@ -1,4 +1,5 @@
 // TODO: #723 Добавить collectPackageInfo
+export * as plasmaCore from "./plasmaCore";
 export * from "./mixins";
 export * from "./engines";
 export * from "./hooks";

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

@@ -0,0 +1,70 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { caption } from "../../utils/tokens";
+/**
+ * Размеры в ремах.
+ */ export const badgeSizes = {
+    l: {
+        textMarginX: '0.25rem',
+        textMarginLeftAfterContent: '0.25rem'
+    },
+    s: {
+        textMarginX: '0.125rem',
+        textMarginLeftAfterContent: '0.125rem'
+    }
+};
+export 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 = styled.span``;
+const StyledContent = styled.div`
+    display: flex;
+`;
+const StyledBadge = styled.div`
+    ${caption};
+
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+
+    width: max-content;
+
+    ${({ size, circled })=>css`
+        ${badgeRootSizes[size]};
+        ${circled && 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};
+        }
+    `};
+`;
+/**
+ * Небольшая бирка для ячеек и карточек.
+ * Компонент может отображаться в нескольких размерах и цветах, может содержать текст и/или иконку.
+ */ export const Badge = ({ size = 'l', text, contentLeft, ...rest })=>/*#__PURE__*/ React.createElement(StyledBadge, {
+        size: size,
+        ...rest
+    }, contentLeft && /*#__PURE__*/ React.createElement(StyledContent, null, contentLeft), text && /*#__PURE__*/ React.createElement(StyledText, null, text));

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

@@ -0,0 +1 @@
+export { Badge, badgeSizes } from "./Badge";

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

@@ -0,0 +1,76 @@
+import React from "react";
+import styled from "styled-components";
+import { applyDisabled, applyBlur, applyEllipsis } from "../../utils/mixins";
+import { Spinner } from "../Spinner";
+/**
+ * Корневой элемент для стилизации кнопки.
+ * Должен быть передан в функцию `createButton`.
+ */ export const ButtonRoot = styled.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 && applyDisabled}
+
+    ${applyBlur}
+`;
+/**
+ * Элемент лоадера для кнопки.
+ */ export const ButtonLoader = styled.div`
+    position: absolute;
+`;
+/**
+ * Спиннер по умолчанию с фиксированной шириной.
+ */ export const StyledSpinner = styled(Spinner)`
+    width: 1.375rem;
+`;
+/**
+ * Обёртка для содержимого кнопки.
+ */ export const ButtonContentWrapper = styled.span`
+    display: flex;
+    align-items: inherit;
+    justify-content: inherit;
+    width: 100%;
+
+    ${({ $isLoading: isLoading })=>isLoading && 'opacity: 0;'}
+`;
+/**
+ * A text wrapping element, that used when `text` prop is passed.
+ * @private
+ */ export const ButtonText = styled.span`
+    box-sizing: border-box;
+
+    ${applyEllipsis}
+
+    ${({ $isContentLeft: isContentLeft })=>isContentLeft && 'margin-left: 0.375rem;'}
+    ${({ $isContentRight: isContentRight })=>isContentRight && 'margin-right: 0.375rem;'}
+`;
+/**
+ * Базовая кнопка.
+ * @deprecated
+ */ export const Button = /*#__PURE__*/ React.forwardRef(// eslint-disable-next-line prefer-arrow-callback
+function Button(props, ref) {
+    return /*#__PURE__*/ React.createElement(ButtonRoot, {
+        ref: ref,
+        ...props
+    });
+});
+Button.defaultProps = {
+    pin: 'square-square',
+    outlined: false
+};

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

@@ -0,0 +1,35 @@
+import { css } from "styled-components";
+import { addFocus } from "../../utils/mixins";
+import { convertRoundnessMatrix } from "../../utils/utils";
+/**
+ * Создание специализированного миксина со своими размерами и типографикой.
+ * @param {Record<string, object>} sizes
+ * @param {Record<string, object>} typos
+ */ export 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 css`
+        height: ${sizes[size].height};
+        padding: ${sizes[size].paddingY} ${paddingX};
+        border-radius: ${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]}
+
+        ${addFocus({
+            ...theme,
+            focused,
+            outlined,
+            outlineRadius: convertRoundnessMatrix(pin, `calc(${sizes[size].radius} + var(--plasma-outline-size))`, `calc(${sizes[size].radiusCircle} + var(--plasma-outline-size))`)
+        })}
+    `;
+    };

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

@@ -0,0 +1,52 @@
+import { views } from "../../utils/mixins";
+import { button1, button2 } from "../../utils/tokens";
+/**
+ * Цветовые виды.
+ */ export const buttonViews = {
+    primary: views.primary,
+    secondary: views.secondary,
+    success: views.success,
+    warning: views.warning,
+    critical: views.critical,
+    checked: views.checked,
+    overlay: views.overlay,
+    clear: views.clear
+};
+/**
+ * Размеры в rem в соответствии с дизайном.
+ */ export 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)'
+    }
+};
+/**
+ * Размеры типографики кнопки.
+ */ export const buttonTypography = {
+    l: button1,
+    m: button1,
+    s: button2
+};

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

@@ -0,0 +1,3 @@
+/**
+ * @private
+ */ export { };

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

@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+import { ButtonContentWrapper, ButtonLoader, ButtonRoot, ButtonText, StyledSpinner } from "./Button";
+/**
+ * Функция для создания компонента Button,
+ * что дает возможность кастомизировать вид, пропсы и т.п.,
+ * при этом сохраняя в базе общий интерфейс.
+ */ export function createButton(Root = ButtonRoot) {
+    // eslint-disable-next-line prefer-arrow-callback
+    return /*#__PURE__*/ forwardRef(function Button({ children, text, contentLeft, contentRight, square, deviceScale, loader = /*#__PURE__*/ React.createElement(StyledSpinner, {
+        color: "currentColor",
+        size: 56,
+        deviceScale: deviceScale
+    }), disabled, isLoading, type = 'button', ...rest }, ref) {
+        const isContentLeft = Boolean(contentLeft);
+        const isContentRight = Boolean(contentRight);
+        return /*#__PURE__*/ React.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.createElement(ButtonLoader, null, loader), /*#__PURE__*/ React.createElement(ButtonContentWrapper, {
+            $isLoading: isLoading
+        }, children, !children && contentLeft, !children && text && /*#__PURE__*/ React.createElement(ButtonText, {
+            $isContentLeft: isContentLeft,
+            $isContentRight: isContentRight
+        }, text), !children && contentRight));
+    });
+}

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

@@ -0,0 +1,4 @@
+export { Button, ButtonRoot } from "./Button";
+export { buttonViews, buttonSizes, buttonTypography } from "./Button.props";
+export { getButtonSizesMixin } from "./Button.mixins";
+export { createButton } from "./createButton";

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

@@ -0,0 +1,58 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { surfaceCard } from "../../utils/tokens";
+import { addFocus, applyDisabled, applyRoundness, radiuses, syntheticFocus } from "../../utils/mixins";
+import { Body1 } from "../Typography";
+// В этих константах задаем размеры в em, чтобы не зависеть напрямую от пикселей
+// В то же время в числителях - значения в пикселях, взятые из макета
+const fontSize = 16;
+const shadowOffset = 8 / fontSize;
+const shadowSize = 24 / fontSize;
+const outlineSize = 2 / fontSize;
+const DEFAULT_ROUNDNESS = 20;
+export const StyledCard = styled(Body1)`
+    ${applyDisabled}
+    ${applyRoundness};
+
+    position: relative;
+
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    flex-shrink: 0;
+
+    background: ${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 })=>css`
+        ${addFocus({
+        lowPerformance: theme.lowPerformance,
+        focused,
+        outlined,
+        outlineSize: `${outlineSize}rem`,
+        outlineRadius: `${radiuses[roundness] + outlineSize}rem`
+    })}
+
+        ${scaleOnFocus && syntheticFocus(css`
+                & {
+                    transform: scale(1.04);
+                }
+            `, focused)}
+
+        &:focus {
+            outline: none;
+        }
+    `}
+`;
+/**
+ * Контейнер со скругленными углами с возможностью фокусировки на нем.
+ */ // eslint-disable-next-line prefer-arrow-callback
+export const Card = /*#__PURE__*/ React.forwardRef(function Card({ roundness = DEFAULT_ROUNDNESS, children, ...rest }, ref) {
+    return /*#__PURE__*/ React.createElement(StyledCard, {
+        ref: ref,
+        roundness: roundness,
+        ...rest
+    }, children);
+});

package/dist/emotion/es/plasmaCore/components/Card/CardBody.js

@@ -0,0 +1,18 @@
+import React from "react";
+import styled from "styled-components";
+/**
+ * Помещается в ``<Card />`` и скругляет рамки содержимого внутри него.
+ * Обязательно к использованию для корректного отображения скругленных углов контента.
+ */ export const CardBody = styled.div`
+    position: relative;
+
+    display: flex;
+    overflow: hidden;
+    flex: 1;
+    flex-direction: column;
+
+    box-sizing: content-box;
+    width: 100%;
+
+    border-radius: inherit;
+`;

package/dist/emotion/es/plasmaCore/components/Card/CardContent.js

@@ -0,0 +1,33 @@
+import React from "react";
+import styled, { css } from "styled-components";
+/**
+ * Компонент для отображения как текстового, так и любого другого контента.
+ */ export const CardContent = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    position: relative;
+
+    box-sizing: border-box;
+    padding: ${({ compact })=>compact ? 0.375 : 1}rem 1rem;
+
+    border-radius: inherit;
+
+    ${({ disabled })=>disabled && css`
+            opacity: 0.5;
+        `}
+
+    ${({ cover, coverGradient = true })=>cover && css`
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+
+            justify-content: flex-end;
+
+            ${coverGradient && css`
+                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.74) 100%);
+            `};
+        `}
+`;

package/dist/emotion/es/plasmaCore/components/Card/CardMedia.js

@@ -0,0 +1,30 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { Image } from "../Image";
+const StyledImage = styled(Image)`
+    background-size: cover;
+
+    ${({ $disabled })=>$disabled && css`
+            opacity: 0.5;
+        `}
+`;
+const StyledRoot = styled.div`
+    position: relative;
+`;
+/**
+ * Компонент для отображения картинок.
+ */ export const CardMedia = ({ disabled, placeholder, style, children, className, ...props })=>{
+    const imgStyle = {
+        ...style
+    };
+    if (placeholder && !props.src) {
+        imgStyle.backgroundImage = `url('${placeholder}')`;
+    }
+    return /*#__PURE__*/ React.createElement(StyledRoot, {
+        className: className
+    }, /*#__PURE__*/ React.createElement(StyledImage, {
+        $disabled: disabled,
+        style: imgStyle,
+        ...props
+    }), children);
+};

package/dist/emotion/es/plasmaCore/components/Card/CardPrice.js

@@ -0,0 +1,35 @@
+import React from "react"; // eslint-disable-line
+import styled from "styled-components";
+import { buttonAccent, primary, tertiary } from "../../utils/tokens";
+import { Price } from "../Price";
+import { Body2 } from "../Typography";
+const StyledRoot = styled(Body2)`
+    display: flex;
+    box-sizing: border-box;
+
+    margin-top: 0.75rem;
+`;
+const StyledPrice = styled(Price)`
+    height: 2.5rem;
+    color: ${primary};
+`;
+const StyledOldPrice = styled(Price)`
+    height: 2.5rem;
+    margin-left: 0.5rem;
+    color: ${tertiary};
+`;
+const StyledCount = styled(Body2)`
+    box-sizing: border-box;
+    height: 2.5rem;
+    margin-left: 0.5rem;
+
+    color: ${buttonAccent};
+`;
+export const CardPrice = ({ count, currency, oldPrice, price, ...rest })=>{
+    return /*#__PURE__*/ React.createElement(StyledRoot, rest, /*#__PURE__*/ React.createElement(StyledPrice, {
+        currency: currency
+    }, price), oldPrice && /*#__PURE__*/ React.createElement(StyledOldPrice, {
+        currency: currency,
+        stroke: true
+    }, oldPrice), count ? /*#__PURE__*/ React.createElement(StyledCount, null, "×", count) : '');
+};

package/dist/emotion/es/plasmaCore/components/Card/CardTypography.js

@@ -0,0 +1,54 @@
+/* stylelint-disable */ // TODO:
+import styled, { css } from "styled-components";
+import { primary, secondary, tertiary } from "../../utils/tokens";
+import { Body1, Body2, ParagraphText1, ParagraphText2, Headline1, Headline2, Headline3, Footnote1, Footnote2 } from "../Typography";
+const views = {
+    primary,
+    secondary,
+    tertiary
+};
+const linesMixin = ({ lines = 2 })=>css`
+    display: -webkit-box;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    white-space: normal;
+
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: ${lines};
+`;
+const viewMixin = ({ view = 'primary' })=>css`
+    transition: ${({ theme })=>theme.lowPerformance ? 'unset' : 'color 0.1s ease-in-out'};
+    color: ${views[view]};
+`;
+export const CardHeadline1 = styled(Headline1)`
+    ${viewMixin};
+`;
+export const CardHeadline2 = styled(Headline2)`
+    ${viewMixin};
+`;
+export const CardHeadline3 = styled(Headline3)`
+    ${viewMixin};
+`;
+export const CardFootnote1 = styled(Footnote1)`
+    ${viewMixin};
+`;
+export const CardFootnote2 = styled(Footnote2)`
+    ${viewMixin};
+`;
+export const CardBody1 = styled(Body1)`
+    ${linesMixin};
+    ${viewMixin};
+`;
+export const CardBody2 = styled(Body2)`
+    ${linesMixin};
+    ${viewMixin};
+`;
+export const CardParagraph1 = styled(ParagraphText1)`
+    ${linesMixin};
+    ${viewMixin};
+`;
+export const CardParagraph2 = styled(ParagraphText2)`
+    ${linesMixin};
+    ${viewMixin};
+`;

package/dist/emotion/es/plasmaCore/components/Card/index.js

@@ -0,0 +1,6 @@
+export { Card, StyledCard } from "./Card";
+export { CardBody } from "./CardBody";
+export { CardContent } from "./CardContent";
+export { CardMedia } from "./CardMedia";
+export { CardPrice } from "./CardPrice";
+export * from "./CardTypography";