@cleartrip/ct-design-tooltip 4.0.0 → 5.0.0

package/dist/webStyle.d.ts

@@ -0,0 +1,170 @@
+import { overlayBorderRadius, positions } from './constants';
+import { Theme } from '@cleartrip/ct-design-theme';
+export declare const getTooltipBorderSize: (borderSize: `${overlayBorderRadius}`, theme: Theme) => {
+    borderRadius: 4;
+} | {
+    borderRadius: 6;
+} | {
+    borderRadius: 8;
+} | {
+    borderRadius: 16;
+} | {
+    borderRadius: 32;
+};
+export declare const getTooltipAutoPositionStyle: ({ labelRef, tooltipRef, anchorRef, }: {
+    labelRef: React.RefObject<HTMLDivElement | null>;
+    tooltipRef: React.RefObject<HTMLDivElement | null>;
+    anchorRef?: React.RefObject<HTMLElement | null>;
+}) => {
+    left: number;
+    top: number;
+} | {
+    top: number;
+    left?: undefined;
+} | {
+    left?: undefined;
+    top?: undefined;
+};
+export declare const getTooltipBottomPosition: ({ labelRef, tooltipRef, anchorRef, }: {
+    labelRef: React.RefObject<HTMLDivElement | null>;
+    tooltipRef: React.RefObject<HTMLDivElement | null>;
+    anchorRef?: React.RefObject<HTMLElement | null>;
+}) => {
+    top: number;
+    left: number;
+} | {
+    top?: undefined;
+    left?: undefined;
+};
+export declare const getTooltipTopPosition: ({ labelRef, tooltipRef, anchorRef, }: {
+    labelRef: React.RefObject<HTMLDivElement | null>;
+    tooltipRef: React.RefObject<HTMLDivElement | null>;
+    anchorRef?: React.RefObject<HTMLElement | null>;
+}) => {
+    top: number;
+    left: number;
+} | {
+    top?: undefined;
+    left?: undefined;
+};
+export declare 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;
+}) => {
+    left: number;
+    top: number;
+} | {
+    top: number;
+    left?: undefined;
+} | {
+    left?: undefined;
+    top?: undefined;
+} | undefined;
+export declare const getTooltipAutoArrowStyles: ({ labelRef, tooltipRef, anchorRef, }: {
+    labelRef: React.RefObject<HTMLDivElement | null>;
+    tooltipRef: React.RefObject<HTMLDivElement | null>;
+    anchorRef?: React.RefObject<HTMLElement | null>;
+}) => {
+    top: number;
+    left: number;
+    rotate?: undefined;
+} | {
+    rotate: string;
+    left: number;
+    top: number;
+} | {
+    top?: undefined;
+    left?: undefined;
+    rotate?: undefined;
+};
+export declare 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;
+}) => {
+    top: number;
+    left: number;
+    rotate?: undefined;
+} | {
+    rotate: string;
+    left: number;
+    top: number;
+} | {
+    top?: undefined;
+    left?: undefined;
+    rotate?: undefined;
+};
+export declare 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;
+}) => {
+    borderRadius: 4;
+    left: number;
+    top: number;
+} | {
+    borderRadius: 6;
+    left: number;
+    top: number;
+} | {
+    borderRadius: 8;
+    left: number;
+    top: number;
+} | {
+    borderRadius: 16;
+    left: number;
+    top: number;
+} | {
+    borderRadius: 32;
+    left: number;
+    top: number;
+} | {
+    borderRadius: 4;
+    top: number;
+    left?: undefined;
+} | {
+    borderRadius: 6;
+    top: number;
+    left?: undefined;
+} | {
+    borderRadius: 8;
+    top: number;
+    left?: undefined;
+} | {
+    borderRadius: 16;
+    top: number;
+    left?: undefined;
+} | {
+    borderRadius: 32;
+    top: number;
+    left?: undefined;
+} | {
+    borderRadius: 4;
+    left?: undefined;
+    top?: undefined;
+} | {
+    borderRadius: 6;
+    left?: undefined;
+    top?: undefined;
+} | {
+    borderRadius: 8;
+    left?: undefined;
+    top?: undefined;
+} | {
+    borderRadius: 16;
+    left?: undefined;
+    top?: undefined;
+} | {
+    borderRadius: 32;
+    left?: undefined;
+    top?: undefined;
+};
+//# sourceMappingURL=webStyle.d.ts.map

