@ledgerhq/native-ui 0.46.0-nightly.0 → 0.46.0-nightly.2

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.d.ts

@@ -5,9 +5,10 @@ export type Props = FlexProps & {
     status: ItemStatus;
     isFirstItem?: boolean;
     isLastItem?: boolean;
+    isNeutral?: boolean;
     topHeight?: number;
 };
-declare function TimelineIndicator({ status, isFirstItem, isLastItem, topHeight, ...props }: Props): React.JSX.Element;
+declare function TimelineIndicator({ status, isFirstItem, isLastItem, isNeutral, topHeight, ...props }: Props): React.JSX.Element;
 declare namespace TimelineIndicator {
     var topSegmentDefaultHeight: number;
 }

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/List/VerticalTimeline/TimelineIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAa,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA2GtC,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG;IAC9B,MAAM,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAwB,iBAAiB,CAAC,EACxC,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,qBAqBP;kBA3BuB,iBAAiB;;;eAAjB,iBAAiB"}
+{"version":3,"file":"TimelineIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/List/VerticalTimeline/TimelineIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAa,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAyHtC,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG;IAC9B,MAAM,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAwB,iBAAiB,CAAC,EACxC,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,qBAqBP;kBA5BuB,iBAAiB;;;eAAjB,iBAAiB"}

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js

@@ -33,8 +33,8 @@ const BottomSegmentSvg = ({ status, hidden }) => {
             React.createElement(Svg, { height: 2 * Dimensions.get("screen").height, width: linesWidth, viewBox: `0 0 ${linesWidth} ${linesLength}`, preserveAspectRatio: "xMinYMin slice" },
                 React.createElement(Line, { key: status + " " + hidden, x1: "0", y1: "0", x2: "0", y2: "100%", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray, strokeDashoffset: `${dashLength}` })))));
 };
-const getIconBackground = (theme, status, isLastItem) => {
-    if (isLastItem) {
+const getIconBackground = (theme, status, isLastItem, isNeutral) => {
+    if (isLastItem && !isNeutral) {
         if (status === "inactive")
             return theme.colors.success.c10;
         return "transparent";
@@ -46,8 +46,8 @@ const getIconBackground = (theme, status, isLastItem) => {
         return "transparent";
     }
 };
-const getIconBorder = (theme, status, isLastItem) => {
-    if (isLastItem) {
+const getIconBorder = (theme, status, isLastItem, isNeutral) => {
+    if (isLastItem && !isNeutral) {
         return theme.colors.success.c70;
     }
     else if (status === "inactive") {
@@ -59,16 +59,16 @@ const CenterCircle = styled(Flex) `
   border-radius: 9999px;
   width: 16px;
   height: 16px;
-  background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};
-  border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};
+  background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem, p.isNeutral)};
+  border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem, p.isNeutral)};
   align-items: center;
   justify-content: center;
 `;
-export default function TimelineIndicator({ status, isFirstItem, isLastItem, topHeight, ...props }) {
+export default function TimelineIndicator({ status, isFirstItem, isLastItem, isNeutral, topHeight, ...props }) {
     const { colors } = useTheme();
     return (React.createElement(Flex, { flexDirection: "column", alignItems: "center", ...props },
         React.createElement(TopSegmentSvg, { status: status, hidden: isFirstItem, height: PixelRatio.roundToNearestPixel(topHeight || topSegmentDefaultHeight) }),
-        React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c70 : colors.primary.c80, size: 20 }))),
+        React.createElement(CenterCircle, { status: status, isLastItem: isLastItem, isNeutral: isNeutral }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem && !isNeutral ? colors.success.c70 : colors.primary.c80, size: 20 }))),
         React.createElement(BottomSegmentSvg, { status: status, hidden: isLastItem })));
 }
 TimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.d.ts

@@ -1,13 +1,18 @@
 import React from "react";
+import { ScrollView } from "react-native";
 import { Item } from "../types";
+export interface TimelineStep extends Item {
+    isNeutral?: boolean;
+}
 export type Props = {
-    item: Item;
+    item: TimelineStep;
     formatEstimatedTime?: (_: number) => string;
     isFirstItem?: boolean;
     isLastItem?: boolean;
     setActiveIndex?: (_: number) => void;
     index: number;
     withExtraMarginOnActiveStep?: boolean;
+    parentScrollRef?: null | React.RefObject<ScrollView>;
 };
-export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, }: Props): React.JSX.Element;
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, parentScrollRef, }: Props): React.JSX.Element;
 //# sourceMappingURL=TimelineItem.d.ts.map

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAE,IAAI,EAAc,MAAM,UAAU,CAAC;AAM5C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC,CAAC;AA+BF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,cAAc,EACd,KAAK,EACL,2BAA2B,GAC5B,EAAE,KAAK,qBAwFP"}
+{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAgC,UAAU,EAAE,MAAM,cAAc,CAAC;AAKxE,OAAO,EAAE,IAAI,EAAc,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,YAAa,SAAQ,IAAI;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,YAAY,CAAC;IACnB,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,eAAe,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;CACtD,CAAC;AAoCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,cAAc,EACd,KAAK,EACL,2BAA2B,EAC3B,eAAsB,GACvB,EAAE,KAAK,qBA2FP"}

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js

@@ -15,11 +15,11 @@ const getContainerBackground = (theme, status) => {
     }
     return "transparent";
 };
