@alfalab/core-components 47.6.0-beta.0 → 47.7.0

package/text/moderncssm/mixin.module.css

@@ -1,507 +0,0 @@
-/* */
-
-.accent-caps {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 700;
-    letter-spacing: 1.25px;
-    text-transform: uppercase;
-}
-
-.accent-component-primary {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 700;
-}
-
-.accent-component-secondary {
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 700;
-}
-
-.accent-primary-large {
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 700;
-}
-
-.accent-primary-medium {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 700;
-}
-
-.accent-primary-small {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 700;
-}
-
-.accent-secondary-large {
-    font-size: 13px;
-    line-height: 16px;
-    font-weight: 700;
-}
-
-.accent-secondary-medium {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 700;
-}
-
-.accent-secondary-small {
-    font-size: 11px;
-    line-height: 16px;
-    font-weight: 700;
-}
-
-.action-caps {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 700;
-    letter-spacing: 1.25px;
-    text-transform: uppercase;
-}
-
-.action-component-primary {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 500;
-}
-
-.action-component-secondary {
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 500;
-}
-
-.action-primary-large {
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 500;
-}
-
-.action-primary-medium {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
-}
-
-.action-primary-small {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 500;
-}
-
-.action-secondary-large {
-    font-size: 13px;
-    line-height: 16px;
-    font-weight: 500;
-}
-
-.action-secondary-medium {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 500;
-}
-
-.action-secondary-small {
-    font-size: 11px;
-    line-height: 16px;
-    font-weight: 500;
-}
-
-.headline-mobile-large {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.headline-mobile-medium {
-    font-size: 26px;
-    line-height: 32px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.headline-mobile-small {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.headline-mobile-xlarge {
-    font-size: 34px;
-    line-height: 40px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.headline-mobile-xsmall {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.headline-system-mobile-large {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 600;
-}
-
-.headline-system-mobile-medium {
-    font-size: 26px;
-    line-height: 32px;
-    font-weight: 600;
-}
-
-.headline-system-mobile-small {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 600;
-}
-
-.headline-system-mobile-xlarge {
-    font-size: 34px;
-    line-height: 40px;
-    font-weight: 600;
-}
-
-.headline-system-mobile-xsmall {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 600;
-}
-
-.headline-system-large {
-    font-size: 40px;
-    line-height: 48px;
-    font-weight: 700;
-}
-
-.headline-system-medium {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 700;
-}
-
-.headline-system-small {
-    font-size: 22px;
-    line-height: 26px;
-    font-weight: 700;
-}
-
-.headline-system-xlarge {
-    font-size: 48px;
-    line-height: 52px;
-    font-weight: 700;
-}
-
-.headline-system-xsmall {
-    font-size: 18px;
-    line-height: 22px;
-    font-weight: 700;
-}
-
-.headline-large {
-    font-size: 40px;
-    line-height: 48px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.headline-medium {
-    font-size: 32px;
-    line-height: 40px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.headline-small {
-    font-size: 24px;
-    line-height: 32px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.headline-xlarge {
-    font-size: 48px;
-    line-height: 64px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.headline-xsmall {
-    font-size: 20px;
-    line-height: 24px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.key-large {
-    font-size: 120px;
-    line-height: 132px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.key-medium {
-    font-size: 96px;
-    line-height: 120px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.key-small {
-    font-size: 80px;
-    line-height: 96px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.key-xlarge {
-    font-size: 144px;
-    line-height: 180px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.key-xsmall {
-    font-size: 64px;
-    line-height: 80px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.paragraph-caps {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 500;
-    letter-spacing: 1.25px;
-    text-transform: uppercase;
-}
-
-.paragraph-component-primary {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-}
-
-.paragraph-component-secondary {
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 400;
-}
-
-.paragraph-primary-large {
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 400;
-}
-
-.paragraph-primary-medium {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-}
-
-.paragraph-primary-small {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 400;
-}
-
-.paragraph-secondary-large {
-    font-size: 13px;
-    line-height: 16px;
-    font-weight: 400;
-}
-
-.paragraph-secondary-medium {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 400;
-}
-
-.paragraph-secondary-small {
-    font-size: 11px;
-    line-height: 16px;
-    font-weight: 400;
-}
-
-.promo-mobile-large {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.promo-mobile-medium {
-    font-size: 26px;
-    line-height: 32px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.promo-mobile-small {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.promo-mobile-xlarge {
-    font-size: 34px;
-    line-height: 40px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.promo-mobile-xsmall {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.promo-system-mobile-large {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 400;
-}
-
-.promo-system-mobile-medium {
-    font-size: 26px;
-    line-height: 32px;
-    font-weight: 400;
-}
-
-.promo-system-mobile-small {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 400;
-}
-
-.promo-system-mobile-xlarge {
-    font-size: 34px;
-    line-height: 40px;
-    font-weight: 400;
-}
-
-.promo-system-mobile-xsmall {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-}
-
-.promo-system-large {
-    font-size: 40px;
-    line-height: 48px;
-    font-weight: 400;
-}
-
-.promo-system-medium {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 400;
-}
-
-.promo-system-small {
-    font-size: 22px;
-    line-height: 26px;
-    font-weight: 400;
-}
-
-.promo-system-xlarge {
-    font-size: 48px;
-    line-height: 52px;
-    font-weight: 400;
-}
-
-.promo-system-xsmall {
-    font-size: 18px;
-    line-height: 22px;
-    font-weight: 400;
-}
-
-.promo-large {
-    font-size: 40px;
-    line-height: 48px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.promo-medium {
-    font-size: 32px;
-    line-height: 40px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.promo-small {
-    font-size: 24px;
-    line-height: 32px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.promo-xlarge {
-    font-size: 48px;
-    line-height: 64px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.promo-xsmall {
-    font-size: 20px;
-    line-height: 24px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-.accent-component {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 700;
-}
-
-.action-component {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 500;
-}
-
-.paragraph-component {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-}

package/textarea/moderncssm/Component.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const getDefaultCounterText: (textLength: number, maxLength?: number) => string;
-declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style" | "value" | "size" | "defaultValue" | "onChange"> & import("./typings").TextareaIncomeProps & React.RefAttributes<HTMLTextAreaElement>>;
-export { getDefaultCounterText, Textarea };

package/textarea/moderncssm/Component.js

@@ -1,127 +0,0 @@
-import React, { forwardRef, useRef, useState, useMemo, useEffect } from 'react';
-import mergeRefs from 'react-merge-refs';
-import TextareaAutosize from 'react-textarea-autosize';
-import cn from 'classnames';
-import { FormControl } from '../../form-control/moderncssm';
-import { getDataTestId } from '../../shared/moderncssm';
-import { useMedia, useFocus } from '@alfalab/hooks';
-import { PseudoTextArea } from './components/PseudoTextArea.js';
-import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
-import defaultColors from './default.module.css';
-import styles from './index.module.css';
-import invertedColors from './inverted.module.css';
-
-const colorStyles = {
-    default: defaultColors,
-    inverted: invertedColors,
-};
-const getDefaultCounterText = (textLength, maxLength = 0) => `${textLength}/${maxLength} символов`;
-const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48, colors = 'default', block = false, bottomAddons, fieldClassName, className, dataTestId, disabled, error, hint, textareaClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onHeightChange, rightAddons, maxRows, minRows, maxHeight, resize = 'none', value, defaultValue, rows = autosize ? 1 : 3, showCounter = false, getCounterText = getDefaultCounterText, maxLength, allowOverflow = true, nativeScrollbar: nativeScrollbarProp, wrapperRef, breakpoint, ...restProps }, ref) => {
-    const uncontrolled = value === undefined;
-    let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
-    nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
-    const textareaRef = useRef(null);
-    const pseudoTextareaRef = useRef(null);
-    const [focused, setFocused] = useState(false);
-    const [stateValue, setStateValue] = useState(defaultValue || '');
-    const [scrollPosition, setScrollPosition] = useState(0);
-    const [focusVisible] = useFocus(
-    /*
-     * При первом рендере textareaRef.current === null, то нужно пересоздать реф для корректной работы хука
-     * TODO: исправить хук useFocus, чтобы он поддерживал изменение ноды
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useMemo(() => ({ current: textareaRef.current }), [textareaRef.current]), 'keyboard');
-    const filled = Boolean(uncontrolled ? stateValue : value);
-    const hasInnerLabel = label && labelView === 'inner';
-    const hasOverflow = Boolean(maxLength && allowOverflow && (value?.slice(maxLength) || stateValue.slice(maxLength)));
-    useEffect(() => {
-        const pseudoNode = pseudoTextareaRef.current;
-        if (pseudoNode) {
-            pseudoNode.scrollTop = scrollPosition;
-        }
-    }, [scrollPosition, stateValue, hasOverflow]);
-    // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
-    useEffect(() => {
-        if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
-            textareaRef.current.style.maxHeight = `${maxHeight}px`;
-        }
-    }, [autosize, maxHeight]);
-    const handleTextareaFocus = (event) => {
-        setFocused(true);
-        if (onFocus) {
-            onFocus(event);
-        }
-    };
-    const handleTextareaBlur = (event) => {
-        setFocused(false);
-        if (onBlur) {
-            onBlur(event);
-        }
-    };
-    const handleTextareaChange = (event) => {
-        const { target: { value: newValue }, } = event;
-        if (onChange) {
-            onChange(event, { value: newValue });
-        }
-        if (uncontrolled) {
-            setStateValue(newValue);
-        }
-    };
-    const handleTeaxtareaScroll = (event) => {
-        if (maxLength) {
-            const val = event.target.scrollTop;
-            setScrollPosition(val);
-        }
-    };
-    const getValueLength = () => {
-        if (uncontrolled) {
-            return stateValue.length;
-        }
-        return value.length;
-    };
-    const textareaClassNameCalc = cn(styles.textarea, colorStyles[colors].textarea, styles[SIZE_TO_CLASSNAME_MAP[size]], {
-        [styles.overflowHidden]: autosize && !maxRows,
-        [styles.customScrollbar]: !nativeScrollbar,
-        [styles.hasInnerLabel]: hasInnerLabel,
-        [colorStyles[colors].hasInnerLabel]: hasInnerLabel,
-        [styles.filled]: filled,
-        [styles.overflow]: hasOverflow,
-    }, textareaClassName);
-    const textareaProps = {
-        ...restProps,
-        className: textareaClassNameCalc,
-        autoComplete,
-        disabled,
-        maxLength: allowOverflow ? undefined : maxLength,
-        onBlur: handleTextareaBlur,
-        onFocus: handleTextareaFocus,
-        onChange: handleTextareaChange,
-        value: uncontrolled ? stateValue : value,
-        rows,
-        ref: mergeRefs([ref, textareaRef]),
-        'data-test-id': dataTestId,
-        onScroll: handleTeaxtareaScroll,
-    };
-    const getBottomAddons = () => {
-        const counterIsVisible = Boolean(maxLength && showCounter);
-        return (React.createElement(React.Fragment, null,
-            counterIsVisible && (React.createElement("span", { className: cn(styles.sub, {
-                    [colorStyles[colors].error]: hasOverflow,
-                    [colorStyles[colors].hint]: !hasOverflow,
-                }) }, getCounterText(getValueLength(), maxLength))),
-            bottomAddons));
-    };
-    return (React.createElement(FormControl, { ref: wrapperRef, className: cn(className), fieldClassName: cn(fieldClassName, {
-            [styles.focusVisible]: focusVisible,
-        }), inputWrapperClassName: cn(styles.wrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], {
-            [styles.hasInnerLabel]: hasInnerLabel,
-            [styles.resizeVertical]: resize === 'vertical',
-        }), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons(), breakpoint: breakpoint, dataTestId: getDataTestId(dataTestId, 'form-control') },
-        React.createElement(React.Fragment, null,
-            hasOverflow && (React.createElement(PseudoTextArea, { value: value ?? stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: textareaClassNameCalc, ref: pseudoTextareaRef })),
-            autosize ? (React.createElement(TextareaAutosize, { ...textareaProps, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange })) : (React.createElement("textarea", { ...textareaProps, style: { maxHeight } })))));
-});
-Textarea.displayName = 'Textarea';
-
-export { Textarea, getDefaultCounterText };

package/textarea/moderncssm/components/PseudoTextArea.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { TextareaIncomeProps } from "../typings";
-declare const PseudoTextArea: React.ForwardRefExoticComponent<{
-    /**
-     * Дополнительный класс компонента
-     */
-    pseudoTextareaClassName?: string | undefined;
-    /**
-     * Значение PseudoTextArea, разделяется на 2 части по maxLength
-     */
-    value: string;
-    /**
-     * Максимальное количество символов, символы свыше maxLength будут выделены
-     */
-    maxLength: number;
-} & Pick<TextareaIncomeProps, "size"> & React.RefAttributes<HTMLDivElement>>;
-export { PseudoTextArea };

package/textarea/moderncssm/components/PseudoTextArea.js

@@ -1,11 +0,0 @@
-import React, { forwardRef } from 'react';
-import cn from 'classnames';
-import { SIZE_TO_CLASSNAME_MAP } from '../consts.js';
-import styles from '../index.module.css';
-
-const PseudoTextArea = forwardRef(({ size = 48, pseudoTextareaClassName, maxLength, value }, ref) => (React.createElement("div", { className: cn(styles.pseudoTextarea, styles[SIZE_TO_CLASSNAME_MAP[size]], pseudoTextareaClassName), ref: ref, hidden: true },
-    React.createElement("span", null, value.slice(0, maxLength)),
-    React.createElement("span", { className: cn(styles.overflow) }, value.slice(maxLength)),
-    React.createElement("br", null))));
-
-export { PseudoTextArea };

package/textarea/moderncssm/components/index.d.ts

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

package/textarea/moderncssm/components/index.js

@@ -1,5 +0,0 @@
-export { PseudoTextArea } from './PseudoTextArea.js';
-import 'react';
-import 'classnames';
-import '../consts.js';
-import '../index.module.css';

package/textarea/moderncssm/consts.d.ts

@@ -1,11 +0,0 @@
-declare const SIZE_TO_CLASSNAME_MAP: {
-    s: string;
-    m: string;
-    l: string;
-    xl: string;
-    48: string;
-    56: string;
-    64: string;
-    72: string;
-};
-export { SIZE_TO_CLASSNAME_MAP };

package/textarea/moderncssm/consts.js

@@ -1,12 +0,0 @@
-const SIZE_TO_CLASSNAME_MAP = {
-    s: 'size-48',
-    m: 'size-56',
-    l: 'size-64',
-    xl: 'size-72',
-    48: 'size-48',
-    56: 'size-56',
-    64: 'size-64',
-    72: 'size-72',
-};
-
-export { SIZE_TO_CLASSNAME_MAP };