@via-profit/ui-kit 0.1.8 → 0.2.1-alpha.3

package/DatePicker/useDatePickerFormat.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerFormat = void 0;
 const react_1 = __importDefault(require("react"));
 const useDatePickerFormat = () => {
-    const templateValidChars = react_1.default.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'd', 'dd', 'D', 'm', 'mm', 'M'], []);
+    const templateValidChars = react_1.default.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'd', 'dd', 'D', 'm', 'mm'], []);
     const isValidTemplate = react_1.default.useCallback((template) => {
         const matches = template.match(/[yYmMdD]+/g);
         if (!matches) {
@@ -25,7 +25,7 @@ const useDatePickerFormat = () => {
     const getMaskByTemplate = react_1.default.useCallback((template) => {
         validateTemplate(template);
         return template.split('').map(char => {
-            if (['m', 'M', 'd', 'D', 'y', 'Y'].includes(char)) {
+            if (['m', 'd', 'D', 'y', 'Y'].includes(char)) {
                 return /\d/;
             }
             return char;
@@ -78,11 +78,11 @@ const useDatePickerFormat = () => {
             }
             return day;
         })
-            // mm or M - month with leading zero
+            // mm - month with leading zero
             // m - month without leading zero
-            .replace(/(m{1,2}|M{1,2})/, entries => {
+            .replace(/(m{1,2})/, entries => {
             const month = `${date.getMonth() + 1}`;
-            if (['MM', 'M', 'mm'].includes(entries)) {
+            if (['mm'].includes(entries)) {
                 const str = `0${month}`;
                 return str.substring(str.length - entries.length);
             }

package/ErrorBoundary/Fallback.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Fallback: React.FC;
+export default Fallback;

package/ErrorBoundary/Fallback.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const Container = styled_1.default.div `
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  border-radius: inherit;
+  background-color: #8b0101;
+  color: #f5e7e7;
+`;
+const Fallback = () => (React.createElement(React.Fragment, null,
+    React.createElement(react_1.Global, { styles: (0, react_1.css) `
+        body {
+          margin: 0;
+        }
+      ` }),
+    React.createElement(Container, null,
+        React.createElement("h1", null, "It looks like our server has broken down"),
+        React.createElement("p", null, "We're already fixing it. We are waiting for you later"))));
+exports.default = Fallback;

package/ErrorBoundary/RenderError.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type RenderErrorProps = {
+    readonly error?: Error | unknown;
+};
+declare const RenderError: React.FC<RenderErrorProps>;
+export default RenderError;

package/ErrorBoundary/RenderError.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const createTheme_1 = __importDefault(require("../ThemeProvider/createTheme"));
+const H1_1 = __importDefault(require("../Typography/H1"));
+const ThemeProvider_1 = __importDefault(require("../ThemeProvider"));
+const Paragraph_1 = __importDefault(require("../Typography/Paragraph"));
+const Surface_1 = __importDefault(require("../Surface"));
+const Strong_1 = __importDefault(require("../Typography/Strong"));
+const Container = styled_1.default.div `
+  width: 100%;
+  height: 100%;
+`;
+const StyledSurface = (0, styled_1.default)(Surface_1.default) `
+  border-left: 2em solid ${({ theme }) => theme.color.error.toString()};
+`;
+const StyledHeading = (0, styled_1.default)(H1_1.default) `
+  margin-top: 0;
+`;
+const RenderError = props => {
+    const { error } = props;
+    const isDev = process.env.NODE_ENV === 'development';
+    const { name, message, stack } = React.useMemo(() => {
+        let name = '';
+        let message = '';
+        let stack = '';
+        if (error && typeof error === 'object') {
+            if ('name' in error) {
+                name = `${error.name}`;
+            }
+            if ('message' in error) {
+                message = `${error.message}`;
+            }
+            if ('stack' in error) {
+                stack = `${error.stack}`;
+            }
+        }
+        return { name, message, stack };
+    }, [error]);
+    const theme = (0, createTheme_1.default)();
+    return (React.createElement(ThemeProvider_1.default, { theme: theme },
+        React.createElement(Container, null,
+            React.createElement(StyledSurface, null, isDev ? (React.createElement(React.Fragment, null,
+                React.createElement(StyledHeading, null, name),
+                React.createElement(Strong_1.default, null, message),
+                stack !== '' && React.createElement(Paragraph_1.default, null, stack))) : (React.createElement(React.Fragment, null,
+                React.createElement(StyledHeading, null,
+                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430" })),
+                React.createElement(Paragraph_1.default, null,
+                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0441\u043E\u043E\u0431\u0449\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0430\u043C" }))))))));
+};
+exports.default = RenderError;

package/ErrorBoundary/index.d.ts

@@ -1,19 +1,15 @@
 import React from 'react';
-export interface ErrorBoundaryComponentProps {
-    readonly children: React.ReactNode | readonly React.ReactNode[];
-}
-interface State {
+type State = {
     readonly error: Error | null;
     readonly errorInfo: React.ErrorInfo | null;
-}
-interface Props {
-    readonly children: React.ReactNode | React.ReactNode[];
-    readonly styles?: React.CSSProperties;
-}
+};
+type Props = {
+    readonly children: React.ReactNode;
+    readonly fallback?: React.ReactNode | undefined | null;
+};
 declare class ErrorBoundary extends React.Component<Props, State> {
     constructor(props: Props);
-    static getDerivedStateFromError(error: Error): State;
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    render(): React.JSX.Element;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }
 export default ErrorBoundary;

package/ErrorBoundary/index.js

@@ -4,41 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const Container = styled_1.default.div `
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  box-sizing: border-box;
-  padding: theme.spacing(1);
-  border-radius: inherit;
-  border: 1px solid rgb(92, 0, 0);
-  background-color: rgb(41, 0, 0);
-`;
-const Inner = styled_1.default.div `
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-`;
-const Title = styled_1.default.h1 `
-  margin-top: 0;
-`;
-const ErrorBox = styled_1.default.div `
-  color: rgb(255, 128, 128);
-  padding: 1rem;
-`;
-const ErrorMessage = styled_1.default.pre `
-  max-height: 300;
-  overflow: auto;
-`;
-const CallStack = styled_1.default.pre `
-  opacity: 0.8;
-  max-height: 300;
-  overflow: auto;
-  white-space: break-spaces;
-`;
+const RenderError_1 = __importDefault(require("./RenderError"));
 class ErrorBoundary extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -47,12 +13,6 @@ class ErrorBoundary extends react_1.default.Component {
             errorInfo: null,
         };
     }
-    static getDerivedStateFromError(error) {
-        return {
-            error,
-            errorInfo: null,
-        };
-    }
     componentDidCatch(error, errorInfo) {
         this.setState({
             error,
@@ -61,18 +21,11 @@ class ErrorBoundary extends react_1.default.Component {
     }
     render() {
         const { error } = this.state;
-        const { children, styles } = this.props;
+        const { children } = this.props;
         if (error) {
-            return (react_1.default.createElement(Container, { style: styles },
-                react_1.default.createElement(Inner, null, process.env.NODE_ENV === 'development' ? (react_1.default.createElement(ErrorBox, null,
-                    react_1.default.createElement(Title, null, "Something went wrong"),
-                    react_1.default.createElement(ErrorMessage, null, error.message),
-                    react_1.default.createElement("h2", null, "Callstack:"),
-                    react_1.default.createElement(CallStack, null, error.stack))) : (react_1.default.createElement(ErrorBox, null,
-                    react_1.default.createElement(Title, null, "It looks like our server has broken down"),
-                    react_1.default.createElement("p", null, "We're already fixing it. We are waiting for you later"))))));
+            return react_1.default.createElement(RenderError_1.default, { error: error });
         }
-        return react_1.default.createElement(react_1.default.Fragment, null, children);
+        return children;
     }
 }
 exports.default = ErrorBoundary;

package/Highlighted/index.d.ts

@@ -42,15 +42,15 @@ export interface HighlightedOverrides {
     /**
      * Container element
      */
-    readonly Container?: React.ForwardRefExoticComponent<HighlightedContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Container?: React.ComponentType<HighlightedContainerProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * Mark element (HTML <mark>)
      */
-    readonly Mark?: React.ForwardRefExoticComponent<HighlightedMarkProps & React.RefAttributes<HTMLElement>>;
+    readonly Mark?: React.ComponentType<HighlightedMarkProps & React.RefAttributes<HTMLElement>>;
     /**
      * Text element (HTML <span>)regex
      */
-    readonly Text?: React.ForwardRefExoticComponent<HighlightedTextProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Text?: React.ComponentType<HighlightedTextProps & React.RefAttributes<HTMLSpanElement>>;
 }
 export declare const escapeRegex: (pattern: string) => string;
 declare const _default: React.ForwardRefExoticComponent<HighlightedProps & React.RefAttributes<HTMLSpanElement>>;

package/LoadingIndicator/Spinner.d.ts

@@ -1,4 +1,6 @@
-import React from 'react';
-export type SpinnerProps = React.SVGAttributes<SVGSVGElement>;
-declare const _default: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>;
+import * as React from 'react';
+type Props = React.HTMLAttributes<HTMLDivElement>;
+export declare const LoadingIndicator: React.ForwardRefRenderFunction<HTMLDivElement, Props>;
+export declare const StaticLoadingIndicator: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/LoadingIndicator/Spinner.js

@@ -1,42 +1,71 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+exports.StaticLoadingIndicator = exports.LoadingIndicator = void 0;
+const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const animationRotate = (0, react_2.keyframes) `
-0% {
-  transform: rotate(0deg);
-  }
-100% {
-  transform: rotate(270deg);
-}
+const react_1 = require("@emotion/react");
+const Container = styled_1.default.div `
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
-const animationDash = (0, react_2.keyframes) `
- 0% {
-    stroke-dashoffset: 187;
-  }
-50% {
-  stroke-dashoffset: 46.75;
-          transform: rotate(135deg);
-}
-100% {
-  stroke-dashoffset: 187;
-          transform: rotate(450deg);
-}
+const spin = (0, react_1.keyframes) `
+    to {
+        transform: rotate(360deg);
+    }
 `;
-const Svg = styled_1.default.svg `
-  animation: ${animationRotate} 1.4s linear infinite;
+const SpinLoader = styled_1.default.div `
+  width: 2em;
+  height: 2em;
+  border: 0.187em solid ${({ theme }) => theme.color.surface.darken(30).toString()};
+  border-top-color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  border-radius: 50%;
+  animation: ${spin} 0.8s linear infinite;
 `;
-const Circle = styled_1.default.circle `
-  stroke-dasharray: 187;
-  stroke-dashoffset: 0;
-  transform-origin: center;
-  animation: ${animationDash} 1.4s ease-in-out infinite;
-  stroke: ${({ theme }) => theme.color.accentSecondary.toString()};
+const LoadingIndicator = (props, ref) => (React.createElement(Container, Object.assign({}, props, { ref: ref }),
+    React.createElement(SpinLoader, null)));
+exports.LoadingIndicator = LoadingIndicator;
+const StaticLoadingIndicatorContainer = styled_1.default.span `
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
 `;
-const Spinner = (props, ref) => (react_1.default.createElement(Svg, Object.assign({ width: "1em", height: "1em", viewBox: "0 0 66 66", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
-    react_1.default.createElement(Circle, { fill: "none", strokeWidth: "6", strokeLinecap: "round", cx: "33", cy: "33", r: "30" })));
-exports.default = react_1.default.forwardRef(Spinner);
+exports.StaticLoadingIndicator = React.forwardRef((props, ref) => (React.createElement(StaticLoadingIndicatorContainer, Object.assign({}, props, { ref: ref }),
+    React.createElement(SpinLoader, null))));
+exports.StaticLoadingIndicator.displayName = 'StaticLoadingIndicator';
+exports.default = React.forwardRef(exports.LoadingIndicator);

package/LoadingIndicator/index.d.ts

@@ -1,3 +1,3 @@
-import Spinner from './Spinner';
-export { Spinner };
-export default Spinner;
+import LoadingIndicator from './Spinner';
+export * from './Spinner';
+export default LoadingIndicator;

package/LoadingIndicator/index.js

@@ -1,9 +1,22 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = void 0;
 const Spinner_1 = __importDefault(require("./Spinner"));
-exports.Spinner = Spinner_1.default;
+__exportStar(require("./Spinner"), exports);
 exports.default = Spinner_1.default;

package/MaskedField/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Mask, FormatParsedPayload, ParseInput } from './useMasked';
+import { FormatParsedPayload, Mask, ParseInput } from './useMasked';
 import { TextFieldProps } from '../TextField';
 export type GetMask = (input: string) => Mask;
 export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'> {

package/MaskedField/index.js

@@ -31,7 +31,7 @@ const MaskedField = (props, ref) => {
                 typeof parseInput === 'undefined' &&
                 elem.match(/[0-9a-zа-яё]/i))) {
             decoratorsErrorDisplayed.current = true;
-            console.warn(`[MaskedField component] You use symbols as decorators, which should be replaced with RegExp or provide the «parseInput» function instead`);
+            console.warn('[MaskedField component] You use symbols as decorators, which should be replaced with RegExp or provide the «parseInput» function instead');
         }
         return currentMask;
     }, [mask, parseInput]);
@@ -66,14 +66,15 @@ const MaskedField = (props, ref) => {
             (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(caret, caret);
         }, 15);
     }, [getMask, masked, transform, onChange, parseInputFn]);
-    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref }, nativeProps, { type: "text", value: inputValue, onChange: handleOnChange, inputRef: elem => {
-            textInputRef.current = elem;
-            if (typeof nativeProps.inputRef === 'function') {
-                nativeProps.inputRef(elem);
-            }
-            if (nativeProps.inputRef !== null && typeof nativeProps.inputRef === 'object') {
-                nativeProps.inputRef.current = elem;
-            }
-        } })));
+    const setInputRef = react_1.default.useCallback((elem) => {
+        textInputRef.current = elem;
+        if (typeof nativeProps.inputRef === 'function') {
+            nativeProps.inputRef(elem);
+        }
+        if (nativeProps.inputRef !== null && typeof nativeProps.inputRef === 'object') {
+            nativeProps.inputRef.current = elem;
+        }
+    }, [nativeProps]);
+    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref }, nativeProps, { type: "text", value: inputValue, onChange: handleOnChange, inputRef: setInputRef })));
 };
 exports.default = react_1.default.forwardRef(MaskedField);

package/Menu/AutoHeightWrapper.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export type AutoHeightWrapperProps = {
+    readonly children: (height: number) => React.ReactNode;
+};
+declare const AutoHeightWrapper: (props: AutoHeightWrapperProps) => React.JSX.Element;
+export default AutoHeightWrapper;

package/Menu/AutoHeightWrapper.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const AutoHeightWrapper = (props) => {
+    const { children } = props;
+    const ref = React.useRef(null);
+    const [height, setHeight] = React.useState(0);
+    React.useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(() => {
+            setHeight(el.clientHeight);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    return (React.createElement("div", { "data-virt-elem": "AutoHeightWrapper", ref: ref, style: { height: '100%', overflow: 'hidden' } }, height > 0 && children(height)));
+};
+exports.default = AutoHeightWrapper;

package/Menu/MeasuredItem.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type MeasuredItemProps = {
+    readonly index: number;
+    readonly top: number;
+    readonly isFixed: boolean;
+    readonly updateHeight: (index: number, height: number) => void;
+    readonly children: React.ReactNode;
+};
+declare const MeasuredItem: React.FC<MeasuredItemProps>;
+export default MeasuredItem;

package/Menu/MeasuredItem.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const MeasuredItem = props => {
+    const { index, top, isFixed, updateHeight, children } = props;
+    const ref = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (isFixed)
+            return; // в фиксированном режиме измерять не нужно
+        const el = ref.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const h = el.offsetHeight;
+            updateHeight(index, h);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [index, updateHeight, isFixed]);
+    return (React.createElement("div", { ref: ref, style: {
+            position: 'absolute',
+            top,
+            width: '100%',
+        } }, children));
+};
+exports.default = MeasuredItem;