@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/Text/Text.js

@@ -1,35 +1,73 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Text as RNText, Platform, } from "react-native";
-import styled from "styled-components/native";
-import { color, space, typography, } from "styled-system";
-import { useFontFamilyFor } from "./helpers";
-import { useTheme } from "../../utils/hooks/useTheme";
-export const Text = forwardRef(({ variant = "sm", italic = false, color = "onBackgroundHigh", caps = false, weight = "regular", underline = false, maxWidth = false, selectable = true, style, children, ...restProps }, ref) => {
-    const { theme } = useTheme();
-    const fontFamily = useFontFamilyFor({ italic, weight });
-    const nativeTextStyle = [caps ? { textTransform: "uppercase" } : {}];
-    return (_jsx(InnerStyledText, { ref: ref, selectable: selectable, style: [
-            ...nativeTextStyle,
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var native_1 = __importDefault(require("styled-components/native"));
+var styled_system_1 = require("styled-system");
+var helpers_1 = require("./helpers");
+var useTheme_1 = require("../../utils/hooks/useTheme");
+exports.Text = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.variant, variant = _b === void 0 ? "sm" : _b, _c = _a.italic, italic = _c === void 0 ? false : _c, _d = _a.color, color = _d === void 0 ? "onBackgroundHigh" : _d, _e = _a.caps, caps = _e === void 0 ? false : _e, _f = _a.weight, weight = _f === void 0 ? "regular" : _f, _g = _a.underline, underline = _g === void 0 ? false : _g, _h = _a.maxWidth, maxWidth = _h === void 0 ? false : _h, _j = _a.selectable, selectable = _j === void 0 ? true : _j, style = _a.style, children = _a.children, restProps = __rest(_a, ["variant", "italic", "color", "caps", "weight", "underline", "maxWidth", "selectable", "style", "children"]);
+    var theme = (0, useTheme_1.useTheme)().theme;
+    var fontFamily = (0, helpers_1.useFontFamilyFor)({ italic: italic, weight: weight });
+    var nativeTextStyle = [caps ? { textTransform: "uppercase" } : {}];
+    return ((0, jsx_runtime_1.jsx)(InnerStyledText, __assign({ ref: ref, selectable: selectable, style: __spreadArray(__spreadArray([], nativeTextStyle, true), [
             { textAlignVertical: "center" }, // android renders text higher by default, so we bring it down to be consistent with ios
             { textDecorationLine: !!underline ? "underline" : "none" },
             { fontStyle: italic ? "italic" : undefined },
             !!maxWidth ? { width: "100%", maxWidth: 600, alignSelf: "center" } : {},
             // Overriding the font family for the regular font to avoid breaking the layout (mainly on android)
             // See: https://github.com/facebook/react-native/issues/53286
-            Platform.OS === "android" ? {} : { fontFamily },
+            react_native_1.Platform.OS === "android" ? {} : { fontFamily: fontFamily },
             style, // keep last so we can override
-        ], ...fixTextTreatmentForStyledComponent(theme.textTreatments[variant]), children: children, color: color, ...restProps }));
+        ], false) }, fixTextTreatmentForStyledComponent(theme.textTreatments[variant]), { children: children, color: color }, restProps)));
 });
-const fixTextTreatmentForStyledComponent = (treatment) => {
-    const treatmentWithUnits = { ...treatment };
+var fixTextTreatmentForStyledComponent = function (treatment) {
+    var treatmentWithUnits = __assign({}, treatment);
     if (treatment.lineHeight !== undefined) {
-        treatmentWithUnits.lineHeight = `${treatment.lineHeight}px`;
+        treatmentWithUnits.lineHeight = "".concat(treatment.lineHeight, "px");
     }
     return treatmentWithUnits;
 };
-const InnerStyledText = styled(RNText) `
-  ${color}
-  ${space}
-  ${typography}
-`;
+var InnerStyledText = (0, native_1.default)(react_native_1.Text)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), styled_system_1.color, styled_system_1.space, styled_system_1.typography);
+var templateObject_1;

