@skbkontur/react-ui 0.0.0-c2bf15a894 → 0.0.0-c37930b3b1

package/components/Loader/Loader.d.ts

@@ -1,120 +1,76 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AnyObject } from '../../lib/utils';
-import { SpinnerProps } from '../Spinner';
-import { CommonProps } from '../../internal/CommonWrapper';
-declare const types: readonly ["mini", "normal", "big"];
-export type LoaderType = (typeof types)[number];
-export interface LoaderProps extends CommonProps {
-    children?: React.ReactNode;
-    /**
-     * Флаг переключения состояния лоадера
-     * @default false
-     */
-    active?: boolean;
-    /**
-     * Подпись под спиннером
-     */
-    caption?: SpinnerProps['caption'];
-    /**
-     * Компонент заменяющий спиннер.
-     */
-    component?: React.ReactNode;
-    /**
-     * Размер спиннера и текста
-     *
-     * @default normal
-     */
-    type?: LoaderType;
-    /**
-     * Время в миллисекундах для показа вуали без спиннера.
-     * @default 300
-     */
-    delayBeforeSpinnerShow?: number;
-    /**
-     * Минимальное время в миллисекундах для показа спиннера
-     * @default 1000
-     */
-    minimalDelayBeforeSpinnerHide?: number;
-}
-export interface LoaderState {
-    isStickySpinner: boolean;
-    isSpinnerVisible: boolean;
-    isLoaderActive: boolean;
-    spinnerStyle?: AnyObject;
-}
-export declare const LoaderDataTids: {
-    readonly veil: "Loader__Veil";
-    readonly spinner: "Loader__Spinner";
-};
-type DefaultProps = Required<Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>>;
-/**
- * Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер
- *
- * Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)
- */
-export declare class Loader extends React.Component<LoaderProps, LoaderState> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    static defaultProps: DefaultProps;
-    private getProps;
-    static propTypes: {
-        /**
-         * показываем лоадер или нет
-         */
-        active: PropTypes.Requireable<boolean>;
-        /**
-         * Текст рядом с лоадером.
-         *
-         * @default  "Загрузка"
-         */
-        caption: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Класс для обертки
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Тип спиннера: mini, normal, big
-         *
-         * @default  normal
-         */
-        type: PropTypes.Requireable<"big" | "normal" | "mini">;
-        /**
-         * Время в миллисекундах для показа вуали без спиннера.
-         * @default 300
-         */
-        delayBeforeSpinnerShow: PropTypes.Requireable<number>;
-        /**
-         * Минимальное время в миллисекундах для показа спиннера
-         * @default 1000
-         */
-        minimalDelayBeforeSpinnerHide: PropTypes.Requireable<number>;
-    };
-    private theme;
-    private emotion;
-    private styles;
-    private setRootNode;
-    private spinnerContainerNode;
-    private childrenContainerNode;
-    private spinnerNode;
-    private layoutEvents;
-    private spinnerTask;
-    private childrenObserver;
-    constructor(props: LoaderProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>): void;
-    componentWillUnmount(): void;
-    static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState>;
-    render(): React.JSX.Element;
-    private renderMain;
-    private childrenRef;
-    private spinnerRef;
-    private renderSpinner;
-    private checkSpinnerPosition;
-    private disableChildrenFocus;
-    private enableChildrenFocus;
-    private makeObservable;
-    private makeUnobservable;
-}
-export {};
+import React from 'react';
+import type { AnyObject } from '../../lib/utils';
+import type { SpinnerProps } from '../Spinner';
+import type { CommonProps } from '../../internal/CommonWrapper';
+import type { TGetRootNode } from '../../lib/rootNode';
+declare const types: readonly ["mini", "normal", "big"];
+export type LoaderType = (typeof types)[number];
+export interface LoaderProps extends CommonProps {
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Задает состояние лоадера.
+     * @default false */
+    active?: boolean;
+    /** Задает подпись под спиннером.
+     * @default  "Загрузка"
+     */
+    caption?: SpinnerProps['caption'];
+    /** Задает компонент, заменяющий спиннер. */
+    component?: React.ReactNode;
+    /** Задает размер спиннера и текста.
+     * @default normal. */
+    type?: LoaderType;
+    /** Устанавливает время в миллисекундах для показа вуали без спиннера.
+     * @default 300 */
+    delayBeforeSpinnerShow?: number;
+    /** Устанавливает минимальное время в миллисекундах для показа спиннера.
+     * @default 1000. */
+    minimalDelayBeforeSpinnerHide?: number;
+}
+export interface LoaderState {
+    isStickySpinner: boolean;
+    isSpinnerVisible: boolean;
+    isLoaderActive: boolean;
+    spinnerStyle?: AnyObject;
+}
+export declare const LoaderDataTids: {
+    readonly veil: "Loader__Veil";
+    readonly spinner: "Loader__Spinner";
+};
+type DefaultProps = Required<Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>>;
+/**
+ * Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер.
+ *
+ * Если вам нужен только сам спиннер без дополнительного функционала - используйте компонент Spinner.
+ */
+export declare class Loader extends React.Component<LoaderProps, LoaderState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    private theme;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private spinnerContainerNode;
+    private childrenContainerNode;
+    private spinnerNode;
+    private layoutEvents;
+    private spinnerTask;
+    private childrenObserver;
+    constructor(props: LoaderProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>): void;
+    componentWillUnmount(): void;
+    static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState>;
+    render(): React.JSX.Element;
+    private renderMain;
+    private childrenRef;
+    private spinnerRef;
+    private renderSpinner;
+    private checkSpinnerPosition;
+    private disableChildrenFocus;
+    private enableChildrenFocus;
+    private makeObservable;
+    private makeUnobservable;
+}
+export {};

package/components/Loader/Loader.styles/Loader.styles.js

@@ -1,22 +1,20 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    active: function active(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        border-radius: ", ";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n\n        background: ", ";\n      "])), t.loaderBorderRadius, t.loaderBg);
-    },
-    loader: function loader() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        box-sizing: border-box;\n        display: inline-block;\n        position: relative;\n        width: 100%;\n        z-index: inherit;\n      "])));
-    },
-    spinnerContainer: function spinnerContainer() {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        display: block;\n        margin: auto;\n        text-align: center;\n\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n\n        &::before {\n          content: ' ';\n          display: inline-block;\n          height: 100%;\n          min-height: 100%;\n          vertical-align: middle;\n        }\n      "])));
-    },
-    spinnerContainerSticky: function spinnerContainerSticky() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        position: fixed;\n      "])));
-    },
-    spinnerComponentWrapper: function spinnerComponentWrapper() {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n      "])));
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  active: function active(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      background: ", ";\n    "])), t.loaderBorderRadius, t.loaderBg);
+  },
+  loader: function loader() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    "])));
+  },
+  spinnerContainer: function spinnerContainer() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: block;\n      margin: auto;\n      text-align: center;\n\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    "])));
+  },
+  spinnerContainerSticky: function spinnerContainerSticky() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n    "])));
+  },
+  spinnerComponentWrapper: function spinnerComponentWrapper() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+  }
+});

