@artsy/palette-mobile 17.9.0 → 17.11.0

package/dist/elements/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Insets, TouchableOpacityProps } from "react-native";
+import { Insets, TouchableWithoutFeedbackProps } from "react-native";
 import { FlexProps } from "../Flex";
-type CheckboxProps = Omit<TouchableOpacityProps, "hitSlop"> & Omit<FlexProps, "hitSlop"> & {
+type CheckboxProps = Omit<TouchableWithoutFeedbackProps, "hitSlop"> & Omit<FlexProps, "hitSlop"> & {
     hitSlop?: Insets;
     checked?: boolean;
     disabled?: boolean;

package/dist/elements/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { themeGet } from "@styled-system/theme-get";
 import { useState } from "react";
-import { PixelRatio, Pressable, StyleSheet } from "react-native";
+import { PixelRatio, StyleSheet, TouchableWithoutFeedback, } from "react-native";
 import styled from "styled-components/native";
 import { CssTransition } from "../../animation/CssTransition";
 import { useTheme } from "../../utils/hooks/useTheme";
@@ -43,7 +43,7 @@ export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text,
         : checkboxStyles[error ? "error" : "default"][isChecked ? "checked" : "unchecked"];
     const textColor = error ? color("red100") : disabled ? color("mono30") : color("mono100");
     const subtitleColor = error ? color("red100") : disabled ? color("mono30") : color("mono60");
-    return (_jsx(Pressable, { accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: (event) => {
+    return (_jsx(TouchableWithoutFeedback, { accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: (event) => {
             if (disabled) {
                 return;
             }

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: import("react").FC<Omit<import("react-native/types").TouchableOpacityProps, "hitSlop"> & Omit<import("..").BoxProps, "hitSlop"> & {
+    component: import("react").FC<Omit<import("react-native/types").TouchableWithoutFeedbackProps, "hitSlop"> & Omit<import("..").BoxProps, "hitSlop"> & {
         hitSlop?: import("react-native/types").Insets | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;

package/dist/elements/Tabs/TabsContainer.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { debounce } from "lodash";
 import { useState } from "react";
 import { Platform } from "react-native";
 import { Tabs as BaseTabs, MaterialTabBar, MaterialTabItem, } from "react-native-collapsible-tab-view";
-import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
 import { DEFAULT_ACTIVE_OPACITY } from "../../constants";
 import { useColor } from "../../utils/hooks/useColor";
 import { useSpace } from "../../utils/hooks/useSpace";
@@ -11,13 +9,7 @@ import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { Pill } from "../Pill";
 const TAB_BAR_HEIGHT = 50;
-const PillTabItem = ({ focusedTab: focusedTabProp, ...props }) => {
-    const [focusedTab, setFocusedTab] = useState(focusedTabProp.value);
-    // We want to debounce the focusedTab value to avoid showing two pills at once
-    const debouncedFocusedTab = debounce(setFocusedTab, 50);
-    useAnimatedReaction(() => focusedTabProp.value, (value) => {
-        runOnJS(debouncedFocusedTab)(value);
-    });
+const PillTabItem = ({ focusedTab, ...props }) => {
     return (_jsx(Pill, { selected: props.name === focusedTab, onPress: () => {
             props.onTabPress?.(props.name);
         }, variant: "link", children: props.name }, props.name));
@@ -31,6 +23,7 @@ const DefaultTabItem = (props) => {
 export const TabsContainer = ({ children, indicators = [], initialTabName, onTabPress, renderHeader, stickyTabBarComponent, tabScrollEnabled = false, variant = "tabs", ...tabContainerProps }) => {
     const space = useSpace();
     const color = useColor();
+    const [focusedTabState, setFocusedTabState] = useState(initialTabName);
     const isIOS = Platform.OS === "ios";
     return (_jsx(BaseTabs.Container, { renderHeader: renderHeader, headerContainerStyle: {
             shadowOpacity: 0,
@@ -44,7 +37,8 @@ export const TabsContainer = ({ children, indicators = [], initialTabName, onTab
                 return (_jsxs(Flex, { flexDirection: "row", gap: 2, alignItems: "center", py: 1, children: [_jsx(MaterialTabBar, { ...tabBarProps, scrollEnabled: true, TabItemComponent: (props) => (_jsx(PillTabItem, { ...props, onTabPress: (tab) => {
                                     onTabPress?.(tab);
                                     tabBarProps.onTabPress(tab);
-                                }, focusedTab: tabBarProps.focusedTab })), indicatorStyle: {
+                                    setFocusedTabState(tab);
+                                }, focusedTab: focusedTabState || tabBarProps.focusedTab.value })), indicatorStyle: {
                                 backgroundColor: "transparent",
                             }, contentContainerStyle: {
                                 gap: space(1),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.9.0",
+  "version": "17.11.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",