@skbkontur/react-ui 5.6.1-9a162.0 → 5.6.1-e2bc4.0

package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.js

@@ -0,0 +1,237 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { InputLayout } from '../../components/Input/InputLayout/InputLayout.js';
+import { DEFAULT_WIDTH, Textarea } from '../../components/Textarea/index.js';
+import { getStyles as getTextareaStyles } from '../../components/Textarea/Textarea.styles.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
+import { getStyles as getInputStyles } from '../../components/Input/Input.styles.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { isTestEnv } from '../../lib/currentEnvironment.js';
+import { calculateClearCrossShowedState, InputDataTids } from '../../components/Input/index.js';
+import { ClearCrossIcon } from '../ClearCrossIcon/ClearCrossIcon.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from './InternalTextareaWithLayout.styles.js';
+var InternalTextareaWithLayout = /** @class */ (function (_super) {
+    __extends(InternalTextareaWithLayout, _super);
+    function InternalTextareaWithLayout() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.wrappedComponentRef = React.createRef();
+        _this.getProps = createPropsGetter(Textarea.defaultProps);
+        _this.getClearCrossShowed = function (_a) {
+            var focused = _a.focused, hovered = _a.hovered;
+            if (_this.props.disabled) {
+                return false;
+            }
+            return calculateClearCrossShowedState({
+                showClearIcon: _this.getProps().showClearIcon || 'never',
+                notEmptyValue: Boolean(_this.props.value),
+                focused: focused,
+                hovered: hovered,
+            });
+        };
+        _this.state = {
+            focused: false,
+            hovered: false,
+            clearCrossShowed: _this.getClearCrossShowed({ focused: false }),
+        };
+        _this.handleClearInput = function () {
+            if (_this.wrappedComponentRef.current) {
+                _this.wrappedComponentRef.current.clear();
+                if (!_this.state.focused) {
+                    _this.wrappedComponentRef.current.focus();
+                }
+            }
+            if (_this.props.onValueChange) {
+                _this.props.onValueChange('');
+            }
+        };
+        _this.getRightIcon = function () {
+            var _a = _this.props, size = _a.size, rightIcon = _a.rightIcon;
+            return _this.state.clearCrossShowed ? (React.createElement(ClearCrossIcon, { "data-tid": InputDataTids.clearCross, size: size, onClick: _this.handleClearInput })) : (rightIcon);
+        };
+        _this.handleMouseEnter = function () {
+            _this.setState({ clearCrossShowed: _this.getClearCrossShowed({ focused: _this.state.focused, hovered: true }) });
+        };
+        _this.handleMouseOut = function () {
+            _this.setState({ clearCrossShowed: _this.getClearCrossShowed({ focused: _this.state.focused, hovered: false }) });
+        };
+        _this.renderLayout = function () {
+            var _a;
+            var labelProps = {
+                className: _this.cx(_this.styles.contentWrapper(), _this.textareaStyles.textarea(_this.theme), _this.getTextareaSizeClassName(), _this.getRootSizeClassName(), (_a = {},
+                    _a[_this.inputStyles.focus(_this.theme)] = _this.state.focused && !_this.props.warning && !_this.props.error,
+                    _a[_this.inputStyles.borderless()] = _this.props.borderless && !_this.state.focused,
+                    _a[_this.textareaStyles.disabled(_this.theme)] = _this.props.disabled,
+                    _a[_this.textareaStyles.warning(_this.theme)] = _this.props.warning,
+                    _a[_this.textareaStyles.error(_this.theme)] = _this.props.error,
+                    _a)),
+                style: { width: _this.props.width || DEFAULT_WIDTH, minWidth: '0', position: 'relative' },
+                onMouseEnter: _this.handleMouseEnter,
+                onMouseLeave: _this.handleMouseOut,
+                onClick: _this.handleLayoutClick,
+            };
+            return (React.createElement(InputLayout, { leftIcon: _this.props.leftIcon, rightIcon: _this.getRightIcon(), labelProps: labelProps, context: { disabled: _this.props.disabled, focused: _this.state.focused, size: _this.getProps().size }, tag: "span" }, _this.renderTextarea()));
+        };
+        _this.renderTextarea = function () {
+            var _a = _this.props, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, borderless = _a.borderless, textareaProps = __rest(_a, ["leftIcon", "rightIcon", "borderless"]);
+            return (React.createElement(ThemeContext.Provider, { value: _this.preparedTheme },
+                React.createElement(Textarea, __assign({}, (isTestEnv ? { spellCheck: false } : {}), textareaProps, { width: '100%', ref: _this.wrappedComponentRef, onFocus: _this.handleFocus, onBlur: _this.handleBlur }))));
+        };
+        _this.handleLayoutClick = function () {
+            var _a;
+            (_a = _this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        _this.handleBlur = function (event) {
+            var _a, _b, _c;
+            if ((_a = getRootNode(_this)) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
+                _this.setState({ focused: false });
+            }
+            else {
+                _this.setState({
+                    focused: false,
+                    clearCrossShowed: _this.getClearCrossShowed({ focused: false, hovered: _this.state.hovered }),
+                });
+                (_c = (_b = _this.props).onBlur) === null || _c === void 0 ? void 0 : _c.call(_b, event);
+            }
+        };
+        _this.handleFocus = function (event) {
+            var _a, _b;
+            _this.setState({
+                focused: true,
+                clearCrossShowed: _this.getClearCrossShowed({ focused: true, hovered: _this.state.hovered }),
+            });
+            (_b = (_a = _this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+        return _this;
+    }
+    InternalTextareaWithLayout.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.state, focused = _a.focused, hovered = _a.hovered;
+        if (Boolean(prevProps.value) !== Boolean(this.props.value)) {
+            this.setState({ clearCrossShowed: this.getClearCrossShowed({ focused: focused, hovered: hovered }) });
+        }
+    };
+    InternalTextareaWithLayout.prototype.focus = function () {
+        var _a;
+        (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    InternalTextareaWithLayout.prototype.blur = function () {
+        var _a;
+        (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    InternalTextareaWithLayout.prototype.setSelectionRange = function (start, end) {
+        var _a;
+        (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+    };
+    InternalTextareaWithLayout.prototype.selectAll = function () {
+        var _a;
+        (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.selectAll();
+    };
+    InternalTextareaWithLayout.prototype.getNode = function () {
+        var _a;
+        return (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.getNode();
+    };
+    InternalTextareaWithLayout.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        this.inputStyles = getInputStyles(this.emotion);
+        this.textareaStyles = getTextareaStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return React.createElement("span", { "data-tid": 'InternalTextareaWithLayout' }, _this.renderLayout());
+        }));
+    };
+    InternalTextareaWithLayout.prototype.getTextareaSizeClassName = function () {
+        switch (this.getProps().size) {
+            case 'large':
+                return this.textareaStyles.textareaLarge(this.theme);
+            case 'medium':
+                return this.textareaStyles.textareaMedium(this.theme);
+            case 'small':
+            default:
+                return this.textareaStyles.textareaSmall(this.theme);
+        }
+    };
+    InternalTextareaWithLayout.prototype.getRootSizeClassName = function () {
+        switch (this.getProps().size) {
+            case 'large':
+                return this.textareaStyles.rootLarge(this.theme);
+            case 'medium':
+                return this.textareaStyles.rootMedium(this.theme);
+            case 'small':
+            default:
+                return this.textareaStyles.rootSmall(this.theme);
+        }
+    };
+    Object.defineProperty(InternalTextareaWithLayout.prototype, "preparedTheme", {
+        get: function () {
+            return ThemeFactory.create({
+                textareaWidth: 'auto',
+                textareaBorderWidth: '0px',
+                textareaPaddingXSmall: '0px',
+                textareaPaddingXMedium: '0px',
+                textareaPaddingXLarge: '0px',
+                textareaPaddingYSmall: '0px',
+                textareaPaddingYMedium: '0px',
+                textareaPaddingYLarge: '0px',
+                textareaOutlineWidth: '0px',
+                textareaShadow: 'none',
+                textareaDisabledBg: 'transparent',
+                textareaBg: 'transparent',
+            }, this.theme);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    InternalTextareaWithLayout.__KONTUR_REACT_UI__ = 'InternalTextareaWithLayout';
+    InternalTextareaWithLayout = __decorate([
+        withRenderEnvironment,
+        rootNode
+    ], InternalTextareaWithLayout);
+    return InternalTextareaWithLayout;
+}(React.Component));
+export { InternalTextareaWithLayout };
+//# sourceMappingURL=InternalTextareaWithLayout.js.map

package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalTextareaWithLayout.js","sourceRoot":"","sources":["../../../internal/InternalTextareaWithLayout/InternalTextareaWithLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { InputProps } from '../../components/Input/index.js';\nimport { InputLayout } from '../../components/Input/InputLayout/InputLayout.js';\nimport { DEFAULT_WIDTH, Textarea } from '../../components/Textarea/index.js';\nimport type { TextareaProps } from '../../components/Textarea/index.js';\nimport { getStyles as getTextareaStyles } from '../../components/Textarea/Textarea.styles.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { getStyles as getInputStyles } from '../../components/Input/Input.styles.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { calculateClearCrossShowedState, InputDataTids } from '../../components/Input/index.js';\nimport { ClearCrossIcon } from '../ClearCrossIcon/ClearCrossIcon.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport { getStyles } from './InternalTextareaWithLayout.styles.js';\n\ninterface InternalTextareaWithLayoutProps\n  extends TextareaProps,\n    Pick<InputProps, 'leftIcon' | 'rightIcon' | 'align' | 'borderless' | 'showClearIcon'> {}\n\ninterface InternalTextareaWithLayoutState {\n  focused: boolean;\n  hovered: boolean;\n  clearCrossShowed: boolean;\n}\n\n@withRenderEnvironment\n@rootNode\nexport class InternalTextareaWithLayout extends React.Component<\n  InternalTextareaWithLayoutProps,\n  InternalTextareaWithLayoutState\n> {\n  public static __KONTUR_REACT_UI__ = 'InternalTextareaWithLayout';\n  private wrappedComponentRef = React.createRef<Textarea>();\n  private theme!: Theme;\n  private styles!: ReturnType<typeof getStyles>;\n  private inputStyles!: ReturnType<typeof getInputStyles>;\n  private textareaStyles!: ReturnType<typeof getTextareaStyles>;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private getProps = createPropsGetter(Textarea.defaultProps);\n\n  public componentDidUpdate(prevProps: Readonly<InternalTextareaWithLayoutProps>) {\n    const { focused, hovered } = this.state;\n    if (Boolean(prevProps.value) !== Boolean(this.props.value)) {\n      this.setState({ clearCrossShowed: this.getClearCrossShowed({ focused, hovered }) });\n    }\n  }\n\n  private getClearCrossShowed = ({ focused, hovered }: { focused?: boolean; hovered?: boolean }): boolean => {\n    if (this.props.disabled) {\n      return false;\n    }\n    return calculateClearCrossShowedState({\n      showClearIcon: this.getProps().showClearIcon || 'never',\n      notEmptyValue: Boolean(this.props.value),\n      focused,\n      hovered,\n    });\n  };\n\n  public state: InternalTextareaWithLayoutState = {\n    focused: false,\n    hovered: false,\n    clearCrossShowed: this.getClearCrossShowed({ focused: false }),\n  };\n\n  public focus(): void {\n    this.wrappedComponentRef.current?.focus();\n  }\n  public blur(): void {\n    this.wrappedComponentRef.current?.blur();\n  }\n  public setSelectionRange(start: number, end: number) {\n    this.wrappedComponentRef.current?.setSelectionRange(start, end);\n  }\n  public selectAll() {\n    this.wrappedComponentRef.current?.selectAll();\n  }\n  public getNode() {\n    return this.wrappedComponentRef.current?.getNode();\n  }\n\n  public render() {\n    this.styles = getStyles(this.emotion);\n    this.inputStyles = getInputStyles(this.emotion);\n    this.textareaStyles = getTextareaStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <span data-tid={'InternalTextareaWithLayout'}>{this.renderLayout()}</span>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private getTextareaSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return this.textareaStyles.textareaLarge(this.theme);\n      case 'medium':\n        return this.textareaStyles.textareaMedium(this.theme);\n      case 'small':\n      default:\n        return this.textareaStyles.textareaSmall(this.theme);\n    }\n  }\n\n  private getRootSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return this.textareaStyles.rootLarge(this.theme);\n      case 'medium':\n        return this.textareaStyles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return this.textareaStyles.rootSmall(this.theme);\n    }\n  }\n\n  private handleClearInput = () => {\n    if (this.wrappedComponentRef.current) {\n      this.wrappedComponentRef.current.clear();\n\n      if (!this.state.focused) {\n        this.wrappedComponentRef.current.focus();\n      }\n    }\n\n    if (this.props.onValueChange) {\n      this.props.onValueChange('');\n    }\n  };\n\n  private getRightIcon = () => {\n    const { size, rightIcon } = this.props;\n\n    return this.state.clearCrossShowed ? (\n      <ClearCrossIcon data-tid={InputDataTids.clearCross} size={size} onClick={this.handleClearInput} />\n    ) : (\n      rightIcon\n    );\n  };\n\n  private handleMouseEnter = () => {\n    this.setState({ clearCrossShowed: this.getClearCrossShowed({ focused: this.state.focused, hovered: true }) });\n  };\n\n  private handleMouseOut = () => {\n    this.setState({ clearCrossShowed: this.getClearCrossShowed({ focused: this.state.focused, hovered: false }) });\n  };\n\n  private renderLayout = () => {\n    const labelProps = {\n      className: this.cx(\n        this.styles.contentWrapper(),\n        this.textareaStyles.textarea(this.theme),\n        this.getTextareaSizeClassName(),\n        this.getRootSizeClassName(),\n        {\n          [this.inputStyles.focus(this.theme)]: this.state.focused && !this.props.warning && !this.props.error,\n          [this.inputStyles.borderless()]: this.props.borderless && !this.state.focused,\n          [this.textareaStyles.disabled(this.theme)]: this.props.disabled,\n          [this.textareaStyles.warning(this.theme)]: this.props.warning,\n          [this.textareaStyles.error(this.theme)]: this.props.error,\n        },\n      ),\n      style: { width: this.props.width || DEFAULT_WIDTH, minWidth: '0', position: 'relative' as const },\n      onMouseEnter: this.handleMouseEnter,\n      onMouseLeave: this.handleMouseOut,\n      onClick: this.handleLayoutClick,\n    };\n    return (\n      <InputLayout\n        leftIcon={this.props.leftIcon}\n        rightIcon={this.getRightIcon()}\n        labelProps={labelProps}\n        context={{ disabled: this.props.disabled, focused: this.state.focused, size: this.getProps().size }}\n        tag=\"span\"\n      >\n        {this.renderTextarea()}\n      </InputLayout>\n    );\n  };\n\n  private get preparedTheme(): Theme {\n    return ThemeFactory.create(\n      {\n        textareaWidth: 'auto',\n        textareaBorderWidth: '0px',\n        textareaPaddingXSmall: '0px',\n        textareaPaddingXMedium: '0px',\n        textareaPaddingXLarge: '0px',\n        textareaPaddingYSmall: '0px',\n        textareaPaddingYMedium: '0px',\n        textareaPaddingYLarge: '0px',\n        textareaOutlineWidth: '0px',\n        textareaShadow: 'none',\n        textareaDisabledBg: 'transparent',\n        textareaBg: 'transparent',\n      },\n      this.theme,\n    );\n  }\n\n  private renderTextarea = () => {\n    const { leftIcon, rightIcon, borderless, ...textareaProps } = this.props;\n    return (\n      <ThemeContext.Provider value={this.preparedTheme}>\n        <Textarea\n          {...(isTestEnv ? { spellCheck: false } : {})}\n          {...textareaProps}\n          width={'100%'}\n          ref={this.wrappedComponentRef}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        />\n      </ThemeContext.Provider>\n    );\n  };\n\n  private handleLayoutClick = () => {\n    this.wrappedComponentRef.current?.focus();\n  };\n  private handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (getRootNode(this)?.contains(event.relatedTarget)) {\n      this.setState({ focused: false });\n    } else {\n      this.setState({\n        focused: false,\n        clearCrossShowed: this.getClearCrossShowed({ focused: false, hovered: this.state.hovered }),\n      });\n      this.props.onBlur?.(event);\n    }\n  };\n  private handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    this.setState({\n      focused: true,\n      clearCrossShowed: this.getClearCrossShowed({ focused: true, hovered: this.state.hovered }),\n    });\n    this.props.onFocus?.(event);\n  };\n}\n"]}

package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     contentWrapper(): string;
-};
+}>;

package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        contentWrapper: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: flex-start;\n    "], ["\n      display: inline-flex;\n      align-items: flex-start;\n    "])));
+        },
+    });
+});
+var templateObject_1;
+//# sourceMappingURL=InternalTextareaWithLayout.styles.js.map

package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalTextareaWithLayout.styles.js","sourceRoot":"","sources":["../../../internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,cAAc;YACZ,OAAO,GAAG,wIAAA,qEAGT,KAAC;QACJ,CAAC;KACF,CAAC;AAP8D,CAO9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  contentWrapper() {\n    return css`\n      display: inline-flex;\n      align-items: flex-start;\n    `;\n  },\n}));\n"]}