package/components/Loader/Loader.styles/Loader.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","active","t","css","_templateObject","_taggedTemplateLiteralLoose","loaderBorderRadius","loaderBg","loader","_templateObject2","spinnerContainer","_templateObject3","spinnerContainerSticky","_templateObject4","spinnerComponentWrapper","_templateObject5"],"sources":["Loader.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    active(t: Theme) {\n      return emotion.css`\n        border-radius: ${t.loaderBorderRadius};\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n\n        background: ${t.loaderBg};\n      `;\n    },\n\n    loader() {\n      return emotion.css`\n        box-sizing: border-box;\n        display: inline-block;\n        position: relative;\n        width: 100%;\n        z-index: inherit;\n      `;\n    },\n\n    spinnerContainer() {\n      return emotion.css`\n        display: block;\n        margin: auto;\n        text-align: center;\n\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n\n        &::before {\n          content: ' ';\n          display: inline-block;\n          height: 100%;\n          min-height: 100%;\n          vertical-align: middle;\n        }\n      `;\n    },\n\n    spinnerContainerSticky() {\n      return emotion.css`\n        position: fixed;\n      `;\n    },\n\n    spinnerComponentWrapper() {\n      return emotion.css`\n        display: inline-block;\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;;AAGxD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,MAAM,WAAAA,OAACC,CAAQ,EAAE;QACf,OAAOF,OAAO,CAACG,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;QACCH,CAAC,CAACI,kBAAkB;;;;;;;QAOvBJ,CAAC,CAACK,QAAQ;;MAE5B,CAAC;;MAEDC,MAAM,WAAAA,OAAA,EAAG;QACP,OAAOR,OAAO,CAACG,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;;;;MAOpB,CAAC;;MAEDK,gBAAgB,WAAAA,iBAAA,EAAG;QACjB,OAAOV,OAAO,CAACG,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;;;;;;;;;;;;;;;MAmBpB,CAAC;;MAEDO,sBAAsB,WAAAA,uBAAA,EAAG;QACvB,OAAOZ,OAAO,CAACG,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;MAGpB,CAAC;;MAEDS,uBAAuB,WAAAA,wBAAA,EAAG;QACxB,OAAOd,OAAO,CAACG,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;;MAGpB;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","active","t","_templateObject","_taggedTemplateLiteralLoose","loaderBorderRadius","loaderBg","loader","_templateObject2","spinnerContainer","_templateObject3","spinnerContainerSticky","_templateObject4","spinnerComponentWrapper","_templateObject5"],"sources":["Loader.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      border-radius: ${t.loaderBorderRadius};\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      background: ${t.loaderBg};\n    `;\n  },\n\n  loader() {\n    return css`\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    `;\n  },\n\n  spinnerContainer() {\n    return css`\n      display: block;\n      margin: auto;\n      text-align: center;\n\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    `;\n  },\n\n  spinnerContainerSticky() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  spinnerComponentWrapper() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"],"mappings":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,MAAM,WAAAA,OAACC,CAAQ,EAAE;IACf,OAAOJ,GAAG,CAAAK,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACSF,CAAC,CAACG,kBAAkB;;;;;;;IAOvBH,CAAC,CAACI,QAAQ;;EAE5B,CAAC;;EAEDC,MAAM,WAAAA,OAAA,EAAG;IACP,OAAOT,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;;;;EAOZ,CAAC;;EAEDK,gBAAgB,WAAAA,iBAAA,EAAG;IACjB,OAAOX,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;;;;;;;;;;;;;;;EAmBZ,CAAC;;EAEDO,sBAAsB,WAAAA,uBAAA,EAAG;IACvB,OAAOb,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;EAGZ,CAAC;;EAEDS,uBAAuB,WAAAA,wBAAA,EAAG;IACxB,OAAOf,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Loader/Loader.styles.d.ts

@@ -1,9 +1,8 @@
-import type { Emotion } from '@emotion/css/create-instance';
-import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
-    active(t: Theme): string;
-    loader(): string;
-    spinnerContainer(): string;
-    spinnerContainerSticky(): string;
-    spinnerComponentWrapper(): string;
-};
+import type { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    active(t: Theme): string;
+    loader(): string;
+    spinnerContainer(): string;
+    spinnerContainerSticky(): string;
+    spinnerComponentWrapper(): string;
+};

