@artsy/palette-mobile 13.2.33 → 13.2.34

package/dist/elements/Input/Input.js

@@ -1,393 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.SELECT_COMPONENT_WIDTH = exports.LEFT_COMPONENT_WIDTH = exports.LABEL_HEIGHT = exports.MULTILINE_INPUT_MAX_HEIGHT = exports.MULTILINE_INPUT_MIN_HEIGHT = exports.INPUT_MIN_HEIGHT = exports.INPUT_BORDER_RADIUS = exports.HORIZONTAL_PADDING = exports.emitInputClearEvent = exports.inputEvents = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const events_1 = require("events");
-const palette_tokens_1 = require("@artsy/palette-tokens");
-const theme_get_1 = __importDefault(require("@styled-system/theme-get"));
-const isArray_1 = __importDefault(require("lodash/isArray"));
-const isString_1 = __importDefault(require("lodash/isString"));
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const helpers_1 = require("./helpers");
-const maskValue_1 = require("./maskValue");
-const svgs_1 = require("../../svgs");
-const hooks_1 = require("../../utils/hooks");
-const useMeasure_1 = require("../../utils/hooks/useMeasure");
-const Flex_1 = require("../Flex");
-const Spinner_1 = require("../Spinner");
-const Text_1 = require("../Text");
-const Touchable_1 = require("../Touchable");
-exports.inputEvents = new events_1.EventEmitter();
-const emitInputClearEvent = () => {
-    exports.inputEvents.emit("clear");
-};
-exports.emitInputClearEvent = emitInputClearEvent;
-exports.HORIZONTAL_PADDING = 15;
-exports.INPUT_BORDER_RADIUS = 4;
-exports.INPUT_MIN_HEIGHT = 56;
-exports.MULTILINE_INPUT_MIN_HEIGHT = 110;
-exports.MULTILINE_INPUT_MAX_HEIGHT = 300;
-exports.LABEL_HEIGHT = 25;
-exports.LEFT_COMPONENT_WIDTH = 40;
-exports.SELECT_COMPONENT_WIDTH = 120;
-exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValue, disabled = false, enableClearButton = false, fixedRightPlaceholder, hintText = "What's this?", icon, leftComponentWidth = exports.LEFT_COMPONENT_WIDTH, mask, selectComponentWidth = exports.SELECT_COMPONENT_WIDTH, loading = false, onBlur, onChangeText, onClear, onFocus, onSelectTap, placeholder, secureTextEntry = false, style: styleProp = {}, unit, value: propValue, selectDisplayLabel, ...props }, ref) => {
-    const { color, theme, space } = (0, hooks_1.useTheme)();
-    const [focused, setIsFocused] = (0, react_1.useState)(false);
-    const [delayedFocused, setDelayedFocused] = (0, react_1.useState)(false);
-    const [value, setValue] = (0, react_1.useState)((0, maskValue_1.maskValue)({
-        currentValue: propValue ?? defaultValue,
-        mask: mask,
-    }));
-    const [showPassword, setShowPassword] = (0, react_1.useState)(!secureTextEntry);
-    const [inputWidth, setInputWidth] = (0, react_1.useState)(0);
-    const placeholderWidths = (0, react_1.useRef)([]);
-    const rightComponentRef = (0, react_1.useRef)(null);
-    const inputRef = (0, react_1.useRef)();
-    const variant = (0, helpers_1.getInputVariant)({
-        hasError: !!props.error,
-        disabled: disabled,
-    });
-    const hasLeftComponent = (0, react_1.useMemo)(() => !!unit || !!icon || !!onSelectTap, [unit, icon, onSelectTap]);
-    const animatedState = (0, react_native_reanimated_1.useSharedValue)((0, helpers_1.getInputState)({
-        isFocused: !!focused,
-        value: value,
-    }));
-    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
-    (0, react_1.useEffect)(() => {
-        // If the prop value changes, update the local state
-        // This optimisation is not needed if no propValue has been specified
-        if (propValue !== undefined && propValue !== value) {
-            setValue((0, maskValue_1.maskValue)({ currentValue: propValue || "", mask }));
-        }
-    }, [propValue, value, mask]);
-    (0, react_1.useEffect)(() => {
-        // If the mask value changes, update the value state to be formatted again
-        setValue((0, maskValue_1.maskValue)({ currentValue: value, mask }));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mask]);
-    const fontFamily = theme.fonts.sans.regular;
-    (0, react_1.useEffect)(() => {
-        /* to make the font work for secure text inputs,
-        see https://github.com/facebook/react-native/issues/30123#issuecomment-711076098 */
-        inputRef.current?.setNativeProps({
-            style: { fontFamily },
-        });
-    }, [fontFamily]);
-    (0, react_1.useEffect)(() => {
-        // We don't need to delay hiding the placeholder
-        if (!focused && delayedFocused) {
-            setDelayedFocused(false);
-        }
-        let delayFocusedTimeout;
-        // We only want to show the placeholder after we're sure the title animation has finished
-        if (!delayedFocused && focused) {
-            delayFocusedTimeout = setTimeout(() => {
-                setDelayedFocused(focused);
-            }, 200);
-        }
-        return () => {
-            if (delayFocusedTimeout) {
-                clearTimeout(delayFocusedTimeout);
-            }
-        };
-    }, [focused, delayedFocused]);
-    const handleChangeText = (0, react_1.useCallback)((text) => {
-        if (mask) {
-            const newText = (0, maskValue_1.maskValue)({ currentValue: text, mask: mask, previousValue: value }) || "";
-            setValue(newText);
-            onChangeText?.(newText, (0, maskValue_1.unmaskText)(text));
-        }
-        else {
-            setValue(text);
-            onChangeText?.(text);
-        }
-    }, [onChangeText, value, mask]);
-    const handleClear = (0, react_1.useCallback)(() => {
-        react_native_1.LayoutAnimation.configureNext({ ...react_native_1.LayoutAnimation.Presets.easeInEaseOut, duration: 200 });
-        inputRef.current?.clear();
-        handleChangeText("");
-        onClear?.();
-    }, [onClear, handleChangeText]);
-    (0, react_1.useEffect)(() => {
-        if (!addClearListener) {
-            return;
-        }
-        exports.inputEvents.addListener("clear", handleClear);
-        return () => {
-            exports.inputEvents.removeListener("clear", handleClear);
-        };
-    }, [addClearListener, handleClear]);
-    const { width: rightComponentWidth = 0 } = (0, useMeasure_1.useMeasure)({ ref: rightComponentRef });
-    const textInputPaddingLeft = (0, react_1.useMemo)(() => {
-        if (!hasLeftComponent) {
-            return exports.HORIZONTAL_PADDING;
-        }
-        if (onSelectTap) {
-            return selectComponentWidth + exports.HORIZONTAL_PADDING;
-        }
-        return leftComponentWidth;
-    }, [hasLeftComponent, leftComponentWidth, onSelectTap, selectComponentWidth]);
-    const styles = (0, react_1.useMemo)(() => {
-        return {
-            fontFamily: fontFamily,
-            fontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
-            minHeight: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : exports.INPUT_MIN_HEIGHT,
-            maxHeight: props.multiline ? exports.MULTILINE_INPUT_MAX_HEIGHT : undefined,
-            height: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : undefined,
-            borderWidth: 1,
-            paddingRight: rightComponentWidth + exports.HORIZONTAL_PADDING,
-            paddingLeft: textInputPaddingLeft,
-            ...styleProp,
-        };
-    }, [fontFamily, styleProp, props.multiline, rightComponentWidth, textInputPaddingLeft]);
-    const labelStyles = (0, react_1.useMemo)(() => {
-        return {
-            // this is neeeded too make sure the label is on top of the input
-            backgroundColor: "white",
-            marginRight: space(0.5),
-            zIndex: 100,
-            fontFamily: fontFamily,
-        };
-    }, [fontFamily, space]);
-    animatedState.value = (0, helpers_1.getInputState)({
-        isFocused: !!focused,
-        value: value,
-    });
-    const textInputAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        return {
-            borderColor: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
-            color: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].inputTextColor),
-        };
-    });
-    const labelAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        const hasValue = !!value;
-        // Only add a margin if the input has a left component and it is not focused and has no value
-        const marginLeft = textInputPaddingLeft && !focused && !hasValue
-            ? textInputPaddingLeft - 3
-            : exports.HORIZONTAL_PADDING;
-        return {
-            color: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].labelColor),
-            top: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].labelTop),
-            fontSize: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].labelFontSize),
-            marginLeft: (0, react_native_reanimated_1.withTiming)(marginLeft),
-        };
-    });
-    const selectComponentStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        return {
-            borderColor: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
-        };
-    });
-    const handleFocus = (e) => {
-        setIsFocused(true);
-        onFocus?.(e);
-    };
-    const handleBlur = (e) => {
-        setIsFocused(false);
-        onBlur?.(e);
-    };
-    const hasTitle = !!props.title;
-    const renderLeftComponent = (0, react_1.useCallback)(() => {
-        const leftComponentSharedStyles = {
-            position: "absolute",
-            paddingHorizontal: exports.HORIZONTAL_PADDING,
-            height: exports.INPUT_MIN_HEIGHT,
-            top: hasTitle ? exports.LABEL_HEIGHT : 0,
-            alignItems: "center",
-            zIndex: 100,
-        };
-        if (unit || icon) {
-            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: {
-                    ...leftComponentSharedStyles,
-                    justifyContent: "center",
-                    width: leftComponentWidth,
-                }, children: [unit && ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "black30" : "black60", variant: "sm-display", children: unit })), icon] }));
-        }
-        if (onSelectTap) {
-            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onSelectTap, style: [
-                    leftComponentSharedStyles,
-                    {
-                        width: selectComponentWidth,
-                    },
-                ], hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: (0, jsx_runtime_1.jsxs)(AnimatedFlex, { style: [
-                        {
-                            paddingHorizontal: exports.HORIZONTAL_PADDING,
-                            height: exports.INPUT_MIN_HEIGHT,
-                            alignItems: "center",
-                            width: selectComponentWidth,
-                            flexDirection: "row",
-                            borderRightWidth: 1,
-                            justifyContent: "space-between",
-                        },
-                        selectComponentStyles,
-                    ], children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "black30" : "black100", children: selectDisplayLabel }), (0, jsx_runtime_1.jsx)(svgs_1.TriangleDown, { fill: "black60", width: 10 })] }) }));
-        }
-        return null;
-    }, [
-        hasTitle,
-        unit,
-        icon,
-        onSelectTap,
-        leftComponentWidth,
-        disabled,
-        selectComponentWidth,
-        selectComponentStyles,
-        selectDisplayLabel,
-    ]);
-    const renderRightComponent = (0, react_1.useCallback)(() => {
-        if (fixedRightPlaceholder) {
-            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: `${exports.HORIZONTAL_PADDING}px`, top: hasTitle ? exports.LABEL_HEIGHT : 0, height: exports.INPUT_MIN_HEIGHT, ref: rightComponentRef, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "black30" : "black60", children: fixedRightPlaceholder }) }));
-        }
-        if (loading) {
-            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: `${exports.HORIZONTAL_PADDING}px`, top: hasTitle ? exports.LABEL_HEIGHT : 0, height: exports.INPUT_MIN_HEIGHT, ref: rightComponentRef, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "medium", style: {
-                        right: 0,
-                        width: 15,
-                        backgroundColor: color("black60"),
-                    } }) }));
-        }
-        if (enableClearButton && value) {
-            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: `${exports.HORIZONTAL_PADDING}px`, top: hasTitle ? exports.LABEL_HEIGHT : 0, height: exports.INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { haptic: "impactMedium", onPress: handleClear, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityLabel: "Clear input button", testID: "clear-input-button", children: (0, jsx_runtime_1.jsx)(svgs_1.XCircleIcon, { fill: "black30" }) }) }));
-        }
-        if (secureTextEntry) {
-            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: `${exports.HORIZONTAL_PADDING}px`, top: hasTitle ? exports.LABEL_HEIGHT : 0, height: exports.INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { haptic: true, onPress: () => {
-                        react_native_1.LayoutAnimation.configureNext({
-                            ...react_native_1.LayoutAnimation.Presets.easeInEaseOut,
-                            duration: 200,
-                        });
-                        setShowPassword(!showPassword);
-                    }, accessibilityLabel: showPassword ? "hide password button" : "show password button", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? (0, jsx_runtime_1.jsx)(svgs_1.EyeClosedIcon, { fill: "black30" }) : (0, jsx_runtime_1.jsx)(svgs_1.EyeOpenedIcon, { fill: "black60" }) }) }));
-        }
-        return null;
-    }, [
-        fixedRightPlaceholder,
-        loading,
-        enableClearButton,
-        value,
-        secureTextEntry,
-        hasTitle,
-        disabled,
-        color,
-        handleClear,
-        showPassword,
-    ]);
-    const renderBottomComponent = (0, react_1.useCallback)(() => {
-        if (!!props.error) {
-            return ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red100", variant: "xs", px: `${exports.HORIZONTAL_PADDING}px`, mt: 0.5, children: props.error }));
-        }
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", children: [!!props.required || !!props.optional ? ((0, jsx_runtime_1.jsxs)(Text_1.Text, { color: "black60", variant: "xs", pl: `${exports.HORIZONTAL_PADDING}px`, mt: 0.5, children: [!!props.required && "* Required", !!props.optional && "* Optional"] })) : (
-                // Adding this empty flex to make sure that the maxLength text is always on the right
-                (0, jsx_runtime_1.jsx)(Flex_1.Flex, {})), !!props.maxLength && !!props.showLimit && ((0, jsx_runtime_1.jsxs)(Text_1.Text, { color: "black60", variant: "xs", pr: `${exports.HORIZONTAL_PADDING}px`, mt: 0.5, children: [(value || "").length, " / ", props.maxLength] }))] }));
-    }, [props.error, props.maxLength, props.optional, props.required, props.showLimit, value]);
-    const renderHint = (0, react_1.useCallback)(() => {
-        if (!props.onHintPress) {
-            return null;
-        }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
-                alignItems: "flex-end",
-                top: space(2),
-            }, children: (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: props.onHintPress, haptic: "impactLight", hitSlop: {
-                    top: 5,
-                    right: 10,
-                    bottom: 5,
-                    left: 10,
-                }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { underline: true, variant: "xs", color: "black60", children: hintText }) }) }));
-    }, [hintText, props.onHintPress, space]);
-    const getPlatformSpecificPlaceholder = (0, react_1.useCallback)(() => {
-        if (!placeholder) {
-            return "";
-        }
-        if (react_native_1.Platform.OS === "ios") {
-            return (0, isArray_1.default)(placeholder) ? placeholder[0] : placeholder;
-        }
-        // if it's android and we only have one string, return that string
-        if ((0, isString_1.default)(placeholder)) {
-            return placeholder;
-        }
-        // otherwise, find a placeholder that has longest width that fits in the inputtext
-        const longestFittingStringIndex = placeholderWidths.current.findIndex((placeholderWidth) => {
-            return placeholderWidth <= inputWidth;
-        });
-        if (longestFittingStringIndex > -1) {
-            return placeholder[longestFittingStringIndex];
-        }
-        // otherwise just return the shortest placeholder
-        return placeholder[placeholder.length - 1];
-    }, [inputWidth, placeholder]);
-    const getPlaceholder = (0, react_1.useCallback)(() => {
-        // Show placeholder always if there is no title
-        // This is because we won't have a title animation
-        if (!props.title) {
-            return getPlatformSpecificPlaceholder();
-        }
-        // On blur, we want to show the placeholder immediately
-        if (delayedFocused) {
-            return getPlatformSpecificPlaceholder();
-        }
-        // On focus, we want to show the placeholder after the title animation has finished
-        return "";
-    }, [delayedFocused, getPlatformSpecificPlaceholder, props.title]);
-    const renderAnimatedTitle = (0, react_1.useCallback)(() => {
-        if (!props.title) {
-            return null;
-        }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", zIndex: 100, pointerEvents: "none", height: exports.LABEL_HEIGHT, children: (0, jsx_runtime_1.jsxs)(AnimatedText, { style: [labelStyles, labelAnimatedStyles], numberOfLines: 1, children: [" ", props.title, " "] }) }));
-    }, [labelStyles, labelAnimatedStyles, props.title]);
-    const renderAndroidPlaceholderMeasuringHack = (0, react_1.useCallback)(() => {
-        if (react_native_1.Platform.OS === "ios" || !(0, isArray_1.default)(placeholder)) {
-            return null;
-        }
-        // Do not render the hack if we have already measured the placeholder
-        if (placeholderWidths.current.length > 0) {
-            return null;
-        }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
-                position: "absolute",
-                top: -10000,
-                width: 10000,
-                alignItems: "baseline", // this is to make Texts get the smallest width they can get to fit the text
-            }, children: placeholder.map((placeholderString, index) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { onLayout: (event) => {
-                    placeholderWidths.current[index] = event.nativeEvent.layout.width;
-                }, numberOfLines: 1, style: {
-                    ...styles,
-                }, children: placeholderString }))) }));
-    }, [placeholder, styles]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), (0, jsx_runtime_1.jsx)(AnimatedStyledInput, { value: value, onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, onLayout: (event) => {
-                    setInputWidth(event.nativeEvent.layout.width);
-                }, scrollEnabled: props.multiline, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: color("black60"), placeholder: getPlaceholder(), secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
-});
-const StyledInput = (0, styled_components_1.default)(react_native_1.TextInput) `
-  padding: ${exports.HORIZONTAL_PADDING}px;
-  font-family: ${(0, theme_get_1.default)("fonts.sans.regular")};
-  border-radius: ${exports.INPUT_BORDER_RADIUS}px;
-`;
-const AnimatedStyledInput = react_native_reanimated_1.default.createAnimatedComponent(StyledInput);
-const AnimatedText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
-const AnimatedFlex = react_native_reanimated_1.default.createAnimatedComponent(Flex_1.Flex);

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const Input_1 = require("./Input");
-const helpers_1 = require("../../storybook/helpers");
-const svgs_1 = require("../../svgs");
-const Join_1 = require("../Join");
-const Separator_1 = require("../Separator");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Input", module).add("Variants", () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: (0, jsx_runtime_1.jsxs)(Join_1.Join, { separator: (0, jsx_runtime_1.jsx)(Separator_1.Separator, { my: 2 }), children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Default" }), (0, jsx_runtime_1.jsx)(Input_1.Input, {})] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and required" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", required: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and optional" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", optional: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and clear button" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", enableClearButton: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and loading" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", loading: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and icon" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", icon: (0, jsx_runtime_1.jsx)(svgs_1.MagnifyingGlassIcon, {}) })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and error" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", error: "this is an error" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and disabled" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Disabled", disabled: true })] }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "I'm a placeholder" }) }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title, clear button and value" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { value: "5", enableClearButton: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With fixed right placeholder" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { fixedRightPlaceholder: "cm" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With placeholder" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "I'm a placeholder" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and placeholder" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "full text", value: "Wow this is a long text, I wonder if I can read the whole thing!" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With text limit" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Text with limit", maxLength: 100, showLimit: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine Without limit" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Text area", multiline: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine With limit" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Text area with limit", multiline: true, maxLength: 150, showLimit: true })] })] }) })));

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

@@ -1 +0,0 @@
-export {};

package/dist/elements/Input/Input.tests.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@testing-library/react-native");
-const Input_1 = require("./Input");
-const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
-describe("Input", () => {
-    const testID = "input";
-    it("renders an instance of native TextInput", () => {
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID }));
-        expect(getByTestId(testID).type).toEqual("TextInput");
-    });
-    it("uses correct font family", () => {
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID }));
-        expect(getByTestId(testID).props.style[0].fontFamily).toEqual("Unica77LL-Regular");
-    });
-    it("mutates given text as value", () => {
-        const { getByTestId, getByDisplayValue } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID }));
-        react_native_1.fireEvent.changeText(getByTestId(testID), "mockStr");
-        getByDisplayValue("mockStr");
-    });
-    it("Shows an error message when input has an error", () => {
-        const { getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { value: "", error: "input has an error" }));
-        getByText("input has an error");
-    });
-    it("should render the clear button when input is not empty and pressing it should clear the input", () => {
-        const { getByDisplayValue, queryByDisplayValue, getByPlaceholderText, getByLabelText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "USD", enableClearButton: true }));
-        // placeholder is rendered
-        getByPlaceholderText("USD");
-        (0, react_native_1.fireEvent)(getByPlaceholderText("USD"), "onChangeText", "Banksy");
-        getByDisplayValue("Banksy");
-        getByLabelText("Clear input button");
-        react_native_1.fireEvent.press(getByLabelText("Clear input button"));
-        expect(queryByDisplayValue("Banksy")).toBeFalsy();
-    });
-    it("should show the correct show/hide password icon", () => {
-        const { getByPlaceholderText, queryByLabelText, getByLabelText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "password", secureTextEntry: true }));
-        getByPlaceholderText("password");
-        getByLabelText("show password button");
-        (0, react_native_1.fireEvent)(getByPlaceholderText("password"), "onChangeText", "123456");
-        react_native_1.fireEvent.press(getByLabelText("show password button"));
-        expect(queryByLabelText("show password button")).toBeFalsy();
-        getByLabelText("hide password button");
-        react_native_1.fireEvent.press(getByLabelText("hide password button"));
-        expect(queryByLabelText("hide password button")).toBeFalsy();
-        getByLabelText("show password button");
-    });
-    it("enables scrolling when multiline is true", () => {
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID, multiline: true }));
-        expect(getByTestId(testID).props.scrollEnabled).toBe(true);
-    });
-});

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare const InputTitle: React.FC<{
-    children: React.ReactNode;
-    optional?: boolean;
-    required?: boolean;
-}>;