package/internal/MaskCharLowLine/MaskCharLowLine.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useStyles } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from './MaskCharLowLine.styles.js';
+/**
+ * FIGURE SPACE
+ *
+ * space equal to tabular width of a font this is equivalent to the digit width of fonts with fixed-width digits
+ *
+ * @see http://www.fileformat.info/info/unicode/char/2007/index.htm
+ */
+export var MASK_CHAR_EXEMPLAR = String.fromCharCode(0x2007);
+export var MaskCharLowLine = function () {
+    var styles = useStyles(getStyles);
+    return React.createElement("span", { className: styles.root() }, MASK_CHAR_EXEMPLAR);
+};
+//# sourceMappingURL=MaskCharLowLine.js.map

package/internal/MaskCharLowLine/MaskCharLowLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskCharLowLine.js","sourceRoot":"","sources":["../../../internal/MaskCharLowLine/MaskCharLowLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;AAE9D,MAAM,CAAC,IAAM,eAAe,GAAG;IAC7B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAG,kBAAkB,CAAQ,CAAC;AACrE,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\n\nimport { getStyles } from './MaskCharLowLine.styles.js';\n\n/**\n * FIGURE SPACE\n *\n * space equal to tabular width of a font this is equivalent to the digit width of fonts with fixed-width digits\n *\n * @see http://www.fileformat.info/info/unicode/char/2007/index.htm\n */\nexport const MASK_CHAR_EXEMPLAR = String.fromCharCode(0x2007);\n\nexport const MaskCharLowLine = () => {\n  const styles = useStyles(getStyles);\n  return <span className={styles.root()}>{MASK_CHAR_EXEMPLAR}</span>;\n};\n"]}

