@homefile/components-v2 2.40.28 → 2.40.30

package/dist/components/wizard/ControlledWizard.d.ts

@@ -1,5 +1,4 @@
 import { ControlledWizardI } from '../../interfaces';
-export declare function ControlledWizard({ bodyWidth, step, setStep, steps, height, headerBlink, footerBlink, }: ControlledWizardI): import("react/jsx-runtime").JSX.Element;
-export declare const WizardBodyPadding: ({ children, }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+import { PropsWithChildren } from 'react';
+export declare function ControlledWizard({ bodyWidth, steps, height, headerBlink, footerBlink, ...props }: ControlledWizardI): import("react/jsx-runtime").JSX.Element | null;
+export declare const WizardBodyPadding: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/ControlledWizard.js

@@ -1,9 +1,31 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Stack } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 const MotionBox = motion.create(typeof Box);
-export function ControlledWizard({ bodyWidth = '80%', step, setStep, steps, height = '700px', headerBlink, footerBlink, }) {
-    const current = steps[step];
+export function ControlledWizard(_a) {
+    var _b, _c;
+    var { bodyWidth = '80%', steps, height = '700px', headerBlink, footerBlink } = _a, props = __rest(_a, ["bodyWidth", "steps", "height", "headerBlink", "footerBlink"]);
+    const isKeyed = 'stepKey' in props;
+    const current = isKeyed
+        ? (_b = steps.find((s) => s.key === props.stepKey)) !== null && _b !== void 0 ? _b : steps[0]
+        : steps[props.step];
+    const motionKey = isKeyed ? props.stepKey : (_c = current === null || current === void 0 ? void 0 : current.key) !== null && _c !== void 0 ? _c : String(props.step);
+    const setStep = (n) => {
+        if (!isKeyed)
+            props.setStep(n);
+    };
+    const setStepKey = isKeyed ? props.setStepKey : undefined;
     const headerVariants = {
         initial: { opacity: 0, y: 8, filter: 'blur(6px)' },
         animate: headerBlink
@@ -53,8 +75,10 @@ export function ControlledWizard({ bodyWidth = '80%', step, setStep, steps, heig
             transition: { duration: 0.18 },
         },
     };
-    return (_jsxs(Stack, { shadow: "md", h: height, bg: "white", overflow: "hidden", spacing: "0", children: [_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: headerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, children: current.header }, `h-${step}`) }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: bodyVariants, initial: "initial", animate: "animate", exit: "exit", flex: "1", display: "flex", minH: "0", children: _jsx(Flex, { direction: "column", flex: "auto", overflowY: "auto", minH: "0", children: _jsx(Flex, { justify: "center", h: "full", w: "full", children: _jsx(Box, { w: bodyWidth, children: current.body({ setStep }) }) }) }) }, `b-${step}`) }), current.footer && (_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: footerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, bg: "white", borderTopWidth: "1px", borderColor: "lightBlue.3", children: _jsx(Flex, { justify: "center", py: { base: '4', md: '5' }, children: _jsx(Box, { w: bodyWidth, children: current.footer }) }) }, `f-${step}`) }))] }));
+    if (!current)
+        return null;
+    return (_jsxs(Stack, { shadow: "md", h: height, bg: "white", overflow: "hidden", spacing: "0", children: [_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: headerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, children: current.header }, `h-${motionKey}`) }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: bodyVariants, initial: "initial", animate: "animate", exit: "exit", flex: "1", display: "flex", minH: "0", children: _jsx(Flex, { direction: "column", flex: "auto", overflowY: "auto", minH: "0", children: _jsx(Flex, { justify: "center", h: "full", w: "full", children: _jsx(Box, { w: bodyWidth, children: current.body({ setStep, setStepKey }) }) }) }) }, `b-${motionKey}`) }), current.footer && (_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: footerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, bg: "white", borderTopWidth: "1px", borderColor: "lightBlue.3", children: _jsx(Flex, { justify: "center", py: { base: '4', md: '5' }, children: _jsx(Box, { w: bodyWidth, children: current.footer }) }) }, `f-${motionKey}`) }))] }));
 }
-export const WizardBodyPadding = ({ children, }) => {
+export const WizardBodyPadding = ({ children }) => {
     return _jsx(Box, { py: { base: '4', md: '8' }, children: children });
 };

package/dist/interfaces/wizard/ControlledWizard.interface.d.ts

@@ -1,16 +1,29 @@
 export interface ControlledWizardStepI {
+    key?: string;
     header: React.ReactNode;
-    body: (args: {
+    body: (args?: {
         setStep: (n: number) => void;
+        setStepKey?: (key: string) => void;
     }) => React.ReactNode;
     footer?: React.ReactNode;
 }
-export interface ControlledWizardI {
-    bodyWidth?: string;
+type ControlledWizardLegacyProps = {
     step: number;
     setStep: (n: number) => void;
+    stepKey?: never;
+    setStepKey?: never;
+};
+type ControlledWizardKeyedProps = {
+    step?: never;
+    setStep?: never;
+    stepKey: string;
+    setStepKey: (key: string) => void;
+};
+export type ControlledWizardI = {
+    bodyWidth?: string;
     steps: ControlledWizardStepI[];
     height?: string;
     headerBlink?: boolean;
     footerBlink?: boolean;
-}
+} & (ControlledWizardLegacyProps | ControlledWizardKeyedProps);
+export {};

package/dist/stories/wizard/ControlledWizard.stories.js

@@ -86,7 +86,7 @@ export const ControlledWizardComponent = () => {
             },
             {
                 header: (_jsx(WizardTextHeader, { title: `This is the data we \n found in public records.`, subtitle: "The details linked to your address come from public data sources and may not represent the most up-to-date information about your home." })),
-                body: ({ setStep }) => (_jsx(WizardBodyPadding, { children: _jsx(WizardValueSummaryBody, { title: "The Edmunds", address: "113 South First Street, Austin TX 89853", estimatedValue: 894000, purchasePrice: 456432, assessedValue: 726678, purchasePriceDetails: purchasePriceMock, assessedValueDetails: assessedValueMock }) })),
+                body: (args) => (_jsx(WizardBodyPadding, { children: _jsx(WizardValueSummaryBody, { title: "The Edmunds", address: "113 South First Street, Austin TX 89853", estimatedValue: 894000, purchasePrice: 456432, assessedValue: 726678, purchasePriceDetails: purchasePriceMock, assessedValueDetails: assessedValueMock }) })),
                 footer: (_jsx(WizardValueSummaryFooter, { onAccurate: () => setStep(step + 1), onNotAccurate: () => setStep(step + 1), onComplete: () => setStep(step + 1), accuracyStatus: null })),
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.40.28",
+  "version": "2.40.30",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",