@skbkontur/react-ui 6.0.8 → 6.1.0

package/components/Input/InputLayout/InputLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLayout.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayout.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAWxF,MAAM,CAAC,IAAM,WAAW,GAAG,iBAAiB,CAAyC,aAAa,EAAE,UAAC,KAAK,EAAE,GAAG;IAC7G,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IACxC,IAAA,QAAQ,GAA8E,KAAK,SAAnF,EAAE,SAAS,GAAmE,KAAK,UAAxE,EAAE,MAAM,GAA2D,KAAK,OAAhE,EAAE,MAAM,GAAmD,KAAK,OAAxD,EAAE,UAAU,GAAuC,KAAK,WAA5C,EAAE,OAAO,GAA8B,KAAK,QAAnC,EAAE,QAAQ,GAAoB,KAAK,SAAzB,EAAE,KAAkB,KAAK,IAAV,EAAb,GAAG,mBAAG,OAAO,KAAA,CAAW;IACpG,IAAM,QAAQ,yBAAiC,yBAAyB,GAAK,OAAO,CAAE,CAAC;IACvF,IAAM,GAAG,GAAG,GAAG,CAAC;IAEhB,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ;QAC1C,oBAAC,aAAa,eAAK,KAAK;YACtB,oBAAC,GAAG,yBAAW,aAAa,CAAC,IAAI,IAAM,UAAU,IAAE,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC;gBACpF,oBAAC,gBAAgB,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAG;gBAC9D,8BAAM,SAAS,EAAE,YAAY,CAAC,KAAK,EAAE,IAAG,QAAQ,CAAQ;gBACxD,oBAAC,gBAAgB,IAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG,CAC5D,CACQ,CACY,CAC/B,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport type { CommonProps } from '../../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../../internal/CommonWrapper/index.js';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport { mergeRefs } from '../../../lib/mergeRefs.js';\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { InputDataTids } from '../Input.js';\nimport type { InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutAside } from './InputLayoutAside.js';\nimport { InputLayoutContext, InputLayoutContextDefault } from './InputLayoutContext.js';\nimport type { InputLayoutContextProps } from './InputLayoutContext.js';\n\ntype InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' | 'rightIcon' | 'prefix' | 'suffix'>;\n\nexport interface InputLayoutRootProps extends InputLayoutRootFromInputProps, CommonProps {\n  labelProps: React.LabelHTMLAttributes<HTMLLabelElement> & { ref?: React.Ref<HTMLLabelElement> };\n  context: Partial<InputLayoutContextProps>;\n  tag?: 'label' | 'span';\n}\n\nexport const InputLayout = forwardRefAndName<HTMLLabelElement, InputLayoutRootProps>('InputLayout', (props, ref) => {\n  const stylesLayout = useStyles(getStylesLayout);\n  const { leftIcon, rightIcon, prefix, suffix, labelProps, context, children, tag = 'label' } = props;\n  const _context: InputLayoutContextProps = { ...InputLayoutContextDefault, ...context };\n  const Tag = tag;\n\n  return (\n    <InputLayoutContext.Provider value={_context}>\n      <CommonWrapper {...props}>\n        <Tag data-tid={InputDataTids.root} {...labelProps} ref={mergeRefs(ref, labelProps.ref)}>\n          <InputLayoutAside icon={leftIcon} text={prefix} side=\"left\" />\n          <span className={stylesLayout.input()}>{children}</span>\n          <InputLayoutAside icon={rightIcon} text={suffix} side=\"right\" />\n        </Tag>\n      </CommonWrapper>\n    </InputLayoutContext.Provider>\n  );\n});\n"]}
+{"version":3,"file":"InputLayout.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayout.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAyBxF,MAAM,CAAC,IAAM,WAAW,GAAG,iBAAiB,CAAyC,aAAa,EAAE,UAAC,KAAK,EAAE,GAAG;;IAC7G,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAE9C,IAAA,QAAQ,GAgBN,KAAK,SAhBC,EACR,SAAS,GAeP,KAAK,UAfE,EACT,MAAM,GAcJ,KAAK,OAdD,EACN,MAAM,GAaJ,KAAK,OAbD,EACN,KAAK,GAYH,KAAK,MAZF,EACL,iBAAiB,GAWf,KAAK,kBAXU,EACjB,gBAAgB,GAUd,KAAK,iBAVS,EAChB,aAAa,GASX,KAAK,cATM,EACb,WAAW,GAQT,KAAK,YARI,EACX,kBAAkB,GAOhB,KAAK,mBAPW,EAClB,SAAS,GAMP,KAAK,UANE,EACT,IAAI,GAKF,KAAK,KALH,EACJ,UAAU,GAIR,KAAK,WAJG,EACV,OAAO,GAGL,KAAK,QAHA,EACP,QAAQ,GAEN,KAAK,SAFC,EACR,KACE,KAAK,IADM,EAAb,GAAG,mBAAG,OAAO,KAAA,CACL;IACV,IAAM,QAAQ,yBAAiC,yBAAyB,GAAK,OAAO,CAAE,CAAC;IACvF,IAAM,GAAG,GAAG,GAAG,CAAC;IAChB,IAAM,OAAO,GACX,iBAAiB,IAAI,gBAAgB,CAAC,CAAC,CAAC,CACtC,oBAAC,uBAAuB,IACtB,GAAG,EAAC,SAAS,EACb,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,aAAa,mCAAI,CAAC,EACvC,IAAI,EAAE,WAAW,EACjB,WAAW,EAAE,kBAAkB,EAC/B,IAAI,EAAE,IAAI,GACV,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ;QAC1C,oBAAC,aAAa,eAAK,KAAK;YACtB,oBAAC,GAAG,yBAAW,aAAa,CAAC,IAAI,IAAM,UAAU,IAAE,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC;gBACpF,oBAAC,gBAAgB,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAG;gBAC9D,8BAAM,SAAS,EAAE,YAAY,CAAC,KAAK,EAAE,IAAG,QAAQ,CAAQ;gBACxD,oBAAC,gBAAgB,IAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,GAAG,CAC9E,CACQ,CACY,CAC/B,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport type { CommonProps } from '../../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../../internal/CommonWrapper/index.js';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport { mergeRefs } from '../../../lib/mergeRefs.js';\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { InputDataTids } from '../Input.js';\nimport type { InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutAside } from './InputLayoutAside.js';\nimport { InputLayoutAsideCounter } from './InputLayoutAsideCounter.js';\nimport { InputLayoutContext, InputLayoutContextDefault } from './InputLayoutContext.js';\nimport type { InputLayoutContextProps } from './InputLayoutContext.js';\n\ntype InputLayoutRootFromInputProps = Pick<\n  InputProps,\n  | 'leftIcon'\n  | 'rightIcon'\n  | 'prefix'\n  | 'suffix'\n  | 'value'\n  | 'showLengthCounter'\n  | 'lengthCounter'\n  | 'counterHelp'\n  | 'maxLength'\n  | 'size'\n>;\n\nexport interface InputLayoutRootProps extends InputLayoutRootFromInputProps, CommonProps {\n  labelProps: React.LabelHTMLAttributes<HTMLLabelElement> & { ref?: React.Ref<HTMLLabelElement> };\n  context: Partial<InputLayoutContextProps>;\n  isCounterVisible?: boolean;\n  onCloseCounterHelp?: () => void;\n  tag?: 'label' | 'span';\n}\n\nexport const InputLayout = forwardRefAndName<HTMLLabelElement, InputLayoutRootProps>('InputLayout', (props, ref) => {\n  const stylesLayout = useStyles(getStylesLayout);\n  const {\n    leftIcon,\n    rightIcon,\n    prefix,\n    suffix,\n    value,\n    showLengthCounter,\n    isCounterVisible,\n    lengthCounter,\n    counterHelp,\n    onCloseCounterHelp,\n    maxLength,\n    size,\n    labelProps,\n    context,\n    children,\n    tag = 'label',\n  } = props;\n  const _context: InputLayoutContextProps = { ...InputLayoutContextDefault, ...context };\n  const Tag = tag;\n  const counter =\n    showLengthCounter && isCounterVisible ? (\n      <InputLayoutAsideCounter\n        key=\"counter\"\n        inputValue={value}\n        length={maxLength ?? lengthCounter ?? 0}\n        help={counterHelp}\n        onCloseHelp={onCloseCounterHelp}\n        size={size}\n      />\n    ) : undefined;\n\n  return (\n    <InputLayoutContext.Provider value={_context}>\n      <CommonWrapper {...props}>\n        <Tag data-tid={InputDataTids.root} {...labelProps} ref={mergeRefs(ref, labelProps.ref)}>\n          <InputLayoutAside icon={leftIcon} text={prefix} side=\"left\" />\n          <span className={stylesLayout.input()}>{children}</span>\n          <InputLayoutAside icon={rightIcon} text={suffix} counter={counter} side=\"right\" />\n        </Tag>\n      </CommonWrapper>\n    </InputLayoutContext.Provider>\n  );\n});\n"]}

