@ledgerhq/react-ui 0.7.3 → 0.7.4

package/components/asorted/Text/styles.js

@@ -57,65 +57,65 @@ export const fontStyles = css `
 `;
 export const textVariantStyle = {
     h1: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     h2: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     h3: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     h4: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     h5: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     large: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     largeLineHeight: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
         lineHeight: 1.7,
     },
     body: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     bodyLineHeight: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
         lineHeight: 1.7,
     },
     paragraph: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     paragraphLineHeight: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
         lineHeight: 1.7,
     },
     small: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     extraSmall: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     tiny: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     micro: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     subtitle: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
         fontWeight: 600,
         "text-transform": "uppercase",
     },

package/components/cta/Button/index.js

@@ -119,7 +119,7 @@ const getVariantColors = (p) => ({
     }
   `,
 });
-export const ButtonUnstyled = styled.button `
+export const ButtonUnstyled = baseStyled.button `
   all: unset;
   cursor: pointer;
 

package/components/form/BaseInput/index.d.ts

@@ -14,6 +14,7 @@ export declare type InputProps<T = ValueType> = Omit<CommonProps, "value" | "onC
     renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
     unwrapped?: boolean;
     containerProps?: InputContainerProps;
+    clearable?: boolean;
     /**
      * A function can be provided to serialize a value of any type to a string.
      *
@@ -56,6 +57,7 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
     alignItems: string;
     pr: string;
 }, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
+export declare const ClearableButtonUnstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 declare function Input<T = ValueType>(props: InputProps<T>, ref?: React.ForwardedRef<HTMLInputElement>): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     value: T;
@@ -76,6 +78,7 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
         as?: string | import("react").ComponentType<any> | undefined;
         forwardedAs?: string | import("react").ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     /**
      * A function can be provided to serialize a value of any type to a string.
      *

package/components/form/BaseInput/index.js

@@ -12,9 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import styled, { css } from "styled-components";
 import { typography } from "styled-system";
 import React, { useState, useMemo, useCallback } from "react";
+import CircledCrossSolidMedium from "@ledgerhq/icons-ui/react/CircledCrossSolidMedium";
 import FlexBox from "../../layout/Flex";
 import Text from "../../asorted/Text";
 import { rgba } from "../../../styles/helpers";
+import { ButtonUnstyled } from "../../cta/Button";
 export const InputContainer = styled.div `
   display: flex;
   height: 48px;
@@ -109,17 +111,23 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     pr: "16px",
 })) ``;
+export const ClearableButtonUnstyled = styled(ButtonUnstyled) `
+  display: flex;
+`;
 // Yes, this is dirty. If you can figure out a better way please change the code :).
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const IDENTITY = (_) => _;
 function Input(props, ref) {
-    const { value, disabled, error, warning, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize"]);
+    const { value, disabled, error, warning, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY, clearable } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize", "clearable"]);
     const [focus, setFocus] = useState(false);
     const inputValue = useMemo(() => serialize(value), [serialize, value]);
     const handleChange = useCallback((e) => {
         onChange && onChange(deserialize(e.target.value));
         onChangeEvent && onChangeEvent(e);
     }, [onChange, onChangeEvent, deserialize]);
+    const handleClear = useCallback(() => {
+        onChange && onChange(deserialize(""));
+    }, [onChange, deserialize]);
     const inner = (React.createElement(React.Fragment, null,
         typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
         React.createElement(BaseInput, Object.assign({ ref: ref }, htmlInputProps, { disabled: disabled, error: error, warning: warning, onChange: handleChange, value: inputValue, onFocus: (event) => {
@@ -129,6 +137,9 @@ function Input(props, ref) {
                 setFocus(false);
                 htmlInputProps.onBlur && htmlInputProps.onBlur(event);
             } })),
+        clearable && inputValue && (React.createElement(FlexBox, { alignItems: "center", mr: 7 },
+            React.createElement(ClearableButtonUnstyled, { onClick: handleClear },
+                React.createElement(CircledCrossSolidMedium, { size: 18, color: "neutral.c50" })))),
         typeof renderRight === "function" ? renderRight(props) : renderRight));
     if (unwrapped) {
         return (React.createElement(FlexBox, { alignItems: "stretch", style: { height: "100%" } }, inner));

package/components/form/LegendInput/index.d.ts

@@ -22,6 +22,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
         as?: string | import("react").ComponentType<any> | undefined;
         forwardedAs?: string | import("react").ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: string) => string) | undefined;
     deserialize?: ((value: string) => string) | undefined;
 } & {

package/components/form/NumberInput/index.d.ts

@@ -19,6 +19,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
         as?: string | import("react").ComponentType<any> | undefined;
         forwardedAs?: string | import("react").ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: number | undefined) => string) | undefined;
     deserialize?: ((value: string) => number | undefined) | undefined;
 } & {

package/components/form/QrCodeInput/index.d.ts

@@ -19,6 +19,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
         as?: string | import("react").ComponentType<any> | undefined;
         forwardedAs?: string | import("react").ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: string) => string) | undefined;
     deserialize?: ((value: string) => string) | undefined;
 } & {

package/components/form/QuantityInput/index.d.ts

@@ -19,6 +19,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
         as?: string | import("react").ComponentType<any> | undefined;
         forwardedAs?: string | import("react").ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: string) => string) | undefined;
     deserialize?: ((value: string) => string) | undefined;
 } & {

package/components/form/SearchInput/index.d.ts

@@ -19,6 +19,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
         as?: string | import("react").ComponentType<any> | undefined;
         forwardedAs?: string | import("react").ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: string) => string) | undefined;
     deserialize?: ((value: string) => string) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",