@cleartrip/ct-design-tooltip 4.0.0 → 5.1.0

package/src/webStyle.ts

@@ -0,0 +1,354 @@
+import { overlayBorderRadius, positions } from './constants';
+import { Theme } from '@cleartrip/ct-design-theme';
+
+export const getTooltipBorderSize = (borderSize: `${overlayBorderRadius}`, theme: Theme) => {
+  switch (borderSize) {
+    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 getTooltipAutoPositionStyle = ({
+  labelRef,
+  tooltipRef,
+  anchorRef,
+}: {
+  labelRef: React.RefObject<HTMLDivElement | null>;
+  tooltipRef: React.RefObject<HTMLDivElement | null>;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+}) => {
+  const anchorElement = anchorRef?.current || document.body;
+
+  if (tooltipRef?.current && labelRef?.current && anchorElement) {
+    const anchorElementStyleData = anchorElement.getBoundingClientRect();
+    const tooltipElementStyleData = tooltipRef.current.getBoundingClientRect();
+
+    const { right: anchorRight, bottom: anchorBottom } = anchorElementStyleData;
+    const { right: tooltipRight, bottom: tooltipBottom } = tooltipElementStyleData;
+
+    const tooltipHeight = tooltipRef.current.offsetHeight;
+    const tooltipWidth = tooltipRef.current.offsetWidth;
+
+    const labelHeight = labelRef.current.offsetHeight;
+    const labelWidth = labelRef.current.offsetWidth;
+
+    if (tooltipRight > anchorRight && tooltipBottom > anchorBottom) {
+      /* BOTTOM-RIGHT */
+      return {
+        left: tooltipWidth - labelWidth < 0 ? tooltipWidth - labelWidth : -(tooltipWidth - labelWidth),
+        top: -(tooltipHeight + 10),
+      };
+    } else if (tooltipBottom > anchorBottom) {
+      /* BOTTOM - CENTER */
+      return {
+        top: -(tooltipHeight + 10),
+      };
+    } else if (tooltipRight > anchorRight) {
+      /* RIGHT - CENTER */
+      return {
+        left: tooltipWidth - labelWidth < 0 ? tooltipWidth - labelWidth : -(tooltipWidth - labelWidth),
+        top: labelHeight + 10,
+      };
+    } else {
+      return {
+        top: labelHeight + 10,
+      };
+    }
+  }
+
+  return {};
+};
+
+export const getTooltipBottomPosition = ({
+  labelRef,
+  tooltipRef,
+  anchorRef,
+}: {
+  labelRef: React.RefObject<HTMLDivElement | null>;
+  tooltipRef: React.RefObject<HTMLDivElement | null>;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+}) => {
+  const anchorElement = anchorRef?.current || document.body;
+  if (labelRef?.current && tooltipRef?.current) {
+    const { right: anchorRight, left: anchorLeft } = anchorElement.getBoundingClientRect();
+    const { right: labelRight, left: labelLeft } = labelRef.current.getBoundingClientRect();
+    const tooltipWidth = tooltipRef.current.offsetWidth;
+
+    const labelHeight = labelRef.current.offsetHeight;
+    const labelWidth = labelRef.current.offsetWidth;
+
+    let leftPosition =
+      tooltipWidth - labelWidth < 0 ? (tooltipWidth - labelWidth) / 2 : -(tooltipWidth - labelWidth) / 2;
+
+    if (tooltipWidth > labelWidth && anchorRight - labelRight < (tooltipWidth - labelWidth) / 2) {
+      leftPosition -= (tooltipWidth - labelWidth) / 2 - (anchorRight - labelRight) + 4;
+    } else if (tooltipWidth > labelWidth && labelLeft - anchorLeft < (tooltipWidth - labelWidth) / 2) {
+      leftPosition += (tooltipWidth - labelWidth) / 2 - (labelLeft - anchorLeft) + 4;
+    }
+
+    return {
+      top: labelHeight + 10,
+      left: leftPosition,
+    };
+  }
+  return {};
+};
+
+export const getTooltipTopPosition = ({
+  labelRef,
+  tooltipRef,
+  anchorRef,
+}: {
+  labelRef: React.RefObject<HTMLDivElement | null>;
+  tooltipRef: React.RefObject<HTMLDivElement | null>;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+}) => {
+  const anchorElement = anchorRef?.current || document.body;
+  if (labelRef?.current && tooltipRef?.current) {
+    const { right: anchorRight, left: anchorLeft } = anchorElement.getBoundingClientRect();
+    const { right: labelRight, left: labelLeft } = labelRef.current.getBoundingClientRect();
+    const tooltipWidth = tooltipRef.current.offsetWidth;
+    const tooltipHeight = tooltipRef.current.offsetHeight;
+
+    const labelWidth = labelRef.current.offsetWidth;
+
+    let leftPosition =
+      tooltipWidth - labelWidth < 0 ? (tooltipWidth - labelWidth) / 2 : -(tooltipWidth - labelWidth) / 2;
+
+    if (tooltipWidth > labelWidth && anchorRight - labelRight < (tooltipWidth - labelWidth) / 2) {
+      leftPosition -= (tooltipWidth - labelWidth) / 2 - (anchorRight - labelRight) + 4;
+    } else if (tooltipWidth > labelWidth && labelLeft - anchorLeft < (tooltipWidth - labelWidth) / 2) {
+      leftPosition += (tooltipWidth - labelWidth) / 2 - (labelLeft - anchorLeft) + 4;
+    }
+
+    return {
+      top: -(tooltipHeight + 10),
+      left: leftPosition,
+    };
+  }
+  return {};
+};
+
+export const getTooltipPosition = ({
+  position,
+  labelRef,
+  tooltipRef,
+  anchorRef,
+}: {
+  position: `${positions}`;
+  labelRef: React.RefObject<HTMLDivElement | null>;
+  tooltipRef: React.RefObject<HTMLDivElement | null>;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+  theme: Theme;
+}) => {
+  if (labelRef?.current && tooltipRef?.current) {
+    const tooltipHeight = tooltipRef.current.offsetHeight;
+    const tooltipWidth = tooltipRef.current.offsetWidth;
+
+    const labelHeight = labelRef.current.offsetHeight;
+    const labelWidth = labelRef.current.offsetWidth;
+
+    switch (position) {
+      case positions.LEFT: {
+        return {
+          left: -(tooltipWidth + 10),
+          top: -(tooltipHeight / 2 - labelHeight / 2),
+        };
+      }
+      case positions.RIGHT: {
+        return {
+          left: labelWidth + 10,
+          top: -(tooltipHeight / 2 - labelHeight / 2),
+        };
+      }
+      case positions.TOP: {
+        return getTooltipTopPosition({
+          labelRef,
+          tooltipRef,
+          anchorRef,
+        });
+      }
+      case positions.BOTTOM: {
+        return getTooltipBottomPosition({
+          labelRef,
+          tooltipRef,
+          anchorRef,
+        });
+      }
+      case positions.AUTO: {
+        return getTooltipAutoPositionStyle({
+          labelRef,
+          tooltipRef,
+          anchorRef,
+        });
+      }
+      default: {
+        return {
+          left: labelWidth,
+          top: -(tooltipHeight / 2 - labelHeight / 2),
+        };
+      }
+    }
+  }
+};
+
+export const getTooltipAutoArrowStyles = ({
+  labelRef,
+  tooltipRef,
+  anchorRef,
+}: {
+  labelRef: React.RefObject<HTMLDivElement | null>;
+  tooltipRef: React.RefObject<HTMLDivElement | null>;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+}) => {
+  const anchorElement = anchorRef?.current || document.body;
+  if (tooltipRef?.current && labelRef?.current && anchorElement) {
+    const anchorElementStyleData = anchorElement.getBoundingClientRect();
+    const tooltipElementStyleData = tooltipRef.current.getBoundingClientRect();
+
+    const { right: anchorRight, bottom: anchorBottom } = anchorElementStyleData;
+    const { right: tooltipRight, bottom: tooltipBottom } = tooltipElementStyleData;
+
+    const labelHeight = labelRef.current.offsetHeight;
+    const labelWidth = labelRef.current.offsetWidth;
+
+    if (tooltipRight > anchorRight && tooltipBottom > anchorBottom) {
+      /* BOTTOM-RIGHT */
+      return {
+        top: -11,
+        left: labelWidth / 2,
+      };
+    } else if (tooltipBottom > anchorBottom) {
+      /* BOTTOM - CENTER */
+      return {
+        top: -11,
+        left: labelWidth / 2,
+      };
+    } else if (tooltipRight > anchorRight) {
+      /* RIGHT - CENTER */
+      return {
+        rotate: '180deg',
+        left: labelWidth / 2,
+        top: labelHeight + 5,
+      };
+    } else {
+      return {
+        rotate: '180deg',
+        left: labelWidth / 2,
+        top: labelHeight + 5,
+      };
+    }
+  }
+
+  return {};
+};
+
+export const getTooltipArrowStyles = ({
+  position,
+  labelRef,
+  tooltipRef,
+  anchorRef,
+}: {
+  position: `${positions}`;
+  labelRef: React.RefObject<HTMLDivElement | null>;
+  tooltipRef: React.RefObject<HTMLDivElement | null>;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+  theme: Theme;
+}) => {
+  if (labelRef?.current && tooltipRef?.current) {
+    const labelWidth = labelRef.current.offsetWidth;
+    const labelHeight = labelRef.current.offsetHeight;
+
+    switch (position) {
+      case positions.TOP: {
+        return {
+          top: -11,
+          left: labelWidth / 2,
+        };
+      }
+      case positions.BOTTOM: {
+        return {
+          rotate: '180deg',
+          top: labelHeight + 5,
+          left: labelWidth / 2,
+        };
+      }
+      case positions.LEFT: {
+        return {
+          rotate: '-90deg',
+          top: 0,
+          left: -16,
+        };
+      }
+      case positions.RIGHT: {
+        return {
+          rotate: '90deg',
+          top: 0,
+          left: labelWidth - 1,
+        };
+      }
+      case positions.AUTO: {
+        return getTooltipAutoArrowStyles({ labelRef, tooltipRef, anchorRef });
+      }
+      default: {
+        return {
+          rotate: '90deg',
+          top: 0,
+          left: labelWidth,
+        };
+      }
+    }
+  }
+
+  return {};
+};
+
+export const getTooltipStyles = ({
+  borderSize,
+  position,
+  labelRef,
+  tooltipRef,
+  anchorRef,
+  theme,
+}: {
+  borderSize: `${overlayBorderRadius}`;
+  position: `${positions}`;
+  labelRef: React.RefObject<HTMLDivElement | null>;
+  tooltipRef: React.RefObject<HTMLDivElement | null>;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+  theme: Theme;
+}) => {
+  const tooltipPosition = getTooltipPosition({ position, labelRef, tooltipRef, anchorRef, theme }) || {};
+  return {
+    ...tooltipPosition,
+    ...getTooltipBorderSize(borderSize, theme),
+  };
+};

package/dist/StyledTooltip/StyledTooltip.d.ts

@@ -1,4 +0,0 @@
-import { StyledTooltipProps } from './type';
-declare const StyledTooltip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTooltipProps, never>;
-export default StyledTooltip;
-//# sourceMappingURL=StyledTooltip.d.ts.map

package/dist/StyledTooltip/StyledTooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledTooltip.d.ts","sourceRoot":"","sources":["../../packages/components/Tooltip/src/StyledTooltip/StyledTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE5C,QAAA,MAAM,aAAa,yHAOlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/StyledTooltip/index.d.ts

@@ -1,2 +0,0 @@
-export { default as styledTooltip } from './StyledTooltip';
-//# sourceMappingURL=index.d.ts.map

package/dist/StyledTooltip/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/Tooltip/src/StyledTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/StyledTooltip/style.d.ts

@@ -1,6 +0,0 @@
-import { StyledTooltipProps } from './type';
-import { Theme } from '@cleartrip/ct-design-theme';
-export declare const getStyledTooltipStyles: ({ backgroundColor, width, theme, borderRadius, }: StyledTooltipProps & {
-    theme: Theme;
-}) => import("styled-components").FlattenSimpleInterpolation;
-//# sourceMappingURL=style.d.ts.map

package/dist/StyledTooltip/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/Tooltip/src/StyledTooltip/style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEnD,eAAO,MAAM,sBAAsB;WAKF,KAAK;4DAarC,CAAC"}

package/dist/StyledTooltip/type.d.ts

@@ -1,6 +0,0 @@
-export interface StyledTooltipProps {
-    backgroundColor?: string;
-    width?: string;
-    borderRadius?: string;
-}
-//# sourceMappingURL=type.d.ts.map

package/dist/StyledTooltip/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../packages/components/Tooltip/src/StyledTooltip/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/TooltipArrow/StyledTooltipArrow/StyledTooltipArrow.d.ts

@@ -1,4 +0,0 @@
-import { StyledTooltipArrowProps } from './type';
-declare const StyledTooltipArrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTooltipArrowProps, never>;
-export default StyledTooltipArrow;
-//# sourceMappingURL=StyledTooltipArrow.d.ts.map

package/dist/TooltipArrow/StyledTooltipArrow/StyledTooltipArrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledTooltipArrow.d.ts","sourceRoot":"","sources":["../../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/StyledTooltipArrow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,QAAQ,CAAC;AAEjD,QAAA,MAAM,kBAAkB,8HAOvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/TooltipArrow/StyledTooltipArrow/index.d.ts

@@ -1,2 +0,0 @@
-export { default as styledTooltipArrow } from './StyledTooltipArrow';
-//# sourceMappingURL=index.d.ts.map

package/dist/TooltipArrow/StyledTooltipArrow/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/TooltipArrow/StyledTooltipArrow/style.d.ts

@@ -1,7 +0,0 @@
-import { CSSObject } from 'styled-components';
-import { StyledTooltipArrowProps } from './type';
-import { Theme } from '@cleartrip/ct-design-theme';
-export declare const getStyledTooltipArrowStyles: ({ theme, transform, marginLeft, marginRight, }: StyledTooltipArrowProps & {
-    theme: Theme;
-}) => CSSObject;
-//# sourceMappingURL=style.d.ts.map

package/dist/TooltipArrow/StyledTooltipArrow/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEnD,eAAO,MAAM,2BAA2B;WAKF,KAAK;MAAK,SAQ/C,CAAC"}

package/dist/TooltipArrow/StyledTooltipArrow/type.d.ts

@@ -1,8 +0,0 @@
-import { CSSProperties } from "styled-components";
-export interface StyledTooltipArrowProps {
-    transform?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    css?: CSSProperties;
-}
-//# sourceMappingURL=type.d.ts.map

package/dist/TooltipArrow/StyledTooltipArrow/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,uBAAuB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,aAAa,CAAC;CACpB"}

package/dist/TooltipArrow/TooltipArrow.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { TooltipArrowProps } from './type';
-declare const TooltipArrow: React.FC<TooltipArrowProps>;
-export default TooltipArrow;
-//# sourceMappingURL=TooltipArrow.d.ts.map

package/dist/TooltipArrow/TooltipArrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TooltipArrow.d.ts","sourceRoot":"","sources":["../../packages/components/Tooltip/src/TooltipArrow/TooltipArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAS7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/TooltipArrow/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './TooltipArrow';
-//# sourceMappingURL=index.d.ts.map

package/dist/TooltipArrow/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/Tooltip/src/TooltipArrow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/TooltipArrow/style.d.ts

@@ -1,30 +0,0 @@
-import { ArrowDirectionType } from '../type';
-export declare const arrowStyle: (arrowPosition: ArrowDirectionType) => {
-    transform: string;
-    marginRight?: undefined;
-    marginLeft?: undefined;
-} | {
-    marginRight: string;
-    transform: string;
-    marginLeft?: undefined;
-} | {
-    marginLeft: string;
-    transform: string;
-    marginRight?: undefined;
-};
-export declare const getTooltipArrowStyles: ({ arrowPosition }: {
-    arrowPosition: ArrowDirectionType;
-}) => {
-    transform: string;
-    marginRight?: undefined;
-    marginLeft?: undefined;
-} | {
-    marginRight: string;
-    transform: string;
-    marginLeft?: undefined;
-} | {
-    marginLeft: string;
-    transform: string;
-    marginRight?: undefined;
-};
-//# sourceMappingURL=style.d.ts.map

package/dist/TooltipArrow/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/Tooltip/src/TooltipArrow/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,UAAU,kBAAmB,kBAAkB;;;;;;;;;;;;CA8B3D,CAAC;AAEF,eAAO,MAAM,qBAAqB;mBAAwC,kBAAkB;;;;;;;;;;;;;CAI3F,CAAC"}

package/dist/TooltipArrow/type.d.ts

@@ -1,7 +0,0 @@
-import { ArrowDirectionType } from '../type';
-import { TooltipArrowStyleConfigProps } from '@cleartrip/ct-design-types';
-export interface TooltipArrowProps {
-    arrowPosition: ArrowDirectionType;
-    styleConfig?: TooltipArrowStyleConfigProps;
-}
-//# sourceMappingURL=type.d.ts.map

package/dist/TooltipArrow/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../packages/components/Tooltip/src/TooltipArrow/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAE1E,MAAM,WAAW,iBAAiB;IACjC,aAAa,EAAE,kBAAkB,CAAC;IAClC,WAAW,CAAC,EAAE,4BAA4B,CAAA;CAC1C"}