@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/build/commonjs/Tooltip/LegacyTooltip.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Tooltip;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _utils = require("@fountain-ui/utils");
+
+var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+
+var _styles = require("../styles");
+
+var _icons = require("../internal/icons");
+
+var _UpArrow = _interopRequireDefault(require("./UpArrow"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DEFAULT_OPACITY = 0.8;
+const INITIAL_LAYOUT = {
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0
+};
+const ANIMATION_CONFIG = {
+  duration: 150
+};
+
+function Tooltip(props) {
+  const {
+    arrowLayout,
+    children,
+    initialLayout = INITIAL_LAYOUT,
+    left,
+    onClose,
+    placement = 'top',
+    right,
+    numberOfTitleLines = 1,
+    style,
+    title,
+    tooltipStyle,
+    verticalOffset = 4,
+    visible = false
+  } = props;
+  const theme = (0, _styles.useTheme)();
+  const [layout, setLayout] = (0, _react.useState)(initialLayout);
+  const scale = (0, _reactNativeReanimated.useSharedValue)(0);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      scale: scale.value
+    }]
+  }), []);
+  const [r, g, b] = (0, _utils.rgb)(theme.palette.primary.main);
+  const totalVerticalOffset = -(layout.height + verticalOffset);
+  const tooltipLayoutStyle = {
+    alignItems: (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'left' ? 'flex-start' : (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'right' ? 'flex-end' : 'center',
+    bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
+    left,
+    position: 'absolute',
+    right,
+    top: placement === 'top' ? totalVerticalOffset : undefined,
+    zIndex: theme.zIndex.tooltip,
+    height: visible ? undefined : 0,
+    overflow: visible ? undefined : 'hidden',
+    ..._reactNative.Platform.select({
+      web: {
+        display: visible ? 'flex' : 'none'
+      },
+      default: {}
+    })
+  };
+  (0, _react.useEffect)(() => {
+    const nextScaleValue = visible ? 1 : 0;
+    scale.value = (0, _reactNativeReanimated.withTiming)(nextScaleValue, ANIMATION_CONFIG);
+  }, [visible]);
+  const touchableStyle = {
+    alignItems: 'center',
+    backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
+    borderRadius: theme.shape.roundness,
+    flexDirection: 'row',
+    padding: theme.spacing(2),
+    width: '100%'
+  };
+  const fontStyle = (0, _styles.createFontStyle)(theme, {
+    selector: typo => typo.caption2,
+    color: theme.palette.primary.contrastTextColor
+  });
+  const textStyle = (0, _styles.css)([fontStyle, {
+    marginRight: theme.spacing(2),
+    flexShrink: 1
+  }]);
+  const arrowStyle = (0, _styles.css)({ ...(arrowLayout && {
+      [arrowLayout.placement]: arrowLayout.offset
+    })
+  });
+
+  const buttonElem = /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
+    pressEffect: 'none',
+    onPress: onClose
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: (0, _styles.css)(touchableStyle)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text // TODO: Should we provide text prop customization?
+  , {
+    numberOfLines: numberOfTitleLines,
+    style: textStyle
+  }, title), /*#__PURE__*/_react.default.createElement(_icons.Close, {
+    fill: theme.palette.primary.contrastTextColor,
+    width: 20,
+    height: 20
+  })));
+
+  const arrowElem = /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: arrowStyle
+  }, /*#__PURE__*/_react.default.createElement(_UpArrow.default, {
+    upsideDown: placement === 'top',
+    fill: theme.palette.primary.main,
+    opacity: DEFAULT_OPACITY
+  }));
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: style
+  }, children, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    onLayout: event => {
+      if (event.nativeEvent.layout.height === 0) {
+        return;
+      }
+
+      setLayout(event.nativeEvent.layout);
+    },
+    style: [animatedStyle, tooltipLayoutStyle, tooltipStyle]
+  }, placement === 'top' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttonElem, arrowElem) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, arrowElem, buttonElem)));
+}
+
+;
+//# sourceMappingURL=LegacyTooltip.js.map

