npm - @skbkontur/react-ui - Versions diffs - 6.4.2-static-css.0 → 6.4.3-6344a.0 - Mend

@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-6344a.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (941) hide show

package/components/Loader/Loader.js CHANGED Viewed

@@ -46,7 +46,7 @@ import { withSize } from '../../lib/size/SizeDecorator.js';
 import { TaskWithDelayAndMinimalDuration } from '../../lib/taskWithDelayAndMinimalDuration.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Spinner } from '../Spinner/index.js';
-import { getStyles } from './Loader.styles.js';
+import { getStyles } from './Loader.css.js';
 var types = ['mini', 'normal', 'big'];
 export var LoaderDataTids = {
     idle: 'Loader__Idle',
@@ -249,8 +249,9 @@ var Loader = /** @class */ (function (_super) {
     };
     Loader.prototype.render = function () {
         var _this = this;
-        this.styles = getStyles();
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
             return _this.renderMain();
         }));
     };
@@ -263,7 +264,7 @@ var Loader = /** @class */ (function (_super) {
             React.createElement("div", { className: this.styles.loader(), "data-tid": this.props['data-tid'] || (isLoaderActive ? LoaderDataTids.veil : LoaderDataTids.idle) },
                 React.createElement(ZIndex, { applyZIndex: isLoaderActive, coverChildren: isLoaderActive, style: { height: '100%' }, wrapperRef: this.childrenRef }, this.props.children),
                 isLoaderActive && (React.createElement(ZIndex, { wrapperRef: this.spinnerRef, className: this.cx((_a = {},
-                        _a[this.styles.active()] = isLoaderActive,
+                        _a[this.styles.active(this.theme)] = isLoaderActive,
                         _a)) }, this.state.isSpinnerVisible && this.renderSpinner(parsedSize, caption, component))))));
     };
     Loader.prototype.renderSpinner = function (size, caption, component) {

package/components/Loader/Loader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Loader.js","sourceRoot":"","sources":["Loader.tsx"],"names":[],"mappings":"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","sourcesContent":["import debounce from 'lodash.debounce';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { getTabbableElements } from '../../lib/dom/tabbableHelpers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isBrowser } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport { TaskWithDelayAndMinimalDuration } from '../../lib/taskWithDelayAndMinimalDuration.js';\nimport type { ClassNames } from '../../lib/theming/Emotion.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { AnyObject } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { Spinner } from '../Spinner/index.js';\nimport type { SpinnerProps } from '../Spinner/index.js';\nimport { getStyles } from './Loader.styles.js';\n\nconst types = ['mini', 'normal', 'big'] as const;\n\n/** @deprecated Начиная с версии `6.1`, тип и проп устарели в пользу `SizeContext`. Они будут удалены в `7.0`.\n * @see {@link SizeProp} /\nexport type LoaderType = (typeof types)[number];\n\nexport interface LoaderProps extends CommonProps {\n /* @ignore /\n children?: React.ReactNode;\n\n /* Показывает лоадер.\n * @default false /\n active?: boolean;\n\n /* Подпись под спиннером.\n * @default \"\" /\n caption?: SpinnerProps['caption'];\n\n /* Задает компонент, заменяющий спиннер. /\n component?: React.ReactNode;\n\n /* Размер спиннера и текста.\n * @default small /\n size?: SizeProp;\n\n /* Размер спиннера и текста.\n * @deprecated Начиная с версии `6.1`, тип и проп устарели в пользу нового `SizeContext`. Они будут удалены в `7.0`.\n * @see {@link size} /\n type?: LoaderType;\n\n /* Время в миллисекундах для показа вуали без спиннера.\n * @default 300 /\n delayBeforeSpinnerShow?: number;\n\n /* Минимальное время в миллисекундах для показа спиннера.\n * @default 1000. /\n minimalDelayBeforeSpinnerHide?: number;\n}\n\nexport interface LoaderState {\n isStickySpinner: boolean;\n isSpinnerVisible: boolean;\n isLoaderActive: boolean;\n spinnerStyle?: AnyObject;\n}\n\nexport const LoaderDataTids = {\n idle: 'Loader__Idle',\n veil: 'Loader__Veil',\n spinner: 'Loader__Spinner',\n} as const;\n\ntype DefaultProps = Required<Pick<LoaderProps, 'active' \| 'delayBeforeSpinnerShow' \| 'minimalDelayBeforeSpinnerHide'>>;\n\n/\n С помощью лоадера можно отобразить процесс выполнения задачи.\n * Лоадер принимает в качестве дочернего элемента другой компонент или контент, который будет показан на экране.\n * Когда происходит загрузка, поверх этого компонента или контента будет отображаться [Спиннер](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-spinner--docs).\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\n public static __KONTUR_REACT_UI__ = 'Loader';\n public static displayName = 'Loader';\n\n public static defaultProps: DefaultProps = {\n active: false,\n delayBeforeSpinnerShow: isTestEnv ? 0 : 300,\n minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000,\n };\n\n private getProps = createPropsGetter(Loader.defaultProps);\n\n private globalObject!: GlobalObject;\n private cx!: ClassNames;\n private styles!: ReturnType<typeof getStyles>;\n private size!: SizeProp;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private spinnerContainerNode: Nullable<HTMLDivElement>;\n private childrenContainerNode: Nullable<HTMLDivElement>;\n private spinnerNode: Nullable<HTMLDivElement>;\n private layoutEvents: Nullable<{ remove: () => void }>;\n private spinnerTask!: TaskWithDelayAndMinimalDuration;\n private childrenObserver: Nullable<MutationObserver>;\n\n constructor(props: LoaderProps) {\n super(props);\n\n this.spinnerContainerNode = null;\n this.childrenContainerNode = null;\n this.childrenObserver = null;\n this.spinnerNode = null;\n\n this.state = {\n isStickySpinner: false,\n isSpinnerVisible: false,\n isLoaderActive: false,\n };\n }\n\n public componentDidMount() {\n this.spinnerTask = new TaskWithDelayAndMinimalDuration({\n delayBeforeTaskStart: this.getProps().delayBeforeSpinnerShow,\n durationOfTask: this.getProps().minimalDelayBeforeSpinnerHide,\n taskStartCallback: () => this.setState({ isSpinnerVisible: true }),\n taskStopCallback: () => this.setState({ isSpinnerVisible: false }),\n });\n const active = this.getProps().active;\n this.checkSpinnerPosition();\n active && this.spinnerTask.start();\n this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10), this.globalObject);\n\n if (active) {\n this.disableChildrenFocus();\n }\n }\n\n public componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>) {\n const { component } = this.props;\n const { active, delayBeforeSpinnerShow, minimalDelayBeforeSpinnerHide } = this.getProps();\n const { isLoaderActive } = this.state;\n\n if ((active && !prevProps.active) \|\| prevProps.component !== component) {\n this.checkSpinnerPosition();\n }\n\n if (\n delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow \|\|\n minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide\n ) {\n this.spinnerTask.update({\n delayBeforeTaskStart: delayBeforeSpinnerShow,\n durationOfTask: minimalDelayBeforeSpinnerHide,\n });\n }\n\n if (active !== prevProps.active) {\n active ? this.spinnerTask.start() : this.spinnerTask.stop();\n }\n\n if (isLoaderActive !== prevState.isLoaderActive) {\n if (isLoaderActive) {\n this.disableChildrenFocus();\n } else {\n this.enableChildrenFocus();\n }\n }\n }\n\n public componentWillUnmount() {\n this.makeUnobservable();\n if (this.layoutEvents) {\n this.layoutEvents.remove();\n }\n this.spinnerTask.clearTask();\n }\n\n public static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState> {\n if (props.active && !state.isLoaderActive) {\n return {\n isLoaderActive: true,\n };\n }\n if (state.isLoaderActive && !(props.active \|\| state.isSpinnerVisible)) {\n return {\n isLoaderActive: false,\n };\n }\n\n return state;\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles();\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { caption, component, size, type } = this.props;\n const { isLoaderActive } = this.state;\n\n const parsedSize = size \|\| !type ? this.size : this.typeToSize(type);\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n className={this.styles.loader()}\n data-tid={this.props['data-tid'] \|\| (isLoaderActive ? LoaderDataTids.veil : LoaderDataTids.idle)}\n >\n <ZIndex\n applyZIndex={isLoaderActive}\n coverChildren={isLoaderActive}\n style={{ height: '100%' }}\n wrapperRef={this.childrenRef}\n >\n {this.props.children}\n </ZIndex>\n {isLoaderActive && (\n <ZIndex\n wrapperRef={this.spinnerRef}\n className={this.cx({\n [this.styles.active()]: isLoaderActive,\n })}\n >\n {this.state.isSpinnerVisible && this.renderSpinner(parsedSize, caption, component)}\n </ZIndex>\n )}\n </div>\n </CommonWrapper>\n );\n }\n\n private childrenRef = (element: HTMLDivElement \| null) => {\n this.childrenContainerNode = element;\n };\n\n private spinnerRef = (element: HTMLDivElement \| null) => {\n this.spinnerContainerNode = element;\n };\n\n private renderSpinner(size?: SizeProp, caption?: React.ReactNode, component?: React.ReactNode) {\n return (\n <span\n data-tid={LoaderDataTids.spinner}\n className={this.cx(this.styles.spinnerContainer(), {\n [this.styles.spinnerContainerSticky()]: this.state.isStickySpinner,\n })}\n style={this.state.spinnerStyle}\n >\n <div\n className={this.styles.spinnerComponentWrapper()}\n ref={(element) => {\n this.spinnerNode = element;\n }}\n >\n {component !== undefined ? component : <Spinner size={size} caption={caption} />}\n </div>\n </span>\n );\n }\n\n private checkSpinnerPosition = () => {\n if (!this.spinnerContainerNode \|\| !isBrowser(this.globalObject)) {\n return;\n }\n\n const {\n top: containerTop,\n right: containerRight,\n bottom: containerBottom,\n left: containerLeft,\n height: containerHeight,\n width: containerWidth,\n } = getDOMRect(this.spinnerContainerNode);\n\n const windowHeight = this.globalObject.innerHeight;\n const windowWidth = this.globalObject.innerWidth;\n\n // Если контейнер не больше высоты и не шире окна,\n // то просто выравниваем по центру\n if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\n this.setState({\n isStickySpinner: false,\n spinnerStyle: {},\n });\n return;\n }\n\n const spinnerStyle: {\n top?: number;\n right: number;\n bottom: number;\n left: number;\n } = {\n top: 30,\n right: 0,\n bottom: 30,\n left: 0,\n };\n\n // ПО ВЕРТИКАЛИ\n // Если верхний край контейнера ниже верхнего края окна,\n // то сдвигаем и лоадер\n if (containerTop > 0) {\n spinnerStyle.top = containerTop + 30;\n }\n\n // Если нижний край контейнера выше нижнего края окна,\n // то сдвигаем и лоадер\n if (containerBottom < windowHeight) {\n spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\n }\n\n // Если знаем высоту спиннера и нижний край контейнера поднимается\n // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\n\n const spinnerHeight = getDOMRect(this.spinnerNode).height;\n\n if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\n delete spinnerStyle.top;\n }\n\n // ПО ГОРИЗОНТАЛИ\n // Если левый край контейнера правее левого края окна,\n // то сдвигаем и лоадер\n if (containerLeft > 0) {\n spinnerStyle.left = containerLeft;\n }\n\n // Если правый край контейнера левее правого края окна,\n // то сдвигаем и лоадер\n if (containerRight < windowWidth) {\n spinnerStyle.right = windowWidth - containerRight;\n }\n\n this.setState({\n isStickySpinner: true,\n spinnerStyle,\n });\n };\n\n private disableChildrenFocus = () => {\n if (!this.childrenObserver) {\n this.makeObservable();\n }\n const tabbableElements = getTabbableElements(this.childrenContainerNode);\n tabbableElements.forEach((el) => {\n if (!el.hasAttribute('origin-tabindex')) {\n el.setAttribute('origin-tabindex', el.tabIndex.toString());\n }\n el.tabIndex = -1;\n });\n };\n\n private enableChildrenFocus = () => {\n this.makeUnobservable();\n\n this.globalObject.document?.querySelectorAll('[origin-tabindex]').forEach((el) => {\n el.setAttribute('tabindex', el.getAttribute('origin-tabindex') ?? '0');\n el.removeAttribute('origin-tabindex');\n });\n };\n\n private makeObservable = () => {\n const target = this.childrenContainerNode;\n if (!target \|\| !this.globalObject.MutationObserver) {\n return;\n }\n const config = {\n childList: true,\n subtree: true,\n };\n const observer = new this.globalObject.MutationObserver(this.disableChildrenFocus);\n observer.observe(target, config);\n this.childrenObserver = observer;\n };\n\n private makeUnobservable = () => {\n this.childrenObserver?.disconnect();\n this.childrenObserver = null;\n };\n\n private typeToSize = (type: LoaderType) => {\n switch (type) {\n case 'mini':\n return 'small';\n case 'normal':\n return 'medium';\n case 'big':\n return 'large';\n }\n };\n}\n"]}
1	+ {"version":3,"file":"Loader.js","sourceRoot":"","sources":["Loader.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport debounce from 'lodash.debounce';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { getTabbableElements } from '../../lib/dom/tabbableHelpers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isBrowser } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport { TaskWithDelayAndMinimalDuration } from '../../lib/taskWithDelayAndMinimalDuration.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { AnyObject } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { Spinner } from '../Spinner/index.js';\nimport type { SpinnerProps } from '../Spinner/index.js';\nimport { getStyles } from './Loader.css.js';\n\nconst types = ['mini', 'normal', 'big'] as const;\n\n/** @deprecated Начиная с версии `6.1`, тип и проп устарели в пользу `SizeContext`. Они будут удалены в `7.0`.\n * @see {@link SizeProp} /\nexport type LoaderType = (typeof types)[number];\n\nexport interface LoaderProps extends CommonProps {\n /* @ignore /\n children?: React.ReactNode;\n\n /* Показывает лоадер.\n * @default false /\n active?: boolean;\n\n /* Подпись под спиннером.\n * @default \"\" /\n caption?: SpinnerProps['caption'];\n\n /* Задает компонент, заменяющий спиннер. /\n component?: React.ReactNode;\n\n /* Размер спиннера и текста.\n * @default small /\n size?: SizeProp;\n\n /* Размер спиннера и текста.\n * @deprecated Начиная с версии `6.1`, тип и проп устарели в пользу нового `SizeContext`. Они будут удалены в `7.0`.\n * @see {@link size} /\n type?: LoaderType;\n\n /* Время в миллисекундах для показа вуали без спиннера.\n * @default 300 /\n delayBeforeSpinnerShow?: number;\n\n /* Минимальное время в миллисекундах для показа спиннера.\n * @default 1000. /\n minimalDelayBeforeSpinnerHide?: number;\n}\n\nexport interface LoaderState {\n isStickySpinner: boolean;\n isSpinnerVisible: boolean;\n isLoaderActive: boolean;\n spinnerStyle?: AnyObject;\n}\n\nexport const LoaderDataTids = {\n idle: 'Loader__Idle',\n veil: 'Loader__Veil',\n spinner: 'Loader__Spinner',\n} as const;\n\ntype DefaultProps = Required<Pick<LoaderProps, 'active' \| 'delayBeforeSpinnerShow' \| 'minimalDelayBeforeSpinnerHide'>>;\n\n/\n С помощью лоадера можно отобразить процесс выполнения задачи.\n * Лоадер принимает в качестве дочернего элемента другой компонент или контент, который будет показан на экране.\n * Когда происходит загрузка, поверх этого компонента или контента будет отображаться [Спиннер](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-spinner--docs).\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\n public static __KONTUR_REACT_UI__ = 'Loader';\n public static displayName = 'Loader';\n\n public static defaultProps: DefaultProps = {\n active: false,\n delayBeforeSpinnerShow: isTestEnv ? 0 : 300,\n minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000,\n };\n\n private getProps = createPropsGetter(Loader.defaultProps);\n\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n private size!: SizeProp;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private spinnerContainerNode: Nullable<HTMLDivElement>;\n private childrenContainerNode: Nullable<HTMLDivElement>;\n private spinnerNode: Nullable<HTMLDivElement>;\n private layoutEvents: Nullable<{ remove: () => void }>;\n private spinnerTask!: TaskWithDelayAndMinimalDuration;\n private childrenObserver: Nullable<MutationObserver>;\n\n constructor(props: LoaderProps) {\n super(props);\n\n this.spinnerContainerNode = null;\n this.childrenContainerNode = null;\n this.childrenObserver = null;\n this.spinnerNode = null;\n\n this.state = {\n isStickySpinner: false,\n isSpinnerVisible: false,\n isLoaderActive: false,\n };\n }\n\n public componentDidMount() {\n this.spinnerTask = new TaskWithDelayAndMinimalDuration({\n delayBeforeTaskStart: this.getProps().delayBeforeSpinnerShow,\n durationOfTask: this.getProps().minimalDelayBeforeSpinnerHide,\n taskStartCallback: () => this.setState({ isSpinnerVisible: true }),\n taskStopCallback: () => this.setState({ isSpinnerVisible: false }),\n });\n const active = this.getProps().active;\n this.checkSpinnerPosition();\n active && this.spinnerTask.start();\n this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10), this.globalObject);\n\n if (active) {\n this.disableChildrenFocus();\n }\n }\n\n public componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>) {\n const { component } = this.props;\n const { active, delayBeforeSpinnerShow, minimalDelayBeforeSpinnerHide } = this.getProps();\n const { isLoaderActive } = this.state;\n\n if ((active && !prevProps.active) \|\| prevProps.component !== component) {\n this.checkSpinnerPosition();\n }\n\n if (\n delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow \|\|\n minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide\n ) {\n this.spinnerTask.update({\n delayBeforeTaskStart: delayBeforeSpinnerShow,\n durationOfTask: minimalDelayBeforeSpinnerHide,\n });\n }\n\n if (active !== prevProps.active) {\n active ? this.spinnerTask.start() : this.spinnerTask.stop();\n }\n\n if (isLoaderActive !== prevState.isLoaderActive) {\n if (isLoaderActive) {\n this.disableChildrenFocus();\n } else {\n this.enableChildrenFocus();\n }\n }\n }\n\n public componentWillUnmount() {\n this.makeUnobservable();\n if (this.layoutEvents) {\n this.layoutEvents.remove();\n }\n this.spinnerTask.clearTask();\n }\n\n public static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState> {\n if (props.active && !state.isLoaderActive) {\n return {\n isLoaderActive: true,\n };\n }\n if (state.isLoaderActive && !(props.active \|\| state.isSpinnerVisible)) {\n return {\n isLoaderActive: false,\n };\n }\n\n return state;\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { caption, component, size, type } = this.props;\n const { isLoaderActive } = this.state;\n\n const parsedSize = size \|\| !type ? this.size : this.typeToSize(type);\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n className={this.styles.loader()}\n data-tid={this.props['data-tid'] \|\| (isLoaderActive ? LoaderDataTids.veil : LoaderDataTids.idle)}\n >\n <ZIndex\n applyZIndex={isLoaderActive}\n coverChildren={isLoaderActive}\n style={{ height: '100%' }}\n wrapperRef={this.childrenRef}\n >\n {this.props.children}\n </ZIndex>\n {isLoaderActive && (\n <ZIndex\n wrapperRef={this.spinnerRef}\n className={this.cx({\n [this.styles.active(this.theme)]: isLoaderActive,\n })}\n >\n {this.state.isSpinnerVisible && this.renderSpinner(parsedSize, caption, component)}\n </ZIndex>\n )}\n </div>\n </CommonWrapper>\n );\n }\n\n private childrenRef = (element: HTMLDivElement \| null) => {\n this.childrenContainerNode = element;\n };\n\n private spinnerRef = (element: HTMLDivElement \| null) => {\n this.spinnerContainerNode = element;\n };\n\n private renderSpinner(size?: SizeProp, caption?: React.ReactNode, component?: React.ReactNode) {\n return (\n <span\n data-tid={LoaderDataTids.spinner}\n className={this.cx(this.styles.spinnerContainer(), {\n [this.styles.spinnerContainerSticky()]: this.state.isStickySpinner,\n })}\n style={this.state.spinnerStyle}\n >\n <div\n className={this.styles.spinnerComponentWrapper()}\n ref={(element) => {\n this.spinnerNode = element;\n }}\n >\n {component !== undefined ? component : <Spinner size={size} caption={caption} />}\n </div>\n </span>\n );\n }\n\n private checkSpinnerPosition = () => {\n if (!this.spinnerContainerNode \|\| !isBrowser(this.globalObject)) {\n return;\n }\n\n const {\n top: containerTop,\n right: containerRight,\n bottom: containerBottom,\n left: containerLeft,\n height: containerHeight,\n width: containerWidth,\n } = getDOMRect(this.spinnerContainerNode);\n\n const windowHeight = this.globalObject.innerHeight;\n const windowWidth = this.globalObject.innerWidth;\n\n // Если контейнер не больше высоты и не шире окна,\n // то просто выравниваем по центру\n if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\n this.setState({\n isStickySpinner: false,\n spinnerStyle: {},\n });\n return;\n }\n\n const spinnerStyle: {\n top?: number;\n right: number;\n bottom: number;\n left: number;\n } = {\n top: 30,\n right: 0,\n bottom: 30,\n left: 0,\n };\n\n // ПО ВЕРТИКАЛИ\n // Если верхний край контейнера ниже верхнего края окна,\n // то сдвигаем и лоадер\n if (containerTop > 0) {\n spinnerStyle.top = containerTop + 30;\n }\n\n // Если нижний край контейнера выше нижнего края окна,\n // то сдвигаем и лоадер\n if (containerBottom < windowHeight) {\n spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\n }\n\n // Если знаем высоту спиннера и нижний край контейнера поднимается\n // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\n\n const spinnerHeight = getDOMRect(this.spinnerNode).height;\n\n if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\n delete spinnerStyle.top;\n }\n\n // ПО ГОРИЗОНТАЛИ\n // Если левый край контейнера правее левого края окна,\n // то сдвигаем и лоадер\n if (containerLeft > 0) {\n spinnerStyle.left = containerLeft;\n }\n\n // Если правый край контейнера левее правого края окна,\n // то сдвигаем и лоадер\n if (containerRight < windowWidth) {\n spinnerStyle.right = windowWidth - containerRight;\n }\n\n this.setState({\n isStickySpinner: true,\n spinnerStyle,\n });\n };\n\n private disableChildrenFocus = () => {\n if (!this.childrenObserver) {\n this.makeObservable();\n }\n const tabbableElements = getTabbableElements(this.childrenContainerNode);\n tabbableElements.forEach((el) => {\n if (!el.hasAttribute('origin-tabindex')) {\n el.setAttribute('origin-tabindex', el.tabIndex.toString());\n }\n el.tabIndex = -1;\n });\n };\n\n private enableChildrenFocus = () => {\n this.makeUnobservable();\n\n this.globalObject.document?.querySelectorAll('[origin-tabindex]').forEach((el) => {\n el.setAttribute('tabindex', el.getAttribute('origin-tabindex') ?? '0');\n el.removeAttribute('origin-tabindex');\n });\n };\n\n private makeObservable = () => {\n const target = this.childrenContainerNode;\n if (!target \|\| !this.globalObject.MutationObserver) {\n return;\n }\n const config = {\n childList: true,\n subtree: true,\n };\n const observer = new this.globalObject.MutationObserver(this.disableChildrenFocus);\n observer.observe(target, config);\n this.childrenObserver = observer;\n };\n\n private makeUnobservable = () => {\n this.childrenObserver?.disconnect();\n this.childrenObserver = null;\n };\n\n private typeToSize = (type: LoaderType) => {\n switch (type) {\n case 'mini':\n return 'small';\n case 'normal':\n return 'medium';\n case 'big':\n return 'large';\n }\n };\n}\n"]}

package/components/MaskedInput/ColorableInputElement/ColorableInputElement.css.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare const globalClasses: {
+    input: string;
+};
+export declare const getStyles: import("../../../lib/theming/StaticStyles.js").StylesGetter<{
+    root(): string;
+}>;

package/components/MaskedInput/ColorableInputElement/ColorableInputElement.css.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { bindStaticStyles as _27adf } from '../../../lib/theming/bindStaticStyles.js';
+export var getStyles = _27adf({root:'react-ui-ColorableInputElement__root'});
+export var globalClasses = {input:'react-ui-colorable-input'};

package/components/MaskedInput/ColorableInputElement/ColorableInputElement.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ColorableInputElement.css.js","sourceRoot":"","sources":["ColorableInputElement.css.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAE9F,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/C,KAAK,EAAE,OAAO;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,+TAAA,YACJ,EAAmB,8OAQxB,KARK,aAAa,CAAC,KAAK,EAQvB;QACJ,CAAC;KACF,CAAC;AAb8D,CAa9D,CAAC,CAAC;AAEJ,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { prefix } from '../../../lib/theming/Emotion.js';\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../../lib/theming/StaticStyles.js';\n\nexport const globalClasses = prefix('colorable')({\n input: 'input',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n &.${globalClasses.input} {\n display: inline-block;\n background-color: transparent;\n background-size: 100%;\n background-repeat: repeat;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n `;\n },\n}));\n\nfinalizeStaticStyles();\n"]}

package/components/MaskedInput/ColorableInputElement/ColorableInputElement.js CHANGED Viewed

@@ -21,12 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import debounce from 'lodash.debounce';
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { forwardRefAndName } from '../../../lib/forwardRefAndName.js';
 import { isBrowser } from '../../../lib/globalObject.js';
-import { useGlobal, useStyles } from '../../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../../lib/theming/Emotion.js';
-import { getStyles, globalClasses } from './ColorableInputElement.styles.js';
+import { useEmotion, useGlobal, useStyles } from '../../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+import { getStyles, globalClasses } from './ColorableInputElement.css.js';
 // Возможно придётся включить.
 // Иногда, на тяжёлых страницах, текст рендерится итеративно.
 // Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.
@@ -39,7 +39,10 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
     var focused = useRef(false);
     var updateActiveTimer = useRef(undefined);
     var globalObject = useGlobal();
+    var emotion = useEmotion();
+    var cx = emotion.cx;
     var styles = useStyles(getStyles);
+    var theme = useContext(ThemeContext);
     var _c = useState(Boolean(props.alwaysShowMask || (!props.placeholder && (props.value || props.defaultValue)))), active = _c[0], setActive = _c[1];
     var children = props.children, onInput = props.onInput, onFocus = props.onFocus, onBlur = props.onBlur, showOnFocus = props.showOnFocus, alwaysShowMask = props.alwaysShowMask, inputProps = __rest(props, ["children", "onInput", "onFocus", "onBlur", "showOnFocus", "alwaysShowMask"]);
     var stopUpdateActive = useCallback(function () {
@@ -90,16 +93,12 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
         var threshold = typedValueRect.width / (inputRect.width / 100);
         var degree = style.fontStyle === 'italic' ? 100 : 90;
         var restValueWidth = 1 - Math.min(fullValueRect.width / inputRect.width, 1);
-        // Цвета — ссылками на переменные, а не значениями темы: градиент собирается
-        // из измеренных процентов, но его цвета от измерений не зависят. Со
-        // ссылками градиент подхватывает смену темы сам, и перерисовывать его
-        // ради этого не нужно.
-        var typedValueColor = 'var(--kontur-inputTextColor)';
-        var maskColor = 'var(--kontur-inputPlaceholderColor)';
+        var typedValueColor = theme.inputTextColor;
+        var maskColor = theme.inputPlaceholderColor;
         var indent = 0;
         if (props.disabled) {
-            typedValueColor = 'var(--kontur-inputTextColorDisabled)';
-            maskColor = 'var(--kontur-inputTextColorDisabled)';
+            typedValueColor = theme.inputTextColorDisabled;
+            maskColor = theme.inputTextColorDisabled;
         }
         if (props.showOnFocus) {
             maskColor = focused.current ? maskColor : 'transparent';
@@ -111,7 +110,16 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
             indent = 50 * restValueWidth;
         }
         inputRef.current.style.backgroundImage = "\n      linear-gradient(\n          ".concat(degree, "deg,\n          ").concat(typedValueColor, " ").concat(threshold + indent, "%,\n          ").concat(maskColor, " ").concat(threshold + indent, "%\n      )");
-    }, [active, props.showOnFocus, props.disabled, globalObject, (_b = props.style) === null || _b === void 0 ? void 0 : _b.textAlign]);
+    }, [
+        active,
+        props.showOnFocus,
+        props.disabled,
+        theme.inputTextColor,
+        theme.inputPlaceholderColor,
+        theme.inputTextColorDisabled,
+        globalObject,
+        (_b = props.style) === null || _b === void 0 ? void 0 : _b.textAlign,
+    ]);
     var debouncedPaintText = useCallback(function () { return debounce(paintText); }, [paintText])();
     var handleInput = useCallback(function (e) {
         debouncedPaintText();
@@ -135,9 +143,7 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
         debouncedPaintText();
         updateActive();
         return stopUpdateActive;
-        // Тема в зависимостях больше не нужна: цвета в градиенте — ссылки на
-        // переменные, и их значения меняются без перерисовки.
-    }, [updateActive, props.value, props.defaultValue, debouncedPaintText, stopUpdateActive]);
+    }, [updateActive, props.value, props.defaultValue, theme, debouncedPaintText, stopUpdateActive]);
     return (React.createElement(React.Fragment, null,
         React.cloneElement(children, __assign(__assign({}, inputProps), { onInput: handleInput, onFocus: handleFocus, onBlur: handleBlur, inputRef: inputRef, className: cx(props.className, styles.root(), (_a = {},
                 _a[globalClasses.input] = active,

package/components/MaskedInput/ColorableInputElement/ColorableInputElement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorableInputElement.js","sourceRoot":"","sources":["ColorableInputElement.tsx"],"names":[],"mappings":"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","sourcesContent":["import debounce from 'lodash.debounce';\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport type { ForwardedRef } from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport { isBrowser } from '../../../lib/globalObject.js';\nimport { useGlobal, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../../lib/theming/Emotion.js';\nimport type { InputElement, InputElementProps } from '../../Input/index.js';\nimport { getStyles, globalClasses } from './ColorableInputElement.styles.js';\n\nexport type ColorableInputElementProps = InputElementProps & {\n alwaysShowMask?: boolean;\n showOnFocus?: boolean;\n children: React.ReactElement<any>;\n};\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n 'ColorableInputElement',\n function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const spanRef = useRef<HTMLSpanElement \| null>(null);\n const focused = useRef(false);\n const updateActiveTimer = useRef<ReturnType<typeof setTimeout> \| undefined>(undefined);\n const globalObject = useGlobal();\n const styles = useStyles(getStyles);\n const [active, setActive] = useState(\n Boolean(props.alwaysShowMask \|\| (!props.placeholder && (props.value \|\| props.defaultValue))),\n );\n\n const { children, onInput, onFocus, onBlur, showOnFocus, alwaysShowMask, ...inputProps } = props;\n\n const stopUpdateActive = useCallback(() => {\n clearTimeout(updateActiveTimer.current);\n }, []);\n\n const updateActive = useCallback(() => {\n stopUpdateActive();\n updateActiveTimer.current = setTimeout(() => {\n let nextActive = true;\n if (inputRef.current) {\n const { clientWidth, scrollWidth } = inputRef.current;\n const scrollable = scrollWidth > clientWidth;\n\n const placeholderShown = inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n\n nextActive = !(scrollable \|\| placeholderShown);\n }\n setActive(nextActive);\n }, 0);\n }, [stopUpdateActive]);\n\n const paintText = useCallback(() => {\n if (!isBrowser(globalObject) \|\| !spanRef.current \|\| !inputRef.current \|\| !active) {\n inputRef.current && (inputRef.current.style.backgroundImage = '');\n inputRef.current?.classList.remove(globalClasses.input);\n\n return;\n }\n\n inputRef.current?.classList.add(globalClasses.input);\n\n let shadow = spanRef.current.shadowRoot;\n let typedValueElement = shadow?.getElementById('typed-value');\n let fullValueElement = shadow?.getElementById('full-value');\n\n if (!typedValueElement \|\| !fullValueElement) {\n shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n typedValueElement = globalObject.document.createElement('span');\n fullValueElement = globalObject.document.createElement('span');\n typedValueElement.setAttribute('id', 'typed-value');\n fullValueElement.setAttribute('id', 'full-value');\n\n shadow.append(typedValueElement, fullValueElement);\n }\n\n const style = getComputedStyle(inputRef.current);\n\n typedValueElement.textContent =\n ((inputRef.current.getAttribute('data-unmasked-value') \|\| focused.current) &&\n inputRef.current.getAttribute('data-typed-value')) \|\|\n '';\n\n fullValueElement.textContent = inputRef.current.value \|\| inputRef.current.defaultValue \|\| '';\n\n const inputRect = inputRef.current.getBoundingClientRect();\n const typedValueRect = typedValueElement.getBoundingClientRect();\n const fullValueRect = fullValueElement.getBoundingClientRect();\n\n const threshold = typedValueRect.width / (inputRect.width / 100);\n const degree = style.fontStyle === 'italic' ? 100 : 90;\n const restValueWidth = 1 - Math.min(fullValueRect.width / inputRect.width, 1);\n\n // Цвета — ссылками на переменные, а не значениями темы: градиент собирается\n // из измеренных процентов, но его цвета от измерений не зависят. Со\n // ссылками градиент подхватывает смену темы сам, и перерисовывать его\n // ради этого не нужно.\n let typedValueColor = 'var(--kontur-inputTextColor)';\n let maskColor = 'var(--kontur-inputPlaceholderColor)';\n let indent = 0;\n\n if (props.disabled) {\n typedValueColor = 'var(--kontur-inputTextColorDisabled)';\n maskColor = 'var(--kontur-inputTextColorDisabled)';\n }\n if (props.showOnFocus) {\n maskColor = focused.current ? maskColor : 'transparent';\n }\n if (props.style?.textAlign === 'right') {\n indent = 100 * restValueWidth;\n }\n if (props.style?.textAlign === 'center') {\n indent = 50 * restValueWidth;\n }\n\n inputRef.current.style.backgroundImage = `\n linear-gradient(\n ${degree}deg,\n ${typedValueColor} ${threshold + indent}%,\n ${maskColor} ${threshold + indent}%\n )`;\n }, [active, props.showOnFocus, props.disabled, globalObject, props.style?.textAlign]);\n\n const debouncedPaintText = useCallback(() => debounce(paintText), [paintText])();\n\n const handleInput = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n debouncedPaintText();\n\n onInput?.(e);\n },\n [debouncedPaintText, onInput],\n );\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n updateActive();\n\n focused.current = true;\n\n onFocus?.(e);\n },\n [onFocus, updateActive],\n );\n\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n updateActive();\n\n focused.current = false;\n\n onBlur?.(e);\n },\n [onBlur, updateActive],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n input: inputRef.current,\n getRootNode: () => inputRef.current,\n }),\n [],\n );\n\n useEffect(() => {\n debouncedPaintText();\n updateActive();\n\n return stopUpdateActive;\n // Тема в зависимостях больше не нужна: цвета в градиенте — ссылки на\n // переменные, и их значения меняются без перерисовки.\n }, [updateActive, props.value, props.defaultValue, debouncedPaintText, stopUpdateActive]);\n\n return (\n <>\n {React.cloneElement(children, {\n ...inputProps,\n onInput: handleInput,\n onFocus: handleFocus,\n onBlur: handleBlur,\n inputRef,\n className: cx(props.className, styles.root(), {\n [globalClasses.input]: active,\n }),\n })}\n {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n </>\n );\n },\n);\n"]}
1	+ {"version":3,"file":"ColorableInputElement.js","sourceRoot":"","sources":["ColorableInputElement.tsx"],"names":[],"mappings":"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","sourcesContent":["import debounce from 'lodash.debounce';\nimport React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport type { ForwardedRef } from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport { isBrowser } from '../../../lib/globalObject.js';\nimport { useEmotion, useGlobal, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport type { InputElement, InputElementProps } from '../../Input/index.js';\nimport { getStyles, globalClasses } from './ColorableInputElement.css.js';\n\nexport type ColorableInputElementProps = InputElementProps & {\n alwaysShowMask?: boolean;\n showOnFocus?: boolean;\n children: React.ReactElement<any>;\n};\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n 'ColorableInputElement',\n function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const spanRef = useRef<HTMLSpanElement \| null>(null);\n const focused = useRef(false);\n const updateActiveTimer = useRef<ReturnType<typeof setTimeout> \| undefined>(undefined);\n const globalObject = useGlobal();\n const emotion = useEmotion();\n const { cx } = emotion;\n const styles = useStyles(getStyles);\n const theme = useContext(ThemeContext);\n const [active, setActive] = useState(\n Boolean(props.alwaysShowMask \|\| (!props.placeholder && (props.value \|\| props.defaultValue))),\n );\n\n const { children, onInput, onFocus, onBlur, showOnFocus, alwaysShowMask, ...inputProps } = props;\n\n const stopUpdateActive = useCallback(() => {\n clearTimeout(updateActiveTimer.current);\n }, []);\n\n const updateActive = useCallback(() => {\n stopUpdateActive();\n updateActiveTimer.current = setTimeout(() => {\n let nextActive = true;\n if (inputRef.current) {\n const { clientWidth, scrollWidth } = inputRef.current;\n const scrollable = scrollWidth > clientWidth;\n\n const placeholderShown = inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n\n nextActive = !(scrollable \|\| placeholderShown);\n }\n setActive(nextActive);\n }, 0);\n }, [stopUpdateActive]);\n\n const paintText = useCallback(() => {\n if (!isBrowser(globalObject) \|\| !spanRef.current \|\| !inputRef.current \|\| !active) {\n inputRef.current && (inputRef.current.style.backgroundImage = '');\n inputRef.current?.classList.remove(globalClasses.input);\n\n return;\n }\n\n inputRef.current?.classList.add(globalClasses.input);\n\n let shadow = spanRef.current.shadowRoot;\n let typedValueElement = shadow?.getElementById('typed-value');\n let fullValueElement = shadow?.getElementById('full-value');\n\n if (!typedValueElement \|\| !fullValueElement) {\n shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n typedValueElement = globalObject.document.createElement('span');\n fullValueElement = globalObject.document.createElement('span');\n typedValueElement.setAttribute('id', 'typed-value');\n fullValueElement.setAttribute('id', 'full-value');\n\n shadow.append(typedValueElement, fullValueElement);\n }\n\n const style = getComputedStyle(inputRef.current);\n\n typedValueElement.textContent =\n ((inputRef.current.getAttribute('data-unmasked-value') \|\| focused.current) &&\n inputRef.current.getAttribute('data-typed-value')) \|\|\n '';\n\n fullValueElement.textContent = inputRef.current.value \|\| inputRef.current.defaultValue \|\| '';\n\n const inputRect = inputRef.current.getBoundingClientRect();\n const typedValueRect = typedValueElement.getBoundingClientRect();\n const fullValueRect = fullValueElement.getBoundingClientRect();\n\n const threshold = typedValueRect.width / (inputRect.width / 100);\n const degree = style.fontStyle === 'italic' ? 100 : 90;\n const restValueWidth = 1 - Math.min(fullValueRect.width / inputRect.width, 1);\n\n let typedValueColor = theme.inputTextColor;\n let maskColor = theme.inputPlaceholderColor;\n let indent = 0;\n\n if (props.disabled) {\n typedValueColor = theme.inputTextColorDisabled;\n maskColor = theme.inputTextColorDisabled;\n }\n if (props.showOnFocus) {\n maskColor = focused.current ? maskColor : 'transparent';\n }\n if (props.style?.textAlign === 'right') {\n indent = 100 * restValueWidth;\n }\n if (props.style?.textAlign === 'center') {\n indent = 50 * restValueWidth;\n }\n\n inputRef.current.style.backgroundImage = `\n linear-gradient(\n ${degree}deg,\n ${typedValueColor} ${threshold + indent}%,\n ${maskColor} ${threshold + indent}%\n )`;\n }, [\n active,\n props.showOnFocus,\n props.disabled,\n theme.inputTextColor,\n theme.inputPlaceholderColor,\n theme.inputTextColorDisabled,\n globalObject,\n props.style?.textAlign,\n ]);\n\n const debouncedPaintText = useCallback(() => debounce(paintText), [paintText])();\n\n const handleInput = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n debouncedPaintText();\n\n onInput?.(e);\n },\n [debouncedPaintText, onInput],\n );\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n updateActive();\n\n focused.current = true;\n\n onFocus?.(e);\n },\n [onFocus, updateActive],\n );\n\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n updateActive();\n\n focused.current = false;\n\n onBlur?.(e);\n },\n [onBlur, updateActive],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n input: inputRef.current,\n getRootNode: () => inputRef.current,\n }),\n [],\n );\n\n useEffect(() => {\n debouncedPaintText();\n updateActive();\n\n return stopUpdateActive;\n }, [updateActive, props.value, props.defaultValue, theme, debouncedPaintText, stopUpdateActive]);\n\n return (\n <>\n {React.cloneElement(children, {\n ...inputProps,\n onInput: handleInput,\n onFocus: handleFocus,\n onBlur: handleBlur,\n inputRef,\n className: cx(props.className, styles.root(), {\n [globalClasses.input]: active,\n }),\n })}\n {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n </>\n );\n },\n);\n"]}

package/components/MaskedInput/MaskedInput.css.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const globalClasses: {
+    root: string;
+};
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    root(t: Theme): string;
+}>;

package/components/MaskedInput/MaskedInput.css.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({root:'react-ui-MaskedInput__root'});
+export var globalClasses = {root:'react-ui-masked-input-root'};

package/components/MaskedInput/MaskedInput.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MaskedInput.css.js","sourceRoot":"","sources":["MaskedInput.css.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAG3F,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,EAAE,MAAM;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IACzD,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,4JAAA,yBACD,EAAY,IAAK,EAAgB,wDAEjD,KAFgB,YAAY,EAAK,CAAC,CAAC,cAAc,EAEhD;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { UI_FONT_NAME, injectGlobalFont } from '../../lib/styles/UiFont.js';\nimport { prefix } from '../../lib/theming/Emotion.js';\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const globalClasses = prefix('masked-input')({\n root: 'root',\n});\n\nexport const getStyles = memoizeGetStyles((emotion: Emotion) => {\n injectGlobalFont(emotion);\n return {\n root(t: Theme) {\n return emotion.css`\n font-family: ${UI_FONT_NAME}, ${t.baseFontFamily};\n font-variant-numeric: tabular-nums;\n `;\n },\n };\n});\n\nfinalizeStaticStyles();\n"]}

package/components/MaskedInput/MaskedInputLegacy.js CHANGED Viewed

@@ -20,20 +20,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers.js';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Input as InputComponent } from '../Input/index.js';
 import { ColorableInputElement } from './ColorableInputElement/index.js';
 import { FixedIMaskInput } from './FixedIMaskInput.js';
+import { getStyles, globalClasses } from './MaskedInput.css.js';
 import { getDefinitions, getMaskChar } from './MaskedInput.helpers.js';
-import { getStyles, globalClasses } from './MaskedInput.styles.js';
 export var MaskedInputLegacy = forwardRefAndName('MaskedInputLegacy', function MaskedInputLegacy(props, ref) {
     var mask = props.mask, maskChar = props.maskChar, formatChars = props.formatChars, _a = props.alwaysShowMask, alwaysShowMask = _a === void 0 ? false : _a, _b = props.colored, colored = _b === void 0 ? true : _b, _c = props.imaskProps, customIMaskProps = _c === void 0 ? {} : _c, _d = props.unmask, unmask = _d === void 0 ? false : _d, onValueChange = props.onValueChange, onUnexpectedInput = props.onUnexpectedInput, onChange = props.onChange, onBeforePasteValue = props.onBeforePasteValue, element = props.element, className = props.className,
     // @ts-expect-error: могут передавать игнорируя ошибку
     maxLength = props.maxLength, inputProps = __rest(props, ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onChange", "onBeforePasteValue", "element", "className", "maxLength"]);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var inputRef = useRef(null);
     var _e = useState(false), focused = _e[0], setFocused = _e[1];
@@ -60,7 +62,7 @@ export var MaskedInputLegacy = forwardRefAndName('MaskedInputLegacy', function M
         }
     }, []);
     var imaskProps = getCompatibleIMaskProps();
-    return (React.createElement(InputComponent, __assign({ ref: inputRef }, inputProps, { onFocus: handleFocus, onBlur: handleBlur, onInput: handleInput, onKeyDown: handleKeyDown, onPaste: handlePaste, className: cx(globalClasses.root, className, styles.root()), element: colored ? (React.createElement(ColorableInputElement, { showOnFocus: false, alwaysShowMask: alwaysShowMask },
+    return (React.createElement(InputComponent, __assign({ ref: inputRef }, inputProps, { onFocus: handleFocus, onBlur: handleBlur, onInput: handleInput, onKeyDown: handleKeyDown, onPaste: handlePaste, className: cx(globalClasses.root, className, styles.root(theme)), element: colored ? (React.createElement(ColorableInputElement, { showOnFocus: false, alwaysShowMask: alwaysShowMask },
             React.createElement(FixedIMaskInput, __assign({}, imaskProps, { onAccept: handleAccept })))) : (React.createElement(FixedIMaskInput, __assign({}, imaskProps, { onAccept: handleAccept }))) })));
     function handlePaste(event) {
         var _a, _b, _c;

package/components/MaskedInput/MaskedInputLegacy.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MaskedInputLegacy.js","sourceRoot":"","sources":["MaskedInputLegacy.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { IMaskInputProps } from '@skbkontur/react-imask';\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport type { Ref } from 'react';\n\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport type { Input } from '../Input/index.js';\nimport { Input as InputComponent } from '../Input/index.js';\nimport { ColorableInputElement } from './ColorableInputElement/index.js';\nimport { FixedIMaskInput } from './FixedIMaskInput.js';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers.js';\nimport type { MaskedInputProps } from './MaskedInput.js';\nimport { getStyles, globalClasses } from './MaskedInput.styles.js';\n\nexport const MaskedInputLegacy = forwardRefAndName(\n 'MaskedInputLegacy',\n function MaskedInputLegacy(props: MaskedInputProps, ref: Ref<Input \| null>) {\n const {\n mask,\n maskChar,\n formatChars,\n alwaysShowMask = false,\n colored = true,\n imaskProps: customIMaskProps = {},\n unmask = false,\n onValueChange,\n onUnexpectedInput,\n onChange,\n onBeforePasteValue,\n element,\n className,\n // @ts-expect-error: могут передавать игнорируя ошибку\n maxLength,\n ...inputProps\n } = props;\n const styles = useStyles(getStyles);\n\n const inputRef = useRef<Input>(null);\n\n const [focused, setFocused] = useState(false);\n const prevValue = useRef<string>(props.value \|\| String(props.defaultValue) \|\| '');\n const prevSelectionStart = useRef<number \| null>(null);\n\n useImperativeHandle<typeof inputRef.current, typeof inputRef.current>(\n ref,\n () =>\n inputRef.current &&\n Object.assign(inputRef.current, {\n selectAll: () => {\n inputRef.current?.focus();\n inputRef.current?.delaySelectAll();\n },\n }),\n [],\n );\n\n useEffect(() => {\n // Для корректной работы onUnexpectedInput надо знать предыдущий value,\n // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.\n // Поэтому актуальный value при монтировании надо получать вручную\n if (inputRef.current?.input) {\n prevValue.current = inputRef.current.input.value;\n prevSelectionStart.current = inputRef.current.input.selectionStart;\n }\n }, []);\n\n const imaskProps = getCompatibleIMaskProps();\n\n return (\n <InputComponent\n ref={inputRef}\n {...inputProps}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onInput={handleInput}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n className={cx(globalClasses.root, className, styles.root())}\n element={\n colored ? (\n <ColorableInputElement showOnFocus={false} alwaysShowMask={alwaysShowMask}>\n <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n </ColorableInputElement>\n ) : (\n <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n )\n }\n />\n );\n\n function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n if (onBeforePasteValue && onValueChange) {\n event.preventDefault();\n onValueChange?.(onBeforePasteValue(event.clipboardData?.getData('text') ?? ''));\n }\n\n props.onPaste?.(event);\n }\n\n function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n return {\n mask: mask.replace(/0/g, '{\\\\0}') as any,\n placeholderChar: getMaskChar(maskChar),\n definitions: getDefinitions(formatChars),\n // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n eager: 'append',\n overwrite: 'shift',\n lazy: !alwaysShowMask && (props.disabled \|\| !focused),\n unmask,\n ...customIMaskProps,\n } as IMaskInputProps<HTMLInputElement>;\n }\n\n function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n const [value, , e] = args;\n\n // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n // Но нативный input никогда не вызывает onChange при монтировании.\n // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n // Он содержит нативное событие, вызвавшее изменение.\n e && onValueChange?.(value);\n !e && (prevValue.current = value);\n }\n\n /*\n Отслеживаем неожиданные нажатия\n * handleAccept не вызывается когда значение с маской не меняется\n * Сначала вызывается handleAccept, затем handleInput\n */\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const { value, selectionStart } = e.currentTarget;\n\n // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n handleUnexpectedInput(value);\n }\n prevValue.current = value;\n prevSelectionStart.current = selectionStart;\n\n props.onInput?.(e);\n }\n\n function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n setFocused(true);\n props.onFocus?.(e);\n\n // Если value из пропсов отличается от value, которое получит input после обработки,\n // то imask будет ставить каретку за последним валидным символом.\n props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n }\n\n function handleUnexpectedInput(value: string) {\n const blink = inputRef.current?.blink.bind(inputRef.current) \|\| (() => undefined);\n onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n }\n\n function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n setFocused(false);\n props.onBlur?.(e);\n }\n\n function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n if (\n (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) \|\|\n (isKeyDelete(e) && prevSelectionStart.current === value.length)\n ) {\n // Случаи, когда нажатие клавиш не тригерит `onInput`\n handleUnexpectedInput(value);\n prevValue.current = e.currentTarget.value;\n }\n prevSelectionStart.current = selectionStart;\n\n props.onKeyDown?.(e);\n }\n },\n);\n"]}
1	+ {"version":3,"file":"MaskedInputLegacy.js","sourceRoot":"","sources":["MaskedInputLegacy.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { IMaskInputProps } from '@skbkontur/react-imask';\nimport React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport type { Ref } from 'react';\n\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Input } from '../Input/index.js';\nimport { Input as InputComponent } from '../Input/index.js';\nimport { ColorableInputElement } from './ColorableInputElement/index.js';\nimport { FixedIMaskInput } from './FixedIMaskInput.js';\nimport { getStyles, globalClasses } from './MaskedInput.css.js';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers.js';\nimport type { MaskedInputProps } from './MaskedInput.js';\n\nexport const MaskedInputLegacy = forwardRefAndName(\n 'MaskedInputLegacy',\n function MaskedInputLegacy(props: MaskedInputProps, ref: Ref<Input \| null>) {\n const {\n mask,\n maskChar,\n formatChars,\n alwaysShowMask = false,\n colored = true,\n imaskProps: customIMaskProps = {},\n unmask = false,\n onValueChange,\n onUnexpectedInput,\n onChange,\n onBeforePasteValue,\n element,\n className,\n // @ts-expect-error: могут передавать игнорируя ошибку\n maxLength,\n ...inputProps\n } = props;\n const theme = useContext(ThemeContext);\n const { cx } = useEmotion();\n const styles = useStyles(getStyles);\n\n const inputRef = useRef<Input>(null);\n\n const [focused, setFocused] = useState(false);\n const prevValue = useRef<string>(props.value \|\| String(props.defaultValue) \|\| '');\n const prevSelectionStart = useRef<number \| null>(null);\n\n useImperativeHandle<typeof inputRef.current, typeof inputRef.current>(\n ref,\n () =>\n inputRef.current &&\n Object.assign(inputRef.current, {\n selectAll: () => {\n inputRef.current?.focus();\n inputRef.current?.delaySelectAll();\n },\n }),\n [],\n );\n\n useEffect(() => {\n // Для корректной работы onUnexpectedInput надо знать предыдущий value,\n // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.\n // Поэтому актуальный value при монтировании надо получать вручную\n if (inputRef.current?.input) {\n prevValue.current = inputRef.current.input.value;\n prevSelectionStart.current = inputRef.current.input.selectionStart;\n }\n }, []);\n\n const imaskProps = getCompatibleIMaskProps();\n\n return (\n <InputComponent\n ref={inputRef}\n {...inputProps}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onInput={handleInput}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n className={cx(globalClasses.root, className, styles.root(theme))}\n element={\n colored ? (\n <ColorableInputElement showOnFocus={false} alwaysShowMask={alwaysShowMask}>\n <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n </ColorableInputElement>\n ) : (\n <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n )\n }\n />\n );\n\n function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n if (onBeforePasteValue && onValueChange) {\n event.preventDefault();\n onValueChange?.(onBeforePasteValue(event.clipboardData?.getData('text') ?? ''));\n }\n\n props.onPaste?.(event);\n }\n\n function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n return {\n mask: mask.replace(/0/g, '{\\\\0}') as any,\n placeholderChar: getMaskChar(maskChar),\n definitions: getDefinitions(formatChars),\n // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n eager: 'append',\n overwrite: 'shift',\n lazy: !alwaysShowMask && (props.disabled \|\| !focused),\n unmask,\n ...customIMaskProps,\n } as IMaskInputProps<HTMLInputElement>;\n }\n\n function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n const [value, , e] = args;\n\n // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n // Но нативный input никогда не вызывает onChange при монтировании.\n // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n // Он содержит нативное событие, вызвавшее изменение.\n e && onValueChange?.(value);\n !e && (prevValue.current = value);\n }\n\n /*\n Отслеживаем неожиданные нажатия\n * handleAccept не вызывается когда значение с маской не меняется\n * Сначала вызывается handleAccept, затем handleInput\n */\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const { value, selectionStart } = e.currentTarget;\n\n // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n handleUnexpectedInput(value);\n }\n prevValue.current = value;\n prevSelectionStart.current = selectionStart;\n\n props.onInput?.(e);\n }\n\n function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n setFocused(true);\n props.onFocus?.(e);\n\n // Если value из пропсов отличается от value, которое получит input после обработки,\n // то imask будет ставить каретку за последним валидным символом.\n props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n }\n\n function handleUnexpectedInput(value: string) {\n const blink = inputRef.current?.blink.bind(inputRef.current) \|\| (() => undefined);\n onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n }\n\n function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n setFocused(false);\n props.onBlur?.(e);\n }\n\n function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n if (\n (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) \|\|\n (isKeyDelete(e) && prevSelectionStart.current === value.length)\n ) {\n // Случаи, когда нажатие клавиш не тригерит `onInput`\n handleUnexpectedInput(value);\n prevValue.current = e.currentTarget.value;\n }\n prevSelectionStart.current = selectionStart;\n\n props.onKeyDown?.(e);\n }\n },\n);\n"]}

package/components/MaskedInputV2/MaskedInputV2.css.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const globalClasses: {
+    root: string;
+};
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    root(t: Theme): string;
+}>;

