@deque/cauldron-react 6.2.1-canary.fca8b9e6 → 6.3.0-canary.564cfe71

package/lib/components/TextEllipsis/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type TooltipProps } from '../Tooltip';
+interface TextEllipsisProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: string;
+    maxLines?: number;
+    as?: React.ElementType;
+    refProp?: string;
+    tooltipProps?: Omit<TooltipProps, 'target' | 'association'>;
+}
+declare const TextEllipsis: React.ForwardRefExoticComponent<TextEllipsisProps & React.RefAttributes<HTMLElement>>;
+export default TextEllipsis;

package/lib/components/Tooltip/index.d.ts

@@ -5,7 +5,7 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     target: React.RefObject<HTMLElement> | HTMLElement;
     variant?: 'text' | 'info' | 'big';
-    association?: 'aria-labelledby' | 'aria-describedby';
+    association?: 'aria-labelledby' | 'aria-describedby' | 'none';
     show?: boolean | undefined;
     placement?: Placement;
     portal?: React.RefObject<HTMLElement> | HTMLElement;

package/lib/index.d.ts

@@ -55,6 +55,7 @@ export { default as Listbox, ListboxOption, ListboxGroup } from './components/Li
 export { default as Combobox, ComboboxOption, ComboboxGroup } from './components/Combobox';
 export { default as Popover } from './components/Popover';
 export { default as Timeline, TimelineItem } from './components/Timeline';
+export { default as TextEllipsis } from './components/TextEllipsis';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -1659,6 +1659,7 @@ function Tooltip(_a) {
     var _j = tslib.__read(React.useState(null), 2), targetElement = _j[0], setTargetElement = _j[1];
     var _k = tslib.__read(React.useState(null), 2), tooltipElement = _k[0], setTooltipElement = _k[1];
     var _l = tslib.__read(React.useState(null), 2), arrowElement = _l[0], setArrowElement = _l[1];
+    var hasAriaAssociation = association !== 'none';
     var _m = reactPopper.usePopper(targetElement, tooltipElement, {
         placement: initialPlacement,
         modifiers: [
@@ -1760,14 +1761,16 @@ function Tooltip(_a) {
     }, [tooltipElement, show, hide]);
     // Keep the target's id in sync
     React.useEffect(function () {
-        var idRefs = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute(association);
-        if (!hasIdRef(idRefs, id)) {
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute(association, addIdRef(idRefs, id));
+        if (hasAriaAssociation) {
+            var idRefs = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute(association);
+            if (!hasIdRef(idRefs, id)) {
+                targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute(association, addIdRef(idRefs, id));
+            }
         }
         return function () {
-            if (targetElement) {
-                var idRefs_1 = targetElement.getAttribute(association);
-                targetElement.setAttribute(association, removeIdRef(idRefs_1, id));
+            if (targetElement && hasAriaAssociation) {
+                var idRefs = targetElement.getAttribute(association);
+                targetElement.setAttribute(association, removeIdRef(idRefs, id));
             }
         };
     }, [targetElement, id, association]);
@@ -3959,6 +3962,51 @@ function TimelineItem(_a) {
         React__default["default"].createElement("div", { className: "TimelineItem__details" }, children)));
 }
 
+var TextEllipsis = React__default["default"].forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, maxLines = _a.maxLines, as = _a.as, tooltipProps = _a.tooltipProps, props = tslib.__rest(_a, ["className", "children", "maxLines", "as", "tooltipProps"]);
+    var Element = 'div';
+    var sharedRef = useSharedRef(ref);
+    var _b = tslib.__read(React.useState(false), 2), showTooltip = _b[0], setShowTooltip = _b[1];
+    if (as) {
+        Element = as;
+    }
+    else if (showTooltip) {
+        props = Object.assign({
+            role: 'button',
+            'aria-disabled': true,
+            tabIndex: 0
+        }, props);
+    }
+    if (typeof maxLines === 'number') {
+        props.style = tslib.__assign({ WebkitLineClamp: maxLines || 2 }, props.style);
+    }
+    React.useEffect(function () {
+        var listener = function () {
+            requestAnimationFrame(function () {
+                var overflowElement = sharedRef.current;
+                if (!overflowElement) {
+                    return;
+                }
+                var hasOverflow = typeof maxLines === 'number'
+                    ? overflowElement.clientHeight < overflowElement.scrollHeight
+                    : overflowElement.clientWidth < overflowElement.scrollWidth;
+                setShowTooltip(hasOverflow);
+            });
+        };
+        var observer = new ResizeObserver(listener);
+        observer.observe(sharedRef.current);
+        return function () {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Element, tslib.__assign({ className: classNames__default["default"]('TextEllipsis', className, {
+                'TextEllipsis--multiline': !!maxLines
+            }), ref: sharedRef }, props), children),
+        showTooltip && (React__default["default"].createElement(Tooltip, tslib.__assign({ target: sharedRef, association: "none" }, tooltipProps), children))));
+});
+TextEllipsis.displayName = 'TextEllipsis';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4116,6 +4164,7 @@ exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.TagButton = TagButton;
 exports.TagLabel = TagLabel;
+exports.TextEllipsis = TextEllipsis;
 exports.TextField = TextField;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.2.1-canary.fca8b9e6",
+  "version": "6.3.0-canary.564cfe71",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",