package/dist/webStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webStyle.d.ts","sourceRoot":"","sources":["../packages/components/Tooltip/src/webStyle.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@cleartrip/ct-design-tooltip",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Tooltip Component",
   "types": "dist/index.d.ts",
   "main": "dist/ct-design-tooltip.cjs.js",
   "jsnext:main": "dist/ct-design-tooltip.esm.js",
+  "react-native": "src/index.ts",
   "module": "dist/ct-design-tooltip.esm.js",
   "sideEffects": false,
   "browser": {
@@ -12,24 +13,29 @@
     "./dist/ct-design-tooltip.cjs.js": "./dist/ct-design-tooltip.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-types": "4.0.0",
-    "@cleartrip/ct-design-transition": "4.0.0",
-    "@cleartrip/ct-design-conditional-wrap": "4.0.0",
-    "@cleartrip/ct-design-portal": "4.0.0",
-    "@cleartrip/ct-design-theme": "4.0.0",
-    "@cleartrip/ct-design-use-merge-refs": "4.0.0",
-    "@cleartrip/ct-design-icons": "26.0.0",
-    "@cleartrip/ct-design-use-isomorphic-effect": "4.0.0",
-    "@cleartrip/ct-design-container": "4.0.0"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@cleartrip/ct-design-theme": "5.0.0",
+    "@cleartrip/ct-design-container": "5.0.0",
+    "@cleartrip/ct-design-common-utils": "5.0.0",
+    "@cleartrip/ct-design-use-merge-refs": "5.0.0",
+    "@cleartrip/ct-design-icons": "5.0.0",
+    "@cleartrip/ct-design-style-manager": "5.0.0",
+    "@cleartrip/ct-design-conditional-wrap": "5.0.0",
+    "@cleartrip/ct-design-transition": "5.0.0"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.12.0",
+    "@cleartrip/ct-design-typography": "5.0.0",
+    "@cleartrip/ct-design-types": "5.0.0"
   },
-  "devDependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -38,8 +44,10 @@
   "license": "ISC",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "watch-package": "rollup -c -w",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/Tooltip.native.tsx

