@ledgerhq/react-ui 0.7.1 → 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;
 
@@ -157,7 +157,7 @@ export const Base = baseStyled.button.attrs((p) => {
   &:active {
     box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
   }
-  &:focus {
+  &:focus, &:hover {
     box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
   }
 

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/DropdownGeneric/index.d.ts

@@ -26,11 +26,17 @@ export declare type Props = {
      */
     children: React.ReactNode;
     /**
-     * Horizontal position of the dropdown relative to the dropdown button.
+     * Vertical alignment of the dropdown relative to the dropdown button.
      * Will automatically adjust to the document to avoid overflowing.
      * Defaults to "bottom".
      */
     placement?: Placement;
+    /**
+     * Controls whether the dropdown will flip its side to keep it in view
+     * in case there isn't enough space available. See https://floating-ui.com/docs/flip
+     * Defaults to false.
+     */
+    flipDisabled?: boolean;
 };
-declare const DropdownGeneric: ({ label, closeOnClickOutside, closeOnClickInside, disabled, placement, children, }: Props) => JSX.Element;
+declare const DropdownGeneric: ({ label, closeOnClickOutside, closeOnClickInside, disabled, placement, flipDisabled, children, }: Props) => JSX.Element;
 export default DropdownGeneric;

package/components/form/DropdownGeneric/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useFloating, getScrollParents, shift, flip } from "@floating-ui/react-dom";
+import { useFloating, getScrollParents, shift, size, flip } from "@floating-ui/react-dom";
 import styled from "styled-components";
 import { Icons } from "../../../";
 import Flex from "../../layout/Flex";
@@ -15,13 +15,13 @@ const ButtonContainer = styled(Box).attrs({
   > :last-child {
     /* targeting the dropdown icon */
     ${(p) => p.opened && "transform: rotate(180deg);"}
-    margin: 0px ${(p) => p.theme.space[3]}px;
+    margin-left: ${(p) => p.theme.space[3]}px;
   }
 `;
 const DropdownContainer = styled(Flex).attrs(({ theme }) => {
     const isLight = theme.colors.type === "light";
     return {
-        display: "flex",
+        zIndex: 1,
         flexDirection: "column",
         padding: 3,
         border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
@@ -30,11 +30,14 @@ const DropdownContainer = styled(Flex).attrs(({ theme }) => {
         color: theme.colors.neutral.c80,
     };
 }) `
+  overflow-y: auto;
   box-shadow: 0px 6px 12px rgba(0, 0, 0, ${(p) => (p.theme.colors.type === "light" ? 0.04 : 0.08)});
 `;
 export const placements = ["bottom-start", "bottom", "bottom-end"];
-const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside = false, disabled = false, placement = "bottom", children, }) => {
+const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside = false, disabled = false, placement = "bottom", flipDisabled = false, children, }) => {
     const divRef = useRef(null);
+    const [maxHeight, setMaxHeight] = useState();
+    const [maxWidth, setMaxWidth] = useState();
     const [opened, setOpened] = useState(false);
     const handleClickButton = useCallback(() => {
         if (!disabled)
@@ -46,7 +49,17 @@ const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside
     }, [setOpened, closeOnClickInside]);
     const { x, y, reference, floating, strategy, update, refs } = useFloating({
         placement: placements.includes(placement) ? placement : "bottom",
-        middleware: [shift(), flip()],
+        middleware: [
+            shift(),
+            ...(flipDisabled ? [] : [flip()]),
+            size({
+                padding: 6,
+                apply({ height, width }) {
+                    setMaxHeight(height);
+                    setMaxWidth(width);
+                },
+            }),
+        ],
     });
     const handleResizeOrScroll = useCallback(() => {
         if (opened && !disabled)
@@ -70,7 +83,7 @@ const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside
                 parent.removeEventListener("resize", handleResizeOrScroll);
             });
         };
-    }, [opened, disabled, refs.reference, refs.floating, handleResizeOrScroll]);
+    }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);
     useEffect(() => {
         function handleClickOutside(event) {
             if (closeOnClickOutside &&
@@ -86,10 +99,17 @@ const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside
         };
     }, [closeOnClickOutside, opened, setOpened, divRef]);
     const color = disabled ? "neutral.c50" : "neutral.c100";
-    return (React.createElement("div", { ref: divRef },
+    return (React.createElement(Box, { ref: divRef },
         React.createElement(ButtonContainer, { ref: reference, onClick: handleClickButton, disabled: disabled, opened: opened && !disabled },
             React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: color }, label),
             React.createElement(Icons.DropdownMedium, { size: 20, color: color })),
-        opened && !disabled && (React.createElement(DropdownContainer, { ref: floating, style: { overflow: "visible", position: strategy, top: y !== null && y !== void 0 ? y : "", left: x !== null && x !== void 0 ? x : "" }, onClick: handleClickInside }, children))));
+        opened && !disabled && (React.createElement(DropdownContainer, { ref: floating, style: {
+                position: strategy,
+                top: y !== null && y !== void 0 ? y : "",
+                left: x !== null && x !== void 0 ? x : "",
+                maxHeight: maxHeight ? `${maxHeight}px` : "",
+                maxWidth: maxWidth ? "" : "",
+                // maxWidth: maxWidth ? `${maxWidth}px` : "", /* TODO: fix this */
+            }, onClick: handleClickInside }, children))));
 };
 export default DropdownGeneric;

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/components/navigation/FlowStepper/index.d.ts

@@ -2,14 +2,22 @@ import React from "react";
 import { Props as StepperProps } from "../progress/Stepper";
 import { FlexBoxProps as FlexProps } from "../../layout/Flex";
 export declare type StepProps = {
-    /**
-     * The label of the step.
-     */
-    label: string;
     /**
      * A specific index, can be used to explicitely order steps.
      */
     index?: number;
+    /**
+     * Custom header for this step.
+     */
+    header?: React.ReactNode;
+    /**
+     * Custom footer for this step.
+     */
+    footer?: React.ReactNode;
+    /**
+     * The label of the step.
+     */
+    label: string;
     /**
      * Hides the step from the progress stepper.
      */
@@ -29,19 +37,34 @@ interface InnerProps {
      */
     stepsLength: number;
 }
+declare type StepChild = React.ReactElement<StepProps>;
+declare type SectionRenderFunc<ExtraProps> = (props: InnerProps & ExtraProps) => React.ReactNode;
+declare type SectionStepRenderFunc<ExtraProps> = (args: InnerProps & ExtraProps & {
+    children: React.ReactNode;
+}) => React.ReactNode;
 export interface Props<ExtraProps> {
     /**
      * The index of the active step.
      */
     activeIndex: number;
     /**
-     * An optional header displayed above the stepper.
+     * An optional generic header displayed above the stepper.
+     */
+    header?: SectionRenderFunc<ExtraProps>;
+    /**
+     * Custom rendering function to wrap the header (only used if the `header` is defined
+     * on the child for the current step.)
+     */
+    renderStepHeader?: SectionStepRenderFunc<ExtraProps>;
+    /**
+     * An optional generic footer displayed below the body.
      */
-    header?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    footer?: SectionRenderFunc<ExtraProps>;
     /**
-     * An optional footer displayed below the body.
+     * Custom rendering function to wrap the footer (only used if the `footer` is defined
+     * on the child for the current step.)
      */
-    footer?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    renderStepFooter?: SectionStepRenderFunc<ExtraProps>;
     /**
      * Extra props that are passed to the header and footer render functions.
      */
@@ -61,17 +84,53 @@ export interface Props<ExtraProps> {
     /**
      * Custom rendering function to wrap children.
      */
-    renderChildren?: (args: {
+    renderChildren?: (args: InnerProps & ExtraProps & {
         children: React.ReactNode;
     }) => React.ReactNode;
-    /**
     /**
      * A list of children representing each step of the flow.
+     * Each child can have a prop `stepHeader` and/or `stepFooter` that will
+     * associate a custom header/footer to this particular step.
+     * The custom header/footer can be wrapped using the prop renderStepHeader/renderStepFooter.
      */
-    children: React.ReactElement<StepProps> | React.ReactElement<StepProps>[];
+    children: StepChild | StepChild[];
 }
-declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
+declare function FlowStepper<ExtraProps>({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
 declare namespace FlowStepper {
     var Step: ({ children }: StepProps) => JSX.Element;
+    var Indexed: typeof FlowStepperIndexed;
 }
 export default FlowStepper;
+export declare type IndexedStepProps = StepProps & {
+    /**
+     * String to identify the step. Must be different from sibling steps's `key` prop.
+     */
+    itemKey: string;
+};
+declare type IndexedStepperChild = React.ReactElement<IndexedStepProps>;
+export declare type IndexedProps<ExtraProps> = Omit<Props<ExtraProps>, "activeIndex" | "children"> & {
+    /**
+     * The key of the active step
+     */
+    activeKey: string;
+    /**
+     * A list of children representing each step of the flow.
+     */
+    children: IndexedStepperChild | IndexedStepperChild[];
+};
+/**
+ * This is a FlowStepper where each child must have an `itemKey: string` prop
+ * and the active step is defined by the `activeKey: string` prop.
+ *
+ * This allows for usages with a lot of steps where dealing with indices could be
+ * painful and error prone (for instance inserting/removing a step somewhere would shift
+ * the indices of the following steps and navigation would be impacted).
+ *
+ * By using string identifiers (`itemKey`) for each step, it's more "human readable"
+ * and less error prone to setup a navigation logic between steps.
+ */
+declare function FlowStepperIndexed<ExtraProps>(props: IndexedProps<ExtraProps>): JSX.Element;
+declare namespace FlowStepperIndexed {
+    var Step: typeof IndexedStep;
+}
+declare function IndexedStep({ children }: IndexedStepProps): JSX.Element;

package/components/navigation/FlowStepper/index.js

@@ -1,35 +1,84 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from "react";
 import { isElement } from "react-is";
 import Flex from "../../layout/Flex";
 import { Stepper } from "..";
-function FlowStepper({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }) {
-    const { steps, innerContents } = React.Children.toArray(children).reduce((acc, child, idx) => {
+function FlowStepper({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }) {
+    const { steps, innerContents, stepFooter, stepHeader } = React.Children.toArray(children).reduce((acc, child, idx) => {
         var _a;
         const index = (_a = (isElement(child) && child.props.index)) !== null && _a !== void 0 ? _a : idx;
         const label = isElement(child) && child.props.label;
         const hidden = isElement(child) && child.props.hidden;
+        const stepHeader = isElement(child) && child.props.header;
+        const stepFooter = isElement(child) && child.props.footer;
         if (label && !hidden) {
             acc.steps[index] = label;
         }
         if (index === activeIndex) {
             acc.innerContents = child;
+            acc.stepFooter = stepFooter;
+            acc.stepHeader = stepHeader;
         }
         return acc;
     }, {
         steps: [],
         innerContents: null,
+        stepHeader: null,
+        stepFooter: null,
     });
+    const renderArgs = Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length });
+    function getSectionContents(renderFunc, stepSection, renderStepFunc) {
+        return stepSection
+            ? renderStepFunc
+                ? renderStepFunc(Object.assign(Object.assign({}, renderArgs), { children: stepSection }))
+                : stepSection
+            : renderFunc && renderFunc(renderArgs);
+    }
     return (React.createElement(Flex, Object.assign({ flex: 1, flexDirection: "column" }, extraContainerProps),
-        header &&
-            header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length })),
+        getSectionContents(header, stepHeader, renderStepHeader),
         React.createElement(Flex, Object.assign({ my: 8, justifyContent: "center" }, extraStepperContainerProps),
             React.createElement(Stepper, Object.assign({ activeIndex: activeIndex, steps: steps, flex: 1 }, extraStepperProps))),
-        React.createElement(Flex, { flex: 1, flexDirection: "column", position: "relative" }, renderChildren ? renderChildren({ children: innerContents }) : innerContents),
-        footer &&
-            footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length }))));
+        React.createElement(Flex, { flex: 1, flexDirection: "column", position: "relative" }, renderChildren
+            ? renderChildren(Object.assign(Object.assign({}, renderArgs), { children: innerContents }))
+            : innerContents),
+        getSectionContents(footer, stepFooter, renderStepFooter)));
 }
 function Step({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
 FlowStepper.Step = Step;
 export default FlowStepper;
+/**
+ * This is a FlowStepper where each child must have an `itemKey: string` prop
+ * and the active step is defined by the `activeKey: string` prop.
+ *
+ * This allows for usages with a lot of steps where dealing with indices could be
+ * painful and error prone (for instance inserting/removing a step somewhere would shift
+ * the indices of the following steps and navigation would be impacted).
+ *
+ * By using string identifiers (`itemKey`) for each step, it's more "human readable"
+ * and less error prone to setup a navigation logic between steps.
+ */
+function FlowStepperIndexed(props) {
+    const { activeKey, children } = props, otherProps = __rest(props, ["activeKey", "children"]);
+    const activeIndex = React.Children.toArray(children).findIndex((child) => {
+        const res = isElement(child) && child.props.itemKey === activeKey;
+        return res;
+    });
+    return (React.createElement(FlowStepper, Object.assign({}, otherProps, { activeIndex: activeIndex }), children));
+}
+function IndexedStep({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+FlowStepperIndexed.Step = IndexedStep;
+FlowStepper.Indexed = FlowStepperIndexed;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.7.1",
+  "version": "0.7.4",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -28,7 +28,7 @@
   ],
   "dependencies": {
     "@floating-ui/react-dom": "^0.4.0",
-    "@ledgerhq/icons-ui": "^0.2.2",
+    "@ledgerhq/icons-ui": "^0.2.3",
     "@ledgerhq/ui-shared": "^0.1.5",
     "@tippyjs/react": "^4.2.6",
     "@types/color": "^3.0.2",