@artsy/palette-mobile 13.0.31 → 13.0.33

package/dist/elements/BorderBox/BorderBox.d.ts

@@ -9,4 +9,4 @@ export interface BorderBoxProps extends FlexProps, BorderProps, SpaceProps<Spaci
  * A `View` or `div` (depending on the platform) that has a common border
  * and padding set by default
  */
-export declare const BorderBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").BoxProps & import("react").RefAttributes<import("react-native").View>>, any, BorderBoxProps, never>;
+export declare const BorderBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").BoxProps & import("react").RefAttributes<import("react-native/types").View>>, any, BorderBoxProps, never>;

package/dist/elements/Screen/StickySubHeader.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 export interface StickySubHeaderProps extends React.PropsWithChildren<{}> {
     title: string;
+    subTitle?: string;
 }
 export declare const StickySubHeader: React.FC<StickySubHeaderProps>;

package/dist/elements/Screen/StickySubHeader.js

@@ -3,22 +3,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StickySubHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const moti_1 = require("moti");
+const react_1 = require("react");
 const ScreenScrollContext_1 = require("./ScreenScrollContext");
 const constants_1 = require("./constants");
+const hooks_1 = require("../../utils/hooks");
 const Flex_1 = require("../Flex");
 const Separator_1 = require("../Separator");
 const Text_1 = require("../Text");
-const STICKY_BAR_HEIGHT = 60;
-const StickySubHeader = ({ title, children }) => {
+const STICKY_BAR_HEIGHT = 52;
+const StickySubHeader = ({ title, subTitle, children }) => {
     const { currentScrollY, scrollYOffset = 0 } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const space = (0, hooks_1.useSpace)();
+    const [stickyBarHeight, setStickyHeaderHeight] = (0, react_1.useState)(null);
     const visible = currentScrollY >= constants_1.NAVBAR_HEIGHT + scrollYOffset ? false : true;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: {
-                    height: visible ? STICKY_BAR_HEIGHT : 0,
-                    opacity: visible ? 1 : 0,
-                    transform: [{ translateY: visible ? 0 : -STICKY_BAR_HEIGHT }],
-                }, transition: {
+    const handleLayout = (event) => {
+        setStickyHeaderHeight(event.nativeEvent.layout.height);
+    };
+    // The styles are kept in a variable to make sure they're always in sync with the hidden text component
+    const styles = {
+        paddingVertical: space(1),
+        paddingHorizontal: space(2),
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [stickyBarHeight === null && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: styles, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", color: "white100", children: title }), !!subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle }))] })), (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: {
+                    height: visible ? stickyBarHeight || undefined : 0,
+                    transform: [{ translateY: visible ? 0 : -(stickyBarHeight || STICKY_BAR_HEIGHT) }],
+                }, style: styles, transition: {
                     type: "timing",
-                    duration: 200,
-                }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", numberOfLines: 1, px: 2, children: title }) }), children, (0, jsx_runtime_1.jsx)(Separator_1.Separator, { borderColor: "black10" })] }));
+                    duration: 100,
+                }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: { height: stickyBarHeight }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: title }), subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, children: subTitle }))] }) }), children, (0, jsx_runtime_1.jsx)(Separator_1.Separator, { borderColor: "black10" })] }));
 };
 exports.StickySubHeader = StickySubHeader;

package/dist/elements/Screen/hooks/useListenForScreenScroll.d.ts

@@ -1,3 +1,3 @@
 export declare const useListenForScreenScroll: () => {
-    scrollHandler: (event: import("react-native").NativeSyntheticEvent<import("react-native").NativeScrollEvent>) => void;
+    scrollHandler: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
 };

package/dist/elements/Screen/index.d.ts

@@ -16,10 +16,10 @@ export declare const Screen: import("react").FC<import("./ScreenBase").ScreenBas
     ScreenScrollContextProvider: import("react").FC<{
         children?: import("react").ReactNode;
     }>;
-    ScrollView: import("react").FC<import("react-native").ScrollViewProps>;
+    ScrollView: import("react").FC<import("react-native/types").ScrollViewProps>;
     StickySubHeader: import("react").FC<import("./StickySubHeader").StickySubHeaderProps>;
     useListenForScreenScroll: () => {
-        scrollHandler: (event: import("react-native").NativeSyntheticEvent<import("react-native").NativeScrollEvent>) => void;
+        scrollHandler: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
     };
     useScreenScrollContext: () => import("./ScreenScrollContext").ScreenScrollContextProps;
 };

package/dist/elements/Separator/Separator.d.ts

@@ -5,4 +5,4 @@ export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps {
 /**
  * A horizontal divider whose width and spacing can be adjusted
  */
-export declare const Separator: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, SeparatorProps, never>;
+export declare const Separator: import("styled-components").StyledComponent<typeof import("react-native/types").View, import("styled-components").DefaultTheme, SeparatorProps, never>;

package/dist/elements/Separator/Separator.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("./Separator").SeparatorProps, never>;
+    component: import("styled-components").StyledComponent<typeof import("react-native/types").View, import("styled-components").DefaultTheme, import("./Separator").SeparatorProps, never>;
 };
 export default _default;
 export declare const Styled: () => JSX.Element;

package/dist/elements/Separator/ShadowSeparator.d.ts

@@ -1 +1 @@
-export declare const ShadowSeparator: import("styled-components").StyledComponent<typeof import("react-native").View, any, import("./Separator").SeparatorProps, never>;
+export declare const ShadowSeparator: import("styled-components").StyledComponent<typeof import("react-native/types").View, any, import("./Separator").SeparatorProps, never>;

package/dist/elements/Tabs/Tabs.d.ts

@@ -11,9 +11,9 @@ export declare const Tabs: import("react").FC<import("./TabsContainer").TabsCont
         startMounted?: boolean | undefined;
         children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     }>;
-    ScrollView: import("react").FC<import("react-native").ScrollViewProps>;
-    SectionList: <T_1>(p: import("react-native").SectionListProps<T_1, import("react-native").DefaultSectionT> & {
-        ref?: ((instance: import("react-native").SectionList<T_1, import("react-native").DefaultSectionT> | null) => void) | import("react").RefObject<import("react-native").SectionList<T_1, import("react-native").DefaultSectionT>> | null | undefined;
+    ScrollView: import("react").FC<import("react-native/types").ScrollViewProps>;
+    SectionList: <T_1>(p: import("react-native/types").SectionListProps<T_1, import("react-native/types").DefaultSectionT> & {
+        ref?: ((instance: import("react-native/types").SectionList<T_1, import("react-native/types").DefaultSectionT> | null) => void) | import("react").RefObject<import("react-native/types").SectionList<T_1, import("react-native/types").DefaultSectionT>> | null | undefined;
     }) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     SubTabBar: import("react").FC<{
         children?: import("react").ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.0.31",
+  "version": "13.0.33",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",
@@ -124,7 +124,7 @@
     "react-native-linear-gradient": "2.6.2",
     "react-native-reanimated": "^3.3.0",
     "react-native-safe-area-context": "4.5.0",
-    "react-native-svg": "13.7.0",
+    "react-native-svg": "14.1.0",
     "react-test-renderer": "18.2.0",
     "rimraf": "4.1.2",
     "rn-flipper-async-storage-advanced": "1.0.4",