@datarobot/design-system 28.2.2

package/cjs/tour/helpers.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTourDataById = void 0;
+const getTourDataById = (tourId, advancedTourId, toursSettings) => {
+  const emptyTour = {
+    id: '',
+    steps: [],
+    onCompleteHandler: () => {},
+    onSkipHandler: () => {}
+  };
+  const emptyAdvancedTour = {
+    id: '',
+    steps: [],
+    onSkipHandler: () => {}
+  };
+  if (tourId === '' && advancedTourId === '') {
+    return {
+      tour: emptyTour,
+      advancedTour: emptyAdvancedTour
+    };
+  }
+  const {
+    advancedTours,
+    tours
+  } = toursSettings;
+  return {
+    tour: tours.find(({
+      id
+    }) => id === tourId) ?? emptyTour,
+    advancedTour: advancedTours.find(({
+      id
+    }) => id === advancedTourId) ?? emptyAdvancedTour
+  };
+};
+exports.getTourDataById = getTourDataById;

package/cjs/tour/hooks.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TourHooksParams } from './types';
+export declare const useTour: ({ isShowTour, tourId, }: TourHooksParams) => {
+    advancedTourStepId: number;
+    showTour: boolean;
+    setStep: import("react").Dispatch<import("react").SetStateAction<import("./types").StepProps | undefined>>;
+    setAdvancedTourEnabled: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    advancedTourEnabled: boolean;
+    setShowAdvancedTour: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setAdvancedTourStepId: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setAdvancedTourId: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setIsHighlighted: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setShowTour: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setTourId: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setStepId: import("react").Dispatch<import("react").SetStateAction<number>>;
+    stepId: number;
+};

package/cjs/tour/hooks.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTour = void 0;
+var _react = require("react");
+var _context = require("./context");
+const useTour = ({
+  isShowTour = false,
+  tourId = ''
+}) => {
+  const {
+    setTourId,
+    setShowTour,
+    setStepId,
+    stepId,
+    ...rest
+  } = (0, _react.useContext)(_context.TourContext);
+  (0, _react.useEffect)(() => {
+    setShowTour(isShowTour);
+    setTourId(tourId);
+    return () => {
+      setShowTour(false);
+      setTourId('');
+      setStepId(0);
+    };
+  }, [isShowTour, tourId]);
+  return (0, _react.useMemo)(() => ({
+    setShowTour,
+    setTourId,
+    setStepId,
+    stepId,
+    ...rest
+  }), [tourId, stepId]);
+};
+exports.useTour = useTour;

package/cjs/tour/index.d.ts

@@ -0,0 +1,5 @@
+import Tour from './tour';
+import { AdvancedTour, useAdvancedTour, ANCHOR_PLACEMENT } from './advanced-tour';
+import { TourContextProvider, TourContext } from './context';
+import { useTour } from './hooks';
+export { Tour, AdvancedTour, TourContextProvider, TourContext, useTour, useAdvancedTour, ANCHOR_PLACEMENT, };

package/cjs/tour/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ANCHOR_PLACEMENT", {
+  enumerable: true,
+  get: function () {
+    return _advancedTour.ANCHOR_PLACEMENT;
+  }
+});
+Object.defineProperty(exports, "AdvancedTour", {
+  enumerable: true,
+  get: function () {
+    return _advancedTour.AdvancedTour;
+  }
+});
+Object.defineProperty(exports, "Tour", {
+  enumerable: true,
+  get: function () {
+    return _tour.default;
+  }
+});
+Object.defineProperty(exports, "TourContext", {
+  enumerable: true,
+  get: function () {
+    return _context.TourContext;
+  }
+});
+Object.defineProperty(exports, "TourContextProvider", {
+  enumerable: true,
+  get: function () {
+    return _context.TourContextProvider;
+  }
+});
+Object.defineProperty(exports, "useAdvancedTour", {
+  enumerable: true,
+  get: function () {
+    return _advancedTour.useAdvancedTour;
+  }
+});
+Object.defineProperty(exports, "useTour", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useTour;
+  }
+});
+var _tour = _interopRequireDefault(require("./tour"));
+var _advancedTour = require("./advanced-tour");
+var _context = require("./context");
+var _hooks = require("./hooks");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/cjs/tour/tour.d.ts