package/components/Loader/__stories__/LoaderAndButton/LoaderAndButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","Button","Loader","LoaderAndButton","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","isTooltipOpened","_inheritsLoose","_proto","prototype","render","_this2","createElement","active","props","type","trigger","onClick","setState","isActive","Component"],"sources":["LoaderAndButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Tooltip } from '../../Tooltip';\nimport { Button } from '../../Button';\nimport { Loader } from '../Loader';\nimport { LoaderProps } from '..';\n\ntype LoaderAndButtonProps = Pick<LoaderProps, 'active'>;\ninterface LoaderAndButtonState {\n  isTooltipOpened: boolean;\n  isActive?: boolean;\n}\nexport class LoaderAndButton extends React.Component<LoaderAndButtonProps, LoaderAndButtonState> {\n  public state: LoaderAndButtonState = {\n    isTooltipOpened: false,\n  };\n\n  public render() {\n    return (\n      <Loader active={this.props.active} type={'big'}>\n        <h1>\n          Yeah, and if you were the pope they&apos;d be all, &quot;Straighten your pope hat.&quot; And &quot;Put on your\n          good vestments.&quot;\n        </h1>\n        <Tooltip render={() => 'Yes, you can!'} trigger={this.state.isTooltipOpened ? 'opened' : 'closed'}>\n          <Button\n            onClick={() => {\n              this.setState({ isActive: true, isTooltipOpened: true });\n            }}\n          >\n            Can you click me?\n          </Button>\n        </Tooltip>\n        <p>\n          No, I&apos;m Santa Claus! I guess if you want children beaten, you have to do it yourself. We&apos;re also\n          Santa Claus! Leela, Bender, we&apos;re going grave robbing.\n        </p>\n        <p>\n          Are you crazy? I can&apos;t swallow that. Large bet on myself in round one. Hey, whatcha watching?{' '}\n          <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>\n          <em>It&apos;s okay, Bender.</em> I like cooking too.\n        </p>\n        <h2>Oh, I think we should just stay friends.</h2>\n        <p>\n          No argument here. And when we woke up, we had these bodies. You guys go on without me! I&apos;m going to go…\n          look for more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is\n          his wife holding up? …To shreds, you say.\n        </p>\n        <ol>\n          <li>No! The kind with looting and maybe starting a few fires!</li>\n          <li>You are the last hope of the universe.</li>\n          <li>Hey, guess what you&apos;re accessories to.</li>\n        </ol>\n      </Loader>\n    );\n  }\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,MAAM,QAAQ,cAAc;AACrC,SAASC,MAAM,QAAQ,WAAW;;;;;;;;AAQlC,WAAaC,eAAe,0BAAAC,gBAAA,YAAAD,gBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IACnBU,KAAK,GAAyB;MACnCC,eAAe,EAAE;IACnB,CAAC,QAAAX,KAAA,EAAAY,cAAA,CAAAd,eAAA,EAAAC,gBAAA,MAAAc,MAAA,GAAAf,eAAA,CAAAgB,SAAA,CAAAD,MAAA;;EAEME,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA;IACd;MACEtB,KAAA,CAAAuB,aAAA,CAACpB,MAAM,IAACqB,MAAM,EAAE,IAAI,CAACC,KAAK,CAACD,MAAO,EAACE,IAAI,EAAE,KAAM;MAC7C1B,KAAA,CAAAuB,aAAA,aAAI;;;MAGA,CAAC;MACLvB,KAAA,CAAAuB,aAAA,CAACtB,OAAO,IAACoB,MAAM,EAAE,SAAAA,OAAA,UAAM,eAAe,EAAC,EAACM,OAAO,EAAE,IAAI,CAACX,KAAK,CAACC,eAAe,GAAG,QAAQ,GAAG,QAAS;MAChGjB,KAAA,CAAAuB,aAAA,CAACrB,MAAM;QACL0B,OAAO,EAAE,SAAAA,QAAA,EAAM;UACbN,MAAI,CAACO,QAAQ,CAAC,EAAEC,QAAQ,EAAE,IAAI,EAAEb,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;QAC1D,CAAE;MACH;;MAEO;MACD,CAAC;MACVjB,KAAA,CAAAuB,aAAA,YAAG;;;MAGA,CAAC;MACJvB,KAAA,CAAAuB,aAAA,YAAG,+FACiG;MAAC,GAAG;MACtGvB,KAAA,CAAAuB,aAAA,iBAAQ,sFAAuF,CAAC;MAChGvB,KAAA,CAAAuB,aAAA,aAAI,oBAA2B,CAAC;MAC/B,CAAC;MACJvB,KAAA,CAAAuB,aAAA,aAAI,0CAA4C,CAAC;MACjDvB,KAAA,CAAAuB,aAAA,YAAG;;;;MAIA,CAAC;MACJvB,KAAA,CAAAuB,aAAA;MACEvB,KAAA,CAAAuB,aAAA,aAAI,2DAA6D,CAAC;MAClEvB,KAAA,CAAAuB,aAAA,aAAI,wCAA0C,CAAC;MAC/CvB,KAAA,CAAAuB,aAAA,aAAI,wCAA+C;MACjD;MACE,CAAC;;EAEb,CAAC,QAAAnB,eAAA,GA3CkCJ,KAAK,CAAC+B,SAAS","ignoreList":[]}
+{"version":3,"names":["React","Tooltip","Button","Loader","LoaderAndButton","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","isTooltipOpened","_inheritsLoose","_proto","prototype","render","_this2","createElement","active","props","type","trigger","onClick","setState","isActive","Component"],"sources":["LoaderAndButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Tooltip } from '../../Tooltip';\nimport { Button } from '../../Button';\nimport { Loader } from '../Loader';\nimport type { LoaderProps } from '..';\n\ntype LoaderAndButtonProps = Pick<LoaderProps, 'active'>;\ninterface LoaderAndButtonState {\n  isTooltipOpened: boolean;\n  isActive?: boolean;\n}\nexport class LoaderAndButton extends React.Component<LoaderAndButtonProps, LoaderAndButtonState> {\n  public state: LoaderAndButtonState = {\n    isTooltipOpened: false,\n  };\n\n  public render() {\n    return (\n      <Loader active={this.props.active} type={'big'}>\n        <h1>\n          Yeah, and if you were the pope they&apos;d be all, &quot;Straighten your pope hat.&quot; And &quot;Put on your\n          good vestments.&quot;\n        </h1>\n        <Tooltip render={() => 'Yes, you can!'} trigger={this.state.isTooltipOpened ? 'opened' : 'closed'}>\n          <Button\n            onClick={() => {\n              this.setState({ isActive: true, isTooltipOpened: true });\n            }}\n          >\n            Can you click me?\n          </Button>\n        </Tooltip>\n        <p>\n          No, I&apos;m Santa Claus! I guess if you want children beaten, you have to do it yourself. We&apos;re also\n          Santa Claus! Leela, Bender, we&apos;re going grave robbing.\n        </p>\n        <p>\n          Are you crazy? I can&apos;t swallow that. Large bet on myself in round one. Hey, whatcha watching?{' '}\n          <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>\n          <em>It&apos;s okay, Bender.</em> I like cooking too.\n        </p>\n        <h2>Oh, I think we should just stay friends.</h2>\n        <p>\n          No argument here. And when we woke up, we had these bodies. You guys go on without me! I&apos;m going to go…\n          look for more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is\n          his wife holding up? …To shreds, you say.\n        </p>\n        <ol>\n          <li>No! The kind with looting and maybe starting a few fires!</li>\n          <li>You are the last hope of the universe.</li>\n          <li>Hey, guess what you&apos;re accessories to.</li>\n        </ol>\n      </Loader>\n    );\n  }\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,MAAM,QAAQ,cAAc;AACrC,SAASC,MAAM,QAAQ,WAAW;;;;;;;;AAQlC,WAAaC,eAAe,0BAAAC,gBAAA,YAAAD,gBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IACnBU,KAAK,GAAyB;MACnCC,eAAe,EAAE;IACnB,CAAC,QAAAX,KAAA,EAAAY,cAAA,CAAAd,eAAA,EAAAC,gBAAA,MAAAc,MAAA,GAAAf,eAAA,CAAAgB,SAAA,CAAAD,MAAA;;EAEME,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA;IACd;MACEtB,KAAA,CAAAuB,aAAA,CAACpB,MAAM,IAACqB,MAAM,EAAE,IAAI,CAACC,KAAK,CAACD,MAAO,EAACE,IAAI,EAAE,KAAM;MAC7C1B,KAAA,CAAAuB,aAAA,aAAI;;;MAGA,CAAC;MACLvB,KAAA,CAAAuB,aAAA,CAACtB,OAAO,IAACoB,MAAM,EAAE,SAAAA,OAAA,UAAM,eAAe,EAAC,EAACM,OAAO,EAAE,IAAI,CAACX,KAAK,CAACC,eAAe,GAAG,QAAQ,GAAG,QAAS;MAChGjB,KAAA,CAAAuB,aAAA,CAACrB,MAAM;QACL0B,OAAO,EAAE,SAAAA,QAAA,EAAM;UACbN,MAAI,CAACO,QAAQ,CAAC,EAAEC,QAAQ,EAAE,IAAI,EAAEb,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;QAC1D,CAAE;MACH;;MAEO;MACD,CAAC;MACVjB,KAAA,CAAAuB,aAAA,YAAG;;;MAGA,CAAC;MACJvB,KAAA,CAAAuB,aAAA,YAAG,+FACiG;MAAC,GAAG;MACtGvB,KAAA,CAAAuB,aAAA,iBAAQ,sFAAuF,CAAC;MAChGvB,KAAA,CAAAuB,aAAA,aAAI,oBAA2B,CAAC;MAC/B,CAAC;MACJvB,KAAA,CAAAuB,aAAA,aAAI,0CAA4C,CAAC;MACjDvB,KAAA,CAAAuB,aAAA,YAAG;;;;MAIA,CAAC;MACJvB,KAAA,CAAAuB,aAAA;MACEvB,KAAA,CAAAuB,aAAA,aAAI,2DAA6D,CAAC;MAClEvB,KAAA,CAAAuB,aAAA,aAAI,wCAA0C,CAAC;MAC/CvB,KAAA,CAAAuB,aAAA,aAAI,wCAA+C;MACjD;MACE,CAAC;;EAEb,CAAC,QAAAnB,eAAA,GA3CkCJ,KAAK,CAAC+B,SAAS","ignoreList":[]}

package/components/Loader/index.d.ts

@@ -1 +1 @@
-export * from './Loader';
+export * from './Loader';

package/components/MaskedInput/ColorableInputElement/ColorableInputElement/ColorableInputElement.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "onInput", "onFocus", "onBlur", "showOnFocus"];
+var _excluded = ["children", "onInput", "onFocus", "onBlur", "showOnFocus"]; /* eslint react-hooks/exhaustive-deps: 2 */
+
 import React, { useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';
 import { globalObject, isBrowser } from '@skbkontur/global-object';
 import debounce from 'lodash.debounce';
 import { ThemeContext } from "../../../../lib/theming/ThemeContext";
 import { forwardRefAndName } from "../../../../lib/forwardRefAndName";
-import { EmotionContext } from "../../../../lib/theming/Emotion";
-import { getStyles, globalClasses } from "../ColorableInputElement.styles";
+import { cx } from "../../../../lib/theming/Emotion";
+import { globalClasses } from "../ColorableInputElement.styles";
 
 // Возможно придётся включить.
 // Иногда, на тяжёлых страницах, текст рендерится итеративно.
@@ -20,9 +21,6 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
   var focused = useRef(false);
   var inputStyle = React.useRef();
   var theme = useContext(ThemeContext);
-  var emotion = useContext(EmotionContext);
-  var styles = getStyles(emotion);
-  var debouncedPaintText = useCallback(debounce(paintText), []);
   var _useState = useState(true),
     active = _useState[0],
     setActive = _useState[1];
@@ -41,10 +39,56 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
     };
   }, []);
   useEffect(updateActive, []);