package/components/Input/InputLayout/InputLayout.styles.d.ts

@@ -8,4 +8,10 @@ export declare const getStylesLayout: import("../../../lib/theming/Emotion.js").
     iconDisabled(t: Theme): string;
     text(t: Theme): string;
     textDisabled(t: Theme): string;
+    counter(t: Theme): string;
+    counterSmall(t: Theme): string;
+    counterMedium(t: Theme): string;
+    counterLarge(t: Theme): string;
+    counterError(t: Theme): string;
+    counterHelp(t: Theme): string;
 }>;

package/components/Input/InputLayout/InputLayout.styles.js

@@ -32,7 +32,25 @@ export var getStylesLayout = memoizeGetStyles(function (emotion) {
         textDisabled: function (t) {
             return emotion.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputPlaceholderColorDisabled);
         },
+        counter: function (t) {
+            return emotion.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        font-variant-numeric: tabular-nums;\n        color: ", ";\n      "], ["\n        font-variant-numeric: tabular-nums;\n        color: ", ";\n      "])), t.inputCounterColor);
+        },
+        counterSmall: function (t) {
+            return emotion.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        margin-left: ", ";\n      "], ["\n        margin-left: ", ";\n      "])), t.inputCounterMarginLeftSmall);
+        },
+        counterMedium: function (t) {
+            return emotion.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        margin-left: ", ";\n      "], ["\n        margin-left: ", ";\n      "])), t.inputCounterMarginLeftMedium);
+        },
+        counterLarge: function (t) {
+            return emotion.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        margin-left: ", ";\n      "], ["\n        margin-left: ", ";\n      "])), t.inputCounterMarginLeftLarge);
+        },
+        counterError: function (t) {
+            return emotion.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputCounterColorError);
+        },
+        counterHelp: function (t) {
+            return emotion.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n        margin-left: ", ";\n      "], ["\n        margin-left: ", ";\n      "])), t.inputCounterHelpMarginLeft);
+        },
     };
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
 //# sourceMappingURL=InputLayout.styles.js.map

