@ledgerhq/native-ui 0.6.2 → 0.6.3

package/components/Form/Input/BaseInput/index.d.ts

@@ -71,7 +71,7 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
     flexDirection: string;
     pr: string;
 }, "pr" | "alignItems" | "flexDirection">;
-declare function Input<T = string>(props: InputProps<T>, ref?: React.ForwardedRef<TextInput>): JSX.Element;
+declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**
      * The value of the input.

package/components/Form/Input/BaseInput/index.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useEffect, useImperativeHandle, useRef } from "react";
 import styled, { css } from "styled-components/native";
 import Text from "../../../Text";
 import FlexBox from "../../../Layout/Flex";
@@ -17,7 +17,7 @@ const InputContainer = styled.View `
   display: flex;
   flex-direction: row;
   width: 100%;
-  background: ${(p) => p.theme.colors.neutral.c00};
+  background: ${(p) => p.theme.colors.background.main};
   height: 48px;
   border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
   border-radius: 24px;
@@ -49,6 +49,8 @@ const InputContainer = styled.View `
 `;
 const BaseInput = styled.TextInput.attrs((p) => ({
     selectionColor: p.theme.colors.primary.c80,
+    color: p.theme.colors.neutral.c100,
+    placeholderTextColor: p.theme.colors.neutral.c80,
 })) `
   height: 100%;
   width: 100%;
@@ -77,17 +79,29 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const IDENTITY = (_) => _;
 function Input(props, ref) {
-    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY, containerStyle } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize", "containerStyle"]);
+    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY, containerStyle, autoFocus, onFocus, onBlur } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize", "containerStyle", "autoFocus", "onFocus", "onBlur"]);
+    const inputRef = useRef();
+    useImperativeHandle(ref, () => inputRef.current, [inputRef]);
     const inputValue = useMemo(() => serialize(value), [serialize, value]);
     const handleChange = useCallback((value) => {
         onChange && onChange(deserialize(value));
         onChangeText && onChangeText(value);
     }, [onChange, onChangeText, deserialize]);
+    useEffect(() => {
+        if (autoFocus && inputRef && inputRef.current && inputRef.current.focus)
+            inputRef.current.focus();
+    }, [inputRef, autoFocus]);
     const [focus, setFocus] = React.useState(false);
     return (React.createElement(FlexBox, { width: "100%", style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
         React.createElement(InputContainer, { disabled: disabled, focus: focus, error: error },
             typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
-            React.createElement(BaseInput, Object.assign({ ref: ref }, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: () => setFocus(true), onBlur: () => setFocus(false) })),
+            React.createElement(BaseInput, Object.assign({ ref: inputRef }, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: (e) => {
+                    setFocus(true);
+                    typeof onFocus === "function" && onFocus(e);
+                }, onBlur: (e) => {
+                    setFocus(false);
+                    typeof onBlur === "function" && onBlur(e);
+                } })),
             typeof renderRight === "function" ? renderRight(props) : renderRight),
         !!error && !disabled && React.createElement(InputErrorContainer, null, error)));
 }

package/components/Layout/List/NumberedList/index.js

@@ -15,6 +15,9 @@ import { IconBox } from "../../../Icon";
 import Text from "../../../Text";
 export default function NumberedList(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
-    const numberedItems = useMemo(() => items.map((item, index) => (Object.assign(Object.assign({}, item), { bullet: (React.createElement(IconBox, { Icon: React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100" }, item.number ? item.number : index), boxSize: 36 })) }))), [items]);
+    const numberedItems = useMemo(() => items.map((item, index) => {
+        var _a;
+        return (Object.assign(Object.assign({}, item), { bullet: (React.createElement(IconBox, { Icon: React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100" }, (_a = item.number) !== null && _a !== void 0 ? _a : index + 1), boxSize: 36 })) }));
+    }), [items]);
     return React.createElement(List, Object.assign({ items: numberedItems }, props));
 }

package/components/Navigation/FlowStepper/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props as ProgressBarProps } from "../../ProgressBar";
+import { FlexBoxProps } from "../../Layout/Flex";
 import { TransitionProps } from "../../transitions";
 interface InnerProps {
     /**
@@ -42,7 +42,7 @@ export interface Props<ExtraProps> {
      * Additional props to pass to the progressbar component.
      * This component is a Flex element.
      */
-    progressBarProps?: ProgressBarProps;
+    progressBarProps?: FlexBoxProps;
     /**
      * **Use this prop in combination with `transitionDuration`.**
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",