package/dist/elements/Text/Text.stories.js

@@ -1,40 +1,49 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Platform, Text as RNText, View } from "react-native";
-import { DataList, List } from "../../storybook/helpers";
-import { Box } from "../Box";
-import { Flex } from "../Flex";
-import { LinkText, Text } from "../Text";
-const meta = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontCenteringPalette = exports.FontCenteringRaw = exports.Misc = exports.BasicProps = exports.VariantsInBoxes = exports.Variants = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("react-native");
+var helpers_1 = require("../../storybook/helpers");
+var Box_1 = require("../Box");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var meta = {
     title: "Theme/Text",
-    component: Text,
+    component: Text_1.Text,
 };
-export default meta;
-const variants = ["xs", "sm", "md", "lg", "xl", "xxl"];
-export const Variants = {
-    render: () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsxs(Text, { variant: variant, children: [variant, " ~~ This is a text."] })) })),
+exports.default = meta;
+var variants = ["xs", "sm", "md", "lg", "xl", "xxl"];
+exports.Variants = {
+    render: function () { return ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: function (_a) {
+            var variant = _a.item;
+            return ((0, jsx_runtime_1.jsxs)(Text_1.Text, { variant: variant, children: [variant, " ~~ This is a text."] }));
+        } })); },
 };
-export const VariantsInBoxes = {
-    render: () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Box, { borderWidth: 1, borderColor: "black", width: 100, children: _jsxs(Text, { variant: variant, children: [variant, " ~~ This is a text."] }) })) })),
+exports.VariantsInBoxes = {
+    render: function () { return ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: function (_a) {
+            var variant = _a.item;
+            return ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "black", width: 100, children: (0, jsx_runtime_1.jsxs)(Text_1.Text, { variant: variant, children: [variant, " ~~ This is a text."] }) }));
+        } })); },
 };
-export const BasicProps = {
-    render: () => (_jsxs(List, { children: [_jsx(Text, { children: "regular ~~ This is a text." }), _jsx(LinkText, { children: "LinkText." }), _jsx(Text, { caps: true, children: "caps ~~ This is a text." }), _jsx(Text, { italic: true, children: "italics ~~ This is a text." }), _jsx(Text, { caps: true, italic: true, children: "caps italics ~~ This is a text." }), _jsx(Text, { weight: "medium", children: "weight: medium ~~ This is a text." }), _jsx(Text, { maxWidth: true, children: "maxwidth ~~ This is a text." })] })),
+exports.BasicProps = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "regular ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { children: "LinkText." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { caps: true, children: "caps ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { italic: true, children: "italics ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { caps: true, italic: true, children: "caps italics ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", children: "weight: medium ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { maxWidth: true, children: "maxwidth ~~ This is a text." })] })); },
 };
-export const Misc = {
-    render: () => (_jsxs(List, { children: [_jsx(View, { style: { borderWidth: 1, borderColor: "black" }, children: _jsx(Text, { pl: 2, mb: 4, mr: 80, color: "red", backgroundColor: "orange", children: "Testing the other props" }) }), _jsx(View, {}), _jsx(Text, { lineHeight: "20px", fontSize: 30, children: "wow" })] })),
+exports.Misc = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { borderWidth: 1, borderColor: "black" }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { pl: 2, mb: 4, mr: 80, color: "red", backgroundColor: "orange", children: "Testing the other props" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, {}), (0, jsx_runtime_1.jsx)(Text_1.Text, { lineHeight: "20px", fontSize: 30, children: "wow" })] })); },
 };
 // this is useful for making sure our custom fonts are rendering at the same height for ios and android
