@ledgerhq/native-ui 0.41.0-nightly.0 → 0.41.0-nightly.1

package/lib/pre-ldls/components/AssetItem/AssetItem.js

@@ -35,7 +35,7 @@ export const AssetItem = ({ name, ticker, id, onClick, leftElement, rightElement
         "colors-surface-transparent-default",
     ]);
     return (React.createElement(Wrapper, { onPress: () => onClick({ name, ticker, id }), style: ({ pressed }) => ({
-            padding: Number(tokens["spacing-xxs"]),
+            paddingVertical: Number(tokens["spacing-xxs"]),
             borderRadius: Number(tokens["radius-s"]),
             backgroundColor: String(tokens["colors-surface-transparent-default"]),
             opacity: pressed ? 0.7 : 1,

package/lib/pre-ldls/components/AssetTypeList/AssetList.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { AssetType } from "../AssetItem/AssetItem";
-export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }: {
+export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, onScrollDown, onScrollUp, scrollToTop, hasNextPage, }: {
     assets: AssetType[];
     onClick: (asset: AssetType) => void;
     onVisibleItemsScrollEnd?: (() => void) | undefined;
+    onScrollDown?: (() => void) | undefined;
+    onScrollUp?: (() => void) | undefined;
     scrollToTop?: boolean | undefined;
     hasNextPage?: boolean | undefined;
 }) => React.JSX.Element;

package/lib/pre-ldls/components/AssetTypeList/AssetList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetTypeList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAK9D,eAAO,MAAM,SAAS;YAOZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;uBA0CrC,CAAC"}
+{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetTypeList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAK9D,eAAO,MAAM,SAAS;YASZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;0BACf,IAAI;wBACN,IAAI;;;uBA+DxB,CAAC"}

package/lib/pre-ldls/components/AssetTypeList/AssetList.js

@@ -3,7 +3,7 @@ import { FlatList } from "react-native";
 import { AssetItem } from "../AssetItem/AssetItem";
 const ITEM_PADDING = 8;
 const ITEM_HEIGHT = 48 + ITEM_PADDING * 2;
-export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
+export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, onScrollDown, onScrollUp, scrollToTop, hasNextPage, }) => {
     const flatListRef = useRef(null);
     const renderAssetItem = useCallback(({ item }) => React.createElement(AssetItem, { ...item, onClick: onClick }), [onClick]);
     const keyExtractor = useCallback((item, index) => `${item.id}-${index}`, []);
@@ -17,6 +17,18 @@ export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTo
             onVisibleItemsScrollEnd();
         }
     }, [hasNextPage, onVisibleItemsScrollEnd]);
+    const handleViewableItemsChanged = useCallback((info) => {
+        if (info.changed.length === 0)
+            return;
+        const isScrollingDown = info.changed[0].index > info.changed[info.changed.length - 1].index;
+        const isScrollingUp = info.changed[0].index < info.changed[info.changed.length - 1].index;
+        if (onScrollDown && isScrollingDown) {
+            onScrollDown();
+        }
+        if (onScrollUp && isScrollingUp) {
+            onScrollUp();
+        }
+    }, [onScrollUp, onScrollDown]);
     const flatListProps = {
         data: assets,
         renderItem: renderAssetItem,
@@ -31,6 +43,7 @@ export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTo
             onEndReached: handleEndReached,
             onEndReachedThreshold: 0.1,
         }),
+        onViewableItemsChanged: handleViewableItemsChanged,
     };
     return React.createElement(FlatList, { ref: flatListRef, ...flatListProps });
 };

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,KAAqB,MAAM,OAAO,CAAC;AAC1C,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;AAkCF,eAAO,MAAM,KAAK;uBA/BE,SAAS,KAAK,WAAW;mCA2C3C,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,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"}

package/lib/pre-ldls/components/Input/Input.js