+  var paintText = useCallback(function () {
+    var _inputRef$current, _shadow;
+    if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {
+      return;
+    }
+    (_inputRef$current = inputRef.current) == null || _inputRef$current.classList.add(globalClasses.input);
+    var shadow = spanRef.current.shadowRoot;
+    var typedValueElement = (_shadow = shadow) == null ? void 0 : _shadow.getElementById('span');
+    if (!typedValueElement) {
+      shadow = spanRef.current.attachShadow({
+        mode: 'open'
+      });
+      typedValueElement = globalObject.document.createElement('span');
+      typedValueElement.setAttribute('id', 'span');
+      shadow.appendChild(typedValueElement);
+    }
+    var style = inputStyle.current;
+    typedValueElement.textContent = (inputRef.current.getAttribute('data-unmasked-value') || focused.current) && inputRef.current.getAttribute('data-typed-value') || '';
+    var inputRect = inputRef.current.getBoundingClientRect();
+    var filledRect = spanRef.current.getBoundingClientRect();
+    var threshold = filledRect.width / (inputRect.width / 100);
+    var degree = style.fontStyle === 'italic' ? 100 : 90;
+    var typedValueColor = theme.inputTextColor;
+    var maskColor = theme.inputPlaceholderColor;
+    if (props.disabled) {
+      typedValueColor = theme.inputTextColorDisabled;
+      maskColor = theme.inputTextColorDisabled;
+    }
+    if (props.showOnFocus) {
+      maskColor = focused.current ? maskColor : 'transparent';
+    }
+    inputRef.current.style.backgroundImage = "\n      linear-gradient(\n          " + degree + "deg,\n          " + typedValueColor + " " + threshold + "%,\n          " + maskColor + " " + threshold + "%\n      )";
+  }, [props.showOnFocus, props.disabled, theme.inputTextColor, theme.inputPlaceholderColor, theme.inputTextColorDisabled]);
+  var debouncedPaintText = useCallback(function () {
+    return debounce(paintText);
+  }, [paintText])();
+  var activation = useCallback(function () {
+    if (active) {
+      debouncedPaintText();
+    } else {
+      var _inputRef$current2;
+      debouncedPaintText.cancel();
+      inputRef.current && (inputRef.current.style.backgroundImage = '');
+      (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.classList.remove(globalClasses.input);
+    }
+  }, [debouncedPaintText, active]);
   useEffect(function () {
-    activation(props);
+    activation();
     updateActive();
-  }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);
+  }, [props.value, props.defaultValue, theme, activation]);
   useEffect(function () {
     if (inputRef.current) {
       inputStyle.current = getComputedStyle(inputRef.current);
@@ -57,11 +101,7 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
       onFocus: handleFocus,
       onBlur: handleBlur,
       inputRef: inputRef,
-      className: emotion.cx(props.className, active && styles.input()),
-      style: _extends({}, inputProps.style, {
-        WebkitBackgroundClip: 'text',
-        backgroundClip: 'text'
-      })
+      className: cx(props.className, active && globalClasses.input)
     })), active && /*#__PURE__*/React.createElement("span", {
       style: {
         visibility: 'hidden',
@@ -72,10 +112,10 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
     }))
   );
   function handleInput(e) {
-    var _inputRef$current;
-    var isActive = !((_inputRef$current = inputRef.current) != null && (_inputRef$current = _inputRef$current.parentElement) != null && _inputRef$current.querySelector(':placeholder-shown'));
+    var _inputRef$current3;
+    var isActive = !((_inputRef$current3 = inputRef.current) != null && (_inputRef$current3 = _inputRef$current3.parentElement) != null && _inputRef$current3.querySelector(':placeholder-shown'));
     setActive(isActive);
-    activation(props);
+    activation();
     onInput == null || onInput(e);
   }
   function handleFocus(e) {
@@ -90,54 +130,8 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
   }
   function updateActive() {
     setTimeout(function () {
-      var _inputRef$current2;
-      setActive(!((_inputRef$current2 = inputRef.current) != null && (_inputRef$current2 = _inputRef$current2.parentElement) != null && _inputRef$current2.querySelector(':placeholder-shown')));
+      var _inputRef$current4;
+      setActive(!((_inputRef$current4 = inputRef.current) != null && (_inputRef$current4 = _inputRef$current4.parentElement) != null && _inputRef$current4.querySelector(':placeholder-shown')));
     });
   }
