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

package/dist/styled-components/es/plasmaCore/utils/mixins/applyView.js

@@ -0,0 +1,46 @@
+import { accent, white, text, buttonAccent, buttonSecondary, buttonSuccess, buttonWarning, buttonCritical, buttonChecked, transparent, background, blackSecondary } from "../tokens";
+/**
+ * Общие цветовые стили оформления кнопок, баджей и т.п.
+ */ export const views = {
+    accent: {
+        backgroundColor: accent,
+        color: white
+    },
+    primary: {
+        backgroundColor: buttonAccent,
+        color: white
+    },
+    secondary: {
+        backgroundColor: buttonSecondary,
+        color: text
+    },
+    success: {
+        backgroundColor: buttonSuccess,
+        color: white
+    },
+    warning: {
+        backgroundColor: buttonWarning,
+        color: white
+    },
+    critical: {
+        backgroundColor: buttonCritical,
+        color: white
+    },
+    checked: {
+        backgroundColor: buttonChecked,
+        /**
+         * FixMe: Заменить на соответствующий цвет при исправлении токенов дизайнерами
+         */ color: background
+    },
+    clear: {
+        backgroundColor: transparent,
+        color: text
+    },
+    overlay: {
+        backgroundColor: blackSecondary,
+        color: white
+    }
+};
+/**
+ * Миксин для применения общих цветовых стилей.
+ */ export const applyView = ({ view })=>views[view];

package/dist/styled-components/es/plasmaCore/utils/mixins/blur.js

@@ -0,0 +1,6 @@
+export const blurs = {
+    small: '27px',
+    medium: '37px',
+    large: '50px'
+};
+export const applyBlur = ({ blur })=>blur && `backdrop-filter: blur(${blurs[blur]});`;

package/dist/styled-components/es/plasmaCore/utils/mixins/index.js

@@ -0,0 +1,13 @@
+export { addFocus, syntheticFocus } from "./addFocus";
+export { applyBlur, blurs } from "./blur";
+export { applyDisabled } from "./applyDisabled";
+export { applyEllipsis } from "./applyEllipsis";
+export { applyMaxLines } from "./applyMaxLines";
+export { applyNoSelect } from "./applyNoSelect";
+export { applyRoundness, radiuses } from "./applyRoundness";
+export { applySkeletonGradient } from "./applySkeletonGradient";
+export { applyView, views } from "./applyView";
+export { applyScrollSnap } from "./applyScrollSnap";
+export * from "./shadows";
+export { applyHyphens } from "@salutejs/plasma-typo";
+export { applySpacing, spacing } from "@salutejs/plasma-typo";

package/dist/styled-components/es/plasmaCore/utils/mixins/shadows.js

@@ -0,0 +1,5 @@
+export const shadows = {
+    tiny: '0 1px 1px rgba(0, 0, 0, 0.11)',
+    small: '0 1px 4px rgba(0, 0, 0, 0.05)',
+    medium: '0 1px 1px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.08)'
+};

package/dist/styled-components/es/plasmaCore/utils/tokens/colors.js