package/components/Input/InputLayout/InputLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLayout.styles.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayout.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,IAAM,eAAe,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IAC/D,IAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAElC,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,0MAAA,uIAMjB,KAAC;QACJ,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,iOAAA,qIAMF,EAAoB,uBAEnC,KAFe,oBAAoB,EAElC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAgB,WAC1B,KADU,CAAC,CAAC,cAAc,EACzB;QACJ,CAAC;QACD,SAAS,YAAC,CAAQ;YAChB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,6HAAA,6CAEP,EAAwB,WAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAA+B,WACzC,KADU,CAAC,CAAC,6BAA6B,EACxC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars.js';\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\nimport { getStyles } from '../Input.styles.js';\n\nexport const getStylesLayout = memoizeGetStyles((emotion: Emotion) => {\n  const styles = getStyles(emotion);\n\n  return {\n    root(t: Theme) {\n      return styles.root(t);\n    },\n    input() {\n      return emotion.css`\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      `;\n    },\n    aside() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '${ZERO_WIDTH_SPACE_CSS}';\n        }\n      `;\n    },\n    icon(t: Theme) {\n      return emotion.css`\n        color: ${t.inputIconColor};\n      `;\n    },\n    iconFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.inputFocusedIconColor};\n      `;\n    },\n    iconDisabled(t: Theme) {\n      return emotion.css`\n        cursor: default;\n        color: ${t.inputIconColorDisabled};\n      `;\n    },\n    text(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColor};\n      `;\n    },\n    textDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorDisabled};\n      `;\n    },\n  };\n});\n"]}
+{"version":3,"file":"InputLayout.styles.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayout.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,IAAM,eAAe,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IAC/D,IAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAElC,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,0MAAA,uIAMjB,KAAC;QACJ,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,iOAAA,qIAMF,EAAoB,uBAEnC,KAFe,oBAAoB,EAElC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAgB,WAC1B,KADU,CAAC,CAAC,cAAc,EACzB;QACJ,CAAC;QACD,SAAS,YAAC,CAAQ;YAChB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,6HAAA,6CAEP,EAAwB,WAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAA+B,WACzC,KADU,CAAC,CAAC,6BAA6B,EACxC;QACJ,CAAC;QACD,OAAO,YAAC,CAAQ;YACd,OAAO,OAAO,CAAC,GAAG,gJAAA,gEAEP,EAAmB,WAC7B,KADU,CAAC,CAAC,iBAAiB,EAC5B;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,yGAAA,yBACD,EAA6B,WAC7C,KADgB,CAAC,CAAC,2BAA2B,EAC5C;QACJ,CAAC;QACD,aAAa,YAAC,CAAQ;YACpB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA8B,WAC9C,KADgB,CAAC,CAAC,4BAA4B,EAC7C;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA6B,WAC7C,KADgB,CAAC,CAAC,2BAA2B,EAC5C;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,qGAAA,mBACP,EAAwB,WAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;QACD,WAAW,YAAC,CAAQ;YAClB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA4B,WAC5C,KADgB,CAAC,CAAC,0BAA0B,EAC3C;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars.js';\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\nimport { getStyles } from '../Input.styles.js';\n\nexport const getStylesLayout = memoizeGetStyles((emotion: Emotion) => {\n  const styles = getStyles(emotion);\n\n  return {\n    root(t: Theme) {\n      return styles.root(t);\n    },\n    input() {\n      return emotion.css`\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      `;\n    },\n    aside() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '${ZERO_WIDTH_SPACE_CSS}';\n        }\n      `;\n    },\n    icon(t: Theme) {\n      return emotion.css`\n        color: ${t.inputIconColor};\n      `;\n    },\n    iconFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.inputFocusedIconColor};\n      `;\n    },\n    iconDisabled(t: Theme) {\n      return emotion.css`\n        cursor: default;\n        color: ${t.inputIconColorDisabled};\n      `;\n    },\n    text(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColor};\n      `;\n    },\n    textDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorDisabled};\n      `;\n    },\n    counter(t: Theme) {\n      return emotion.css`\n        font-variant-numeric: tabular-nums;\n        color: ${t.inputCounterColor};\n      `;\n    },\n    counterSmall(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.inputCounterMarginLeftSmall};\n      `;\n    },\n    counterMedium(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.inputCounterMarginLeftMedium};\n      `;\n    },\n    counterLarge(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.inputCounterMarginLeftLarge};\n      `;\n    },\n    counterError(t: Theme) {\n      return emotion.css`\n        color: ${t.inputCounterColorError};\n      `;\n    },\n    counterHelp(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.inputCounterHelpMarginLeft};\n      `;\n    },\n  };\n});\n"]}

package/components/Input/InputLayout/InputLayoutAside.d.ts

@@ -1,8 +1,10 @@
+import type { ReactElement } from 'react';
 import React from 'react';
 import type { InputProps } from '../Input.js';
 export interface InputLayoutAsideProps {
     icon: InputProps['leftIcon'] | InputProps['rightIcon'];
     text: InputProps['prefix'] | InputProps['suffix'];
+    counter?: ReactElement;
     side: 'left' | 'right';
 }
 export declare const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps>;

package/components/Input/InputLayout/InputLayoutAside.js

@@ -4,12 +4,12 @@ import { getStylesLayout } from './InputLayout.styles.js';
 import { InputLayoutAsideIcon } from './InputLayoutAsideIcon.js';
 import { InputLayoutAsideText } from './InputLayoutAsideText.js';
 export var InputLayoutAside = function (_a) {
-    var icon = _a.icon, text = _a.text, side = _a.side;
+    var icon = _a.icon, text = _a.text, counter = _a.counter, side = _a.side;
     var stylesLayout = useStyles(getStylesLayout);
     var asideClassName = stylesLayout.aside();
     var _icon = React.createElement(InputLayoutAsideIcon, { key: "icon", icon: icon, side: side });
     var _text = React.createElement(InputLayoutAsideText, { key: "text", text: text });
-    var child = side === 'left' ? [_icon, _text] : [_text, _icon];
+    var child = side === 'left' ? [_icon, _text] : [_text, counter, _icon];
     return React.createElement("span", { className: asideClassName }, child);
 };
 //# sourceMappingURL=InputLayoutAside.js.map

