@alfalab/core-components 47.15.0-beta.0 → 47.15.0

package/attach/moderncssm/index.module.css

@@ -0,0 +1,91 @@
+/* */
+
+.component {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+
+    &,
+    * {
+        box-sizing: border-box;
+    }
+}
+
+.label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    z-index: 2;
+    cursor: inherit;
+    width: 0;
+    height: 0;
+}
+
+.control {
+    opacity: 0;
+    cursor: inherit
+}
+
+.control::-webkit-file-upload-button {
+        cursor: inherit;
+    }
+
+.size-64 .file,
+.size-64 .noFile {
+    margin-left: var(--gap-12);
+}
+
+.file,
+.noFile {
+    display: inline-block;
+    text-align: center;
+    color: var(--color-light-text-secondary);
+    margin-left: var(--gap-8);
+
+    font-size: 13px;
+
+    line-height: 16px;
+
+    font-weight: 400;
+}
+
+.abbreviation {
+    text-decoration: none;
+}
+
+.clear {
+    margin: 0 0 0 5px;
+    padding: 0;
+    cursor: pointer;
+    outline: none;
+    -webkit-user-select: none;
+            user-select: none;
+    color: inherit;
+    font: inherit;
+    background: none;
+    border: none
+}
+
+.clear:before {
+        content: '×';
+    }
+
+.progressBar {
+    margin-top: var(--gap-4);
+}
+
+.disabled .noFile,
+.disabled .file,
+.disabled .icon {
+    opacity: 0.3;
+}
+
+.disabled .clear {
+    display: none;
+}
+
+.focused {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}

package/attach/moderncssm/utils/index.d.ts

@@ -0,0 +1,2 @@
+declare function truncateFilename(filename: string, maxFilenameLength?: number): string;
+export { truncateFilename };

package/attach/moderncssm/utils/index.js

@@ -0,0 +1,9 @@
+function truncateFilename(filename, maxFilenameLength) {
+    if (maxFilenameLength && filename.length > maxFilenameLength) {
+        const lengthOfPart = Math.round(maxFilenameLength / 2) - 1;
+        return `${filename.substr(0, lengthOfPart)}…${filename.substr(filename.length - lengthOfPart)}`;
+    }
+    return filename;
+}
+
+export { truncateFilename };

package/backdrop/moderncssm/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from 'react';
+import { MouseEvent, ReactNode } from "react";
+import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
+import { TransitionProps } from 'react-transition-group/Transition';
+type BackdropProps = Partial<TransitionProps> & {
+    /**
+     * Прозрачный бэкдроп
+     * @deprecated данное свойство больше не используется, временно оставлено для обратной совместимости
+     * Используйте свойство transparent
+     */
+    invisible?: boolean;
+    /**
+     * Управляет видимостью компонента
+     */
+    open: boolean;
+    /**
+     * Обработчик клика по бэкдропу
+     */
+    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Классы анимации
+     *
+     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     */
+    transitionClassNames?: string | CSSTransitionClassNames;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Управляет прозрачностью бэкдроп
+     * @default false
+     */
+    transparent?: boolean;
+};
+declare const Backdrop: React.FC<BackdropProps>;
+export { BackdropProps, Backdrop };

package/backdrop/moderncssm/Component.js