-  function activation(props) {
-    if (active) {
-      debouncedPaintText(props);
-    } else {
-      var _inputRef$current3;
-      debouncedPaintText.cancel();
-      inputRef.current && (inputRef.current.style.backgroundImage = '');
-      (_inputRef$current3 = inputRef.current) == null || _inputRef$current3.classList.remove(globalClasses.input);
-    }
-  }
-  function paintText(_props) {
-    var _inputRef$current4, _shadow;
-    if (_props === void 0) {
-      _props = props;
-    }
-    if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {
-      return;
-    }
-    (_inputRef$current4 = inputRef.current) == null || _inputRef$current4.classList.add(globalClasses.input);
-    var shadow = spanRef.current.shadowRoot;
-    var typedValueElement = (_shadow = shadow) == null ? void 0 : _shadow.getElementById('span');
-    if (!typedValueElement) {
-      shadow = spanRef.current.attachShadow({
-        mode: 'open'
-      });
-      typedValueElement = globalObject.document.createElement('span');
-      typedValueElement.setAttribute('id', 'span');
-      shadow.appendChild(typedValueElement);
-    }
-    var style = inputStyle.current;
-    typedValueElement.textContent = (inputRef.current.getAttribute('data-unmasked-value') || focused.current) && inputRef.current.getAttribute('data-typed-value') || '';
-    var inputRect = inputRef.current.getBoundingClientRect();
-    var filledRect = spanRef.current.getBoundingClientRect();
-    var threshold = filledRect.width / (inputRect.width / 100);
-    var degree = style.fontStyle === 'italic' ? 100 : 90;
-    var typedValueColor = theme.inputTextColor;
-    var maskColor = theme.inputPlaceholderColor;
-    if (_props.disabled) {
-      typedValueColor = theme.inputTextColorDisabled;
-      maskColor = theme.inputTextColorDisabled;
-    }
-    if (_props.showOnFocus) {
-      maskColor = focused.current ? maskColor : 'transparent';
-    }
-    inputRef.current.style.backgroundImage = "\n      linear-gradient(\n          " + degree + "deg,\n          " + typedValueColor + " " + threshold + "%,\n          " + maskColor + " " + threshold + "%\n      )";
-  }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useEffect","useImperativeHandle","useRef","useCallback","useState","globalObject","isBrowser","debounce","ThemeContext","forwardRefAndName","EmotionContext","getStyles","globalClasses","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","theme","emotion","styles","debouncedPaintText","paintText","_useState","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","_objectWithoutPropertiesLoose","_excluded","input","current","getRootNode","updateActive","activation","value","defaultValue","disabled","getComputedStyle","createElement","Fragment","cloneElement","_extends","handleInput","handleFocus","handleBlur","className","cx","style","WebkitBackgroundClip","backgroundClip","visibility","position","whiteSpace","e","_inputRef$current","isActive","parentElement","querySelector","setTimeout","_inputRef$current2","_inputRef$current3","cancel","backgroundImage","classList","remove","_props","_inputRef$current4","_shadow","add","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","setAttribute","appendChild","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","inputTextColorDisabled"],"sources":["ColorableInputElement.tsx"],"sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { InputElement, InputElementProps } from '../../Input';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { EmotionContext } from '../../../lib/theming/Emotion';\n\nimport { getStyles, globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n  showOnFocus?: boolean;\n  children: React.ReactElement;\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 inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n    const emotion = useContext(EmotionContext);\n    const styles = getStyles(emotion);\n    const debouncedPaintText = useCallback(debounce(paintText), []);\n    const [active, setActive] = useState(true);\n\n    const { children, onInput, onFocus, onBlur, showOnFocus, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(updateActive, []);\n\n    useEffect(() => {\n      activation(props);\n      updateActive();\n    }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          ...inputProps,\n          onInput: handleInput,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          inputRef,\n          className: emotion.cx(props.className, active && styles.input()),\n          style: {\n            ...inputProps.style,\n            WebkitBackgroundClip: 'text',\n            backgroundClip: 'text',\n          },\n        })}\n        {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const isActive = !inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n      setActive(isActive);\n\n      activation(props);\n\n      onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setTimeout(updateActive);\n\n      focused.current = true;\n\n      onFocus?.(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      updateActive();\n\n      focused.current = false;\n\n      onBlur?.(e);\n    }\n\n    function updateActive() {\n      setTimeout(() => {\n        setActive(!inputRef.current?.parentElement?.querySelector(':placeholder-shown'));\n      });\n    }\n\n    function activation(props: ColorableInputElementProps) {\n      if (active) {\n        debouncedPaintText(props);\n      } else {\n        debouncedPaintText.cancel();\n        inputRef.current && (inputRef.current.style.backgroundImage = '');\n        inputRef.current?.classList.remove(globalClasses.input);\n      }\n    }\n\n    function paintText(_props: Partial<ColorableInputElementProps> = props) {\n      if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {\n        return;\n      }\n\n      inputRef.current?.classList.add(globalClasses.input);\n\n      let shadow = spanRef.current.shadowRoot;\n      let typedValueElement = shadow?.getElementById('span');\n\n      if (!typedValueElement) {\n        shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n        typedValueElement = globalObject.document.createElement('span');\n        typedValueElement.setAttribute('id', 'span');\n\n        shadow.appendChild(typedValueElement);\n      }\n\n      const style = inputStyle.current;\n\n      typedValueElement.textContent =\n        ((inputRef.current.getAttribute('data-unmasked-value') || focused.current) &&\n          inputRef.current.getAttribute('data-typed-value')) ||\n        '';\n\n      const inputRect = inputRef.current.getBoundingClientRect();\n      const filledRect = spanRef.current.getBoundingClientRect();\n\n      const threshold = filledRect.width / (inputRect.width / 100);\n      const degree = style.fontStyle === 'italic' ? 100 : 90;\n\n      let typedValueColor = theme.inputTextColor;\n      let maskColor = theme.inputPlaceholderColor;\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\n      inputRef.current.style.backgroundImage = `\n      linear-gradient(\n          ${degree}deg,\n          ${typedValueColor} ${threshold}%,\n          ${maskColor} ${threshold}%\n      )`;\n    }\n  },\n);\n"],"mappings":"0OAAA,OAAOA,KAAK,IAAkBC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACtH,SAASC,YAAY,EAAEC,SAAS,QAAQ,0BAA0B;AAClE,OAAOC,QAAQ,MAAM,iBAAiB;;AAEtC,SAASC,YAAY,QAAQ,mCAAmC;;AAEhE,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,cAAc,QAAQ,8BAA8B;;AAE7D,SAASC,SAAS,EAAEC,aAAa,QAAQ,gCAAgC;;;;;;;AAOzE;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,qBAAqB,GAAGJ,iBAAiB;EACpD,uBAAuB;EACvB,SAASI,qBAAqBA,CAACC,KAAiC,EAAEC,GAA+B,EAAE;IACjG,IAAMC,QAAQ,GAAGd,MAAM,CAA0B,IAAI,CAAC;IACtD,IAAMe,OAAO,GAAGf,MAAM,CAAyB,IAAI,CAAC;IACpD,IAAMgB,OAAO,GAAGhB,MAAM,CAAC,KAAK,CAAC;IAC7B,IAAMiB,UAAU,GAAGrB,KAAK,CAACI,MAAM,CAAsB,CAAC;IACtD,IAAMkB,KAAK,GAAGrB,UAAU,CAACS,YAAY,CAAC;IACtC,IAAMa,OAAO,GAAGtB,UAAU,CAACW,cAAc,CAAC;IAC1C,IAAMY,MAAM,GAAGX,SAAS,CAACU,OAAO,CAAC;IACjC,IAAME,kBAAkB,GAAGpB,WAAW,CAACI,QAAQ,CAACiB,SAAS,CAAC,EAAE,EAAE,CAAC;IAC/D,IAAAC,SAAA,GAA4BrB,QAAQ,CAAC,IAAI,CAAC,CAAnCsB,MAAM,GAAAD,SAAA,IAAEE,SAAS,GAAAF,SAAA;;IAExB,IAAQG,QAAQ,GAA2Dd,KAAK,CAAxEc,QAAQ,CAAEC,OAAO,GAAkDf,KAAK,CAA9De,OAAO,CAAEC,OAAO,GAAyChB,KAAK,CAArDgB,OAAO,CAAEC,MAAM,GAAiCjB,KAAK,CAA5CiB,MAAM,CAAEC,WAAW,GAAoBlB,KAAK,CAApCkB,WAAW,CAAKC,UAAU,GAAAC,6BAAA,CAAKpB,KAAK,EAAAqB,SAAA;;IAEhFlC,mBAAmB;MACjBc,GAAG;MACH,oBAAO;UACLqB,KAAK,EAAEpB,QAAQ,CAACqB,OAAO;UACvBC,WAAW,EAAE,SAAAA,YAAA,UAAMtB,QAAQ,CAACqB,OAAO;QACrC,CAAC,EAAC;MACF;IACF,CAAC;;IAEDrC,SAAS,CAACuC,YAAY,EAAE,EAAE,CAAC;;IAE3BvC,SAAS,CAAC,YAAM;MACdwC,UAAU,CAAC1B,KAAK,CAAC;MACjByB,YAAY,CAAC,CAAC;IAChB,CAAC,EAAE,CAACb,MAAM,EAAEM,WAAW,EAAElB,KAAK,CAAC2B,KAAK,EAAE3B,KAAK,CAAC4B,YAAY,EAAE5B,KAAK,CAAC6B,QAAQ,EAAEzB,OAAO,CAACmB,OAAO,CAAC,CAAC;;IAE3FrC,SAAS,CAAC,YAAM;MACd,IAAIgB,QAAQ,CAACqB,OAAO,EAAE;QACpBlB,UAAU,CAACkB,OAAO,GAAGO,gBAAgB,CAAC5B,QAAQ,CAACqB,OAAO,CAAC;MACzD;IACF,CAAC,CAAC;;IAEF;MACEvC,KAAA,CAAA+C,aAAA,CAAA/C,KAAA,CAAAgD,QAAA;MACGhD,KAAK,CAACiD,YAAY,CAACnB,QAAQ,EAAAoB,QAAA;MACvBf,UAAU;QACbJ,OAAO,EAAEoB,WAAW;QACpBnB,OAAO,EAAEoB,WAAW;QACpBnB,MAAM,EAAEoB,UAAU;QAClBnC,QAAQ,EAARA,QAAQ;QACRoC,SAAS,EAAE/B,OAAO,CAACgC,EAAE,CAACvC,KAAK,CAACsC,SAAS,EAAE1B,MAAM,IAAIJ,MAAM,CAACc,KAAK,CAAC,CAAC,CAAC;QAChEkB,KAAK,EAAAN,QAAA;QACAf,UAAU,CAACqB,KAAK;UACnBC,oBAAoB,EAAE,MAAM;UAC5BC,cAAc,EAAE,MAAM,GACvB;;MACF,CAAC;MACD9B,MAAM,iBAAI5B,KAAA,CAAA+C,aAAA,WAAMS,KAAK,EAAE,EAAEG,UAAU,EAAE,QAAQ,EAAEC,QAAQ,EAAE,UAAU,EAAEC,UAAU,EAAE,KAAK,CAAC,CAAE,EAAC5C,GAAG,EAAEE,OAAQ,EAAE;MAC1G,CAAC;;;IAGL,SAASgC,WAAWA,CAACW,CAAsC,EAAE,KAAAC,iBAAA;MAC3D,IAAMC,QAAQ,GAAG,GAAAD,iBAAA,GAAC7C,QAAQ,CAACqB,OAAO,cAAAwB,iBAAA,GAAhBA,iBAAA,CAAkBE,aAAa,aAA/BF,iBAAA,CAAiCG,aAAa,CAAC,oBAAoB,CAAC;MACtFrC,SAAS,CAACmC,QAAQ,CAAC;;MAEnBtB,UAAU,CAAC1B,KAAK,CAAC;;MAEjBe,OAAO,YAAPA,OAAO,CAAG+B,CAAC,CAAC;IACd;;IAEA,SAASV,WAAWA,CAACU,CAAqC,EAAE;MAC1DK,UAAU,CAAC1B,YAAY,CAAC;;MAExBrB,OAAO,CAACmB,OAAO,GAAG,IAAI;;MAEtBP,OAAO,YAAPA,OAAO,CAAG8B,CAAC,CAAC;IACd;;IAEA,SAAST,UAAUA,CAACS,CAAqC,EAAE;MACzDrB,YAAY,CAAC,CAAC;;MAEdrB,OAAO,CAACmB,OAAO,GAAG,KAAK;;MAEvBN,MAAM,YAANA,MAAM,CAAG6B,CAAC,CAAC;IACb;;IAEA,SAASrB,YAAYA,CAAA,EAAG;MACtB0B,UAAU,CAAC,YAAM,KAAAC,kBAAA;QACfvC,SAAS,CAAC,GAAAuC,kBAAA,GAAClD,QAAQ,CAACqB,OAAO,cAAA6B,kBAAA,GAAhBA,kBAAA,CAAkBH,aAAa,aAA/BG,kBAAA,CAAiCF,aAAa,CAAC,oBAAoB,CAAC,EAAC;MAClF,CAAC,CAAC;IACJ;;IAEA,SAASxB,UAAUA,CAAC1B,KAAiC,EAAE;MACrD,IAAIY,MAAM,EAAE;QACVH,kBAAkB,CAACT,KAAK,CAAC;MAC3B,CAAC,MAAM,KAAAqD,kBAAA;QACL5C,kBAAkB,CAAC6C,MAAM,CAAC,CAAC;QAC3BpD,QAAQ,CAACqB,OAAO,KAAKrB,QAAQ,CAACqB,OAAO,CAACiB,KAAK,CAACe,eAAe,GAAG,EAAE,CAAC;QACjE,CAAAF,kBAAA,GAAAnD,QAAQ,CAACqB,OAAO,aAAhB8B,kBAAA,CAAkBG,SAAS,CAACC,MAAM,CAAC3D,aAAa,CAACwB,KAAK,CAAC;MACzD;IACF;;IAEA,SAASZ,SAASA,CAACgD,MAA2C,EAAU,KAAAC,kBAAA,EAAAC,OAAA,KAArDF,MAA2C,cAA3CA,MAA2C,GAAG1D,KAAK;MACpE,IAAI,CAACG,OAAO,CAACoB,OAAO,IAAI,CAACrB,QAAQ,CAACqB,OAAO,IAAI,CAAClB,UAAU,CAACkB,OAAO,IAAI,CAAC/B,SAAS,CAACD,YAAY,CAAC,EAAE;QAC5F;MACF;;MAEA,CAAAoE,kBAAA,GAAAzD,QAAQ,CAACqB,OAAO,aAAhBoC,kBAAA,CAAkBH,SAAS,CAACK,GAAG,CAAC/D,aAAa,CAACwB,KAAK,CAAC;;MAEpD,IAAIwC,MAAM,GAAG3D,OAAO,CAACoB,OAAO,CAACwC,UAAU;MACvC,IAAIC,iBAAiB,IAAAJ,OAAA,GAAGE,MAAM,qBAANF,OAAA,CAAQK,cAAc,CAAC,MAAM,CAAC;;MAEtD,IAAI,CAACD,iBAAiB,EAAE;QACtBF,MAAM,GAAG3D,OAAO,CAACoB,OAAO,CAAC2C,YAAY,CAAC,EAAEC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;;QAEvDH,iBAAiB,GAAGzE,YAAY,CAAC6E,QAAQ,CAACrC,aAAa,CAAC,MAAM,CAAC;QAC/DiC,iBAAiB,CAACK,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC;;QAE5CP,MAAM,CAACQ,WAAW,CAACN,iBAAiB,CAAC;MACvC;;MAEA,IAAMxB,KAAK,GAAGnC,UAAU,CAACkB,OAAO;;MAEhCyC,iBAAiB,CAACO,WAAW;MAC1B,CAACrE,QAAQ,CAACqB,OAAO,CAACiD,YAAY,CAAC,qBAAqB,CAAC,IAAIpE,OAAO,CAACmB,OAAO;MACvErB,QAAQ,CAACqB,OAAO,CAACiD,YAAY,CAAC,kBAAkB,CAAC;MACnD,EAAE;;MAEJ,IAAMC,SAAS,GAAGvE,QAAQ,CAACqB,OAAO,CAACmD,qBAAqB,CAAC,CAAC;MAC1D,IAAMC,UAAU,GAAGxE,OAAO,CAACoB,OAAO,CAACmD,qBAAqB,CAAC,CAAC;;MAE1D,IAAME,SAAS,GAAGD,UAAU,CAACE,KAAK,IAAIJ,SAAS,CAACI,KAAK,GAAG,GAAG,CAAC;MAC5D,IAAMC,MAAM,GAAGtC,KAAK,CAACuC,SAAS,KAAK,QAAQ,GAAG,GAAG,GAAG,EAAE;;MAEtD,IAAIC,eAAe,GAAG1E,KAAK,CAAC2E,cAAc;MAC1C,IAAIC,SAAS,GAAG5E,KAAK,CAAC6E,qBAAqB;MAC3C,IAAIzB,MAAM,CAAC7B,QAAQ,EAAE;QACnBmD,eAAe,GAAG1E,KAAK,CAAC8E,sBAAsB;QAC9CF,SAAS,GAAG5E,KAAK,CAAC8E,sBAAsB;MAC1C;MACA,IAAI1B,MAAM,CAACxC,WAAW,EAAE;QACtBgE,SAAS,GAAG9E,OAAO,CAACmB,OAAO,GAAG2D,SAAS,GAAG,aAAa;MACzD;;MAEAhF,QAAQ,CAACqB,OAAO,CAACiB,KAAK,CAACe,eAAe;;MAEhCuB,MAAM;MACNE,eAAe,SAAIJ,SAAS;MAC5BM,SAAS,SAAIN,SAAS,eAC1B;;IACJ;EACF;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useContext","useEffect","useImperativeHandle","useRef","useCallback","useState","globalObject","isBrowser","debounce","ThemeContext","forwardRefAndName","cx","globalClasses","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","theme","_useState","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","_objectWithoutPropertiesLoose","_excluded","input","current","getRootNode","updateActive","paintText","_inputRef$current","_shadow","classList","add","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","createElement","setAttribute","appendChild","style","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","disabled","inputTextColorDisabled","backgroundImage","debouncedPaintText","activation","_inputRef$current2","cancel","remove","value","defaultValue","getComputedStyle","Fragment","cloneElement","_extends","handleInput","handleFocus","handleBlur","className","visibility","position","whiteSpace","e","_inputRef$current3","isActive","parentElement","querySelector","setTimeout","_inputRef$current4"],"sources":["ColorableInputElement.tsx"],"sourcesContent":["/* eslint react-hooks/exhaustive-deps: 2 */\nimport type { ForwardedRef } from 'react';\nimport React, { useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport type { InputElement, InputElementProps } from '../../Input';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { cx } from '../../../lib/theming/Emotion';\n\nimport { globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n  showOnFocus?: boolean;\n  children: React.ReactElement;\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 inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n    const [active, setActive] = useState(true);\n\n    const { children, onInput, onFocus, onBlur, showOnFocus, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(updateActive, []);\n\n    const paintText = useCallback(() => {\n      if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {\n        return;\n      }\n\n      inputRef.current?.classList.add(globalClasses.input);\n\n      let shadow = spanRef.current.shadowRoot;\n      let typedValueElement = shadow?.getElementById('span');\n\n      if (!typedValueElement) {\n        shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n        typedValueElement = globalObject.document.createElement('span');\n        typedValueElement.setAttribute('id', 'span');\n\n        shadow.appendChild(typedValueElement);\n      }\n\n      const style = inputStyle.current;\n\n      typedValueElement.textContent =\n        ((inputRef.current.getAttribute('data-unmasked-value') || focused.current) &&\n          inputRef.current.getAttribute('data-typed-value')) ||\n        '';\n\n      const inputRect = inputRef.current.getBoundingClientRect();\n      const filledRect = spanRef.current.getBoundingClientRect();\n\n      const threshold = filledRect.width / (inputRect.width / 100);\n      const degree = style.fontStyle === 'italic' ? 100 : 90;\n\n      let typedValueColor = theme.inputTextColor;\n      let maskColor = theme.inputPlaceholderColor;\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\n      inputRef.current.style.backgroundImage = `\n      linear-gradient(\n          ${degree}deg,\n          ${typedValueColor} ${threshold}%,\n          ${maskColor} ${threshold}%\n      )`;\n    }, [\n      props.showOnFocus,\n      props.disabled,\n      theme.inputTextColor,\n      theme.inputPlaceholderColor,\n      theme.inputTextColorDisabled,\n    ]);\n\n    const debouncedPaintText = useCallback(() => debounce(paintText), [paintText])();\n\n    const activation = useCallback(() => {\n      if (active) {\n        debouncedPaintText();\n      } else {\n        debouncedPaintText.cancel();\n        inputRef.current && (inputRef.current.style.backgroundImage = '');\n        inputRef.current?.classList.remove(globalClasses.input);\n      }\n    }, [debouncedPaintText, active]);\n\n    useEffect(() => {\n      activation();\n      updateActive();\n    }, [props.value, props.defaultValue, theme, activation]);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\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, active && globalClasses.input),\n        })}\n        {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const isActive = !inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n      setActive(isActive);\n\n      activation();\n\n      onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setTimeout(updateActive);\n\n      focused.current = true;\n\n      onFocus?.(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      updateActive();\n\n      focused.current = false;\n\n      onBlur?.(e);\n    }\n\n    function updateActive() {\n      setTimeout(() => {\n        setActive(!inputRef.current?.parentElement?.querySelector(':placeholder-shown'));\n      });\n    }\n  },\n);\n"],"mappings":"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","ignoreList":[]}