@@ -0,0 +1,48 @@
+export const white = 'var(--plasma-colors-white)';
+export const whitePrimary = 'var(--plasma-colors-white-primary)';
+export const whiteSecondary = 'var(--plasma-colors-white-secondary)';
+export const whiteTertiary = 'var(--plasma-colors-white-tertiary)';
+export const black = 'var(--plasma-colors-black)';
+export const blackPrimary = 'var(--plasma-colors-black-primary)';
+export const blackSecondary = 'var(--plasma-colors-black-secondary)';
+export const blackTertiary = 'var(--plasma-colors-black-tertiary)';
+export const dark01 = 'var(--plasma-colors-dark01)';
+export const dark02 = 'var(--plasma-colors-dark02)';
+export const dark03 = 'var(--plasma-colors-dark03)';
+export const transparent = 'var(--plasma-colors-transparent)';
+export const text = 'var(--plasma-colors-text)';
+export const primary = 'var(--plasma-colors-primary)';
+export const secondary = 'var(--plasma-colors-secondary)';
+export const tertiary = 'var(--plasma-colors-tertiary)';
+export const inverse = 'var(--plasma-colors-inverse)';
+export const paragraph = 'var(--plasma-colors-paragraph)';
+export const background = 'var(--plasma-colors-background)';
+export const backgroundPrimary = 'var(--plasma-colors-background-primary)'; // ToDo: https://github.com/salute-developers/plasma/issues/1107
+export const backgroundSecondary = 'var(--plasma-colors-background-secondary)'; // ToDo: https://github.com/salute-developers/plasma/issues/1107
+export const backgroundTertiary = 'var(--plasma-colors-background-tertiary)'; // ToDo: https://github.com/salute-developers/plasma/issues/1107
+export const success = 'var(--plasma-colors-success)';
+export const warning = 'var(--plasma-colors-warning)';
+export const critical = 'var(--plasma-colors-critical)';
+export const overlay = 'var(--plasma-colors-overlay)';
+export const surfaceLiquid01 = 'var(--plasma-colors-surface-liquid01)'; // ToDo: https://github.com/salute-developers/plasma/issues/1107
+export const surfaceLiquid02 = 'var(--plasma-colors-surface-liquid02)'; // ToDo: https://github.com/salute-developers/plasma/issues/1107
+export const surfaceLiquid03 = 'var(--plasma-colors-surface-liquid03)'; // ToDo: https://github.com/salute-developers/plasma/issues/1107
+export const surfaceSolid01 = 'var(--plasma-colors-surface-solid01)';
+export const surfaceSolid02 = 'var(--plasma-colors-surface-solid02)';
+export const surfaceSolid03 = 'var(--plasma-colors-surface-solid03)';
+export const surfaceCard = 'var(--plasma-colors-surface-card)';
+export const buttonPrimary = 'var(--plasma-colors-button-primary)';
+export const buttonSecondary = 'var(--plasma-colors-button-secondary)';
+export const buttonSuccess = 'var(--plasma-colors-button-success)';
+export const buttonWarning = 'var(--plasma-colors-button-warning)';
+export const buttonCritical = 'var(--plasma-colors-button-critical)';
+export const buttonChecked = 'var(--plasma-colors-button-checked)';
+export const speechBubbleSent = 'var(--plasma-colors-speech-bubble-sent)';
+export const speechBubbleReceived = 'var(--plasma-colors-speech-bubble-received)';
+export const accent = 'var(--plasma-colors-accent)';
+export const buttonAccent = 'var(--plasma-colors-button-accent)';
+export const buttonFocused = 'var(--plasma-colors-button-focused)';
+export const gradient = 'var(--plasma-colors-gradient)';
+export const voicePhraseGradient = 'var(--plasma-colors-voice-phrase-gradient)';
+export const skeletonGradient = 'var(--plasma-colors-skeleton-gradient)';
+export const skeletonGradientLighter = 'var(--plasma-colors-skeleton-gradient-lighter)';

package/dist/styled-components/es/plasmaCore/utils/tokens/index.js

@@ -0,0 +1,2 @@
+export * from "./colors";
+export * from "./typography";

package/dist/styled-components/es/plasmaCore/utils/tokens/typography.js