package/components/MaskedInputV2/MaskedInputV2.css.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({root:'react-ui-MaskedInputV2__root'});
+export var globalClasses = {root:'react-ui-masked-input-v2-root'};

package/components/MaskedInputV2/MaskedInputV2.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MaskedInputV2.css.js","sourceRoot":"","sources":["MaskedInputV2.css.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAG3F,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACrD,IAAI,EAAE,MAAM;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IACzD,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,4JAAA,yBACD,EAAY,IAAK,EAAgB,wDAEjD,KAFgB,YAAY,EAAK,CAAC,CAAC,cAAc,EAEhD;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { UI_FONT_NAME, injectGlobalFont } from '../../lib/styles/UiFont.js';\nimport { prefix } from '../../lib/theming/Emotion.js';\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const globalClasses = prefix('masked-input-v2')({\n root: 'root',\n});\n\nexport const getStyles = memoizeGetStyles((emotion: Emotion) => {\n injectGlobalFont(emotion);\n return {\n root(t: Theme) {\n return emotion.css`\n font-family: ${UI_FONT_NAME}, ${t.baseFontFamily};\n font-variant-numeric: tabular-nums;\n `;\n },\n };\n});\n\nfinalizeStaticStyles();\n"]}

package/components/MaskedInputV2/MaskedInputV2.js CHANGED Viewed

