@artsy/palette-mobile 13.0.9 → 13.0.11

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v13.0.11 (Tue Sep 19 2023)
+
+#### 🐛 Bug Fix
+
+- fix: progressive onboarding positioning on android [#153](https://github.com/artsy/palette-mobile/pull/153) ([@MounirDhahri](https://github.com/MounirDhahri))
+
+#### Authors: 1
+
+- Mounir Dhahri ([@MounirDhahri](https://github.com/MounirDhahri))
+
+---
+
+# v13.0.10 (Mon Sep 18 2023)
+
+#### 🐛 Bug Fix
+
+- fix: Add flowDirection prop to tooltip component [#151](https://github.com/artsy/palette-mobile/pull/151) ([@olerichter00](https://github.com/olerichter00))
+
+#### Authors: 1
+
+- Ole ([@olerichter00](https://github.com/olerichter00))
+
+---
+
 # v13.0.9 (Fri Sep 15 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/Popover/Popover.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.POPOVER_VARIANTS = exports.Popover = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const palette_tokens_1 = require("@artsy/palette-tokens");
+const react_native_1 = require("react-native");
 const react_native_popover_view_1 = __importDefault(require("react-native-popover-view"));
 const react_native_reanimated_1 = require("react-native-reanimated");
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -14,7 +15,9 @@ const Flex_1 = require("../Flex");
 const Touchable_1 = require("../Touchable");
 const Popover = ({ variant = "dark", children, visible, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
     const style = exports.POPOVER_VARIANTS[variant];
-    return ((0, jsx_runtime_1.jsx)(react_native_popover_view_1.default, { backgroundStyle: { opacity: 0.5, backgroundColor: palette_tokens_1.THEME.colors["black100"] }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, onCloseComplete: onCloseComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
+    return ((0, jsx_runtime_1.jsx)(react_native_popover_view_1.default, { backgroundStyle: { opacity: 0.5, backgroundColor: palette_tokens_1.THEME.colors["black100"] }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, 
+        // this is required to make sure that the popover is positioned correctly on android
+        verticalOffset: react_native_1.Platform.OS === "android" ? -(react_native_1.StatusBar.currentHeight ?? 0) : 0, onCloseComplete: onCloseComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
             duration: 400,
             easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp),
         }, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, p: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : (0, jsx_runtime_1.jsx)(Flex_1.Flex, {}), !noCloseIcon && ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onDismiss, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: 0.5, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) }));

package/dist/elements/ToolTip/ToolTip.d.ts

@@ -6,6 +6,8 @@ interface ToolTipContextValues {
 interface ToolTipProps {
     children?: React.ReactNode;
     enabled?: Boolean;
+    /** The direction the tooltip should flow. If not provided, the tooltip will flow to the left if it is near the right edge of the screen, and vice-versa */
+    flowDirection?: "LEFT" | "RIGHT";
     initialToolTipText?: string;
     maxWidth?: number;
     onPress?: () => void;

package/dist/elements/ToolTip/ToolTip.js

@@ -33,7 +33,7 @@ exports.ToolTipContext = (0, react_1.createContext)({
  * </ToolTip>
  *
  */
-const ToolTip = ({ children, enabled = true, initialToolTipText, maxWidth, onPress, position = "TOP", tapToDismiss = false, testID, xOffset = 0, yOffset = 5, }) => {
+const ToolTip = ({ children, enabled = true, flowDirection, initialToolTipText, maxWidth, onPress, position = "TOP", tapToDismiss = false, testID, xOffset = 0, yOffset = 5, }) => {
     const { space } = (0, useTheme_1.useTheme)();
     const mWidth = (0, useScreenDimensions_1.useScreenDimensions)().width - space(2) * 2; // 40 accounting for padding 20 on each side of the screen
     const MAX_TOOLTIP_WIDTH = maxWidth ?? mWidth;
@@ -51,8 +51,8 @@ const ToolTip = ({ children, enabled = true, initialToolTipText, maxWidth, onPre
     // Calculate the direction of flow of the tooltip. So a tooltip near the right edge of the screen
     // should flow to the left so it remains in the viewport, and vice-versa. Without this, tooltip
     // around the edges can flow off screen
-    const nearLeftEdge = pageX < mWidth / 4;
-    const nearRightEdge = pageX > mWidth - mWidth / 4;
+    const nearLeftEdge = pageX < mWidth / 4 || flowDirection === "RIGHT";
+    const nearRightEdge = pageX > mWidth - mWidth / 4 || flowDirection === "LEFT";
     const extraStyle = nearLeftEdge ? { left: 0 } : nearRightEdge ? { right: 0 } : undefined;
     return ((0, jsx_runtime_1.jsxs)(exports.ToolTipContext.Provider, { value: {
             dismissToolTip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.0.9",
+  "version": "13.0.11",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",