@artsy/palette-mobile 11.0.29 → 11.0.30

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v11.0.30 (Thu Jun 01 2023)
+
+#### 🐛 Bug Fix
+
+- feat(tabs): Add Tabs component [#104](https://github.com/artsy/palette-mobile/pull/104) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
 # v11.0.29 (Sat May 13 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/{Tabs → LegacyTabs}/ContentTabs.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TabsProps } from "../Tabs";
+import { TabsProps } from "../LegacyTabs";
 /**
  * Renders a  scrollable list of tabs. Tabs are not evenly spaced across screen
  */

package/dist/elements/{Tabs → LegacyTabs}/ContentTabs.js

@@ -4,14 +4,14 @@ exports.ContentTabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const TabBarContainer_1 = require("./TabBarContainer");
-const Tabs_1 = require("../Tabs");
+const LegacyTabs_1 = require("../LegacyTabs");
 /**
  * Renders a  scrollable list of tabs. Tabs are not evenly spaced across screen
  */
 const ContentTabs = ({ onTabPress, activeTab, tabs }) => {
     const [tabLayouts, setTabLayouts] = (0, react_1.useState)(tabs.map(() => null));
     return ((0, jsx_runtime_1.jsx)(TabBarContainer_1.TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label }, index) => {
-            return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { label: label, active: index === activeTab, onLayout: (e) => {
+            return ((0, jsx_runtime_1.jsx)(LegacyTabs_1.Tab, { label: label, active: index === activeTab, onLayout: (e) => {
                     const layout = e.nativeEvent.layout;
                     setTabLayouts((layouts) => {
                         const result = layouts.slice(0);

package/dist/elements/{Tabs → LegacyTabs}/NavigationalTabs.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TabsProps } from "../Tabs";
+import { TabsProps } from "../LegacyTabs";
 /**
  * Renders a list of tabs. Evenly-spaces them across the screen with
  * each tab label centered on the tab

package/dist/elements/{Tabs → LegacyTabs}/NavigationalTabs.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const TabBarContainer_1 = require("./TabBarContainer");
 const useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
 const Box_1 = require("../Box");
-const Tabs_1 = require("../Tabs");
+const LegacyTabs_1 = require("../LegacyTabs");
 /**
  * Renders a list of tabs. Evenly-spaces them across the screen with
  * each tab label centered on the tab
@@ -16,7 +16,7 @@ const NavigationalTabs = ({ onTabPress, activeTab, tabs }) => {
     const screenWidth = (0, useScreenDimensions_1.useScreenDimensions)().width;
     const tabWidth = screenWidth / tabs.length;
     return ((0, jsx_runtime_1.jsx)(TabBarContainer_1.TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label, superscript }, index) => {
-            return ((0, jsx_runtime_1.jsx)(Box_1.Box, { minWidth: tabWidth, children: (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { label: label, superscript: superscript, onPress: () => onTabPress(label, index), active: activeTab === index, onLayout: (e) => {
+            return ((0, jsx_runtime_1.jsx)(Box_1.Box, { minWidth: tabWidth, children: (0, jsx_runtime_1.jsx)(LegacyTabs_1.Tab, { label: label, superscript: superscript, onPress: () => onTabPress(label, index), active: activeTab === index, onLayout: (e) => {
                         const layout = e.nativeEvent.layout;
                         setTabLayouts((layouts) => {
                             const result = layouts.slice(0);

package/dist/elements/{Tabs → LegacyTabs}/StepTabs.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TabsProps } from "../Tabs";
+import { TabsProps } from "../LegacyTabs";
 /**
  * Renders a list of tabs. Evenly-spaces them across the screen with
  * each tab label and chevron evenly spaced

package/dist/elements/{Tabs → LegacyTabs}/StepTabs.js

@@ -8,7 +8,7 @@ const TabBarContainer_1 = require("./TabBarContainer");
 const svgs_1 = require("../../svgs");
 const useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
 const Box_1 = require("../Box");
-const Tabs_1 = require("../Tabs");
+const LegacyTabs_1 = require("../LegacyTabs");
 /**
  * Renders a list of tabs. Evenly-spaces them across the screen with
  * each tab label and chevron evenly spaced
@@ -30,7 +30,7 @@ const StepTabs = ({ onTabPress, activeTab, tabs }) => {
                             result[index] = layout;
                             return result;
                         });
-                    }, children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { label: label, onPress: () => onTabSelect(label, index), active: activeTab === index, style: { paddingHorizontal: 0, paddingLeft: 8, paddingRight: 5 }, onLayout: () => {
+                    }, children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(LegacyTabs_1.Tab, { label: label, onPress: () => onTabSelect(label, index), active: activeTab === index, style: { paddingHorizontal: 0, paddingLeft: 8, paddingRight: 5 }, onLayout: () => {
                                         // noop
                                     } }), !!completed && (0, jsx_runtime_1.jsx)(svgs_1.CheckIcon, { fill: "green100", height: 15, width: 15 })] }), (0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { fill: "black60", height: 10, width: 10 })] }) }, label + index));
         }) }));

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ContentTabs } from "./ContentTabs";
+import { NavigationalTabs } from "./NavigationalTabs";
+import { StepTabs } from "./StepTabs";
+import { TabV3Props } from "./Tab";
+export { NavigationalTabs, ContentTabs, StepTabs };
+export declare const Tab: ({ ...props }: TabV3Props) => JSX.Element;
+export declare const TAB_BAR_HEIGHT = 44;
+export type TabsType = Array<{
+    label: string;
+    superscript?: string;
+    completed?: boolean;
+}>;
+export interface TabsProps {
+    onTabPress: (tablabel: string, tabIndex: number) => void;
+    activeTab: number;
+    tabs: TabsType;
+}

package/dist/elements/LegacyTabs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TAB_BAR_HEIGHT = exports.Tab = exports.StepTabs = exports.ContentTabs = exports.NavigationalTabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentTabs_1 = require("./ContentTabs");
+Object.defineProperty(exports, "ContentTabs", { enumerable: true, get: function () { return ContentTabs_1.ContentTabs; } });
+const NavigationalTabs_1 = require("./NavigationalTabs");
+Object.defineProperty(exports, "NavigationalTabs", { enumerable: true, get: function () { return NavigationalTabs_1.NavigationalTabs; } });
+const StepTabs_1 = require("./StepTabs");
+Object.defineProperty(exports, "StepTabs", { enumerable: true, get: function () { return StepTabs_1.StepTabs; } });
+const Tab_1 = require("./Tab");
+const Tab = ({ ...props }) => {
+    return (0, jsx_runtime_1.jsx)(Tab_1.TabV3, { ...props });
+};
+exports.Tab = Tab;
+exports.TAB_BAR_HEIGHT = 44;

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

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

package/dist/elements/Screen/Header.js

@@ -1,15 +1,45 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
+exports.Header = exports.AnimatedTabsHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 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 Header = ({ hideLeftElements, hideRightElements, leftElements, rightElements, onBack, title, hideTitle, titleProps = {}, }) => {
+const AnimatedTabsHeader = (props) => {
+    const { currentScrollY } = (0, TabsContext_1.useTabsContext)();
+    return (0, jsx_runtime_1.jsx)(exports.Header, { scrollY: currentScrollY, animated: true, ...props });
+};
+exports.AnimatedTabsHeader = AnimatedTabsHeader;
+const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, scrollY = 0, title, titleProps = {}, }) => {
     const Left = () => {
         if (hideLeftElements) {
             return null;
@@ -22,7 +52,15 @@ const Header = ({ hideLeftElements, hideRightElements, leftElements, rightElemen
         if (hideTitle) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, ...titleProps, justifySelf: "stretch", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", numberOfLines: 1, children: title }) }));
+        if (!animated) {
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, ...titleProps, justifySelf: "stretch", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", numberOfLines: 1, children: title }) }));
+        }
+        if (scrollY < constants_1.NAVBAR_HEIGHT) {
+            return (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, flexDirection: "row" });
+        }
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeInDown.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), exiting: react_native_reanimated_1.FadeOut.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), style: {
+                    flex: 1,
+                }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", numberOfLines: 1, children: title }) }) }) }));
     };
     const Right = () => {
         if (hideRightElements) {

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export * from "./constants";
 export declare const Screen: import("react").FC<import("./ScreenBase").ScreenBaseProps> & {
+    AnimatedTabsHeader: import("react").FC<import("./Header").HeaderProps>;
     Background: import("react").FC<{
         children: import("react").ReactNode;
     }>;

package/dist/elements/Screen/index.js

@@ -25,6 +25,7 @@ const Header_1 = require("./Header");
 const ScreenBase_1 = require("./ScreenBase");
 __exportStar(require("./constants"), exports);
 exports.Screen = Object.assign(ScreenBase_1.ScreenBase, {
+    AnimatedTabsHeader: Header_1.AnimatedTabsHeader,
     Background: Background_1.Background,
     Body: Body_1.Body,
     BottomView: BottomView_1.BottomView,

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Use to position content directly below the tab bar, and for it to stick while
+ * scrolling in the subview.
+ *
+ * Useful for views where subcontent has a s
+ */
+export declare const SubTabBar: React.FC<React.PropsWithChildren>;

package/dist/elements/Tabs/SubTabBar.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubTabBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const moti_1 = require("moti");
+const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const useSpace_1 = require("../../utils/hooks/useSpace");
+/**
+ * Use to position content directly below the tab bar, and for it to stick while
+ * scrolling in the subview.
+ *
+ * Useful for views where subcontent has a s
+ */
+const SubTabBar = ({ children }) => {
+    const { top } = (0, react_native_collapsible_tab_view_1.useHeaderMeasurements)();
+    const scrollY = (0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)();
+    const space = (0, useSpace_1.useSpace)();
+    const style = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
+        return {
+            transform: [
+                {
+                    translateY: scrollY.value + top.value,
+                },
+            ],
+        };
+    }, []);
+    return (0, jsx_runtime_1.jsx)(moti_1.MotiView, { style: [style, { zIndex: 1, marginHorizontal: -space(2) }], children: children });
+};
+exports.SubTabBar = SubTabBar;

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

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

package/dist/elements/Tabs/TabFlatList.js

@@ -0,0 +1,17 @@
+"use strict";
+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 useSpace_1 = require("../../utils/hooks/useSpace");
+function TabFlatList(props) {
+    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
+    const space = (0, useSpace_1.useSpace)();
+    const contentContainerStyle = (props.contentContainerStyle ?? {});
+    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.FlatList, { contentContainerStyle: {
+            marginHorizontal: space(2),
+            ...contentContainerStyle,
+        }, ...props }));
+}
+exports.TabFlatList = TabFlatList;

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

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

package/dist/elements/Tabs/TabScrollView.js

@@ -0,0 +1,23 @@
+"use strict";
+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 useSpace_1 = require("../../utils/hooks/useSpace");
+const TabScrollView = (props) => {
+    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
+    const space = (0, useSpace_1.useSpace)();
+    const contentContainerStyle = (props.contentContainerStyle ?? {});
+    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.ScrollView
+    // See: https://github.com/PedroBern/react-native-collapsible-tab-view/issues/158
+    // @ts-ignore
+    , { 
+        // See: https://github.com/PedroBern/react-native-collapsible-tab-view/issues/158
+        // @ts-ignore
+        accessibilityComponentType: undefined, accessibilityTraits: undefined, contentContainerStyle: {
+            marginHorizontal: space(2),
+            ...contentContainerStyle,
+        }, ...props }));
+};
+exports.TabScrollView = TabScrollView;

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { useAnimatedTabIndex, useCurrentTabScrollY, useFocusedTab, useHeaderMeasurements } from "react-native-collapsible-tab-view";
+import { TabFlatList } from "./TabFlatList";
+export declare const Tabs: import("react").FC<import("./TabsContainer").TabsContainerProps> & {
+    FlatList: typeof TabFlatList;
+    Lazy: import("react").FC<{
+        cancelLazyFadeIn?: boolean | undefined;
+        mountDelayMs?: number | undefined;
+        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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+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");
+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/TabsContainer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CollapsibleProps } from "react-native-collapsible-tab-view";
+export interface TabsContainerProps extends CollapsibleProps {
+    onTabPress?: (tabName: string) => void;
+    tabScrollEnabled?: boolean;
+}
+export declare const TabsContainer: React.FC<TabsContainerProps>;

package/dist/elements/Tabs/TabsContainer.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+const useColor_1 = require("../../utils/hooks/useColor");
+const useSpace_1 = require("../../utils/hooks/useSpace");
+const TAB_BAR_HEIGHT = 50;
+const TabsContainer = ({ children, initialTabName, renderHeader, tabScrollEnabled = false, onTabPress, ...tabContainerProps }) => {
+    const space = (0, useSpace_1.useSpace)();
+    const color = (0, useColor_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.Container, { ...tabContainerProps, renderHeader: renderHeader, headerContainerStyle: {
+            shadowOpacity: 0,
+            shadowRadius: 0,
+            elevation: 0,
+            backgroundColor: color("background"),
+        }, initialTabName: initialTabName, containerStyle: {
+            paddingTop: space(2),
+        }, renderTabBar: (tabBarProps) => {
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.MaterialTabBar, { ...tabBarProps, scrollEnabled: tabScrollEnabled, onTabPress: (tab) => {
+                        tabBarProps.onTabPress(tab);
+                        onTabPress?.(tab);
+                    }, style: {
+                        height: TAB_BAR_HEIGHT,
+                        borderBottomWidth: 1,
+                        borderColor: color("black30"),
+                    }, contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginTop: 0 }, tabStyle: {
+                        marginHorizontal: 10,
+                    }, indicatorStyle: {
+                        backgroundColor: color("onBackground"),
+                        height: 1,
+                    } }) }));
+        }, children: children }));
+};
+exports.TabsContainer = TabsContainer;

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

