@astral/ui 4.0.0-alpha.9 → 4.0.0

package/node/components/OverflowTypography/OverflowTypography.d.ts

@@ -0,0 +1,48 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
+import { type TooltipProps as BasicTooltipProps } from '../Tooltip';
+import { type TypographyProps } from '../Typography';
+type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
+export type OverflowedProps = {
+    /**
+     * Максимальное количество отображаемых строк
+     * @example <OverflowTypography rowsCount={2} />
+     * @default 1
+     */
+    rowsCount?: number;
+};
+type TooltipCustomizable = {
+    /**
+     * Пропс для кастомизации тултипа
+     * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
+     */
+    tooltipProps?: Omit<TooltipProps, 'children' | 'title'> & {
+        /**
+         * Кастомный контент внутри tooltip. Данный props перекрывает дефолтный текст,
+         * когда строка не вмещается в контейнер
+         */
+        title?: ReactNode;
+    };
+    /**
+     * Количество отображаемых после сокращения в конце символов
+     */
+    visibleLastSymbolsCount?: number;
+};
+export type OverflowedElementProps = OverflowedProps & TooltipCustomizable & TypographyProps;
+export type OverflowedTypographyProps = PropsWithChildren<OverflowedElementProps>;
+export declare const DEFAULT_ROWS_COUNT = 1;
+export declare const OverflowTypography: import("react").ForwardRefExoticComponent<OverflowedProps & TooltipCustomizable & {
+    children?: ReactNode;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import("../Typography").TypographyColor | undefined;
+    variant?: import("../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../Typography").Intensity | undefined;
+    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    isUpperCase?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

package/node/components/OverflowTypography/OverflowTypography.js

@@ -0,0 +1,34 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowTypography = exports.DEFAULT_ROWS_COUNT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Tooltip_1 = require("../Tooltip");
+const Typography_1 = require("../Typography");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+exports.DEFAULT_ROWS_COUNT = 1;
+exports.OverflowTypography = (0, react_1.forwardRef)((props, forwardedRef) => {
+    const { ref, secondPartLabel, firstPartLabel, hasVisibleLastSymbols, hasMultipleRows, tooltipTitle, } = (0, useLogic_1.useLogic)(Object.assign(Object.assign({}, props), { forwardedRef }));
+    const { tooltipProps, children, rowsCount = exports.DEFAULT_ROWS_COUNT, visibleLastSymbolsCount, align = 'left' } = props, restProps = __rest(props, ["tooltipProps", "children", "rowsCount", "visibleLastSymbolsCount", "align"]);
+    const typographyProps = Object.assign(Object.assign({}, restProps), { ref,
+        align,
+        children,
+        rowsCount,
+        hasMultipleRows });
+    if (hasVisibleLastSymbols) {
+        return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ title: tooltipTitle, disableInteractive: true }, tooltipProps, { children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$align": align, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTypography, Object.assign({ component: "span", children: firstPartLabel, ref: ref, hasMultipleRows: hasMultipleRows, rowsCount: 1 }, restProps)), (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ children: secondPartLabel }, restProps, { component: "span" }))] }) })));
+    }
+    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ title: tooltipTitle, disableInteractive: true }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledTypography, Object.assign({}, typographyProps)) })));
+});

package/node/components/OverflowTypography/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useOverflowed';

package/node/components/OverflowTypography/hooks/index.js

@@ -0,0 +1,17 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useOverflowed"), exports);

package/node/components/OverflowTypography/hooks/useOverflowed/index.d.ts

@@ -0,0 +1 @@
+export * from './useOverflowed';

package/node/components/OverflowTypography/hooks/useOverflowed/index.js

@@ -0,0 +1,17 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useOverflowed"), exports);

package/node/components/OverflowTypography/hooks/useOverflowed/useOverflowed.d.ts

@@ -0,0 +1,5 @@
+import { type Ref } from 'react';
+export declare const useOverflowed: (forwardedRef?: Ref<HTMLElement>, hasMultipleRows?: boolean, hasVisibleLastSymbols?: boolean) => {
+    isOverflowed: boolean;
+    ref: import("react").RefObject<HTMLElement>;
+};