@@ -20,20 +20,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import warning from 'warning';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Input, selectionAllowedTypes } from '../Input/index.js';
 import { extractRaw, findNearestRawLeft, computePasteMaskedCursor } from './internal/helpers.js';
 import { MaskedCore } from './internal/MaskedCore.js';
 import { getSelectionRawRange } from './internal/maskedCoreClipboard.js';
 import { setMaskInputSelectionRange } from './internal/setMaskInputSelectionRange.js';
 import { useMaskEngine } from './internal/useMaskEngine.js';
+import { getStyles, globalClasses } from './MaskedInputV2.css.js';
 import { getDefinitions, getMaskChar } from './MaskedInputV2.helpers.js';
 import { normalizeRussianPhonePaste } from './MaskedInputV2.phone.js';
-import { getStyles, globalClasses } from './MaskedInputV2.styles.js';
 var EMPTY_IMASK_PROPS = {};
 export var getSafeMaskInputType = function (type) {
     if (!type) {
@@ -67,6 +67,8 @@ export var MaskedInputV2 = forwardRefAndName('MaskedInputV2', function MaskedInp
             warning(false, '[MaskedInputV2]: This component is for internal use only. Please use MaskedInput instead.');
         }
     }, [__fromMaskedInputFacade]);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var inputRef = useRef(null);
     var coreInputRef = useRef(null);
