@indico-data/design-system 2.56.0 → 2.57.0

package/lib/components/index.d.ts

@@ -25,3 +25,4 @@ export { TanstackTable } from './tanstackTable';
 export { Tooltip } from './tooltip';
 export { BarSpinner } from './loading-indicators/BarSpinner/BarSpinner';
 export { CirclePulse } from './loading-indicators/CirclePulse/CirclePulse';
+export { Truncate } from './truncate';

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

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

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Truncate } from './Truncate';
+import { TruncateProps } from './types';
+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 NoTooltip: Story;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export { Truncate } from './Truncate';

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

@@ -0,0 +1,7 @@
+export interface TruncateProps {
+    lineClamp?: number;
+    truncateString: string;
+    hasTooltip?: boolean;
+    tooltipId?: string;
+    [key: string]: any;
+}

package/lib/index.css

@@ -2637,6 +2637,27 @@ form {
   }
 }
 
+.truncate-wrapper {
+  width: 100%;
+  display: block;
+}
+.truncate-wrapper .truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  display: inline-block;
+}
+.truncate-wrapper .truncate-clip {
+  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%;
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }

package/lib/index.d.ts

@@ -617,4 +617,14 @@ declare function BarSpinner({ width, id, height, className, ...rest }: {
     [key: string]: any;
 }): react_jsx_runtime.JSX.Element;
 
-export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };
+interface TruncateProps {
+    lineClamp?: number;
+    truncateString: string;
+    hasTooltip?: boolean;
+    tooltipId?: string;
+    [key: string]: any;
+}
+
+declare const Truncate: ({ lineClamp, truncateString, hasTooltip, tooltipId, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
+
+export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };

package/lib/index.esm.css

@@ -2637,6 +2637,27 @@ form {
   }
 }
 
+.truncate-wrapper {
+  width: 100%;
+  display: block;
+}
+.truncate-wrapper .truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  display: inline-block;
+}
+.truncate-wrapper .truncate-clip {
+  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%;
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }

package/lib/index.esm.js

@@ -8,6 +8,7 @@ import ReactDOM__default from 'react-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import n, { css, ThemeProvider } from 'styled-components';
 import ReactSelect, { components as components$1 } from 'react-select';
+import { webcrypto } from 'node:crypto';
 
 const indicons = {
     'indico-o-white': (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 100 100", children: jsx("path", { d: "M100 50c0 27.6-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0s50 22.4 50 50zM50 19.4c-16.9 0-30.6 13.7-30.6 30.6S33.1 80.6 50 80.6 80.6 66.9 80.6 50 66.9 19.4 50 19.4zm0 21.7c-4.9 0-8.9 4-8.9 8.9s4 8.9 8.9 8.9 8.9-4 8.9-8.9-4-8.9-8.9-8.9z" }) })),
@@ -42874,5 +42875,56 @@ function BarSpinner(_a) {
     return (jsx("div", Object.assign({ className: `bar-spinner ${className}`, id: id, style: style }, rest, { children: jsx("span", {}) })));
 }
 
-export { Badge, BarSpinner, Button$1 as Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select$1 as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, arrow$2 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, computePosition$2 as computePosition, detectOverflow$1 as detectOverflow, flip$2 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$1 as hide, inline, limitShift, offset$2 as offset, platform$1 as platform, registerFontAwesomeIcons, shift$2 as shift, size, useFloating$1 as useFloating };
+const urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+const POOL_SIZE_MULTIPLIER = 128;
+let pool, poolOffset;
+function fillPool(bytes) {
+  if (!pool || pool.length < bytes) {
+    pool = Buffer.allocUnsafe(bytes * POOL_SIZE_MULTIPLIER);
+    webcrypto.getRandomValues(pool);
+    poolOffset = 0;
+  } else if (poolOffset + bytes > pool.length) {
+    webcrypto.getRandomValues(pool);
+    poolOffset = 0;
+  }
+  poolOffset += bytes;
+}
+function nanoid(size = 21) {
+  fillPool((size |= 0));
+  let id = '';
+  for (let i = poolOffset - size; i < poolOffset; i++) {
+    id += urlAlphabet[pool[i] & 63];
+  }
+  return id
+}
+
+const Truncate = (_a) => {
+    var { lineClamp = 0, truncateString, hasTooltip = true, tooltipId } = _a, rest = __rest(_a, ["lineClamp", "truncateString", "hasTooltip", "tooltipId"]);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const id = (tooltipId !== null && tooltipId !== void 0 ? tooltipId : nanoid()).replace(/[^a-zA-Z0-9-_]/g, '_');
+    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);
+                }
+            }
+        };
+        checkTruncation();
+        window.addEventListener('resize', checkTruncation);
+        return () => window.removeEventListener('resize', checkTruncation);
+    }, [id, lineClamp]);
+    const truncateStyle = {
+        '--line-clamp': lineClamp,
+    };
+    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": 100, id: id, border: "solid 1px var(--pf-border-color)", children: truncateString }))] }));
+};
+
+export { Badge, BarSpinner, Button$1 as Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select$1 as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, arrow$2 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, computePosition$2 as computePosition, detectOverflow$1 as detectOverflow, flip$2 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$1 as hide, inline, limitShift, offset$2 as offset, platform$1 as platform, registerFontAwesomeIcons, shift$2 as shift, size, useFloating$1 as useFloating };
 //# sourceMappingURL=index.esm.js.map