@artsy/palette-mobile 11.0.38 → 11.0.40

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v11.0.40 (Fri Jun 09 2023)
+
+#### 🐛 Bug Fix
+
+- feat(screen): Add scroll tracking support for animated headers [#114](https://github.com/artsy/palette-mobile/pull/114) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
+# v11.0.39 (Thu Jun 08 2023)
+
+#### 🐛 Bug Fix
+
+- fix(tabs): ensure border overlaps [#112](https://github.com/artsy/palette-mobile/pull/112) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
 # v11.0.38 (Thu Jun 08 2023)
 
 #### ⚠️ Pushed to `main`

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

@@ -13,5 +13,5 @@ export interface HeaderProps {
     titleProps?: FlexProps;
     titleShown?: boolean;
 }
-export declare const AnimatedTabsHeader: React.FC<HeaderProps>;
+export declare const AnimatedHeader: React.FC<HeaderProps>;
 export declare const Header: React.FC<HeaderProps>;

package/dist/elements/Screen/Header.js

@@ -23,22 +23,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = exports.AnimatedTabsHeader = void 0;
+exports.Header = exports.AnimatedHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const ScreenScrollContext_1 = require("./ScreenScrollContext");
 const constants_1 = require("./constants");
 const constants_2 = require("../../constants");
 const ArrowLeftIcon_1 = require("../../svgs/ArrowLeftIcon");
 const Flex_1 = require("../Flex");
 const Spacer_1 = require("../Spacer");
-const TabsContext_1 = require("../Tabs/TabsContext");
 const Text_1 = require("../Text");
 const Touchable_1 = require("../Touchable");
-const AnimatedTabsHeader = (props) => {
-    const { currentScrollY } = (0, TabsContext_1.useTabsContext)();
+const AnimatedHeader = (props) => {
+    const { currentScrollY } = (0, ScreenScrollContext_1.useScreenScrollContext)();
     return (0, jsx_runtime_1.jsx)(exports.Header, { scrollY: currentScrollY, animated: true, ...props });
 };
-exports.AnimatedTabsHeader = AnimatedTabsHeader;
+exports.AnimatedHeader = AnimatedHeader;
 const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, scrollY = 0, title, titleProps = {}, }) => {
     const Left = () => {
         if (hideLeftElements) {

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

@@ -0,0 +1 @@
+export {};

package/dist/elements/Screen/Screen.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("@storybook/react-native");
+const Flex_1 = require("../Flex");
+const Screen_1 = require("../Screen");
+const Text_1 = require("../Text");
+(0, react_native_1.storiesOf)("Screen", module)
+    .add("With Header and BottomView", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
+    .add("ScrollView With AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsxs)(Screen_1.Screen.ScrollView, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
+    .add("FlatList With AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsx)(Screen_1.Screen.FlatList, { ListHeaderComponent: () => (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
+                    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: item }, index));
+                } }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
+    .add("Fullwidth", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }) })] })));

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export interface ScreenBaseProps {
+import { FlexProps } from "../Flex";
+export interface ScreenBaseProps extends FlexProps {
     children: React.ReactNode;
     safeArea?: boolean;
 }

package/dist/elements/Screen/ScreenBase.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScreenBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const ScreenScrollContext_1 = require("./ScreenScrollContext");
 const Flex_1 = require("../Flex");
-const ScreenBase = ({ children, safeArea = true }) => {
+const ScreenBase = ({ children, safeArea = true, ...flexProps }) => {
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", mt: safeArea ? insets.top : 0, children: [children, (0, jsx_runtime_1.jsx)(SafeAreaCover, { safeArea: true })] }));
+    return ((0, jsx_runtime_1.jsx)(ScreenScrollContext_1.ScreenScrollContextProvider, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", mt: safeArea ? insets.top : 0, ...flexProps, children: [children, (0, jsx_runtime_1.jsx)(SafeAreaCover, { safeArea: true })] }) }));
 };
 exports.ScreenBase = ScreenBase;
 const SafeAreaCover = ({ safeArea }) => {

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlatListProps } from "react-native";
+export declare function ScreenFlatList<T>(props: FlatListProps<T>): JSX.Element;

package/dist/elements/Screen/ScreenFlatList.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenFlatList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_1 = require("lodash");
+const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+const useListenForScreenScroll_1 = require("./hooks/useListenForScreenScroll");
+function ScreenFlatList(props) {
+    const { scrollHandler } = (0, useListenForScreenScroll_1.useListenForScreenScroll)();
+    let handleScroll;
+    if (props.onScroll) {
+        handleScroll = (0, lodash_1.flowRight)(scrollHandler, props.onScroll);
+    }
+    else {
+        handleScroll = scrollHandler;
+    }
+    return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.FlatList, { ...props, onScroll: handleScroll });
+}
+exports.ScreenFlatList = ScreenFlatList;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface ScreenScrollContextProps {
+    currentScrollY: number;
+    updateCurrentScrollY: (scrollY: number) => void;
+}
+export declare const ScreenScrollContextProvider: React.FC<React.PropsWithChildren>;
+export declare const useScreenScrollContext: () => ScreenScrollContextProps;

package/dist/elements/Screen/ScreenScrollContext.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScreenScrollContext = exports.ScreenScrollContextProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ScreenScrollContext = (0, react_1.createContext)({
+    currentScrollY: 0,
+    updateCurrentScrollY: () => { },
+});
+const ScreenScrollContextProvider = ({ children }) => {
+    const [currentScrollY, setCurrentScrollY] = (0, react_1.useState)(0);
+    const providerValue = {
+        currentScrollY,
+        updateCurrentScrollY: (scrollY) => {
+            setCurrentScrollY(scrollY);
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)(ScreenScrollContext.Provider, { value: providerValue, children: children }));
+};
+exports.ScreenScrollContextProvider = ScreenScrollContextProvider;
+const useScreenScrollContext = () => {
+    const context = (0, react_1.useContext)(ScreenScrollContext);
+    if (!context) {
+        throw new Error("useScreenScrollContext must be used within a Screen.ScreenScrollContextProvider component");
+    }
+    return context;
+};
+exports.useScreenScrollContext = useScreenScrollContext;

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { ScrollViewProps } from "react-native";
+export declare const ScreenScrollView: React.FC<ScrollViewProps>;

package/dist/elements/Screen/ScreenScrollView.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenScrollView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_1 = require("lodash");
+const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+const useListenForScreenScroll_1 = require("./hooks/useListenForScreenScroll");
+const ScreenScrollView = (props) => {
+    const { scrollHandler } = (0, useListenForScreenScroll_1.useListenForScreenScroll)();
+    let handleScroll;
+    if (props.onScroll) {
+        handleScroll = (0, lodash_1.flowRight)(scrollHandler, props.onScroll);
+    }
+    else {
+        handleScroll = scrollHandler;
+    }
+    return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.ScrollView, { ...props, onScroll: handleScroll, scrollEventThrottle: 16 });
+};
+exports.ScreenScrollView = ScreenScrollView;

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

@@ -0,0 +1,2 @@
+import { SharedValue } from "react-native-reanimated";
+export declare const useAnimatedHeaderScrolling: (scrollY: SharedValue<number>) => number;

package/dist/elements/{Tabs/useListenForTabContentScroll.js → Screen/hooks/useAnimatedHeaderScrolling.js}

@@ -1,20 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useListenForTabContentScroll = void 0;
+exports.useAnimatedHeaderScrolling = void 0;
 const react_1 = require("react");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
 const react_native_reanimated_1 = require("react-native-reanimated");
-const TabsContext_1 = require("./TabsContext");
-const constants_1 = require("../Screen/constants");
-const useListenForTabContentScroll = () => {
-    const scrollY = useAnimatedTabsHeaderScrolling((0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)());
-    const { updateCurrentScrollY } = (0, TabsContext_1.useTabsContext)();
-    (0, react_1.useEffect)(() => {
-        updateCurrentScrollY(scrollY);
-    }, [scrollY, updateCurrentScrollY]);
-};
-exports.useListenForTabContentScroll = useListenForTabContentScroll;
-const useAnimatedTabsHeaderScrolling = (scrollY) => {
+const constants_1 = require("../constants");
+const useAnimatedHeaderScrolling = (scrollY) => {
     const listenForScroll = (0, react_native_reanimated_1.useSharedValue)(true);
     const [currScrollY, setCurrScrollY] = (0, react_1.useState)(scrollY.value);
     // Needed to run on JS thread
@@ -50,3 +40,4 @@ const useAnimatedTabsHeaderScrolling = (scrollY) => {
     }, [scrollY]);
     return currScrollY;
 };
+exports.useAnimatedHeaderScrolling = useAnimatedHeaderScrolling;

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

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

package/dist/elements/Screen/hooks/useListenForScreenScroll.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListenForScreenScroll = void 0;
+const react_1 = require("react");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const useAnimatedHeaderScrolling_1 = require("./useAnimatedHeaderScrolling");
+const ScreenScrollContext_1 = require("../ScreenScrollContext");
+const useListenForScreenScroll = () => {
+    const { updateCurrentScrollY } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const animatedScrollY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)(animatedScrollY);
+    const scrollHandler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
+        onScroll: (event) => {
+            "worklet";
+            animatedScrollY.value = event.contentOffset.y;
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        updateCurrentScrollY(scrollY);
+    }, [scrollY, updateCurrentScrollY]);
+    return {
+        scrollHandler,
+    };
+};
+exports.useListenForScreenScroll = useListenForScreenScroll;

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

