@fountain-ui/core 3.0.0-alpha.39 → 3.0.0-alpha.40

package/build/commonjs/Tooltip/Tooltip.js

@@ -23,6 +23,8 @@ 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; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const DEFAULT_BEAK_LAYOUT = {
   offset: 0,
   placement: 'middle'
@@ -95,7 +97,8 @@ function Tooltip(props) {
     title,
     tooltipStyle,
     verticalOffset = 4,
-    visible = false
+    visible = false,
+    ...otherProps
   } = props;
   const {
     offset: beakOffset,
@@ -171,9 +174,9 @@ function Tooltip(props) {
     size: size
   }));
 
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
     style: style
-  }, children, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+  }, otherProps), children, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     onLayout: event => {
       if (event.nativeEvent.layout.height === 0) {
         return;

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

@@ -1 +1 @@
-{"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","paddingBottom","paddingTop","large","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","body3","regular","caption2","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            paddingBottom: theme.spacing(1.75),\n            paddingHorizontal: theme.spacing(2),\n            paddingTop: theme.spacing(1.5),\n        },\n        large: {\n            borderRadius: 5,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: 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    }), [scale]);\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            ? typo.body3.regular\n            : typo.caption2.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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"}
+{"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","paddingBottom","paddingTop","large","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","otherProps","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","body3","regular","caption2","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 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            paddingBottom: theme.spacing(1.75),\n            paddingHorizontal: theme.spacing(2),\n            paddingTop: theme.spacing(1.5),\n        },\n        large: {\n            borderRadius: 5,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: 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        ...otherProps\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    }), [scale]);\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            ? typo.body3.regular\n            : typo.caption2.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\n            style={style}\n            {...otherProps}\n        >\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.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["tooltipPlacements","tooltipSizes","tooltipBeakPlacements"],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ButtonProps } from '../Button';\nimport type { OverridableComponentProps } from '../types';\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 OverridableComponentProps<ViewProps, {\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/module/Tooltip/Tooltip.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useEffect, useState } from 'react';
 import { Platform, Text, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
@@ -76,7 +78,8 @@ export default function Tooltip(props) {
     title,
     tooltipStyle,
     verticalOffset = 4,
-    visible = false
+    visible = false,
+    ...otherProps
   } = props;
   const {
     offset: beakOffset,
@@ -149,9 +152,9 @@ export default function Tooltip(props) {
     placement: placement,
     size: size
   }));
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(View, _extends({
     style: style
-  }, children, /*#__PURE__*/React.createElement(Animated.View, {
+  }, otherProps), children, /*#__PURE__*/React.createElement(Animated.View, {
     onLayout: event => {
       if (event.nativeEvent.layout.height === 0) {
         return;

package/build/module/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","Platform","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","ButtonBase","createFontStyle","css","useTheme","Beak","DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","root","position","zIndex","tooltip","content","backgroundColor","palette","fill","base","paddingHorizontal","spacing","paddingVertical","small","borderRadius","shape","radius","sm","paddingBottom","paddingTop","large","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","beakOffset","beakPlacement","styles","layout","setLayout","scale","animatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","select","web","display","default","contentStyle","flexGrow","flexShrink","nextScaleValue","fontStyle","selector","typo","body3","regular","caption2","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            paddingBottom: theme.spacing(1.75),\n            paddingHorizontal: theme.spacing(2),\n            paddingTop: theme.spacing(1.5),\n        },\n        large: {\n            borderRadius: 5,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: 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    }), [scale]);\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            ? typo.body3.regular\n            : typo.caption2.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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"}
+{"version":3,"names":["React","useEffect","useState","Platform","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","ButtonBase","createFontStyle","css","useTheme","Beak","DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","root","position","zIndex","tooltip","content","backgroundColor","palette","fill","base","paddingHorizontal","spacing","paddingVertical","small","borderRadius","shape","radius","sm","paddingBottom","paddingTop","large","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","otherProps","beakOffset","beakPlacement","styles","layout","setLayout","scale","animatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","select","web","display","default","contentStyle","flexGrow","flexShrink","nextScaleValue","fontStyle","selector","typo","body3","regular","caption2","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 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            paddingBottom: theme.spacing(1.75),\n            paddingHorizontal: theme.spacing(2),\n            paddingTop: theme.spacing(1.5),\n        },\n        large: {\n            borderRadius: 5,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: 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        ...otherProps\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    }), [scale]);\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            ? typo.body3.regular\n            : typo.caption2.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\n            style={style}\n            {...otherProps}\n        >\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/module/Tooltip/TooltipProps.js.map

@@ -1 +1 @@
-{"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":"AAKA,OAAO,MAAMA,iBAAiB,GAAG,CAAC,KAAD,EAAQ,QAAR,EAAkB,MAAlB,EAA0B,OAA1B,CAA1B;AAGP,OAAO,MAAMC,YAAY,GAAG,CAAC,OAAD,EAAU,OAAV,CAArB;AAGP,OAAO,MAAMC,qBAAqB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA9B"}
+{"version":3,"names":["tooltipPlacements","tooltipSizes","tooltipBeakPlacements"],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ButtonProps } from '../Button';\nimport type { OverridableComponentProps } from '../types';\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 OverridableComponentProps<ViewProps, {\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":"AAKA,OAAO,MAAMA,iBAAiB,GAAG,CAAC,KAAD,EAAQ,QAAR,EAAkB,MAAlB,EAA0B,OAA1B,CAA1B;AAGP,OAAO,MAAMC,YAAY,GAAG,CAAC,OAAD,EAAU,OAAV,CAArB;AAGP,OAAO,MAAMC,qBAAqB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA9B"}

package/build/typescript/Tooltip/TooltipProps.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TextProps, ViewProps } from 'react-native';
-import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
+import type { OverridableComponentProps } from '../types';
 export declare const tooltipPlacements: readonly ["top", "bottom", "left", "right"];
 export declare type TooltipPlacement = typeof tooltipPlacements[number];
 export declare const tooltipSizes: readonly ["small", "large"];
@@ -18,7 +18,7 @@ export declare type TooltipInitialLayout = {
     x: number;
     y: number;
 };
-export default interface TooltipProps extends ComponentProps<{
+export default interface TooltipProps extends OverridableComponentProps<ViewProps, {
     /**
      * Tooltip reference element.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.39",
+  "version": "3.0.0-alpha.40",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "88da40e52167b78d5126e8675b536d609c9dc523"
+  "gitHead": "ffc27e77f54ab3838adf230df7395c9d68055513"
 }

package/src/Tooltip/Tooltip.tsx

@@ -3,7 +3,6 @@ import { Platform, Text, View, ViewProps } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
 import type TooltipProps from './TooltipProps';
@@ -80,6 +79,7 @@ export default function Tooltip(props: TooltipProps) {
         tooltipStyle,
         verticalOffset = 4,
         visible = false,
+        ...otherProps
     } = props;
 
     const {
@@ -181,7 +181,10 @@ export default function Tooltip(props: TooltipProps) {
     );
 
     return (
-        <View style={style}>
+        <View
+            style={style}
+            {...otherProps}
+        >
             {children}
 
             <Animated.View

package/src/Tooltip/TooltipProps.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TextProps, ViewProps } from 'react-native';
-import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
+import type { OverridableComponentProps } from '../types';
 
 export const tooltipPlacements = ['top', 'bottom', 'left', 'right'] as const;
 export type TooltipPlacement = typeof tooltipPlacements[number];
@@ -24,7 +24,7 @@ export type TooltipInitialLayout = {
     y: number;
 };
 
-export default interface TooltipProps extends ComponentProps<{
+export default interface TooltipProps extends OverridableComponentProps<ViewProps, {
     /**
      * Tooltip reference element.
      */