@astral/ui 1.52.0 → 1.52.1

package/OverflowTypography/OverflowTypography.js

@@ -23,7 +23,7 @@ exports.OverflowTypography = (0, react_1.forwardRef)((_a, forwardedRef) => {
     const { ref, isOverflowed } = (0, useOverflowed_1.useOverflowed)(forwardedRef);
     const typographyProps = Object.assign(Object.assign({}, props), { ref,
         children,
-        rowsCount });
+        rowsCount, hasMultipleRows: rowsCount > exports.DEFAULT_ROWS_COUNT });
     if (children && isOverflowed) {
         return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ title: children, disableInteractive: true }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(styles_1.OverflowTypographyWrapper, Object.assign({}, typographyProps)) })));
     }

package/OverflowTypography/hooks/useOverflowed/useOverflowed.js

@@ -9,7 +9,17 @@ const useOverflowed = (forwardedRef) => {
         ? forwardedRef
         : localRef;
     const [isOverflowed, setOverflow] = (0, react_1.useState)(false);
-    const handleResize = (0, react_1.useCallback)((0, lodash_es_1.debounce)(([{ target, contentRect }]) => setOverflow(contentRect.height < target.scrollHeight), 500), []);
+    const handleResize = (0, react_1.useCallback)((0, lodash_es_1.debounce)(([{ target, contentRect }]) => {
+        /**
+         * @description сверка высоты дом ноды и высоты скролл контейнера, если скролл больше, то значит компонент переполнен контентом
+         */
+        const isScrollHeightBigger = contentRect.height < target.scrollHeight;
+        /**
+         * @description сверка ширины дом ноды и ширины скролл контейнера, если скролл больше, то значит компонент переполнен контентом
+         */
+        const isScrollWidthBigger = target.scrollWidth > contentRect.width;
+        setOverflow(isScrollHeightBigger || isScrollWidthBigger);
+    }, 500), []);
     const resizeObserver = (0, react_1.useMemo)(() => new ResizeObserver(handleResize), []);
     (0, react_1.useLayoutEffect)(() => {
         if (ref === null || ref === void 0 ? void 0 : ref.current) {

package/OverflowTypography/styles.d.ts

@@ -2,4 +2,6 @@
 import { OverflowedProps } from './OverflowTypography';
 export declare const OverflowTypographyWrapper: import("@emotion/styled").StyledComponent<Pick<import("react").PropsWithChildren<import("../Typography").TypographyProps>, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    hasMultipleRows: boolean;
 } & Required<OverflowedProps>, {}, {}>;

package/OverflowTypography/styles.js

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

package/esm/OverflowTypography/OverflowTypography.js

@@ -20,7 +20,7 @@ export const OverflowTypography = forwardRef((_a, forwardedRef) => {
     const { ref, isOverflowed } = useOverflowed(forwardedRef);
     const typographyProps = Object.assign(Object.assign({}, props), { ref,
         children,
-        rowsCount });
+        rowsCount, hasMultipleRows: rowsCount > DEFAULT_ROWS_COUNT });
     if (children && isOverflowed) {
         return (_jsx(Tooltip, Object.assign({ title: children, disableInteractive: true }, tooltipProps, { children: _jsx(OverflowTypographyWrapper, Object.assign({}, typographyProps)) })));
     }

package/esm/OverflowTypography/hooks/useOverflowed/useOverflowed.js

@@ -6,7 +6,17 @@ export const useOverflowed = (forwardedRef) => {
         ? forwardedRef
         : localRef;
     const [isOverflowed, setOverflow] = useState(false);
-    const handleResize = useCallback(debounce(([{ target, contentRect }]) => setOverflow(contentRect.height < target.scrollHeight), 500), []);
+    const handleResize = useCallback(debounce(([{ target, contentRect }]) => {
+        /**
+         * @description сверка высоты дом ноды и высоты скролл контейнера, если скролл больше, то значит компонент переполнен контентом
+         */
+        const isScrollHeightBigger = contentRect.height < target.scrollHeight;
+        /**
+         * @description сверка ширины дом ноды и ширины скролл контейнера, если скролл больше, то значит компонент переполнен контентом
+         */
+        const isScrollWidthBigger = target.scrollWidth > contentRect.width;
+        setOverflow(isScrollHeightBigger || isScrollWidthBigger);
+    }, 500), []);
     const resizeObserver = useMemo(() => new ResizeObserver(handleResize), []);
     useLayoutEffect(() => {
         if (ref === null || ref === void 0 ? void 0 : ref.current) {

package/esm/OverflowTypography/styles.d.ts

@@ -2,4 +2,6 @@
 import { OverflowedProps } from './OverflowTypography';
 export declare const OverflowTypographyWrapper: import("@emotion/styled").StyledComponent<Pick<import("react").PropsWithChildren<import("../Typography").TypographyProps>, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    hasMultipleRows: boolean;
 } & Required<OverflowedProps>, {}, {}>;

package/esm/OverflowTypography/styles.js

@@ -1,15 +1,17 @@
 import { styled } from '../styles';
 import { Typography } from '../Typography';
+// проверки на rowsCount в стилях нужны для того, чтобы элементы в одну строку обрезались бы по буквенно
+// но если нужно обрезание по нескольким строчкам, тогда элементы будут обрезаться по словам
 export const OverflowTypographyWrapper = styled(Typography, {
-    shouldForwardProp: (name) => name !== 'rowsCount',
+    shouldForwardProp: (name) => name !== 'rowsCount' && name !== 'hasMultipleRows',
 }) `
   /* stylelint-disable-next-line */
-  display: -webkit-box;
+  display: ${({ hasMultipleRows }) => (hasMultipleRows ? '-webkit-box' : '')};
   max-width: 100%;
   overflow: hidden;
 
-  white-space: initial;
+  white-space: ${({ hasMultipleRows }) => hasMultipleRows ? 'initial' : 'nowrap'};
   text-overflow: ellipsis;
   -webkit-line-clamp: ${({ rowsCount }) => rowsCount};
-  -webkit-box-orient: vertical;
+  -webkit-box-orient: ${({ hasMultipleRows }) => hasMultipleRows ? 'vertical' : ''};
 `;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@astral/ui",
-  "version": "1.52.0",
+  "version": "1.52.1",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.52.0",
+    "@astral/icons": "^1.52.1",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",