@@ -0,0 +1,11 @@
+import { TourProps } from './types';
+import './tour.less';
+/**
+ * Component to demonstrate tour onboarding information.
+ * Could be attached to any component on the page by its selector.
+ * @uxr-only-supported
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ * */
+declare const Tour: ({ step, setNextStep, setPrevStep, onCompleteHandler, showTour, onSkipHandler, stepNumber, totalSteps, className, }: TourProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Tour;

package/cjs/tour/tour.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactPopper = require("../react-popper");
+var _tourFooter = require("./components/tour-footer");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Component to demonstrate tour onboarding information.
+ * Could be attached to any component on the page by its selector.
+ * @uxr-only-supported
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ * */
+const Tour = ({
+  step,
+  setNextStep,
+  setPrevStep,
+  onCompleteHandler,
+  showTour,
+  onSkipHandler,
+  stepNumber = 0,
+  totalSteps = 0,
+  className = ''
+}) => {
+  const ref = (0, _react.useRef)(null);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const {
+    selector,
+    placement,
+    content,
+    imageSrc,
+    altText
+  } = step;
+  let observer = null;
+  (0, _react.useEffect)(() => {
+    let anchorElement = document.querySelector(selector);
+    if (anchorElement) {
+      setAnchorEl(anchorElement);
+    } else {
+      observer = new MutationObserver(() => {
+        anchorElement = document.querySelector(selector);
+        if (anchorElement) {
+          observer?.disconnect();
+          setAnchorEl(anchorElement);
+        }
+      });
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+    };
+  }, [selector]);
+  if (!anchorEl) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPopper.Popper, {
+    open: showTour,
+    rootEl: ref,
+    container: anchorEl,
+    placement: placement || _reactPopper.POPPER_PLACEMENTS_TYPES.BOTTOM,
+    anchorEl: anchorEl,
+    strategy: _reactPopper.POPPER_STRATEGY_OPTIONS.FIXED,
+    popperModifiers: [_reactPopper.OFFSET_MODIFIER, _reactPopper.FLIP_MODIFIER],
+    children: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('tour-container popout popout-transition react-tooltip', className),
+      ref: ref,
+      "test-id": "tour-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: "tour-image",
+        "test-id": "tour-img",
+        src: imageSrc,
+        alt: altText
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "tour-content",
+        "test-id": "tour-content",
+        children: typeof content === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: content
+        }) : content
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tourFooter.TourFooter, {
+        stepNumber: stepNumber,
+        totalSteps: totalSteps,
+        onNextHandler: setNextStep,
+        onPrevHandler: setPrevStep,
+        onCompleteHandler: onCompleteHandler,
+        onSkipHandler: onSkipHandler
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-popper-arrow": ""
+      })]
+    })
+  });
+};
+var _default = exports.default = Tour;

package/cjs/tour/types.d.ts