package/components/MaskedInput/ColorableInputElement/ColorableInputElement.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { InputElement, InputElementProps } from '../../Input';
-export type ColorableInputElementProps = InputElementProps & {
-    showOnFocus?: boolean;
-    children: React.ReactElement;
-};
-export declare const ColorableInputElement: import("../../../lib/forwardRefAndName").ReactUIComponentWithRef<InputElement, ColorableInputElementProps> & Record<never, never>;
+import React from 'react';
+import type { InputElement, InputElementProps } from '../../Input';
+export type ColorableInputElementProps = InputElementProps & {
+    showOnFocus?: boolean;
+    children: React.ReactElement;
+};
+export declare const ColorableInputElement: import("../../../lib/forwardRefAndName").ReactUIComponentWithRef<InputElement, ColorableInputElementProps> & Record<never, never>;

package/components/MaskedInput/ColorableInputElement/ColorableInputElement.styles/ColorableInputElement.styles.js

@@ -1,13 +1,7 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject;
-import { memoizeStyle, prefix } from "../../../../lib/theming/Emotion";
+import { injectGlobal, prefix } from "../../../../lib/theming/Emotion";
 export var globalClasses = prefix('colorable')({
   input: 'input'
 });
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    input: function input() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        &.", " {\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      "])), globalClasses.input);
-    }
-  });
-};
+injectGlobal(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  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"])), globalClasses.input);

package/components/MaskedInput/ColorableInputElement/ColorableInputElement.styles/ColorableInputElement.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","prefix","globalClasses","input","getStyles","emotion","css","_templateObject","_taggedTemplateLiteralLoose"],"sources":["ColorableInputElement.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle, prefix } from '../../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('colorable')({\n  input: 'input',\n});\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    input() {\n      return emotion.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"],"mappings":";;AAEA,SAASA,YAAY,EAAEC,MAAM,QAAQ,8BAA8B;;AAEnE,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,WAAW,CAAC,CAAC;EAC/CE,KAAK,EAAE;AACT,CAAC,CAAC;;AAEF,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCL,YAAY,CAAC;MACXG,KAAK,WAAAA,MAAA,EAAG;QACN,OAAOE,OAAO,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;QACZN,aAAa,CAACC,KAAK;;;;;;;;;MAS3B;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["injectGlobal","prefix","globalClasses","input","_templateObject","_taggedTemplateLiteralLoose"],"sources":["ColorableInputElement.styles.ts"],"sourcesContent":["import { injectGlobal, prefix } from '../../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('colorable')({\n  input: 'input',\n});\n\ninjectGlobal`\n  input.${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"],"mappings":"oHAAA,SAASA,YAAY,EAAEC,MAAM,QAAQ,8BAA8B;;AAEnE,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,WAAW,CAAC,CAAC;EAC/CE,KAAK,EAAE;AACT,CAAC,CAAC;;AAEFH,YAAY,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;AACFH,aAAa,CAACC,KAAK","ignoreList":[]}

package/components/MaskedInput/ColorableInputElement/ColorableInputElement.styles.d.ts

@@ -1,7 +1,3 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const globalClasses: {
-    input: string;
-};
-export declare const getStyles: (emotion: Emotion) => {
-    input(): string;
-};
+export declare const globalClasses: {
+    input: string;
+};

package/components/MaskedInput/ColorableInputElement/index.d.ts

@@ -1 +1 @@
-export * from './ColorableInputElement';
+export * from './ColorableInputElement';