@@ -0,0 +1,230 @@
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Pressable, View } from 'react-native';
+import Animated, { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useNativeMergeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Container, ContainerRef } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import Conditional from '@cleartrip/ct-design-conditional-wrap';
+import { TooltipChevronDown } from '@cleartrip/ct-design-icons';
+
+import { getTooltipArrowStyles, getTooltipOverlayStyles, staticTooltipStyles } from './style';
+import { IDimensionsProps, IMeasurements, ITooltipProps } from './type';
+import { Theme } from '@cleartrip/ct-design-theme';
+
+export const getDefaultTooltipStyles = (theme: Theme) => {
+  return {
+    backgroundColor: theme.color.tooltip.primaryBg,
+    borderRadius: theme.border.radius[4],
+  };
+};
+
+const initialDimensions: IDimensionsProps = {
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0,
+  leftEdge: 0,
+  rightEdge: 0,
+};
+
+const measure = (ref: React.RefObject<View | null>): Promise<IDimensionsProps> => {
+  return new Promise((resolve) => {
+    ref.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+      if (width !== undefined && height !== undefined && pageX !== undefined && pageY !== undefined) {
+        resolve({
+          width: Math.floor(width),
+          height: Math.floor(height),
+          x: Math.floor(x),
+          y: Math.floor(y),
+          leftEdge: pageX,
+          rightEdge: pageX + Math.floor(width),
+        });
+      } else {
+        resolve(initialDimensions);
+      }
+    });
+  });
+};
+
+const Tooltip = forwardRef<ContainerRef, ITooltipProps>(
+  (
+    {
+      children,
+      position = 'right',
+      labelContainer,
+      tooltipWidth = 150,
+      tooltipBorderRadius = 'md',
+      styleConfig,
+      open = false,
+      animate = true,
+      svgPathProps,
+      anchorRef,
+    },
+    ref,
+  ) => {
+    const {
+      root: customRootStyles = [],
+      labelContainerStyles: customLabelContainerStyles = [],
+      overlayStyles: customOverlayStyles = [],
+      arrowStyles: customArrowStyles = [],
+    } = styleConfig || {};
+    const [isHovered, setIsHovered] = useState<boolean>(open);
+    const labelContainerRef = useRef<View>(null);
+    const overlayRef = useRef<View>(null);
+    const fadeAnim = useSharedValue(0);
+    const [measurements, setMeasurements] = useState<IMeasurements>({
+      labelContainer: initialDimensions,
+      overlayContainer: initialDimensions,
+      anchorRef: initialDimensions,
+    });
+
+    const dynamicTooltipStyles = useStyles(
+      (theme) => {
+        return {
+          overlayStyles: {
+            opacity: isHovered ? 1 : 0,
+            width: tooltipWidth,
+            ...getTooltipOverlayStyles({
+              theme,
+              borderRadius: tooltipBorderRadius,
+              overlayWidth: tooltipWidth,
+              position,
+              measurements,
+            }),
+          },
+        };
+      },
+      [position, measurements, tooltipWidth, isHovered, tooltipBorderRadius],
+    );
+
+    const dynamicTooltipArrowStyles = useStyles(() => {
+      return {
+        tooltipArrow: {
+          opacity: isHovered ? 1 : 0,
+          ...getTooltipArrowStyles({
+            position,
+            measurements,
+          }),
+        },
+      };
+    }, [isHovered, position, measurements]);
+
+    const mergedLabelContainerStyles = useNativeMergeStyles(
+      [staticTooltipStyles?.labelContainerStyles, ...customLabelContainerStyles],
+      [customLabelContainerStyles],
+    );
+
+    const handleLayout = useCallback(() => {
+      const calculatePosition = async () => {
+        try {
+          const labelContainer = await measure(labelContainerRef);
+          const overlayContainer = await measure(overlayRef);
+
+          /**
+           * force type casting
+           */
+          const wrapper = anchorRef ? await measure(anchorRef as React.RefObject<View>) : initialDimensions;
+
+          setMeasurements({
+            labelContainer,
+            overlayContainer,
+            anchorRef: wrapper,
+          });
+        } catch (_error) {
+          // Error handling without console.log
+        }
+      };
+
+      calculatePosition();
+    }, [anchorRef]);
+
+    const handlePress = useCallback((isVisible: boolean) => setIsHovered(isVisible), []);
+
+    useEffect(() => {
+      if (isHovered) {
+        if (animate) {
+          fadeAnim.value = withTiming(1, {
+            duration: 200,
+            easing: Easing.inOut(Easing.ease),
+          });
+        } else {
+          fadeAnim.value = 1;
+        }
+      } else {
+        if (animate) {
+          fadeAnim.value = withTiming(0, {
+            duration: 200,
+            easing: Easing.inOut(Easing.ease),
+          });
+        } else {
+          fadeAnim.value = 0;
+        }
+      }
+    }, [isHovered, fadeAnim, animate]);
+
+    useEffect(() => {
+      setIsHovered(open);
+    }, [open]);
+
+    return (
+      <Container
+        ref={ref}
+        styleConfig={{ root: [staticTooltipStyles?.root, ...customRootStyles] }}
+        onLayout={handleLayout}
+      >
+        <Pressable
+          ref={labelContainerRef}
+          style={mergedLabelContainerStyles}
+          onPressIn={() => handlePress(true)}
+          onPressOut={() => handlePress(false)}
+        >
+          {labelContainer}
+        </Pressable>
+
+        {!!children && (
+          <>
+            <Animated.View style={{ opacity: fadeAnim, position: 'absolute' }}>
+              <View ref={overlayRef}>
+                <Container
+                  styleConfig={{
+                    root: [
+                      staticTooltipStyles?.overlayStyles,
+                      dynamicTooltipStyles?.overlayStyles,
+                      ...customOverlayStyles,
+                    ],
+                  }}
+                >
+                  <Conditional
+                    condition={typeof children === 'string'}
+                    wrap={() => (
+                      <Typography variant='B2' color='neutral'>
+                        {children}
+                      </Typography>
+                    )}
+                  >
+                    {children}
+                  </Conditional>
+                </Container>
+
+                <Container
+                  styleConfig={{
+                    root: [
+                      staticTooltipStyles?.tooltipArrow,
+                      dynamicTooltipArrowStyles?.tooltipArrow,
+                      ...customArrowStyles,
+                    ],
+                  }}
+                >
+                  <TooltipChevronDown {...svgPathProps} />
+                </Container>
+              </View>
+            </Animated.View>
+          </>
+        )}
+      </Container>
+    );
+  },
+);
+Tooltip.displayName = 'Tooltip';
+export default Tooltip;

