@artsy/palette-mobile 23.12.0 → 23.14.0

package/dist/elements/Input/Input.js

@@ -361,7 +361,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                     placeholderWidths.current[index] = event.nativeEvent.layout.width;
                 }, numberOfLines: 1, style: {
                     ...styles,
-                }, children: placeholderString }))) }));
+                }, children: placeholderString }, `${placeholderString.replaceAll(" ", "-")}-${index}`))) }));
     }, [placeholder, styles]);
     return (_jsxs(Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), _jsx(AnimatedStyledInput
             // Only use a controlled input if specified

package/dist/elements/Input/Input.stories.js

@@ -5,7 +5,18 @@ import { List } from "../../storybook/helpers";
 import { Join } from "../Join";
 import { Separator } from "../Separator";
 import { Text } from "../Text";
+const artworkSearchPlaceholders = [
+    "Search by artist, artwork title, gallery, fair, or collecting category",
+    "Search by artist, artwork title, gallery, or fair",
+    "Search by artist, artwork, or gallery",
+    "Search artworks",
+];
+const shippingAddressPlaceholders = [
+    "Street address, apartment or suite, delivery instructions",
+    "Street address and apartment or suite",
+    "Street address",
+];
 export default {
     title: "Input",
 };
-export const Variants = () => (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: _jsxs(Join, { separator: _jsx(Separator, { my: 2 }), children: [_jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Default" }), _jsx(Input, {})] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title" }), _jsx(Input, { title: "Title" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and required" }), _jsx(Input, { title: "Title", required: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and optional" }), _jsx(Input, { title: "Title", optional: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and clear button" }), _jsx(Input, { title: "Title", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and loading" }), _jsx(Input, { title: "Title", loading: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and icon" }), _jsx(Input, { title: "Title", icon: _jsx(SearchIcon, {}) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and error" }), _jsx(Input, { title: "Title", error: "this is an error" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and disabled" }), _jsx(Input, { title: "Disabled", disabled: true })] }), _jsx(_Fragment, { children: _jsx(Input, { placeholder: "I'm a placeholder" }) }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title, clear button and value" }), _jsx(Input, { value: "5", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With fixed right placeholder" }), _jsx(Input, { fixedRightPlaceholder: "cm" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With placeholder" }), _jsx(Input, { placeholder: "I'm a placeholder" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and placeholder" }), _jsx(Input, { title: "full text", value: "Wow this is a long text, I wonder if I can read the whole thing!" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With text limit" }), _jsx(Input, { title: "Text with limit", maxLength: 100, showLimit: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine Without limit" }), _jsx(Input, { title: "Text area", multiline: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine With limit" }), _jsx(Input, { title: "Text area with limit", multiline: true, maxLength: 150, showLimit: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine with placeholder" }), _jsx(Input, { title: "Text area", multiline: true, placeholder: "Enter your message" })] })] }) }));
+export const Variants = () => (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: _jsxs(Join, { separator: _jsx(Separator, { my: 2 }), children: [_jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Default" }), _jsx(Input, {})] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title" }), _jsx(Input, { title: "Title" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and required" }), _jsx(Input, { title: "Title", required: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and optional" }), _jsx(Input, { title: "Title", optional: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and clear button" }), _jsx(Input, { title: "Title", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and loading" }), _jsx(Input, { title: "Title", loading: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and icon" }), _jsx(Input, { title: "Title", icon: _jsx(SearchIcon, {}) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and error" }), _jsx(Input, { title: "Title", error: "this is an error" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and disabled" }), _jsx(Input, { title: "Disabled", disabled: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title, clear button and value" }), _jsx(Input, { value: "5", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With fixed right placeholder" }), _jsx(Input, { fixedRightPlaceholder: "cm" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Placeholder (single string)" }), _jsx(Input, { placeholder: "Search artworks" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Placeholder (array, longest to shortest)" }), _jsx(Input, { placeholder: artworkSearchPlaceholders })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Placeholder with title (array, adaptive)" }), _jsx(Input, { title: "Search", placeholder: artworkSearchPlaceholders })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and placeholder" }), _jsx(Input, { title: "full text", value: "Wow this is a long text, I wonder if I can read the whole thing!" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With text limit" }), _jsx(Input, { title: "Text with limit", maxLength: 100, showLimit: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine Without limit" }), _jsx(Input, { title: "Text area", multiline: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine With limit" }), _jsx(Input, { title: "Text area with limit", multiline: true, maxLength: 150, showLimit: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Multiline with placeholder (single string)" }), _jsx(Input, { title: "Text area", multiline: true, placeholder: "Enter your message" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Multiline with placeholder (array, adaptive)" }), _jsx(Input, { title: "Shipping address", multiline: true, placeholder: shippingAddressPlaceholders })] })] }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "23.12.0",
+  "version": "23.14.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"
@@ -76,7 +76,7 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@babel/runtime": "^7.25.0",
-    "@d11/react-native-fast-image": "8.12.0",
+    "@d11/react-native-fast-image": "8.13.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native/eslint-config": "0.76.9",
     "@shopify/flash-list": "2.2.0",