@artsy/palette-mobile 17.27.0 → 17.29.0

package/dist/constants.d.ts

@@ -7,6 +7,7 @@ export declare const DEFAULT_HIT_SLOP: {
     left: number;
     right: number;
 };
+export declare const DEFAULT_ICON_SIZE: number;
 /**
  * Default active opacity for elements that use Palette's <Touchable />
  */

package/dist/constants.js

@@ -1,7 +1,9 @@
+import { PixelRatio } from "react-native";
 /**
  * Touch area box for UI elements
  */
 export const DEFAULT_HIT_SLOP = { top: 20, bottom: 20, left: 20, right: 20 };
+export const DEFAULT_ICON_SIZE = 24 * PixelRatio.getFontScale();
 /**
  * Default active opacity for elements that use Palette's <Touchable />
  */

package/dist/elements/Popover/Popover.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import RNPopover from "react-native-popover-view";
-interface PopoverProps {
+import { PopoverProps as RNPopoverProps } from "react-native-popover-view/dist/Types";
+interface PopoverProps extends Omit<RNPopoverProps, "placement"> {
     children?: React.ReactElement;
     variant?: PopoverVariant;
     title?: React.ReactElement;
@@ -13,6 +14,6 @@ interface PopoverProps {
     noCloseIcon?: boolean;
     visible?: boolean;
 }
-export declare const Popover: ({ variant, children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement, title, content, noCloseIcon, }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ variant, children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement, title, content, noCloseIcon, ...rest }: PopoverProps) => JSX.Element;
 export type PopoverVariant = "light" | "dark";
 export {};

package/dist/elements/Popover/Popover.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Platform, StatusBar } from "react-native";
 import RNPopover from "react-native-popover-view";
 import { Easing } from "react-native-reanimated";
 import { CloseIcon } from "../../svgs";
 import { useColor } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Touchable } from "../Touchable";
-export const Popover = ({ variant = "dark", children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
+export const Popover = ({ variant = "dark", children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, ...rest }) => {
     const color = useColor();
     const DROP_SHADOW = {
         shadowColor: color("mono100"),
@@ -30,10 +29,8 @@ export const Popover = ({ variant = "dark", children, visible, onOpenComplete, o
         },
     };
     const style = POPOVER_VARIANTS[variant];
-    return (_jsx(RNPopover, { backgroundStyle: { opacity: 0.5, backgroundColor: color("mono100") }, 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: Platform.OS === "android" ? -(StatusBar.currentHeight ?? 0) : 0, onCloseComplete: onCloseComplete, onOpenComplete: onOpenComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
+    return (_jsx(RNPopover, { backgroundStyle: { opacity: 0.5, backgroundColor: color("mono100") }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, onCloseComplete: onCloseComplete, onOpenComplete: onOpenComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
             duration: 400,
             easing: Easing.out(Easing.exp),
-        }, children: _jsxs(Flex, { backgroundColor: POPOVER_VARIANTS[variant].backgroundColor, p: 1, children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : _jsx(Flex, {}), !noCloseIcon && (_jsx(Touchable, { onPress: onDismiss, accessibilityRole: "button", "aria-label": "Dismiss popover", children: _jsx(Flex, { ml: 0.5, children: _jsx(CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) }));
+        }, ...rest, children: _jsxs(Flex, { backgroundColor: POPOVER_VARIANTS[variant].backgroundColor, p: 1, children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : _jsx(Flex, {}), !noCloseIcon && (_jsx(Touchable, { onPress: onDismiss, accessibilityRole: "button", "aria-label": "Dismiss popover", children: _jsx(Flex, { ml: 0.5, children: _jsx(CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) }));
 };

package/dist/elements/Screen/Header.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Animated, { Easing, FadeIn, FadeOut, useAnimatedStyle, useDerivedValue, } from "react-native-reanimated";
 import { useScreenScrollContext } from "./ScreenScrollContext";
 import { NAVBAR_HEIGHT, ZINDEX } from "./constants";
-import { DEFAULT_HIT_SLOP } from "../../constants";
+import { DEFAULT_HIT_SLOP, DEFAULT_ICON_SIZE } from "../../constants";
 import { ArrowLeftIcon } from "../../svgs/ArrowLeftIcon";
+import { useScreenDimensions, useSpace } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 import { Touchable } from "../Touchable";
@@ -11,7 +12,12 @@ export const AnimatedHeader = (props) => {
     return _jsx(Header, { animated: true, ...props });
 };
 export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, }) => {
-    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
+    const { width } = useScreenDimensions();
+    const space = useSpace();
+    // Assumes small left and right elements, it protects from overflowing
+    // but doesn't cover edge cases where right or left are bigger
+    const centerMaxWidth = width - space(4) - DEFAULT_ICON_SIZE * 2;
+    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { maxWidth: centerMaxWidth, ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
 };
 const Right = ({ hideRightElements, rightElements }) => {
     return _jsx(_Fragment, { children: !hideRightElements && rightElements });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.27.0",
+  "version": "17.29.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",
@@ -45,7 +45,7 @@
     "react-native-blurhash": "^2.1.1",
     "react-native-collapsible-tab-view": "^8.0.1",
     "react-native-pager-view": "6.5.0",
-    "react-native-popover-view": "^5.1.7",
+    "react-native-popover-view": "^6.1.0",
     "react-spring": "8.0.23",
     "styled-system": "^5.1.5"
   },