@artsy/palette-mobile 24.15.0 → 24.17.0

package/dist/elements/Popover/Popover.js

@@ -28,11 +28,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var native_1 = require("@artsy/icons/native");
+var react_native_1 = require("react-native");
 var react_native_popover_view_1 = __importDefault(require("react-native-popover-view"));
 var react_native_reanimated_1 = require("react-native-reanimated");
 var hooks_1 = require("../../utils/hooks");
 var Flex_1 = require("../Flex");
 var Touchable_1 = require("../Touchable");
+// Apps targeting SDK 35+ are edge-to-edge from Android 15 (API 35), so the anchor rect already
+// includes the status bar and react-native-popover-view must not add StatusBar.currentHeight to it.
+var IS_ANDROID_EDGE_TO_EDGE = react_native_1.Platform.OS === "android" && Number(react_native_1.Platform.Version) >= 35;
 var Popover = function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? "dark" : _b, children = _a.children, visible = _a.visible, onOpenComplete = _a.onOpenComplete, onPressOutside = _a.onPressOutside, onDismiss = _a.onDismiss, onCloseComplete = _a.onCloseComplete, _c = _a.placement, placement = _c === void 0 ? "top" : _c, title = _a.title, content = _a.content, noCloseIcon = _a.noCloseIcon, rest = __rest(_a, ["variant", "children", "visible", "onOpenComplete", "onPressOutside", "onDismiss", "onCloseComplete", "placement", "title", "content", "noCloseIcon"]);
     var color = (0, hooks_1.useColor)();
@@ -58,7 +62,7 @@ var Popover = function (_a) {
         },
     };
     var style = POPOVER_VARIANTS[variant];
-    return ((0, jsx_runtime_1.jsx)(react_native_popover_view_1.default, __assign({ 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: {
+    return ((0, jsx_runtime_1.jsx)(react_native_popover_view_1.default, __assign({ 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, statusBarTranslucent: !IS_ANDROID_EDGE_TO_EDGE, arrowSize: { height: 11, width: 22 }, animationConfig: {
             duration: 400,
             easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp),
         } }, rest, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: POPOVER_VARIANTS[variant].backgroundColor, 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, accessibilityRole: "button", "aria-label": "Dismiss popover", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: 0.5, children: (0, jsx_runtime_1.jsx)(native_1.CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) })));

package/dist/elements/Tabs/TabsContainer.js

@@ -48,10 +48,10 @@ var DefaultTabItem = function (props) {
     return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", width: "100%", children: !!(Indicator === null || Indicator === void 0 ? void 0 : Indicator.Component) && (0, jsx_runtime_1.jsx)(Indicator.Component, __assign({}, props)) }), (0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.MaterialTabItem, __assign({ pressOpacity: constants_1.DEFAULT_ACTIVE_OPACITY }, props))] }));
 };
 var TabsContainer = function (_a) {
-    var children = _a.children, _b = _a.indicators, indicators = _b === void 0 ? [] : _b, initialTabName = _a.initialTabName, onTabPress = _a.onTabPress, renderHeader = _a.renderHeader, stickyTabBarComponent = _a.stickyTabBarComponent, _c = _a.tabScrollEnabled, tabScrollEnabled = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? "tabs" : _d, tabContainerProps = __rest(_a, ["children", "indicators", "initialTabName", "onTabPress", "renderHeader", "stickyTabBarComponent", "tabScrollEnabled", "variant"]);
+    var children = _a.children, _b = _a.indicators, indicators = _b === void 0 ? [] : _b, initialTabName = _a.initialTabName, onTabPress = _a.onTabPress, renderHeader = _a.renderHeader, stickyTabBarComponent = _a.stickyTabBarComponent, _c = _a.tabScrollEnabled, tabScrollEnabled = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? "tabs" : _d, _e = _a.allowHeaderOverscroll, allowHeaderOverscroll = _e === void 0 ? true : _e, tabContainerProps = __rest(_a, ["children", "indicators", "initialTabName", "onTabPress", "renderHeader", "stickyTabBarComponent", "tabScrollEnabled", "variant", "allowHeaderOverscroll"]);
     var space = (0, useSpace_1.useSpace)();
     var color = (0, useColor_1.useColor)();
-    var _e = (0, react_1.useState)(initialTabName), focusedTabState = _e[0], setFocusedTabState = _e[1];
+    var _f = (0, react_1.useState)(initialTabName), focusedTabState = _f[0], setFocusedTabState = _f[1];
     var isIOS = react_native_1.Platform.OS === "ios";
     return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.Container, __assign({ renderHeader: renderHeader, headerContainerStyle: {
             shadowOpacity: 0,
@@ -85,6 +85,6 @@ var TabsContainer = function (_a) {
                         // to prevent linebreaks on the tab titles
                         paddingHorizontal: 0,
                     } })) }));
-        } }, tabContainerProps, { children: children })));
+        }, allowHeaderOverscroll: allowHeaderOverscroll }, tabContainerProps, { children: children })));
 };
 exports.TabsContainer = TabsContainer;

package/dist/elements/Tabs/TabsWithHeader.js

@@ -37,9 +37,9 @@ var TabsWithHeader = function (_a) {
 };
 exports.TabsWithHeader = TabsWithHeader;
 var Content = function (_a) {
-    var BelowTitleHeaderComponent = _a.BelowTitleHeaderComponent, children = _a.children, _b = _a.showLargeHeaderText, showLargeHeaderText = _b === void 0 ? true : _b, title = _a.title, _c = _a.allowHeaderOverscroll, allowHeaderOverscroll = _c === void 0 ? true : _c, rest = __rest(_a, ["BelowTitleHeaderComponent", "children", "showLargeHeaderText", "title", "allowHeaderOverscroll"]);
+    var BelowTitleHeaderComponent = _a.BelowTitleHeaderComponent, children = _a.children, _b = _a.showLargeHeaderText, showLargeHeaderText = _b === void 0 ? true : _b, title = _a.title, rest = __rest(_a, ["BelowTitleHeaderComponent", "children", "showLargeHeaderText", "title"]);
     var showTitle = showLargeHeaderText && !!title;
-    return ((0, jsx_runtime_1.jsx)(TabsContainer_1.TabsContainer, __assign({ allowHeaderOverscroll: allowHeaderOverscroll }, rest, { renderHeader: function () {
+    return ((0, jsx_runtime_1.jsx)(TabsContainer_1.TabsContainer, __assign({}, rest, { renderHeader: function () {
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!showTitle && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { my: 1, px: 2, justifyContent: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", numberOfLines: 2, children: title }) })), !!BelowTitleHeaderComponent && (0, jsx_runtime_1.jsx)(BelowTitleHeaderComponent, {})] }));
         }, children: children })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "24.15.0",
+  "version": "24.17.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"