@@ -1,14 +1,21 @@
 /// <reference types="react" />
+import { ScreenFlatList } from "./ScreenFlatList";
 export * from "./constants";
 export declare const Screen: import("react").FC<import("./ScreenBase").ScreenBaseProps> & {
-    AnimatedTabsHeader: import("react").FC<import("./Header").HeaderProps>;
+    AnimatedHeader: import("react").FC<import("./Header").HeaderProps>;
     Background: import("react").FC<{
         children: import("react").ReactNode;
     }>;
     Body: import("react").FC<import("./Body").BodyProps>;
     BottomView: import("react").FC<import("./BottomView").BottomViewProps>;
+    FlatList: typeof ScreenFlatList;
     FloatingHeader: ({ onBack, rightElements }: import("./FloatingHeader").FloatingHeaderProps) => JSX.Element;
     FullWidthDivider: import("react").FC<import("..").BoxProps>;
     FullWidthItem: import("react").FC<import("..").BoxProps>;
     Header: import("react").FC<import("./Header").HeaderProps>;
+    ScreenScrollContextProvider: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    ScrollView: import("react").FC<import("react-native").ScrollViewProps>;
+    useScreenScrollContext: () => import("./ScreenScrollContext").ScreenScrollContextProps;
 };

package/dist/elements/Screen/index.js

