@ledgerhq/react-ui 0.7.2 → 0.7.3

package/components/cta/Button/index.js

@@ -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/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.2",
+  "version": "0.7.3",
   "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",