@indico-data/design-system 3.6.0 → 3.6.2

package/.vscode/settings.json

@@ -6,5 +6,6 @@
   "eslint.nodePath": ".yarn/sdks",
   "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "testing.automaticallyOpenTestResults": "neverOpen"
 }

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

@@ -1,5 +1,6 @@
+import { CSSProperties } from 'react';
 import { PlacesType } from 'react-tooltip';
-interface TooltipProps {
+export interface TooltipProps {
     id: string;
     /** Whether the tooltip should be shown on click */
     clickToShow?: boolean;
@@ -8,12 +9,13 @@ interface TooltipProps {
     /** The delay in milliseconds before the tooltip is hidden */
     delayHide?: number;
     children: React.ReactNode;
-    /** This is an override for the z-index of the tooltip */
-    zIndex?: number;
     /** The placement of the tooltip */
     place?: PlacesType;
+    /** The width of the tooltip */
+    width?: CSSProperties['width'];
+    /** The max width of the tooltip */
+    maxWidth?: CSSProperties['maxWidth'];
     /** The content of the tooltip */
     [key: string]: any;
 }
-export declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, zIndex, place, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, place, width, maxWidth, opacity, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tooltip/Tooltip.stories.d.ts

@@ -4,3 +4,5 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Tooltip>;
 export declare const Default: Story;
+export declare const TooltipWithWidth: Story;
+export declare const TooltipWithMaxWidth: Story;

package/lib/components/truncate/Truncate.d.ts

@@ -1,2 +1,2 @@
 import { TruncateProps } from './types';
-export declare const Truncate: ({ lineClamp, truncateString, hasTooltip, tooltipId, ...rest }: TruncateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Truncate: ({ numLines, truncateString, tooltipOptions, ...rest }: TruncateProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/truncate/Truncate.stories.d.ts

@@ -5,5 +5,8 @@ declare const meta: Meta<typeof Truncate>;
 export default meta;
 type Story = StoryObj<TruncateProps>;
 export declare const Default: Story;
-export declare const WithLineClamp: Story;
+export declare const NoTruncate: Story;
+export declare const WithNumLines: Story;
+export declare const WithTooltipOptions: Story;
 export declare const NoTooltip: Story;
+export declare const TruncateWithTooltipWidth: Story;

package/lib/components/truncate/types.d.ts

@@ -1,11 +1,12 @@
+import { TooltipProps } from '../tooltip/Tooltip';
 export interface TruncateProps {
     /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
-    lineClamp?: number;
+    numLines?: number;
     /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
     truncateString: string;
-    /** Whether to show the tooltip. If left blank, it will default to true. If set to false, the tooltip will not be shown. */
-    hasTooltip?: boolean;
-    /** The id of the tooltip. If an ID is not provided, it will generate one from uuid */
-    tooltipId?: string;
+    /** The options for the tooltip. If `disabled` is `true`, the tooltip will not be shown. If left blank, the tooltip will be shown by default. This is particularly useful if you want to set the width of the tooltip to something other than the default `max-content`. */
+    tooltipOptions?: Partial<TooltipProps> & {
+        disabled?: boolean;
+    };
     [key: string]: any;
 }

package/lib/index.css

@@ -405,6 +405,7 @@
   --pf-font-size-10xl: 6rem; /* 96px */
 }
 
+:root,
 :root [data-theme=light] {
   --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
   --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
@@ -4485,14 +4486,6 @@ a:hover,
   background-color: var(--pf-semantic-background-primary);
 }
 
-.react-tooltip {
-  z-index: 5;
-  background-color: var(--pf-semantic-background-inverted);
-  color: var(--pf-semantic-font-inverted);
-  opacity: 1 !important;
-  text-wrap: wrap;
-}
-
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
@@ -6139,7 +6132,7 @@ body div[class*=select__single-value] {
   background: var(--pf-semantic-background-accent) !important;
 }
 .tanstack-table__tbody__tr.show-hover:hover td {
-  background-color: var(--pf-semantic-border-hover) !important;
+  background-color: var(--pf-semantic-background-tertiary) !important;
   cursor: pointer;
 }
 .tanstack-table__tbody__tr.is-clicked td {
@@ -9166,20 +9159,19 @@ body div[class*=select__single-value] {
   color: inherit;
 }
 .truncate-wrapper .truncate {
-  white-space: nowrap;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 100%;
-  display: inline-block;
 }
-.truncate-wrapper .truncate-clip {
+.truncate-wrapper .truncate--multi-line {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--line-clamp);
   line-clamp: var(--line-clamp);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
+}
+.truncate-wrapper .truncate--single-line {
+  display: inline-block;
+  white-space: nowrap;
 }
 
 .Toastify__toast-theme--colored.Toastify__toast--default {

package/lib/index.d.ts

@@ -944,14 +944,16 @@ interface TooltipProps {
     /** The delay in milliseconds before the tooltip is hidden */
     delayHide?: number;
     children: React.ReactNode;
-    /** This is an override for the z-index of the tooltip */
-    zIndex?: number;
     /** The placement of the tooltip */
     place?: PlacesType;
+    /** The width of the tooltip */
+    width?: CSSProperties['width'];
+    /** The max width of the tooltip */
+    maxWidth?: CSSProperties['maxWidth'];
     /** The content of the tooltip */
     [key: string]: any;
 }
-declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, zIndex, place, ...rest }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, place, width, maxWidth, opacity, ...rest }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     /** The total number of pages to be displayed */
@@ -1020,16 +1022,16 @@ declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legend
 
 interface TruncateProps {
     /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
-    lineClamp?: number;
+    numLines?: number;
     /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
     truncateString: string;
-    /** Whether to show the tooltip. If left blank, it will default to true. If set to false, the tooltip will not be shown. */
-    hasTooltip?: boolean;
-    /** The id of the tooltip. If an ID is not provided, it will generate one from uuid */
-    tooltipId?: string;
+    /** The options for the tooltip. If `disabled` is `true`, the tooltip will not be shown. If left blank, the tooltip will be shown by default. This is particularly useful if you want to set the width of the tooltip to something other than the default `max-content`. */
+    tooltipOptions?: Partial<TooltipProps> & {
+        disabled?: boolean;
+    };
     [key: string]: any;
 }
 
-declare const Truncate: ({ lineClamp, truncateString, hasTooltip, tooltipId, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
+declare const Truncate: ({ numLines, truncateString, tooltipOptions, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
 
 export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, ConfirmationModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, InputDateRangePicker, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, LabeledSelect as SelectInput, type SelectOption, SingleInputDatePicker, SingleInputDateTimePicker, Skeleton, Stepper, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };

package/lib/index.esm.css

@@ -405,6 +405,7 @@
   --pf-font-size-10xl: 6rem; /* 96px */
 }
 
+:root,
 :root [data-theme=light] {
   --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
   --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
@@ -4485,14 +4486,6 @@ a:hover,
   background-color: var(--pf-semantic-background-primary);
 }
 
-.react-tooltip {
-  z-index: 5;
-  background-color: var(--pf-semantic-background-inverted);
-  color: var(--pf-semantic-font-inverted);
-  opacity: 1 !important;
-  text-wrap: wrap;
-}
-
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
@@ -6139,7 +6132,7 @@ body div[class*=select__single-value] {
   background: var(--pf-semantic-background-accent) !important;
 }
 .tanstack-table__tbody__tr.show-hover:hover td {
-  background-color: var(--pf-semantic-border-hover) !important;
+  background-color: var(--pf-semantic-background-tertiary) !important;
   cursor: pointer;
 }
 .tanstack-table__tbody__tr.is-clicked td {
@@ -9166,20 +9159,19 @@ body div[class*=select__single-value] {
   color: inherit;
 }
 .truncate-wrapper .truncate {
-  white-space: nowrap;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 100%;
-  display: inline-block;
 }
-.truncate-wrapper .truncate-clip {
+.truncate-wrapper .truncate--multi-line {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--line-clamp);
   line-clamp: var(--line-clamp);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
+}
+.truncate-wrapper .truncate--single-line {
+  display: inline-block;
+  white-space: nowrap;
 }
 
 .Toastify__toast-theme--colored.Toastify__toast--default {

package/lib/index.esm.js

@@ -43092,12 +43092,17 @@ const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,bas
 .styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:"base"});}));
 
 const Tooltip = (_a) => {
-    var { id, clickToShow, delayShow, delayHide, children, zIndex = 1000, place = 'top' } = _a, rest = __rest(_a, ["id", "clickToShow", "delayShow", "delayHide", "children", "zIndex", "place"]);
+    var { id, clickToShow, delayShow, delayHide, children, place = 'top', width = 'max-content', maxWidth, opacity = 1 } = _a, rest = __rest(_a, ["id", "clickToShow", "delayShow", "delayHide", "children", "place", "width", "maxWidth", "opacity"]);
     return (jsx(M, Object.assign({ style: {
             backgroundColor: 'var(--pf-semantic-background-inverted)',
             color: 'var(--pf-semantic-font-inverted)',
-            zIndex,
-        }, id: id, place: place, openOnClick: clickToShow, delayShow: delayShow, delayHide: delayHide }, rest, { children: children })));
+            width,
+            maxWidth,
+            boxSizing: 'border-box',
+            textWrap: 'wrap',
+            wordWrap: 'break-word',
+            zIndex: 1000,
+        }, className: "tooltip", id: id, place: place, openOnClick: clickToShow, delayShow: delayShow, delayHide: delayHide, opacity: opacity }, rest, { children: children })));
 };
 
 function BarSpinner(_a) {
@@ -43233,29 +43238,33 @@ function v4(options, buf, offset) {
 }
 
 const Truncate = (_a) => {
-    var { lineClamp = 0, truncateString, hasTooltip = true, tooltipId } = _a, rest = __rest(_a, ["lineClamp", "truncateString", "hasTooltip", "tooltipId"]);
+    var { numLines = 1, truncateString, tooltipOptions = {} } = _a, rest = __rest(_a, ["numLines", "truncateString", "tooltipOptions"]);
     const [isTruncated, setIsTruncated] = useState(false);
-    const id = (tooltipId !== null && tooltipId !== void 0 ? tooltipId : v4()).replace(/[^a-zA-Z0-9-_]/g, '_');
+    const id = useMemo(() => v4().replace(/[^a-zA-Z0-9-_]/g, '_'), []);
+    const ref = useRef(null);
     useEffect(() => {
         const checkTruncation = () => {
-            const element = document.querySelector(`[data-tooltip-id="${id}"]`);
-            if (element) {
-                if (lineClamp === 0) {
-                    setIsTruncated(element.scrollWidth > element.clientWidth);
-                }
-                else {
-                    setIsTruncated(element.scrollHeight > element.clientHeight);
-                }
+            const element = ref.current;
+            if (!element)
+                return;
+            if (numLines === 1) {
+                setIsTruncated(element.scrollWidth > element.clientWidth);
+            }
+            else {
+                setIsTruncated(element.scrollHeight > element.clientHeight);
             }
         };
         checkTruncation();
         window.addEventListener('resize', checkTruncation);
         return () => window.removeEventListener('resize', checkTruncation);
-    }, [id, lineClamp]);
+    }, [id, numLines]);
     const truncateStyle = {
-        '--line-clamp': lineClamp,
+        '--line-clamp': numLines,
     };
-    return (jsxs("div", { className: "truncate-wrapper", style: truncateStyle, children: [jsx("span", Object.assign({ "data-testid": `truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`, "data-tooltip-id": id, "data-tooltip-content": isTruncated ? truncateString : undefined, className: lineClamp > 0 ? 'truncate-clip' : 'truncate' }, rest, { children: truncateString })), isTruncated && truncateString && hasTooltip && (jsx(Tooltip, { "data-tooltip-delay-hide": 0, id: id, children: truncateString }))] }));
+    return (jsxs("div", { className: "truncate-wrapper", style: truncateStyle, children: [jsx("span", Object.assign({ ref: ref, "data-testid": `truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`, "data-tooltip-id": id, className: classNames('truncate', {
+                    'truncate--multi-line': numLines > 1,
+                    'truncate--single-line': numLines === 1,
+                }) }, rest, { children: truncateString })), isTruncated && truncateString && !tooltipOptions.disabled && (jsx(Tooltip, Object.assign({}, tooltipOptions, { id: id, children: truncateString })))] }));
 };
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}