@@ -0,0 +1,7 @@
+/// <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

@@ -0,0 +1,28 @@
+"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;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CollapsibleProps } from "react-native-collapsible-tab-view";
+import { TabsContainerProps } from "./TabsContainer";
+import { HeaderProps } from "../Screen/Header";
+export interface TabsWithHeaderProps extends TabsContainerProps {
+    title: string;
+    BelowTitleHeaderComponent?: () => JSX.Element;
+    headerProps?: HeaderProps;
+    showLargeHeaderText?: boolean;
+    children: CollapsibleProps["children"];
+}
+export declare const TabsWithHeader: React.FC<TabsWithHeaderProps>;

package/dist/elements/Tabs/TabsWithHeader.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsWithHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TabsContainer_1 = require("./TabsContainer");
+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: () => {
+                        if (!showLargeHeaderText || !title) {
+                            return null;
+                        }
+                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { my: 1, pl: 2, justifyContent: "center", alignSelf: "flex-start", 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 }) })] }));
+};
+exports.TabsWithHeader = TabsWithHeader;

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

@@ -1,18 +1 @@
-/// <reference types="react" />
-import { ContentTabs } from "./ContentTabs";
-import { NavigationalTabs } from "./NavigationalTabs";
-import { StepTabs } from "./StepTabs";
-import { TabV3Props } from "./Tab";
-export { NavigationalTabs, ContentTabs, StepTabs };
-export declare const Tab: ({ ...props }: TabV3Props) => JSX.Element;
-export declare const TAB_BAR_HEIGHT = 44;
-export type TabsType = Array<{
-    label: string;
-    superscript?: string;
-    completed?: boolean;
-}>;
-export interface TabsProps {
-    onTabPress: (tablabel: string, tabIndex: number) => void;
-    activeTab: number;
-    tabs: TabsType;
-}
+export * from "./Tabs";