@@ -23,14 +23,22 @@ const FullWidthDivider_1 = require("./FullWidthDivider");
 const FullWidthItem_1 = require("./FullWidthItem");
 const Header_1 = require("./Header");
 const ScreenBase_1 = require("./ScreenBase");
+const ScreenFlatList_1 = require("./ScreenFlatList");
+const ScreenScrollContext_1 = require("./ScreenScrollContext");
+const ScreenScrollView_1 = require("./ScreenScrollView");
 __exportStar(require("./constants"), exports);
 exports.Screen = Object.assign(ScreenBase_1.ScreenBase, {
-    AnimatedTabsHeader: Header_1.AnimatedTabsHeader,
+    AnimatedHeader: Header_1.AnimatedHeader,
     Background: Background_1.Background,
     Body: Body_1.Body,
     BottomView: BottomView_1.BottomView,
+    FlatList: ScreenFlatList_1.ScreenFlatList,
     FloatingHeader: FloatingHeader_1.FloatingHeader,
     FullWidthDivider: FullWidthDivider_1.FullWidthDivider,
     FullWidthItem: FullWidthItem_1.FullWidthItem,
     Header: Header_1.Header,
+    ScreenScrollContextProvider: ScreenScrollContext_1.ScreenScrollContextProvider,
+    ScrollView: ScreenScrollView_1.ScreenScrollView,
+    // Hooks
+    useScreenScrollContext: ScreenScrollContext_1.useScreenScrollContext,
 });