@@ -0,0 +1,144 @@
+export const body1 = {
+    fontFamily: 'var(--plasma-typo-body1-font-family)',
+    fontWeight: 'var(--plasma-typo-body1-font-weight)',
+    fontStyle: 'var(--plasma-typo-body1-font-style)',
+    fontSize: 'var(--plasma-typo-body1-font-size)',
+    letterSpacing: 'var(--plasma-typo-body1-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-body1-line-height)'
+};
+export const body2 = {
+    fontFamily: 'var(--plasma-typo-body2-font-family)',
+    fontWeight: 'var(--plasma-typo-body2-font-weight)',
+    fontStyle: 'var(--plasma-typo-body2-font-style)',
+    fontSize: 'var(--plasma-typo-body2-font-size)',
+    letterSpacing: 'var(--plasma-typo-body2-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-body2-line-height)'
+};
+export const body3 = {
+    fontFamily: 'var(--plasma-typo-body3-font-family)',
+    fontWeight: 'var(--plasma-typo-body3-font-weight)',
+    fontStyle: 'var(--plasma-typo-body3-font-style)',
+    fontSize: 'var(--plasma-typo-body3-font-size)',
+    letterSpacing: 'var(--plasma-typo-body3-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-body3-line-height)'
+};
+export const button1 = {
+    fontFamily: 'var(--plasma-typo-button1-font-family)',
+    fontWeight: 'var(--plasma-typo-button1-font-weight)',
+    fontStyle: 'var(--plasma-typo-button1-font-style)',
+    fontSize: 'var(--plasma-typo-button1-font-size)',
+    letterSpacing: 'var(--plasma-typo-button1-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-button1-line-height)'
+};
+export const button2 = {
+    fontFamily: 'var(--plasma-typo-button2-font-family)',
+    fontWeight: 'var(--plasma-typo-button2-font-weight)',
+    fontStyle: 'var(--plasma-typo-button2-font-style)',
+    fontSize: 'var(--plasma-typo-button2-font-size)',
+    letterSpacing: 'var(--plasma-typo-button2-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-button2-line-height)'
+};
+export const caption = {
+    fontFamily: 'var(--plasma-typo-caption-font-family)',
+    fontWeight: 'var(--plasma-typo-caption-font-weight)',
+    fontStyle: 'var(--plasma-typo-caption-font-style)',
+    fontSize: 'var(--plasma-typo-caption-font-size)',
+    letterSpacing: 'var(--plasma-typo-caption-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-caption-line-height)'
+};
+export const display1 = {
+    fontFamily: 'var(--plasma-typo-display1-font-family)',
+    fontWeight: 'var(--plasma-typo-display1-font-weight)',
+    fontStyle: 'var(--plasma-typo-display1-font-style)',
+    fontSize: 'var(--plasma-typo-display1-font-size)',
+    letterSpacing: 'var(--plasma-typo-display1-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-display1-line-height)'
+};
+export const display2 = {
+    fontFamily: 'var(--plasma-typo-display2-font-family)',
+    fontWeight: 'var(--plasma-typo-display2-font-weight)',
+    fontStyle: 'var(--plasma-typo-display2-font-style)',
+    fontSize: 'var(--plasma-typo-display2-font-size)',
+    letterSpacing: 'var(--plasma-typo-display2-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-display2-line-height)'
+};
+export const display3 = {
+    fontFamily: 'var(--plasma-typo-display3-font-family)',
+    fontWeight: 'var(--plasma-typo-display3-font-weight)',
+    fontStyle: 'var(--plasma-typo-display3-font-style)',
+    fontSize: 'var(--plasma-typo-display3-font-size)',
+    letterSpacing: 'var(--plasma-typo-display3-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-display3-line-height)'
+};
+export const footnote1 = {
+    fontFamily: 'var(--plasma-typo-footnote1-font-family)',
+    fontWeight: 'var(--plasma-typo-footnote1-font-weight)',
+    fontStyle: 'var(--plasma-typo-footnote1-font-style)',
+    fontSize: 'var(--plasma-typo-footnote1-font-size)',
+    letterSpacing: 'var(--plasma-typo-footnote1-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-footnote1-line-height)'
+};
+export const footnote2 = {
+    fontFamily: 'var(--plasma-typo-footnote2-font-family)',
+    fontWeight: 'var(--plasma-typo-footnote2-font-weight)',
+    fontStyle: 'var(--plasma-typo-footnote2-font-style)',
+    fontSize: 'var(--plasma-typo-footnote2-font-size)',
+    letterSpacing: 'var(--plasma-typo-footnote2-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-footnote2-line-height)'
+};
+export const headline1 = {
+    fontFamily: 'var(--plasma-typo-headline1-font-family)',
+    fontWeight: 'var(--plasma-typo-headline1-font-weight)',
+    fontStyle: 'var(--plasma-typo-headline1-font-style)',
+    fontSize: 'var(--plasma-typo-headline1-font-size)',
+    letterSpacing: 'var(--plasma-typo-headline1-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-headline1-line-height)'
+};
+export const headline2 = {
+    fontFamily: 'var(--plasma-typo-headline2-font-family)',
+    fontWeight: 'var(--plasma-typo-headline2-font-weight)',
+    fontStyle: 'var(--plasma-typo-headline2-font-style)',
+    fontSize: 'var(--plasma-typo-headline2-font-size)',
+    letterSpacing: 'var(--plasma-typo-headline2-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-headline2-line-height)'
+};
+export const headline3 = {
+    fontFamily: 'var(--plasma-typo-headline3-font-family)',
+    fontWeight: 'var(--plasma-typo-headline3-font-weight)',
+    fontStyle: 'var(--plasma-typo-headline3-font-style)',
+    fontSize: 'var(--plasma-typo-headline3-font-size)',
+    letterSpacing: 'var(--plasma-typo-headline3-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-headline3-line-height)'
+};
+export const headline4 = {
+    fontFamily: 'var(--plasma-typo-headline4-font-family)',
+    fontWeight: 'var(--plasma-typo-headline4-font-weight)',
+    fontStyle: 'var(--plasma-typo-headline4-font-style)',
+    fontSize: 'var(--plasma-typo-headline4-font-size)',
+    letterSpacing: 'var(--plasma-typo-headline4-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-headline4-line-height)'
+};
+export const paragraph1 = {
+    fontFamily: 'var(--plasma-typo-paragraph1-font-family)',
+    fontWeight: 'var(--plasma-typo-paragraph1-font-weight)',
+    fontStyle: 'var(--plasma-typo-paragraph1-font-style)',
+    fontSize: 'var(--plasma-typo-paragraph1-font-size)',
+    letterSpacing: 'var(--plasma-typo-paragraph1-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-paragraph1-line-height)'
+};
+export const paragraph2 = {
+    fontFamily: 'var(--plasma-typo-paragraph2-font-family)',
+    fontWeight: 'var(--plasma-typo-paragraph2-font-weight)',
+    fontStyle: 'var(--plasma-typo-paragraph2-font-style)',
+    fontSize: 'var(--plasma-typo-paragraph2-font-size)',
+    letterSpacing: 'var(--plasma-typo-paragraph2-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-paragraph2-line-height)'
+};
+export const underline = {
+    fontFamily: 'var(--plasma-typo-underline-font-family)',
+    fontWeight: 'var(--plasma-typo-underline-font-weight)',
+    fontStyle: 'var(--plasma-typo-underline-font-style)',
+    fontSize: 'var(--plasma-typo-underline-font-size)',
+    letterSpacing: 'var(--plasma-typo-underline-letter-spacing)',
+    lineHeight: 'var(--plasma-typo-underline-line-height)'
+};