package/dist/elements/Tabs/index.js

@@ -1,16 +1,17 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TAB_BAR_HEIGHT = exports.Tab = exports.StepTabs = exports.ContentTabs = exports.NavigationalTabs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ContentTabs_1 = require("./ContentTabs");
-Object.defineProperty(exports, "ContentTabs", { enumerable: true, get: function () { return ContentTabs_1.ContentTabs; } });
-const NavigationalTabs_1 = require("./NavigationalTabs");
-Object.defineProperty(exports, "NavigationalTabs", { enumerable: true, get: function () { return NavigationalTabs_1.NavigationalTabs; } });
-const StepTabs_1 = require("./StepTabs");
-Object.defineProperty(exports, "StepTabs", { enumerable: true, get: function () { return StepTabs_1.StepTabs; } });
-const Tab_1 = require("./Tab");
-const Tab = ({ ...props }) => {
-    return (0, jsx_runtime_1.jsx)(Tab_1.TabV3, { ...props });
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-exports.Tab = Tab;
-exports.TAB_BAR_HEIGHT = 44;
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tabs"), exports);

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

@@ -0,0 +1 @@
+export declare const useListenForTabContentScroll: () => void;

package/dist/elements/Tabs/useListenForTabContentScroll.js

@@ -0,0 +1,52 @@
+"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 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 listenForScroll = (0, react_native_reanimated_1.useSharedValue)(true);
+    const [currScrollY, setCurrScrollY] = (0, react_1.useState)(scrollY.value);
+    // Needed to run on JS thread
+    const update = (y) => {
+        setCurrScrollY(y);
+    };
+    (0, react_1.useEffect)(() => {
+        const timer = setTimeout(() => {
+            listenForScroll.value = false;
+        }, 1000);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [listenForScroll]);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => {
+        "worklet";
+        return [scrollY.value, listenForScroll.value];
+    }, ([animatedScrollY, isListeningForScroll], previousScroll) => {
+        "worklet";
+        const [prevScrollY] = previousScroll ?? [0, false];
+        // Hacky way to avoid some weird header behavior.
+        // look at HACKS.md for more info.
+        const suddenlyScrolled = Math.abs(animatedScrollY - prevScrollY) > constants_1.NAVBAR_HEIGHT;
+        if (isListeningForScroll && suddenlyScrolled) {
+            return;
+        }
+        const prevTitleShown = prevScrollY >= constants_1.NAVBAR_HEIGHT;
+        const currTitleShown = animatedScrollY >= constants_1.NAVBAR_HEIGHT;
+        if (prevTitleShown === currTitleShown) {
+            return;
+        }
+        (0, react_native_reanimated_1.runOnJS)(update)(Math.floor(animatedScrollY));
+    }, [scrollY]);
+    return currScrollY;
+};

package/dist/elements/index.d.ts

@@ -18,6 +18,7 @@ export * from "./Histogram";
 export * from "./Input";
 export * from "./Join";
 export * from "./LegacyScreen";
+export * from "./LegacyTabs";
 export * from "./List";
 export * from "./Message";
 export * from "./MeasuredView";

package/dist/elements/index.js

@@ -34,6 +34,7 @@ __exportStar(require("./Histogram"), exports);
 __exportStar(require("./Input"), exports);
 __exportStar(require("./Join"), exports);
 __exportStar(require("./LegacyScreen"), exports);
+__exportStar(require("./LegacyTabs"), exports);
 __exportStar(require("./List"), exports);
 __exportStar(require("./Message"), exports);
 __exportStar(require("./MeasuredView"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.0.29",
+  "version": "11.0.30",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",
@@ -38,7 +38,9 @@
     "@styled-system/theme-get": "^5.1.2",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
+    "moti": "^0.25.3",
     "react-nanny": "^2.15.0",
+    "react-native-collapsible-tab-view": "^6.1.4",
     "react-spring": "8.0.23",
     "styled-system": "^5.1.5"
   },