@cleartrip/ct-design-tooltip 4.0.0 → 5.1.0

package/src/constants.ts

@@ -0,0 +1,20 @@
+export enum positions {
+  TOP = 'top',
+  RIGHT = 'right',
+  BOTTOM = 'bottom',
+  LEFT = 'left',
+  AUTO = 'auto',
+}
+
+export enum overlayBorderRadius {
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+  XL = 'xl',
+}
+
+export enum HOVER_TYPE {
+  ENTER = 'ENTER',
+  LEAVE = 'LEAVE',
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as Tooltip } from './Tooltip';
+export type * from './type';
+export * from './constants';

package/src/style.ts

@@ -0,0 +1,370 @@
+import { Theme } from '@cleartrip/ct-design-theme';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import { getDeviceHeight, getDeviceWidth, isMobile } from '@cleartrip/ct-design-common-utils';
+
+import { IMeasurements } from './type';
+import { overlayBorderRadius, positions } from './constants';
+import { ViewStyle } from '@cleartrip/ct-design-types';
+
+export type positionType = `${positions}`;
+export type overlayBorderRadiusType = `${overlayBorderRadius}`;
+
+export const staticTooltipStyles = makeStyles((theme) => {
+  return {
+    root: {
+      position: 'relative',
+    },
+    labelContainerStyles: {
+      width: (isMobile() ? 100 : 'fit-content') as unknown as number,
+      flexDirection: 'row',
+    },
+    overlayStyles: {
+      flexDirection: 'row',
+      position: 'absolute',
+      width: theme?.size[50],
+      zIndex: theme?.zIndex.tooltip,
+      backgroundColor: theme?.color.background.defaultDarkest,
+      paddingVertical: theme?.spacing[1],
+      paddingHorizontal: theme?.spacing[2],
+      borderRadius: theme?.border.radius[8],
+    },
+    tooltipArrow: {
+      display: 'flex',
+      position: 'absolute',
+      zIndex: theme?.zIndex.tooltip,
+    },
+  };
+});
+
+const getTooltipArrowAutoPositionStyle = ({ measurements }: { measurements: IMeasurements }) => {
+  const { labelContainer, overlayContainer } = measurements;
+  const screenWidth = getDeviceWidth();
+  const screenHeight = getDeviceHeight();
+
+  if (labelContainer && overlayContainer) {
+    const tooltipHeight = overlayContainer.height ?? 0;
+    const labelHeight = labelContainer.height ?? 0;
+    const labelWidth = labelContainer.width ?? 0;
+    const labelLeftEdge = labelContainer.leftEdge ?? 0;
+    const labelRightEdge = labelContainer.rightEdge ?? 0;
+
+    // Calculate available space in each direction
+    const spaceAbove = labelContainer.y;
+    const spaceBelow = screenHeight - (labelContainer.y + labelHeight);
+    const spaceLeft = labelLeftEdge;
+    const spaceRight = screenWidth - labelRightEdge;
+
+    // Determine arrow position based on tooltip position
+    if (spaceBelow >= tooltipHeight + 10) {
+      return {
+        transform: `rotate(180deg)`,
+        top: labelHeight + 5,
+        left: labelWidth / 2,
+      };
+    } else if (spaceAbove >= tooltipHeight + 10) {
+      return {
+        top: -11,
+        left: labelWidth / 2,
+      };
+    } else if (spaceRight >= overlayContainer.width + 10) {
+      return {
+        transform: `rotate(90deg)`,
+        top: labelHeight - 15,
+        left: labelWidth - 1,
+      };
+    } else if (spaceLeft >= overlayContainer.width + 10) {
+      return {
+        transform: `rotate(-90deg)`,
+        top: labelHeight - 15,
+        left: -16,
+      };
+    }
+
+    // Default to bottom arrow if no space is available
+    return {
+      transform: `rotate(180deg)`,
+      top: labelHeight + 5,
+      left: labelWidth / 2,
+    };
+  }
+
+  return { left: 0, top: 0 };
+};
+
+export const getOverlayTopPosition = ({ measurements }: { measurements: IMeasurements }) => {
+  const tooltipWidth = measurements?.overlayContainer.width || 0;
+  const labelWidth = measurements?.labelContainer?.width || 0;
+  const screenWidth = getDeviceWidth();
+  const leftEdge = measurements.labelContainer.leftEdge || 0;
+  const rightEdge = measurements.labelContainer.rightEdge || 0;
+  let leftPosition = 0;
+
+  if (tooltipWidth > labelWidth) {
+    const labelCenter = (leftEdge + rightEdge) / 2;
+
+    leftPosition = (labelCenter - tooltipWidth) / 2;
+
+    if (leftPosition < 0) {
+      leftPosition = 0;
+    } else if (leftPosition + tooltipWidth > screenWidth) {
+      leftPosition = screenWidth - tooltipWidth;
+    }
+  } else {
+    leftPosition = labelWidth / 2 - tooltipWidth / 2;
+
+    if (leftPosition < 0) {
+      leftPosition = 0;
+    } else if (leftPosition + tooltipWidth > screenWidth) {
+      leftPosition = screenWidth - tooltipWidth;
+    }
+  }
+
+  return {
+    top: -(measurements?.overlayContainer?.height + 10),
+    left: leftPosition,
+  };
+};
+
+export const getOverlayBottomPosition = ({ measurements }: { measurements: IMeasurements }) => {
+  const tooltipWidth = measurements?.overlayContainer.width || 0;
+  const labelWidth = measurements?.labelContainer?.width || 0;
+  const screenWidth = getDeviceWidth();
+  const leftEdge = measurements.labelContainer.leftEdge || 0;
+  const rightEdge = measurements.labelContainer.rightEdge || 0;
+  let leftPosition = 0;
+
+  if (tooltipWidth > labelWidth) {
+    const labelCenter = (leftEdge + rightEdge) / 2;
+
+    leftPosition = (labelCenter - tooltipWidth) / 2;
+
+    if (leftPosition < 0) {
+      leftPosition = 0;
+    } else if (leftPosition + tooltipWidth > screenWidth) {
+      leftPosition = screenWidth - tooltipWidth;
+    }
+  } else {
+    leftPosition = labelWidth / 2 - tooltipWidth / 2;
+
+    if (leftPosition < 0) {
+      leftPosition = 0;
+    } else if (leftPosition + tooltipWidth > screenWidth) {
+      leftPosition = screenWidth - tooltipWidth;
+    }
+  }
+
+  return {
+    top: measurements.labelContainer.height + 10,
+    left: leftPosition,
+  };
+};
+
+export const getTooltipAutoPositionStyle = ({ measurements }: { measurements: IMeasurements }) => {
+  const { labelContainer, overlayContainer } = measurements;
+  const screenWidth = getDeviceWidth();
+  const screenHeight = getDeviceHeight();
+
+  // Ensure labelContainer and overlayContainer are defined
+  if (labelContainer && overlayContainer) {
+    const tooltipHeight = overlayContainer.height ?? 0;
+    const tooltipWidth = overlayContainer.width ?? 0;
+    const labelHeight = labelContainer.height ?? 0;
+    const labelWidth = labelContainer.width ?? 0;
+    const labelLeftEdge = labelContainer.leftEdge ?? 0;
+    const labelRightEdge = labelContainer.rightEdge ?? 0;
+
+    // Calculate available space in each direction
+    const spaceAbove = labelContainer.y;
+    const spaceBelow = screenHeight - (labelContainer.y + labelHeight);
+    const spaceLeft = labelLeftEdge;
+    const spaceRight = screenWidth - labelRightEdge;
+
+    // Determine best position based on available space
+    if (spaceBelow >= tooltipHeight + 10) {
+      return getOverlayBottomPosition({ measurements });
+    } else if (spaceAbove >= tooltipHeight + 10) {
+      return getOverlayTopPosition({ measurements });
+    } else if (spaceRight >= tooltipWidth + 10) {
+      return {
+        left: labelWidth + 10,
+        top: -(tooltipHeight / 2 - labelHeight / 2),
+      };
+    } else if (spaceLeft >= tooltipWidth + 10) {
+      return {
+        left: -(tooltipWidth + 10),
+        top: -(tooltipHeight / 2 - labelHeight / 2),
+      };
+    }
+
+    // Default to bottom if no space is available
+    return getOverlayBottomPosition({ measurements });
+  }
+
+  return { left: 0, top: 0 };
+};
+
+export const getOverlayPositionStyles = ({
+  position,
+  measurements,
+}: {
+  position: positionType;
+  measurements: IMeasurements;
+}) => {
+  const labelHeight = measurements.labelContainer.height;
+  const labelWidth = measurements.labelContainer.width;
+  const tooltipHeight = measurements.overlayContainer.height;
+  const tooltipWidth = measurements.overlayContainer.width;
+  switch (position) {
+    case positions.TOP: {
+      return {
+        ...getOverlayTopPosition({ measurements }),
+      };
+    }
+    case positions.RIGHT: {
+      return {
+        left: labelWidth + 10,
+        top: -(tooltipHeight / 2 - labelHeight / 2),
+      };
+    }
+    case positions.BOTTOM: {
+      return {
+        ...getOverlayBottomPosition({ measurements }),
+      };
+    }
+    case positions.LEFT: {
+      return {
+        left: -(tooltipWidth + 10),
+        top: -(tooltipHeight / 2 - labelHeight / 2),
+      };
+    }
+    case positions.AUTO: {
+      return { ...getTooltipAutoPositionStyle({ measurements }) };
+    }
+
+    default: {
+      return {
+        left: 0,
+      };
+    }
+  }
+};
+
+export const getOverlayBorderStyles = ({
+  theme,
+  borderRadius,
+}: {
+  theme: Theme;
+  borderRadius: `${overlayBorderRadius}`;
+}) => {
+  switch (borderRadius) {
+    case overlayBorderRadius.XS: {
+      return {
+        borderRadius: theme.border.radius[4],
+      };
+    }
+    case overlayBorderRadius.SM: {
+      return {
+        borderRadius: theme.border.radius[6],
+      };
+    }
+    case overlayBorderRadius.MD: {
+      return {
+        borderRadius: theme.border.radius[8],
+      };
+    }
+    case overlayBorderRadius.LG: {
+      return {
+        borderRadius: theme.border.radius[16],
+      };
+    }
+    case overlayBorderRadius.XL: {
+      return {
+        borderRadius: theme.border.radius[32],
+      };
+    }
+
+    default: {
+      return {
+        borderRadius: theme.border.radius[8],
+      };
+    }
+  }
+};
+
+export const getTooltipOverlayStyles = ({
+  theme,
+  position,
+  borderRadius,
+  measurements,
+}: {
+  theme: Theme;
+  overlayWidth: ViewStyle['width'];
+  position: `${positionType}`;
+  borderRadius: `${overlayBorderRadius}`;
+  measurements: IMeasurements;
+}) => {
+  return {
+    ...getOverlayPositionStyles({ position, measurements }),
+    ...getOverlayBorderStyles({ theme, borderRadius }),
+  };
+};
+
+// ---------- ARROW STYLES ----------------- //
+
+const getTooltipArrowPosition = ({
+  position,
+  measurements,
+}: {
+  position: `${positionType}`;
+  measurements: IMeasurements;
+}) => {
+  const labelWidth = measurements?.labelContainer.width || 0;
+  const labelHeight = measurements?.labelContainer.height || 0;
+
+  switch (position) {
+    case positions.TOP: {
+      return {
+        top: -11,
+        left: labelWidth / 2,
+      };
+    }
+    case positions.BOTTOM: {
+      return {
+        transform: `rotate(180deg)`,
+        top: labelHeight + 5,
+        left: labelWidth / 2,
+      };
+    }
+    case positions.LEFT: {
+      return {
+        transform: `rotate(-90deg)`,
+        top: labelHeight - 15,
+        left: -16,
+      };
+    }
+    case positions.RIGHT: {
+      return {
+        transform: `rotate(90deg)`,
+        top: labelHeight - 15,
+        left: labelWidth - 1,
+      };
+    }
+    case positions.AUTO: {
+      return {
+        ...getTooltipArrowAutoPositionStyle({ measurements }),
+      };
+    }
+  }
+};
+
+export const getTooltipArrowStyles = ({
+  position,
+  measurements,
+}: {
+  position: `${positionType}`;
+  measurements: IMeasurements;
+}) => {
+  return {
+    ...getTooltipArrowPosition({ position, measurements }),
+  };
+};