package/node/components/OverflowTypography/hooks/useOverflowed/useOverflowed.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverflowed = void 0;
+const utils_1 = require("@astral/utils");
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const useOverflowed = (forwardedRef, hasMultipleRows = false, hasVisibleLastSymbols = false) => {
+    const localRef = (0, react_1.useRef)(null);
+    const ref = forwardedRef && typeof forwardedRef !== 'function'
+        ? forwardedRef
+        : localRef;
+    const [isOverflowed, setOverflow] = (0, react_1.useState)(false);
+    const isFirstMount = (0, hooks_1.useFirstMountState)();
+    const checkOverflow = ([{ target, contentRect },]) => {
+        // высота контента больше высоты контейнера -> переполнение
+        const isScrollHeightBigger = target.scrollHeight > Math.round(contentRect.height);
+        // ширина контента больше ширины контейнера -> переполнение
+        const isScrollWidthBigger = target.scrollWidth > Math.round(contentRect.width);
+        const newIsOverflowed = hasMultipleRows
+            ? isScrollWidthBigger || isScrollHeightBigger
+            : isScrollWidthBigger;
+        // Обновляем состояние только если значение действительно изменилось
+        setOverflow((prev) => (prev !== newIsOverflowed ? newIsOverflowed : prev));
+    };
+    (0, react_1.useLayoutEffect)(() => {
+        const node = ref.current;
+        if (!node) {
+            return;
+        }
+        const resizeEntry = {
+            target: node,
+            contentRect: node.getBoundingClientRect(),
+        };
+        let resizeObserver = null;
+        // Проверка через ResizeObserver при первом маунте должна быть отключена для элементов,
+        // которые имеют hasVisibleLastSymbols (например GuidTypography, FileName) во избежания визуального подергивания
+        if (hasVisibleLastSymbols && isFirstMount) {
+            checkOverflow([resizeEntry]);
+        }
+        else {
+            resizeObserver = new ResizeObserver((0, utils_1.debounce)(checkOverflow, 500));
+            resizeObserver.observe(node);
+        }
+        //функция очистки должна обязательно возвращаться в теле хука, иначе она не вызывается
+        return () => {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(node);
+        };
+    }, [ref.current]);
+    return { isOverflowed, ref };
+};
+exports.useOverflowed = useOverflowed;

package/node/components/OverflowTypography/index.d.ts

@@ -0,0 +1 @@
+export * from './OverflowTypography';

package/node/components/OverflowTypography/index.js

@@ -0,0 +1,17 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./OverflowTypography"), exports);

package/node/components/OverflowTypography/styles.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+type OverflowTypographyWrapperProps = {
+    hasMultipleRows: boolean;
+    rowsCount: number;
+};
+export declare const StyledTypography: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import("../Typography").TypographyColor | undefined;
+    variant?: import("../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../Typography").Intensity | undefined;
+    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    isUpperCase?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & OverflowTypographyWrapperProps, {}, {}>;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import("../Typography").TypographyColor | undefined;
+    variant?: import("../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../Typography").Intensity | undefined;
+    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    isUpperCase?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $align: string;
+}, {}, {}>;
+export {};

package/node/components/OverflowTypography/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = exports.StyledTypography = void 0;
+const styles_1 = require("../styles");
+const Typography_1 = require("../Typography");
+// проверки на rowsCount в стилях нужны для того, чтобы элементы в одну строку обрезались бы по буквенно
+// но если нужно обрезание по нескольким строчкам, тогда элементы будут обрезаться по словам
+exports.StyledTypography = (0, styles_1.styled)(Typography_1.Typography, {
+    shouldForwardProp: (name) => name !== 'rowsCount' && name !== 'hasMultipleRows',
+}) `
+  overflow: hidden;
+  display: ${({ hasMultipleRows }) => (hasMultipleRows ? '-webkit-box' : '')};
+
+  max-width: 100%;
+
+  text-overflow: ellipsis;
+  white-space: ${({ hasMultipleRows }) => hasMultipleRows ? 'initial' : 'nowrap'};
+
+  /* stylelint-disable-next-line */
+  -webkit-box-orient: ${({ hasMultipleRows }) => hasMultipleRows ? 'vertical' : ''};
+  /* stylelint-disable-next-line */
+  -webkit-line-clamp: ${({ rowsCount }) => rowsCount};
+`;
+exports.Wrapper = (0, styles_1.styled)(Typography_1.Typography, {
+    shouldForwardProp: (prop) => !['$align'].includes(prop),
+}) `
+  display: flex;
+  justify-content: ${({ $align }) => $align};
+
+  width: 100%;
+
+  white-space: nowrap;
+`;