package/components/Input/InputLayout/InputLayoutAside.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLayoutAside.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayoutAside.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAQjE,MAAM,CAAC,IAAM,gBAAgB,GAAmD,UAAC,EAAoB;QAAlB,IAAI,UAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA;IACjG,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAChD,IAAM,cAAc,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;IAE5C,IAAM,KAAK,GAAG,oBAAC,oBAAoB,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;IAC1E,IAAM,KAAK,GAAG,oBAAC,oBAAoB,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IAE9D,IAAM,KAAK,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEhE,OAAO,8BAAM,SAAS,EAAE,cAAc,IAAG,KAAK,CAAQ,CAAC;AACzD,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport type { InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon.js';\nimport { InputLayoutAsideText } from './InputLayoutAsideText.js';\n\nexport interface InputLayoutAsideProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  text: InputProps['prefix'] | InputProps['suffix'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon, text, side }) => {\n  const stylesLayout = useStyles(getStylesLayout);\n  const asideClassName = stylesLayout.aside();\n\n  const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n  const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n  const child = side === 'left' ? [_icon, _text] : [_text, _icon];\n\n  return <span className={asideClassName}>{child}</span>;\n};\n"]}
+{"version":3,"file":"InputLayoutAside.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayoutAside.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AASjE,MAAM,CAAC,IAAM,gBAAgB,GAAmD,UAAC,EAA6B;QAA3B,IAAI,UAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,IAAI,UAAA;IAC1G,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAChD,IAAM,cAAc,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;IAE5C,IAAM,KAAK,GAAG,oBAAC,oBAAoB,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;IAC1E,IAAM,KAAK,GAAG,oBAAC,oBAAoB,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IAE9D,IAAM,KAAK,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IAEzE,OAAO,8BAAM,SAAS,EAAE,cAAc,IAAG,KAAK,CAAQ,CAAC;AACzD,CAAC,CAAC","sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\n\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport type { InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon.js';\nimport { InputLayoutAsideText } from './InputLayoutAsideText.js';\n\nexport interface InputLayoutAsideProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  text: InputProps['prefix'] | InputProps['suffix'];\n  counter?: ReactElement;\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon, text, counter, side }) => {\n  const stylesLayout = useStyles(getStylesLayout);\n  const asideClassName = stylesLayout.aside();\n\n  const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n  const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n  const child = side === 'left' ? [_icon, _text] : [_text, counter, _icon];\n\n  return <span className={asideClassName}>{child}</span>;\n};\n"]}

package/components/Input/InputLayout/InputLayoutAsideCounter.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SizeProp } from '../../../lib/types/props.js';
+import { type InputProps } from '../Input.js';
+export interface InputLayoutAsideCounterProps {
+    length: number;
+    inputValue: InputProps['value'];
+    help: InputProps['counterHelp'];
+    onCloseHelp?: () => void;
+    size?: SizeProp;
+}
+export declare const InputLayoutAsideCounter: React.FunctionComponent<InputLayoutAsideCounterProps>;

package/components/Input/InputLayout/InputLayoutAsideCounter.js