package/src/type.ts

@@ -0,0 +1,111 @@
+import { Styles, ViewStyle } from '@cleartrip/ct-design-types';
+import { ReactElement, SVGProps } from 'react';
+
+import { positions, overlayBorderRadius } from './constants';
+export interface ITooltipProps {
+  /**
+   * The content to be displayed inside the tooltip.
+   */
+  children: ReactElement;
+
+  /**
+   * The container for the label of the tooltip.
+   */
+  labelContainer: React.ReactNode;
+
+  /**
+   * Optional width of the tooltip.
+   */
+  tooltipWidth?: ViewStyle['width'];
+
+  /**
+   * Optional border radius for the tooltip, defined by overlayBorderRadiusType.
+   */
+  tooltipBorderRadius?: `${overlayBorderRadius}`;
+
+  /**
+   * Optional position of the tooltip, defined by positionType.
+   */
+  position?: `${positions}`;
+
+  /**
+   * Configuration for styling the tooltip components.
+   */
+  styleConfig?: {
+    /**
+     * Styles for the root of the tooltip.
+     */
+    root?: Styles[];
+
+    /**
+     * Styles for the label container of the tooltip.
+     */
+    labelContainerStyles?: Styles[];
+
+    /**
+     *
+     */
+
+    arrowStyles?: Styles[];
+
+    /**
+     * Styles for any icons within the tooltip.
+     */
+    iconStyles?: Styles[];
+
+    /**
+     * Styles for the overlay of the tooltip.
+     */
+    overlayStyles?: Styles[];
+  };
+
+  /**
+   * Indicates whether the tooltip is open or closed.
+   */
+  open?: boolean;
+  /**
+   * Indicates whether the tooltip should animate on open/close.
+   */
+  animate?: boolean;
+
+  /**
+   * Enables hovering over the tooltip container to keep it open.
+   */
+  enableTooltipContainerHovering?: boolean;
+
+  /**
+   * Ref object for the anchor element.
+   */
+  anchorRef?: React.RefObject<unknown>;
+
+  /**
+   * Ref object for the tooltip container.
+   */
+  svgPathProps?: SVGProps<SVGSVGElement>;
+}
+
+export interface IDimensionsProps {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  leftEdge?: number;
+  rightEdge?: number;
+}
+export interface IMeasurements {
+  labelContainer: IDimensionsProps;
+  overlayContainer: IDimensionsProps;
+  anchorRef: IDimensionsProps;
+}
+
+export interface TooltipStyles {
+  top?: number;
+  left?: number;
+  borderRadius?: number;
+}
+
+export interface TooltipArrowStyles {
+  rotate?: string;
+  top?: number;
+  left?: number;
+}