@indico-data/design-system 3.6.3 → 3.7.0

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

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

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

@@ -2,11 +2,10 @@ 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. */
     numLines?: number;
-    /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
-    truncateString: 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;
+    /** The children to display. This will be displayed in the truncate component. */
+    children: React.ReactNode;
 }

package/lib/index.d.ts

@@ -1025,15 +1025,14 @@ 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. */
     numLines?: number;
-    /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
-    truncateString: 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;
+    /** The children to display. This will be displayed in the truncate component. */
+    children: React.ReactNode;
 }
 
-declare const Truncate: ({ numLines, truncateString, tooltipOptions, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
+declare const Truncate: ({ numLines, tooltipOptions, children, ...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.js

@@ -13649,7 +13649,26 @@ const DatePicker = (props) => {
         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
     };
     const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
-    return (jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
+    const wrapperRef = useRef(null);
+    // Disable tab focus on all date picker elements
+    useEffect(() => {
+        const disableTabFocus = () => {
+            if (wrapperRef.current) {
+                const focusableElements = wrapperRef.current.querySelectorAll('button, input, select, textarea, a, [tabindex]:not([tabindex="-1"])');
+                focusableElements.forEach((element) => {
+                    element.tabIndex = -1;
+                });
+            }
+        };
+        // Run immediately and set up observer for dynamic elements
+        disableTabFocus();
+        const observer = new MutationObserver(disableTabFocus);
+        if (wrapperRef.current) {
+            observer.observe(wrapperRef.current, { childList: true, subtree: true });
+        }
+        return () => observer.disconnect();
+    }, []);
+    return (jsxs("div", { className: "date-picker-wrapper", tabIndex: -1, ref: wrapperRef, children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
 };
 
 const IconTriggerDatePicker = (props) => {
@@ -43238,7 +43257,7 @@ function v4(options, buf, offset) {
 }
 
 const Truncate = (_a) => {
-    var { numLines = 1, truncateString, tooltipOptions = {} } = _a, rest = __rest(_a, ["numLines", "truncateString", "tooltipOptions"]);
+    var { numLines = 1, tooltipOptions = {}, children } = _a, rest = __rest(_a, ["numLines", "tooltipOptions", "children"]);
     const [isTruncated, setIsTruncated] = useState(false);
     const id = useMemo(() => v4().replace(/[^a-zA-Z0-9-_]/g, '_'), []);
     const ref = useRef(null);
@@ -43264,7 +43283,7 @@ const Truncate = (_a) => {
     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 })))] }));
+                }) }, rest, { children: children })), isTruncated && children && !tooltipOptions.disabled && (jsx(Tooltip, Object.assign({}, tooltipOptions, { id: id, children: children })))] }));
 };
 
 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}