@@ -181,7 +183,7 @@ export var MaskedInputV2 = forwardRefAndName('MaskedInputV2', function MaskedInp
     return (React.createElement(Input, __assign({ ref: inputRef }, inputProps, { type: getSafeMaskInputType(type), inputMode: getMaskInputMode(type, inputProps.inputMode),
         // Непустоту значения Input считает по value нативного инпута, где лежат символы маски,
         // поэтому на пустом значении крестик выключаем сами.
-        showClearIcon: raw === '' ? 'never' : showClearIcon, onValueChange: handleInputValueChange, onFocus: handleFocus, onBlur: handleBlur, onSelect: handleSelect, className: cx(globalClasses.root, className, styles.root()), element: React.createElement(MaskedCore, { maskState: maskState, slotMap: engine.slotMap, engine: engine, focused: focused, currentRaw: raw, onRawChange: handleRawChange, onUnexpectedInput: triggerUnexpectedInput, onUndo: handleUndo, onRedo: handleRedo, coreInputRef: coreInputRef, colored: colored, selectAllOnFocus: selectAllOnFocus, selectionIntent: selectionIntent, onSelectionIntentChange: requestSelectionIntent }) })));
+        showClearIcon: raw === '' ? 'never' : showClearIcon, onValueChange: handleInputValueChange, onFocus: handleFocus, onBlur: handleBlur, onSelect: handleSelect, className: cx(globalClasses.root, className, styles.root(theme)), element: React.createElement(MaskedCore, { maskState: maskState, slotMap: engine.slotMap, engine: engine, focused: focused, currentRaw: raw, onRawChange: handleRawChange, onUnexpectedInput: triggerUnexpectedInput, onUndo: handleUndo, onRedo: handleRedo, coreInputRef: coreInputRef, colored: colored, selectAllOnFocus: selectAllOnFocus, selectionIntent: selectionIntent, onSelectionIntentChange: requestSelectionIntent }) })));
     // Клик по крестику очистки Input отдаёт наружу через onValueChange, а сам чистит поле
     // записью в DOM — мимо модели маски, из-за чего значение вернулось бы при следующем рендере.
     // Поэтому очищаем через raw, как при обычном вводе.