@jobber/components-native 0.54.4-JOB-88641.7 → 0.54.4-fix-inline.3

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.54.4-JOB-88641.7+2311c987",
+    "version": "0.54.4-fix-inline.3+c411f5fe",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -36,8 +36,8 @@
         "build:clean": "rm -rf ./dist"
     },
     "dependencies": {
-        "@jobber/design": "^0.54.0",
-        "@jobber/hooks": "^2.8.3",
+        "@jobber/design": "^0.54.1-fix-inline.3+c411f5fe",
+        "@jobber/hooks": "^2.8.4-fix-inline.5+c411f5fe",
         "@react-native-clipboard/clipboard": "^1.11.2",
         "@react-native-picker/picker": "^2.4.10",
         "autolinker": "^4.0.0",
@@ -49,7 +49,6 @@
         "react-native-modalize": "^2.0.13",
         "react-native-portalize": "^1.0.7",
         "react-native-safe-area-context": "^4.5.2",
-        "react-native-svg": "^13.9.0",
         "react-native-toast-message": "^2.1.6",
         "react-native-uuid": "^1.4.9",
         "ts-xor": "^1.1.0"
@@ -81,8 +80,9 @@
         "react-native-modal-datetime-picker": " >=13.0.0",
         "react-native-modalize": "^2.0.13",
         "react-native-portalize": "^1.0.7",
-        "react-native-reanimated": "^2.17.0",
-        "react-native-safe-area-context": "^4.5.2"
+        "react-native-reanimated": "^2.0.0 || ^3.0.0",
+        "react-native-safe-area-context": "^4.5.2",
+        "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "2311c987eb9676da43924845ee10286b6293a63e"
+    "gitHead": "c411f5fec260686086b5999611711c886133b5eb"
 }

package/dist/src/ActionItem/ActionItem.js