package/src/Tooltip.tsx

@@ -0,0 +1,137 @@
+import { MouseEvent, useEffect, useRef, useState, useCallback } from 'react';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { Container } from '@cleartrip/ct-design-container';
+import Conditional from '@cleartrip/ct-design-conditional-wrap';
+
+import { ITooltipProps, TooltipStyles, TooltipArrowStyles } from './type';
+import { overlayBorderRadius, positions } from './constants';
+import { staticTooltipStyles } from './style';
+import TooltipContainer from './TooltipContainer';
+import TooltipArrow from './TooltipArrow';
+import { Transition } from '@cleartrip/ct-design-transition';
+import { TooltipChevronDown } from '@cleartrip/ct-design-icons';
+import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { isEmpty } from '@cleartrip/ct-design-common-utils';
+import { getTooltipStyles, getTooltipArrowStyles } from './webStyle';
+
+const Tooltip: React.FC<ITooltipProps> = ({
+  children,
+  position = positions.RIGHT,
+  labelContainer,
+  tooltipWidth = 150,
+  tooltipBorderRadius = overlayBorderRadius.MD,
+  styleConfig,
+  enableTooltipContainerHovering = false,
+  open = false,
+  animate = true,
+  svgPathProps,
+  anchorRef,
+}) => {
+  const theme = useTheme();
+  const {
+    root: customRootStyles = [],
+    labelContainerStyles: customLabelContainerStyles = [],
+    overlayStyles: customOverlayStyles = [],
+    arrowStyles: customArrowStyles = [],
+  } = styleConfig || {};
+  const [styles, setStyles] = useState<{ tooltipStyles: TooltipStyles; tooltipArrowStyles: TooltipArrowStyles }>({
+    tooltipStyles: {},
+    tooltipArrowStyles: {},
+  });
+  const labelRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  const setTooltipStyles = useCallback(() => {
+    const tooltipStyle = getTooltipStyles({
+      borderSize: tooltipBorderRadius,
+      position,
+      labelRef,
+      tooltipRef,
+      anchorRef: anchorRef as React.RefObject<HTMLElement | null>,
+      theme,
+    });
+
+    const tooltipArrowStyle = getTooltipArrowStyles({
+      position,
+      labelRef,
+      tooltipRef,
+      anchorRef: anchorRef as React.RefObject<HTMLElement | null>,
+      theme,
+    });
+    setStyles({ tooltipStyles: tooltipStyle, tooltipArrowStyles: tooltipArrowStyle });
+  }, [tooltipBorderRadius, position, labelRef, tooltipRef, anchorRef, theme]);
+
+  useEffect(() => {
+    if (open) {
+      setTooltipStyles();
+    } else {
+      setStyles({ tooltipStyles: {}, tooltipArrowStyles: {} });
+    }
+  }, [open, setTooltipStyles]);
+
+  const canCloseTooltipContainer = (event: MouseEvent<HTMLDivElement>) => {
+    const defaultDimesstions = { right: 0, left: 0, bottom: 0, top: 0 };
+    const tooltipDimesntions = tooltipRef.current?.getBoundingClientRect() ?? defaultDimesstions;
+    const labelDimensions = labelRef.current?.getBoundingClientRect() ?? defaultDimesstions;
+
+    const { r, l, b, t } = {
+      r: Math.floor(Math.max(tooltipDimesntions.right, labelDimensions.left)),
+      l: Math.floor(Math.min(tooltipDimesntions.left, labelDimensions.right)),
+      b: Math.floor(Math.max(tooltipDimesntions.bottom, labelDimensions.top)),
+      t: Math.floor(Math.min(tooltipDimesntions.top, labelDimensions.bottom)),
+    };
+
+    const currentX = event.clientX + 1;
+    const currentY = event.clientY + 1;
+
+    return r >= currentX && l <= currentX && t <= currentY && b >= currentY;
+  };
+  const handleMouseEnter = () => {
+    setTooltipStyles();
+  };
+
+  const handleMouseLeave = (event: MouseEvent<HTMLDivElement>) => {
+    if (enableTooltipContainerHovering && canCloseTooltipContainer(event)) return;
+    setStyles({ tooltipStyles: {}, tooltipArrowStyles: {} });
+  };
+
+  const labelStyles = useWebMergeStyles([...customLabelContainerStyles], [customLabelContainerStyles]);
+
+  const dynamicTooltipStyles = useStyles(() => {
+    return {
+      tooltip: styles.tooltipStyles,
+      tooltipArrow: styles.tooltipArrowStyles,
+    };
+  }, [styles.tooltipStyles, open]);
+
+  return (
+    <Container styleConfig={{ root: [staticTooltipStyles?.root, ...customRootStyles] }}>
+      <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} ref={labelRef} className={labelStyles}>
+        {labelContainer}
+      </div>
+      {!!children && (
+        <Conditional condition={animate} wrap={(child) => <Transition type='fade'>{child}</Transition>}>
+          <>
+            <TooltipContainer
+              visible={!isEmpty(styles.tooltipStyles)}
+              width={tooltipWidth}
+              onMouseLeave={handleMouseLeave}
+              styleConfig={{ root: [dynamicTooltipStyles.tooltip, ...customOverlayStyles] }}
+              tooltipRef={tooltipRef}
+            >
+              {children}
+            </TooltipContainer>
+            <TooltipArrow
+              visible={!isEmpty(styles.tooltipArrowStyles)}
+              styleConfig={{ root: [dynamicTooltipStyles.tooltipArrow, ...customArrowStyles] }}
+            >
+              <TooltipChevronDown {...svgPathProps} />
+            </TooltipArrow>
+          </>
+        </Conditional>
+      )}
+    </Container>
+  );
+};
+
+export default Tooltip;

