@fountain-ui/core 3.0.0-alpha.5 → 3.0.0-alpha.50

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

@@ -3,6 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "HorizontalLargeBeak", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalLargeBeak.default;
+  }
+});
+Object.defineProperty(exports, "HorizontalSmallBeak", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalSmallBeak.default;
+  }
+});
+Object.defineProperty(exports, "VerticalLargeBeak", {
+  enumerable: true,
+  get: function () {
+    return _VerticalLargeBeak.default;
+  }
+});
+Object.defineProperty(exports, "VerticalSmallBeak", {
+  enumerable: true,
+  get: function () {
+    return _VerticalSmallBeak.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -12,5 +36,13 @@ Object.defineProperty(exports, "default", {
 
 var _Beak = _interopRequireDefault(require("./Beak"));
 
+var _HorizontalLargeBeak = _interopRequireDefault(require("./HorizontalLargeBeak"));
+
+var _HorizontalSmallBeak = _interopRequireDefault(require("./HorizontalSmallBeak"));
+
+var _VerticalLargeBeak = _interopRequireDefault(require("./VerticalLargeBeak"));
+
+var _VerticalSmallBeak = _interopRequireDefault(require("./VerticalSmallBeak"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\nexport { default as HorizontalLargeBeak } from './HorizontalLargeBeak';\nexport { default as HorizontalSmallBeak } from './HorizontalSmallBeak';\nexport { default as VerticalLargeBeak } from './VerticalLargeBeak';\nexport { default as VerticalSmallBeak } from './VerticalSmallBeak';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA"}

package/build/commonjs/Tooltip/Tooltip.js

@@ -11,11 +11,9 @@ var _reactNative = require("react-native");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _styles = require("@fountain-ui/styles");
-
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
-var _styles2 = require("../styles");
+var _styles = require("../styles");
 
 var _Beaks = _interopRequireDefault(require("./Beaks"));
 
@@ -25,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'
@@ -57,7 +57,7 @@ const getFlexDirection = placement => {
 };
 
 const useStyles = function () {
-  const theme = (0, _styles2.useTheme)();
+  const theme = (0, _styles.useTheme)();
   return {
     root: {
       position: 'absolute',
@@ -70,14 +70,14 @@ const useStyles = function () {
     },
     small: {
       borderRadius: theme.shape.radius.sm,
+      paddingBottom: theme.spacing(1.75),
       paddingHorizontal: theme.spacing(2),
-      paddingVertical: theme.spacing(1.5)
+      paddingTop: theme.spacing(1.5)
     },
     large: {
       borderRadius: 5,
-      paddingBottom: theme.spacing(2.5),
       paddingHorizontal: theme.spacing(4),
-      paddingTop: theme.spacing(2)
+      paddingVertical: theme.spacing(2)
     }
   };
 };
@@ -97,13 +97,14 @@ function Tooltip(props) {
     title,
     tooltipStyle,
     verticalOffset = 4,
-    visible = false
+    visible = false,
+    ...otherProps
   } = props;
   const {
     offset: beakOffset,
     placement: beakPlacement
   } = beakLayout;
-  const theme = (0, _styles2.useTheme)();
+  const theme = (0, _styles.useTheme)();
   const styles = useStyles();
   const [layout, setLayout] = (0, _react.useState)(initialLayout);
   const scale = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -111,7 +112,7 @@ function Tooltip(props) {
     transform: [{
       scale: scale.value
     }]
-  }), []);
+  }), [scale]);
   const flexDirection = getFlexDirection(placement);
   const isVerticalPlacement = placement === 'top' || placement === 'bottom';
   const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);
@@ -130,7 +131,7 @@ function Tooltip(props) {
     }),
     [placement]: totalOffset
   };