-const getContainerBorder = (theme, status, isLastItem) => {
+const getContainerBorder = (theme, status, isLastItem, isNeutral) => {
     if (status === "completed") {
         return "transparent";
     }
-    else if (isLastItem && status === "active") {
+    else if (isLastItem && !isNeutral && status === "active") {
         return theme.colors.success.c70;
     }
     else if (status === "active") {
@@ -31,11 +31,11 @@ const Container = styled(Flex) `
   flex: 1;
   border-radius: ${(p) => p.theme.radii[2]}px;
   background: ${(p) => getContainerBackground(p.theme, p.status)};
-  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
+  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem, p.isNeutral)};
   padding: 20px 16px;
   overflow: hidden;
 `;
-export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, }) {
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, parentScrollRef = null, }) {
     const theme = useTheme();
     /**
      * Having an initial value of null will prevent having "height: 0" before the
@@ -48,7 +48,8 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
     const sharedHeight = useSharedValue(null);
     const handleLayout = useCallback(({ nativeEvent: { layout } }) => {
         sharedHeight.value = withTiming(layout.height, { duration: 300 });
-    }, [sharedHeight]);
+        parentScrollRef?.current?.scrollToEnd({ animated: true });
+    }, [sharedHeight, parentScrollRef]);
     const animatedStyle = useAnimatedStyle(() => ({
         /**
          * If it's null the component still renders normally at its full height
@@ -61,10 +62,10 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
     }, [setActiveIndex, index]);
     return (React.createElement(Pressable, { onPress: handlePress },
         React.createElement(Flex, { flexDirection: "row" },
-            React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4, topHeight: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active"
+            React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, isNeutral: item.isNeutral, mr: 4, topHeight: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active"
                     ? TimelineIndicator.topSegmentDefaultHeight + theme.space[4]
                     : undefined }),
-            React.createElement(Container, { status: item.status, isLastItem: isLastItem, mt: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active" ? 4 : 0, mb: withExtraMarginOnActiveStep && !isLastItem && item.status === "active" ? 4 : 0 },
+            React.createElement(Container, { status: item.status, isLastItem: isLastItem, isNeutral: item.isNeutral, mt: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active" ? 4 : 0, mb: withExtraMarginOnActiveStep && !isLastItem && item.status === "active" ? 4 : 0 },
                 item.status === "active" ? item.background : null,
                 React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
                     React.createElement(Text, { variant: "body", fontWeight: item.status === "active" ? "semiBold" : "medium", flexShrink: 1, color: item.status === "completed" && isLastItem

package/lib/components/Layout/List/VerticalTimeline/index.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { ScrollView, StyleProp, ViewStyle } from "react-native";
+import { TimelineStep } from "./TimelineItem";
 import { BaseTextProps } from "../../../Text";
 import { BaseStyledProps } from "src/components/styled";
-import { Item } from "../types";
 export type Props = BaseStyledProps & {
-    steps?: Item[];
+    steps?: TimelineStep[];
     formatEstimatedTime?: (_: number) => string;
     setActiveIndex?: (arg0: number) => void;
     header?: React.ReactNode;
@@ -14,8 +14,9 @@ export type Props = BaseStyledProps & {
      * */
     autoScroll?: boolean;
     contentContainerStyle?: StyleProp<ViewStyle>;
+    parentScrollRef?: null | React.RefObject<ScrollView>;
 };
-declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, contentContainerStyle, ...props }: Props): React.JSX.Element;
+declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, contentContainerStyle, parentScrollRef, ...props }: Props): React.JSX.Element;
 declare namespace VerticalTimeline {
     var BodyText: React.FC<BaseTextProps>;
     var SubtitleText: React.FC<BaseTextProps>;

package/lib/components/Layout/List/VerticalTimeline/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/List/VerticalTimeline/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAKL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,OAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAc,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,KAAK,GAAG,eAAe,GAAG;IACpC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;SAGK;IACL,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,iBAAwB,gBAAgB,CAAC,EACvC,KAAK,EACL,mBAAmB,EACnB,cAAc,EACd,MAAM,EACN,UAAiB,EACjB,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,qBAsCP;kBA9CuB,gBAAgB;;;;;eAAhB,gBAAgB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/List/VerticalTimeline/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,UAAU,EAGV,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAqB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE5D,OAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,MAAM,KAAK,GAAG,eAAe,GAAG;IACpC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;SAGK;IACL,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAI7C,eAAe,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;CACtD,CAAC;AAEF,iBAAwB,gBAAgB,CAAC,EACvC,KAAK,EACL,mBAAmB,EACnB,cAAc,EACd,MAAM,EACN,UAAiB,EACjB,qBAAqB,EACrB,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,qBAuCP;kBAhDuB,gBAAgB;;;;;eAAhB,gBAAgB"}

package/lib/components/Layout/List/VerticalTimeline/index.js

@@ -4,7 +4,7 @@ import TimelineItem from "./TimelineItem";
 import Flex from "../../Flex";
 import Text from "../../../Text";
 import { ItemStatus } from "../types";
-export default function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true, contentContainerStyle, ...props }) {
+export default function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true, contentContainerStyle, parentScrollRef = null, ...props }) {
     const scrollViewRef = useRef(null);
     const stepsContainerLayout = useRef();
     const onStepsContainerLayout = useCallback((evt) => {
@@ -19,7 +19,7 @@ export default function VerticalTimeline({ steps, formatEstimatedTime, setActive
     return (React.createElement(ScrollView, { ref: scrollViewRef, onLayout: onStepsContainerLayout, contentContainerStyle: contentContainerStyle },
         header,
         React.createElement(Flex, { ...props, onLayout: onStepsContainerLayout, flexDirection: "column" }, steps?.map((step, index) => (React.createElement(View, { onLayout: autoScroll && step.status === "active" ? onActiveStepLayout : undefined },
-            React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))))));
+            React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index, parentScrollRef: parentScrollRef })))))));
 }
 const SubtitleText = (props) => (React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "neutral.c100", mb: 3, ...props }));
 const BodyText = (props) => (React.createElement(Text, { variant: "bodyLineHeight", fontWeight: "medium", color: "neutral.c80", ...props }));

package/lib/pre-ldls/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAC;AAI/C,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyCF,eAAO,MAAM,KAAK;uBAtCE,SAAS,KAAK,WAAW;mCAsE5C,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAwB,SAAS,EAAiC,MAAM,cAAc,CAAC;AAI9F,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyCF,eAAO,MAAM,KAAK;uBAtCE,SAAS,KAAK,WAAW;mCAsE5C,CAAC"}

package/package.json

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