@ledgerhq/native-ui 0.26.1 → 0.27.0-nightly.0

package/lib/components/Form/DrawerTabSelector/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface TabSelectorProps<T extends string | number> {
+    options: T[];
+    selectedOption: T;
+    handleSelectOption: (option: T) => void;
+    labels: {
+        [key in T]: string;
+    };
+}
+export default function DrawerTabSelector<T extends string | number>({ options, selectedOption, handleSelectOption, labels, }: TabSelectorProps<T>): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Form/DrawerTabSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/DrawerTabSelector/index.tsx"],"names":[],"mappings":";AAwDA,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAClD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,cAAc,EAAE,CAAC,CAAC;IAClB,kBAAkB,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE;SAAG,GAAG,IAAI,CAAC,GAAG,MAAM;KAAE,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACnE,OAAO,EACP,cAAc,EACd,kBAAkB,EAClB,MAAM,GACP,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA4DnC"}

package/lib/components/Form/DrawerTabSelector/index.js

@@ -0,0 +1,61 @@
+import React, { useEffect } from "react";
+import Text from "../../Text";
+import Flex from "../../Layout/Flex";
+import styled, { useTheme } from "styled-components/native";
+import { TouchableOpacity } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
+const StyledTouchableOpacity = styled(TouchableOpacity) `
+  width: ${(p) => p.width}px;
+  flex: 1;
+  height: 100%;
+`;
+const StyledFlex = styled(Flex) `
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledText = styled(Text) `
+  line-height: 14.52px;
+  overflow: visible;
+  text-align: center;
+  font-size: 12px;
+  color: ${(p) => p.isSelected ? p.theme.colors.constant.black : p.theme.colors.opacityDefault.c50};
+`;
+const OptionButton = ({ option, selectedOption, handleSelectOption, label, width, }) => {
+    const isSelected = selectedOption === option;
+    return (React.createElement(StyledTouchableOpacity, { width: width, onPress: () => handleSelectOption(option) },
+        React.createElement(StyledFlex, { isSelected: isSelected },
+            React.createElement(StyledText, { fontWeight: "semiBold", isSelected: isSelected, numberOfLines: 1 }, label))));
+};
+export default function DrawerTabSelector({ options, selectedOption, handleSelectOption, labels, }) {
+    const { colors } = useTheme();
+    const longuestLabel = labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];
+    const widthFactor = 8;
+    const margin = 20;
+    const width = labels[longuestLabel].length * widthFactor + margin;
+    const semiWidth = width / 2;
+    const translateX = useSharedValue(-semiWidth);
+    useEffect(() => {
+        translateX.value = withSpring(selectedOption === options[0] ? -semiWidth : semiWidth, {
+            damping: 30,
+            stiffness: 80,
+        });
+    }, [selectedOption, translateX, options]);
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ translateX: translateX.value }],
+        };
+    });
+    return (React.createElement(Flex, { flexDirection: "row", justifyContent: "center", alignItems: "center", width: width * 2 + 4, height: "35px", borderRadius: "40px", bg: colors.opacityDefault.c05, position: "relative" },
+        React.createElement(Animated.View, { style: [
+                {
+                    position: "absolute",
+                    width: width - 2,
+                    height: "90%",
+                    backgroundColor: colors.primary.c80,
+                    borderRadius: 40,
+                },
+                animatedStyle,
+            ] }),
+        options.map((option) => (React.createElement(OptionButton, { width: width, key: option, option: option, selectedOption: selectedOption, handleSelectOption: handleSelectOption, label: labels[option] })))));
+}

package/lib/components/Form/TabSelector/index.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="react" />
-interface TabSelectorProps<T extends string | number> {
-    options: T[];
-    selectedOption: T;
-    handleSelectOption: (option: T) => void;
-    labels: {
-        [key in T]: string;
-    };
-}
-export default function TabSelector<T extends string | number>({ options, selectedOption, handleSelectOption, labels, }: TabSelectorProps<T>): JSX.Element;
+type TabSelectorProps = {
+    labels: string[];
+    onToggle: (value: string) => void;
+};
+export default function TabSelector({ labels, onToggle }: TabSelectorProps): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Form/TabSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AAwDA,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAClD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,cAAc,EAAE,CAAC,CAAC;IAClB,kBAAkB,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE;SAAG,GAAG,IAAI,CAAC,GAAG,MAAM;KAAE,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC7D,OAAO,EACP,cAAc,EACd,kBAAkB,EAClB,MAAM,GACP,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA4DnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AA8BA,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAqDvF"}

package/lib/components/Form/TabSelector/index.js

@@ -1,61 +1,55 @@
-import React, { useEffect } from "react";
-import Text from "../../Text";
+import React, { useState } from "react";
+import { Pressable } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
+import styled from "styled-components/native";
 import Flex from "../../Layout/Flex";
-import styled, { useTheme } from "styled-components/native";
-import { TouchableOpacity } from "react-native";
-import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
-const StyledTouchableOpacity = styled(TouchableOpacity) `
-  width: ${(p) => p.width}px;
-  flex: 1;
+import Text from "../../Text";
+import Box from "../../Layout/Box";
+const Container = styled(Flex) `
   height: 100%;
+  justify-content: space-between;
+  flex-direction: row;
+  position: relative;
 `;
