@multiplatform.one/components 7.4.1 → 7.6.0

package/dist/esm/Wizard/index.native.js

@@ -0,0 +1,606 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorSummary, FormSection, focusFieldTarget, focusFirstInvalid, formReadableMaxWidth } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Children, createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Text, View, XStack, YStack, isWeb, useMedia } from "tamagui";
+import { ActionBar } from "../actions/ActionBar.native.js";
+import { Button } from "../Button.native.js";
+import { EmptyState } from "../layouts/EmptyState.native.js";
+import { ProgressSteps } from "../ProgressSteps/index.native.js";
+import { Skeleton } from "../Skeleton/index.native.js";
+import { useTranslation } from "../shared/i18n.native.js";
+import { bidiIsolate, withInterp } from "../shared/t.native.js";
+var WizardContext = /* @__PURE__ */createContext(null);
+function useWizard() {
+  var ctx = useContext(WizardContext);
+  if (!ctx) {
+    throw new Error("useWizard must be used within Wizard");
+  }
+  return ctx;
+}
+function formatReviewValue(value) {
+  if (value == null || value === "") return "\u2014";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return JSON.stringify(value);
+}
+function stepCaption(t, index, steps) {
+  var _ref;
+  var _steps_index;
+  return bidiIsolate(withInterp(t("Step {{current}} of {{total}} \u2014 {{label}}"), {
+    current: index + 1,
+    total: steps.length,
+    label: (_ref = (_steps_index = steps[index]) === null || _steps_index === void 0 ? void 0 : _steps_index.label) !== null && _ref !== void 0 ? _ref : ""
+  }));
+}
+function WizardRule() {
+  return /* @__PURE__ */_jsx(View, {
+    "data-wizard-separator": "",
+    role: "separator",
+    height: 1,
+    backgroundColor: "$borderColor",
+    alignSelf: "stretch",
+    flexGrow: 0,
+    flexShrink: 0
+  });
+}
+var WizardShell = /* @__PURE__ */forwardRef(function WizardShell2(param, ref) {
+  var {
+    compact,
+    children,
+    ...props
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs(compact === void 0 ? void 0 : {
+    compact
+  });
+  return /* @__PURE__ */_jsx(YStack, {
+    ref,
+    "data-wizard-shell": "",
+    backgroundColor: "$color3",
+    ...knobProps.containerRadius,
+    ...knobProps.panelPadding,
+    width: "100%",
+    ...props,
+    borderWidth: 1,
+    borderColor: "$color5",
+    children
+  });
+});
+function WizardSkeleton() {
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */_jsxs(YStack, {
+    ...knobProps.gapLg,
+    width: "100%",
+    "data-wizard-status": "loading",
+    children: [/* @__PURE__ */_jsxs(XStack, {
+      gap: "$3",
+      alignItems: "center",
+      width: "100%",
+      children: [/* @__PURE__ */_jsx(Skeleton, {
+        variant: "circular",
+        width: 32,
+        height: 32
+      }), /* @__PURE__ */_jsx(Skeleton, {
+        variant: "circular",
+        width: 32,
+        height: 32
+      }), /* @__PURE__ */_jsx(Skeleton, {
+        variant: "circular",
+        width: 32,
+        height: 32
+      })]
+    }), /* @__PURE__ */_jsxs(YStack, {
+      ...knobProps.gap,
+      maxWidth: formReadableMaxWidth,
+      width: "100%",
+      children: [/* @__PURE__ */_jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: 44
+      }), /* @__PURE__ */_jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: 44
+      })]
+    })]
+  });
+}
+function WizardPanel(param) {
+  var {
+    children
+  } = param;
+  return /* @__PURE__ */_jsx(YStack, {
+    "data-wizard-panel-body": "",
+    width: "100%",
+    children
+  });
+}
+function WizardClearable(param) {
+  var {
+    names,
+    children
+  } = param;
+  var {
+    repaintGeneration
+  } = useWizard();
+  var key = names.map(function (name) {
+    var _repaintGeneration_name;
+    return `${name}:${(_repaintGeneration_name = repaintGeneration[name]) !== null && _repaintGeneration_name !== void 0 ? _repaintGeneration_name : 0}`;
+  }).join("|");
+  return /* @__PURE__ */_jsx(YStack, {
+    children
+  }, key);
+}
+function WizardReview(param) {
+  var {
+    groups
+  } = param;
+  var _ref;
+  var {
+    steps,
+    getFieldValue,
+    goTo,
+    editLabel,
+    reviewGroups
+  } = useWizard();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var resolved = (_ref = groups !== null && groups !== void 0 ? groups : reviewGroups) !== null && _ref !== void 0 ? _ref : steps.map(function (step, index) {
+    return {
+      step,
+      index
+    };
+  }).filter(function (param2) {
+    var {
+      step
+    } = param2;
+    return !step.review;
+  }).map(function (param2) {
+    var {
+      step,
+      index
+    } = param2;
+    var _step_fields;
+    return {
+      stepIndex: index,
+      label: step.label,
+      rows: ((_step_fields = step.fields) !== null && _step_fields !== void 0 ? _step_fields : []).map(function (name) {
+        var _ref2;
+        var _step_fieldLabels;
+        return {
+          name,
+          label: (_ref2 = (_step_fieldLabels = step.fieldLabels) === null || _step_fieldLabels === void 0 ? void 0 : _step_fieldLabels[name]) !== null && _ref2 !== void 0 ? _ref2 : name,
+          value: formatReviewValue(getFieldValue(name))
+        };
+      })
+    };
+  });
+  return /* @__PURE__ */_jsx(YStack, {
+    "data-wizard-review": "",
+    width: "100%",
+    ...knobProps.gap,
+    children: resolved.map(function (group, groupIndex) {
+      return /* @__PURE__ */_jsxs(YStack, {
+        width: "100%",
+        children: [groupIndex > 0 ? /* @__PURE__ */_jsx(WizardRule, {}) : null, /* @__PURE__ */_jsxs(XStack, {
+          alignItems: "baseline",
+          justifyContent: "space-between",
+          gap: "$3",
+          width: "100%",
+          children: [/* @__PURE__ */_jsx(Text, {
+            ...knobProps.label,
+            ...knobProps.heading,
+            color: "$color12",
+            children: group.label
+          }), /* @__PURE__ */_jsx(Button, {
+            chromeless: true,
+            compact: true,
+            onPress: function onPress() {
+              return goTo(group.stepIndex, {
+                returnToReview: true
+              });
+            },
+            "aria-label": `${editLabel} ${group.label}`,
+            testID: `wizard-edit-${group.stepIndex}`,
+            children: editLabel
+          })]
+        }), /* @__PURE__ */_jsx(YStack, {
+          ...knobProps.gap,
+          width: "100%",
+          children: group.rows.map(function (row) {
+            var _row_value;
+            return /* @__PURE__ */_jsxs(XStack, {
+              gap: "$4",
+              alignItems: "flex-start",
+              width: "100%",
+              children: [/* @__PURE__ */_jsx(Text, {
+                ...knobProps.body,
+                color: "$color10",
+                width: 176,
+                flexShrink: 0,
+                children: row.label
+              }), /* @__PURE__ */_jsx(Text, {
+                ...knobProps.body,
+                color: "$color12",
+                flex: 1,
+                minWidth: 0,
+                children: (_row_value = row.value) !== null && _row_value !== void 0 ? _row_value : "\u2014"
+              })]
+            }, row.name);
+          })
+        })]
+      }, group.label);
+    })
+  });
+}
+function WizardRoot(param) {
+  var {
+    steps,
+    children,
+    current: controlledCurrent,
+    defaultCurrent = 0,
+    onStepChange,
+    onCancel,
+    onComplete,
+    completeLabel,
+    cancelLabel,
+    backLabel,
+    nextLabel,
+    form,
+    validateStep,
+    status = "ready",
+    emptyTitle,
+    emptyDescription,
+    errorTitle,
+    errorDescription,
+    compact,
+    labels = "auto",
+    editLabel,
+    reviewGroups,
+    ...props
+  } = param;
+  var _ref, _ref1;
+  var {
+    t
+  } = useTranslation();
+  var media = useMedia();
+  var {
+    knobProps
+  } = useResolvedKnobs(compact === void 0 ? void 0 : {
+    compact
+  });
+  var reactId = useId();
+  var shellRef = useRef(null);
+  var panelRefs = useRef([]);
+  var [uncontrolled, setUncontrolled] = useState(defaultCurrent);
+  var [maxVisited, setMaxVisited] = useState(defaultCurrent);
+  var [returnTo, setReturnTo] = useState(null);
+  var [stepErrors, setStepErrors] = useState([]);
+  var [completing, setCompleting] = useState(false);
+  var [repaintGeneration, setRepaintGeneration] = useState({});
+  var current = controlledCurrent !== null && controlledCurrent !== void 0 ? controlledCurrent : uncontrolled;
+  var hideLabels = labels === "hidden" || labels !== "visible" && Boolean(media.xs);
+  var lastIndex = Math.max(0, steps.length - 1);
+  var isLast = current >= lastIndex;
+  var currentStep = steps[current];
+  var resolvedCancel = cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : t("Cancel");
+  var resolvedBack = backLabel !== null && backLabel !== void 0 ? backLabel : t("Back");
+  var resolvedEdit = editLabel !== null && editLabel !== void 0 ? editLabel : t("Edit");
+  var panels = Children.toArray(children);
+  var setCurrent = useCallback(function (next) {
+    var clamped = Math.max(0, Math.min(next, lastIndex));
+    setMaxVisited(function (max) {
+      return Math.max(max, clamped);
+    });
+    setStepErrors([]);
+    if (controlledCurrent === void 0) setUncontrolled(clamped);
+    onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(clamped);
+  }, [controlledCurrent, lastIndex, onStepChange]);
+  var goTo = useCallback(function (index, opts) {
+    if (opts === null || opts === void 0 ? void 0 : opts.returnToReview) setReturnTo(lastIndex);
+    setCurrent(index);
+  }, [lastIndex, setCurrent]);
+  var getFieldValue = useCallback(function (name) {
+    var _ref2;
+    var _form_getFieldValue, _form_state_values, _form_state;
+    return (_ref2 = form === null || form === void 0 ? void 0 : (_form_getFieldValue = form.getFieldValue) === null || _form_getFieldValue === void 0 ? void 0 : _form_getFieldValue.call(form, name)) !== null && _ref2 !== void 0 ? _ref2 : form === null || form === void 0 ? void 0 : (_form_state = form.state) === null || _form_state === void 0 ? void 0 : (_form_state_values = _form_state.values) === null || _form_state_values === void 0 ? void 0 : _form_state_values[name];
+  }, [form]);
+  var setFieldValue = useCallback(function (name, value) {
+    var _form_setFieldValue;
+    form === null || form === void 0 ? void 0 : (_form_setFieldValue = form.setFieldValue) === null || _form_setFieldValue === void 0 ? void 0 : _form_setFieldValue.call(form, name, value);
+    setRepaintGeneration(function (prev) {
+      var _prev_name;
+      return {
+        ...prev,
+        [name]: ((_prev_name = prev[name]) !== null && _prev_name !== void 0 ? _prev_name : 0) + 1
+      };
+    });
+  }, [form]);
+  var collectFieldErrors = useCallback(async function (names) {
+    var items = [];
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = names[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var name = _step.value;
+        var _form_validateField, _form_getFieldMeta_errors, _form_getFieldMeta, _form_getFieldMeta1, _currentStep_fieldLabels;
+        var validated = await Promise.resolve(form === null || form === void 0 ? void 0 : (_form_validateField = form.validateField) === null || _form_validateField === void 0 ? void 0 : _form_validateField.call(form, name, "submit"));
+        var fromMeta = form === null || form === void 0 ? void 0 : (_form_getFieldMeta1 = form.getFieldMeta) === null || _form_getFieldMeta1 === void 0 ? void 0 : (_form_getFieldMeta = _form_getFieldMeta1.call(form, name)) === null || _form_getFieldMeta === void 0 ? void 0 : (_form_getFieldMeta_errors = _form_getFieldMeta.errors) === null || _form_getFieldMeta_errors === void 0 ? void 0 : _form_getFieldMeta_errors[0];
+        var raw = fromMeta !== null && fromMeta !== void 0 ? fromMeta : typeof validated === "string" ? validated : void 0;
+        if (raw == null || raw === false || raw === "") continue;
+        items.push({
+          name,
+          id: name,
+          error: typeof raw === "string" ? raw : String(raw),
+          label: currentStep === null || currentStep === void 0 ? void 0 : (_currentStep_fieldLabels = currentStep.fieldLabels) === null || _currentStep_fieldLabels === void 0 ? void 0 : _currentStep_fieldLabels[name]
+        });
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    return items;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.fieldLabels, form]);
+  var runStepValidation = useCallback(async function (index) {
+    var _ref2;
+    var _steps_index;
+    if (validateStep) {
+      var _ref12;
+      var _steps_index1;
+      var ok = await validateStep(index);
+      return ok ? [] : [{
+        name: (_ref12 = (_steps_index1 = steps[index]) === null || _steps_index1 === void 0 ? void 0 : _steps_index1.id) !== null && _ref12 !== void 0 ? _ref12 : String(index),
+        error: t("There is a problem")
+      }];
+    }
+    var names = (_ref2 = (_steps_index = steps[index]) === null || _steps_index === void 0 ? void 0 : _steps_index.fields) !== null && _ref2 !== void 0 ? _ref2 : [];
+    if (names.length === 0) return [];
+    return collectFieldErrors(names);
+  }, [collectFieldErrors, steps, t, validateStep]);
+  var focusFirstStepError = useCallback(function (errors, index) {
+    var _ref2, _panelRefs_current_index, _first_id;
+    if (!isWeb || errors.length === 0) return;
+    var root = (_ref2 = (_panelRefs_current_index = panelRefs.current[index]) !== null && _panelRefs_current_index !== void 0 ? _panelRefs_current_index : shellRef.current) !== null && _ref2 !== void 0 ? _ref2 : typeof document !== "undefined" ? document.body : null;
+    var first = errors[0];
+    var focused = focusFieldTarget(root, {
+      id: (_first_id = first.id) !== null && _first_id !== void 0 ? _first_id : first.name,
+      name: first.name
+    });
+    if (!focused) focusFirstInvalid(root);
+  }, []);
+  var handleNext = useCallback(async function () {
+    var errors = await runStepValidation(current);
+    setStepErrors(errors);
+    if (errors.length > 0) {
+      if (isWeb && typeof window !== "undefined") {
+        window.setTimeout(function () {
+          return focusFirstStepError(errors, current);
+        }, 0);
+      }
+      return;
+    }
+    if (returnTo != null) {
+      var target = returnTo;
+      setReturnTo(null);
+      setCurrent(target);
+      return;
+    }
+    setCurrent(Math.min(current + 1, lastIndex));
+  }, [current, focusFirstStepError, lastIndex, returnTo, runStepValidation, setCurrent]);
+  var handleComplete = useCallback(async function () {
+    var errors = await runStepValidation(current);
+    setStepErrors(errors);
+    if (errors.length > 0) {
+      if (isWeb && typeof window !== "undefined") {
+        window.setTimeout(function () {
+          return focusFirstStepError(errors, current);
+        }, 0);
+      }
+      return;
+    }
+    if (!onComplete) return;
+    setCompleting(true);
+    try {
+      await onComplete();
+    } finally {
+      setCompleting(false);
+    }
+  }, [current, focusFirstStepError, onComplete, runStepValidation]);
+  var handleBack = useCallback(function () {
+    setCurrent(Math.max(0, current - 1));
+  }, [current, setCurrent]);
+  useEffect(function () {
+    var _first_focus;
+    if (!isWeb || knobProps.formAutofocus !== "on" || stepErrors.length > 0) return;
+    var panel = panelRefs.current[current];
+    var first = panel === null || panel === void 0 ? void 0 : panel.querySelector("input:not([disabled]), textarea:not([disabled]), select:not([disabled])");
+    first === null || first === void 0 ? void 0 : (_first_focus = first.focus) === null || _first_focus === void 0 ? void 0 : _first_focus.call(first);
+  }, [current, knobProps.formAutofocus, stepErrors.length]);
+  var ctx = useMemo(function () {
+    return {
+      current,
+      steps,
+      goTo,
+      setFieldValue,
+      getFieldValue,
+      repaintGeneration,
+      editLabel: resolvedEdit,
+      reviewGroups
+    };
+  }, [current, getFieldValue, goTo, repaintGeneration, resolvedEdit, reviewGroups, setFieldValue, steps]);
+  var railSteps = steps.map(function (step, index) {
+    return {
+      id: step.id,
+      label: step.label,
+      description: step.description,
+      optional: step.optional,
+      error: index === current && stepErrors.length > 0,
+      completed: index !== current && index <= maxVisited,
+      disabled: step.disabled || index > maxVisited
+    };
+  });
+  var nextStep = steps[current + 1];
+  var primaryText = isLast ? completeLabel : (_ref = nextLabel === null || nextLabel === void 0 ? void 0 : nextLabel(nextStep)) !== null && _ref !== void 0 ? _ref : withInterp(t("Next: {{label}}"), {
+    label: (_ref1 = nextStep === null || nextStep === void 0 ? void 0 : nextStep.label) !== null && _ref1 !== void 0 ? _ref1 : ""
+  });
+  var hasLeading = Boolean(onCancel) || current > 0;
+  if (status === "loading") {
+    return /* @__PURE__ */_jsx(WizardShell, {
+      compact,
+      ...props,
+      children: /* @__PURE__ */_jsx(WizardSkeleton, {})
+    });
+  }
+  if (status === "empty" || steps.length === 0) {
+    return /* @__PURE__ */_jsx(WizardShell, {
+      compact,
+      "data-wizard-status": "empty",
+      ...props,
+      children: /* @__PURE__ */_jsx(EmptyState, {
+        compact: true,
+        title: emptyTitle !== null && emptyTitle !== void 0 ? emptyTitle : t("No steps"),
+        description: emptyDescription
+      })
+    });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */_jsx(WizardShell, {
+      compact,
+      "data-wizard-status": "error",
+      ...props,
+      children: /* @__PURE__ */_jsx(EmptyState, {
+        compact: true,
+        intent: "error",
+        title: errorTitle !== null && errorTitle !== void 0 ? errorTitle : t("Could not load this flow"),
+        description: errorDescription
+      })
+    });
+  }
+  return /* @__PURE__ */_jsx(WizardContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */_jsxs(WizardShell, {
+      compact,
+      ref: shellRef,
+      "data-wizard-status": "ready",
+      "data-wizard-current": String(current),
+      ...props,
+      children: [/* @__PURE__ */_jsx(YStack, {
+        "data-wizard-rail": "",
+        width: "100%",
+        children: /* @__PURE__ */_jsx(ProgressSteps, {
+          steps: railSteps,
+          current,
+          labels: hideLabels ? "hidden" : "visible",
+          compact,
+          linear: true,
+          onStepChange: function onStepChange2(index) {
+            var _steps_index;
+            if (index <= maxVisited && !((_steps_index = steps[index]) === null || _steps_index === void 0 ? void 0 : _steps_index.disabled)) setCurrent(index);
+          }
+        })
+      }), /* @__PURE__ */_jsx(YStack, {
+        marginTop: knobProps.gap.gap,
+        width: "100%",
+        children: /* @__PURE__ */_jsx(WizardRule, {})
+      }), stepErrors.length > 0 ? /* @__PURE__ */_jsx(YStack, {
+        "data-error-summary": "",
+        backgroundColor: "$red3",
+        ...knobProps.borderRadius,
+        borderWidth: 1,
+        borderColor: "$red9",
+        marginTop: knobProps.gap.gap,
+        width: "100%",
+        children: /* @__PURE__ */_jsx(ErrorSummary, {
+          errors: stepErrors,
+          disableAutoFocus: true,
+          formElement: shellRef.current,
+          title: t("There is a problem")
+        })
+      }) : null, /* @__PURE__ */_jsx(YStack, {
+        marginTop: knobProps.gap.gap,
+        width: "100%",
+        children: steps.map(function (step, index) {
+          var legend = hideLabels ? stepCaption(t, index, steps) : step.label;
+          return /* @__PURE__ */_jsx(YStack, {
+            ref: function ref(node) {
+              panelRefs.current[index] = node;
+            },
+            "data-wizard-panel": "",
+            "data-wizard-fields": "",
+            "data-wizard-step-caption": hideLabels ? "" : void 0,
+            "data-active": index === current ? "true" : "false",
+            "data-step-id": step.id,
+            display: index === current ? "flex" : "none",
+            "aria-hidden": index !== current || void 0,
+            width: "100%",
+            maxWidth: formReadableMaxWidth,
+            alignSelf: "flex-start",
+            ...knobProps.gap,
+            children: /* @__PURE__ */_jsx(FormSection, {
+              label: legend,
+              compact,
+              children: panels[index]
+            })
+          }, step.id || index);
+        })
+      }), /* @__PURE__ */_jsx(YStack, {
+        marginTop: knobProps.gapLg.gap,
+        width: "100%",
+        children: /* @__PURE__ */_jsx(WizardRule, {})
+      }), /* @__PURE__ */_jsx(ActionBar, {
+        id: `${reactId}-footer`,
+        "data-wizard-footer": "",
+        align: hasLeading ? "between" : "end",
+        marginTop: knobProps.gap.gap,
+        cancel: hasLeading ? /* @__PURE__ */_jsxs(XStack, {
+          gap: "$2",
+          flexWrap: "wrap",
+          alignItems: "center",
+          children: [onCancel ? /* @__PURE__ */_jsx(Button, {
+            chromeless: true,
+            onPress: onCancel,
+            testID: "wizard-cancel",
+            children: resolvedCancel
+          }) : null, current > 0 ? /* @__PURE__ */_jsx(Button, {
+            outlined: true,
+            onPress: handleBack,
+            testID: "wizard-back",
+            children: resolvedBack
+          }) : null]
+        }) : void 0,
+        primary: /* @__PURE__ */_jsx(Button, {
+          accent: true,
+          "data-primary": "",
+          loading: completing,
+          onPress: isLast ? handleComplete : handleNext,
+          testID: "wizard-primary",
+          children: primaryText
+        })
+      })]
+    })
+  });
+}
+var Wizard = Object.assign(WizardRoot, {
+  Panel: WizardPanel,
+  Clearable: WizardClearable,
+  Review: WizardReview
+});
+export { Wizard, WizardClearable, WizardPanel, WizardReview, useWizard };
+//# sourceMappingURL=index.native.js.map