@alphakits/ui 2.0.12 → 2.1.0

package/dist/textarea/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/textarea/component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    TextareaHTMLAttributes,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport TextareaAutosize from 'react-textarea-autosize';\nimport cn from 'classnames';\n\nimport { FormControl } from '../form-control';\nimport { useFocus } from '../hooks/useFocus';\n\nimport styles from './index.module.css';\n\nexport type TextareaProps = Omit<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    'size' | 'style' | 'value' | 'defaultValue' | 'onChange'\n> & {\n    /**\n     * Значение поля ввода\n     */\n    value?: string;\n\n    /**\n     * Начальное значение поля\n     */\n    defaultValue?: string;\n\n    /**\n     * required - индикатор * лейбла для обязательного заполнения поля\n     */\n    required?: boolean;\n\n    /**\n     * Растягивает компонент на ширину контейнера\n     */\n    block?: boolean;\n\n    /**\n     * Размер компонента\n     */\n    size?: 's' | 'm' | 'l';\n\n    /**\n     * Отображение ошибки\n     */\n    error?: string | boolean;\n\n    /**\n     * Текст подсказки\n     */\n    hint?: string;\n\n    /**\n     * Счетчик символов\n     */\n    counter?: boolean;\n\n    /**\n     * максимальное кол-во символов\n     */\n    maxLength?: number;\n\n    /**\n     * Лейбл компонента\n     */\n    label?: React.ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: React.ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: React.ReactNode;\n\n    /**\n     * Слот под компонентом\n     */\n    bottomAddons?: React.ReactNode;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для поля\n     */\n    fieldClassName?: string;\n\n    /**\n     * Дополнительный класс textarea\n     */\n    textareaClassName?: string;\n\n    /**\n     * Управление возможностью подстраивать высоту компонента под высоту текста\n     */\n    autosize?: boolean;\n\n    /**\n     * Максимальное количество отображаемых строк (работает только вместе с autosize)\n     */\n    maxRows?: number;\n\n    /**\n     * Минимальное количество отображаемых строк (работает только вместе c autosize)\n     */\n    minRows?: number;\n\n    /**\n     * Максимальная высота элемента\n     */\n    maxHeight?: number;\n\n    /**\n     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)\n     */\n    resize?: 'vertical' | 'none';\n\n    /**\n     * Обработчик ввода\n     */\n    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: { value: string }) => void;\n\n    /**\n     * Обработчик события изменения высоты компонента (работает только вместе c autosize)\n     */\n    onHeightChange?: (height?: number) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n};\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n    (\n        {\n            autoComplete = 'on',\n            autosize = true,\n            size = 's',\n            block = false,\n            bottomAddons,\n            fieldClassName,\n            className,\n            dataTestId,\n            disabled,\n            error,\n            hint,\n            textareaClassName,\n            label,\n            leftAddons,\n            onFocus,\n            required,\n            onBlur,\n            onChange,\n            onHeightChange,\n            rightAddons,\n            maxRows,\n            minRows,\n            maxHeight,\n            resize = 'none',\n            value,\n            defaultValue,\n            maxLength = 500,\n            counter,\n            rows = autosize ? 1 : 3,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const uncontrolled = value === undefined;\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const [focused, setFocused] = useState(false);\n        const [stateValue, setStateValue] = useState(defaultValue || '');\n\n        const [focusVisible] = useFocus(textareaRef, 'keyboard');\n\n        const filled = Boolean(uncontrolled ? stateValue : value);\n\n        // Хак, так как react-textarea-autosize перестал поддерживать maxHeight\n        useEffect(() => {\n            if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {\n                textareaRef.current.style.maxHeight = `${maxHeight}px`;\n            }\n        }, [textareaRef, autosize, maxHeight]);\n\n        const handleTextareaFocus = useCallback(\n            (event: React.FocusEvent<HTMLTextAreaElement>) => {\n                setFocused(true);\n\n                if (onFocus) {\n                    onFocus(event);\n                }\n            },\n            [onFocus],\n        );\n\n        const handleTextareaBlur = useCallback(\n            (event: React.FocusEvent<HTMLTextAreaElement>) => {\n                setFocused(false);\n\n                if (onBlur) {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        const handleTextareaChange = useCallback(\n            (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n                if (onChange) {\n                    onChange(event, { value: event.target.value });\n                }\n\n                if (uncontrolled) {\n                    setStateValue(event.target.value);\n                }\n            },\n            [onChange, uncontrolled],\n        );\n\n        const textareaProps = {\n            ...restProps,\n            className: cn(\n                styles.textarea,\n                styles[size],\n                {\n                    [styles.hasLabel]: label,\n                    [styles.filled]: filled,\n                    [styles.resizeVertical]: resize === 'vertical',\n                },\n                textareaClassName,\n            ),\n            autoComplete,\n            disabled,\n            onBlur: handleTextareaBlur,\n            onFocus: handleTextareaFocus,\n            onChange: handleTextareaChange,\n            value: uncontrolled ? stateValue : value,\n            rows,\n            ref: mergeRefs([ref, textareaRef]),\n            'data-test-id': dataTestId,\n        };\n\n        const countSymbols = () =>\n            `${uncontrolled ? stateValue.length : value?.length} / ${maxLength || '-'}`;\n\n        const { ref: textareaMergedRef, ...textareaAttrs } = textareaProps;\n\n        return (\n            <FormControl\n                className={cn(className)}\n                fieldClassName={cn(fieldClassName, {\n                    [styles.focusVisible]: focusVisible,\n                })}\n                size={size}\n                block={block}\n                required={required}\n                disabled={disabled}\n                filled={filled || focused}\n                focused={focused}\n                error={error}\n                label={label}\n                hint={hint}\n                leftAddons={leftAddons}\n                rightAddons={rightAddons}\n                bottomAddons={bottomAddons}\n            >\n                {autosize ? (\n                    <TextareaAutosize\n                        {...textareaAttrs}\n                        maxLength={maxLength}\n                        maxRows={maxRows}\n                        minRows={minRows}\n                        onHeightChange={onHeightChange}\n                        ref={textareaMergedRef as any}\n                    />\n                ) : (\n                    <textarea maxLength={maxLength} {...textareaAttrs} ref={textareaMergedRef} style={{ maxHeight }} />\n                )}\n                {counter && <span className={styles.counter}>{countSymbols()}</span>}\n            </FormControl>\n        );\n    },\n);\n\n/**\n * Для отображения в сторибуке\n */\nTextarea.defaultProps = {\n    autoComplete: 'on',\n    autosize: true,\n    size: 's',\n    block: false,\n    resize: 'none',\n};\n"],"names":["Textarea","React","autoComplete","autosize","size","block","bottomAddons","fieldClassName","className","dataTestId","disabled","error","hint","textareaClassName","label","leftAddons","onFocus","required","onBlur","onChange","onHeightChange","rightAddons","maxRows","minRows","maxHeight","resize","value","defaultValue","maxLength","counter","rows","restProps","ref","uncontrolled","textareaRef","useRef","focused","setFocused","useState","stateValue","setStateValue","focusVisible","useFocus","filled","useEffect","handleTextareaFocus","useCallback","event","handleTextareaBlur","handleTextareaChange","textareaProps","cn","styles","mergeRefs","countSymbols","textareaMergedRef","textareaAttrs","jsxs","FormControl","jsx","TextareaAutosize"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../src/textarea/component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    TextareaHTMLAttributes,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport TextareaAutosize from 'react-textarea-autosize';\nimport cn from 'classnames';\n\nimport { FormControl } from '../form-control';\nimport { useFocus } from '../hooks/useFocus';\n\nimport styles from './index.module.css';\n\nexport type TextareaProps = Omit<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    'size' | 'style' | 'value' | 'defaultValue' | 'onChange'\n> & {\n    /**\n     * Значение поля ввода\n     */\n    value?: string;\n\n    /**\n     * Начальное значение поля\n     */\n    defaultValue?: string;\n\n    /**\n     * required - индикатор * лейбла для обязательного заполнения поля\n     */\n    required?: boolean;\n\n    /**\n     * Растягивает компонент на ширину контейнера\n     */\n    block?: boolean;\n\n    /**\n     * Размер компонента\n     */\n    size?: 's' | 'm' | 'l';\n\n    /**\n     * Отображение ошибки\n     */\n    error?: string | boolean;\n\n    /**\n     * Текст подсказки\n     */\n    hint?: string;\n\n    /**\n     * Счетчик символов\n     */\n    counter?: boolean;\n\n    /**\n     * максимальное кол-во символов\n     */\n    maxLength?: number;\n\n    /**\n     * Лейбл компонента\n     */\n    label?: React.ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: React.ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: React.ReactNode;\n\n    /**\n     * Слот под компонентом\n     */\n    bottomAddons?: React.ReactNode;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для поля\n     */\n    fieldClassName?: string;\n\n    /**\n     * Дополнительный класс textarea\n     */\n    textareaClassName?: string;\n\n    /**\n     * Управление возможностью подстраивать высоту компонента под высоту текста\n     */\n    autosize?: boolean;\n\n    /**\n     * Максимальное количество отображаемых строк (работает только вместе с autosize)\n     */\n    maxRows?: number;\n\n    /**\n     * Минимальное количество отображаемых строк (работает только вместе c autosize)\n     */\n    minRows?: number;\n\n    /**\n     * Максимальная высота элемента\n     */\n    maxHeight?: number;\n\n    /**\n     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)\n     */\n    resize?: 'vertical' | 'none';\n\n    /**\n     * Обработчик ввода\n     */\n    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: { value: string }) => void;\n\n    /**\n     * Обработчик события изменения высоты компонента (работает только вместе c autosize)\n     */\n    onHeightChange?: (height?: number) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n};\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n    (\n        {\n            autoComplete = 'on',\n            autosize = true,\n            size = 's',\n            block = false,\n            bottomAddons,\n            fieldClassName,\n            className,\n            dataTestId,\n            disabled,\n            error,\n            hint,\n            textareaClassName,\n            label,\n            leftAddons,\n            onFocus,\n            required,\n            onBlur,\n            onChange,\n            onHeightChange,\n            rightAddons,\n            maxRows,\n            minRows,\n            maxHeight,\n            resize = 'none',\n            value,\n            defaultValue,\n            maxLength = 500,\n            counter,\n            rows = autosize ? 1 : 3,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const uncontrolled = value === undefined;\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const [focused, setFocused] = useState(false);\n        const [stateValue, setStateValue] = useState(defaultValue || '');\n\n        const [focusVisible] = useFocus(textareaRef, 'keyboard');\n\n        const filled = Boolean(uncontrolled ? stateValue : value);\n\n        // Хак, так как react-textarea-autosize перестал поддерживать maxHeight\n        useEffect(() => {\n            if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {\n                textareaRef.current.style.maxHeight = `${maxHeight}px`;\n            }\n        }, [textareaRef, autosize, maxHeight]);\n\n        const handleTextareaFocus = useCallback(\n            (event: React.FocusEvent<HTMLTextAreaElement>) => {\n                setFocused(true);\n\n                if (onFocus) {\n                    onFocus(event);\n                }\n            },\n            [onFocus],\n        );\n\n        const handleTextareaBlur = useCallback(\n            (event: React.FocusEvent<HTMLTextAreaElement>) => {\n                setFocused(false);\n\n                if (onBlur) {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        const handleTextareaChange = useCallback(\n            (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n                if (onChange) {\n                    onChange(event, { value: event.target.value });\n                }\n\n                if (uncontrolled) {\n                    setStateValue(event.target.value);\n                }\n            },\n            [onChange, uncontrolled],\n        );\n\n        const textareaProps = {\n            ...restProps,\n            className: cn(\n                styles.textarea,\n                styles[size],\n                {\n                    [styles.hasLabel]: label,\n                    [styles.filled]: filled,\n                    [styles.resizeVertical]: resize === 'vertical',\n                },\n                textareaClassName,\n            ),\n            autoComplete,\n            disabled,\n            onBlur: handleTextareaBlur,\n            onFocus: handleTextareaFocus,\n            onChange: handleTextareaChange,\n            value: uncontrolled ? stateValue : value,\n            rows,\n            ref: mergeRefs([ref, textareaRef]),\n            'data-test-id': dataTestId,\n        };\n\n        const countSymbols = () =>\n            `${uncontrolled ? stateValue.length : value?.length} / ${maxLength || '-'}`;\n\n        const { ref: textareaMergedRef, ...textareaAttrs } = textareaProps;\n\n        return (\n            <FormControl\n                className={cn(className)}\n                fieldClassName={cn(fieldClassName, {\n                    [styles.focusVisible]: focusVisible,\n                })}\n                size={size}\n                block={block}\n                required={required}\n                disabled={disabled}\n                filled={filled || focused}\n                focused={focused}\n                error={error}\n                label={label}\n                hint={hint}\n                leftAddons={leftAddons}\n                rightAddons={rightAddons}\n                bottomAddons={bottomAddons}\n            >\n                {autosize ? (\n                    <TextareaAutosize\n                        {...textareaAttrs}\n                        maxLength={maxLength}\n                        maxRows={maxRows}\n                        minRows={minRows}\n                        onHeightChange={onHeightChange}\n                        ref={textareaMergedRef as any}\n                    />\n                ) : (\n                    <textarea maxLength={maxLength} {...textareaAttrs} ref={textareaMergedRef} style={{ maxHeight }} />\n                )}\n                {counter && <span className={styles.counter}>{countSymbols()}</span>}\n            </FormControl>\n        );\n    },\n);\n\n"],"names":["Textarea","React","autoComplete","autosize","size","block","bottomAddons","fieldClassName","className","dataTestId","disabled","error","hint","textareaClassName","label","leftAddons","onFocus","required","onBlur","onChange","onHeightChange","rightAddons","maxRows","minRows","maxHeight","resize","value","defaultValue","maxLength","counter","rows","restProps","ref","uncontrolled","textareaRef","useRef","focused","setFocused","useState","stateValue","setStateValue","focusVisible","useFocus","filled","useEffect","handleTextareaFocus","useCallback","event","handleTextareaBlur","handleTextareaChange","textareaProps","cn","styles","mergeRefs","countSymbols","textareaMergedRef","textareaAttrs","jsxs","FormControl","jsx","TextareaAutosize"],"mappings":";;;;;;;;AA8IO,MAAMA,KAAWC,EAAM;AAAA,EAC1B,CACI;AAAA,IACI,cAAAC,IAAe;AAAA,IACf,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,MAAAC,IAAO3B,IAAW,IAAI;AAAA,IACtB,GAAG4B;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAeP,MAAU,QAEzBQ,IAAcC,GAA4B,IAAI,GAE9C,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAYC,CAAa,IAAIF,EAASX,KAAgB,EAAE,GAEzD,CAACc,CAAY,IAAIC,GAASR,GAAa,UAAU,GAEjDS,IAAS,GAAQV,IAAeM,IAAab;AAGnD,IAAAkB,GAAU,MAAM;AACZ,MAAIzC,KAAYqB,KAAaU,EAAY,WAAWA,EAAY,QAAQ,UACpEA,EAAY,QAAQ,MAAM,YAAY,GAAGV,CAAS;AAAA,IAE1D,GAAG,CAACU,GAAa/B,GAAUqB,CAAS,CAAC;AAErC,UAAMqB,IAAsBC;AAAA,MACxB,CAACC,MAAiD;AAC9C,QAAAV,EAAW,EAAI,GAEXrB,KACAA,EAAQ+B,CAAK;AAAA,MAErB;AAAA,MACA,CAAC/B,CAAO;AAAA,IAAA,GAGNgC,IAAqBF;AAAA,MACvB,CAACC,MAAiD;AAC9C,QAAAV,EAAW,EAAK,GAEZnB,KACAA,EAAO6B,CAAK;AAAA,MAEpB;AAAA,MACA,CAAC7B,CAAM;AAAA,IAAA,GAGL+B,IAAuBH;AAAA,MACzB,CAACC,MAAkD;AAC/C,QAAI5B,KACAA,EAAS4B,GAAO,EAAE,OAAOA,EAAM,OAAO,OAAO,GAG7Cd,KACAO,EAAcO,EAAM,OAAO,KAAK;AAAA,MAExC;AAAA,MACA,CAAC5B,GAAUc,CAAY;AAAA,IAAA,GAGrBiB,IAAgB;AAAA,MAClB,GAAGnB;AAAA,MACH,WAAWoB;AAAA,QACPC,EAAO;AAAA,QACPA,EAAOhD,CAAI;AAAA,QACX;AAAA,UACI,CAACgD,EAAO,QAAQ,GAAGtC;AAAA,UACnB,CAACsC,EAAO,MAAM,GAAGT;AAAA,UACjB,CAACS,EAAO,cAAc,GAAG3B,MAAW;AAAA,QAAA;AAAA,QAExCZ;AAAA,MAAA;AAAA,MAEJ,cAAAX;AAAA,MACA,UAAAQ;AAAA,MACA,QAAQsC;AAAA,MACR,SAASH;AAAA,MACT,UAAUI;AAAA,MACV,OAAOhB,IAAeM,IAAab;AAAA,MACnC,MAAAI;AAAA,MACA,KAAKuB,GAAU,CAACrB,GAAKE,CAAW,CAAC;AAAA,MACjC,gBAAgBzB;AAAA,IAAA,GAGd6C,IAAe,MACjB,GAAGrB,IAAeM,EAAW,SAASb,KAAA,gBAAAA,EAAO,MAAM,MAAME,KAAa,GAAG,IAEvE,EAAE,KAAK2B,GAAmB,GAAGC,MAAkBN;AAErD,WACI,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAWP,EAAG3C,CAAS;AAAA,QACvB,gBAAgB2C,EAAG5C,GAAgB;AAAA,UAC/B,CAAC6C,EAAO,YAAY,GAAGX;AAAA,QAAA,CAC1B;AAAA,QACD,MAAArC;AAAA,QACA,OAAAC;AAAA,QACA,UAAAY;AAAA,QACA,UAAAP;AAAA,QACA,QAAQiC,KAAUP;AAAA,QAClB,SAAAA;AAAA,QACA,OAAAzB;AAAA,QACA,OAAAG;AAAA,QACA,MAAAF;AAAA,QACA,YAAAG;AAAA,QACA,aAAAM;AAAA,QACA,cAAAf;AAAA,QAEC,UAAA;AAAA,UAAAH,IACG,gBAAAwD;AAAA,YAACC;AAAA,YAAA;AAAA,cACI,GAAGJ;AAAA,cACJ,WAAA5B;AAAA,cACA,SAAAN;AAAA,cACA,SAAAC;AAAA,cACA,gBAAAH;AAAA,cACA,KAAKmC;AAAA,YAAA;AAAA,UAAA,IAGT,gBAAAI,EAAC,YAAA,EAAS,WAAA/B,GAAuB,GAAG4B,GAAe,KAAKD,GAAmB,OAAO,EAAE,WAAA/B,EAAA,EAAU,CAAG;AAAA,UAEpGK,KAAW,gBAAA8B,EAAC,QAAA,EAAK,WAAWP,EAAO,SAAU,cAAa,CAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzE;AACJ;"}

package/dist/theme-provider/component.d.ts

@@ -10,6 +10,7 @@ export declare const THEME_DATA_ATTR = "data-theme";
 type ThemeProviderProps = {
     themes: ThemesObject;
     selectedTheme?: THEME;
+    children?: React.ReactNode;
 };
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export declare const useTheme: () => {

package/dist/theme-provider/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/theme-provider/component.tsx"],"sourcesContent":["import React, {\n    createContext, useContext, useEffect, useState,\n} from 'react';\n\nimport { ThemesObject } from './default-themes';\n\nexport enum THEME {\n    DARK = 'dark',\n    LIGHT = 'light'\n}\n\ntype ThemeContextType = {\n    setTheme: (theme: THEME) => void;\n    currentTheme?: THEME;\n};\n\nconst ThemeContext = createContext<ThemeContextType>({\n    setTheme: () => {},\n    currentTheme: undefined,\n});\n\nexport const LOACAL_STORAGE_THEME_KEY = 'theme';\nexport const STYLE_TAG_ID = 'theme-styles';\nexport const THEME_DATA_ATTR = 'data-theme';\n\ntype ThemeProviderProps = {themes: ThemesObject; selectedTheme?: THEME };\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, themes, selectedTheme }) => {\n    const [currentTheme, setCurrentTheme] = useState<THEME>();\n\n    const setTheme = (theme: THEME) => {\n        document?.documentElement.setAttribute(THEME_DATA_ATTR, theme);\n        localStorage.setItem(LOACAL_STORAGE_THEME_KEY, theme);\n        setCurrentTheme(theme);\n    };\n\n    const applyThemes = (themesObject: ThemeProviderProps['themes']) => {\n        let styleTag = document.getElementById(STYLE_TAG_ID) as HTMLElement;\n        let cssText = '';\n\n        if (!styleTag) {\n            styleTag = document.createElement('style');\n            styleTag.id = STYLE_TAG_ID;\n            document.head.appendChild(styleTag);\n        }\n\n        Object.keys(themesObject).forEach((theme) => {\n            cssText += `html[data-theme='${theme}'] {`;\n            const themeObject = themesObject[theme as keyof ThemesObject];\n\n            Object.keys(themeObject).forEach((propertyType) => {\n                const themeByType = themeObject[propertyType as keyof ThemesObject['light']];\n\n                Object.keys(themeByType).forEach((property) => {\n                    cssText += `--color-${propertyType}-${property}: ${themeByType[property]};\\n`;\n                });\n            });\n            cssText += '} \\n';\n            styleTag.textContent = cssText;\n        });\n    };\n\n    useEffect(() => {\n        const savedTheme = localStorage?.getItem(LOACAL_STORAGE_THEME_KEY) as THEME;\n        const browserTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? THEME.DARK : THEME.LIGHT;\n\n        setTheme(selectedTheme || savedTheme || browserTheme);\n        applyThemes(themes);\n    }, [themes, selectedTheme]);\n\n    return (\n        <ThemeContext.Provider value={ { setTheme, currentTheme } }>{ children }</ThemeContext.Provider>\n    );\n};\n\nexport const useTheme = () => {\n    const { setTheme, currentTheme } = useContext(ThemeContext);\n\n    return { setTheme, currentTheme };\n};\n"],"names":["THEME","ThemeContext","createContext","LOACAL_STORAGE_THEME_KEY","STYLE_TAG_ID","THEME_DATA_ATTR","ThemeProvider","children","themes","selectedTheme","currentTheme","setCurrentTheme","useState","setTheme","theme","applyThemes","themesObject","styleTag","cssText","themeObject","propertyType","themeByType","property","useEffect","savedTheme","browserTheme","jsx","useTheme","useContext"],"mappings":";;AAMO,IAAKA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AAUZ,MAAMC,IAAeC,EAAgC;AAAA,EACjD,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,cAAc;AAClB,CAAC,GAEYC,IAA2B,SAC3BC,IAAe,gBACfC,IAAkB,cAIlBC,IAA8C,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,QAAoB;AAChG,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAElCC,IAAW,CAACC,MAAiB;AAC/B,iCAAU,gBAAgB,aAAaT,GAAiBS,IACxD,aAAa,QAAQX,GAA0BW,CAAK,GACpDH,EAAgBG,CAAK;AAAA,EACzB,GAEMC,IAAc,CAACC,MAA+C;AAChE,QAAIC,IAAW,SAAS,eAAeb,CAAY,GAC/Cc,IAAU;AAEd,IAAKD,MACDA,IAAW,SAAS,cAAc,OAAO,GACzCA,EAAS,KAAKb,GACd,SAAS,KAAK,YAAYa,CAAQ,IAGtC,OAAO,KAAKD,CAAY,EAAE,QAAQ,CAACF,MAAU;AACzC,MAAAI,KAAW,oBAAoBJ,CAAK;AACpC,YAAMK,IAAcH,EAAaF,CAA2B;AAE5D,aAAO,KAAKK,CAAW,EAAE,QAAQ,CAACC,MAAiB;AAC/C,cAAMC,IAAcF,EAAYC,CAA2C;AAE3E,eAAO,KAAKC,CAAW,EAAE,QAAQ,CAACC,MAAa;AAC3C,UAAAJ,KAAW,WAAWE,CAAY,IAAIE,CAAQ,KAAKD,EAAYC,CAAQ,CAAC;AAAA;AAAA,QAC5E,CAAC;AAAA,MACL,CAAC,GACDJ,KAAW;AAAA,GACXD,EAAS,cAAcC;AAAA,IAC3B,CAAC;AAAA,EACL;AAEA,SAAAK,EAAU,MAAM;AACZ,UAAMC,IAAa,6CAAc,QAAQrB,IACnCsB,IAAe,OAAO,cAAc,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAa;AAEnH,IAAAZ,EAASJ,KAAiBe,KAAcC,CAAY,GACpDV,EAAYP,CAAM;AAAA,EACtB,GAAG,CAACA,GAAQC,CAAa,CAAC,GAGtB,gBAAAiB,EAACzB,EAAa,UAAb,EAAsB,OAAQ,EAAE,UAAAY,GAAU,cAAAH,KAAmB,UAAAH,GAAU;AAEhF,GAEaoB,IAAW,MAAM;AAC1B,QAAM,EAAE,UAAAd,GAAU,cAAAH,MAAiBkB,EAAW3B,CAAY;AAE1D,SAAO,EAAE,UAAAY,GAAU,cAAAH,EAAA;AACvB;"}
+{"version":3,"file":"component.js","sources":["../../src/theme-provider/component.tsx"],"sourcesContent":["import React, {\n    createContext, useContext, useEffect, useState,\n} from 'react';\n\nimport { ThemesObject } from './default-themes';\n\nexport enum THEME {\n    DARK = 'dark',\n    LIGHT = 'light'\n}\n\ntype ThemeContextType = {\n    setTheme: (theme: THEME) => void;\n    currentTheme?: THEME;\n};\n\nconst ThemeContext = createContext<ThemeContextType>({\n    setTheme: () => {},\n    currentTheme: undefined,\n});\n\nexport const LOACAL_STORAGE_THEME_KEY = 'theme';\nexport const STYLE_TAG_ID = 'theme-styles';\nexport const THEME_DATA_ATTR = 'data-theme';\n\ntype ThemeProviderProps = {\n    themes: ThemesObject;\n    selectedTheme?: THEME;\n    children?: React.ReactNode;\n};\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, themes, selectedTheme }) => {\n    const [currentTheme, setCurrentTheme] = useState<THEME>();\n\n    const setTheme = (theme: THEME) => {\n        document?.documentElement.setAttribute(THEME_DATA_ATTR, theme);\n        localStorage.setItem(LOACAL_STORAGE_THEME_KEY, theme);\n        setCurrentTheme(theme);\n    };\n\n    const applyThemes = (themesObject: ThemeProviderProps['themes']) => {\n        let styleTag = document.getElementById(STYLE_TAG_ID) as HTMLElement;\n        let cssText = '';\n\n        if (!styleTag) {\n            styleTag = document.createElement('style');\n            styleTag.id = STYLE_TAG_ID;\n            document.head.appendChild(styleTag);\n        }\n\n        Object.keys(themesObject).forEach((theme) => {\n            cssText += `html[data-theme='${theme}'] {`;\n            const themeObject = themesObject[theme as keyof ThemesObject];\n\n            Object.keys(themeObject).forEach((propertyType) => {\n                const themeByType = themeObject[propertyType as keyof ThemesObject['light']];\n\n                Object.keys(themeByType).forEach((property) => {\n                    cssText += `--color-${propertyType}-${property}: ${themeByType[property]};\\n`;\n                });\n            });\n            cssText += '} \\n';\n            styleTag.textContent = cssText;\n        });\n    };\n\n    useEffect(() => {\n        const savedTheme = localStorage?.getItem(LOACAL_STORAGE_THEME_KEY) as THEME;\n        const browserTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? THEME.DARK : THEME.LIGHT;\n\n        setTheme(selectedTheme || savedTheme || browserTheme);\n        applyThemes(themes);\n    }, [themes, selectedTheme]);\n\n    return (\n        <ThemeContext.Provider value={ { setTheme, currentTheme } }>{ children }</ThemeContext.Provider>\n    );\n};\n\nexport const useTheme = () => {\n    const { setTheme, currentTheme } = useContext(ThemeContext);\n\n    return { setTheme, currentTheme };\n};\n"],"names":["THEME","ThemeContext","createContext","LOACAL_STORAGE_THEME_KEY","STYLE_TAG_ID","THEME_DATA_ATTR","ThemeProvider","children","themes","selectedTheme","currentTheme","setCurrentTheme","useState","setTheme","theme","applyThemes","themesObject","styleTag","cssText","themeObject","propertyType","themeByType","property","useEffect","savedTheme","browserTheme","jsx","useTheme","useContext"],"mappings":";;AAMO,IAAKA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AAUZ,MAAMC,IAAeC,EAAgC;AAAA,EACjD,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,cAAc;AAClB,CAAC,GAEYC,IAA2B,SAC3BC,IAAe,gBACfC,IAAkB,cAQlBC,IAA8C,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,QAAoB;AAChG,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAElCC,IAAW,CAACC,MAAiB;AAC/B,iCAAU,gBAAgB,aAAaT,GAAiBS,IACxD,aAAa,QAAQX,GAA0BW,CAAK,GACpDH,EAAgBG,CAAK;AAAA,EACzB,GAEMC,IAAc,CAACC,MAA+C;AAChE,QAAIC,IAAW,SAAS,eAAeb,CAAY,GAC/Cc,IAAU;AAEd,IAAKD,MACDA,IAAW,SAAS,cAAc,OAAO,GACzCA,EAAS,KAAKb,GACd,SAAS,KAAK,YAAYa,CAAQ,IAGtC,OAAO,KAAKD,CAAY,EAAE,QAAQ,CAACF,MAAU;AACzC,MAAAI,KAAW,oBAAoBJ,CAAK;AACpC,YAAMK,IAAcH,EAAaF,CAA2B;AAE5D,aAAO,KAAKK,CAAW,EAAE,QAAQ,CAACC,MAAiB;AAC/C,cAAMC,IAAcF,EAAYC,CAA2C;AAE3E,eAAO,KAAKC,CAAW,EAAE,QAAQ,CAACC,MAAa;AAC3C,UAAAJ,KAAW,WAAWE,CAAY,IAAIE,CAAQ,KAAKD,EAAYC,CAAQ,CAAC;AAAA;AAAA,QAC5E,CAAC;AAAA,MACL,CAAC,GACDJ,KAAW;AAAA,GACXD,EAAS,cAAcC;AAAA,IAC3B,CAAC;AAAA,EACL;AAEA,SAAAK,EAAU,MAAM;AACZ,UAAMC,IAAa,6CAAc,QAAQrB,IACnCsB,IAAe,OAAO,cAAc,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAa;AAEnH,IAAAZ,EAASJ,KAAiBe,KAAcC,CAAY,GACpDV,EAAYP,CAAM;AAAA,EACtB,GAAG,CAACA,GAAQC,CAAa,CAAC,GAGtB,gBAAAiB,EAACzB,EAAa,UAAb,EAAsB,OAAQ,EAAE,UAAAY,GAAU,cAAAH,KAAmB,UAAAH,GAAU;AAEhF,GAEaoB,IAAW,MAAM;AAC1B,QAAM,EAAE,UAAAd,GAAU,cAAAH,MAAiBkB,EAAW3B,CAAY;AAE1D,SAAO,EAAE,UAAAY,GAAU,cAAAH,EAAA;AACvB;"}

package/dist/toast/component.d.ts

@@ -34,7 +34,7 @@ export declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes
     hasCloser?: boolean | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
-} & Pick<PopoverProps, "getPortalContainer" | "open" | "transition" | "offset" | "position" | "preventFlip"> & {
+} & Pick<PopoverProps, "open" | "getPortalContainer" | "transition" | "offset" | "position" | "preventFlip"> & {
     /**
          * Элемент, относительного которого появляется тост.
          * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).

package/dist/toast-notifier/component.js

@@ -1,70 +1,69 @@
-import { jsx as x } from "react/jsx-runtime";
-import b from "react-dom";
-import C from "classnames";
-import { ToastPlate as y } from "../toast-plate/component.js";
-import { useTimer as w } from "./use-timer.js";
+import { jsx as b } from "react/jsx-runtime";
+import { createRoot as C } from "react-dom/client";
+import y from "classnames";
+import { ToastPlate as w } from "../toast-plate/component.js";
+import { useTimer as g } from "./use-timer.js";
 import o from "./index.module.css.js";
 let t;
 typeof window != "undefined" && (t = document.createElement("div"), t.setAttribute("id", "toast_manager"), document.body.appendChild(t));
-const j = ({
-  className: m,
-  children: g,
-  offset: i = 108,
-  hasCloser: l = !0,
-  onClose: E,
-  text: d,
-  onMouseEnter: $,
-  onMouseLeave: L,
-  style: a,
+const z = ({
+  className: l,
+  children: E,
+  offset: n = 108,
+  hasCloser: d = !0,
+  onClose: $,
+  text: a,
+  onMouseEnter: L,
+  onMouseLeave: A,
+  style: u,
   position: p = "bottom",
-  delay: u = 3e3,
-  ...c
+  delay: c = 3e3,
+  ...f
 }) => {
   if (typeof window == "undefined") return null;
-  const n = window.innerWidth > 600, f = () => {
-    const r = "position: fixed; z-index: 999999999;";
-    return n ? `${r} ${p}: ${i}px; right: 30px` : `${r} top: ${i}px; right: 30px; left: 30px`;
+  const i = window.innerWidth > 600, h = () => {
+    const m = "position: fixed; z-index: 999999999;";
+    return i ? `${m} ${p}: ${n}px; right: 30px` : `${m} top: ${n}px; right: 30px; left: 30px`;
   };
-  t.setAttribute("style", f());
+  t.setAttribute("style", h());
   const e = document.createElement("div");
   e.classList.remove(o.isClosing), e.setAttribute("id", `toast_wrap-${Math.random()}`), e.setAttribute("style", "margin-bottom: 18px"), t.appendChild(e);
-  const s = () => {
+  const s = C(e), r = () => {
     e.classList.add(o.isClosing), setTimeout(() => {
-      t == null || t.removeChild(e);
+      s.unmount(), t == null || t.removeChild(e);
     }, 300);
-  }, { pause: h, resume: v } = w(s, u);
+  }, { pause: v, resume: x } = g(r, c);
   return e.addEventListener("mouseenter", () => {
-    h();
-  }), e.addEventListener("mouseleave", () => {
     v();
-  }), b.render(
-    /* @__PURE__ */ x(
-      y,
+  }), e.addEventListener("mouseleave", () => {
+    x();
+  }), s.render(
+    /* @__PURE__ */ b(
+      w,
       {
-        hasCloser: l,
-        className: C(
+        hasCloser: d,
+        className: y(
           {
             [o.isVisible]: !0,
-            [o.mobile]: !n
+            [o.mobile]: !i
           },
-          m
+          l
         ),
         contentClassName: o.toastContent,
         style: {
           right: 0,
           position: "relative",
-          ...a
+          ...u
         },
         role: "alert",
-        onClose: s,
-        ...c,
-        children: d
+        onClose: r,
+        ...f,
+        children: a
       }
-    ),
-    e
+    )
   ), null;
 };
 export {
-  j as ToastNotifier
+  z as ToastNotifier
 };
 //# sourceMappingURL=component.js.map