-const StyledFlex = styled(Flex) `
+const AnimatedBackground = styled(Animated.View) `
+  position: absolute;
   height: 100%;
-  justify-content: center;
-  align-items: center;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.colors.opacityDefault.c05};
 `;
-const StyledText = styled(Text) `
-  line-height: 14.52px;
-  overflow: visible;
-  text-align: center;
-  font-size: 12px;
-  color: ${(p) => p.isSelected ? p.theme.colors.constant.black : p.theme.colors.opacityDefault.c50};
+const Tab = styled(Flex) `
+  flex: 1;
+  padding: 4px;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
 `;
-const OptionButton = ({ option, selectedOption, handleSelectOption, label, width, }) => {
-    const isSelected = selectedOption === option;
-    return (React.createElement(StyledTouchableOpacity, { width: width, onPress: () => handleSelectOption(option) },
-        React.createElement(StyledFlex, { isSelected: isSelected },
-            React.createElement(StyledText, { fontWeight: "semiBold", isSelected: isSelected, numberOfLines: 1 }, label))));
-};
-export default function TabSelector({ options, selectedOption, handleSelectOption, labels, }) {
-    const { colors } = useTheme();
-    const longuestLabel = labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];
-    const widthFactor = 8;
-    const margin = 20;
-    const width = labels[longuestLabel].length * widthFactor + margin;
-    const semiWidth = width / 2;
-    const translateX = useSharedValue(-semiWidth);
-    useEffect(() => {
-        translateX.value = withSpring(selectedOption === options[0] ? -semiWidth : semiWidth, {
-            damping: 30,
-            stiffness: 80,
-        });
-    }, [selectedOption, translateX, options]);
+export default function TabSelector({ labels, onToggle }) {
+    const translateX = useSharedValue(0);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const handlePress = (value, index) => {
+        setSelectedIndex(index);
+        translateX.value = (containerWidth / labels.length) * index;
+        if (selectedIndex !== index)
+            onToggle(value);
+    };
+    const handleLayout = (event) => {
+        const { width } = event.nativeEvent.layout;
+        setContainerWidth(width);
+    };
     const animatedStyle = useAnimatedStyle(() => {
         return {
-            transform: [{ translateX: translateX.value }],
+            transform: [{ translateX: withTiming(translateX.value, { duration: 250 }) }],
+            width: containerWidth / labels.length,
         };
     });
-    return (React.createElement(Flex, { flexDirection: "row", justifyContent: "center", alignItems: "center", width: width * 2 + 4, height: "35px", borderRadius: "40px", bg: colors.opacityDefault.c05, position: "relative" },
-        React.createElement(Animated.View, { style: [
-                {
-                    position: "absolute",
-                    width: width - 2,
-                    height: "90%",
-                    backgroundColor: colors.primary.c80,
-                    borderRadius: 40,
-                },
-                animatedStyle,
-            ] }),
-        options.map((option) => (React.createElement(OptionButton, { width: width, key: option, option: option, selectedOption: selectedOption, handleSelectOption: handleSelectOption, label: labels[option] })))));
+    return (React.createElement(Box, { height: "100%", width: "100%", borderRadius: 12, border: 1, borderColor: "opacityDefault.c10", p: 2 },
+        React.createElement(Container, { onLayout: handleLayout },
+            React.createElement(AnimatedBackground, { style: animatedStyle }),
+            labels.map((label, index) => (React.createElement(Pressable, { hitSlop: 6, key: label, onPress: () => handlePress(label, index), style: ({ pressed }) => [
+                    { opacity: pressed && selectedIndex !== index ? 0.5 : 1, flex: 1 },
+                ] },
+                React.createElement(Tab, null,
+                    React.createElement(Text, { fontSize: 14, fontWeight: "semiBold", flexShrink: 1, numberOfLines: 1 }, label))))))));
 }

package/lib/components/Form/index.d.ts

@@ -4,5 +4,6 @@ export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
 export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";