package/build/commonjs/Tooltip/LegacyTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_OPACITY","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","initialLayout","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","Platform","select","web","display","default","useEffect","nextScaleValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","marginRight","flexShrink","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["LegacyTooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './LegacyTooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        initialLayout = INITIAL_LAYOUT,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n        ...Platform.select({\n            web: {\n                display: visible ? 'flex' : 'none',\n            },\n            default: {},\n        }),\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n        width: '100%',\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                >\n                    {title}\n                </Text>\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => {\n                    if (event.nativeEvent.layout.height === 0) {\n                        return;\n                    }\n\n                    setLayout(event.nativeEvent.layout);\n                }}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Tooltip/LegacyTooltipProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=LegacyTooltipProps.js.map

package/build/commonjs/Tooltip/LegacyTooltipProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyTooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport type TooltipInitialLayout = {\n    height: number;\n    width: number;\n    x: number;\n    y: number;\n};\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n\n    /**\n     * Tooltip arrow layout.\n     * If 'undefined', the arrow will be centered on tooltip.\n     */\n    arrowLayout?: {\n        placement: TooltipArrowPlacement;\n        offset: number;\n    }\n\n    /**\n     * number of tooltip's title lines\n     * @default 1\n     */\n    numberOfTitleLines?: TextProps['numberOfLines'];\n\n    /**\n     * position of tooltip before onLayout call\n     * @default  { height: 0, width: 0 , x: 0, y: 0}\n     */\n    initialLayout?: TooltipInitialLayout;\n}> {}\n"],"mappings":""}

package/build/commonjs/Tooltip/Tooltip.js

@@ -11,15 +11,13 @@ var _reactNative = require("react-native");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _utils = require("@fountain-ui/utils");
+var _styles = require("@fountain-ui/styles");
 
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
-var _styles = require("../styles");
+var _styles2 = require("../styles");
 
-var _icons = require("../internal/icons");
-
-var _UpArrow = _interopRequireDefault(require("./UpArrow"));
+var _Beaks = _interopRequireDefault(require("./Beaks"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,7 +25,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const DEFAULT_OPACITY = 0.8;
+const DEFAULT_BEAK_LAYOUT = {
+  offset: 0,
+  placement: 'middle'
+};
 const INITIAL_LAYOUT = {
   width: 0,
   height: 0,
@@ -38,9 +39,52 @@ const ANIMATION_CONFIG = {
   duration: 150
 };
 
+const getFlexDirection = placement => {
+  switch (placement) {
+    case 'right':
+      return 'row-reverse';
+
+    case 'bottom':
+      return 'column-reverse';
+
+    case 'left':
+      return 'row';
+
+    case 'top':
+    default:
+      return 'column';
+  }
+};
+
+const useStyles = function () {
+  const theme = (0, _styles2.useTheme)();
+  return {
+    root: {
+      position: 'absolute',
+      zIndex: theme.zIndex.tooltip
+    },
+    content: {
+      backgroundColor: theme.palette.fill.base,
+      paddingHorizontal: theme.spacing(2),
+      paddingVertical: theme.spacing(1.5)
+    },
+    small: {
+      borderRadius: theme.shape.radius.sm,
+      paddingHorizontal: theme.spacing(2),
+      paddingVertical: theme.spacing(1.5)
+    },
+    large: {
+      borderRadius: 5,
+      paddingBottom: theme.spacing(2.5),
+      paddingHorizontal: theme.spacing(4),
+      paddingTop: theme.spacing(2)
+    }
+  };
+};
+
 function Tooltip(props) {
   const {
-    arrowLayout,
+    beakLayout = DEFAULT_BEAK_LAYOUT,
     children,
     initialLayout = INITIAL_LAYOUT,
     left,
@@ -48,13 +92,19 @@ function Tooltip(props) {
     placement = 'top',
     right,
     numberOfTitleLines = 1,
+    size = 'small',
     style,
     title,
     tooltipStyle,
     verticalOffset = 4,
     visible = false
   } = props;
-  const theme = (0, _styles.useTheme)();
+  const {
+    offset: beakOffset,
+    placement: beakPlacement
+  } = beakLayout;
+  const theme = (0, _styles2.useTheme)();
+  const styles = useStyles();
   const [layout, setLayout] = (0, _react.useState)(initialLayout);
   const scale = (0, _reactNativeReanimated.useSharedValue)(0);
   const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
@@ -62,16 +112,14 @@ function Tooltip(props) {
       scale: scale.value
     }]
   }), []);
-  const [r, g, b] = (0, _utils.rgb)(theme.palette.primary.main);
-  const totalVerticalOffset = -(layout.height + verticalOffset);
+  const flexDirection = getFlexDirection(placement);
+  const isVerticalPlacement = placement === 'top' || placement === 'bottom';
+  const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);
   const tooltipLayoutStyle = {
-    alignItems: (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'left' ? 'flex-start' : (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'right' ? 'flex-end' : 'center',
-    bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
+    alignItems: beakPlacement === 'start' ? 'flex-start' : beakPlacement === 'end' ? 'flex-end' : 'center',
+    flexDirection,
     left,
-    position: 'absolute',
     right,
-    top: placement === 'top' ? totalVerticalOffset : undefined,
-    zIndex: theme.zIndex.tooltip,
     height: visible ? undefined : 0,
     overflow: visible ? undefined : 'hidden',
     ..._reactNative.Platform.select({
@@ -79,55 +127,56 @@ function Tooltip(props) {
         display: visible ? 'flex' : 'none'
       },
       default: {}
-    })
+    }),
+    [placement]: totalOffset
   };
