@televet/kibble-ui 1.11.0 → 1.12.0

package/build/components/Overlay/Tooltip/tooltip.types.d.ts

@@ -2,5 +2,8 @@ import { AdaptiveColor } from '../../../theme/tokens';
 import { Placement } from '@chakra-ui/react';
 export interface TooltipStyleConfig {
     color: AdaptiveColor;
+    baseStyle: {
+        zIndex: string;
+    };
 }
 export declare const tooltipPlacementOptions: Placement[];

package/build/components/Typography/TruncatedText/index.d.ts

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

package/build/components/Typography/TruncatedText/truncatedText.component.d.ts

@@ -0,0 +1,8 @@
+import { PlacementWithLogical, TextProps as ChakraTextProps } from '@chakra-ui/react';
+import { TypographyProps as ChakraTypographyProps } from '@chakra-ui/system';
+export interface TruncatedTextProps extends ChakraTextProps, ChakraTypographyProps {
+    noOfLines?: number;
+    textContent: string;
+    placement?: PlacementWithLogical;
+}
+export declare const TruncatedText: ({ noOfLines, textContent, placement, ...rest }: TruncatedTextProps) => JSX.Element;

package/build/components/Typography/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Heading';
 export * from './Text';
+export * from './TruncatedText';
 export * from './typography.types';

package/build/index.js

@@ -500,6 +500,7 @@ var zIndices = {
     skipLink: 1600,
     toast: 1700,
     tooltip: 1800,
+    tooltipExtra: 10000,
 };
 
 var TagConfig = {
@@ -1648,6 +1649,9 @@ var TooltipGlobalStyle = {
 };
 var TooltipConfig = {
     color: { light: semanticColors.background.dark, dark: semanticColors.background.light },
+    baseStyle: {
+        zIndex: 'tooltipExtra',
+    },
 };
 
 exports.AvatarVariant = void 0;
@@ -4127,6 +4131,28 @@ var TextConfig = {
     },
 };
 
+var TruncatedText = function (_a) {
+    var _b = _a.noOfLines, noOfLines = _b === void 0 ? 1 : _b, textContent = _a.textContent, placement = _a.placement, rest = __rest(_a, ["noOfLines", "textContent", "placement"]);
+    var _c = __read(React.useState(false), 2), isTextOverFlowing = _c[0], setIsTextOverFlowing = _c[1];
+    var containerRef = React.useRef(null);
+    var onCheckTextOverFlowing = React.useCallback(function (containerRefValue) {
+        var _a, _b;
+        if (containerRefValue && containerRefValue.current) {
+            var textScrollHeight = ((_a = containerRefValue.current) === null || _a === void 0 ? void 0 : _a.children[0].scrollHeight) || 0;
+            var containerOffsetHeight = ((_b = containerRefValue.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+            return textScrollHeight > containerOffsetHeight;
+        }
+        return false;
+    }, []);
+    React.useEffect(function () {
+        var checkValue = onCheckTextOverFlowing(containerRef);
+        setIsTextOverFlowing(checkValue);
+    }, [containerRef, onCheckTextOverFlowing]);
+    return (React__default["default"].createElement(react.Box, { ref: containerRef },
+        React__default["default"].createElement(Tooltip, { label: textContent || '', isDisabled: !isTextOverFlowing, placement: placement },
+            React__default["default"].createElement(react.Text, __assign({ noOfLines: noOfLines, as: "p" }, rest), textContent))));
+};
+
 var RatingDots = function (_a) {
     var minValue = _a.minValue, maxValue = _a.maxValue, isDisabled = _a.isDisabled, isInteractive = _a.isInteractive, onClick = _a.onClick, selected = _a.selected;
     var _b = __read(React.useState(), 2), selectedValue = _b[0], setSelectedValue = _b[1];
@@ -9709,6 +9735,7 @@ exports.TextareaConfig = TextareaConfig;
 exports.Tooltip = Tooltip;
 exports.TooltipConfig = TooltipConfig;
 exports.TooltipGlobalStyle = TooltipGlobalStyle;
+exports.TruncatedText = TruncatedText;
 exports.theme = theme;
 exports.tooltipPlacementOptions = tooltipPlacementOptions;
 exports.useMenuContext = useMenuContext;