package/src/TooltipArrow.tsx

@@ -0,0 +1,39 @@
+import { makeStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { css } from '@emotion/css';
+import { Styles } from '@cleartrip/ct-design-types';
+import { useMemo } from 'react';
+
+const staticStyles = makeStyles((theme) => ({
+  root: {
+    zIndex: theme.zIndex.tooltip,
+    position: 'absolute',
+    display: 'flex',
+  },
+}));
+
+const webStaticStyles = css({
+  width: 'fit-content',
+});
+
+const TooltipArrow: React.FC<{
+  children: React.ReactElement;
+  visible: boolean;
+  styleConfig: {
+    root: Styles[];
+  };
+}> = ({ children, visible, styleConfig }) => {
+  const tooltipArrowClass = useMemo(
+    () =>
+      css({
+        visibility: visible ? 'visible' : 'hidden',
+      }),
+    [visible],
+  );
+  const arrowClass = useWebMergeStyles(
+    [staticStyles.root, webStaticStyles, tooltipArrowClass, ...styleConfig.root],
+    [tooltipArrowClass, styleConfig.root],
+  );
+  return <div className={arrowClass}>{children}</div>;
+};
+
+export default TooltipArrow;

package/src/TooltipContainer.tsx

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+
+import { makeStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { Styles, ViewStyle } from '@cleartrip/ct-design-types';
+import { css } from '@emotion/css';
+
+const staticStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: theme.color.background.defaultDarkest,
+    position: 'absolute',
+    zIndex: theme.zIndex.tooltip,
+  },
+}));
+
+const TooltipContainer: React.FC<{
+  children: React.ReactElement;
+  visible: boolean;
+  width: ViewStyle['width'];
+  onMouseLeave: (event: React.MouseEvent<HTMLDivElement>) => void;
+  tooltipRef: React.RefObject<HTMLDivElement | null>;
+  styleConfig: {
+    root: Styles[];
+  };
+}> = ({ children, visible, width, onMouseLeave, tooltipRef, styleConfig }) => {
+  const tooltipClass = useMemo(
+    () =>
+      css({
+        width: width ?? 'auto',
+        visibility: visible ? 'visible' : 'hidden',
+      }),
+    [width, visible],
+  );
+  const containerClass = useWebMergeStyles(
+    [staticStyles.root, tooltipClass, ...styleConfig.root],
+    [styleConfig.root, tooltipClass],
+  );
+  return (
+    <div ref={tooltipRef} className={containerClass} onMouseLeave={onMouseLeave}>
+      {children}
+    </div>
+  );
+};
+
+TooltipContainer.displayName = 'TooltipContainer';
+
+export default TooltipContainer;