-export const FontCenteringRaw = {
-    render: () => {
-        const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
-        const systemFontStyle = Platform.OS === "android" ? { textAlignVertical: "bottom" } : {}; // this we add in our Text in palette-eigen
-        const unicaFontStyle = Platform.OS === "android" ? { textAlignVertical: "center" } : {}; // this we add in our Text in palette-eigen
-        return (_jsxs(Flex, { flexDirection: "row", flex: 1, children: [_jsxs(Flex, { flex: 1, children: [_jsx(RNText, { children: "System font" }), _jsxs(List, { children: [_jsx(RNText, { style: [style, systemFontStyle], children: "regular TEXT." }), _jsx(RNText, { style: [style, systemFontStyle], children: "ALL CAPS text." })] })] }), _jsx(Flex, { width: "1px", height: "100%", borderWidth: 1, borderColor: "black" }), _jsxs(Flex, { flex: 1, children: [_jsx(RNText, { children: "Unica custom font" }), _jsxs(List, { children: [_jsx(RNText, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "regular TEXT." }), _jsx(RNText, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "ALL CAPS text." })] })] })] }));
+exports.FontCenteringRaw = {
+    render: function () {
+        var style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
+        var systemFontStyle = react_native_1.Platform.OS === "android" ? { textAlignVertical: "bottom" } : {}; // this we add in our Text in palette-eigen
+        var unicaFontStyle = react_native_1.Platform.OS === "android" ? { textAlignVertical: "center" } : {}; // this we add in our Text in palette-eigen
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "System font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, systemFontStyle], children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, systemFontStyle], children: "ALL CAPS text." })] })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "1px", height: "100%", borderWidth: 1, borderColor: "black" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Unica custom font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "ALL CAPS text." })] })] })] }));
     },
 };
 // this is useful for making sure our custom fonts are rendering at the same height for ios and android
