@artsy/palette-mobile 14.0.28 → 14.0.30

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

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import { Color } from "@artsy/palette-tokens";
-import { ViewStyle } from "react-native";
 import RNPopover from "react-native-popover-view";
 interface PopoverProps {
     children?: React.ReactElement;
     variant?: PopoverVariant;
     title?: React.ReactElement;
     content?: React.ReactElement;
+    onOpenComplete?: () => void;
     onPressOutside?: () => void;
     onDismiss?: () => void;
     onCloseComplete?: RNPopover["props"]["onCloseComplete"];
@@ -14,11 +13,6 @@ interface PopoverProps {
     noCloseIcon?: boolean;
     visible?: boolean;
 }
-export declare const Popover: ({ variant, children, visible, onPressOutside, onDismiss, onCloseComplete, placement, title, content, noCloseIcon, }: PopoverProps) => JSX.Element;
-export declare const POPOVER_VARIANTS: Record<"light" | "dark", {
-    backgroundColor: string;
-    fill: Color;
-    shadow?: ViewStyle;
-}>;
-export type PopoverVariant = keyof typeof POPOVER_VARIANTS;
+export declare const Popover: ({ variant, children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement, title, content, noCloseIcon, }: PopoverProps) => JSX.Element;
+export type PopoverVariant = "light" | "dark";
 export {};

package/dist/elements/Popover/Popover.js

@@ -1,42 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { THEME } from "@artsy/palette-tokens";
 import { Platform, StatusBar } from "react-native";
 import RNPopover from "react-native-popover-view";
 import { Easing } from "react-native-reanimated";
-import styled from "styled-components";
 import { CloseIcon } from "../../svgs";
+import { useColor } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Touchable } from "../Touchable";
-export const Popover = ({ variant = "dark", children, visible, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
+export const Popover = ({ variant = "dark", children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
+    const color = useColor();
+    const DROP_SHADOW = {
+        shadowColor: color("black100"),
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.23,
+        shadowRadius: 2.62,
+        elevation: 4,
+    };
+    const POPOVER_VARIANTS = {
+        light: {
+            backgroundColor: color("white100"),
+            fill: "black100",
+            shadow: DROP_SHADOW,
+        },
+        dark: {
+            backgroundColor: color("black100"),
+            fill: "white100",
+        },
+    };
     const style = POPOVER_VARIANTS[variant];
-    return (_jsx(RNPopover, { backgroundStyle: { opacity: 0.5, backgroundColor: THEME.colors.black100 }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, 
+    return (_jsx(RNPopover, { backgroundStyle: { opacity: 0.5, backgroundColor: color("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: Platform.OS === "android" ? -(StatusBar.currentHeight ?? 0) : 0, onCloseComplete: onCloseComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
+        verticalOffset: Platform.OS === "android" ? -(StatusBar.currentHeight ?? 0) : 0, onCloseComplete: onCloseComplete, onOpenComplete: onOpenComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
             duration: 400,
             easing: Easing.out(Easing.exp),
-        }, children: _jsxs(Container, { variant: variant, 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] }) }));
-};
-const Container = styled(Flex) `
-  background-color: ${({ variant }) => POPOVER_VARIANTS[variant].backgroundColor};
-`;
-const DROP_SHADOW = {
-    shadowColor: THEME.colors.black100,
-    shadowOffset: {
-        width: 0,
-        height: 2,
-    },
-    shadowOpacity: 0.23,
-    shadowRadius: 2.62,
-    elevation: 4,
-};
-export const POPOVER_VARIANTS = {
-    light: {
-        backgroundColor: THEME.colors.white100,
-        fill: "black100",
-        shadow: DROP_SHADOW,
-    },
-    dark: {
-        backgroundColor: THEME.colors.black100,
-        fill: "white100",
-    },
+        }, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "14.0.28",
+  "version": "14.0.30",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",