@@ -0,0 +1,74 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useCallback } from 'react';
+import { Tooltip } from '../../../components/Tooltip/Tooltip.js';
+import { QuestionCircleIcon16Light } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Light.js';
+import { QuestionCircleIcon20Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon20Regular.js';
+import { QuestionCircleIcon24Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon24Regular.js';
+import { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+import { isFunction } from '../../../lib/utils.js';
+import { InputDataTids } from '../Input.js';
+import { getStylesLayout } from './InputLayout.styles.js';
+var handleHelpMouseDown = function (e) { return e.preventDefault(); };
+export var InputLayoutAsideCounter = function (_a) {
+    var _b;
+    var length = _a.length, inputValue = _a.inputValue, help = _a.help, onCloseHelp = _a.onCloseHelp, size = _a.size;
+    var theme = React.useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var stylesLayout = useStyles(getStylesLayout);
+    var renderTooltipContent = useCallback(function () {
+        if (typeof help === 'function') {
+            return help();
+        }
+        return help;
+    }, [help]);
+    var getHelpIcon = function () {
+        switch (size) {
+            case 'large':
+                return React.createElement(QuestionCircleIcon24Regular, __assign({}, helpIconProps));
+            case 'medium':
+                return React.createElement(QuestionCircleIcon20Regular, __assign({}, helpIconProps));
+            case 'small':
+            default:
+                return React.createElement(QuestionCircleIcon16Light, __assign({}, helpIconProps));
+        }
+    };
+    var helpIconProps = {
+        onMouseDown: handleHelpMouseDown,
+        color: theme.inputCounterHelpIconColor,
+        'data-tid': InputDataTids.counterHelpIcon,
+        style: { cursor: 'pointer' },
+    };
+    var counterHelp = isFunction(help) ? (help()) : (React.createElement(Tooltip, { pos: 'right bottom', trigger: 'click', render: renderTooltipContent, onCloseClick: onCloseHelp, size: size }, getHelpIcon()));
+    var asideClassName = stylesLayout.aside();
+    var getCounterSizeClassName = function () {
+        switch (size) {
+            case 'large':
+                return stylesLayout.counterLarge(theme);
+            case 'medium':
+                return stylesLayout.counterMedium(theme);
+            case 'small':
+            default:
+                return stylesLayout.counterSmall(theme);
+        }
+    };
+    var inputValueLength = inputValue ? inputValue.length : 0;
+    var counterValue = length - inputValueLength;
+    var isNegativeValue = counterValue < 0;
+    return (React.createElement("span", { "data-tid": InputDataTids.counter, className: cx(asideClassName, getCounterSizeClassName(), stylesLayout.counter(theme), (_b = {},
+            _b[stylesLayout.counterError(theme)] = isNegativeValue,
+            _b)) },
+        isNegativeValue ? "\u2013".concat(-counterValue) : counterValue,
+        help && React.createElement("span", { className: stylesLayout.counterHelp(theme) }, counterHelp)));
+};
+//# sourceMappingURL=InputLayoutAsideCounter.js.map

package/components/Input/InputLayout/InputLayoutAsideCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLayoutAsideCounter.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayoutAsideCounter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { SyntheticEvent } from 'react';\nimport React, { useCallback } from 'react';\n\nimport { Tooltip } from '../../../components/Tooltip/Tooltip.js';\nimport { QuestionCircleIcon16Light } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Light.js';\nimport { QuestionCircleIcon20Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon20Regular.js';\nimport { QuestionCircleIcon24Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon24Regular.js';\nimport { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport { isFunction } from '../../../lib/utils.js';\nimport { InputDataTids, type InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\n\nexport interface InputLayoutAsideCounterProps {\n  length: number;\n  inputValue: InputProps['value'];\n  help: InputProps['counterHelp'];\n  onCloseHelp?: () => void;\n  size?: SizeProp;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const InputLayoutAsideCounter: React.FunctionComponent<InputLayoutAsideCounterProps> = ({\n  length,\n  inputValue,\n  help,\n  onCloseHelp,\n  size,\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const stylesLayout = useStyles(getStylesLayout);\n\n  const renderTooltipContent = useCallback(() => {\n    if (typeof help === 'function') {\n      return help();\n    }\n    return help;\n  }, [help]);\n\n  const getHelpIcon = () => {\n    switch (size) {\n      case 'large':\n        return <QuestionCircleIcon24Regular {...helpIconProps} />;\n      case 'medium':\n        return <QuestionCircleIcon20Regular {...helpIconProps} />;\n      case 'small':\n      default:\n        return <QuestionCircleIcon16Light {...helpIconProps} />;\n    }\n  };\n  const helpIconProps = {\n    onMouseDown: handleHelpMouseDown,\n    color: theme.inputCounterHelpIconColor,\n    'data-tid': InputDataTids.counterHelpIcon,\n    style: { cursor: 'pointer' },\n  };\n  const counterHelp = isFunction(help) ? (\n    help()\n  ) : (\n    <Tooltip\n      pos={'right bottom'}\n      trigger={'click'}\n      render={renderTooltipContent}\n      onCloseClick={onCloseHelp}\n      size={size}\n    >\n      {getHelpIcon()}\n    </Tooltip>\n  );\n\n  const asideClassName = stylesLayout.aside();\n  const getCounterSizeClassName = () => {\n    switch (size) {\n      case 'large':\n        return stylesLayout.counterLarge(theme);\n      case 'medium':\n        return stylesLayout.counterMedium(theme);\n      case 'small':\n      default:\n        return stylesLayout.counterSmall(theme);\n    }\n  };\n\n  const inputValueLength = inputValue ? inputValue.length : 0;\n  const counterValue = length - inputValueLength;\n  const isNegativeValue = counterValue < 0;\n\n  return (\n    <span\n      data-tid={InputDataTids.counter}\n      className={cx(asideClassName, getCounterSizeClassName(), stylesLayout.counter(theme), {\n        [stylesLayout.counterError(theme)]: isNegativeValue,\n      })}\n    >\n      {isNegativeValue ? `–${-counterValue}` : counterValue}\n      {help && <span className={stylesLayout.counterHelp(theme)}>{counterHelp}</span>}\n    </span>\n  );\n};\n"]}

package/components/Loader/Loader.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import type { CommonProps } from '../../internal/CommonWrapper/index.js';
 import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { SizeProp } from '../../lib/types/props.js';
 import type { AnyObject } from '../../lib/utils.js';
 import type { SpinnerProps } from '../Spinner/index.js';
 declare const types: readonly ["mini", "normal", "big"];
+/** @deprecated Начиная с версии `6.1`, тип и проп устарели в пользу `SizeContext`. Они будут удалены в `7.0`.
+ * @see {@link SizeProp} */
 export type LoaderType = (typeof types)[number];
 export interface LoaderProps extends CommonProps {
     /** @ignore */
@@ -12,13 +15,16 @@ export interface LoaderProps extends CommonProps {
      * @default false */
     active?: boolean;
     /** Подпись под спиннером.
-     * @default  ""
-     */
+     * @default "" */
     caption?: SpinnerProps['caption'];
     /** Задает компонент, заменяющий спиннер. */
     component?: React.ReactNode;
     /** Размер спиннера и текста.
-     * @default normal. */
+     * @default small */
+    size?: SizeProp;
+    /** Размер спиннера и текста.
+     * @deprecated Начиная с версии `6.1`, тип и проп устарели в пользу нового `SizeContext`. Они будут удалены в `7.0`.
+     * @see {@link size} */
     type?: LoaderType;
     /** Время в миллисекундах для показа вуали без спиннера.
      * @default 300 */
@@ -38,7 +44,7 @@ export declare const LoaderDataTids: {
     readonly veil: "Loader__Veil";
     readonly spinner: "Loader__Spinner";
 };
-type DefaultProps = Required<Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>>;
+type DefaultProps = Required<Pick<LoaderProps, 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>>;
 /**
  * С помощью лоадера можно отобразить процесс выполнения задачи.
  * Лоадер принимает в качестве дочернего элемента другой компонент или контент, который будет показан на экране.
@@ -54,6 +60,7 @@ export declare class Loader extends React.Component<LoaderProps, LoaderState> {
     private cx;
     private styles;
     private theme;
+    private size;
     getRootNode: TGetRootNode;
     private setRootNode;
     private spinnerContainerNode;
@@ -77,5 +84,6 @@ export declare class Loader extends React.Component<LoaderProps, LoaderState> {
     private enableChildrenFocus;
     private makeObservable;
     private makeUnobservable;
+    private typeToSize;
 }
 export {};

package/components/Loader/Loader.js

@@ -42,6 +42,7 @@ import { isBrowser } from '../../lib/globalObject.js';
 import * as LayoutEvents from '../../lib/LayoutEvents.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
+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';
@@ -162,6 +163,16 @@ var Loader = /** @class */ (function (_super) {
             (_a = _this.childrenObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             _this.childrenObserver = null;
         };
+        _this.typeToSize = function (type) {
+            switch (type) {
+                case 'mini':
+                    return 'small';
+                case 'normal':
+                    return 'medium';
+                case 'big':
+                    return 'large';
+            }
+        };
         _this.spinnerContainerNode = null;
         _this.childrenContainerNode = null;
         _this.childrenObserver = null;
@@ -246,17 +257,17 @@ var Loader = /** @class */ (function (_super) {
     };
     Loader.prototype.renderMain = function () {
         var _a;
-        var _b = this.props, caption = _b.caption, component = _b.component;
-        var type = this.getProps().type;
+        var _b = this.props, caption = _b.caption, component = _b.component, size = _b.size, type = _b.type;
         var isLoaderActive = this.state.isLoaderActive;
+        var parsedSize = size || !type ? this.size : this.typeToSize(type);
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
             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(this.theme)] = isLoaderActive,
-                        _a)) }, this.state.isSpinnerVisible && this.renderSpinner(type, caption, component))))));
+                        _a)) }, this.state.isSpinnerVisible && this.renderSpinner(parsedSize, caption, component))))));
     };