package/dist/styled-components/es/plasmaCore/utils/types/AsProps.js

@@ -0,0 +1 @@
+export { };

package/dist/styled-components/es/plasmaCore/utils/types/InputHTMLAttributes.js

@@ -0,0 +1 @@
+export { };

package/dist/styled-components/es/plasmaCore/utils/types/PickOptional.js

@@ -0,0 +1,3 @@
+/**
+ * Действует как стандартный Pick, но пикает все опционально.
+ */ export { };

package/dist/styled-components/es/plasmaCore/utils/types/ScrollSnap.js

@@ -0,0 +1 @@
+export { };

package/dist/styled-components/es/plasmaCore/utils/types/ShiftProps.js

@@ -0,0 +1,4 @@
+/**
+ * Пропсы для отрицательного сдвига компонента
+ * вправо и влево на величину его паддинга.
+ */ export { };

package/dist/styled-components/es/plasmaCore/utils/types/TextareaHTMLAttributes.js

@@ -0,0 +1 @@
+export { };

package/dist/styled-components/es/plasmaCore/utils/types/TextareaResize.js

@@ -0,0 +1 @@
+export { };

package/dist/styled-components/es/plasmaCore/utils/types/ThemeProps.js

@@ -0,0 +1 @@
+export { };

package/dist/styled-components/es/plasmaCore/utils/types/ThemeProviderContextBase.js

@@ -0,0 +1 @@
+export { }; // TODO: https://github.com/salute-developers/plasma/issues/232

package/dist/styled-components/es/plasmaCore/utils/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/styled-components/es/plasmaCore/utils/utils/animatedScrollTo.js

