@artsy/palette-mobile 17.15.0 → 17.17.0

package/dist/elements/Image/Image.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
 import { FastImageProps } from "react-native-fast-image";
 import { GeminiResizeMode } from "../../utils/createGeminiUrl";
 type CustomFastImageProps = Omit<FastImageProps, "onLoadStart" | "onLoadEnd" | "source">;
@@ -21,4 +22,13 @@ export interface ImageProps extends CustomFastImageProps {
     src: string;
 }
 export declare const Image: React.FC<ImageProps>;
+type ImageSkeletonProps = {
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    blurhash?: string | null | undefined;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const ImageSkeleton: React.FC<ImageSkeletonProps>;
 export {};

package/dist/elements/Image/Image.js

@@ -25,7 +25,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     if (showLoadingState) {
-        return _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash });
+        return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
     let uri = src;
     if (performResize) {
@@ -36,7 +36,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
             resizeMode: geminiResizeMode,
         });
     }
-    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash }) }), _jsx(Animated.View, { style: animatedStyles, children: _jsx(FastImage, { style: [
+    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }), _jsx(Animated.View, { style: animatedStyles, children: _jsx(FastImage, { style: [
                         dimensions,
                         style,
                         // If we have a blurhash, we don't want to show a background color
@@ -67,9 +67,9 @@ const useImageDimensions = (props) => {
     };
     return dimensions;
 };
-const ImageSkeleton = ({ dimensions, blurhash }) => {
+export const ImageSkeleton = ({ dimensions, blurhash, style }) => {
     if (!!blurhash) {
-        return (_jsx(Flex, { position: "absolute", backgroundColor: "mono10", ...dimensions, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
+        return (_jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: style, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
     }
-    return (_jsx(Flex, { position: "absolute", children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
+    return (_jsx(Flex, { style: style, children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
 };

package/dist/elements/Input/Input.d.ts

@@ -11,11 +11,6 @@ export interface InputProps extends Omit<TextInputProps, "placeholder" | "onChan
      * These lead to some issues when the parent component wants further control of the value
      */
     disabled?: boolean;
-    /**
-     * Enables the clear button
-     * @warning This prop only works if `value` is specified
-     */
-    enableClearButton?: boolean;
     error?: string;
     fixedRightPlaceholder?: string;
     hintText?: string;
@@ -72,6 +67,19 @@ export interface InputProps extends Omit<TextInputProps, "placeholder" | "onChan
      */
     value?: string | undefined;
 }
+type InputPropsWithSecureText = InputProps & {
+    secureTextEntry: true;
+    enableClearButton?: never;
+};
+type InputPropsWithClearButton = InputProps & {
+    enableClearButton: true;
+    secureTextEntry?: never;
+};
+type InputPropsWithNeither = InputProps & {
+    enableClearButton?: boolean;
+    secureTextEntry?: boolean;
+};
+export type InputComponentProps = InputPropsWithSecureText | InputPropsWithClearButton | InputPropsWithNeither;
 export declare const HORIZONTAL_PADDING = 15;
 export declare const INPUT_BORDER_RADIUS = 4;
 export declare const INPUT_MIN_HEIGHT = 56;
@@ -85,5 +93,6 @@ export interface InputRef {
     blur: () => void;
     clear: () => void;
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<InputRef>>;
+export declare const Input: import("react").ForwardRefExoticComponent<InputComponentProps & import("react").RefAttributes<InputRef>>;
 export type Input = TextInput;
+export {};

package/dist/elements/SearchInput/SearchInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputProps } from "../Input";
+import { type InputProps } from "../Input";
 export interface SearchInputProps extends InputProps {
     enableCancelButton?: boolean;
 }

package/dist/setupJest.js

@@ -1,4 +1,10 @@
 import "@testing-library/react-native/extend-expect";
 import mockSafeAreaContext from "react-native-safe-area-context/jest/mock";
 jest.mock("react-native-safe-area-context", () => mockSafeAreaContext);
+jest.mock("react-native-blurhash", () => {
+    const ReactNative = require("react-native");
+    return {
+        Blurhash: ReactNative.View,
+    };
+});
 require("react-native-reanimated").setUpTests();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.15.0",
+  "version": "17.17.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",
@@ -41,7 +41,7 @@
     "lodash": "^4.17.21",
     "moti": "^0.25.3",
     "react-nanny": "^2.15.0",
-    "react-native-blurhash": "^1.1.11",
+    "react-native-blurhash": "^2.1.1",
     "react-native-collapsible-tab-view": "^8.0.0",
     "react-native-fast-image": "^8.6.3",
     "react-native-pager-view": "6.5.0",