-  const contentStyle = (0, _styles2.css)([styles.content, styles[size], isVerticalPlacement ? {
+  const contentStyle = (0, _styles.css)([styles.content, styles[size], isVerticalPlacement ? {
     width: '100%'
   } : {
     flexGrow: 1,
@@ -140,24 +141,23 @@ function Tooltip(props) {
     const nextScaleValue = visible ? 1 : 0;
     scale.value = (0, _reactNativeReanimated.withTiming)(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
-  const fontStyle = (0, _styles2.createFontStyle)(theme, {
-    selector: typo => size === 'large' ? (0, _styles.typographyOf)({
-      fontSize: 13,
-      lineHeight: 19.5,
-      fontFamily: 'PretendardStd-Regular',
-      letterSpacing: 0
-    }) : typo.caption2.regular,
+  const fontStyle = (0, _styles.createFontStyle)(theme, {
+    selector: typo => size === 'large' ? typo.body3.regular : typo.caption2.regular,
     color: theme.palette.text.strongInverse
   });
-  const textStyle = (0, _styles2.css)([fontStyle, {
+  const textStyle = (0, _styles.css)([fontStyle, {
     flexShrink: 1
   }]);
-  const beakStyle = (0, _styles2.css)({
+  const beakOverlapStyle = {
+    [placement === 'top' ? 'marginTop' : placement === 'bottom' ? 'marginBottom' : placement === 'left' ? 'marginLeft' : 'marginRight']: -_reactNative.StyleSheet.hairlineWidth
+  };
+  const beakStyle = (0, _styles.css)({
     transform: [isVerticalPlacement ? {
       translateX: beakOffset
     } : {
       translateY: beakOffset
-    }]
+    }],
+    ...beakOverlapStyle
   });
 
   const buttonElem = /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
@@ -178,9 +178,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","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","caption2","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: 'PretendardStd-Regular',\n                letterSpacing: 0,\n            })\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":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;AAGA;;;;;;;;AAEA,MAAMA,mBAAsC,GAAG;EAC3CC,MAAM,EAAE,CADmC;EAE3CC,SAAS,EAAE;AAFgC,CAA/C;AAKA,MAAMC,cAAc,GAAG;EAAEC,KAAK,EAAE,CAAT;EAAYC,MAAM,EAAE,CAApB;EAAuBC,CAAC,EAAE,CAA1B;EAA6BC,CAAC,EAAE;AAAhC,CAAvB;AAEA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;AAIA,MAAMC,gBAAgB,GAAIR,SAAD,IAAgD;EACrE,QAAQA,SAAR;IACI,KAAK,OAAL;MACI,OAAO,aAAP;;IACJ,KAAK,QAAL;MACI,OAAO,gBAAP;;IACJ,KAAK,MAAL;MACI,OAAO,KAAP;;IACJ,KAAK,KAAL;IACA;MACI,OAAO,QAAP;EATR;AAWH,CAZD;;AAgBA,MAAMS,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,QAAQ,EAAE,UADR;MAEFC,MAAM,EAAEJ,KAAK,CAACI,MAAN,CAAaC;IAFnB,CADH;IAKHC,OAAO,EAAE;MACLC,eAAe,EAAEP,KAAK,CAACQ,OAAN,CAAcC,IAAd,CAAmBC,IAD/B;MAELC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,CAAd,CAFd;MAGLC,eAAe,EAAEb,KAAK,CAACY,OAAN,CAAc,GAAd;IAHZ,CALN;IAUHE,KAAK,EAAE;MACHC,YAAY,EAAEf,KAAK,CAACgB,KAAN,CAAYC,MAAZ,CAAmBC,EAD9B;MAEHP,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,CAAd,CAFhB;MAGHC,eAAe,EAAEb,KAAK,CAACY,OAAN,CAAc,GAAd;IAHd,CAVJ;IAeHO,KAAK,EAAE;MACHJ,YAAY,EAAE,CADX;MAEHK,aAAa,EAAEpB,KAAK,CAACY,OAAN,CAAc,GAAd,CAFZ;MAGHD,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,CAAd,CAHhB;MAIHS,UAAU,EAAErB,KAAK,CAACY,OAAN,CAAc,CAAd;IAJT;EAfJ,CAAP;AAsBH,CAzBD;;AA2Be,SAASU,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,UAAU,GAAGpC,mBADX;IAEFqC,QAFE;IAGFC,aAAa,GAAGnC,cAHd;IAIFoC,IAJE;IAKFC,OALE;IAMFtC,SAAS,GAAG,KANV;IAOFuC,KAPE;IAQFC,kBAAkB,GAAG,CARnB;IASFC,IAAI,GAAG,OATL;IAUFC,KAVE;IAWFC,KAXE;IAYFC,YAZE;IAaFC,cAAc,GAAG,CAbf;IAcFC,OAAO,GAAG;EAdR,IAeFb,KAfJ;EAiBA,MAAM;IACFlC,MAAM,EAAEgD,UADN;IAEF/C,SAAS,EAAEgD;EAFT,IAGFd,UAHJ;EAKA,MAAMxB,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAMsC,MAAM,GAAGxC,SAAS,EAAxB;EAEA,MAAM,CAACyC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAShB,aAAT,CAA5B;EAEA,MAAMiB,KAAK,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAAd;EAEA,MAAMC,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEJ,KAAK,EAAEA,KAAK,CAACK;IAAf,CAAD;EAD+B,CAAP,CAAjB,EAElB,EAFkB,CAAtB;EAIA,MAAMC,aAAa,GAAGnD,gBAAgB,CAACR,SAAD,CAAtC;EAEA,MAAM4D,mBAAmB,GAAG5D,SAAS,KAAK,KAAd,IAAuBA,SAAS,KAAK,QAAjE;EAEA,MAAM6D,WAAW,GAAG,EAAE,CAACD,mBAAmB,GAAGV,MAAM,CAAC/C,MAAV,GAAmB+C,MAAM,CAAChD,KAA9C,IAAuD2C,cAAzD,CAApB;EACA,MAAMiB,kBAAsC,GAAG;IAC3CC,UAAU,EAAEf,aAAa,KAAK,OAAlB,GACN,YADM,GAENA,aAAa,KAAK,KAAlB,GACI,UADJ,GAEI,QALiC;IAM3CW,aAN2C;IAO3CtB,IAP2C;IAQ3CE,KAR2C;IAS3CpC,MAAM,EAAE2C,OAAO,GAAGkB,SAAH,GAAe,CATa;IAU3CC,QAAQ,EAAEnB,OAAO,GAAGkB,SAAH,GAAe,QAVW;IAW3C,GAAGE,qBAAA,CAASC,MAAT,CAAgB;MACfC,GAAG,EAAE;QACDC,OAAO,EAAEvB,OAAO,GAAG,MAAH,GAAY;MAD3B,CADU;MAIfwB,OAAO,EAAE;IAJM,CAAhB,CAXwC;IAiB3C,CAACtE,SAAD,GAAa6D;EAjB8B,CAA/C;EAoBA,MAAMU,YAAY,GAAG,IAAAC,YAAA,EAAI,CACrBvB,MAAM,CAACjC,OADc,EAErBiC,MAAM,CAACR,IAAD,CAFe,EAGrBmB,mBAAmB,GACb;IAAE1D,KAAK,EAAE;EAAT,CADa,GAEb;IAAEuE,QAAQ,EAAE,CAAZ;IAAeC,UAAU,EAAE;EAA3B,CALe,CAAJ,CAArB;EAQA,IAAAC,gBAAA,EAAU,MAAM;IACZ,MAAMC,cAAc,GAAG9B,OAAO,GAAG,CAAH,GAAO,CAArC;IAEAO,KAAK,CAACK,KAAN,GAAc,IAAAmB,iCAAA,EAAWD,cAAX,EAA2BtE,gBAA3B,CAAd;EACH,CAJD,EAIG,CAACwC,OAAD,CAJH;EAMA,MAAMgC,SAAS,GAAG,IAAAC,wBAAA,EAAgBrE,KAAhB,EAAuB;IACrCsE,QAAQ,EAAGC,IAAD,IAAUxC,IAAI,KAAK,OAAT,GACd,IAAAyC,oBAAA,EAAa;MACXC,QAAQ,EAAE,EADC;MAEXC,UAAU,EAAE,IAFD;MAGXC,UAAU,EAAE,uBAHD;MAIXC,aAAa,EAAE;IAJJ,CAAb,CADc,GAOdL,IAAI,CAACM,QAAL,CAAcC,OARiB;IASrCC,KAAK,EAAE/E,KAAK,CAACQ,OAAN,CAAcwE,IAAd,CAAmBC;EATW,CAAvB,CAAlB;EAYA,MAAMC,SAAS,GAAG,IAAApB,YAAA,EAAI,CAClBM,SADkB,EAElB;IAAEJ,UAAU,EAAE;EAAd,CAFkB,CAAJ,CAAlB;EAKA,MAAMmB,SAAS,GAAG,IAAArB,YAAA,EAAI;IAClBf,SAAS,EAAE,CAACG,mBAAmB,GAAG;MAAEkC,UAAU,EAAE/C;IAAd,CAAH,GAAgC;MAAEgD,UAAU,EAAEhD;IAAd,CAApD;EADO,CAAJ,CAAlB;;EAIA,MAAMiD,UAAU,gBACZ,6BAAC,mBAAD;IACI,WAAW,EAAE,MADjB;IAEI,OAAO,EAAE1D,OAFb;IAGI,KAAK,EAAEiC;EAHX,gBAKI,6BAAC,iBAAD,CACI;EADJ;IAEI,aAAa,EAAE/B,kBAFnB;IAGI,KAAK,EAAEoD;EAHX,GAKKjD,KALL,CALJ,CADJ;;EAgBA,MAAMsD,QAAQ,gBACV,6BAAC,iBAAD;IAAM,KAAK,EAAEJ;EAAb,gBACI,6BAAC,cAAD;IACI,IAAI,EAAEnF,KAAK,CAACQ,OAAN,CAAcC,IAAd,CAAmBC,IAD7B;IAEI,SAAS,EAAEpB,SAFf;IAGI,IAAI,EAAEyC;EAHV,EADJ,CADJ;;EAUA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAEC;EAAb,GACKP,QADL,eAGI,6BAAC,8BAAD,CAAU,IAAV;IACI,QAAQ,EAAG+D,KAAD,IAAW;MACjB,IAAIA,KAAK,CAACC,WAAN,CAAkBjD,MAAlB,CAAyB/C,MAAzB,KAAoC,CAAxC,EAA2C;QACvC;MACH;;MAEDgD,SAAS,CAAC+C,KAAK,CAACC,WAAN,CAAkBjD,MAAnB,CAAT;IACH,CAPL;IAQI,KAAK,EAAE,CACHD,MAAM,CAACrC,IADJ,EAEH2C,aAFG,EAGHO,kBAHG,EAIHlB,YAJG;EARX,GAeKoD,UAfL,EAiBKC,QAjBL,CAHJ,CADJ;AAyBH;;AAAA"}
+{"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","beakOverlapStyle","StyleSheet","hairlineWidth","beakStyle","translateX","translateY","buttonElem","beakElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, StyleSheet, 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 beakOverlapStyle = {\n        [placement === 'top' ? 'marginTop' : placement === 'bottom' ? 'marginBottom' : placement === 'left' ? 'marginLeft' : 'marginRight']: -StyleSheet.hairlineWidth,\n    };\n\n    const beakStyle = css({\n        transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],\n        ...beakOverlapStyle,\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/commonjs/Tooltip/index.js

@@ -3,6 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  tooltipBeakPlacements: true,
+  tooltipPlacements: true,
+  tooltipSizes: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -32,5 +37,19 @@ var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 
 var _TooltipProps = require("./TooltipProps");
 
+var _Beaks = require("./Beaks");
+
+Object.keys(_Beaks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Beaks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Beaks[key];
+    }
+  });
+});
+
 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, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';\nexport { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tooltip';\nexport type { default as TooltipProps, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';\nexport { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';\nexport * from './Beaks';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/commonjs/Typography/Typography.js

@@ -55,6 +55,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
     color: colorProp = 'inherit',
     ellipsizeMode = 'tail',
     href,
+    lineHeight,
     numberOfLines,
     onPress,
     selectable,
@@ -66,7 +67,11 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
   } = props;
   const theme = (0, _styles.useTheme)();
   const fontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typography => typography[variant][weight],
+    selector: typography => {
+      var _typography$variant;
+
+      return (_typography$variant = typography[variant]) === null || _typography$variant === void 0 ? void 0 : _typography$variant[weight];
+    },
     color: selectColor(theme, colorProp)
   }); // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
 
@@ -75,7 +80,9 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
   } : {};
   const textStyle = (0, _styles.css)([styles.root, {
     textAlign: align === 'inherit' ? 'auto' : align
-  }, textWrapStyle, fontStyle, style]);
+  }, textWrapStyle, fontStyle, lineHeight ? {
+    lineHeight
+  } : undefined, style]);
   const accessibility = accessibilityMap[variant];
   const variantRole = href !== undefined ? 'link' : accessibility === null || accessibility === void 0 ? void 0 : accessibility.accessibilityRole;
   const variantLevel = accessibility === null || accessibility === void 0 ? void 0 : accessibility['area-level'];

package/build/commonjs/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"names":["accessibilityMap","selectColor","theme","colorProp","Platform","OS","undefined","palette","text","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    // TODO: set accessibilityRole.\n    // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n    // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n    // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n    // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n    // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n    // body1: { accessibilityRole: 'text' },\n    // body2: { accessibilityRole: 'text' },\n    // caption1: { accessibilityRole: 'text' },\n    // caption2: { accessibilityRole: 'text' },\n    // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        default:\n            return theme.palette.text[colorProp];\n    }\n}\n\nconst styles = StyleSheet.create({\n    root: {\n        flexShrink: 1,\n        ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n    },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        accessibilityRole,\n        align = 'inherit' as TypographyAlign,\n        ariaLevel,\n        disableFontScaling = false,\n        children,\n        color: colorProp = 'inherit' as TypographyColor,\n        ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1' as FontVariant,\n        weight = 'medium' as FontWeight,\n        onLayout,\n        onTextLayout,\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant][weight],\n        color: selectColor(theme, colorProp),\n    });\n\n    // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n    const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n    const textStyle = css([\n        styles.root,\n        { textAlign: align === 'inherit' ? 'auto' : align },\n        textWrapStyle as TextStyle,\n        fontStyle,\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n    const variantLevel = accessibility?.['area-level'];\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole || variantRole}\n            allowFontScaling={!disableFontScaling}\n            aria-level={ariaLevel || variantLevel}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n            onLayout={onLayout}\n            onTextLayout={onTextLayout}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}
+{"version":3,"names":["accessibilityMap","selectColor","theme","colorProp","Platform","OS","undefined","palette","text","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","lineHeight","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    // TODO: set accessibilityRole.\n    // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n    // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n    // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n    // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n    // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n    // body1: { accessibilityRole: 'text' },\n    // body2: { accessibilityRole: 'text' },\n    // caption1: { accessibilityRole: 'text' },\n    // caption2: { accessibilityRole: 'text' },\n    // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        default:\n            return theme.palette.text[colorProp];\n    }\n}\n\nconst styles = StyleSheet.create({\n    root: {\n        flexShrink: 1,\n        ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n    },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        accessibilityRole,\n        align = 'inherit' as TypographyAlign,\n        ariaLevel,\n        disableFontScaling = false,\n        children,\n        color: colorProp = 'inherit' as TypographyColor,\n        ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n        href,\n        lineHeight,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1' as FontVariant,\n        weight = 'medium' as FontWeight,\n        onLayout,\n        onTextLayout,\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant]?.[weight],\n        color: selectColor(theme, colorProp),\n    });\n\n    // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n    const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n    const textStyle = css([\n        styles.root,\n        { textAlign: align === 'inherit' ? 'auto' : align },\n        textWrapStyle as TextStyle,\n        fontStyle,\n        lineHeight ? { lineHeight } : undefined,\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n    const variantLevel = accessibility?.['area-level'];\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole || variantRole}\n            allowFontScaling={!disableFontScaling}\n            aria-level={ariaLevel || variantLevel}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n            onLayout={onLayout}\n            onTextLayout={onTextLayout}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}

package/build/commonjs/Typography/TypographyProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["typographyColors"],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps, TextStyle } from 'react-native';\nimport type { FontVariant, FontWeight } from '@fountain-ui/styles';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | TextStyle['textAlign'];\n\nexport const typographyColors = [\n    'inherit',\n    'accent',\n    'accentAlt',\n    'strong',\n    'strongInverse',\n    'base',\n    'baseInverse',\n    'baseOpacity',\n    'baseOpacityInverse',\n    'weak',\n    'weakOpacity',\n    'weakInverse',\n    'weakOpacityInverse',\n] as const;\n\nexport type TypographyColor = typeof typographyColors[number];\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport type AccessibilityMap = Partial<Record<FontVariant, Accessibility>>;\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: FontVariant;\n\n    /**\n     * Determines the font weight.\n     * @default 'medium'\n     */\n    weight?: FontWeight;\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n    onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":";;;;;;AAOO,MAAMA,gBAAgB,GAAG,CAC5B,SAD4B,EAE5B,QAF4B,EAG5B,WAH4B,EAI5B,QAJ4B,EAK5B,eAL4B,EAM5B,MAN4B,EAO5B,aAP4B,EAQ5B,aAR4B,EAS5B,oBAT4B,EAU5B,MAV4B,EAW5B,aAX4B,EAY5B,aAZ4B,EAa5B,oBAb4B,CAAzB"}
+{"version":3,"names":["typographyColors"],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps, TextStyle } from 'react-native';\nimport type { FontVariant, FontWeight } from '@fountain-ui/styles';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | TextStyle['textAlign'];\n\nexport const typographyColors = [\n    'inherit',\n    'accent',\n    'accentAlt',\n    'strong',\n    'strongInverse',\n    'base',\n    'baseInverse',\n    'baseOpacity',\n    'baseOpacityInverse',\n    'weak',\n    'weakOpacity',\n    'weakInverse',\n    'weakOpacityInverse',\n] as const;\n\nexport type TypographyColor = typeof typographyColors[number];\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport type AccessibilityMap = Partial<Record<FontVariant, Accessibility>>;\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Defines the vertical spacing between lines of text.\n     */\n    lineHeight?: TextStyle['lineHeight'];\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: FontVariant;\n\n    /**\n     * Determines the font weight.\n     * @default 'medium'\n     */\n    weight?: FontWeight;\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n    onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":";;;;;;AAOO,MAAMA,gBAAgB,GAAG,CAC5B,SAD4B,EAE5B,QAF4B,EAG5B,WAH4B,EAI5B,QAJ4B,EAK5B,eAL4B,EAM5B,MAN4B,EAO5B,aAP4B,EAQ5B,aAR4B,EAS5B,oBAT4B,EAU5B,MAV4B,EAW5B,aAX4B,EAY5B,aAZ4B,EAa5B,oBAb4B,CAAzB"}

package/build/commonjs/hooks/useCollapsibleAppBar.js

@@ -13,8 +13,6 @@ var _reactNativeReanimated = require("react-native-reanimated");
 
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 
-var _styles = require("@fountain-ui/styles");
-
 var _hooks = require("../internal/hooks");
 
 var _useAppbarStyles = _interopRequireDefault(require("./useAppbarStyles"));
@@ -23,8 +21,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const defaultOptions = {
   keyboardDismissMode: 'none',
-  dividerExposureMode: 'overlapped',
-  supportsReverseScroll: true
+  supportsReverseScroll: true,
+  minVisibleHeight: 0
 };
 const ANIMATION_CONFIG = {
   duration: 100
@@ -38,8 +36,8 @@ function useCollapsibleAppBar() {
   let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
   const {
     keyboardDismissMode,
-    dividerExposureMode,
-    supportsReverseScroll
+    supportsReverseScroll,
+    minVisibleHeight
   } = { ...defaultOptions,
     ...userOptions
   };
@@ -47,23 +45,23 @@ function useCollapsibleAppBar() {
   const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const [appBarHeight, onAppBarLayout] = (0, _hooks.useHeight)();
   const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = (0, _hooks.useHeight)();
-  const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
+  const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const safeMinVisibleHeight = Math.min(minVisibleHeight, collapsibleToolbarHeight);
+    return -(collapsibleToolbarHeight - safeMinVisibleHeight);
+  }, [collapsibleToolbarHeight, minVisibleHeight]);
   const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
   const overlapped = (0, _reactNativeReanimated.useSharedValue)(false);
   const [isScrolled, setIsScrolled] = (0, _react.useState)(false);
-  const theme = (0, _styles.useTheme)();
   const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     const transform = [{
       translateY: translateY.value
     }];
     return {
-      transform,
-      borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,
-      borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
+      transform
     };
-  }, [theme, dividerExposureMode]);
+  }, [translateY]);
   const indexRef = (0, _react.useRef)(0);
   const offsetsRef = (0, _react.useRef)([]);
   const onScrollViewChanged = (0, _react.useCallback)(nextIndex => {
@@ -84,6 +82,15 @@ function useCollapsibleAppBar() {
       translateY.value = (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
     }
   }, [appBarHeight]);
+  const recoverAppBar = (0, _react.useCallback)(() => {
+    const currentIndex = indexRef.current;
+    offsetsRef.current[currentIndex] = 0;
+    lastOffsetY.value = 0;
+    translateY.value = (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
+    lastTranslateY.value = 0;
+    overlapped.value = false;
+    setIsScrolled(false);
+  }, []);
   const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
     onBeginDrag: () => {
       if (keyboardDismissMode === 'on-drag') {
@@ -141,7 +148,7 @@ function useCollapsibleAppBar() {
       overlapped.value = offsetY + nextTranslateY > 0;
       translateY.value = (0, _reactNativeReanimated.withTiming)(nextTranslateY, ANIMATION_CONFIG);
     }
-  }, [keyboardDismissMode, appBarHeight, isScrolled]);
+  });
   const hasCollapsible = collapsibleToolbarHeight > 0;
   const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top