package/internal/MaskCharLowLine/MaskCharLowLine.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     root(): string;
-};
+}>;

package/internal/MaskCharLowLine/MaskCharLowLine.styles.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n\n      &:after {\n        content: '';\n        position: absolute;\n        width: calc(100% - 0.1em);\n        height: 1px;\n        left: 0.05em;\n        bottom: 0.11em;\n        border-bottom: solid 0.05em;\n      }\n    "], ["\n      position: relative;\n\n      &:after {\n        content: '';\n        position: absolute;\n        width: calc(100% - 0.1em);\n        height: 1px;\n        left: 0.05em;\n        bottom: 0.11em;\n        border-bottom: solid 0.05em;\n      }\n    "])));
+        },
+    });
+});
+var templateObject_1;
+//# sourceMappingURL=MaskCharLowLine.styles.js.map

package/internal/MaskCharLowLine/MaskCharLowLine.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskCharLowLine.styles.js","sourceRoot":"","sources":["../../../internal/MaskCharLowLine/MaskCharLowLine.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,qUAAA,kQAYT,KAAC;QACJ,CAAC;KACF,CAAC;AAhB8D,CAgB9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      position: relative;\n\n      &:after {\n        content: '';\n        position: absolute;\n        width: calc(100% - 0.1em);\n        height: 1px;\n        left: 0.05em;\n        bottom: 0.11em;\n        border-bottom: solid 0.05em;\n      }\n    `;\n  },\n}));\n"]}

package/internal/MaskCharLowLine/index.d.ts

@@ -1 +1 @@
-export * from './MaskCharLowLine';
+export * from './MaskCharLowLine.js';

package/internal/MaskCharLowLine/index.js

@@ -0,0 +1,2 @@
+export * from './MaskCharLowLine.js';
+//# sourceMappingURL=index.js.map

package/internal/MaskCharLowLine/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../internal/MaskCharLowLine/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './MaskCharLowLine.js';\n"]}

package/internal/Menu/Menu.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'react';
 import React from 'react';
-import type { ScrollContainerScrollState } from '../../components/ScrollContainer';
-import type { TGetRootNode } from '../../lib/rootNode';
-import type { CommonProps } from '../CommonWrapper';
+import type { ScrollContainerScrollStateY } from '../../components/ScrollContainer/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { CommonProps } from '../CommonWrapper/index.js';
 export interface MenuProps extends CommonProps, Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
     children: React.ReactNode;
     hasMargin?: boolean;
@@ -35,9 +35,8 @@ export interface MenuProps extends CommonProps, Pick<HTMLAttributes<HTMLDivEleme
     initialSelectedItemIndex?: number;
 }
 export interface MenuState {
-    highlightedIndex: number;
     maxHeight: number | string;
-    scrollState: ScrollContainerScrollState;
+    scrollState: ScrollContainerScrollStateY;
     enableIconPadding: boolean;
 }
 export declare const MenuDataTids: {
@@ -50,6 +49,10 @@ export declare class Menu extends React.PureComponent<MenuProps, MenuState> {
     static defaultProps: DefaultProps;
     private getProps;
     state: MenuState;
+    private globalObject;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     private scrollContainer;
     private isMobileLayout;