@@ -28,7 +28,7 @@ function getActionIconColour(actionIconColour) {
 }
 function getActionIcon(icon) {
     if (icon === "edit") {
-        return "arrowRight";
+        return "longArrowRight";
     }
     else if (icon === "editpencil") {
         return "edit";

package/dist/src/Banner/Banner.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { Pressable, Text as RNText, View } from "react-native";
-import { tokens } from "@jobber/design";
 import { styles } from "./Banner.style";
 import { BannerIcon } from "./components/BannerIcon/BannerIcon";
 import { Content } from "../Content";
@@ -23,7 +22,7 @@ export function Banner({ action, details, text, type, children, icon, }) {
                             text && React.createElement(Text, { level: "text" }, text),
                             details && React.createElement(TextList, { items: details, level: "text" }),
                             action && (React.createElement(RNText, null,
-                                shouldFlow && React.createElement(Typography, null, " | "),
+                                shouldFlow && React.createElement(Typography, { color: "subdued" }, " | "),
                                 React.createElement(ActionLabel, { align: "start" }, action.label))))))))));
 }
 function BannerChildren({ children }) {
@@ -38,7 +37,7 @@ function WrappingElement({ shouldFlow, children, }) {
     if (shouldFlow) {
         return React.createElement(RNText, { testID: "ATL-Banner-RNText" }, children);
     }
-    return (React.createElement(View, { testID: "ATL-Banner-View", style: { gap: tokens["space-small"] } }, children));
+    return (React.createElement(View, { testID: "ATL-Banner-View", style: styles.contentSpacing }, children));
 }
 function getBannerIcon(type) {
     switch (type) {

package/dist/src/Banner/Banner.style.js

@@ -5,8 +5,7 @@ export const styles = StyleSheet.create({
         width: "100%",
         borderColor: tokens["color-border"],
         borderStyle: "solid",
-        borderWidth: tokens["border-base"],
-        borderRadius: tokens["radius-base"],
+        borderBottomWidth: tokens["border-base"],
         backgroundColor: tokens["color-surface"],
     },
     bannerContent: {
@@ -29,4 +28,7 @@ export const styles = StyleSheet.create({
     bannerChildrenContent: {
         marginBottom: tokens["space-small"],
     },
+    contentSpacing: {
+        gap: tokens["space-small"],
+    },
 });

package/dist/src/Button/Button.js

@@ -39,7 +39,7 @@ function getActionLabelVariation(variation, type) {
     }
     switch (variation) {
         case "learning":
-            return "learning";
+            return "subtle";
         case "destructive":
             return "destructive";
         case "cancel":
@@ -57,7 +57,7 @@ function getIconColorVariation(variation, type, disabled) {
     }
     switch (variation) {
         case "learning":
-            return "informative";
+            return "interactiveSubtle";
         case "destructive":
             return "destructive";
         case "cancel":

package/dist/src/Button/Button.style.js

@@ -63,8 +63,8 @@ export const styles = StyleSheet.create({
         borderColor: tokens["color-interactive"],
     },
     learning: {
-        backgroundColor: tokens["color-informative"],
-        borderColor: tokens["color-informative"],
+        backgroundColor: tokens["color-interactive--subtle"],
+        borderColor: tokens["color-interactive--subtle"],
     },
     destructive: {
         backgroundColor: tokens["color-destructive"],

package/dist/src/Button/components/InternalButtonLoading/InternalButtonLoading.js

@@ -6,6 +6,9 @@ import { tokens } from "../../../utils/design";
 const imageWidth = 96;
 const offset = PixelRatio.roundToNearestPixel(imageWidth / PixelRatio.get());
 const leftOffset = -1 * offset;
+// looks like deprecation for FlatList in reanimated is cascading down to other exports
+// This is not createAnimatedComponent(FlatList), we are fine
+// eslint-disable-next-line import/no-deprecated
 const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
 function InternalButtonLoadingInternal({ variation, type, }) {
     const translateX = useSharedValue(0);

package/dist/src/ButtonGroup/ButtonGroup.js

@@ -17,7 +17,7 @@ export function ButtonGroup({ children, showCancelInBottomSheet, bottomSheetHead
             return (React.createElement(View, { style: styles.button, key: index }, customButton || (React.createElement(Button, { label: label, accessibilityLabel: label, onPress: allowTapWhenOffline ? onPress : handlePress(onPress), type: buttonType, variation: buttonVariation, fullHeight: true, icon: icon, loading: loading, testID: `ButtonGroup-Primary-Action-${index}` }))));
         }),
         secondaryActions.length > 0 && (React.createElement(View, { style: styles.moreButton },
-            React.createElement(Button, { icon: "more", accessibilityLabel: t("more"), onPress: handlePress(openBottomSheet), fullHeight: true, testID: "ButtonGroup-Secondary-Action" }))),
+            React.createElement(Button, { type: "secondary", icon: "more", accessibilityLabel: t("more"), onPress: handlePress(openBottomSheet), fullHeight: true, testID: "ButtonGroup-Secondary-Action" }))),
         React.createElement(SecondaryActionSheet, { heading: bottomSheetHeading, showCancel: showCancelInBottomSheet, secondaryActionsRef: secondaryActionsRef, actions: secondaryActions.map(secondaryAction => secondaryAction.props), onOpenBottomSheet: onOpenBottomSheet, onCloseBottomSheet: onCloseBottomSheet })));
     function openBottomSheet() {
         var _a;

package/dist/src/ButtonGroup/ButtonGroup.style.js

@@ -5,11 +5,11 @@ export const styles = StyleSheet.create({
         width: "100%",
         flexDirection: "row",
         justifyContent: "flex-end",
+        gap: tokens["space-small"],
     },
     button: {
         flexBasis: tokens["space-largest"],
         flexGrow: 1,
-        paddingRight: tokens["space-smaller"],
     },
     moreButton: {
         flexBasis: tokens["space-largest"],

package/dist/src/Card/Card.js

@@ -16,14 +16,13 @@ export function Card({ header, footer, children, reportCardHeight: onCardHeightC
     var _a, _b;
     return (React.createElement(ErrorMessageWrapper, { message: error, wrapFor: "card" },
         React.createElement(View, { onLayout: handleLayoutChange, style: [styles.container, getElevationStyle(elevation)], testID: testID },
-            header && (React.createElement(React.Fragment, null,
-                React.createElement(InternalCardHeader, { onPress: header.onPress, testID: `${testID}Header`, collapsable: !!children },
-                    React.createElement(View, { style: styles.headerTitle },
-                        React.createElement(Typography, { color: "heading", fontFamily: "base", fontWeight: "bold", size: "default", lineHeight: "base", accessibilityRole: "header" }, header.title)),
-                    React.createElement(View, { style: styles.actionItem },
-                        !!((_a = header.actionItem) === null || _a === void 0 ? void 0 : _a.label) && (React.createElement(View, { style: styles.actionLabel },
-                            React.createElement(ActionLabel, { type: "cardTitle" }, header.actionItem.label))),
-                        ((_b = header.actionItem) === null || _b === void 0 ? void 0 : _b.iconName) && (React.createElement(Icon, { name: header.actionItem.iconName, color: "interactive" })))))),
+            header && (React.createElement(InternalCardHeader, { onPress: header.onPress, testID: `${testID}Header`, collapsable: !!children },
+                React.createElement(View, { style: styles.headerTitle },
+                    React.createElement(Typography, { color: "heading", fontFamily: "base", fontWeight: "bold", size: "default", lineHeight: "base", accessibilityRole: "header" }, header.title)),
+                React.createElement(View, { style: styles.actionItem },
+                    !!((_a = header.actionItem) === null || _a === void 0 ? void 0 : _a.label) && (React.createElement(View, { style: styles.actionLabel },
+                        React.createElement(ActionLabel, { type: "cardTitle" }, header.actionItem.label))),
+                    ((_b = header.actionItem) === null || _b === void 0 ? void 0 : _b.iconName) && (React.createElement(Icon, { name: header.actionItem.iconName, color: "interactive" }))))),
             children,
             footer && (React.createElement(Pressable, { testID: `${testID}Footer`, onPress: footer.onPress, style: ({ pressed }) => [
                     styles.footer,

package/dist/src/Disclosure/Disclosure.js

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-import { ScrollView, TouchableOpacity, View, } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import Reanimated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
 import { EASE_CUBIC_IN_OUT } from "./constants";
 import { styles } from "./Disclosure.style";
 import { tokens } from "../utils/design";
 import { Icon } from "../Icon";
-const ReanimatedView = Reanimated.createAnimatedComponent(View);
-const ReanimatedScrollView = Reanimated.createAnimatedComponent(ScrollView);
+const ReanimatedView = Reanimated.View;
+const ReanimatedScrollView = Reanimated.ScrollView;
 export function Disclosure({ content, header, open, onToggle, isEmpty, animationDuration = tokens["timing-slowest"], }) {
     return (React.createElement(View, { style: styles.container },
         React.createElement(DisclosureHeader, Object.assign({}, { header, onToggle, isEmpty, open, animationDuration })),

package/dist/src/Glimmer/Glimmer.js

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Animated, Easing, View } from "react-native";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
+import { shineWidth, styles } from "./Glimmer.style";
+import { sizeStyles } from "./Glimmer.size.style";
+import { shapeStyles } from "./Glimmer.shape.style";
+import { tokens } from "../utils/design";
+export const GLIMMER_TEST_ID = "ATL-Glimmer";
+export const GLIMMER_SHINE_TEST_ID = "ATL-Glimmer-Shine";
+export function Glimmer({ width, shape = "rectangle", size = "base", timing = "base", }) {
+    const leftPosition = useRef(new Animated.Value(-shineWidth)).current;
+    const [parentWidth, setParentWidth] = useState(0);
+    useEffect(() => {
+        const shine = Animated.loop(Animated.timing(leftPosition, {
+            toValue: parentWidth + shineWidth,
+            duration: timing === "base"
+                ? tokens["timing-loading--extended"]
+                : tokens["timing-loading"],
+            easing: Easing.ease,
+            useNativeDriver: true,
+        }));
+        shine.start();
+        return shine.stop;
+    }, [parentWidth]);
+    return (React.createElement(View, { style: [
+            styles.container,
+            sizeStyles[size],
+            shapeStyles[shape],
+            { width },
+        ], onLayout: getWidth, testID: GLIMMER_TEST_ID },
+        React.createElement(Animated.View, { style: [styles.shine, { transform: [{ translateX: leftPosition }] }], testID: GLIMMER_SHINE_TEST_ID },
+            React.createElement(Svg, null,
+                React.createElement(Defs, null,
+                    React.createElement(LinearGradient, { id: "gradientShine", x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
+                        React.createElement(Stop, { offset: "0%", stopColor: tokens["color-surface--background"] }),
+                        React.createElement(Stop, { offset: "50%", stopColor: tokens["color-surface"] }),
+                        React.createElement(Stop, { offset: "100%", stopColor: tokens["color-surface--background"] }))),
+                React.createElement(Rect, { fill: "url(#gradientShine)", height: "100%", width: "100%" })))));
+    function getWidth(event) {
+        setParentWidth(event.nativeEvent.layout.width);
+    }
+}

package/dist/src/Glimmer/Glimmer.shape.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const shapeStyles = StyleSheet.create({
+    rectangle: {
+        width: "100%",
+    },
+    square: {
+        width: "auto",
+        aspectRatio: 1 / 1,
+    },
+    circle: {
+        width: "auto",
+        aspectRatio: 1 / 1,
+        borderRadius: tokens["radius-circle"],
+    },
+});

package/dist/src/Glimmer/Glimmer.size.style.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const sizeStyles = StyleSheet.create({
+    small: { height: tokens["space-small"] },
+    base: { height: tokens["space-base"] },
+    large: { height: tokens["space-large"] },
+    larger: { height: tokens["space-larger"] },
+    largest: { height: tokens["space-largest"] },
+});

package/dist/src/Glimmer/Glimmer.style.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const shineWidth = tokens["space-largest"];
+export const styles = StyleSheet.create({
+    container: {
+        backgroundColor: tokens["color-surface--background"],
+        overflow: "hidden",
+        position: "relative",
+        width: "100%",
+        height: tokens["space-base"],
+        borderRadius: tokens["radius-base"],
+    },
+    shine: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: shineWidth,
+        height: "100%",
+    },
+});

package/dist/src/Glimmer/index.js

@@ -0,0 +1 @@
+export * from "./Glimmer";

package/dist/src/InputCurrency/InputCurrency.js

@@ -73,21 +73,20 @@ export function InputCurrency(props) {
         }
     };
     const { t } = useAtlantisI18n();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputText, Object.assign({}, props, { prefix: showCurrencySymbol ? { label: currencySymbol } : undefined, keyboard: getKeyboard(props), value: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.toString()) || displayValue, defaultValue: (_b = props.defaultValue) === null || _b === void 0 ? void 0 : _b.toString(), onChangeText: handleChange, transform: {
-                output: val => {
-                    return val === null || val === void 0 ? void 0 : val.split(floatSeparators.group).join("").replace(floatSeparators.decimal, ".");
-                },
-            }, validations: Object.assign({ pattern: {
-                    value: NUMBER_VALIDATION_REGEX,
-                    message: t("errors.notANumber"),
-                } }, props.validations), onBlur: () => {
-                var _a;
-                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
-                if (field.value === 0 ||
-                    field.value === "" ||
-                    field.value === undefined) {
-                    setDisplayValue("0");
-                }
-            } }))));
+    return (React.createElement(InputText, Object.assign({}, props, { prefix: showCurrencySymbol ? { label: currencySymbol } : undefined, keyboard: getKeyboard(props), value: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.toString()) || displayValue, defaultValue: (_b = props.defaultValue) === null || _b === void 0 ? void 0 : _b.toString(), onChangeText: handleChange, transform: {
+            output: val => {
+                return val === null || val === void 0 ? void 0 : val.split(floatSeparators.group).join("").replace(floatSeparators.decimal, ".");
+            },
+        }, validations: Object.assign({ pattern: {
+                value: NUMBER_VALIDATION_REGEX,
+                message: t("errors.notANumber"),
+            } }, props.validations), onBlur: () => {
+            var _a;
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+            if (field.value === 0 ||
+                field.value === "" ||
+                field.value === undefined) {
+                setDisplayValue("0");
+            }
+        } })));
 }

package/dist/src/InputFieldWrapper/InputFieldWrapper.js

@@ -6,14 +6,21 @@ import { styles } from "./InputFieldWrapper.style";
 import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
 import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
 import { ClearAction } from "./components/ClearAction";
+import { Glimmer } from "../Glimmer/Glimmer";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
 import { typographyStyles } from "../Typography";
 import { Text } from "../Text";
-export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel = false, hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, }) {
+import { ActivityIndicator } from "../ActivityIndicator";
+export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
+export const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
+export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel = false, hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, toolbar, toolbarVisibility = "while-editing", loading = false, loadingType = "spinner", }) {
     fieldAffixRequiredPropsCheck([prefix, suffix]);
     const handleClear = onClear !== null && onClear !== void 0 ? onClear : noopClear;
     warnIfClearActionWithNoOnClear(onClear, showClearAction);
     const inputInvalid = Boolean(invalid) || Boolean(error);
+    const isToolbarVisible = toolbar && (toolbarVisibility === "always" || focused);
+    const showLoadingSpinner = loading && loadingType === "spinner";
+    const showLoadingGlimmer = loading && loadingType === "glimmer";
     return (React.createElement(ErrorMessageWrapper, { message: getMessage({ invalid, error }) },
         React.createElement(View, { testID: "ATL-InputFieldWrapper", style: [
                 styles.container,
@@ -22,23 +29,37 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
                 disabled && styles.disabled,
                 styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.container,
             ] },
-            (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(PrefixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, icon: prefix.icon })),
-            React.createElement(View, { style: [styles.inputContainer] },
-                React.createElement(View, { style: [
-                        !!placeholder && styles.label,
-                        hasMiniLabel && styles.miniLabel,
-                        disabled && styles.disabled,
-                        hasMiniLabel &&
-                            showClearAction &&
-                            styles.miniLabelShowClearAction,
-                    ], pointerEvents: "none" },
-                    React.createElement(Placeholder, { placeholder: placeholder, labelVariation: getLabelVariation(error, invalid, disabled), hasMiniLabel: hasMiniLabel, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.placeholderText })),
-                (prefix === null || prefix === void 0 ? void 0 : prefix.label) && hasValue && (React.createElement(PrefixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: prefix.label, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.prefixLabel })),
-                children,
-                (showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label) || (suffix === null || suffix === void 0 ? void 0 : suffix.icon)) && (React.createElement(View, { style: styles.inputEndContainer },
-                    showClearAction && (React.createElement(ClearAction, { hasMarginRight: !!(suffix === null || suffix === void 0 ? void 0 : suffix.icon) || !!(suffix === null || suffix === void 0 ? void 0 : suffix.label), onPress: handleClear })),
-                    (suffix === null || suffix === void 0 ? void 0 : suffix.label) && hasValue && (React.createElement(SuffixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: suffix.label, hasLeftMargin: !showClearAction, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.suffixLabel })),
-                    (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(SuffixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, hasLeftMargin: !!(!showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label)), inputInvalid: inputInvalid, icon: suffix.icon, onPress: suffix.onPress })))))),
+            React.createElement(View, { style: styles.field },
+                (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(PrefixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, icon: prefix.icon })),
+                React.createElement(View, { style: [styles.inputContainer] },
+                    React.createElement(View, { style: [
+                            !!placeholder && styles.label,
+                            hasMiniLabel && styles.miniLabel,
+                            disabled && styles.disabled,
+                            hasMiniLabel &&
+                                showClearAction &&
+                                styles.miniLabelShowClearAction,
+                        ], pointerEvents: "none" },
+                        React.createElement(Placeholder, { placeholder: placeholder, labelVariation: getLabelVariation(error, invalid, disabled), hasMiniLabel: hasMiniLabel, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.placeholderText })),
+                    (prefix === null || prefix === void 0 ? void 0 : prefix.label) && hasValue && (React.createElement(PrefixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: prefix.label, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.prefixLabel })),
+                    children,
+                    showLoadingGlimmer && (React.createElement(View, { testID: INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID, style: [
+                            styles.loadingGlimmers,
+                            hasValue && styles.loadingGlimmersHasValue,
+                        ] },
+                        React.createElement(Glimmer, { size: "small", width: "80%" }),
+                        React.createElement(Glimmer, { size: "small" }),
+                        React.createElement(Glimmer, { size: "small", width: "70%" }))),
+                    (showClearAction ||
+                        (suffix === null || suffix === void 0 ? void 0 : suffix.label) ||
+                        (suffix === null || suffix === void 0 ? void 0 : suffix.icon) ||
+                        showLoadingSpinner) && (React.createElement(View, { style: styles.inputEndContainer },
+                        showClearAction && (React.createElement(ClearAction, { hasMarginRight: !!(suffix === null || suffix === void 0 ? void 0 : suffix.icon) || !!(suffix === null || suffix === void 0 ? void 0 : suffix.label), onPress: handleClear })),
+                        (suffix === null || suffix === void 0 ? void 0 : suffix.label) && hasValue && (React.createElement(SuffixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: suffix.label, hasLeftMargin: !showClearAction, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.suffixLabel })),
+                        showLoadingSpinner && (React.createElement(View, { style: styles.loadingSpinner },
+                            React.createElement(ActivityIndicator, { testID: INPUT_FIELD_WRAPPER_SPINNER_TEST_ID }))),
+                        (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(SuffixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, hasLeftMargin: !!(!showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label)), inputInvalid: inputInvalid, icon: suffix.icon, onPress: suffix.onPress })))))),
+            isToolbarVisible && React.createElement(View, { style: styles.toolbar }, toolbar)),
         assistiveText && !error && !invalid && (React.createElement(Text, { level: "textSupporting", variation: disabled ? "disabled" : focused ? "interactive" : "subdued" }, assistiveText))));
 }
 function getLabelVariation(error, invalid, disabled) {

package/dist/src/InputFieldWrapper/InputFieldWrapper.style.js

@@ -3,7 +3,16 @@ import { commonInputStyles } from "./CommonInputStyles.style";
 import { tokens } from "../utils/design";
 import { typographyStyles } from "../Typography";
 export const styles = StyleSheet.create({
-    container: StyleSheet.flatten([commonInputStyles.container]),
+    container: StyleSheet.flatten([
+        commonInputStyles.container,
+        {
+            flexDirection: "column",
+        },
+    ]),
+    field: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
     inputContainer: {
         flexDirection: "row",
         flex: 1,
@@ -29,6 +38,7 @@ export const styles = StyleSheet.create({
         top: 0,
         paddingTop: tokens["space-small"] - tokens["space-smallest"],
         backgroundColor: tokens["color-surface"],
+        marginRight: tokens["space-small"],
         maxHeight: (typographyStyles.defaultSize.lineHeight || 0) + tokens["space-smaller"],
         zIndex: 1,
     },
@@ -78,4 +88,31 @@ export const styles = StyleSheet.create({
         flexDirection: "row",
         zIndex: 1,
     },
+    toolbar: {
+        flexBasis: "100%",
+        flexDirection: "row",
+        gap: tokens["space-small"],
+        paddingBottom: tokens["space-small"],
+    },
+    loadingSpinner: {
+        justifyContent: "center",
+        paddingRight: tokens["space-small"],
+    },
+    loadingGlimmers: {
+        position: "absolute",
+        top: tokens["space-base"],
+        bottom: tokens["space-base"],
+        left: 0,
+        right: 0,
+        gap: tokens["space-small"],
+        paddingTop: tokens["space-small"],
+        paddingRight: tokens["space-large"],
+        backgroundColor: tokens["color-surface"],
+        overflow: "hidden",
+    },
+    loadingGlimmersHasValue: {
+        top: tokens["space-large"],
+        paddingTop: tokens["space-base"] - tokens["space-smaller"],
+        bottom: tokens["space-smaller"],
+    },
 });

package/dist/src/InputText/InputText.js

@@ -9,7 +9,7 @@ import { InputFieldWrapper } from "../InputFieldWrapper";
 import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 export const InputText = forwardRef(InputTextInternal);
 // eslint-disable-next-line max-statements
-function InputTextInternal({ invalid, disabled, name, placeholder, assistiveText, keyboard, value: controlledValue, defaultValue, autoFocus, autoComplete = "off", spellCheck, textContentType = "none", validations, onChangeText, onSubmitEditing, onFocus, accessibilityLabel, accessibilityHint, autoCorrect, autoCapitalize, onBlur, multiline = false, prefix, suffix, transform = {}, clearable = multiline ? "never" : "while-editing", testID, secureTextEntry, styleOverride, }, ref) {
+function InputTextInternal({ invalid, disabled, readonly = false, name, placeholder, assistiveText, keyboard, value: controlledValue, defaultValue, autoFocus, autoComplete = "off", spellCheck, textContentType = "none", validations, onChangeText, onSubmitEditing, onFocus, accessibilityLabel, accessibilityHint, autoCorrect, autoCapitalize, onBlur, multiline = false, prefix, suffix, transform = {}, clearable = multiline ? "never" : "while-editing", testID, secureTextEntry, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }, ref) {
     var _a;
     const isAndroid = Platform.OS === "android";
     const isIOS = Platform.OS === "ios";
@@ -72,7 +72,7 @@ function InputTextInternal({ invalid, disabled, name, placeholder, assistiveText
         }
         onFocusNext();
     }
-    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride },
+    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride, toolbar: toolbar, toolbarVisibility: toolbarVisibility, loading: loading, loadingType: loadingType },
         React.createElement(TextInput, Object.assign({ inputAccessoryViewID: inputAccessoryID || undefined, testID: testID, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, style: [
                 commonInputStyles.input,
                 styles.inputPaddingTop,
@@ -82,7 +82,10 @@ function InputTextInternal({ invalid, disabled, name, placeholder, assistiveText
                 multiline && Platform.OS === "ios" && styles.multilineInputiOS,
                 multiline && hasMiniLabel && styles.multiLineInputWithMini,
                 styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.inputText,
-            ], editable: !disabled, keyboardType: keyboard, value: inputTransform(internalValue), autoFocus: autoFocus, autoComplete: autoComplete, multiline: multiline, scrollEnabled: false, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
+                loading && loadingType === "glimmer" && { color: "transparent" },
+            ], 
+            // @ts-expect-error - does exist on 0.71 and up https://github.com/facebook/react-native/pull/39281
+            readOnly: readonly, editable: !disabled, keyboardType: keyboard, value: inputTransform(internalValue), autoFocus: autoFocus, autoComplete: autoComplete, multiline: multiline, scrollEnabled: false, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityState: { busy: loading }, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
                 _name && setFocusedInput(_name);
                 setFocused(true);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);

package/dist/src/Menu/Menu.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from "react";
-import { Pressable, View, useWindowDimensions, } from "react-native";
+import { Keyboard, Platform, Pressable, View, useWindowDimensions, } from "react-native";
 import { Portal } from "react-native-portalize";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { styles } from "./Menu.style";
@@ -23,7 +23,7 @@ export function Menu({ menuOptions, customActivator }) {
             setMenuPosition(findViewpoint(screenInfo, activatorLayout.current));
         }
     }, [screenInfo, activatorLayout]);
-    const activatorOnPress = (onPress) => {
+    const openMenu = () => {
         var _a;
         (_a = menuButtonRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
             activatorLayout.current = {
@@ -34,9 +34,20 @@ export function Menu({ menuOptions, customActivator }) {
             };
             findMenuLayout();
             setOpen(true);
-            onPress && onPress();
         });
     };
+    const activatorOnPress = (onPress) => {
+        onPress && onPress();
+        if (Platform.OS === "ios" && Keyboard.isVisible()) {
+            // On iOS, the keyboard height causes problems with the menu positioning logic.
+            // Wait until the keyboard is fully hidden before we show the menu.
+            onKeyboardDidHide(openMenu);
+            Keyboard.dismiss();
+        }
+        else {
+            openMenu();
+        }
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { ref: ref => {
                 menuButtonRef.current = ref;
@@ -64,3 +75,9 @@ function useScreenInformation() {
     const { height: windowHeight } = useSafeAreaFrame();
     return { headerHeight, windowWidth, windowHeight };
 }
+function onKeyboardDidHide(callback) {
+    const listener = Keyboard.addListener("keyboardDidHide", () => {
+        listener.remove();
+        callback();
+    });
+}

package/dist/src/Menu/Menu.style.js

@@ -2,5 +2,5 @@ import { StyleSheet } from "react-native";
 import { tokens } from "../utils/design";
 const menuWidth = 208;
 export const styles = StyleSheet.create({
-    menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-larger"], width: menuWidth }, tokens["shadow-high"]),
+    menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-base"], width: menuWidth }, tokens["shadow-high"]),
 });

package/dist/src/Menu/utils.js

@@ -59,12 +59,7 @@ function getLeftPosition(pos, activatorLayout, windowWidth, menuHorizontalPaddin
         pos.right = 0;
     }
     else {
-        pos.right =
-            windowWidth -
-                activatorLayout.x -
-                activatorLayout.width +
-                activatorLayout.width / 2 -
-                menuHorizontalPadding;
+        pos.right = windowWidth - activatorLayout.x - activatorLayout.width;
     }
 }
 function getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth) {
@@ -79,6 +74,6 @@ function getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWi
         pos.left = 0;
     }
     else {
-        pos.left = activatorLayout.x + activatorLayout.width / 2 - menuPadding;
+        pos.left = activatorLayout.x;
     }
 }

package/dist/src/index.js

@@ -17,29 +17,30 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
-export * from "./FormatFile";
 export * from "./Form";
+export * from "./FormatFile";
 export * from "./FormField";
+export * from "./Glimmer";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
-export * from "./InputFieldWrapper";
 export * from "./InputCurrency";
 export * from "./InputDate";
 export * from "./InputEmail";
+export * from "./InputFieldWrapper";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
-export * from "./InputTime";
 export * from "./InputText";
+export * from "./InputTime";
 export * from "./Menu";
-export * from "./TextList";
-export * from "./ThumbnailList";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";
 export * from "./Text";
+export * from "./TextList";
+export * from "./ThumbnailList";
 export * from "./Toast";
 export * from "./Typography";