@artsy/palette-mobile 22.2.0--canary.425.5168.0 → 22.2.0--canary.432.5184.0

package/dist/elements/Image/Image.js

@@ -3,8 +3,7 @@ import FastImage from "@d11/react-native-fast-image";
 import { memo, useState } from "react";
 // @ts-expect-error
 import { Blurhash } from "react-native-blurhash";
-import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, } from "react-native-reanimated";
 import { getImageURL } from "./helpers/getImageURL";
 import { DEFAULT_ANIMATION_DURATION } from "../../constants";
 import { useColor } from "../../utils/hooks";
@@ -18,7 +17,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
     const color = useColor();
     const onLoadEnd = () => {
         opacity.value = withSpring(0, { duration: DEFAULT_ANIMATION_DURATION }, () => {
-            scheduleOnRN(setIsLoading, false);
+            runOnJS(setIsLoading)(false);
         });
     };
     const skeletonStyle = useAnimatedStyle(() => {
@@ -27,8 +26,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
         };
     });
     if (showLoadingState) {
-        // Keep logic as small as possible here to save on performance
-        return _jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: { position: "absolute" } });
+        return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
     return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(FastImage, { style: [
                     dimensions,

package/dist/elements/Pill/Pill.js

@@ -3,7 +3,7 @@ import { CloseIcon } from "@artsy/icons/native";
 import themeGet from "@styled-system/theme-get";
 import { MotiPressable } from "moti/interactions";
 import { useMemo } from "react";
-import { PixelRatio, Platform } from "react-native";
+import { PixelRatio } from "react-native";
 import styled, { css } from "styled-components";
 import { Flex } from "../Flex";
 import { Image } from "../Image";
@@ -27,7 +27,7 @@ export const Pill = ({ variant = "default", src, selected, disabled, Icon, child
                 return {
                     opacity: hovered || pressed ? 0.5 : 1,
                 };
-            }, []), children: [variant === "profile" && src && (_jsx(Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: _jsx(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && _jsx(Icon, { fill: color, ml: -0.5, mr: 0.5 }), _jsx(Flex, { height: "100%", justifyContent: "center", children: _jsx(Text, { variant: "xs", color: color, style: { marginBottom: Platform.OS === "ios" ? 2 : -2 }, children: children }) }), showCloseIcon && _jsx(CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) }));
+            }, []), children: [variant === "profile" && src && (_jsx(Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: _jsx(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && _jsx(Icon, { fill: color, ml: -0.5, mr: 0.5 }), _jsx(Text, { variant: "xs", color: color, style: { marginBottom: 2 }, children: children }), showCloseIcon && _jsx(CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) }));
 };
 const Container = styled(MotiPressable) `
   align-items: center;
@@ -52,7 +52,7 @@ const PILL_STATES = {
     default: css `
     border-radius: 15px;
     height: ${PixelRatio.getFontScale() * 30}px;
-    padding-horizontal: 15px;
+    padding: 0 15px;
   `,
     selected: css `
     border-color: ${themeGet("colors.blue100")};

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

@@ -13,7 +13,6 @@ export interface HeaderProps {
     title?: string | JSX.Element;
     titleProps?: FlexProps;
     titleShown?: boolean;
-    zIndex?: number;
 }
 export declare const AnimatedHeader: React.FC<HeaderProps>;
 export declare const Header: React.FC<HeaderProps>;

package/dist/elements/Screen/Header.js

@@ -11,13 +11,13 @@ import { Touchable } from "../Touchable";
 export const AnimatedHeader = (props) => {
     return _jsx(Header, { animated: true, ...props });
 };
-export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, zIndex = ZINDEX.header, }) => {
+export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, }) => {
     const { width } = useScreenDimensions();
     const space = useSpace();
     // Assumes small left and right elements, it protects from overflowing
     // but doesn't cover edge cases where right or left are bigger
     const centerMaxWidth = width - space(4) - DEFAULT_ICON_SIZE * 2;
-    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: zIndex, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { maxWidth: centerMaxWidth, ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
+    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { maxWidth: centerMaxWidth, ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
 };
 const Right = ({ hideRightElements, rightElements }) => {
     return _jsx(_Fragment, { children: !hideRightElements && rightElements });

package/dist/elements/Skeleton/Skeleton.js

@@ -29,7 +29,7 @@ export const Skeleton = ({ children }) => {
 };
 export const SkeletonText = ({ children, ...rest }) => {
     const color = useColor();
-    return (_jsx(Flex, { alignSelf: "flex-start", children: _jsx(Text, { ...rest, bg: color("mono10"), color: "rgb(251, 0, 0, 0)", children: children }) }));
+    return (_jsx(Flex, { alignSelf: "flex-start", children: _jsx(Text, { ...rest, bg: color("mono10"), color: "transparent", children: children }) }));
 };
 export const SkeletonBox = ({ children, ...rest }) => {
     const color = useColor();

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

@@ -1,5 +1,5 @@
-import { FlashListProps, FlashListRef } from "@shopify/flash-list";
+import { MasonryFlashListProps, MasonryFlashListRef } from "@shopify/flash-list";
 import { Ref } from "react";
-export declare function TabMasonry<T>(props: FlashListProps<T> & {
-    innerRef?: Ref<FlashListRef<T>> | null;
+export declare function TabMasonry<T>(props: MasonryFlashListProps<T> & {
+    innerRef?: Ref<MasonryFlashListRef<T>> | null;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/elements/Tabs/TabMasonry.js

@@ -6,7 +6,7 @@ export function TabMasonry(props) {
     useListenForTabContentScroll();
     const space = useSpace();
     const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return (_jsx(Tabs.FlashList, { masonry: true, contentContainerStyle: {
+    return (_jsx(Tabs.MasonryFlashList, { contentContainerStyle: {
             paddingHorizontal: space(2),
             ...contentContainerStyle,
         }, ...props, ref: props.innerRef }));

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

@@ -15,13 +15,7 @@ export declare const TabsWithAnimatedHeader: {
         name: string;
     };
 };
-export declare const TabsWithHeader: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const MasonryTabsWithHeader: {
+export declare const _TabsWithHeader: {
     (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;

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

@@ -15,22 +15,7 @@ export const TabsWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Scr
 TabsWithAnimatedHeader.story = {
     name: "Tabs with AnimatedHeader",
 };
-export const TabsWithHeader = () => {
-    return (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
-};
-TabsWithHeader.story = {
+export const _TabsWithHeader = () => (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
+_TabsWithHeader.story = {
     name: "Tabs with header",
 };
-export const MasonryTabsWithHeader = () => {
-    return (_jsxs(Tabs.TabsWithHeader, { title: "Tabs with Masonry", children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.FlatList, { data: Array.from({ length: 20 }), contentContainerStyle: {
-                        paddingHorizontal: 0,
-                    }, renderItem: () => _jsx(Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.FlatList, { contentContainerStyle: {
-                        paddingHorizontal: 0,
-                    }, data: Array.from({ length: 20 }), renderItem: () => _jsx(Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }) }) })] }));
-};
-const randomHexColor = () => {
-    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-};
-MasonryTabsWithHeader.story = {
-    name: "Masonry Tabs with header",
-};

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

@@ -7,6 +7,7 @@ export interface TabsWithHeaderProps extends TabsContainerProps {
     children: CollapsibleProps["children"];
     headerProps?: HeaderProps;
     hideScreen?: boolean;
+    disableKeyboardAvoidance?: boolean;
     showLargeHeaderText?: boolean;
     title: string | JSX.Element;
 }

package/dist/elements/Tabs/TabsWithHeader.js

@@ -3,11 +3,11 @@ import { TabsContainer } from "./TabsContainer";
 import { Flex } from "../Flex";
 import { Screen } from "../Screen";
 import { Text } from "../Text";
-export const TabsWithHeader = ({ headerProps = {}, hideScreen = false, title, ...rest }) => {
+export const TabsWithHeader = ({ headerProps = {}, hideScreen = false, disableKeyboardAvoidance = false, title, ...rest }) => {
     if (hideScreen) {
         return _jsx(Content, { title: title, ...rest });
     }
-    return (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: title, ...headerProps }), _jsx(Screen.Body, { fullwidth: true, children: _jsx(Content, { title: title, ...rest }) })] }));
+    return (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: title, ...headerProps }), _jsx(Screen.Body, { fullwidth: true, disableKeyboardAvoidance: disableKeyboardAvoidance, children: _jsx(Content, { title: title, ...rest }) })] }));
 };
 const Content = ({ BelowTitleHeaderComponent, children, showLargeHeaderText = true, title, ...rest }) => {
     const showTitle = showLargeHeaderText && !!title;

package/dist/elements/Text/Text.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Text as RNText, Platform, } from "react-native";
+import { Text as RNText } from "react-native";
 import styled from "styled-components/native";
 import { color, space, typography, } from "styled-system";
 import { useFontFamilyFor } from "./helpers";
@@ -13,13 +13,9 @@ export const Text = forwardRef(({ variant = "sm", italic = false, color = "onBac
             ...nativeTextStyle,
             { textAlignVertical: "center" }, // android renders text higher by default, so we bring it down to be consistent with ios
             { textDecorationLine: !!underline ? "underline" : "none" },
-            { fontStyle: italic ? "italic" : undefined },
             !!maxWidth ? { width: "100%", maxWidth: 600, alignSelf: "center" } : {},
-            // Overriding the font family for the regular font to avoid breaking the layout (mainly on android)
-            // See: https://github.com/facebook/react-native/issues/53286
-            Platform.OS === "android" ? {} : { fontFamily },
             style, // keep last so we can override
-        ], ...fixTextTreatmentForStyledComponent(theme.textTreatments[variant]), children: children, color: color, ...restProps }));
+        ], fontFamily: fontFamily, ...fixTextTreatmentForStyledComponent(theme.textTreatments[variant]), children: children, color: color, ...restProps }));
 });
 const fixTextTreatmentForStyledComponent = (treatment) => {
     const treatmentWithUnits = { ...treatment };

package/dist/storybook/decorators.js

@@ -41,5 +41,5 @@ export const useDarkModeSwitcher = (story) => {
                     // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
                     , { 
                         // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
-                        barStyle: isDarkMode && Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && Platform.OS === "android" ? "black" : "white", translucent: true }), _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { flex: 1, justifyContent: "center", alignItems: "center", children: story() })] })] }) }) }));
+                        barStyle: isDarkMode && Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && Platform.OS === "android" ? "black" : "white", translucent: true }), _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { p: 2, children: story() })] })] }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "22.2.0--canary.425.5168.0",
+  "version": "22.2.0--canary.432.5184.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"
@@ -45,14 +45,14 @@
     "@artsy/palette-tokens": "7.0.0",
     "@d11/react-native-fast-image": "8.12.0",
     "@react-spring/native": "^10.0.3",
-    "@shopify/flash-list": "2.2.0",
+    "@shopify/flash-list": "^1.8.3",
     "@styled-system/theme-get": "^5.1.2",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
     "moti": "0.30.0",
     "react-nanny": "^2.15.0",
     "react-native-blurhash": "2.1.2",
-    "react-native-collapsible-tab-view": "9.0.0-rc.0",
+    "react-native-collapsible-tab-view": "^8.0.1",
     "react-native-pager-view": "6.7.1",
     "react-native-popover-view": "^6.1.0",
     "styled-system": "^5.1.5"
@@ -124,10 +124,9 @@
     "react-native": "0.81.5",
     "react-native-haptic-feedback": "1.14.0",
     "react-native-linear-gradient": "2.6.2",
-    "react-native-reanimated": "4.1.5",
+    "react-native-reanimated": "3.19.4",
     "react-native-safe-area-context": "5.6.0",
     "react-native-svg": "15.12.1",
-    "react-native-worklets": "0.6.1",
     "react-test-renderer": "19.1.0",
     "rimraf": "4.1.2",
     "styled-components": "6.1.19",