@@ -0,0 +1,80 @@
+import { Dispatch, SetStateAction, ReactElement } from 'react';
+import { PopperPlacementsType } from '../react-popper';
+import { AdvancedTourSettings } from './advanced-tour';
+export type TourHandlerFunction = () => void;
+export type SkipTourHandlerFunction = (stepNumber: number) => void;
+export type StepProps = {
+    /** Query selector which will be used to find the anchor component. */
+    selector: string;
+    /** Tooltip placement. */
+    placement?: PopperPlacementsType;
+    /** Tour component content. */
+    content: ReactElement | string | null;
+    /** Image/Gif source. */
+    imageSrc: string;
+    /** Image/Gif alternative text. */
+    altText?: string;
+};
+export type TourProps = {
+    /** Step object that contains required information to show tour. */
+    step: StepProps;
+    /** Function is called on click on the next button.  */
+    setNextStep: () => void;
+    /** Function is called on click on the prev button. */
+    setPrevStep: () => void;
+    /** Function is called on click on the next button when the last step is reached. */
+    onCompleteHandler: TourHandlerFunction;
+    /** Shows the current step number. */
+    stepNumber?: number;
+    /** Shows the total amount of steps in the tour. */
+    totalSteps?: number;
+    /** Defines should we show Tour or not. */
+    showTour: boolean;
+    /** Function is called when skip button is clicked. */
+    onSkipHandler: SkipTourHandlerFunction;
+    /** ClassName to add custom styles. */
+    className?: string;
+};
+export type SimpleTourSettings = {
+    id: string;
+    steps: StepProps[];
+    onSkipHandler: SkipTourHandlerFunction;
+    onCompleteHandler: TourHandlerFunction;
+};
+export type TourAccessibilityType = {
+    tourAnchorButtonAriaLabel: string;
+    nextTourButtonAriaLabel: string;
+    previousTourButtonAriaLabel: string;
+};
+export type TourContextProps = {
+    children: ReactElement;
+    toursSettings: ToursSettings;
+    a11yProps?: TourAccessibilityType;
+};
+export type TourContextProviderValue = {
+    /** The number of the shown tour step. */
+    stepId: number;
+    /** The number of the shown tour step. */
+    advancedTourStepId: number;
+    /** The boolean flag defines to show (or not to show) the tour. */
+    showTour: boolean;
+    setTourId: Dispatch<SetStateAction<string>>;
+    setStepId: Dispatch<SetStateAction<number>>;
+    setStep: Dispatch<SetStateAction<StepProps | undefined>>;
+    setShowTour: Dispatch<SetStateAction<boolean>>;
+    setAdvancedTourEnabled: Dispatch<SetStateAction<boolean>>;
+    advancedTourEnabled: boolean;
+    setShowAdvancedTour: Dispatch<SetStateAction<boolean>>;
+    setAdvancedTourStepId: Dispatch<SetStateAction<number>>;
+    setAdvancedTourId: Dispatch<SetStateAction<string>>;
+    setIsHighlighted: Dispatch<SetStateAction<boolean>>;
+};
+export type TourHooksParams = {
+    isShowTour: boolean;
+    tourId: string;
+};
+export type ToursSettings = {
+    tours: SimpleTourSettings[];
+    advancedTours: AdvancedTourSettings[];
+    tourClassName?: string;
+};

package/cjs/tour/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/truncate-string/index.d.ts

@@ -0,0 +1,2 @@
+export type { TruncateStringProps, ELLIPSIS_PLACE_TYPES, EllipsisPlaceType, } from './truncate-string';
+export { default as TruncateString } from './truncate-string';