@@ -0,0 +1,14 @@
+import React, { useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import cn from 'classnames';
+import styles from './index.module.css';
+
+const Backdrop = ({ className, open = false, invisible = false, timeout = 200, children, onClose, dataTestId, transitionClassNames = styles, transparent = false, ...restProps }) => {
+    const nodeRef = useRef(null);
+    return (React.createElement(CSSTransition, { timeout: timeout, unmountOnExit: true, classNames: transitionClassNames, in: !invisible && open, appear: true, ...restProps, nodeRef: nodeRef },
+        React.createElement("div", { ref: nodeRef, "aria-hidden": true, onClick: onClose, "data-test-id": dataTestId, className: cn(styles.backdrop, className, {
+                [styles.transparent]: transparent,
+            }) }, children)));
+};
+
+export { Backdrop };

package/backdrop/moderncssm/index.d.ts

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

package/backdrop/moderncssm/index.js

@@ -0,0 +1,5 @@
+export { Backdrop } from './Component.js';
+import 'react';
+import 'react-transition-group';
+import 'classnames';
+import './index.module.css';

package/backdrop/moderncssm/index.module.css

@@ -0,0 +1,36 @@
+/* */
+:root {
+    --backdrop-visible-background: var(--color-light-overlay-default);
+    --backdrop-hidden-background: transparent;
+}
+.backdrop {
+    z-index: -1;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    -webkit-tap-highlight-color: transparent; /* убирает хайлайт */
+}
+.appear,
+.enter {
+    background-color: var(--backdrop-hidden-background);
+}
+.appearActive,
+.enterActive,
+.appearDone,
+.enterDone {
+    background-color: var(--backdrop-visible-background);
+    transition: background-color 200ms ease-in;
+}
+.exit {
+    background-color: var(--backdrop-visible-background);
+}
+.exitActive,
+.exitDone {
+    background-color: var(--backdrop-hidden-background);
+    transition: background-color 200ms ease-out;
+}
+.transparent {
+    background-color: var(--backdrop-hidden-background);
+}

package/backdrop/moderncssm/vars.css

@@ -0,0 +1,2 @@
+/* */
+

package/badge/moderncssm/Component.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import React from 'react';
+type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
+type GraphicColorType = "accent" | "link" | "attention" | "positive" | "negative" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "static-light" | "static-accent" | "static-dark";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
+type BadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+    /**
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     *  Видимость белой обводки вокруг иконки
+     */
+    visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
+    /**
+     * Контент компонента
+     */
+    content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Цветовое оформление бейджа при view='count'
+     */
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
+    /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+/**
+ * @deprecated Используйте StatusBadge или Indicator
+ */
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
+export { IconColorType, BadgeProps, Badge };

package/badge/moderncssm/Component.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './index.module.css';
+
+function getSize(height) {
+    if (height >= 16 && height <= 18)
+        return 'heightS';
+    if (height >= 19 && height <= 24)
+        return 'heightM';
+    if (height >= 25 && height <= 32)
+        return 'heightL';
+    if (height >= 33 && height <= 40)
+        return 'heightXL';
+    if (height >= 41)
+        return 'heightXXL';
+    return '';
+}
+/**
+ * @deprecated Используйте StatusBadge или Indicator
+ */
+// eslint-disable-next-line complexity
+const Badge = ({ className, size = 'm', view, visibleIconOutline = false, visibleColorOutline = false, content, height = 16, iconColor, color = 'accent', iconUnderlayColor = 'static-light', dataTestId, }) => {
+    const isCountView = view === 'count';
+    const isHidden = isCountView && typeof content === 'number' && content <= 0;
+    const componentContent = isCountView && content && content >= 100 ? '99+' : content;
+    const heightSize = getSize(height);
+    return (React.createElement("div", { className: cn(!isCountView && styles.wrapper, iconColor && styles[iconColor], {
+            [styles[size]]: !isCountView,
+            [styles.outline]: !isCountView && visibleIconOutline,
+            [styles.outlineColor]: !isCountView && visibleColorOutline,
+            [styles.countWrapper]: isCountView,
+        }, className), "data-test-id": dataTestId },
+        React.createElement("div", { className: cn(styles.component, styles[size], styles[view], styles[`background-${color}`], styles[`graphic-${iconUnderlayColor}`], iconColor && styles[iconColor], {
+                [styles[heightSize]]: isCountView,
+                [styles.isHidden]: isHidden,
+                [styles.dot]: !content,
+                [styles.outlineCount]: isCountView && visibleIconOutline,
+            }), style: {
+                ...(isCountView && content && { height, minWidth: height }),
+            } }, componentContent)));
+};
+
+export { Badge };

package/badge/moderncssm/index.d.ts

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

package/badge/moderncssm/index.js

@@ -0,0 +1,4 @@
+export { Badge } from './Component.js';
+import 'react';
+import 'classnames';
+import './index.module.css';

package/badge/moderncssm/index.module.css

@@ -0,0 +1,263 @@
+/* */
+
+:root {
+    --badge-icon-bg-color: var(--color-light-neutral-translucent-1300-inverted);
+}
+
+.wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-circle);
+    box-sizing: border-box
+}
+
+.wrapper.s {
+        padding: var(--gap-2);
+        width: 20px;
+        height: 20px;
+    }
+
+.wrapper.m {
+        padding: var(--gap-2);
+        width: 24px;
+        height: 24px;
+    }
+
+.wrapper.xl {
+        padding: 5px;
+        width: 40px;
+        height: 40px;
+    }
+
+.component {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 700;
+
+    position: relative;
+    z-index: 2;
+    box-sizing: border-box;
+    border-radius: var(--border-radius-pill);
+    overflow: hidden
+}
+
+.component.background-accent {
+        background-color: var(--color-light-accent-primary);
+        color: var(--color-static-text-primary-inverted);
+    }
+
+.component.background-specialbg-secondary-transparent {
+        background-color: var(--color-light-neutral-translucent-200);
+        color: var(--color-light-text-primary);
+    }
+
+.component.background-primary {
+        background-color: var(--color-light-neutral-0);
+        color: var(--color-light-text-primary);
+    }
+
+.countWrapper {
+    display: inline-flex;
+    border-radius: var(--border-radius-pill);
+}
+
+.count {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.outlineCount {
+    border: 2px solid var(--badge-icon-bg-color);
+}
+
+.s {
+    height: 16px;
+    min-width: 16px;
+    padding: 0 var(--gap-4);
+}
+
+.m {
+    height: 20px;
+    min-width: 20px;
+    padding: 0 6px;
+}
+
+.l {
+    height: 24px;
+    min-width: 24px;
+    padding: 0 6px;
+}
+
+.heightS {
+    font-size: 11px;
+    line-height: 16px;
+    font-weight: 700;
+    padding: 0 var(--gap-4);
+}
+
+.heightM {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-4);
+}
+
+.heightL {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-8);
+}
+
+.heightXL {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-12);
+}
+
+.heightXXL {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-16);
+}
+
+.heightS.outlineCount {
+    border: 1px solid var(--badge-icon-bg-color);
+}
+
+.icon {
+    max-height: 30px;
+    min-width: 0;
+    padding: 0;
+    color: var(--color-light-status-positive)
+}
+
+.icon.positive {
+        color: var(--color-light-status-positive);
+        background-color: var(--color-light-status-positive);
+    }
+
+.icon.attention {
+        color: var(--color-light-status-attention);
+        background-color: var(--color-light-status-attention);
+    }
+
+.icon.negative {
+        color: var(--color-light-status-negative);
+        background-color: var(--color-light-status-negative);
+    }
+
+.icon.link {
+        color: var(--color-light-status-info);
+        background-color: var(--color-light-status-info);
+    }
+
+.icon.tertiary {
+        color: var(--color-light-neutral-500);
+        background-color: var(--color-light-neutral-500);
+    }
+
+.icon.secondary {
+        color: var(--color-light-neutral-700);
+        background-color: var(--color-light-neutral-700);
+    }
+
+.icon.primary {
+        color: var(--color-light-neutral-translucent-1300);
+        background-color: var(--color-light-neutral-translucent-1300);
+    }
+
+.icon.s {
+    width: 16px;
+    height: 16px;
+}
+
+.icon:before {
+    position: absolute;
+    z-index: -1;
+    left: 18%;
+    right: 18%;
+    top: 18%;
+    bottom: 18%;
+    border-radius: var(--border-radius-pill);
+    content: '';
+}
+
+.graphic-static-light.icon:before {
+    background-color: var(--color-static-neutral-translucent-1300-inverted);
+}
+
+.graphic-primary.icon:before {
+    background-color: var(--color-light-neutral-translucent-1300);
+}
+
+.outline {
+    background-color: var(--badge-icon-bg-color);
+}
+
+.outlineColor {
+    background-color: var(--color-light-accent-primary)
+}
+
+.outlineColor.attention {
+        background-color: var(--color-light-status-attention);
+    }
+
+.outlineColor.positive {
+        background-color: var(--color-light-status-positive);
+    }
+
+.outlineColor.negative {
+        background-color: var(--color-light-status-negative);
+    }
+
+.outlineColor.link {
+        background-color: var(--color-light-status-info);
+    }
+
+.outlineColor.tertiary {
+        background-color: var(--color-light-neutral-500);
+    }
+
+.outlineColor.secondary {
+        background-color: var(--color-light-neutral-700);
+    }
+
+.outlineColor.primary {
+        background-color: var(--color-light-neutral-translucent-1300);
+    }
+
+.dot {
+    width: 8px;
+    height: 8px;
+    min-width: 0;
+    padding: 0;
+}
+
+.dot.outlineCount {
+    border: 1px solid var(--badge-icon-bg-color);
+}
+
+.isHidden {
+    display: none;
+}
+
+.icon svg {
+    position: relative;
+}
+
+.m svg {
+    top: -2px;
+    left: -2px;
+    width: 24px;
+    height: 24px;
+}
+
+.xl svg {
+    width: 30px;
+    height: 30px;
+}

package/bank-card/moderncssm/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, MouseEvent, ReactNode } from "react";
+import { MaskType } from "./types";
+type BankCardProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Цвет фона карты
+     */
+    backgroundColor?: string;
+    /**
+     * Иконка логотипа банка (размер L)
+     */
+    bankLogo?: ReactNode;
+    /**
+     * Лэйбл поля ввода
+     */
+    inputLabel?: string;
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Обработчик ввода
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик вызова камеры
+     */
+    onUsePhoto?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)
+     * Если параметр не передавать - работает с обоими типами номеров
+     */
+    maskType?: MaskType;
+};
+declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
+export { BankCardProps, BankCard };