-    Loader.prototype.renderSpinner = function (type, caption, component) {
+    Loader.prototype.renderSpinner = function (size, caption, component) {
         var _a;
         var _this = this;
         return (React.createElement("span", { "data-tid": LoaderDataTids.spinner, className: this.cx(this.styles.spinnerContainer(), (_a = {},
@@ -264,20 +275,20 @@ var Loader = /** @class */ (function (_super) {
                 _a)), style: this.state.spinnerStyle },
             React.createElement("div", { className: this.styles.spinnerComponentWrapper(), ref: function (element) {
                     _this.spinnerNode = element;
-                } }, component !== undefined ? component : React.createElement(Spinner, { type: type, caption: caption }))));
+                } }, component !== undefined ? component : React.createElement(Spinner, { size: size, caption: caption }))));
     };
     var Loader_1;
     Loader.__KONTUR_REACT_UI__ = 'Loader';
     Loader.displayName = 'Loader';
     Loader.defaultProps = {
-        type: 'normal',
         active: false,
         delayBeforeSpinnerShow: isTestEnv ? 0 : 300,
         minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000,
     };
     Loader = Loader_1 = __decorate([
         withRenderEnvironment,
-        rootNode
+        rootNode,
+        withSize
     ], Loader);
     return Loader;
 }(React.Component));