package/dist/elements/Input/InputTitle.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputTitle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Text_1 = require("../Text");
-const InputTitle = ({ children: title, optional, required }) => {
-    if (!title) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)(Text_1.Text, { variant: "md", style: { fontSize: 13, marginBottom: 2, textTransform: "uppercase" }, children: [title, !!required && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", style: { fontSize: 13, textTransform: "none" }, color: "onBackgroundMedium", children: "Required" })), !!optional && ((0, jsx_runtime_1.jsxs)(Text_1.Text, { variant: "md", style: { fontSize: 13, textTransform: "none" }, color: "onBackgroundMedium", children: [" ", "Optional"] }))] }));
-};
-exports.InputTitle = InputTitle;

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

@@ -1,42 +0,0 @@
-export declare const SHRINKED_LABEL_TOP = 13;
-export declare const EXPANDED_LABEL_TOP = 40;
-export type VariantState = {
-    untouched: {
-        inputBorderColor: string;
-        labelFontSize: number;
-        labelColor: string;
-        labelTop: number;
-        inputTextColor: string;
-    };
-    touched: {
-        inputBorderColor: string;
-        labelFontSize: number;
-        labelColor: string;
-        labelTop: number;
-        inputTextColor: string;
-    };
-    focused: {
-        inputBorderColor: string;
-        labelFontSize: number;
-        labelColor: string;
-        labelTop: number;
-        inputTextColor: string;
-    };
-};
-declare const DEFAULT_VARIANT_STATES: VariantState;
-export declare const INPUT_VARIANTS: {
-    default: VariantState;
-    error: VariantState;
-    disabled: VariantState;
-};
-export type InputState = keyof typeof DEFAULT_VARIANT_STATES;
-export type InputVariant = keyof typeof INPUT_VARIANTS;
-export declare const getInputState: ({ isFocused, value, }: {
-    isFocused: boolean;
-    value: string | undefined;
-}) => InputState;
-export declare const getInputVariant: ({ disabled, hasError, }: {
-    disabled: boolean;
-    hasError: boolean;
-}) => "default" | "error" | "disabled";
-export {};

package/dist/elements/Input/helpers.js

@@ -1,112 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInputVariant = exports.getInputState = exports.INPUT_VARIANTS = exports.EXPANDED_LABEL_TOP = exports.SHRINKED_LABEL_TOP = void 0;
-const palette_tokens_1 = require("@artsy/palette-tokens");
-exports.SHRINKED_LABEL_TOP = 13;
-exports.EXPANDED_LABEL_TOP = 40;
-const DEFAULT_VARIANT_STATES = {
-    // Unfocused input with no value
-    untouched: {
-        inputBorderColor: palette_tokens_1.THEME.colors.black30,
-        labelFontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
-        labelColor: palette_tokens_1.THEME.colors.black60,
-        labelTop: exports.EXPANDED_LABEL_TOP,
-        inputTextColor: palette_tokens_1.THEME.colors.black100,
-    },
-    // Unfocused input with value
-    touched: {
-        inputBorderColor: palette_tokens_1.THEME.colors.black60,
-        labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
-        labelColor: palette_tokens_1.THEME.colors.black60,
-        labelTop: exports.SHRINKED_LABEL_TOP,
-        inputTextColor: palette_tokens_1.THEME.colors.black100,
-    },
-    // Focused input with or without value
-    focused: {
-        inputBorderColor: palette_tokens_1.THEME.colors.blue100,
-        labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
-        labelColor: palette_tokens_1.THEME.colors.blue100,
-        labelTop: exports.SHRINKED_LABEL_TOP,
-        inputTextColor: palette_tokens_1.THEME.colors.black100,
-    },
-};
-const ERROR_VARIANT_STATES = {
-    // Unfocused error input with no value
-    untouched: {
-        inputBorderColor: palette_tokens_1.THEME.colors.red100,
-        labelFontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
-        labelColor: palette_tokens_1.THEME.colors.red100,
-        labelTop: exports.EXPANDED_LABEL_TOP,
-        inputTextColor: palette_tokens_1.THEME.colors.black100,
-    },
-    // Unfocused error input with value
-    touched: {
-        inputBorderColor: palette_tokens_1.THEME.colors.red100,
-        labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
-        labelColor: palette_tokens_1.THEME.colors.red100,
-        labelTop: exports.SHRINKED_LABEL_TOP,
-        inputTextColor: palette_tokens_1.THEME.colors.black100,
-    },
-    // Focused error input with or without value
-    focused: {
-        inputBorderColor: palette_tokens_1.THEME.colors.red100,
-        labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
-        labelColor: palette_tokens_1.THEME.colors.red100,
-        labelTop: exports.SHRINKED_LABEL_TOP,
-        inputTextColor: palette_tokens_1.THEME.colors.black100,
-    },
-};
-const DISABLED_VARIANT_STATES = {
-    // Unfocused disabled input with no value
-    untouched: {
-        inputBorderColor: palette_tokens_1.THEME.colors.black30,
-        labelFontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
-        labelColor: palette_tokens_1.THEME.colors.black30,
-        labelTop: exports.EXPANDED_LABEL_TOP,
-        inputTextColor: palette_tokens_1.THEME.colors.black30,
-    },
-    // Unfocused disabled input with value
-    touched: {
-        inputBorderColor: palette_tokens_1.THEME.colors.black30,
-        labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
-        labelColor: palette_tokens_1.THEME.colors.black30,
-        labelTop: exports.SHRINKED_LABEL_TOP,
-        inputTextColor: palette_tokens_1.THEME.colors.black30,
-    },
-    // Focused disabled input with or without value
-    // Adding this just to satisfy typescript because a disabled input can't be focused
-    focused: {
-        inputBorderColor: palette_tokens_1.THEME.colors.black30,
-        labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
-        labelColor: palette_tokens_1.THEME.colors.black30,
-        labelTop: exports.SHRINKED_LABEL_TOP,
-        inputTextColor: palette_tokens_1.THEME.colors.black30,
-    },
-};
-exports.INPUT_VARIANTS = {
-    default: DEFAULT_VARIANT_STATES,
-    error: ERROR_VARIANT_STATES,
-    disabled: DISABLED_VARIANT_STATES,
-};
-const getInputState = ({ isFocused, value, }) => {
-    if (isFocused) {
-        return "focused";
-    }
-    else if (value) {
-        return "touched";
-    }
-    else {
-        return "untouched";
-    }
-};
-exports.getInputState = getInputState;
-const getInputVariant = ({ disabled, hasError, }) => {
-    if (hasError) {
-        return "error";
-    }
-    if (disabled) {
-        return "disabled";
-    }
-    return "default";
-};
-exports.getInputVariant = getInputVariant;

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

@@ -1,3 +0,0 @@
-export * from "./Input";
-export * from "./helpers";
-export * from "./InputTitle";