package/dist/toast-notifier/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/toast-notifier/component.tsx"],"sourcesContent":["/* eslint-disable react/no-this-in-sfc */\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport cn from 'classnames';\n\nimport { ToastPlate, ToastPlateProps } from '../toast-plate';\n\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type ToastNotifyProps = ToastPlateProps & {\n\n    /**\n     * текст тоста\n     */\n    text?: string;\n\n    /**\n     * время автоматического закрытия тоста\n     */\n    delay?: number;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * позиция тоста относительно экрана;\n     */\n    position?: 'top' | 'bottom';\n\n    /**\n     * Время до закрытия компонента\n     */\n    autoCloseDelay?: number;\n};\n\nlet toastManager: HTMLDivElement;\n\nif (typeof window !== 'undefined') {\n    toastManager = document.createElement('div');\n\n    toastManager.setAttribute('id', 'toast_manager');\n    document.body.appendChild(toastManager);\n}\n\nexport const ToastNotifier: React.FC<ToastNotifyProps> = ({\n    className,\n    children,\n    offset = 108,\n    hasCloser = true,\n    onClose,\n    text,\n    onMouseEnter,\n    onMouseLeave,\n    style,\n    position = 'bottom',\n    delay = 3000,\n    ...restProps\n}) => {\n    if (typeof window === 'undefined') return null;\n\n    const isDesktop = window.innerWidth > 600;\n\n    const computeStyles = () => {\n        const s = 'position: fixed; z-index: 999999999;';\n\n        if (isDesktop) {\n            return `${s} ${position}: ${offset}px; right: 30px`;\n        }\n\n        return `${s} top: ${offset}px; right: 30px; left: 30px`;\n    };\n\n    toastManager.setAttribute('style', computeStyles());\n\n    const toastElement = document.createElement('div');\n\n    toastElement.classList.remove(styles.isClosing);\n    toastElement.setAttribute('id', `toast_wrap-${Math.random()}`);\n    toastElement.setAttribute('style', 'margin-bottom: 18px');\n    toastManager.appendChild(toastElement);\n\n    const remove = () => {\n        toastElement.classList.add(styles.isClosing);\n        setTimeout(() => { toastManager?.removeChild(toastElement); }, 300);\n    };\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { pause, resume } = useTimer(remove, delay);\n\n    toastElement.addEventListener('mouseenter', () => {\n        pause();\n    });\n\n    toastElement.addEventListener('mouseleave', () => {\n        resume();\n    });\n\n    ReactDOM.render(\n\n        <ToastPlate\n            hasCloser={ hasCloser }\n            className={ cn(\n                {\n                    [styles.isVisible]: true,\n                    [styles.mobile]: !isDesktop,\n                },\n                className,\n            ) }\n            contentClassName={ styles.toastContent }\n            style={ {\n                right: 0,\n                position: 'relative',\n                ...style,\n            } }\n            role=\"alert\"\n            onClose={ remove }\n            { ...restProps }\n        >\n            { text }\n        </ToastPlate>,\n        toastElement,\n    );\n\n    return null;\n};\n"],"names":["toastManager","ToastNotifier","className","children","offset","hasCloser","onClose","text","onMouseEnter","onMouseLeave","style","position","delay","restProps","isDesktop","computeStyles","s","toastElement","styles","remove","pause","resume","useTimer","ReactDOM","jsx","ToastPlate","cn"],"mappings":";;;;;;AAuCA,IAAIA;AAEA,OAAO,UAAW,gBAClBA,IAAe,SAAS,cAAc,KAAK,GAE3CA,EAAa,aAAa,MAAM,eAAe,GAC/C,SAAS,KAAK,YAAYA,CAAY;AAGnC,MAAMC,IAA4C,CAAC;AAAA,EACtD,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACP,MAAM;AACF,MAAI,OAAO,UAAW,YAAa,QAAO;AAE1C,QAAMC,IAAY,OAAO,aAAa,KAEhCC,IAAgB,MAAM;AACxB,UAAMC,IAAI;AAEV,WAAIF,IACO,GAAGE,CAAC,IAAIL,CAAQ,KAAKP,CAAM,oBAG/B,GAAGY,CAAC,SAASZ,CAAM;AAAA,EAC9B;AAEA,EAAAJ,EAAa,aAAa,SAASe,GAAe;AAElD,QAAME,IAAe,SAAS,cAAc,KAAK;AAEjD,EAAAA,EAAa,UAAU,OAAOC,EAAO,SAAS,GAC9CD,EAAa,aAAa,MAAM,cAAc,KAAK,OAAA,CAAQ,EAAE,GAC7DA,EAAa,aAAa,SAAS,qBAAqB,GACxDjB,EAAa,YAAYiB,CAAY;AAErC,QAAME,IAAS,MAAM;AACjB,IAAAF,EAAa,UAAU,IAAIC,EAAO,SAAS,GAC3C,WAAW,MAAM;AAAE,MAAAlB,KAAA,QAAAA,EAAc,YAAYiB;AAAA,IAAe,GAAG,GAAG;AAAA,EACtE,GAGM,EAAE,OAAAG,GAAO,QAAAC,EAAA,IAAWC,EAASH,GAAQP,CAAK;AAEhD,SAAAK,EAAa,iBAAiB,cAAc,MAAM;AAC9C,IAAAG,EAAA;AAAA,EACJ,CAAC,GAEDH,EAAa,iBAAiB,cAAc,MAAM;AAC9C,IAAAI,EAAA;AAAA,EACJ,CAAC,GAEDE,EAAS;AAAA,IAEL,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAApB;AAAA,QACA,WAAYqB;AAAA,UACR;AAAA,YACI,CAACR,EAAO,SAAS,GAAG;AAAA,YACpB,CAACA,EAAO,MAAM,GAAG,CAACJ;AAAA,UAAA;AAAA,UAEtBZ;AAAA,QAAA;AAAA,QAEJ,kBAAmBgB,EAAO;AAAA,QAC1B,OAAQ;AAAA,UACJ,OAAO;AAAA,UACP,UAAU;AAAA,UACV,GAAGR;AAAA,QAAA;AAAA,QAEP,MAAK;AAAA,QACL,SAAUS;AAAA,QACR,GAAGN;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAENU;AAAA,EAAA,GAGG;AACX;"}
+{"version":3,"file":"component.js","sources":["../../src/toast-notifier/component.tsx"],"sourcesContent":["/* eslint-disable react/no-this-in-sfc */\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport cn from 'classnames';\n\nimport { ToastPlate, ToastPlateProps } from '../toast-plate';\n\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type ToastNotifyProps = ToastPlateProps & {\n\n    /**\n     * текст тоста\n     */\n    text?: string;\n\n    /**\n     * время автоматического закрытия тоста\n     */\n    delay?: number;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * позиция тоста относительно экрана;\n     */\n    position?: 'top' | 'bottom';\n\n    /**\n     * Время до закрытия компонента\n     */\n    autoCloseDelay?: number;\n};\n\nlet toastManager: HTMLDivElement;\n\nif (typeof window !== 'undefined') {\n    toastManager = document.createElement('div');\n\n    toastManager.setAttribute('id', 'toast_manager');\n    document.body.appendChild(toastManager);\n}\n\nexport const ToastNotifier: React.FC<ToastNotifyProps> = ({\n    className,\n    children,\n    offset = 108,\n    hasCloser = true,\n    onClose,\n    text,\n    onMouseEnter,\n    onMouseLeave,\n    style,\n    position = 'bottom',\n    delay = 3000,\n    ...restProps\n}) => {\n    if (typeof window === 'undefined') return null;\n\n    const isDesktop = window.innerWidth > 600;\n\n    const computeStyles = () => {\n        const s = 'position: fixed; z-index: 999999999;';\n\n        if (isDesktop) {\n            return `${s} ${position}: ${offset}px; right: 30px`;\n        }\n\n        return `${s} top: ${offset}px; right: 30px; left: 30px`;\n    };\n\n    toastManager.setAttribute('style', computeStyles());\n\n    const toastElement = document.createElement('div');\n\n    toastElement.classList.remove(styles.isClosing);\n    toastElement.setAttribute('id', `toast_wrap-${Math.random()}`);\n    toastElement.setAttribute('style', 'margin-bottom: 18px');\n    toastManager.appendChild(toastElement);\n\n    const root = createRoot(toastElement);\n\n    const remove = () => {\n        toastElement.classList.add(styles.isClosing);\n        setTimeout(() => {\n            root.unmount();\n            toastManager?.removeChild(toastElement);\n        }, 300);\n    };\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { pause, resume } = useTimer(remove, delay);\n\n    toastElement.addEventListener('mouseenter', () => {\n        pause();\n    });\n\n    toastElement.addEventListener('mouseleave', () => {\n        resume();\n    });\n\n    root.render(\n        <ToastPlate\n            hasCloser={ hasCloser }\n            className={ cn(\n                {\n                    [styles.isVisible]: true,\n                    [styles.mobile]: !isDesktop,\n                },\n                className,\n            ) }\n            contentClassName={ styles.toastContent }\n            style={ {\n                right: 0,\n                position: 'relative',\n                ...style,\n            } }\n            role=\"alert\"\n            onClose={ remove }\n            { ...restProps }\n        >\n            { text }\n        </ToastPlate>,\n    );\n\n    return null;\n};\n"],"names":["toastManager","ToastNotifier","className","children","offset","hasCloser","onClose","text","onMouseEnter","onMouseLeave","style","position","delay","restProps","isDesktop","computeStyles","s","toastElement","styles","root","createRoot","remove","pause","resume","useTimer","jsx","ToastPlate","cn"],"mappings":";;;;;;AAuCA,IAAIA;AAEA,OAAO,UAAW,gBAClBA,IAAe,SAAS,cAAc,KAAK,GAE3CA,EAAa,aAAa,MAAM,eAAe,GAC/C,SAAS,KAAK,YAAYA,CAAY;AAGnC,MAAMC,IAA4C,CAAC;AAAA,EACtD,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACP,MAAM;AACF,MAAI,OAAO,UAAW,YAAa,QAAO;AAE1C,QAAMC,IAAY,OAAO,aAAa,KAEhCC,IAAgB,MAAM;AACxB,UAAMC,IAAI;AAEV,WAAIF,IACO,GAAGE,CAAC,IAAIL,CAAQ,KAAKP,CAAM,oBAG/B,GAAGY,CAAC,SAASZ,CAAM;AAAA,EAC9B;AAEA,EAAAJ,EAAa,aAAa,SAASe,GAAe;AAElD,QAAME,IAAe,SAAS,cAAc,KAAK;AAEjD,EAAAA,EAAa,UAAU,OAAOC,EAAO,SAAS,GAC9CD,EAAa,aAAa,MAAM,cAAc,KAAK,OAAA,CAAQ,EAAE,GAC7DA,EAAa,aAAa,SAAS,qBAAqB,GACxDjB,EAAa,YAAYiB,CAAY;AAErC,QAAME,IAAOC,EAAWH,CAAY,GAE9BI,IAAS,MAAM;AACjB,IAAAJ,EAAa,UAAU,IAAIC,EAAO,SAAS,GAC3C,WAAW,MAAM;AACb,MAAAC,EAAK,QAAA,GACLnB,KAAA,QAAAA,EAAc,YAAYiB;AAAA,IAC9B,GAAG,GAAG;AAAA,EACV,GAGM,EAAE,OAAAK,GAAO,QAAAC,EAAA,IAAWC,EAASH,GAAQT,CAAK;AAEhD,SAAAK,EAAa,iBAAiB,cAAc,MAAM;AAC9C,IAAAK,EAAA;AAAA,EACJ,CAAC,GAEDL,EAAa,iBAAiB,cAAc,MAAM;AAC9C,IAAAM,EAAA;AAAA,EACJ,CAAC,GAEDJ,EAAK;AAAA,IACD,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAArB;AAAA,QACA,WAAYsB;AAAA,UACR;AAAA,YACI,CAACT,EAAO,SAAS,GAAG;AAAA,YACpB,CAACA,EAAO,MAAM,GAAG,CAACJ;AAAA,UAAA;AAAA,UAEtBZ;AAAA,QAAA;AAAA,QAEJ,kBAAmBgB,EAAO;AAAA,QAC1B,OAAQ;AAAA,UACJ,OAAO;AAAA,UACP,UAAU;AAAA,UACV,GAAGR;AAAA,QAAA;AAAA,QAEP,MAAK;AAAA,QACL,SAAUW;AAAA,QACR,GAAGR;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GAGG;AACX;"}