package/dist/elements/Tabs/TabFlatList.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabFlatList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./useListenForTabContentScroll");
+const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
 const useSpace_1 = require("../../utils/hooks/useSpace");
 function TabFlatList(props) {
     (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();

package/dist/elements/Tabs/TabScrollView.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabScrollView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./useListenForTabContentScroll");
+const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
 const useSpace_1 = require("../../utils/hooks/useSpace");
 const TabScrollView = (props) => {
     (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();

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

@@ -9,23 +9,16 @@ 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>)>;
     }>;
-    Provider: import("react").FC<{
-        children?: import("react").ReactNode;
-    }>;
     ScrollView: import("react").FC<import("react-native").ScrollViewProps>;
     SectionList: <T_1>(p: any) => 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;
     }>;
     Tab: typeof import("react-native-collapsible-tab-view").Tab;
-    TabsProvider: import("react").FC<{
-        children?: import("react").ReactNode;
-    }>;
     TabsWithHeader: import("react").FC<import("./TabsWithHeader").TabsWithHeaderProps>;
     useAnimatedTabIndex: typeof useAnimatedTabIndex;
     useCurrentTabScrollY: typeof useCurrentTabScrollY;
     useListenForTabContentScroll: () => void;
-    useTabsContext: () => import("./TabsContext").TabsContextProps;
     useFocusedTab: typeof useFocusedTab;
     useHeaderMeasurements: typeof useHeaderMeasurements;
 };

package/dist/elements/Tabs/Tabs.js

@@ -6,24 +6,20 @@ const SubTabBar_1 = require("./SubTabBar");
 const TabFlatList_1 = require("./TabFlatList");
 const TabScrollView_1 = require("./TabScrollView");
 const TabsContainer_1 = require("./TabsContainer");
-const TabsContext_1 = require("./TabsContext");
 const TabsWithHeader_1 = require("./TabsWithHeader");
-const useListenForTabContentScroll_1 = require("./useListenForTabContentScroll");
+const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
 exports.Tabs = Object.assign(TabsContainer_1.TabsContainer, {
     FlatList: TabFlatList_1.TabFlatList,
     Lazy: react_native_collapsible_tab_view_1.Tabs.Lazy,
-    Provider: TabsContext_1.TabsProvider,
     ScrollView: TabScrollView_1.TabScrollView,
     SectionList: react_native_collapsible_tab_view_1.Tabs.SectionList,
     SubTabBar: SubTabBar_1.SubTabBar,
     Tab: react_native_collapsible_tab_view_1.Tabs.Tab,
-    TabsProvider: TabsContext_1.TabsProvider,
     TabsWithHeader: TabsWithHeader_1.TabsWithHeader,
     // Hooks
     useAnimatedTabIndex: react_native_collapsible_tab_view_1.useAnimatedTabIndex,
     useCurrentTabScrollY: react_native_collapsible_tab_view_1.useCurrentTabScrollY,
     useListenForTabContentScroll: useListenForTabContentScroll_1.useListenForTabContentScroll,
-    useTabsContext: TabsContext_1.useTabsContext,
     useFocusedTab: react_native_collapsible_tab_view_1.useFocusedTab,
     useHeaderMeasurements: react_native_collapsible_tab_view_1.useHeaderMeasurements,
 });

package/dist/elements/Tabs/Tabs.stories.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("@storybook/react-native");
 const Tabs_1 = require("./Tabs");
-const Flex_1 = require("../Flex");
+const Screen_1 = require("../Screen");
 const Text_1 = require("../Text");
 (0, react_native_1.storiesOf)("Tabs", module)
-    .add("Simple Tabs", () => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", alignItems: "center", flexWrap: "wrap", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] }) })))
-    .add("Tabs with Indicator", () => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", flexWrap: "wrap", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { indicators: [{ tabName: "tab1", Component: () => (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "right", children: "hi" }) }], children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] }) })));
+    .add("Simple Tabs", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })))
+    .add("Tabs with Indicator", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { indicators: [{ tabName: "tab1", Component: () => (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "right", children: "hi" }) }], children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })))
+    .add("Tabs with AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) })] }) })] })));

package/dist/elements/Tabs/TabsContainer.js

@@ -34,6 +34,7 @@ const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader
                     }, contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginTop: 0 }, indicatorStyle: {
                         backgroundColor: color("onBackground"),
                         height: 1,
+                        bottom: -1,
                     } }) }));
         }, children: children }));
 };