package/cjs/truncate-string/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TruncateString", {
+  enumerable: true,
+  get: function () {
+    return _truncateString.default;
+  }
+});
+var _truncateString = _interopRequireDefault(require("./truncate-string"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/cjs/truncate-string/truncate-string.d.ts

@@ -0,0 +1,20 @@
+import './truncate-string.less';
+import { ValueOf } from '../types';
+export declare const ELLIPSIS_PLACE_TYPES: {
+    readonly MIDDLE: "middle";
+    readonly END: "end";
+};
+export type EllipsisPlaceType = ValueOf<typeof ELLIPSIS_PLACE_TYPES>;
+export type TruncateStringProps = {
+    text?: string;
+    ellipsisString?: string;
+    truncateAt?: EllipsisPlaceType;
+    className?: string | null;
+    testId?: string;
+};
+/**
+ * Component that truncates long text in the middle or end.
+ * 🚨 NOTE ➡️: max-width & min-width for a parent element is required for proper work. 🚨
+ * */
+declare const TruncateString: ({ text, ellipsisString, truncateAt, className, testId, }: TruncateStringProps) => import("react/jsx-runtime").JSX.Element;
+export default TruncateString;

package/cjs/truncate-string/truncate-string.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ELLIPSIS_PLACE_TYPES = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useDebounce = require("../hooks/use-debounce");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ELLIPSIS_PLACE_TYPES = exports.ELLIPSIS_PLACE_TYPES = {
+  MIDDLE: 'middle',
+  END: 'end'
+};
+const ellipsisPlace = {
+  middle: 50,
+  end: 100
+};
+const sizeTolerance = {
+  max: 4,
+  // 4px,
+  tolerance: 0.02 // 2%
+};
+const getSizeTolerance = value => {
+  const currentTolerance = value * sizeTolerance.tolerance;
+  return currentTolerance <= sizeTolerance.max ? Math.round(currentTolerance) : sizeTolerance.max;
+};
+const truncateString = (text, ellipsisString, truncateAt, parent = 0, children = 0) => {
+  const textLength = text.length;
+  const percentage = ellipsisPlace[truncateAt];
+  if (textLength === 0) {
+    return '';
+  }
+  if (children <= parent) {
+    return text;
+  }
+  // Recheck for tolerance
+  if (children - getSizeTolerance(children) <= parent) {
+    return text;
+  }
+
+  // get number of chars that related truncatedAt coefficient which will fit in the container
+  const charIndex = size => Math.floor((textLength - ellipsisString.length) * size / children);
+
+  // slice from first char till portioned text. We always need leaving the first char in a small container
+  const left = text.slice(0, Math.max(1, charIndex(parent * (percentage / 100))));
+  const right = text.slice(textLength - charIndex(parent * ((100 - percentage) / 100)), textLength);
+  return `${left}${ellipsisString}${right}`;
+};
+/**
+ * Component that truncates long text in the middle or end.
+ * 🚨 NOTE ➡️: max-width & min-width for a parent element is required for proper work. 🚨
+ * */
+const TruncateString = ({
+  text = '',
+  ellipsisString = '...',
+  truncateAt = ELLIPSIS_PLACE_TYPES.MIDDLE,
+  className = null,
+  testId = ''
+}) => {
+  const [truncatedString, setTruncatedString] = (0, _react.useState)(null);
+  const [isTruncating, setTruncating] = (0, _react.useState)(false);
+  const parentRef = (0, _react.useRef)(null);
+  const textRef = (0, _react.useRef)(null);
+  let timer;
+  const handleResize = (0, _useDebounce.useDebounce)(() => {
+    (0, _reactDom.flushSync)(() => {
+      setTruncating(true);
+    });
+    const truncated = truncateString(text, ellipsisString, truncateAt, parentRef.current?.offsetWidth, textRef.current?.offsetWidth);
+    (0, _reactDom.flushSync)(() => {
+      setTruncatedString(truncated);
+      setTruncating(false);
+    });
+  }, 100);
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timer);
+    };
+  }, [text]);
+  (0, _react.useLayoutEffect)(() => {
+    setTruncating(true);
+    // use native timeout because we do not change scope and don't want to trigger digest
+    timer = setTimeout(() => {
+      const truncated = truncateString(text, ellipsisString, truncateAt, parentRef.current?.offsetWidth, textRef.current?.offsetWidth);
+      setTruncatedString(truncated);
+      (0, _reactDom.flushSync)(() => {
+        setTruncatedString(truncated);
+        setTruncating(false);
+      });
+    }, 0);
+  }, [text]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: parentRef,
+    className: (0, _classnames.default)('truncate-string', className),
+    "test-id": testId,
+    children: [isTruncating && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "original-text",
+      ref: textRef,
+      children: text
+    }), !isTruncating && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      ref: textRef,
+      children: truncatedString
+    })]
+  });
+};
+var _default = exports.default = TruncateString;

package/cjs/truncate-with-tooltip/index.d.ts