package/node/components/OverflowTypography/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/node/components/OverflowTypography/useLogic/index.js

@@ -0,0 +1,17 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/OverflowTypography/useLogic/useLogic.d.ts

@@ -0,0 +1,14 @@
+import { type ForwardedRef } from 'react';
+import { type OverflowedTypographyProps } from '../OverflowTypography';
+type UseLogicParams = OverflowedTypographyProps & {
+    forwardedRef: ForwardedRef<HTMLElement>;
+};
+export declare const useLogic: ({ forwardedRef, children, visibleLastSymbolsCount, rowsCount, }: UseLogicParams) => {
+    hasVisibleLastSymbols: boolean;
+    ref: import("react").RefObject<HTMLElement>;
+    firstPartLabel: string;
+    secondPartLabel: string;
+    hasMultipleRows: boolean;
+    tooltipTitle: import("react").ReactNode;
+};
+export {};

package/node/components/OverflowTypography/useLogic/useLogic.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const hooks_1 = require("../hooks");
+const utils_1 = require("../utils");
+const useLogic = ({ forwardedRef, children, visibleLastSymbolsCount = 0, rowsCount = 1, }) => {
+    const canSlice = Boolean(children && typeof children === 'string');
+    const hasVisibleLastSymbols = canSlice && visibleLastSymbolsCount > 0;
+    const hasMultipleRows = hasVisibleLastSymbols ? false : rowsCount > 1;
+    const { ref, isOverflowed } = (0, hooks_1.useOverflowed)(forwardedRef, hasMultipleRows, hasVisibleLastSymbols);
+    const { firstPartLabel, secondPartLabel } = hasVisibleLastSymbols && typeof children === 'string'
+        ? (0, utils_1.truncateString)(visibleLastSymbolsCount, children)
+        : { firstPartLabel: '', secondPartLabel: '' };
+    const tooltipTitle = isOverflowed && children;
+    return {
+        hasVisibleLastSymbols,
+        ref,
+        firstPartLabel,
+        secondPartLabel,
+        hasMultipleRows,
+        tooltipTitle,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/OverflowTypography/utils/index.d.ts

@@ -0,0 +1 @@
+export { truncateString } from './truncateString';

package/node/components/OverflowTypography/utils/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.truncateString = void 0;
+var truncateString_1 = require("./truncateString");
+Object.defineProperty(exports, "truncateString", { enumerable: true, get: function () { return truncateString_1.truncateString; } });

package/node/components/OverflowTypography/utils/truncateString/index.d.ts

@@ -0,0 +1 @@
+export * from './truncateString';

package/node/components/OverflowTypography/utils/truncateString/index.js

@@ -0,0 +1,17 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./truncateString"), exports);

package/node/components/OverflowTypography/utils/truncateString/truncateString.d.ts

@@ -0,0 +1,4 @@
+export declare const truncateString: (visibleLastSymbolsCount: number, label: string) => {
+    firstPartLabel: string;
+    secondPartLabel: string;
+};

package/node/components/OverflowTypography/utils/truncateString/truncateString.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.truncateString = void 0;
+const truncateString = (visibleLastSymbolsCount, label) => {
+    const firstPartLabel = label.slice(0, -visibleLastSymbolsCount);
+    const secondPartLabel = label.slice(-visibleLastSymbolsCount);
+    return { firstPartLabel, secondPartLabel };
+};
+exports.truncateString = truncateString;

package/node/components/PageLayout/PageAlert/PageAlert.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type DashboardAlertProps } from '../../DashboardAlert';
+export type PageAlertProps = DashboardAlertProps;
+/**
+ * Компонент отображения уведомления на странице приложения
+ */
+export declare const PageAlert: (props: PageAlertProps) => JSX.Element;

package/node/components/PageLayout/PageAlert/PageAlert.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageAlert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+/**
+ * Компонент отображения уведомления на странице приложения
+ */
+const PageAlert = (props) => {
+    return (0, jsx_runtime_1.jsx)(styles_1.StyledDashboardAlert, Object.assign({}, props));
+};
+exports.PageAlert = PageAlert;

package/node/components/PageLayout/PageAlert/index.d.ts

@@ -0,0 +1 @@
+export * from './PageAlert';

package/node/components/PageLayout/PageAlert/index.js

@@ -0,0 +1,17 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PageAlert"), exports);

package/node/components/PageLayout/PageAlert/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledDashboardAlert: import("@emotion/styled").StyledComponent<Omit<import("../../Alert").AlertProps, "title" | "display" | "slotProps" | "slots" | "actions"> & {
+    linkButtonProps?: import("../../DashboardAlert").LinkButtonProps<import("react").ElementType> | undefined;
+    isShow?: boolean | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/PageLayout/PageAlert/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledDashboardAlert = void 0;
+const Alert_1 = require("../../Alert");
+const DashboardAlert_1 = require("../../DashboardAlert");
+const styles_1 = require("../../styles");
+exports.StyledDashboardAlert = (0, styles_1.styled)(DashboardAlert_1.DashboardAlert) `
+  &.${Alert_1.alertClassnames.root} {
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      margin: ${({ theme }) => theme.spacing(3, 4, 0, 4)};
+    }
+  }
+`;

package/node/components/PageLayout/PageAside/PageAside.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export type PageAsideProps = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+};
+export declare const PageAside: ({ children, className }: PageAsideProps) => JSX.Element;

package/node/components/PageLayout/PageAside/PageAside.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageAside = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const PageAside = ({ children, className }) => {
+    return (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: children });
+};
+exports.PageAside = PageAside;

