@artsy/palette-mobile 23.14.0 → 24.0.0

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

@@ -1,22 +1,26 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { SearchIcon } from "@artsy/icons/native";
-import { Input } from "./Input";
-import { List } from "../../storybook/helpers";
-import { Join } from "../Join";
-import { Separator } from "../Separator";
-import { Text } from "../Text";
-const artworkSearchPlaceholders = [
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variants = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var Input_1 = require("./Input");
+var helpers_1 = require("../../storybook/helpers");
+var Join_1 = require("../Join");
+var Separator_1 = require("../Separator");
+var Text_1 = require("../Text");
+var 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 = [
+var shippingAddressPlaceholders = [
     "Street address, apartment or suite, delivery instructions",
     "Street address and apartment or suite",
     "Street address",
 ];
-export default {
+exports.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 })] }), _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 })] })] }) }));
+var Variants = function () { return ((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)(native_1.SearchIcon, {}) })] }), (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.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: "Placeholder (single string)" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Search artworks" })] }), (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: "Placeholder (array, longest to shortest)" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: artworkSearchPlaceholders })] }), (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: "Placeholder with title (array, adaptive)" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Search", placeholder: artworkSearchPlaceholders })] }), (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 })] }), (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: "Multiline with placeholder (single string)" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Text area", multiline: true, placeholder: "Enter your message" })] }), (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: "Multiline with placeholder (array, adaptive)" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Shipping address", multiline: true, placeholder: shippingAddressPlaceholders })] })] }) })); };
+exports.Variants = Variants;

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

@@ -1,47 +1,93 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, screen } from "@testing-library/react-native";
-import { Input } from "./Input";
-import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
-describe("Input", () => {
-    const testID = "input";
-    it("renders an instance of native TextInput", () => {
-        renderWithWrappers(_jsx(Input, { testID: testID }));
-        expect(screen.getByTestId(testID).type).toEqual("TextInput");
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-    it("uses correct font family", () => {
-        renderWithWrappers(_jsx(Input, { testID: testID, placeholder: "input" }));
-        expect(screen.getByPlaceholderText("input").props.style[0].fontFamily).toEqual("Unica77LL-Regular");
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("@testing-library/react-native");
+var Input_1 = require("./Input");
+var renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+describe("Input", function () {
+    var testID = "input";
+    it("renders an instance of native TextInput", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID }));
+        expect(react_native_1.screen.getByTestId(testID).type).toEqual("TextInput");
     });
-    it("mutates given text as value", () => {
-        renderWithWrappers(_jsx(Input, { testID: testID }));
-        fireEvent.changeText(screen.getByTestId(testID), "mockStr");
-        screen.getByDisplayValue("mockStr");
+    it("uses correct font family", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID, placeholder: "input" }));
+        expect(react_native_1.screen.getByPlaceholderText("input").props.style[0].fontFamily).toEqual("Unica77LL-Regular");
     });
-    it("Shows an error message when input has an error", () => {
-        renderWithWrappers(_jsx(Input, { value: "", error: "input has an error" }));
-        screen.getByText("input has an error");
+    it("mutates given text as value", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID }));
+        react_native_1.fireEvent.changeText(react_native_1.screen.getByTestId(testID), "mockStr");
+        react_native_1.screen.getByDisplayValue("mockStr");
     });
-    it("should render the clear button when input is not empty and pressing it should clear the input", async () => {
-        renderWithWrappers(_jsx(Input, { testID: testID, placeholder: "USD", enableClearButton: true }));
-        fireEvent(screen.getByTestId(testID), "onChangeText", "Banksy");
-        await screen.findByLabelText("Clear");
-        fireEvent.press(screen.getByLabelText("Clear"));
-        expect(screen.queryByDisplayValue("Banksy")).toBeFalsy();
+    it("Shows an error message when input has an error", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { value: "", error: "input has an error" }));
+        react_native_1.screen.getByText("input has an error");
     });