@@ -0,0 +1,5 @@
+import TruncateWithTooltip from './truncate-with-tooltip';
+import { truncateContent } from './truncate-content';
+import { TooltipDelay } from './timer-delays';
+export type { TooltipDelay };
+export { TruncateWithTooltip, truncateContent };

package/cjs/truncate-with-tooltip/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TruncateWithTooltip", {
+  enumerable: true,
+  get: function () {
+    return _truncateWithTooltip.default;
+  }
+});
+Object.defineProperty(exports, "truncateContent", {
+  enumerable: true,
+  get: function () {
+    return _truncateContent.truncateContent;
+  }
+});
+var _truncateWithTooltip = _interopRequireDefault(require("./truncate-with-tooltip"));
+var _truncateContent = require("./truncate-content");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/cjs/truncate-with-tooltip/timer-delays.d.ts

@@ -0,0 +1,8 @@
+import { TooltipDelayType } from '../tooltip';
+export declare const TOOLTIP_DELAY_VALUES: {
+    none: number;
+    fast: number;
+    medium: number;
+    slow: number;
+};
+export type TooltipDelay = TooltipDelayType;

package/cjs/truncate-with-tooltip/timer-delays.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOOLTIP_DELAY_VALUES = void 0;
+var _tooltip = require("../tooltip");
+const TOOLTIP_DELAY_VALUES = exports.TOOLTIP_DELAY_VALUES = {
+  [_tooltip.TOOLTIP_DELAY_TYPES.NONE]: 0,
+  [_tooltip.TOOLTIP_DELAY_TYPES.FAST]: 200,
+  [_tooltip.TOOLTIP_DELAY_TYPES.MEDIUM]: 500,
+  [_tooltip.TOOLTIP_DELAY_TYPES.SLOW]: 700
+};

package/cjs/truncate-with-tooltip/truncate-content.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+/** Helper function that applies truncation to the text content */
+export declare const truncateContent: (content: React.ReactNode) => import("react/jsx-runtime").JSX.Element;

package/cjs/truncate-with-tooltip/truncate-content.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.truncateContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _truncateWithTooltip = _interopRequireDefault(require("./truncate-with-tooltip"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** Helper function that applies truncation to the text content */
+const truncateContent = content => /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.default, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: content
+  })
+});
+exports.truncateContent = truncateContent;

package/cjs/truncate-with-tooltip/truncate-with-tooltip.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode, ReactElement } from 'react';
+import { TooltipDelay } from './timer-delays';
+import { TooltipPlacementsType } from '../tooltip';
+import './truncate-with-tooltip.less';
+type TruncateWithTooltipProps = {
+    /** Support only one html elements */
+    children: ReactElement;
+    /** Set tooltip placement */
+    tooltipPlacement?: TooltipPlacementsType;
+    /** Set custom tooltip text instead of content text */
+    tooltipText?: ReactNode;
+    /** Set docs link for the tooltip */
+    tooltipDocsLink?: ReactNode;
+    /** The delay type which includes a period of time to wait before showing the tooltip */
+    tooltipDelayType?: TooltipDelay;
+    tooltipTestId?: string;
+    /** Extend the styles applied to the container  */
+    className?: string;
+    /** If true, the tooltip will be disabled */
+    isDisabled?: boolean;
+    tooltipId?: string;
+};
+/**
+ * The component recognizes whether a text element is overflowed truncate it with CSS and provide full text in the tooltip.
+ * - supports custom tooltip text with custom placement.
+ * - supports only one element as children inside
+ * - need provide any HTML element inside component like <span> or <p>.
+ * 🚨 NOTE ➡️: max-width & min-width for a parent element is required for proper work. 🚨
+ * */
+declare const TruncateWithTooltip: ({ children, tooltipPlacement, tooltipText, tooltipId, tooltipDocsLink, tooltipDelayType, tooltipTestId, className, isDisabled, }: TruncateWithTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default TruncateWithTooltip;