@astral/ui 1.52.0 → 1.53.0

package/ClickAwayListener/ClickAwayListener.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { UseClickAwayListenerOptions } from '../hooks';
-export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref'> & {
+export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref' | 'isActive'> & {
     children: JSX.Element;
+    isActive?: boolean;
 };
 /**
  * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect

package/ClickAwayListener/ClickAwayListener.js

@@ -6,7 +6,7 @@ const hooks_1 = require("../hooks");
 /**
  * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect
  */
-const ClickAwayListener = ({ onClickAway, preventBubbling, isActive, children, }) => {
+const ClickAwayListener = ({ onClickAway, preventBubbling, isActive = true, children, }) => {
     const ref = (0, react_1.useRef)(null);
     (0, hooks_1.useClickAwayEffect)({ ref, onClickAway, preventBubbling, isActive });
     return react_1.Children.only((0, react_1.cloneElement)(children, { ref }));

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/ClickAwayListener/ClickAwayListener.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { UseClickAwayListenerOptions } from '../hooks';
-export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref'> & {
+export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref' | 'isActive'> & {
     children: JSX.Element;
+    isActive?: boolean;
 };
 /**
  * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect

package/esm/ClickAwayListener/ClickAwayListener.js

@@ -3,7 +3,7 @@ import { useClickAwayEffect } from '../hooks';
 /**
  * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect
  */
-export const ClickAwayListener = ({ onClickAway, preventBubbling, isActive, children, }) => {
+export const ClickAwayListener = ({ onClickAway, preventBubbling, isActive = true, children, }) => {
     const ref = useRef(null);
     useClickAwayEffect({ ref, onClickAway, preventBubbling, isActive });
     return Children.only(cloneElement(children, { ref }));

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.53.0",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.52.0",
+    "@astral/icons": "^1.53.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",