package/dist/elements/Tabs/TabsWithHeader.js

@@ -7,7 +7,7 @@ const Flex_1 = require("../Flex");
 const Screen_1 = require("../Screen");
 const Text_1 = require("../Text");
 const TabsWithHeader = ({ children, BelowTitleHeaderComponent, headerProps = {}, showLargeHeaderText = true, title, ...rest }) => {
-    return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedTabsHeader, { title: title, ...headerProps }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsx)(TabsContainer_1.TabsContainer, { ...rest, renderHeader: () => {
+    return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: title, ...headerProps }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsx)(TabsContainer_1.TabsContainer, { ...rest, renderHeader: () => {
                         if (!showLargeHeaderText || !title) {
                             return null;
                         }

package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListenForTabContentScroll = void 0;
+const react_1 = require("react");
+const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+const ScreenScrollContext_1 = require("../../Screen/ScreenScrollContext");
+const useAnimatedHeaderScrolling_1 = require("../../Screen/hooks/useAnimatedHeaderScrolling");
+const useListenForTabContentScroll = () => {
+    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)((0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)());
+    const { updateCurrentScrollY } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    (0, react_1.useEffect)(() => {
+        updateCurrentScrollY(scrollY);
+    }, [scrollY, updateCurrentScrollY]);
+};
+exports.useListenForTabContentScroll = useListenForTabContentScroll;

package/dist/storybook/decorators.js

@@ -10,6 +10,7 @@ const jotai_1 = require("jotai");
 const utils_1 = require("jotai/utils");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const Theme_1 = require("../Theme");
 const Flex_1 = require("../elements/Flex");
 const Text_1 = require("../elements/Text");
@@ -30,6 +31,6 @@ const useDarkModeSwitcher = (story) => {
     }, []);
     const isDarkMode = mode === "dark" || (mode === "system" && systemMode === "dark");
     const theme = isDarkMode ? "v3dark" : "v3light";
-    return ((0, jsx_runtime_1.jsx)(Theme_1.Theme, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-around", children: [(0, jsx_runtime_1.jsxs)(Text_1.Text, { color: "orange", children: ["Dark mode: ", mode, " ", mode === "system" && "(" + systemMode + ")"] }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("light"), children: "light" }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("dark"), children: "dark" }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("system"), children: "system" })] }), story()] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaProvider, { children: (0, jsx_runtime_1.jsx)(Theme_1.Theme, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-around", children: [(0, jsx_runtime_1.jsxs)(Text_1.Text, { color: "orange", children: ["Dark mode: ", mode, " ", mode === "system" && "(" + systemMode + ")"] }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("light"), children: "light" }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("dark"), children: "dark" }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("system"), children: "system" })] }), story()] }) }) }));
 };
 exports.useDarkModeSwitcher = useDarkModeSwitcher;

package/package.json

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

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface TabsContextProps {
-    currentScrollY: number;
-    updateCurrentScrollY: (scrollY: number) => void;
-}
-export declare const TabsProvider: React.FC<React.PropsWithChildren>;
-export declare const useTabsContext: () => TabsContextProps;

package/dist/elements/Tabs/TabsContext.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTabsContext = exports.TabsProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const TabsContext = (0, react_1.createContext)({
-    currentScrollY: 0,
-    updateCurrentScrollY: () => { },
-});
-const TabsProvider = ({ children }) => {
-    const [currentScrollY, setCurrentScrollY] = (0, react_1.useState)(0);
-    const providerValue = {
-        currentScrollY,
-        updateCurrentScrollY: (scrollY) => {
-            setCurrentScrollY(scrollY);
-        },
-    };
-    return (0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: providerValue, children: children });
-};
-exports.TabsProvider = TabsProvider;
-const useTabsContext = () => {
-    const context = (0, react_1.useContext)(TabsContext);
-    if (!context) {
-        throw new Error("useTabsContext must be used within a Tabs.TabsProvider component");
-    }
-    return context;
-};
-exports.useTabsContext = useTabsContext;