-export const FontCenteringPalette = {
-    render: () => {
-        const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
-        return (_jsxs(Flex, { flex: 1, children: [_jsx(Text, { children: "System font" }), _jsxs(List, { children: [_jsx(Text, { style: style, children: "regular TEXT." }), _jsx(Text, { style: style, children: "ALL CAPS text." })] })] }));
+exports.FontCenteringPalette = {
+    render: function () {
+        var style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "System font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { style: style, children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { style: style, children: "ALL CAPS text." })] })] }));
     },
 };

package/dist/elements/Text/Text.tests.js

@@ -1,8 +1,10 @@
-import { endash, range } from "../../utils/text";
-describe("Text", () => {
-    it("uses endash in ranges", () => {
-        const usingHelper = range("10", "20");
-        const usingEndash = `10 ${endash} 20`;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var text_1 = require("../../utils/text");
+describe("Text", function () {
+    it("uses endash in ranges", function () {
+        var usingHelper = (0, text_1.range)("10", "20");
+        var usingEndash = "10 ".concat(text_1.endash, " 20");
         expect(usingHelper).toEqual(usingEndash);
         expect(usingHelper).toEqual("10 – 20"); // endash
         expect(usingHelper).not.toEqual("10 - 20"); // minus

package/dist/elements/Text/helpers.js

@@ -1,7 +1,11 @@
-import { useTheme } from "../../utils/hooks/useTheme";
-export const useFontFamilyFor = ({ italic, weight, }) => {
-    const { theme } = useTheme();
-    const { fonts } = theme;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTextStyleForPalette = exports.useFontFamilyFor = void 0;
+var useTheme_1 = require("../../utils/hooks/useTheme");
+var useFontFamilyFor = function (_a) {
+    var italic = _a.italic, weight = _a.weight;
+    var theme = (0, useTheme_1.useTheme)().theme;
+    var fonts = theme.fonts;
     if (italic && weight === "medium") {
         return fonts.sans.mediumItalic;
     }
@@ -13,17 +17,19 @@ export const useFontFamilyFor = ({ italic, weight, }) => {
     }
     return fonts.sans.regular;
 };
+exports.useFontFamilyFor = useFontFamilyFor;
 /**
  * Use this function within Palette and other "atom" components like `Button`, `Pill`, etc.
  * This function returns a `TextStyle` that has a `fontSize` and `lineHeight` of the same number.
  * This is to make a `Text` behave correctly when it needs to be combined with others to make a UI component.
  * Don't use this function when some actual text needs to be displayed. Only use it when text needs to be part of a UI component.
  */
-export const useTextStyleForPalette = (variant) => {
-    const { theme } = useTheme();
-    const fontSizeAndLineHeight = theme.textTreatments[variant].fontSize;
+var useTextStyleForPalette = function (variant) {
+    var theme = (0, useTheme_1.useTheme)().theme;
+    var fontSizeAndLineHeight = theme.textTreatments[variant].fontSize;
     return {
         fontSize: fontSizeAndLineHeight,
         lineHeight: fontSizeAndLineHeight,
     };
 };
+exports.useTextStyleForPalette = useTextStyleForPalette;

package/dist/elements/Text/index.js

@@ -1,3 +1,19 @@
-export * from "./helpers";
-export * from "./Text";
-export * from "./LinkText";
+"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("./helpers"), exports);
+__exportStar(require("./Text"), exports);
+__exportStar(require("./LinkText"), exports);

package/dist/elements/ToolTip/ToolTip.js

@@ -1,14 +1,28 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { TriangleDownIcon } from "@artsy/icons/native";
-import { noop } from "lodash";
-import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
-import { View } from "react-native";
-import { ToolTipFlyout, ToolTipTextContainer } from "./ToolTipFlyout";
-import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
-import { useTheme } from "../../utils/hooks/useTheme";
-export const ToolTipContext = createContext({
-    dismissToolTip: () => noop,
-    setToolTip: () => noop,
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToolTipContext = exports.ToolTip = exports.ToolTipContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var ToolTipFlyout_1 = require("./ToolTipFlyout");
+var useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
+var useTheme_1 = require("../../utils/hooks/useTheme");
+exports.ToolTipContext = (0, react_1.createContext)({
+    dismissToolTip: function () { return lodash_1.noop; },
+    setToolTip: function () { return lodash_1.noop; },
 });
 /**
  * A ToolTip Component
@@ -30,80 +44,80 @@ export const ToolTipContext = createContext({
  * </ToolTip>
  *
  */
-export const ToolTip = ({ children, enabled = true, flowDirection, initialToolTipText, maxWidth, onPress, position = "TOP", tapToDismiss = false, testID, xOffset = 0, yOffset = 5, }) => {
-    const { space } = useTheme();
-    const mWidth = useScreenDimensions().width - space(2) * 2; // 40 accounting for padding 20 on each side of the screen
-    const MAX_TOOLTIP_WIDTH = maxWidth ?? mWidth;
-    const [toolTipText, setToolTip] = useState(initialToolTipText);
-    const [childrenDimensions, setChildrenDimensions] = useState({ height: 0, width: 0, x: 0 });
-    const [singleTextDimension, setSingleTextDimension] = useState({ height: 0, width: 0 });
-    const dismissToolTip = () => setToolTip(undefined);
-    const [pageX, setPageX] = useState(0);
-    const childrenRef = useRef(null);
-    const sampleTextRef = useRef(null);
-    useLayoutEffect(() => {
-        childrenRef.current?.measureInWindow((x, _y, width, height) => {
-            setChildrenDimensions({ height, width, x });
+var ToolTip = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.enabled, enabled = _c === void 0 ? true : _c, flowDirection = _a.flowDirection, initialToolTipText = _a.initialToolTipText, maxWidth = _a.maxWidth, onPress = _a.onPress, _d = _a.position, position = _d === void 0 ? "TOP" : _d, _e = _a.tapToDismiss, tapToDismiss = _e === void 0 ? false : _e, testID = _a.testID, _f = _a.xOffset, xOffset = _f === void 0 ? 0 : _f, _g = _a.yOffset, yOffset = _g === void 0 ? 5 : _g;
+    var space = (0, useTheme_1.useTheme)().space;
+    var mWidth = (0, useScreenDimensions_1.useScreenDimensions)().width - space(2) * 2; // 40 accounting for padding 20 on each side of the screen
+    var MAX_TOOLTIP_WIDTH = maxWidth !== null && maxWidth !== void 0 ? maxWidth : mWidth;
+    var _h = (0, react_1.useState)(initialToolTipText), toolTipText = _h[0], setToolTip = _h[1];
+    var _j = (0, react_1.useState)({ height: 0, width: 0, x: 0 }), childrenDimensions = _j[0], setChildrenDimensions = _j[1];
+    var _k = (0, react_1.useState)({ height: 0, width: 0 }), singleTextDimension = _k[0], setSingleTextDimension = _k[1];
+    var dismissToolTip = function () { return setToolTip(undefined); };
+    var _l = (0, react_1.useState)(0), pageX = _l[0], setPageX = _l[1];
+    var childrenRef = (0, react_1.useRef)(null);
+    var sampleTextRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        (_a = childrenRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (x, _y, width, height) {
+            setChildrenDimensions({ height: height, width: width, x: x });
             setPageX(x);
         });
     }, []);
-    useLayoutEffect(() => {
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
         if (enabled && toolTipText) {
-            sampleTextRef.current?.measureInWindow((_x, _y, width, height) => {
+            (_a = sampleTextRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, width, height) {
                 if (width > 0 && height > 0) {
-                    setSingleTextDimension({ height, width });
+                    setSingleTextDimension({ height: height, width: width });
                 }
             });
         }
     }, [enabled, toolTipText]);
-    const totalTextWidth = singleTextDimension.width * (toolTipText?.length ?? 0);
-    const finalToolTipWidth = Math.min(totalTextWidth, MAX_TOOLTIP_WIDTH);
-    const numOfLines = getNumberOfLines(finalToolTipWidth, totalTextWidth);
-    const finalToolTipHeight = numOfLines * singleTextDimension.height;
-    const triangleXDisplacement = childrenDimensions.x + childrenDimensions.width / 2;
+    var totalTextWidth = singleTextDimension.width * ((_b = toolTipText === null || toolTipText === void 0 ? void 0 : toolTipText.length) !== null && _b !== void 0 ? _b : 0);
+    var finalToolTipWidth = Math.min(totalTextWidth, MAX_TOOLTIP_WIDTH);
+    var numOfLines = getNumberOfLines(finalToolTipWidth, totalTextWidth);
+    var finalToolTipHeight = numOfLines * singleTextDimension.height;
+    var triangleXDisplacement = childrenDimensions.x + childrenDimensions.width / 2;
     // Calculate the direction of flow of the tooltip. So a tooltip near the right edge of the screen
     // should flow to the left so it remains in the viewport, and vice-versa. Without this, tooltip
     // around the edges can flow off screen
-    const nearLeftEdge = pageX < mWidth / 4 || flowDirection === "RIGHT";
-    const nearRightEdge = pageX > mWidth - mWidth / 4 || flowDirection === "LEFT";
-    const extraStyle = nearLeftEdge ? { left: 0 } : nearRightEdge ? { right: 0 } : undefined;
-    return (_jsxs(ToolTipContext.Provider, { value: {
-            dismissToolTip,
-            setToolTip,
-        }, children: [!!enabled && position === "TOP" && (_jsxs(_Fragment, { children: [_jsx(ToolTipFlyout, { containerStyle: {
-                            bottom: childrenDimensions.height + yOffset,
-                            left: xOffset,
-                            ...extraStyle,
-                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "TOP" && !!toolTipText && (_jsx(TriangleDownIcon, { style: {
+    var nearLeftEdge = pageX < mWidth / 4 || flowDirection === "RIGHT";
+    var nearRightEdge = pageX > mWidth - mWidth / 4 || flowDirection === "LEFT";
+    var extraStyle = nearLeftEdge ? { left: 0 } : nearRightEdge ? { right: 0 } : undefined;
+    return ((0, jsx_runtime_1.jsxs)(exports.ToolTipContext.Provider, { value: {
+            dismissToolTip: dismissToolTip,
+            setToolTip: setToolTip,
+        }, children: [!!enabled && position === "TOP" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipFlyout, { containerStyle: __assign({ bottom: childrenDimensions.height + yOffset, left: xOffset }, extraStyle), tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "TOP" && !!toolTipText && ((0, jsx_runtime_1.jsx)(native_1.TriangleDownIcon, { style: {
                             left: triangleXDisplacement + xOffset,
                             position: "absolute",
                             bottom: childrenDimensions.height + yOffset - 5, // where 5 is the triangle icon size
-                        } }))] })), _jsx(View, { ref: childrenRef, children: children }), !!enabled && position === "BOTTOM" && (_jsxs(_Fragment, { children: [_jsx(ToolTipFlyout, { containerStyle: {
-                            top: childrenDimensions.height + yOffset,
-                            ...extraStyle,
-                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "BOTTOM" && !!toolTipText && (_jsx(TriangleDownIcon, { style: {
+                        } }))] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: childrenRef, children: children }), !!enabled && position === "BOTTOM" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipFlyout, { containerStyle: __assign({ top: childrenDimensions.height + yOffset }, extraStyle), tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "BOTTOM" && !!toolTipText && ((0, jsx_runtime_1.jsx)(native_1.TriangleDownIcon, { style: {
                             transform: [{ rotate: "180deg" }],
                             left: triangleXDisplacement + xOffset,
                             position: "absolute",
                             top: childrenDimensions.height + yOffset - 5, // where 5 is the triangle icon size,
-                        } }))] })), !!enabled && !!toolTipText && (_jsx(View, { ref: sampleTextRef, style: { position: "absolute", opacity: 0 }, children: _jsx(ToolTipTextContainer, { text: "x" }) }))] }));
+                        } }))] })), !!enabled && !!toolTipText && ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: sampleTextRef, style: { position: "absolute", opacity: 0 }, children: (0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipTextContainer, { text: "x" }) }))] }));
 };
-export const useToolTipContext = () => {
-    const context = useContext(ToolTipContext);
+exports.ToolTip = ToolTip;
+var useToolTipContext = function () {
+    var context = (0, react_1.useContext)(exports.ToolTipContext);
     if (!context) {
         throw new Error("Attempted to use useToolTipContext outside of ToolTip Provider. Please wrap your component with <ToolTip>");
     }
     return context;
 };
+exports.useToolTipContext = useToolTipContext;
 /** Given a maximum width and a total width, how many of the maximum widths can we get from the total width?
  * The answer gotten will let us know how many lines of text the tool tip text will need.
  *  Note: We add one for whatever spill over remains i.e text that does not fill an entire line.
  */
-const getNumberOfLines = (maxWidth, totalWidth, numLines = 0) => {
+var getNumberOfLines = function (maxWidth, totalWidth, numLines) {
+    if (numLines === void 0) { numLines = 0; }
     if (maxWidth >= totalWidth) {
         return numLines + 1;
     }
-    const remainder = totalWidth - maxWidth;
+    var remainder = totalWidth - maxWidth;
     if (remainder > -1) {
         numLines = numLines += 1;
     }

package/dist/elements/ToolTip/ToolTip.stories.js

@@ -1,22 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ToolTip, ToolTipContext } from "./ToolTip";
-import { Button } from "../Button";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeToolTip = exports.BottomToolTip = exports.SimpleToolTip = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ToolTip_1 = require("./ToolTip");
+var Button_1 = require("../Button");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+exports.default = {
     title: "ToolTip",
 };
-export const SimpleToolTip = () => (_jsx(Flex, { alignSelf: "center", mt: "200px", alignItems: "center", flexWrap: "wrap", children: _jsx(ToolTip, { initialToolTipText: "Tap to dismiss me", position: "TOP", tapToDismiss: true, children: _jsx(Text, { weight: "medium", children: "I am a Text" }) }) }));
-SimpleToolTip.story = {
+var SimpleToolTip = function () { return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", alignItems: "center", flexWrap: "wrap", children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { initialToolTipText: "Tap to dismiss me", position: "TOP", tapToDismiss: true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", children: "I am a Text" }) }) })); };
+exports.SimpleToolTip = SimpleToolTip;
+exports.SimpleToolTip.story = {
     name: "Simple ToolTip",
 };
-export const BottomToolTip = () => (_jsx(Flex, { alignSelf: "center", mt: "200px", flexWrap: "wrap", children: _jsx(ToolTip, { initialToolTipText: "Bottom tooltip", position: "BOTTOM", tapToDismiss: true, children: _jsx(Text, { weight: "medium", children: "I am a Text" }) }) }));
-BottomToolTip.story = {
+var BottomToolTip = function () { return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", flexWrap: "wrap", children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { initialToolTipText: "Bottom tooltip", position: "BOTTOM", tapToDismiss: true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", children: "I am a Text" }) }) })); };
+exports.BottomToolTip = BottomToolTip;
+exports.BottomToolTip.story = {
     name: "Bottom ToolTip",
 };
-export const ChangeToolTip = () => (_jsx(Flex, { alignSelf: "center", mt: "200px", children: _jsx(ToolTip, { initialToolTipText: "I can be changed", position: "TOP", tapToDismiss: true, children: _jsx(ToolTipContext.Consumer, { children: ({ setToolTip }) => {
-                return (_jsx(Button, { size: "small", onPress: () => setToolTip("I'm the new tooltip"), children: "Press To Change ToolTip" }));
-            } }) }) }));
-ChangeToolTip.story = {
+var ChangeToolTip = function () { return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { initialToolTipText: "I can be changed", position: "TOP", tapToDismiss: true, children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTipContext.Consumer, { children: function (_a) {
+                var setToolTip = _a.setToolTip;
+                return ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onPress: function () { return setToolTip("I'm the new tooltip"); }, children: "Press To Change ToolTip" }));
+            } }) }) })); };
+exports.ChangeToolTip = ChangeToolTip;
+exports.ChangeToolTip.story = {
     name: "Change ToolTip",
 };