@@ -1,11 +1,12 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { TextInput, View } from "react-native";
 import styled, { ThemeContext } from "styled-components/native";
 import { useTokens } from "../../libs";
 const Wrapper = styled(View) `
   height: 40px;
   min-width: 328px;
-  padding-horizontal: ${({ tokens }) => tokens["spacing-s"]}px;
+  padding-left: ${({ isFocused, tokens }) => isFocused ? Number(tokens["spacing-s"]) - 2 : Number(tokens["spacing-s"])}px;
+  padding-right: ${({ isFocused, tokens }) => isFocused ? Number(tokens["spacing-s"]) - 2 : Number(tokens["spacing-s"])}px;
   align-items: center;
   flex-direction: row;
   gap: ${({ tokens }) => tokens["spacing-xxs"]}px;
@@ -13,6 +14,8 @@ const Wrapper = styled(View) `
   background-color: ${({ tokens }) => tokens["colors-surface-transparent-subdued-default"]};
   overflow: hidden;
   color: ${({ tokens }) => tokens["colors-content-subdued-default-default"]};
+  border-width: ${({ isFocused }) => (isFocused ? "2px" : "0px")};
+  border-color: ${({ isFocused, tokens }) => isFocused ? tokens["colors-border-active"] : "transparent"};
 `;
 const StyledInput = styled(TextInput) `
   flex: 1;
@@ -26,13 +29,23 @@ const TOKEN_KEYS = [
     "radius-s",
     "colors-surface-transparent-subdued-default",
     "colors-content-subdued-default-default",
+    "colors-border-active",
 ];