package/components/Loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../components/Loader/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 { TaskWithDelayAndMinimalDuration } from '../../lib/taskWithDelayAndMinimalDuration.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.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\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   */\n  caption?: SpinnerProps['caption'];\n\n  /** Задает компонент, заменяющий спиннер. */\n  component?: React.ReactNode;\n\n  /** Размер спиннера и текста.\n   * @default normal. */\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<\n  Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>\n>;\n\n/**\n * С помощью лоадера можно отобразить процесс выполнения задачи.\n * Лоадер принимает в качестве дочернего элемента другой компонент или контент, который будет показан на экране.\n * Когда происходит загрузка, поверх этого компонента или контента будет отображаться [Спиннер](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-spinner--docs).\n */\n@withRenderEnvironment\n@rootNode\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    type: 'normal',\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  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 } = this.props;\n    const type = this.getProps().type;\n    const { isLoaderActive } = this.state;\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(type, 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(type?: LoaderType, 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 type={type} 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"]}
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../components/Loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,KAAK,YAAY,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,+BAA+B,EAAE,MAAM,8CAA8C,CAAC;AAE/F,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAIjE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,IAAM,KAAK,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AA8CjD,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,iBAAiB;CAClB,CAAC;AAIX;;;;GAIG;AAIH;IAA4B,0BAAyC;IA2BnE,gBAAY,KAAkB;QAC5B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAlBP,cAAQ,GAAG,iBAAiB,CAAC,QAAM,CAAC,YAAY,CAAC,CAAC;QAwJlD,iBAAW,GAAG,UAAC,OAA8B;YACnD,KAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;QACvC,CAAC,CAAC;QAEM,gBAAU,GAAG,UAAC,OAA8B;YAClD,KAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;QACtC,CAAC,CAAC;QAuBM,0BAAoB,GAAG;YAC7B,IAAI,CAAC,KAAI,CAAC,oBAAoB,IAAI,CAAC,SAAS,CAAC,KAAI,CAAC,YAAY,CAAC,EAAE,CAAC;gBAChE,OAAO;YACT,CAAC;YAEK,IAAA,KAOF,UAAU,CAAC,KAAI,CAAC,oBAAoB,CAAC,EANlC,YAAY,SAAA,EACV,cAAc,WAAA,EACb,eAAe,YAAA,EACjB,aAAa,UAAA,EACX,eAAe,YAAA,EAChB,cAAc,WACkB,CAAC;YAE1C,IAAM,YAAY,GAAG,KAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YACnD,IAAM,WAAW,GAAG,KAAI,CAAC,YAAY,CAAC,UAAU,CAAC;YAEjD,kDAAkD;YAClD,kCAAkC;YAClC,IAAI,YAAY,IAAI,eAAe,IAAI,WAAW,IAAI,cAAc,EAAE,CAAC;gBACrE,KAAI,CAAC,QAAQ,CAAC;oBACZ,eAAe,EAAE,KAAK;oBACtB,YAAY,EAAE,EAAE;iBACjB,CAAC,CAAC;gBACH,OAAO;YACT,CAAC;YAED,IAAM,YAAY,GAKd;gBACF,GAAG,EAAE,EAAE;gBACP,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,EAAE;gBACV,IAAI,EAAE,CAAC;aACR,CAAC;YAEF,eAAe;YACf,wDAAwD;YACxD,uBAAuB;YACvB,IAAI,YAAY,GAAG,CAAC,EAAE,CAAC;gBACrB,YAAY,CAAC,GAAG,GAAG,YAAY,GAAG,EAAE,CAAC;YACvC,CAAC;YAED,sDAAsD;YACtD,uBAAuB;YACvB,IAAI,eAAe,GAAG,YAAY,EAAE,CAAC;gBACnC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC;YACtE,CAAC;YAED,kEAAkE;YAClE,sEAAsE;YAEtE,IAAM,aAAa,GAAG,UAAU,CAAC,KAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;YAE1D,IAAI,aAAa,IAAI,YAAY,CAAC,MAAM,IAAI,YAAY,GAAG,aAAa,EAAE,CAAC;gBACzE,OAAO,YAAY,CAAC,GAAG,CAAC;YAC1B,CAAC;YAED,iBAAiB;YACjB,sDAAsD;YACtD,uBAAuB;YACvB,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;gBACtB,YAAY,CAAC,IAAI,GAAG,aAAa,CAAC;YACpC,CAAC;YAED,uDAAuD;YACvD,uBAAuB;YACvB,IAAI,cAAc,GAAG,WAAW,EAAE,CAAC;gBACjC,YAAY,CAAC,KAAK,GAAG,WAAW,GAAG,cAAc,CAAC;YACpD,CAAC;YAED,KAAI,CAAC,QAAQ,CAAC;gBACZ,eAAe,EAAE,IAAI;gBACrB,YAAY,cAAA;aACb,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,0BAAoB,GAAG;YAC7B,IAAI,CAAC,KAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,KAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;YACD,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,KAAI,CAAC,qBAAqB,CAAC,CAAC;YACzE,gBAAgB,CAAC,OAAO,CAAC,UAAC,EAAE;gBAC1B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC;oBACxC,EAAE,CAAC,YAAY,CAAC,iBAAiB,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAC7D,CAAC;gBACD,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACnB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,yBAAmB,GAAG;;YAC5B,KAAI,CAAC,gBAAgB,EAAE,CAAC;YAExB,MAAA,KAAI,CAAC,YAAY,CAAC,QAAQ,0CAAE,gBAAgB,CAAC,mBAAmB,EAAE,OAAO,CAAC,UAAC,EAAE;;gBAC3E,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,MAAA,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,mCAAI,GAAG,CAAC,CAAC;gBACvE,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;YACxC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,oBAAc,GAAG;YACvB,IAAM,MAAM,GAAG,KAAI,CAAC,qBAAqB,CAAC;YAC1C,IAAI,CAAC,MAAM,IAAI,CAAC,KAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;gBACnD,OAAO;YACT,CAAC;YACD,IAAM,MAAM,GAAG;gBACb,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI;aACd,CAAC;YACF,IAAM,QAAQ,GAAG,IAAI,KAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,KAAI,CAAC,oBAAoB,CAAC,CAAC;YACnF,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACjC,KAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACnC,CAAC,CAAC;QAEM,sBAAgB,GAAG;;YACzB,MAAA,KAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;YACpC,KAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC/B,CAAC,CAAC;QAEM,gBAAU,GAAG,UAAC,IAAgB;YACpC,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,MAAM;oBACT,OAAO,OAAO,CAAC;gBACjB,KAAK,QAAQ;oBACX,OAAO,QAAQ,CAAC;gBAClB,KAAK,KAAK;oBACR,OAAO,OAAO,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAnSA,KAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACjC,KAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;QAClC,KAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,KAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAExB,KAAI,CAAC,KAAK,GAAG;YACX,eAAe,EAAE,KAAK;YACtB,gBAAgB,EAAE,KAAK;YACvB,cAAc,EAAE,KAAK;SACtB,CAAC;;IACJ,CAAC;eAxCU,MAAM;IA0CV,kCAAiB,GAAxB;QAAA,iBAeC;QAdC,IAAI,CAAC,WAAW,GAAG,IAAI,+BAA+B,CAAC;YACrD,oBAAoB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,sBAAsB;YAC5D,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,6BAA6B;YAC7D,iBAAiB,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,EAAzC,CAAyC;YAClE,gBAAgB,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,EAA1C,CAA0C;SACnE,CAAC,CAAC;QACH,IAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC;QACtC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACnC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAEzG,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAEM,mCAAkB,GAAzB,UAA0B,SAAgC,EAAE,SAAgC;QAClF,IAAA,SAAS,GAAK,IAAI,CAAC,KAAK,UAAf,CAAgB;QAC3B,IAAA,KAAoE,IAAI,CAAC,QAAQ,EAAE,EAAjF,MAAM,YAAA,EAAE,sBAAsB,4BAAA,EAAE,6BAA6B,mCAAoB,CAAC;QAClF,IAAA,cAAc,GAAK,IAAI,CAAC,KAAK,eAAf,CAAgB;QAEtC,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YACvE,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;QAED,IACE,sBAAsB,KAAK,SAAS,CAAC,sBAAsB;YAC3D,6BAA6B,KAAK,SAAS,CAAC,6BAA6B,EACzE,CAAC;YACD,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;gBACtB,oBAAoB,EAAE,sBAAsB;gBAC5C,cAAc,EAAE,6BAA6B;aAC9C,CAAC,CAAC;QACL,CAAC;QAED,IAAI,MAAM,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;YAChC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC9D,CAAC;QAED,IAAI,cAAc,KAAK,SAAS,CAAC,cAAc,EAAE,CAAC;YAChD,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,CAAC;QACH,CAAC;IACH,CAAC;IAEM,qCAAoB,GAA3B;QACE,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC;IAC/B,CAAC;IAEa,+BAAwB,GAAtC,UAAuC,KAAkB,EAAE,KAAkB;QAC3E,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YAC1C,OAAO;gBACL,cAAc,EAAE,IAAI;aACrB,CAAC;QACJ,CAAC;QACD,IAAI,KAAK,CAAC,cAAc,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACtE,OAAO;gBACL,cAAc,EAAE,KAAK;aACtB,CAAC;QACJ,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,uBAAM,GAAb;QAAA,iBAWC;QAVC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,KAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEO,2BAAU,GAAlB;;QACQ,IAAA,KAAqC,IAAI,CAAC,KAAK,EAA7C,OAAO,aAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAe,CAAC;QAC9C,IAAA,cAAc,GAAK,IAAI,CAAC,KAAK,eAAf,CAAgB;QAEtC,IAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAErE,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK;YAC1D,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,cACrB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC;gBAEhG,oBAAC,MAAM,IACL,WAAW,EAAE,cAAc,EAC3B,aAAa,EAAE,cAAc,EAC7B,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EACzB,UAAU,EAAE,IAAI,CAAC,WAAW,IAE3B,IAAI,CAAC,KAAK,CAAC,QAAQ,CACb;gBACR,cAAc,IAAI,CACjB,oBAAC,MAAM,IACL,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,EAAE;wBAChB,GAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,cAAc;4BAChD,IAED,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAC3E,CACV,CACG,CACQ,CACjB,CAAC;IACJ,CAAC;IAUO,8BAAa,GAArB,UAAsB,IAAe,EAAE,OAAyB,EAAE,SAA2B;;QAA7F,iBAmBC;QAlBC,OAAO,CACL,0CACY,cAAc,CAAC,OAAO,EAChC,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE;gBAC/C,GAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,EAAE,IAAG,IAAI,CAAC,KAAK,CAAC,eAAe;oBAClE,EACF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY;YAE9B,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,uBAAuB,EAAE,EAChD,GAAG,EAAE,UAAC,OAAO;oBACX,KAAI,CAAC,WAAW,GAAG,OAAO,CAAC;gBAC7B,CAAC,IAEA,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAC5E,CACD,CACR,CAAC;IACJ,CAAC;;IA5La,0BAAmB,GAAG,QAAQ,AAAX,CAAY;IAC/B,kBAAW,GAAG,QAAQ,AAAX,CAAY;IAEvB,mBAAY,GAAiB;QACzC,MAAM,EAAE,KAAK;QACb,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAC3C,6BAA6B,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;KACpD,AAJyB,CAIxB;IARS,MAAM;QAHlB,qBAAqB;QACrB,QAAQ;QACR,QAAQ;OACI,MAAM,CAkUlB;IAAD,aAAC;CAAA,AAlUD,CAA4B,KAAK,CAAC,SAAS,GAkU1C;SAlUY,MAAM","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.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 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/MenuItem/MenuItem.d.ts