+  const contentStyle = (0, _styles2.css)([styles.content, styles[size], isVerticalPlacement ? {
+    width: '100%'
+  } : {
+    flexGrow: 1,
+    flexShrink: 1
+  }]);
   (0, _react.useEffect)(() => {
     const nextScaleValue = visible ? 1 : 0;
     scale.value = (0, _reactNativeReanimated.withTiming)(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
-  const touchableStyle = {
-    alignItems: 'center',
-    backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
-    borderRadius: theme.shape.roundness,
-    flexDirection: 'row',
-    padding: theme.spacing(2),
-    width: '100%'
-  };
-  const fontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typo => typo.caption2,
-    color: theme.palette.primary.contrastTextColor
+  const fontStyle = (0, _styles2.createFontStyle)(theme, {
+    selector: typo => size === 'large' ? (0, _styles.typographyOf)({
+      fontSize: 13,
+      lineHeight: 19.5,
+      fontFamily: 'Pretendard-Regular',
+      letterSpacing: 0
+    }) // TODO: change caption2.
+    : typo.caption3.regular,
+    color: theme.palette.text.strongInverse
   });
-  const textStyle = (0, _styles.css)([fontStyle, {
-    marginRight: theme.spacing(2),
+  const textStyle = (0, _styles2.css)([fontStyle, {
     flexShrink: 1
   }]);
-  const arrowStyle = (0, _styles.css)({ ...(arrowLayout && {
-      [arrowLayout.placement]: arrowLayout.offset
-    })
+  const beakStyle = (0, _styles2.css)({
+    transform: [isVerticalPlacement ? {
+      translateX: beakOffset
+    } : {
+      translateY: beakOffset
+    }]
   });
 
   const buttonElem = /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
     pressEffect: 'none',
-    onPress: onClose
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: (0, _styles.css)(touchableStyle)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    children: title // TODO: Should we provide text prop customization?
-    ,
+    onPress: onClose,
+    style: contentStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text // TODO: Should we provide text prop customization?
+  , {
     numberOfLines: numberOfTitleLines,
     style: textStyle
-  }), /*#__PURE__*/_react.default.createElement(_icons.Close, {
-    fill: theme.palette.primary.contrastTextColor,
-    width: 20,
-    height: 20
-  })));
-
-  const arrowElem = /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: arrowStyle
-  }, /*#__PURE__*/_react.default.createElement(_UpArrow.default, {
-    upsideDown: placement === 'top',
-    fill: theme.palette.primary.main,
-    opacity: DEFAULT_OPACITY
+  }, title));
+
+  const beakElem = /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: beakStyle
+  }, /*#__PURE__*/_react.default.createElement(_Beaks.default, {
+    fill: theme.palette.fill.base,
+    placement: placement,
+    size: size
   }));
 
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -140,8 +189,8 @@ function Tooltip(props) {
 
       setLayout(event.nativeEvent.layout);
     },
-    style: [animatedStyle, tooltipLayoutStyle, tooltipStyle]
-  }, placement === 'top' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttonElem, arrowElem) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, arrowElem, buttonElem)));
+    style: [styles.root, animatedStyle, tooltipLayoutStyle, tooltipStyle]
+  }, buttonElem, beakElem));
 }
 
 ;