+export { default as DrawerTabSelector } from "./DrawerTabSelector";
 export { default as TabSelector } from "./TabSelector";
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/Form/index.js

@@ -4,4 +4,5 @@ export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
 export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";
+export { default as DrawerTabSelector } from "./DrawerTabSelector";
 export { default as TabSelector } from "./TabSelector";

package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts

@@ -16,6 +16,6 @@ export declare const Base: import("styled-components").StyledComponent<typeof To
     visuallyDisabled?: boolean | undefined;
     variant: Variant;
 }, never>;
-declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant, variant, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
+declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant, variant, testID, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
 export default QuickActionButton;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAmB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GACxD,eAAe,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,eAAO,MAAM,UAAU,oNAGtB,CAAC;AAEF,eAAO,MAAM,IAAI;;aACgD,OAAO;SAcvE,CAAC;AAEF,QAAA,MAAM,iBAAiB,oGASpB,sBAAsB,KAAG,MAAM,YAwBjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAmB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GACxD,eAAe,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,eAAO,MAAM,UAAU,oNAGtB,CAAC;AAEF,eAAO,MAAM,IAAI;;aACgD,OAAO;SAcvE,CAAC;AAEF,QAAA,MAAM,iBAAiB,4GAUpB,sBAAsB,KAAG,MAAM,YAyBjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/cta/QuickAction/QuickActionButton/index.js

@@ -30,8 +30,8 @@ export const Base = baseStyled(TouchableOpacity) `
     : `background-color: ${theme.colors.neutral.c20};`}
 `;
 const QuickActionButton = (_a) => {
-    var { Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large" } = _a, otherProps = __rest(_a, ["Icon", "children", "disabled", "onPress", "onPressWhenDisabled", "textVariant", "variant"]);
-    return (React.createElement(Base, Object.assign({ disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant }, otherProps),
+    var { Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large", testID } = _a, otherProps = __rest(_a, ["Icon", "children", "disabled", "onPress", "onPressWhenDisabled", "textVariant", "variant", "testID"]);
+    return (React.createElement(Base, Object.assign({ disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant }, otherProps, { testID: `${testID}-${children}` }),
         React.createElement(Icon, { size: variant === "small" ? 20 : 24, color: disabled ? "neutral.c50" : "neutral.c100" }),
         React.createElement(StyledText, { numberOfLines: 1, variant: textVariant, fontWeight: "semiBold", color: disabled ? "neutral.c50" : "neutral.c100", mt: 2 }, children)));
 };

package/lib/components/cta/QuickAction/QuickActionList/index.d.ts

@@ -3,7 +3,8 @@ import { FlatListProps } from "react-native";
 import { QuickActionButtonProps } from "../QuickActionButton";
 export type QuickActionListProps = Omit<FlatListProps<QuickActionButtonProps>, "renderItem"> & {
     id: string;
+    testID?: string;
 };
-declare const QuickActionList: ({ numColumns, data, id, ...otherProps }: QuickActionListProps) => React.ReactElement;
+declare const QuickActionList: ({ numColumns, data, id, testID, ...otherProps }: QuickActionListProps) => React.ReactElement;
 export default QuickActionList;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/cta/QuickAction/QuickActionList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AAEvD,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,QAAA,MAAM,eAAe,4CAKlB,oBAAoB,KAAG,MAAM,YAyB/B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AAEvD,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,eAAe,oDAMlB,oBAAoB,KAAG,MAAM,YA0B/B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/cta/QuickAction/QuickActionList/index.js

@@ -13,9 +13,9 @@ import React, { useCallback } from "react";
 import { FlatList } from "react-native";
 import QuickActionButton from "../QuickActionButton";
 const QuickActionList = (_a) => {
-    var { numColumns = 3, data, id } = _a, otherProps = __rest(_a, ["numColumns", "data", "id"]);
+    var { numColumns = 3, data, id, testID } = _a, otherProps = __rest(_a, ["numColumns", "data", "id", "testID"]);
     const renderItem = useCallback(({ item, index }) => {
-        return (React.createElement(QuickActionButton, Object.assign({}, item, { flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: (data === null || data === void 0 ? void 0 : data.length) && index + numColumns < data.length ? 4 : 0 })));
+        return (React.createElement(QuickActionButton, Object.assign({}, item, { flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: (data === null || data === void 0 ? void 0 : data.length) && index + numColumns < data.length ? 4 : 0, testID: testID })));
     }, []);
     return (React.createElement(FlatList, Object.assign({}, otherProps, { data: data, keyExtractor: (_item, index) => `${id}${index}`, horizontal: false, renderItem: renderItem, numColumns: numColumns })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.26.1",
+  "version": "0.27.0-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",