@@ -0,0 +1,54 @@
+const DEFAULT_DURATION = 300;
+// https://css-tricks.com/emulating-css-timing-functions-javascript/
+const tfs = {
+    linear: (t)=>t,
+    // eslint-disable-next-line
+    easeIn: (t)=>Math.pow(t, 1.675),
+    // eslint-disable-next-line
+    easeOut: (t)=>1 - Math.pow(1 - t, 1.675),
+    easeInOut: (t)=>0.5 * (Math.sin((t - 0.5) * Math.PI) + 1)
+};
+/**
+ * Плавная прокрутка по горизонтали
+ * @param {Element} elem
+ * @param {number} pos
+ * @param {number} duration
+ * @param {string} timingFunction
+ */ export const animatedScrollToX = (elem, pos, duration = DEFAULT_DURATION, timingFunction = 'easeInOut')=>{
+    let startTime;
+    const startX = elem.scrollLeft;
+    const endX = Math.max(0, Math.min(elem.scrollWidth - elem.clientWidth, pos));
+    const handleNewAnimationFrame = ()=>{
+        startTime = startTime || Date.now();
+        const timePos = Math.min(1, Math.max(1, Date.now() - startTime) / duration);
+        const scrollPos = tfs[timingFunction](timePos);
+        const left = startX + (endX - startX) * scrollPos;
+        elem.scrollTo({
+            left
+        });
+        if (timePos !== 1) window.requestAnimationFrame(handleNewAnimationFrame);
+    };
+    window.requestAnimationFrame(handleNewAnimationFrame);
+};
+/**
+ * Плавная прокрутка по вертикали
+ * @param {Element} elem
+ * @param {number} pos
+ * @param {number} duration
+ * @param {string} timingFunction
+ */ export const animatedScrollToY = (elem, pos, duration = DEFAULT_DURATION, timingFunction = 'easeInOut')=>{
+    let startTime;
+    const startY = elem.scrollTop;
+    const endY = Math.max(0, Math.min(elem.scrollHeight - elem.clientHeight, pos));
+    const handleNewAnimationFrame = ()=>{
+        startTime = startTime || Date.now();
+        const timePos = Math.min(1, Math.max(1, Date.now() - startTime) / duration);
+        const scrollPos = tfs[timingFunction](timePos);
+        const top = startY + (endY - startY) * scrollPos;
+        elem.scrollTo({
+            top
+        });
+        if (timePos !== 1) window.requestAnimationFrame(handleNewAnimationFrame);
+    };
+    window.requestAnimationFrame(handleNewAnimationFrame);
+};

package/dist/styled-components/es/plasmaCore/utils/utils/canUseDOM.js

@@ -0,0 +1,4 @@
+/**
+ * This constant tells you whether can DOM be used.
+ * https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
+ */ export const canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');

package/dist/styled-components/es/plasmaCore/utils/utils/extractTextFrom.js

@@ -0,0 +1,20 @@
+import { isValidElement, Children } from "react";
+export const extractTextFrom = (textSource)=>{
+    switch(typeof textSource){
+        case 'string':
+            return textSource;
+        case 'number':
+            return textSource.toString();
+        case 'object':
+            {
+                if (!isValidElement(textSource) || !textSource.props || !textSource.props.children) {
+                    return '';
+                }
+                return Children.map(textSource.props.children, (child)=>{
+                    return extractTextFrom(child);
+                }).join('');
+            }
+        default:
+            return '';
+    }
+};

package/dist/styled-components/es/plasmaCore/utils/utils/focusManager.js

@@ -0,0 +1,57 @@
+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;
+}
+import { findTabbableDescendants } from "./tabbable";
+/**
+ *  Менеджер фокуса при открытии и закрытии нод при использовании focus-trap.
+ *  Также необходим, чтобы фокус всегда должен находиться внутри необходимой ноды.
+ * */ export class FocusManager {
+    constructor(){
+        // массив с элементами, которые нужно зафокусить после анмаунта
+        _define_property(this, "focusAfterElements", []);
+        // массив с trap нодами
+        _define_property(this, "focusNodes", []);
+        _define_property(this, "handleFocus", ()=>{
+            // Фокус всегда должен находиться внутри необходимой ноды
+            const focusNode = this.focusNodes[this.focusNodes.length - 1];
+            if (!focusNode || focusNode.contains(document.activeElement)) {
+                return;
+            }
+            // Выделяем первый tabbable элемент
+            const el = findTabbableDescendants(focusNode)[0] || focusNode;
+            el.focus();
+        });
+        // добавление на фокус после анмаунта
+        _define_property(this, "markForFocusAfter", (focusAfterNode)=>{
+            const node = focusAfterNode && focusAfterNode.current ? focusAfterNode.current : document.activeElement;
+            this.focusAfterElements.push(node);
+        });
+        // фокус на необходимый элемент
+        _define_property(this, "returnFocus", ()=>{
+            const toFocus = this.focusAfterElements.pop() ?? null;
+            if (toFocus) {
+                toFocus.focus();
+            }
+        });
+        // при маунте ноды
+        _define_property(this, "setupScopedFocus", (element)=>{
+            this.focusNodes.push(element);
+            document.addEventListener('focusin', this.handleFocus, true);
+        });
+        // при анмаунте
+        _define_property(this, "teardownScopedFocus", ()=>{
+            this.focusNodes.pop();
+            document.removeEventListener('focusin', this.handleFocus);
+        });
+    }
+}