@@ -152,6 +159,7 @@ function useCollapsibleAppBar() {
     onCollapsibleToolbarLayout,
     onScroll: scrollHandler,
     onScrollViewChanged,
+    recoverAppBar,
     scrollContentInsets: {
       top: hasCollapsible ? appBarHeight : 0
     },

package/build/commonjs/hooks/useCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","keyboardDismissMode","dividerExposureMode","supportsReverseScroll","ANIMATION_CONFIG","duration","TRANSPARENT","SUPPORTS_DRAG_DETECTION","Platform","OS","dismissKeyboard","Keyboard","dismiss","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","isScrolled","setIsScrolled","useState","theme","useTheme","animatedStyle","useAnimatedStyle","transform","value","borderColor","palette","divider","borderBottomWidth","StyleSheet","hairlineWidth","indexRef","useRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","current","savedOffsetY","withTiming","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","maxTy","dy","Math","min","max","minOffsetY","maxOffsetY","contentSize","height","layoutMeasurement","safeOffsetY","safeLastOffsetY","newTranslateY","onEndDrag","onMomentumEnd","ty","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport {\n    Falsy,\n    Keyboard,\n    Platform,\n    RegisteredStyle,\n    ScrollViewProps,\n    StyleSheet,\n    ViewProps,\n    ViewStyle,\n} from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/styles';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n    dividerExposureMode?: 'always' | 'overlapped';\n    supportsReverseScroll?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n    isScrolled: boolean;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n    dividerExposureMode: 'overlapped',\n    supportsReverseScroll: true,\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\nconst TRANSPARENT = '#FFFFFF00';\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode, dividerExposureMode, supportsReverseScroll }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n\n    const [isScrolled, setIsScrolled] = useState<boolean>(false);\n\n    const theme = useTheme();\n\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        return {\n            transform,\n            borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,\n            borderBottomWidth: StyleSheet.hairlineWidth,\n        };\n    }, [\n        theme,\n        dividerExposureMode,\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = useCallback((nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, ANIMATION_CONFIG);\n        }\n    }, [appBarHeight]);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(dismissKeyboard)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            if (!isScrolled && offsetY > 0) {\n                runOnJS(setIsScrolled)(true);\n            } else if (isScrolled && offsetY <= 0) {\n                runOnJS(setIsScrolled)(false);\n            }\n\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                const minOffsetY = -maxTy;\n                const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;\n\n                const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);\n                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);\n                const dy = safeOffsetY - safeLastOffsetY;\n\n                const newTranslateY = safeOffsetY <= minOffsetY\n                    ? 0\n                    : supportsReverseScroll\n                        ? dy === 0\n                            ? lastTranslateY.value\n                            : dy > 0\n                                ? maxTy\n                                : 0\n                        : maxTy;\n\n                translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);\n                lastTranslateY.value = newTranslateY;\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n        },\n    }, [keyboardDismissMode, appBarHeight, isScrolled]);\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n        isScrolled,\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["defaultOptions","keyboardDismissMode","supportsReverseScroll","minVisibleHeight","ANIMATION_CONFIG","duration","TRANSPARENT","SUPPORTS_DRAG_DETECTION","Platform","OS","dismissKeyboard","Keyboard","dismiss","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","safeMinVisibleHeight","Math","min","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","isScrolled","setIsScrolled","useState","animatedStyle","useAnimatedStyle","transform","value","indexRef","useRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","current","savedOffsetY","withTiming","recoverAppBar","currentIndex","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","maxTy","dy","max","minOffsetY","maxOffsetY","contentSize","height","layoutMeasurement","safeOffsetY","safeLastOffsetY","newTranslateY","onEndDrag","onMomentumEnd","ty","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n    supportsReverseScroll?: boolean;\n    minVisibleHeight?: number;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    recoverAppBar: () => void;\n    scrollContentInsets: ContentInsets;\n    isScrolled: boolean;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n    supportsReverseScroll: true,\n    minVisibleHeight: 0,\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\nconst TRANSPARENT = '#FFFFFF00';\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode, supportsReverseScroll, minVisibleHeight }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => {\n        const safeMinVisibleHeight = Math.min(minVisibleHeight, collapsibleToolbarHeight);\n        return -(collapsibleToolbarHeight - safeMinVisibleHeight);\n    }, [collapsibleToolbarHeight, minVisibleHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n\n    const [isScrolled, setIsScrolled] = useState<boolean>(false);\n\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        return {\n            transform,\n        };\n    }, [translateY]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = useCallback((nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, ANIMATION_CONFIG);\n        }\n    }, [appBarHeight]);\n\n    const recoverAppBar = useCallback(() => {\n        const currentIndex = indexRef.current;\n\n        offsetsRef.current[currentIndex] = 0;\n\n        lastOffsetY.value = 0;\n\n        translateY.value = withTiming(0, ANIMATION_CONFIG);\n        lastTranslateY.value = 0;\n\n        overlapped.value = false;\n\n        setIsScrolled(false);\n    }, []);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(dismissKeyboard)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            if (!isScrolled && offsetY > 0) {\n                runOnJS(setIsScrolled)(true);\n            } else if (isScrolled && offsetY <= 0) {\n                runOnJS(setIsScrolled)(false);\n            }\n\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                const minOffsetY = -maxTy;\n                const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;\n\n                const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);\n                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);\n                const dy = safeOffsetY - safeLastOffsetY;\n\n                const newTranslateY = safeOffsetY <= minOffsetY\n                    ? 0\n                    : supportsReverseScroll\n                        ? dy === 0\n                            ? lastTranslateY.value\n                            : dy > 0\n                                ? maxTy\n                                : 0\n                        : maxTy;\n\n                translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);\n                lastTranslateY.value = newTranslateY;\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        recoverAppBar,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n        isScrolled,\n    };\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useContentContainerStyle.js

@@ -5,24 +5,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useContentContainerStyle;
 
-var _styles = require("@fountain-ui/styles");
+var _styles = require("../styles");
 
-var _styles2 = require("../styles");
-
-function getMaxWidth(theme, breakpoint) {
+function getMaxWidth(theme, breakpoint, customMaxWidth) {
   switch (breakpoint) {
     case 'lg':
-      return theme.breakpoints.values['lg'];
-
     case 'md':
-      return theme.breakpoints.values['md'];
+      return customMaxWidth ?? theme.breakpoints.values[breakpoint];
+
+    default:
+      return undefined;
+  }
+}
+
+function getHomeScreenPaddingHorizontal(theme, breakpoint) {
+  switch (breakpoint) {
+    case 'xxs':
+    case 'xs':
+      return theme.spacing(3);
 
+    case 'sm':
+      return theme.spacing(6);
+
+    case 'md':
+    case 'lg':
     default:
-      return 'none';
+      return theme.spacing(4);
   }
 }
 
-function getPaddingHorizontal(theme, breakpoint) {
+function getPaddingHorizontal(theme, breakpoint, isHomeScreen) {
+  if (isHomeScreen) {
+    return getHomeScreenPaddingHorizontal(theme, breakpoint);
+  }
+
   switch (breakpoint) {
     case 'sm':
       return theme.spacing(6);
@@ -32,18 +48,20 @@ function getPaddingHorizontal(theme, breakpoint) {
   }
 }
 
-function useContentContainerStyle(config) {
+function useContentContainerStyle() {
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
-    maxWidth,
-    styleProvider
+    maxWidth: customMaxWidth,
+    styleProvider,
+    isHomeScreen = false
   } = config;
-  const theme = (0, _styles2.useTheme)();
-  const currentBreakpoint = (0, _styles.useBreakpointByWidth)();
+  const theme = (0, _styles.useTheme)();
+  const currentBreakpoint = theme.breakpoints.current;
   const additionalStyle = styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider(theme);
-  return (0, _styles2.css)([{
+  return (0, _styles.css)([{
     alignSelf: 'center',
-    maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),
-    paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
+    maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
+    paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint, isHomeScreen),
     width: '100%'
   }, additionalStyle]);
 }