@@ -85,6 +85,7 @@ export declare class MenuItem extends React.Component<MenuItemProps> {
     select: (event: React.SyntheticEvent<HTMLElement>) => void;
     isEnabled: () => boolean;
     navigate: () => void;
+    private getRootMobileSizeClassName;
     private getRootSizeClassName;
     private getIconSizeClassName;
     private getWithIconSizeClassName;

package/components/MenuItem/MenuItem.js

@@ -51,6 +51,7 @@ import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { withSize } from '../../lib/size/SizeDecorator.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';
 import { isExternalLink, isFunction, isNonNullable, isReactUIComponent } from '../../lib/utils.js';
 import { getStyles } from './MenuItem.styles.js';
 export var MenuItemDataTids = {
@@ -109,7 +110,7 @@ var MenuItem = /** @class */ (function (_super) {
             var className = _this.cx((_b = {},
                 _b[_this.styles.root(_this.theme)] = true,
                 _b[_this.getRootSizeClassName()] = true,
-                _b[_this.styles.rootMobile(_this.theme)] = isMobile,
+                _b[_this.getRootMobileSizeClassName()] = isMobile,
                 _b[_this.styles.loose()] = !!loose,
                 _b[_this.styles.hover(_this.theme)] = _this.isHover,
                 _b[_this.styles.selected(_this.theme)] = _this.isSelected,
@@ -237,6 +238,21 @@ var MenuItem = /** @class */ (function (_super) {
             }
         }
     };
+    MenuItem.prototype.getRootMobileSizeClassName = function () {
+        var themeGTE6_1 = isThemeGTE(this.theme, '6.1');
+        if (!themeGTE6_1) {
+            return this.styles.rootMobile(this.theme);
+        }
+        switch (this.props.size) {
+            case 'large':
+                return this.styles.rootMobileLarge(this.theme);
+            case 'medium':
+                return this.styles.rootMobileMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.rootMobileSmall(this.theme);
+        }
+    };
     MenuItem.prototype.getRootSizeClassName = function () {
         switch (this.size) {
             case 'large':