package/dist/styled-components/es/plasmaCore/utils/utils/formatCurrency.js

@@ -0,0 +1,14 @@
+/**
+ * Форматирование числа в цену.
+ * @param {number} value
+ * @param {string} currency
+ * @param {number} minimumFractionDigits
+ * @return {string}
+ */ export const formatCurrency = (value, currency, minimumFractionDigits)=>{
+    const formatter = new Intl.NumberFormat('ru', {
+        style: 'currency',
+        currency,
+        minimumFractionDigits
+    });
+    return formatter.format(value);
+};

package/dist/styled-components/es/plasmaCore/utils/utils/formatters.js

@@ -0,0 +1,18 @@
+export const last = (array)=>array[array.length - 1];
+export const padZeroNumber = (value)=>`${value}`.padStart(2, '0');
+/**
+ * Форматирование названия месяца.
+ * Если не передавать `day`, то название месяца будет, например, `июнь`.
+ * В данном случае вернется `июня`.
+ * Так же результат выполнения метода `formatToParts` является массивом,
+ * в котором находятся части даты, форматированной на основнии `options`.
+ * То есть в данном случае вернется массив [`day`, `separator`, `month`]
+ */ export const monthName = (val, monthFormat)=>{
+    const targetMonth = new Date(2000, val, 1);
+    return last(new Intl.DateTimeFormat('ru-RU', {
+        day: 'numeric',
+        month: monthFormat
+    }).formatToParts(targetMonth)).value;
+};
+export const monthLongName = (val)=>monthName(val, 'long');
+export const monthShortName = (val)=>monthName(val, 'short').replace('.', '');

package/dist/styled-components/es/plasmaCore/utils/utils/index.js

@@ -0,0 +1,10 @@
+export { animatedScrollToX, animatedScrollToY } from "./animatedScrollTo";
+export { canUseDOM } from "./canUseDOM";
+export { convertRoundnessMatrix } from "./roundness";
+export { extractTextFrom } from "./extractTextFrom";
+export { padZeroNumber, monthLongName, monthShortName } from "./formatters";
+export { formatCurrency } from "./formatCurrency";
+export { setRef } from "./setRef";
+export { toCssSize } from "./toCssSize";
+export { transformStyles } from "./transformStyles";
+export { IS_REACT_18, safeFlushSync, safeUseId } from "./react";

package/dist/styled-components/es/plasmaCore/utils/utils/react.js

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom";
+// NOTE: для next.js важно, чтобы путь до хука был полный, т.к. есть проблемы с ре-экспортом
+import { useUniqId } from "../hooks/useUniqId";
+// TODO: https://github.com/salute-developers/plasma/issues/233
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const { flushSync } = ReactDOM;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const { useId } = React;
+export const IS_REACT_18 = ReactDOM.version.split('.')[0] === '18';
+export function safeFlushSync(fn) {
+    if (!IS_REACT_18) {
+        return fn();
+    }
+    return flushSync(fn);
+}
+export const safeUseId = !IS_REACT_18 ? useUniqId : useId;

package/dist/styled-components/es/plasmaCore/utils/utils/roundness.js