package/dist/elements/ToolTip/ToolTip.tests.js

@@ -1,16 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { screen } from "@testing-library/react-native";
-import { ToolTip } from "./ToolTip";
-import { ScreenDimensionsProvider } from "../../utils/hooks";
-import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
-import { Text } from "../Text";
-describe("ToolTip", () => {
-    it("shows the flyout when enabled", () => {
-        renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: true, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
-        expect(screen.getByTestId("flyout")).toBeOnTheScreen();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("@testing-library/react-native");
+var ToolTip_1 = require("./ToolTip");
+var hooks_1 = require("../../utils/hooks");
+var renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+var Text_1 = require("../Text");
+describe("ToolTip", function () {
+    it("shows the flyout when enabled", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(hooks_1.ScreenDimensionsProvider, { children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { enabled: true, testID: "flyout", initialToolTipText: "Words", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Text" }) }) }));
+        expect(react_native_1.screen.getByTestId("flyout")).toBeOnTheScreen();
     });
-    it("Does not show the flyout when disabled", () => {
-        renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: false, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
-        expect(screen.queryByTestId("flyout")).not.toBeOnTheScreen();
+    it("Does not show the flyout when disabled", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(hooks_1.ScreenDimensionsProvider, { children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { enabled: false, testID: "flyout", initialToolTipText: "Words", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Text" }) }) }));
+        expect(react_native_1.screen.queryByTestId("flyout")).not.toBeOnTheScreen();
     });
 });