package/node/components/PageLayout/PageAside/constants.d.ts

@@ -0,0 +1 @@
+export declare const PAGE_ASIDE_WIDTH = "320px";

package/node/components/PageLayout/PageAside/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PAGE_ASIDE_WIDTH = void 0;
+exports.PAGE_ASIDE_WIDTH = '320px';

package/node/components/PageLayout/PageAside/index.d.ts

@@ -0,0 +1,2 @@
+export { PAGE_ASIDE_WIDTH } from './constants';
+export * from './PageAside';

package/node/components/PageLayout/PageAside/index.js

@@ -0,0 +1,20 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PAGE_ASIDE_WIDTH = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "PAGE_ASIDE_WIDTH", { enumerable: true, get: function () { return constants_1.PAGE_ASIDE_WIDTH; } });
+__exportStar(require("./PageAside"), exports);

package/node/components/PageLayout/PageAside/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/node/components/PageLayout/PageAside/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styles_1 = require("../../styles");
+const constants_1 = require("./constants");
+exports.Wrapper = styles_1.styled.aside `
+  overflow: auto;
+  grid-column: 2;
+  grid-row: 2;
+
+  width: ${constants_1.PAGE_ASIDE_WIDTH};
+  padding: ${({ theme }) => theme.spacing(4, 6)};
+
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: unset;
+    order: 3;
+
+    width: unset;
+    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+    padding: ${({ theme }) => theme.spacing(4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border-top: 0;
+    border-left: 0;
+    border-radius: ${({ theme }) => theme.shape.medium};
+  }
+`;

package/node/components/PageLayout/PageAsideBlock/PageAsideBlock.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export type PageAsideBlockProps = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Вариант разделения блоков с помощью divider
+     */
+    dividerVariant?: 'fullWidth' | 'content';
+};
+export declare const PageAsideBlock: ({ children, className, dividerVariant, }: PageAsideBlockProps) => JSX.Element;

package/node/components/PageLayout/PageAsideBlock/PageAsideBlock.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageAsideBlock = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const PageAsideBlock = ({ children, className, dividerVariant = 'content', }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [children, (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, { "$isFullWidth": dividerVariant === 'fullWidth' })] }));
+};
+exports.PageAsideBlock = PageAsideBlock;

package/node/components/PageLayout/PageAsideBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './PageAsideBlock';

package/node/components/PageLayout/PageAsideBlock/index.js

@@ -0,0 +1,17 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PageAsideBlock"), exports);