-    it("should show the correct show/hide password icon", () => {
-        renderWithWrappers(_jsx(Input, { placeholder: "password", secureTextEntry: true }));
-        screen.getByPlaceholderText("password");
-        screen.getByLabelText("show password icon");
-        fireEvent(screen.getByPlaceholderText("password"), "onChangeText", "123456");
-        fireEvent.press(screen.getByLabelText("show password icon"));
-        expect(screen.queryByLabelText("show password icon")).toBeFalsy();
-        screen.getByLabelText("hide password icon");
-        fireEvent.press(screen.getByLabelText("hide password icon"));
-        expect(screen.queryByLabelText("hide password icon")).toBeFalsy();
-        screen.getByLabelText("show password icon");
+    it("should render the clear button when input is not empty and pressing it should clear the input", function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID, placeholder: "USD", enableClearButton: true }));
+                    (0, react_native_1.fireEvent)(react_native_1.screen.getByTestId(testID), "onChangeText", "Banksy");
+                    return [4 /*yield*/, react_native_1.screen.findByLabelText("Clear")];
+                case 1:
+                    _a.sent();
+                    react_native_1.fireEvent.press(react_native_1.screen.getByLabelText("Clear"));
+                    expect(react_native_1.screen.queryByDisplayValue("Banksy")).toBeFalsy();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("should show the correct show/hide password icon", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "password", secureTextEntry: true }));
+        react_native_1.screen.getByPlaceholderText("password");
+        react_native_1.screen.getByLabelText("show password icon");
+        (0, react_native_1.fireEvent)(react_native_1.screen.getByPlaceholderText("password"), "onChangeText", "123456");
+        react_native_1.fireEvent.press(react_native_1.screen.getByLabelText("show password icon"));
+        expect(react_native_1.screen.queryByLabelText("show password icon")).toBeFalsy();
+        react_native_1.screen.getByLabelText("hide password icon");
+        react_native_1.fireEvent.press(react_native_1.screen.getByLabelText("hide password icon"));
+        expect(react_native_1.screen.queryByLabelText("hide password icon")).toBeFalsy();
+        react_native_1.screen.getByLabelText("show password icon");
     });
-    it("enables scrolling when multiline is true", () => {
-        renderWithWrappers(_jsx(Input, { testID: testID, multiline: true }));
-        expect(screen.getByTestId(testID).props.scrollEnabled).toBe(true);
+    it("enables scrolling when multiline is true", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID, multiline: true }));
+        expect(react_native_1.screen.getByTestId(testID).props.scrollEnabled).toBe(true);
     });
 });

package/dist/elements/Input/InputTitle.js