package/dist/tooltip/component.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactElement, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactElement, ReactNode } from 'react';
 import { PopoverProps, Position } from '../popover';
 type Trigger = 'click' | 'hover';
 export type TooltipProps = {
@@ -42,7 +42,7 @@ export type TooltipProps = {
      * Дочерние элементы тултипа.
      * При срабатывании событий на них, тултип будет открываться
      */
-    children: ReactElement;
+    children: ReactElement<HTMLAttributes<HTMLElement>>;
     /**
      * Смещение тултипа
      */

package/dist/tooltip/component.js

@@ -1,8 +1,8 @@
 import { jsxs as X, jsx as l } from "react/jsx-runtime";
 import f, { useState as M, useRef as Y, useCallback as C, useEffect as Z, cloneElement as _ } from "react";
-import $ from "react-node-resolver";
 import m from "classnames";
-import { Popover as D } from "../popover/component.js";
+import { Popover as $ } from "../popover/component.js";
+import { NodeResolver as D } from "./node-resolver.js";
 import d from "./index.module.css.js";
 const ce = ({
   children: t,
@@ -101,9 +101,9 @@ const ce = ({
     c.current = e, A(c.current);
   }, []);
   return /* @__PURE__ */ X(f.Fragment, { children: [
-    /* @__PURE__ */ l($, { innerRef: U, children: J() }),
+    /* @__PURE__ */ l(D, { innerRef: U, children: J() }),
     k && /* @__PURE__ */ l(
-      D,
+      $,
       {
         anchorElement: k,
         open: Q,

package/dist/tooltip/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/tooltip/component.tsx"],"sourcesContent":["import React, {\n    cloneElement,\n    FC,\n    HTMLAttributes,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport NodeResolver from 'react-node-resolver';\nimport cn from 'classnames';\n\nimport { Popover, PopoverProps, Position } from '../popover';\n\nimport styles from './index.module.css';\n\ntype Trigger = 'click' | 'hover';\n\ntype RefElement = HTMLElement | null;\n\nexport type TooltipProps = {\n    /**\n     * Контент тултипа\n     */\n    content: ReactNode;\n\n    /**\n     * Позиционирование тултипа\n     */\n    position?: Position;\n\n    /**\n     * Задержка перед открытием тултипа\n     */\n    onOpenDelay?: number;\n\n    /**\n     * Задержка перед закрытием тултипа\n     */\n    onCloseDelay?: number;\n\n    /**\n     * Обработчик открытия тултипа\n     */\n    onOpen?: () => void;\n\n    /**\n     * Обработчик закрытия тултипа\n     */\n    onClose?: () => void;\n\n    /**\n     * Событие, по которому происходит открытие тултипа\n     */\n    trigger?: Trigger;\n\n    /**\n     * Если `true`, то тултип будет открыт\n     */\n    open?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Дочерние элементы тултипа.\n     * При срабатывании событий на них, тултип будет открываться\n     */\n    children: ReactElement;\n\n    /**\n     * Смещение тултипа\n     */\n    offset?: [number, number];\n\n    /**\n     * Функция, возвращающая контейнер, в который будет рендериться тултип\n     */\n    getPortalContainer?: () => HTMLElement;\n\n    /**\n     * Дополнительный класс для стрелочки\n     */\n    arrowClassName?: string;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для поповера\n     */\n    popoverClassName?: string;\n\n    /**\n     * Хранит функцию, с помощью которой можно обновить положение компонента\n     */\n    updatePopover?: PopoverProps['update'];\n};\n\nexport const Tooltip: FC<TooltipProps> = ({\n    children,\n    content,\n    trigger = 'hover',\n    onCloseDelay = 300,\n    onOpenDelay = 300,\n    dataTestId,\n    onClose,\n    onOpen,\n    open: forcedOpen,\n    getPortalContainer,\n    offset = [0, 10],\n    position,\n    contentClassName,\n    arrowClassName,\n    popoverClassName,\n    updatePopover,\n}) => {\n    const [visible, setVisible] = useState(!!forcedOpen);\n    const [target, setTarget] = useState<RefElement>(null);\n\n    const targetRef = React.useRef<RefElement>(null);\n    const contentRef = React.useRef<RefElement>(null);\n\n    const timer = useRef(0);\n\n    const open = () => {\n        if (!visible) {\n            setVisible(true);\n\n            if (onOpen) {\n                onOpen();\n            }\n        }\n    };\n\n    const close = useCallback(() => {\n        if (visible) {\n            setVisible(false);\n\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [onClose, visible]);\n\n    const toggle = () => {\n        if (visible) {\n            close();\n        } else {\n            open();\n        }\n    };\n\n    const clickedOutside = (node: Element): boolean => {\n        if (targetRef.current && targetRef.current.contains(node)) {\n            return false;\n        }\n\n        if (contentRef.current && contentRef.current.contains(node)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    useEffect(() => {\n        const handleBodyClick = (event: MouseEvent) => {\n            const eventTarget = event.target as Element;\n\n            if (clickedOutside(eventTarget)) {\n                close();\n            }\n        };\n\n        document.body.addEventListener('click', handleBodyClick);\n\n        return () => {\n            document.body.removeEventListener('click', handleBodyClick);\n\n            clearTimeout(timer.current);\n        };\n    }, [close]);\n\n    const handleTargetClick = (event: React.MouseEvent<HTMLElement>) => {\n        if (children.props.onClick) {\n            children.props.onClick(event);\n        }\n\n        toggle();\n    };\n\n    const handleMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n        if (children.props.onMouseOver) {\n            children.props.onMouseOver(event);\n        }\n\n        clearTimeout(timer.current);\n\n        timer.current = window.setTimeout(() => {\n            open();\n        }, onOpenDelay);\n    };\n\n    const handleMouseOut = (event: React.MouseEvent<HTMLElement>) => {\n        if (children.props.onMouseOut) {\n            children.props.onMouseOut(event);\n        }\n\n        clearTimeout(timer.current);\n\n        timer.current = window.setTimeout(() => {\n            close();\n        }, onCloseDelay);\n    };\n\n    const handleTouchStart = (event: React.TouchEvent<HTMLElement>) => {\n        if (children.props.onTouchStart) {\n            children.props.onTouchStart(event);\n        }\n\n        const eventTarget = event.target as Element;\n\n        clearTimeout(timer.current);\n\n        if (clickedOutside(eventTarget)) {\n            timer.current = window.setTimeout(() => {\n                close();\n            }, onCloseDelay);\n        } else {\n            open();\n        }\n    };\n\n    const onClickProps = { onClick: handleTargetClick };\n\n    const onHoverProps = {\n        onMouseOver: handleMouseOver,\n        onMouseOut: handleMouseOut,\n        onTouchStart: handleTouchStart,\n    };\n\n    const getTargetProps = (\n        targetProps: HTMLAttributes<HTMLElement>,\n    ): HTMLAttributes<HTMLElement> => {\n        const props = {\n            className: cn(styles.target, targetProps.className),\n        };\n\n        switch (trigger) {\n            case 'click':\n                return {\n                    ...props,\n                    ...onClickProps,\n                };\n            case 'hover':\n                return {\n                    ...props,\n                    ...onHoverProps,\n                };\n            default:\n                return {};\n        }\n    };\n\n    const getContentProps = (): HTMLAttributes<HTMLElement> => {\n        const props = {\n            ref: contentRef,\n            'data-test-id': dataTestId,\n            className: cn(styles.component, contentClassName),\n        };\n\n        switch (trigger) {\n            case 'hover':\n                return {\n                    ...props,\n                    ...onHoverProps,\n                };\n            default:\n                return props;\n        }\n    };\n\n    const renderTarget = () => {\n        const props = getTargetProps(children.props);\n\n        return cloneElement(children, props);\n    };\n\n    const renderContent = () => {\n        const props = getContentProps();\n\n        return <div { ...props }>{ content }</div>;\n    };\n\n    const show = forcedOpen === undefined ? visible : forcedOpen;\n\n    const handleTargetRef = useCallback((ref: RefElement) => {\n        targetRef.current = ref;\n\n        setTarget(targetRef.current);\n    }, []);\n\n    return (\n        <React.Fragment>\n            <NodeResolver innerRef={ handleTargetRef }>{ renderTarget() as any }</NodeResolver>\n\n            { target && (\n                <Popover\n                    anchorElement={ target }\n                    open={ show }\n                    getPortalContainer={ getPortalContainer }\n                    arrowClassName={ arrowClassName }\n                    popperClassName={ cn(styles.popper, popoverClassName) }\n                    offset={ offset }\n                    withArrow={ true }\n                    position={ position }\n                    update={ updatePopover }\n                >\n                    { renderContent() }\n                </Popover>\n            ) }\n        </React.Fragment>\n    );\n};\n"],"names":["Tooltip","children","content","trigger","onCloseDelay","onOpenDelay","dataTestId","onClose","onOpen","forcedOpen","getPortalContainer","offset","position","contentClassName","arrowClassName","popoverClassName","updatePopover","visible","setVisible","useState","target","setTarget","targetRef","React","contentRef","timer","useRef","open","close","useCallback","toggle","clickedOutside","node","useEffect","handleBodyClick","event","eventTarget","handleTargetClick","handleMouseOver","handleMouseOut","handleTouchStart","onClickProps","onHoverProps","getTargetProps","targetProps","props","cn","styles","getContentProps","renderTarget","cloneElement","renderContent","jsx","show","handleTargetRef","ref","jsxs","NodeResolver","Popover"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../src/tooltip/component.tsx"],"sourcesContent":["import React, {\n    cloneElement,\n    FC,\n    HTMLAttributes,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport cn from 'classnames';\n\nimport { Popover, PopoverProps, Position } from '../popover';\n\nimport { NodeResolver } from './node-resolver';\nimport styles from './index.module.css';\n\ntype Trigger = 'click' | 'hover';\n\ntype RefElement = HTMLElement | null;\n\nexport type TooltipProps = {\n    /**\n     * Контент тултипа\n     */\n    content: ReactNode;\n\n    /**\n     * Позиционирование тултипа\n     */\n    position?: Position;\n\n    /**\n     * Задержка перед открытием тултипа\n     */\n    onOpenDelay?: number;\n\n    /**\n     * Задержка перед закрытием тултипа\n     */\n    onCloseDelay?: number;\n\n    /**\n     * Обработчик открытия тултипа\n     */\n    onOpen?: () => void;\n\n    /**\n     * Обработчик закрытия тултипа\n     */\n    onClose?: () => void;\n\n    /**\n     * Событие, по которому происходит открытие тултипа\n     */\n    trigger?: Trigger;\n\n    /**\n     * Если `true`, то тултип будет открыт\n     */\n    open?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Дочерние элементы тултипа.\n     * При срабатывании событий на них, тултип будет открываться\n     */\n    children: ReactElement<HTMLAttributes<HTMLElement>>;\n\n    /**\n     * Смещение тултипа\n     */\n    offset?: [number, number];\n\n    /**\n     * Функция, возвращающая контейнер, в который будет рендериться тултип\n     */\n    getPortalContainer?: () => HTMLElement;\n\n    /**\n     * Дополнительный класс для стрелочки\n     */\n    arrowClassName?: string;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для поповера\n     */\n    popoverClassName?: string;\n\n    /**\n     * Хранит функцию, с помощью которой можно обновить положение компонента\n     */\n    updatePopover?: PopoverProps['update'];\n};\n\nexport const Tooltip: FC<TooltipProps> = ({\n    children,\n    content,\n    trigger = 'hover',\n    onCloseDelay = 300,\n    onOpenDelay = 300,\n    dataTestId,\n    onClose,\n    onOpen,\n    open: forcedOpen,\n    getPortalContainer,\n    offset = [0, 10],\n    position,\n    contentClassName,\n    arrowClassName,\n    popoverClassName,\n    updatePopover,\n}) => {\n    const [visible, setVisible] = useState(!!forcedOpen);\n    const [target, setTarget] = useState<RefElement>(null);\n\n    const targetRef = React.useRef<RefElement>(null);\n    const contentRef = React.useRef<RefElement>(null);\n\n    const timer = useRef(0);\n\n    const open = () => {\n        if (!visible) {\n            setVisible(true);\n\n            if (onOpen) {\n                onOpen();\n            }\n        }\n    };\n\n    const close = useCallback(() => {\n        if (visible) {\n            setVisible(false);\n\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [onClose, visible]);\n\n    const toggle = () => {\n        if (visible) {\n            close();\n        } else {\n            open();\n        }\n    };\n\n    const clickedOutside = (node: Element): boolean => {\n        if (targetRef.current && targetRef.current.contains(node)) {\n            return false;\n        }\n\n        if (contentRef.current && contentRef.current.contains(node)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    useEffect(() => {\n        const handleBodyClick = (event: MouseEvent) => {\n            const eventTarget = event.target as Element;\n\n            if (clickedOutside(eventTarget)) {\n                close();\n            }\n        };\n\n        document.body.addEventListener('click', handleBodyClick);\n\n        return () => {\n            document.body.removeEventListener('click', handleBodyClick);\n\n            clearTimeout(timer.current);\n        };\n    }, [close]);\n\n    const handleTargetClick = (event: React.MouseEvent<HTMLElement>) => {\n        if (children.props.onClick) {\n            children.props.onClick(event);\n        }\n\n        toggle();\n    };\n\n    const handleMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n        if (children.props.onMouseOver) {\n            children.props.onMouseOver(event);\n        }\n\n        clearTimeout(timer.current);\n\n        timer.current = window.setTimeout(() => {\n            open();\n        }, onOpenDelay);\n    };\n\n    const handleMouseOut = (event: React.MouseEvent<HTMLElement>) => {\n        if (children.props.onMouseOut) {\n            children.props.onMouseOut(event);\n        }\n\n        clearTimeout(timer.current);\n\n        timer.current = window.setTimeout(() => {\n            close();\n        }, onCloseDelay);\n    };\n\n    const handleTouchStart = (event: React.TouchEvent<HTMLElement>) => {\n        if (children.props.onTouchStart) {\n            children.props.onTouchStart(event);\n        }\n\n        const eventTarget = event.target as Element;\n\n        clearTimeout(timer.current);\n\n        if (clickedOutside(eventTarget)) {\n            timer.current = window.setTimeout(() => {\n                close();\n            }, onCloseDelay);\n        } else {\n            open();\n        }\n    };\n\n    const onClickProps = { onClick: handleTargetClick };\n\n    const onHoverProps = {\n        onMouseOver: handleMouseOver,\n        onMouseOut: handleMouseOut,\n        onTouchStart: handleTouchStart,\n    };\n\n    const getTargetProps = (\n        targetProps: HTMLAttributes<HTMLElement>,\n    ): HTMLAttributes<HTMLElement> => {\n        const props = {\n            className: cn(styles.target, targetProps.className),\n        };\n\n        switch (trigger) {\n            case 'click':\n                return {\n                    ...props,\n                    ...onClickProps,\n                };\n            case 'hover':\n                return {\n                    ...props,\n                    ...onHoverProps,\n                };\n            default:\n                return {};\n        }\n    };\n\n    const getContentProps = (): HTMLAttributes<HTMLElement> => {\n        const props = {\n            ref: contentRef,\n            'data-test-id': dataTestId,\n            className: cn(styles.component, contentClassName),\n        };\n\n        switch (trigger) {\n            case 'hover':\n                return {\n                    ...props,\n                    ...onHoverProps,\n                };\n            default:\n                return props;\n        }\n    };\n\n    const renderTarget = () => {\n        const props = getTargetProps(children.props);\n\n        return cloneElement(children, props);\n    };\n\n    const renderContent = () => {\n        const props = getContentProps();\n\n        return <div { ...props }>{ content }</div>;\n    };\n\n    const show = forcedOpen === undefined ? visible : forcedOpen;\n\n    const handleTargetRef = useCallback((ref: RefElement) => {\n        targetRef.current = ref;\n\n        setTarget(targetRef.current);\n    }, []);\n\n    return (\n        <React.Fragment>\n            <NodeResolver innerRef={ handleTargetRef }>{ renderTarget() as any }</NodeResolver>\n\n            { target && (\n                <Popover\n                    anchorElement={ target }\n                    open={ show }\n                    getPortalContainer={ getPortalContainer }\n                    arrowClassName={ arrowClassName }\n                    popperClassName={ cn(styles.popper, popoverClassName) }\n                    offset={ offset }\n                    withArrow={ true }\n                    position={ position }\n                    update={ updatePopover }\n                >\n                    { renderContent() }\n                </Popover>\n            ) }\n        </React.Fragment>\n    );\n};\n"],"names":["Tooltip","children","content","trigger","onCloseDelay","onOpenDelay","dataTestId","onClose","onOpen","forcedOpen","getPortalContainer","offset","position","contentClassName","arrowClassName","popoverClassName","updatePopover","visible","setVisible","useState","target","setTarget","targetRef","React","contentRef","timer","useRef","open","close","useCallback","toggle","clickedOutside","node","useEffect","handleBodyClick","event","eventTarget","handleTargetClick","handleMouseOver","handleMouseOut","handleTouchStart","onClickProps","onHoverProps","getTargetProps","targetProps","props","cn","styles","getContentProps","renderTarget","cloneElement","renderContent","jsx","show","handleTargetRef","ref","jsxs","NodeResolver","Popover"],"mappings":"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"}

package/dist/tooltip/node-resolver.d.ts

@@ -0,0 +1,26 @@
+import { default as React, ReactElement } from 'react';
+type NodeResolverProps = {
+    innerRef: (node: HTMLElement | null) => void;
+    children: ReactElement;
+};
+/**
+ * Раньше тут использовался `react-node-resolver`, который тянул `findDOMNode`
+ * из react-dom и ломал сборку под React 18+ (deprecated в 18, удалён в 19) и
+ * требовал yarn-патча на CommonJS-экспорты.
+ *
+ * Этот wrapper заменяет его на эквивалентное по поведению решение:
+ * рендерим невидимый span (`display: contents` исключает его из visual layout
+ * и accessibility tree, оставляя ребёнка прямым потомком родителя в layout-
+ * движке), а DOM-узел ребёнка достаём через `firstElementChild` контейнера.
+ *
+ * Контракт для caller'а сохранён 1-в-1:
+ *   - `innerRef(node)` вызывается с реальным DOM-узлом ребёнка на mount;
+ *   - `innerRef(null)` вызывается на unmount;
+ *   - при смене `children` ref обновляется.
+ *
+ * Не используем `cloneElement(child, { ref })`, чтобы не требовать от ребёнка
+ * быть DOM-элементом или forwardRef-компонентом — старый Tooltip API такого
+ * не гарантировал.
+ */
+export declare const NodeResolver: React.FC<NodeResolverProps>;
+export {};

package/dist/tooltip/node-resolver.js

@@ -0,0 +1,14 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useRef as l, useEffect as u } from "react";
+const c = ({ innerRef: e, children: t }) => {
+  const o = l(null);
+  return u(() => {
+    var s;
+    const r = (s = o.current) == null ? void 0 : s.firstElementChild;
+    return e(r instanceof HTMLElement ? r : null), () => e(null);
+  }, [e, t]), /* @__PURE__ */ n("span", { ref: o, style: { display: "contents" }, children: t });
+};
+export {
+  c as NodeResolver
+};
+//# sourceMappingURL=node-resolver.js.map

package/dist/tooltip/node-resolver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-resolver.js","sources":["../../src/tooltip/node-resolver.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useRef } from 'react';\n\ntype NodeResolverProps = {\n    innerRef: (node: HTMLElement | null) => void;\n    children: ReactElement;\n};\n\n/**\n * Раньше тут использовался `react-node-resolver`, который тянул `findDOMNode`\n * из react-dom и ломал сборку под React 18+ (deprecated в 18, удалён в 19) и\n * требовал yarn-патча на CommonJS-экспорты.\n *\n * Этот wrapper заменяет его на эквивалентное по поведению решение:\n * рендерим невидимый span (`display: contents` исключает его из visual layout\n * и accessibility tree, оставляя ребёнка прямым потомком родителя в layout-\n * движке), а DOM-узел ребёнка достаём через `firstElementChild` контейнера.\n *\n * Контракт для caller'а сохранён 1-в-1:\n *   - `innerRef(node)` вызывается с реальным DOM-узлом ребёнка на mount;\n *   - `innerRef(null)` вызывается на unmount;\n *   - при смене `children` ref обновляется.\n *\n * Не используем `cloneElement(child, { ref })`, чтобы не требовать от ребёнка\n * быть DOM-элементом или forwardRef-компонентом — старый Tooltip API такого\n * не гарантировал.\n */\nexport const NodeResolver: React.FC<NodeResolverProps> = ({ innerRef, children }) => {\n    const wrapperRef = useRef<HTMLSpanElement>(null);\n\n    useEffect(() => {\n        const node = wrapperRef.current?.firstElementChild;\n\n        innerRef(node instanceof HTMLElement ? node : null);\n\n        return () => innerRef(null);\n    }, [innerRef, children]);\n\n    return (\n        <span ref={ wrapperRef } style={ { display: 'contents' } }>\n            { children }\n        </span>\n    );\n};\n"],"names":["NodeResolver","innerRef","children","wrapperRef","useRef","useEffect","node","_a","jsx"],"mappings":";;AA0BO,MAAMA,IAA4C,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AACjF,QAAMC,IAAaC,EAAwB,IAAI;AAE/C,SAAAC,EAAU,MAAM;;AACZ,UAAMC,KAAOC,IAAAJ,EAAW,YAAX,gBAAAI,EAAoB;AAEjC,WAAAN,EAASK,aAAgB,cAAcA,IAAO,IAAI,GAE3C,MAAML,EAAS,IAAI;AAAA,EAC9B,GAAG,CAACA,GAAUC,CAAQ,CAAC,GAGnB,gBAAAM,EAAC,UAAK,KAAML,GAAa,OAAQ,EAAE,SAAS,cACtC,UAAAD,GACN;AAER;"}

package/dist/typography/title/component.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 import { Color } from '../colors';
 export type TitleProps = {
     /**
@@ -41,5 +41,5 @@ type Styles = {
         [key: string]: string;
     };
 };
-export declare const Title: ({ tag: Component, view, weight, defaultMargins, color, className, dataTestId, uppercase, through, children, styles, }: TitleProps & Styles) => JSX.Element;
+export declare const Title: ({ tag: Component, view, weight, defaultMargins, color, className, dataTestId, uppercase, through, children, styles, }: TitleProps & Styles) => React.JSX.Element;
 export {};

package/dist/with-suffix/component.d.ts

@@ -34,7 +34,7 @@ export declare const withSuffix: (Input: FC<InputProps & RefAttributes<HTMLInput
     addonsClassName?: string | undefined;
     focusedClassName?: string | undefined;
     filledClassName?: string | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement, Element>, payload: {
         value: string;
     }) => void) | undefined;
     onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alphakits/ui",
-    "version": "2.0.12",
+    "version": "2.1.0",
     "files": [
         "dist"
     ],
@@ -48,7 +48,6 @@
         "query-string": "^7.0.1",
         "react-images-viewer": "^1.7.1",
         "react-merge-refs": "1.1.0",
-        "react-node-resolver": "^2.0.1",
         "react-swipeable": "^6.1.0",
         "react-swipeable-bottom-sheet": "^1.1.2",
         "react-text-mask": "^5.4.3",
@@ -97,9 +96,8 @@
         "@types/jest": "^25.1.4",
         "@types/node": "^20.17.0",
         "@types/optimize-css-assets-webpack-plugin": "^5",
-        "@types/react": "16.9.23",
-        "@types/react-dom": "16.9.5",
-        "@types/react-node-resolver": "^2.0.0",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
         "@types/react-transition-group": "^4.4.1",
         "@types/react-window": "1.8.2",
         "@types/uuid": "8.3.0",
@@ -141,10 +139,9 @@
         "prettier": "^2.1.1",
         "prettier-eslint": "^11.0.0",
         "prettier-eslint-cli": "^5.0.0",
-        "react": "17.0.2",
+        "react": "19.2.6",
         "react-docgen-typescript-loader": "^3.7.1",
-        "react-dom": "17.0.2",
-        "react-test-renderer": "16.13.0",
+        "react-dom": "19.2.6",
         "semantic-release": "^18.0.0",
         "standard-version": "7.1.0",
         "stylelint": "^13.6.1",
@@ -160,8 +157,8 @@
     "peerDependencies": {
         "@alphakits/icons": "1.25.0",
         "formik": "2.2.9",
-        "react": "17.0.2",
-        "react-dom": "17.0.2"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "lint-staged": {
         "{src,config}/**/*.{js,jsx,ts,tsx}": [
@@ -175,7 +172,6 @@
     },
     "resolutions": {
         "@typescript-eslint/eslint-plugin": "^4.4.0",
-        "@typescript-eslint/parser": "^4.4.0",
-        "@types/react": "16.9.23"
+        "@typescript-eslint/parser": "^4.4.0"
     }
 }

package/dist/calendar/typings.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=typings.js.map

package/dist/calendar/typings.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typings.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/grid/col/component.d.ts

@@ -1,52 +0,0 @@
-import { default as React, ElementType } from 'react';
-import { ResponsivePropertyType } from '../typings';
-export type ColProps = {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Управление выравниванием колонок по вертикальной оси
-     */
-    align?: 'top' | 'middle' | 'bottom';
-    /**
-     * Управление шириной колонки.
-     * Возможные значения: `[1..12, available, auto]`
-     * или `{ mobile: [1..12], tablet: [1..12], desktop: [1..12] }`
-     * или `{ mobile: { s: [1..12], m: [1..12], l: [1..12] },
-     * tablet: { s: [1..12], m: [1..12] },
-     * desktop: { s: [1..12], m: [1..12], l: [1..12], xl: [1..12] } }`.
-     */
-    width?: ResponsivePropertyType;
-    /**
-     * Управлние смещением колонки.
-     * Возможные значения: `[1..11]`
-     * или `{ mobile: [1..11], tablet: [1..11], desktop: [1..11] }`
-     * или `{ mobile: { s: [1..11], m: [1..11], l: [1..11] },
-     * tablet: { s: [1..11], m: [1..11] },
-     * desktop: { s: [1..11], m: [1..11], l: [1..11], xl: [1..11] } }`.
-     */
-    offset?: ResponsivePropertyType;
-    /**
-     * Управление порядком колонок.
-     * Возможные значения: `[1..12, first, last]`
-     * или `{ mobile: [1..last], tablet: [1..last], desktop: [1..last] }`
-     * или `{ mobile: { s: [1..last], m: [1..last], l: [1..last] },
-     * tablet: { s: [1..last], m: [1..last] },
-     * desktop: { s: [1..last], m: [1..last], l: [1..last], xl: [1..last] } }`.
-     */
-    order?: ResponsivePropertyType;
-    /**
-     * Html тег компонента.
-     */
-    tag?: ElementType;
-    /**
-     * Контент
-     */
-    children?: React.ReactNode;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-} & React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const Col: React.FC<ColProps>;

package/dist/grid/col/component.js

@@ -1,39 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useMemo as n } from "react";
-import f from "classnames";
-import { createClassNames as u } from "../utils/index.js";
-import N from "../gutters.module.css.js";
-import o from "./index.module.css.js";
-const v = ({
-  tag: e = "div",
-  className: a,
-  align: t,
-  order: m,
-  offset: s,
-  width: r,
-  children: c,
-  dataTestId: p
-}) => {
-  const i = n(
-    () => u({ order: m, offset: s, width: r }, o),
-    [m, s, r]
-  );
-  return /* @__PURE__ */ l(
-    e,
-    {
-      className: f(
-        N.col,
-        o.component,
-        t && o[`align-${t}`],
-        ...i,
-        a
-      ),
-      "data-test-id": p,
-      children: c
-    }
-  );
-};
-export {
-  v as Col
-};
-//# sourceMappingURL=component.js.map

package/dist/grid/col/component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.js","sources":["../../../src/grid/col/component.tsx"],"sourcesContent":["import React, { ElementType, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { ResponsivePropertyType } from '../typings';\nimport { createClassNames } from '../utils';\n\nimport guttersStyles from '../gutters.module.css';\nimport styles from './index.module.css';\n\nexport type ColProps = {\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Управление выравниванием колонок по вертикальной оси\n     */\n    align?: 'top' | 'middle' | 'bottom';\n\n    /**\n     * Управление шириной колонки.\n     * Возможные значения: `[1..12, available, auto]`\n     * или `{ mobile: [1..12], tablet: [1..12], desktop: [1..12] }`\n     * или `{ mobile: { s: [1..12], m: [1..12], l: [1..12] },\n     * tablet: { s: [1..12], m: [1..12] },\n     * desktop: { s: [1..12], m: [1..12], l: [1..12], xl: [1..12] } }`.\n     */\n    width?: ResponsivePropertyType;\n\n    /**\n     * Управлние смещением колонки.\n     * Возможные значения: `[1..11]`\n     * или `{ mobile: [1..11], tablet: [1..11], desktop: [1..11] }`\n     * или `{ mobile: { s: [1..11], m: [1..11], l: [1..11] },\n     * tablet: { s: [1..11], m: [1..11] },\n     * desktop: { s: [1..11], m: [1..11], l: [1..11], xl: [1..11] } }`.\n     */\n    offset?: ResponsivePropertyType;\n\n    /**\n     * Управление порядком колонок.\n     * Возможные значения: `[1..12, first, last]`\n     * или `{ mobile: [1..last], tablet: [1..last], desktop: [1..last] }`\n     * или `{ mobile: { s: [1..last], m: [1..last], l: [1..last] },\n     * tablet: { s: [1..last], m: [1..last] },\n     * desktop: { s: [1..last], m: [1..last], l: [1..last], xl: [1..last] } }`.\n     */\n    order?: ResponsivePropertyType;\n\n    /**\n     * Html тег компонента.\n     */\n    tag?: ElementType;\n\n    /**\n     * Контент\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n} & React.HTMLAttributes<HTMLOrSVGElement>;\n\nexport const Col: React.FC<ColProps> = ({\n    tag: Component = 'div',\n    className,\n    align,\n    order,\n    offset,\n    width,\n    children,\n    dataTestId,\n}) => {\n    const classNames = useMemo(\n        () => createClassNames({ order, offset, width }, styles),\n        [order, offset, width],\n    );\n\n    return (\n        <Component\n            className={ cn(\n                guttersStyles.col,\n                styles.component,\n                align && styles[`align-${align}`],\n                ...classNames,\n                className,\n            ) }\n            data-test-id={ dataTestId }\n        >\n            { children }\n        </Component>\n    );\n};\n"],"names":["Col","Component","className","align","order","offset","width","children","dataTestId","classNames","useMemo","createClassNames","styles","jsx","cn","guttersStyles"],"mappings":";;;;;;AAkEO,MAAMA,IAA0B,CAAC;AAAA,EACpC,KAAKC,IAAY;AAAA,EACjB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACJ,MAAM;AACF,QAAMC,IAAaC;AAAA,IACf,MAAMC,EAAiB,EAAE,OAAAP,GAAO,QAAAC,GAAQ,OAAAC,EAAA,GAASM,CAAM;AAAA,IACvD,CAACR,GAAOC,GAAQC,CAAK;AAAA,EAAA;AAGzB,SACI,gBAAAO;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAYa;AAAA,QACRC,EAAc;AAAA,QACdH,EAAO;AAAA,QACPT,KAASS,EAAO,SAAST,CAAK,EAAE;AAAA,QAChC,GAAGM;AAAA,QACHP;AAAA,MAAA;AAAA,MAEJ,gBAAeM;AAAA,MAEb,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGd;"}

package/dist/grid/col/index.d.ts

@@ -1 +0,0 @@
-export * from './component';

package/dist/grid/col/index.js

@@ -1,5 +0,0 @@
-import { Col as e } from "./component.js";
-export {
-  e as Col
-};
-//# sourceMappingURL=index.js.map

package/dist/grid/col/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}