@@ -0,0 +1,35 @@
+/** Матрица радиусов. r - радиус стандартный, h - радиус округлый (вычисляемый из высоты)
+ * tl ---- tr
+ * |        |
+ * |        |
+ * bl ---- br
+ */ export const pins = {
+    'square-square': 'r',
+    'square-clear': 'r 0 0 r',
+    'clear-square': '0 r r 0',
+    'clear-clear': '0',
+    'clear-circle': '0 h h 0',
+    'circle-clear': 'h 0 0 h',
+    'circle-circle': 'h'
+};
+/**
+ * Преобразовывает матрицу радиусов с указанными размерами.
+ * @param {string} matrixKey Ключ матрицы радиусов
+ * @param {string} r r-радиус
+ * @param {string} h h-радиус
+ * @example
+ * // Выведет значение для border-radius, равное '1em 0 0 1em'
+ * convertPinsMatrix('r 0 0 r', '1em');
+ * @example
+ * // Выведет значение для border-radius, равное '1em 2em 2em 1em'
+ * convertPinsMatrix('r h h r', '1em', '2em');
+ */ export const convertRoundnessMatrix = (matrixKey, r, h)=>matrixKey && pins[matrixKey].split(' ').map((char)=>{
+        switch(char){
+            case 'r':
+                return r;
+            case 'h':
+                return h;
+            default:
+                return char;
+        }
+    }).join(' ');

package/dist/styled-components/es/plasmaCore/utils/utils/scopeTab.js

@@ -0,0 +1,25 @@
+import { findTabbableDescendants } from "./tabbable";
+/**
+ * Управлление фокусом лишь внутри ноды через tab
+ * @param node
+ * @param event
+ */ export const scopeTab = (node, event)=>{
+    const tabbable = findTabbableDescendants(node);
+    if (!tabbable.length) {
+        event.preventDefault();
+        return;
+    }
+    // смотрим, является ли элемент крайним - первый или последним
+    const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
+    const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
+    // если не является, то передаем обработку таба самому браузеру
+    if (!leavingFinalTabbable) {
+        return;
+    }
+    // иначе зацкливаемся
+    event.preventDefault();
+    const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];
+    if (target) {
+        target.focus();
+    }
+};

package/dist/styled-components/es/plasmaCore/utils/utils/setRef.js

@@ -0,0 +1,7 @@
+export const setRef = (ref, value)=>{
+    if (typeof ref === 'function') {
+        ref(value);
+    } else if (ref) {
+        ref.current = value;
+    }
+};

package/dist/styled-components/es/plasmaCore/utils/utils/tabbable.js

@@ -0,0 +1,48 @@
+const tabbableNode = /input|select|textarea|button|object/;
+export const focusSelector = [
+    'input',
+    'select',
+    'textarea',
+    'a',
+    'button',
+    'object',
+    '[tabindex]',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])'
+].join(',');
+const isHidden = (el)=>{
+    return el.offsetWidth <= 0 && el.offsetHeight <= 0 || el.style.display === 'none' || el.style.visibility === 'hidden' || el.style.opacity === '0';
+};
+export const isVisible = (element, parentContainer)=>{
+    let parentElement = element;
+    while(parentElement){
+        if (parentElement === parentContainer || parentElement === document.body) {
+            break;
+        }
+        if (isHidden(parentElement)) {
+            return false;
+        }
+        parentElement = parentElement.parentNode;
+    }
+    return true;
+};
+const getElementTabIndex = (element)=>{
+    const tabIndex = element.getAttribute('tabindex');
+    return tabIndex === null ? NaN : parseInt(tabIndex, 10);
+};
+export const isFocusable = (element, parentContainer)=>{
+    const nodeName = element.nodeName.toLowerCase();
+    const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));
+    const res = tabbableNode.test(nodeName) && !element.disabled || (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
+    return Boolean(res) && isVisible(element, parentContainer);
+};
+export const isTabble = (element, parentContainer)=>{
+    const tabIndex = getElementTabIndex(element);
+    const isTabIndexNaN = Number.isNaN(tabIndex);
+    return (isTabIndexNaN || tabIndex >= 0) && isFocusable(element, parentContainer);
+};
+// Все элементы внутри данной ноды, до которых можно добраться табом
+export const findTabbableDescendants = (element)=>{
+    return Array.from(element.querySelectorAll(focusSelector)).filter((el)=>isTabble(el, element));
+};

package/dist/styled-components/es/plasmaCore/utils/utils/toCssSize.js

@@ -0,0 +1,3 @@
+/**
+ * Добавит ед./изм. value + px, если передан number
+ */ export const toCssSize = (value)=>typeof value === 'number' ? `${value}px` : value;