-export const Input = React.forwardRef(({ icon: Icon, ...props }, ref) => {
+export const Input = React.forwardRef(({ icon: Icon, onFocus, onBlur, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
     const theme = useContext(ThemeContext);
     const themeType = theme?.colors?.type ?? "light";
     const tokens = useTokens(themeType, [...TOKEN_KEYS]);
-    return (React.createElement(Wrapper, { tokens: tokens },
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+    };
+    return (React.createElement(Wrapper, { tokens: tokens, isFocused: isFocused },
         !!Icon && React.createElement(Icon, { color: String(tokens["colors-content-subdued-default-default"]) }),
-        React.createElement(StyledInput, { ...props, ref: ref, tokens: tokens })));
+        React.createElement(StyledInput, { ...props, ref: ref, tokens: tokens, onFocus: handleFocus, onBlur: handleBlur, placeholderTextColor: String(tokens["colors-content-subdued-default-default"]) })));
 });
 Input.displayName = "Input";

package/lib/pre-ldls/components/NetworkItem/NetworkItem.js

@@ -6,7 +6,7 @@ import Text from "../../../components/Text";
 import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
 const Wrapper = styled(Pressable) `
   flex-direction: row;
-  padding: ${({ tokens }) => tokens["spacing-xxs"]}px;
+  padding-vertical: ${({ tokens }) => tokens["spacing-xxs"]}px;
   border-radius: ${({ tokens }) => tokens["radius-s"]}px;
   align-items: center;
   width: 100%;

package/lib/pre-ldls/components/Search/Search.d.ts

@@ -3,7 +3,8 @@ import { TextInputProps } from "react-native";
 type Props = Readonly<TextInputProps & {
     onDebouncedChange?: (current: string, prev: string) => void;
     debounceTime?: number;
+    onPressIn?: () => void;
 }>;
-export declare function Search({ onDebouncedChange, debounceTime, onChange, ...props }: Props): React.JSX.Element;
+export declare function Search({ onDebouncedChange, debounceTime, onChange, onPressIn, ...props }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=Search.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAkD,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9F,KAAK,KAAK,GAAG,QAAQ,CACnB,cAAc,GAAG;IACf,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,iBAAiB,EAAE,YAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBAyB1F"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAkD,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9F,KAAK,KAAK,GAAG,QAAQ,CACnB,cAAc,GAAG;IACf,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAkB,EAClB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,qBAiCP"}

package/lib/pre-ldls/components/Search/Search.js

@@ -2,7 +2,7 @@ import React, { useMemo, useRef } from "react";
 import { Icons } from "../../../assets";
 import { useDebouncedCallback } from "../../hooks";
 import { Input } from "..";
-export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
+export function Search({ onDebouncedChange, debounceTime = 500, onChange, onPressIn, ...props }) {
     const initialValue = props.value ?? props.defaultValue ?? "";
     const prevValue = useRef(String(initialValue));
     const handleDebouncedChange = useDebouncedCallback(useMemo(() => {
@@ -22,5 +22,5 @@ export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...pro
             handleDebouncedChange?.(current);
         };
     }, [handleDebouncedChange, onChange]);
-    return React.createElement(Input, { ...props, icon: Icons.Search, onChange: handleChange });
+    return (React.createElement(Input, { ...props, style: { height: "100%" }, icon: Icons.Search, onChange: handleChange, onPressIn: onPressIn }));
 }

package/lib/pre-ldls/libs/index.d.ts

@@ -18,9 +18,11 @@ declare const overrideColor: {
         readonly "surface-transparent-pressed": "#0000001A";
         readonly "border-subdued-default-hover": "#D5D5D5";
         readonly "border-subdued-default-pressed": "#C1C1C1";
+        readonly "border-active": "#D4A0FF";
     };
     readonly dark: {
         readonly "opacity-default-10": "#FFFFFF1A";
+        readonly "border-active": "#D4A0FF";
     };
 };
 export type Tokens = Record<string, string | number>;

package/lib/pre-ldls/libs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/libs/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAe,UAAU,EAAW,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGjF,QAAA,MAAM,aAAa;;;;;;;;;;;CAWT,CAAC;AAEX,QAAA,MAAM,aAAa;;;;;;;;;;CAUT,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AACrD,KAAK,UAAU,GACX,UAAU,MAAM,UAAU,EAAE,GAC5B,UAAU,MAAM,OAAO,aAAa,CAAC,KAAK,EAAE,GAC5C,UAAU,MAAM,OAAO,aAAa,CAAC,IAAI,EAAE,CAAC;AAEhD,KAAK,UAAU,GAAG,MAAM,CAAC,YAAY,GAAG,OAAO,aAAa,CAAC,CAAC;AAC9D,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAY9B,eAAO,MAAM,SAAS,WACZ,KAAK,cAAc,MAAM,UAAU,GAAG,UAAU,CAAC,gDA2B1D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/libs/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAe,UAAU,EAAW,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGjF,QAAA,MAAM,aAAa;;;;;;;;;;;CAWT,CAAC;AAEX,QAAA,MAAM,aAAa;;;;;;;;;;;;CAYT,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AACrD,KAAK,UAAU,GACX,UAAU,MAAM,UAAU,EAAE,GAC5B,UAAU,MAAM,OAAO,aAAa,CAAC,KAAK,EAAE,GAC5C,UAAU,MAAM,OAAO,aAAa,CAAC,IAAI,EAAE,CAAC;AAEhD,KAAK,UAAU,GAAG,MAAM,CAAC,YAAY,GAAG,OAAO,aAAa,CAAC,CAAC;AAC9D,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAY9B,eAAO,MAAM,SAAS,WACZ,KAAK,cAAc,MAAM,UAAU,GAAG,UAAU,CAAC,gDA2B1D,CAAC"}

package/lib/pre-ldls/libs/index.js

@@ -19,9 +19,11 @@ const overrideColor = {
         "surface-transparent-pressed": "#0000001A",
         "border-subdued-default-hover": "#D5D5D5",
         "border-subdued-default-pressed": "#C1C1C1",
+        "border-active": "#D4A0FF",
     },
     dark: {
         "opacity-default-10": "#FFFFFF1A",
+        "border-active": "#D4A0FF",
     },
 };
 function pxToNumber(value) {

package/package.json

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