package/build/commonjs/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["DEFAULT_OPACITY","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","initialLayout","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","Platform","select","web","display","default","useEffect","nextScaleValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","marginRight","flexShrink","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        initialLayout = INITIAL_LAYOUT,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n        ...Platform.select({\n           web: {\n               display: visible ? 'flex' : 'none',\n           },\n            default: {},\n        }),\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n        width: '100%',\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => {\n                    if (event.nativeEvent.layout.height === 0) {\n                        return;\n                    }\n\n                    setLayout(event.nativeEvent.layout);\n                }}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","useTheme","root","position","zIndex","tooltip","content","backgroundColor","palette","fill","base","paddingHorizontal","spacing","paddingVertical","small","borderRadius","shape","radius","sm","large","paddingBottom","paddingTop","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","beakOffset","beakPlacement","styles","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","Platform","select","web","display","default","contentStyle","css","flexGrow","flexShrink","useEffect","nextScaleValue","withTiming","fontStyle","createFontStyle","selector","typo","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","caption3","regular","color","text","strongInverse","textStyle","beakStyle","translateX","translateY","buttonElem","beakElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type TooltipProps from './TooltipProps';\nimport type { TooltipBeakLayout, TooltipPlacement, TooltipSize } from './TooltipProps';\nimport Beak from './Beaks';\n\nconst DEFAULT_BEAK_LAYOUT: TooltipBeakLayout = {\n    offset: 0,\n    placement: 'middle',\n};\n\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\ntype FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nconst getFlexDirection = (placement: TooltipPlacement): FlexDirection => {\n    switch (placement) {\n        case 'right':\n            return 'row-reverse';\n        case 'bottom':\n            return 'column-reverse';\n        case 'left':\n            return 'row';\n        case 'top':\n        default:\n            return 'column';\n    }\n};\n\ntype TooltipStyles = NamedStylesStringUnion<'root' | 'content' | 'small' | 'large'>;\n\nconst useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            position: 'absolute',\n            zIndex: theme.zIndex.tooltip,\n        },\n        content: {\n            backgroundColor: theme.palette.fill.base,\n            paddingHorizontal: theme.spacing(2),\n            paddingVertical: theme.spacing(1.5),\n        },\n        small: {\n            borderRadius: theme.shape.radius.sm,\n            paddingHorizontal: theme.spacing(2),\n            paddingVertical: theme.spacing(1.5),\n        },\n        large: {\n            borderRadius: 5,\n            paddingBottom: theme.spacing(2.5),\n            paddingHorizontal: theme.spacing(4),\n            paddingTop: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        beakLayout = DEFAULT_BEAK_LAYOUT,\n        children,\n        initialLayout = INITIAL_LAYOUT,\n        left,\n        onClose,\n        placement = 'top' as TooltipPlacement,\n        right,\n        numberOfTitleLines = 1,\n        size = 'small' as TooltipSize,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const {\n        offset: beakOffset,\n        placement: beakPlacement,\n    } = beakLayout;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const flexDirection = getFlexDirection(placement);\n\n    const isVerticalPlacement = placement === 'top' || placement === 'bottom';\n\n    const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: beakPlacement === 'start'\n            ? 'flex-start'\n            : beakPlacement === 'end'\n                ? 'flex-end'\n                : 'center',\n        flexDirection,\n        left,\n        right,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n        ...Platform.select({\n            web: {\n                display: visible ? 'flex' : 'none',\n            },\n            default: {},\n        }),\n        [placement]: totalOffset,\n    };\n\n    const contentStyle = css([\n        styles.content,\n        styles[size],\n        isVerticalPlacement\n            ? { width: '100%' }\n            : { flexGrow: 1, flexShrink: 1 },\n    ]);\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'large'\n            ? typographyOf({\n                fontSize: 13,\n                lineHeight: 19.5,\n                fontFamily: 'Pretendard-Regular',\n                letterSpacing: 0,\n            })\n            // TODO: change caption2.\n            : typo.caption3.regular,\n        color: theme.palette.text.strongInverse,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { flexShrink: 1 },\n    ]);\n\n    const beakStyle = css({\n        transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n            style={contentStyle}\n        >\n            <Text\n                // TODO: Should we provide text prop customization?\n                numberOfLines={numberOfTitleLines}\n                style={textStyle}\n            >\n                {title}\n            </Text>\n        </ButtonBase>\n    );\n\n    const beakElem = (\n        <View style={beakStyle}>\n            <Beak\n                fill={theme.palette.fill.base}\n                placement={placement}\n                size={size}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => {\n                    if (event.nativeEvent.layout.height === 0) {\n                        return;\n                    }\n\n                    setLayout(event.nativeEvent.layout);\n                }}\n                style={[\n                    styles.root,\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {buttonElem}\n\n                {beakElem}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Tooltip/TooltipProps.js

@@ -1,2 +1,13 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tooltipSizes = exports.tooltipPlacements = exports.tooltipBeakPlacements = void 0;
+const tooltipPlacements = ['top', 'bottom', 'left', 'right'];
+exports.tooltipPlacements = tooltipPlacements;
+const tooltipSizes = ['small', 'large'];
+exports.tooltipSizes = tooltipSizes;
+const tooltipBeakPlacements = ['start', 'middle', 'end'];
+exports.tooltipBeakPlacements = tooltipBeakPlacements;
 //# sourceMappingURL=TooltipProps.js.map

package/build/commonjs/Tooltip/TooltipProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport type TooltipInitialLayout = { height: number, width: number, x: number, y: number };\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n\n    /**\n     * Tooltip arrow layout.\n     * If 'undefined', the arrow will be centered on tooltip.\n     */\n    arrowLayout?: {\n        placement: TooltipArrowPlacement;\n        offset: number;\n    }\n\n    /**\n     * number of tooltip's title lines\n     * @default 1\n     */\n    numberOfTitleLines?: TextProps['numberOfLines'];\n\n    /**\n     * position of tooltip before onLayout call\n     * @default  { height: 0, width: 0 , x: 0, y: 0}\n     */\n    initialLayout: TooltipInitialLayout;\n}> {}\n"],"mappings":""}
+{"version":3,"names":["tooltipPlacements","tooltipSizes","tooltipBeakPlacements"],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport const tooltipPlacements = ['top', 'bottom', 'left', 'right'] as const;\nexport type TooltipPlacement = typeof tooltipPlacements[number];\n\nexport const tooltipSizes = ['small', 'large'] as const;\nexport type TooltipSize = typeof tooltipSizes[number];\n\nexport const tooltipBeakPlacements = ['start', 'middle', 'end'] as const;\nexport type TooltipBeakPlacement = typeof tooltipBeakPlacements[number];\n\nexport type TooltipBeakLayout = {\n    placement: TooltipBeakPlacement;\n    offset: number;\n};\n\nexport type TooltipInitialLayout = {\n    height: number;\n    width: number;\n    x: number;\n    y: number;\n};\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n\n    /**\n     * Tooltip beak layout.\n     * If 'undefined', the beak will be centered on tooltip.\n     */\n    beakLayout?: TooltipBeakLayout;\n\n    /**\n     * number of tooltip's title lines\n     * @default 1\n     */\n    numberOfTitleLines?: TextProps['numberOfLines'];\n\n    /**\n     * position of tooltip before onLayout call\n     * @default  { height: 0, width: 0 , x: 0, y: 0}\n     */\n    initialLayout?: TooltipInitialLayout;\n\n    /**\n     * Determines the size of the tooltip.\n     * @default  'small'\n     */\n    size?: TooltipSize;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,iBAAiB,GAAG,CAAC,KAAD,EAAQ,QAAR,EAAkB,MAAlB,EAA0B,OAA1B,CAA1B;;AAGA,MAAMC,YAAY,GAAG,CAAC,OAAD,EAAU,OAAV,CAArB;;AAGA,MAAMC,qBAAqB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA9B"}

package/build/commonjs/Tooltip/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _Tooltip.default;
+    return _LegacyTooltip.default;
   }
 });
 
-var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _LegacyTooltip = _interopRequireDefault(require("./LegacyTooltip"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/build/commonjs/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tooltip';\nexport type { default as TooltipProps } from './TooltipProps';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyTooltip';\nexport type { default as TooltipProps } from './LegacyTooltipProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}