@@ -1,8 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from "../Text";
-export const InputTitle = ({ children: title, optional, required }) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputTitle = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Text_1 = require("../Text");
+var InputTitle = function (_a) {
+    var title = _a.children, optional = _a.optional, required = _a.required;
     if (!title) {
         return null;
     }
-    return (_jsxs(Text, { variant: "md", style: { fontSize: 13, marginBottom: 2, textTransform: "uppercase" }, children: [title, !!required && (_jsx(Text, { variant: "md", style: { fontSize: 13, textTransform: "none" }, color: "onBackgroundMedium", children: "Required" })), !!optional && (_jsxs(Text, { variant: "md", style: { fontSize: 13, textTransform: "none" }, color: "onBackgroundMedium", children: [" ", "Optional"] }))] }));
+    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.js

@@ -1,99 +1,104 @@
-import { THEME } from "@artsy/palette-tokens";
-export const SHRINKED_LABEL_TOP = 13;
-export const EXPANDED_LABEL_TOP = 40;
-const getDefaultVariantStates = (theme) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInputVariant = exports.getInputState = exports.getInputVariants = exports.EXPANDED_LABEL_TOP = exports.SHRINKED_LABEL_TOP = void 0;
+var palette_tokens_1 = require("@artsy/palette-tokens");
+exports.SHRINKED_LABEL_TOP = 13;
+exports.EXPANDED_LABEL_TOP = 40;
+var getDefaultVariantStates = function (theme) {
     return {
         // Unfocused input with no value
         untouched: {
             inputBorderColor: theme.colors.mono30,
-            labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
+            labelFontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
             labelColor: theme.colors.mono60,
-            labelTop: EXPANDED_LABEL_TOP,
+            labelTop: exports.EXPANDED_LABEL_TOP,
             inputTextColor: theme.colors.mono100,
         },
         // Unfocused input with value
         touched: {
             inputBorderColor: theme.colors.mono60,
-            labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+            labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
             labelColor: theme.colors.mono60,
-            labelTop: SHRINKED_LABEL_TOP,
+            labelTop: exports.SHRINKED_LABEL_TOP,
             inputTextColor: theme.colors.mono100,
         },
         // Focused input with or without value
         focused: {
             inputBorderColor: theme.colors.blue100,
-            labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+            labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
             labelColor: theme.colors.blue100,
-            labelTop: SHRINKED_LABEL_TOP,
+            labelTop: exports.SHRINKED_LABEL_TOP,
             inputTextColor: theme.colors.mono100,
         },
     };
 };
-const getErrorVariantStates = (theme) => {
+var getErrorVariantStates = function (theme) {
     return {
         // Unfocused error input with no value
         untouched: {
             inputBorderColor: theme.colors.red100,
-            labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
+            labelFontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
             labelColor: theme.colors.red100,
-            labelTop: EXPANDED_LABEL_TOP,
+            labelTop: exports.EXPANDED_LABEL_TOP,
             inputTextColor: theme.colors.mono100,
         },
         // Unfocused error input with value
         touched: {
             inputBorderColor: theme.colors.red100,
-            labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+            labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
             labelColor: theme.colors.red100,
-            labelTop: SHRINKED_LABEL_TOP,
+            labelTop: exports.SHRINKED_LABEL_TOP,
             inputTextColor: theme.colors.mono100,
         },
         // Focused error input with or without value
         focused: {
             inputBorderColor: theme.colors.red100,
-            labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+            labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
             labelColor: theme.colors.red100,
-            labelTop: SHRINKED_LABEL_TOP,
+            labelTop: exports.SHRINKED_LABEL_TOP,
             inputTextColor: theme.colors.mono100,
         },
     };
 };
-const getDisabledVariantStates = (theme) => {
+var getDisabledVariantStates = function (theme) {
     return {
         // Unfocused disabled input with no value
         untouched: {
             inputBorderColor: theme.colors.mono30,
-            labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
+            labelFontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
             labelColor: theme.colors.mono30,
-            labelTop: EXPANDED_LABEL_TOP,
+            labelTop: exports.EXPANDED_LABEL_TOP,
             inputTextColor: theme.colors.mono30,
         },
         // Unfocused disabled input with value
         touched: {
             inputBorderColor: theme.colors.mono30,
-            labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+            labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
             labelColor: theme.colors.mono30,
-            labelTop: SHRINKED_LABEL_TOP,
+            labelTop: exports.SHRINKED_LABEL_TOP,
             inputTextColor: theme.colors.mono30,
         },
         // Focused disabled input with or without value
         // Adding this just to satisfy typescript because a disabled input can't be focused
         focused: {
             inputBorderColor: theme.colors.mono30,
-            labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+            labelFontSize: parseInt(palette_tokens_1.THEME.textVariants.xs.fontSize, 10),
             labelColor: theme.colors.mono30,
-            labelTop: SHRINKED_LABEL_TOP,
+            labelTop: exports.SHRINKED_LABEL_TOP,
             inputTextColor: theme.colors.mono30,
         },
     };
 };
-export const getInputVariants = (theme) => {
+var getInputVariants = function (theme) {
     return {
         default: getDefaultVariantStates(theme),
         error: getErrorVariantStates(theme),
         disabled: getDisabledVariantStates(theme),
     };
 };
-export const getInputState = ({ isFocused, value, }) => {
+exports.getInputVariants = getInputVariants;
+var getInputState = function (_a) {
+    var isFocused = _a.isFocused, value = _a.value;
     if (isFocused) {
         return "focused";
     }
@@ -104,7 +109,9 @@ export const getInputState = ({ isFocused, value, }) => {
         return "untouched";
     }
 };
-export const getInputVariant = ({ disabled, hasError, }) => {
+exports.getInputState = getInputState;
+var getInputVariant = function (_a) {
+    var disabled = _a.disabled, hasError = _a.hasError;
     if (hasError) {
         return "error";
     }
@@ -113,3 +120,4 @@ export const getInputVariant = ({ disabled, hasError, }) => {
     }
     return "default";
 };
+exports.getInputVariant = getInputVariant;

package/dist/elements/Input/index.js

@@ -1,3 +1,19 @@
-export * from "./Input";
-export * from "./helpers";
-export * from "./InputTitle";
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Input"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./InputTitle"), exports);

package/dist/elements/Input/maskValue.js

@@ -1,6 +1,19 @@
-const maskString = (value, mask) => {
-    let result = mask.replace(/9/g, "_");
-    for (const digit of value.replace(/\D/g, "")) {
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unmaskText = exports.maskValue = void 0;
+var maskString = function (value, mask) {
+    var result = mask.replace(/9/g, "_");
+    for (var _i = 0, _a = value.replace(/\D/g, ""); _i < _a.length; _i++) {
+        var digit = _a[_i];
         if (result.includes("_")) {
             result = result.replace("_", digit);
         }
@@ -13,11 +26,12 @@ const maskString = (value, mask) => {
     }
     return result;
 };
-export const maskValue = ({ currentValue, mask, previousValue = "", }) => {
+var maskValue = function (_a) {
+    var currentValue = _a.currentValue, mask = _a.mask, _b = _a.previousValue, previousValue = _b === void 0 ? "" : _b;
     if (!currentValue || !mask || mask.length === 0) {
         return currentValue;
     }
-    const value = unmaskText(currentValue);
+    var value = (0, exports.unmaskText)(currentValue);
     if (previousValue && previousValue.length > currentValue.length) {
         // user is deleting, don't mess with the format
         return currentValue;
@@ -26,12 +40,12 @@ export const maskValue = ({ currentValue, mask, previousValue = "", }) => {
         return maskString(currentValue, mask);
     }
     else {
-        if (value.length <= unmaskText(mask[0]).length) {
+        if (value.length <= (0, exports.unmaskText)(mask[0]).length) {
             return maskString(value, mask[0]);
         }
         else {
-            const nearestMask = [...mask].reverse().find((m) => {
-                if (value.length >= unmaskText(m).length) {
+            var nearestMask = __spreadArray([], mask, true).reverse().find(function (m) {
+                if (value.length >= (0, exports.unmaskText)(m).length) {
                     return true;
                 }
                 return false;
@@ -40,5 +54,7 @@ export const maskValue = ({ currentValue, mask, previousValue = "", }) => {
         }
     }
 };
+exports.maskValue = maskValue;
 // Helper method to clean the mask and remove all non-digits and spaces
-export const unmaskText = (mask) => mask.replace(/\W/g, "");
+var unmaskText = function (mask) { return mask.replace(/\W/g, ""); };
+exports.unmaskText = unmaskText;

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

@@ -1,5 +1,7 @@
-import { maskValue } from "./maskValue";
-const GERMANY_PHONE_MASKS = [
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var maskValue_1 = require("./maskValue");
+var GERMANY_PHONE_MASKS = [
     "999 999",
     "999 9999",
     "999 99999",
@@ -8,47 +10,47 @@ const GERMANY_PHONE_MASKS = [
     "999 99999999",
     "9999 99999999",
 ];
-const TUNISIA_PHONE_MASK = "99 999 999";
-const UNITED_STATES_PHONE_MASK = "999 999 9999";
-describe(maskValue, () => {
-    it("leaves the value value alone if the user is deleting characters", () => {
-        expect(maskValue({
+var TUNISIA_PHONE_MASK = "99 999 999";
+var UNITED_STATES_PHONE_MASK = "999 999 9999";
+describe(maskValue_1.maskValue, function () {
+    it("leaves the value value alone if the user is deleting characters", function () {
+        expect((0, maskValue_1.maskValue)({
             currentValue: "017672458053",
             mask: GERMANY_PHONE_MASKS,
         })).toBe("0176 72458053");
-        expect(maskValue({
+        expect((0, maskValue_1.maskValue)({
             currentValue: "17672458053",
             mask: GERMANY_PHONE_MASKS,
         })).toBe("176 72458053");
-        expect(maskValue({
+        expect((0, maskValue_1.maskValue)({
             currentValue: "030901820",
             mask: GERMANY_PHONE_MASKS,
         })).toBe("030 901820");
-        expect(maskValue({
+        expect((0, maskValue_1.maskValue)({
             currentValue: "901820",
             mask: GERMANY_PHONE_MASKS,
         })).toBe("901 820");
-        expect(maskValue({
+        expect((0, maskValue_1.maskValue)({
             currentValue: "20335902",
             mask: TUNISIA_PHONE_MASK,
         })).toBe("20 335 902");
     });
-    it("works with empty strings", () => {
-        expect(maskValue({
+    it("works with empty strings", function () {
+        expect((0, maskValue_1.maskValue)({
             currentValue: "",
             mask: GERMANY_PHONE_MASKS,
         })).toBe("");
-        expect(maskValue({
+        expect((0, maskValue_1.maskValue)({
             currentValue: "",
             mask: "",
         })).toBe("");
     });
-    it("formats a given phone number to the given country's default format", () => {
-        expect(maskValue({
+    it("formats a given phone number to the given country's default format", function () {
+        expect((0, maskValue_1.maskValue)({
             currentValue: "7825577664",
             mask: UNITED_STATES_PHONE_MASK,
         })).toBe("782 557 7664");
-        expect(maskValue({
+        expect((0, maskValue_1.maskValue)({
             currentValue: "782557766",
             mask: UNITED_STATES_PHONE_MASK,
         })).toBe("782 557 766");

package/dist/elements/Join/Join.js

@@ -1,5 +1,8 @@
-import { Children, cloneElement } from "react";
-import { flattenChildren } from "../../utils/flattenChildren";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Join = void 0;
+var react_1 = require("react");
+var flattenChildren_1 = require("../../utils/flattenChildren");
 /**
  * `Join` is a higher order component that renders a separator component
  * between each of `Join`'s direct children.
@@ -20,18 +23,20 @@ import { flattenChildren } from "../../utils/flattenChildren";
  * <SomeComponent/>
  * <child3/>
  */
-export const Join = ({ separator, children, flatten = false }) => {
-    const childArray = flatten ? flattenChildren(children) : Children.toArray(children);
-    return childArray.reduce((acc, curr, currentIndex) => {
-        acc.push(cloneElement(curr, {
-            key: `join-${currentIndex}`,
+var Join = function (_a) {
+    var separator = _a.separator, children = _a.children, _b = _a.flatten, flatten = _b === void 0 ? false : _b;
+    var childArray = flatten ? (0, flattenChildren_1.flattenChildren)(children) : react_1.Children.toArray(children);
+    return childArray.reduce(function (acc, curr, currentIndex) {
+        acc.push((0, react_1.cloneElement)(curr, {
+            key: "join-".concat(currentIndex),
         }));
         if (currentIndex !== childArray.length - 1) {
             acc.push(separator &&
-                cloneElement(separator, {
-                    key: `join-sep-${currentIndex}`,
+                (0, react_1.cloneElement)(separator, {
+                    key: "join-sep-".concat(currentIndex),
                 }));
         }
         return acc;
     }, []);
 };
+exports.Join = Join;

package/dist/elements/Join/index.js

@@ -1 +1,17 @@
-export * from "./Join";
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Join"), exports);

package/dist/elements/LazyFlatlist/LazyFlatlist.js

@@ -1,15 +1,18 @@
-import { useHasSeenItem } from "./useHasSeenItem";
-export function LazyFlatlist(props) {
-    const { viewabilityConfig, onViewableItemsChanged, hasSeenItem, viewedItems } = useHasSeenItem({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyFlatlist = LazyFlatlist;
+var useHasSeenItem_1 = require("./useHasSeenItem");
+function LazyFlatlist(props) {
+    var _a = (0, useHasSeenItem_1.useHasSeenItem)({
         keyExtractor: props.keyExtractor,
-    });
+    }), viewabilityConfig = _a.viewabilityConfig, onViewableItemsChanged = _a.onViewableItemsChanged, hasSeenItem = _a.hasSeenItem, viewedItems = _a.viewedItems;
     if (!props.children || typeof props.children !== "function") {
         throw new Error("LazyScrollContext requires children");
     }
     return props.children({
-        viewedItems,
-        viewabilityConfig,
-        onViewableItemsChanged,
-        hasSeenItem,
+        viewedItems: viewedItems,
+        viewabilityConfig: viewabilityConfig,
+        onViewableItemsChanged: onViewableItemsChanged,
+        hasSeenItem: hasSeenItem,
     });
 }