@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-DNDJAR2I.mjs

@@ -0,0 +1,38 @@
+// src/hooks/useFormController.ts
+import { useEffect, useReducer, useRef } from "react";
+import {
+  createFormEngine,
+  getFormValidationLabels
+} from "@expcat/tigercat-core";
+function useFormController(options = {}) {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const engineRef = useRef(null);
+  if (engineRef.current === null) {
+    engineRef.current = createFormEngine({
+      initialValues: options.initialValues,
+      undoable: options.undoable,
+      maxHistorySize: options.maxHistorySize,
+      getRules: () => optionsRef.current.rules,
+      getConditions: () => optionsRef.current.conditions,
+      getFieldDependencies: () => optionsRef.current.fieldDependencies,
+      getMessages: () => getFormValidationLabels(optionsRef.current.locale),
+      getValidateDebounce: () => optionsRef.current.validateDebounce ?? 0
+    });
+  }
+  const [, rerender] = useReducer((count) => count + 1, 0);
+  useEffect(() => {
+    const engine = engineRef.current;
+    if (!engine) return void 0;
+    const unsubscribe = engine.subscribe(rerender);
+    return () => {
+      unsubscribe();
+      engine.dispose();
+    };
+  }, []);
+  return engineRef.current;
+}
+
+export {
+  useFormController
+};

package/dist/chunk-E7OUCJ3U.mjs

@@ -0,0 +1,34 @@
+// src/components/Row.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  getRowAlignJustifyVars,
+  getRowClasses,
+  getRowGutterStyleVars
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Row = forwardRef(function Row2({
+  gutter = 0,
+  align = "top",
+  justify = "start",
+  wrap = true,
+  children,
+  className,
+  style,
+  ...divProps
+}, ref) {
+  const rowClasses = useMemo(() => getRowClasses({ wrap, className }), [wrap, className]);
+  const mergedStyle = useMemo(
+    () => ({
+      ...getRowGutterStyleVars(gutter),
+      ...getRowAlignJustifyVars(align, justify),
+      ...style
+    }),
+    [gutter, align, justify, style]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, className: rowClasses, style: mergedStyle, ...divProps, children });
+});
+Row.displayName = "TigerRow";
+
+export {
+  Row
+};

package/dist/{chunk-FLYJVZED.mjs → chunk-ED7QR6PJ.mjs}

@@ -27,9 +27,9 @@ var StatusIcon = ({ path, className, ...svgProps }) => /* @__PURE__ */ jsx(
     )
   }
 );
-var StatusIconWithLoading = ({ path, className, isLoading = false, spinnerClass = "" }) => {
+var StatusIconWithLoading = ({ path, className, isLoading = false, spinnerClass = "", ...svgProps }) => {
   const merged = classNames(className, isLoading && spinnerClass);
-  return /* @__PURE__ */ jsx(StatusIcon, { path, className: merged });
+  return /* @__PURE__ */ jsx(StatusIcon, { path, className: merged, ...svgProps });
 };
 
 export {

package/dist/chunk-EFZDKSTJ.mjs

@@ -0,0 +1,279 @@
+import {
+  Steps
+} from "./chunk-6R66IQ5V.mjs";
+import {
+  useFormContext
+} from "./chunk-6NJMDDL6.mjs";
+import {
+  Icon
+} from "./chunk-WPRXOO6N.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/FormWizard.tsx
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  canClickWizardStep,
+  createAsyncLock,
+  getFormWizardActionsClasses,
+  getFormWizardBodyClasses,
+  getFormWizardHeaderClasses,
+  getFormWizardLabels,
+  getFormWizardWrapperClasses,
+  isLastAvailableStep,
+  mergeTigerLocale,
+  resolveLocaleText,
+  runWizardAdvanceGate,
+  clampStepIndex,
+  findNextUnskippedStep,
+  isStepSkipped
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FormWizard = forwardRef(function FormWizard2({
+  steps = [],
+  current,
+  defaultCurrent = 0,
+  clickable = false,
+  direction = "horizontal",
+  size = "default",
+  simple = false,
+  bordered = true,
+  showSteps = true,
+  showActions = true,
+  prevText,
+  nextText,
+  finishText,
+  locale,
+  labels: labelsOverride,
+  beforeNext,
+  autoSave,
+  onChange,
+  onFinish,
+  renderStep,
+  children,
+  className,
+  style,
+  ...props
+}, ref) {
+  const config = useTigerConfig();
+  const form = useFormContext();
+  const titleId = useId();
+  const liveId = useId();
+  const [errorMessage, setErrorMessage] = useState();
+  const [pending, setPending] = useState(false);
+  const lockRef = useRef(createAsyncLock());
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getFormWizardLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const totalCount = steps.length;
+  const [currentIndex, setIndex] = useControlledState({
+    value: current,
+    defaultValue: defaultCurrent,
+    onChange: (next, prev) => {
+      onChange?.(next, prev ?? next);
+    },
+    postState: (next) => clampStepIndex(next, totalCount)
+  });
+  const currentStep = steps[currentIndex];
+  const isFirst = currentIndex <= 0 || findNextUnskippedStep(currentIndex - 1, -1, steps, currentIndex) === currentIndex;
+  const isLast = isLastAvailableStep(currentIndex, steps);
+  const setCurrent = useCallback(
+    async (next) => {
+      const prev = currentIndex;
+      setIndex(next, prev);
+      if (autoSave && steps[next]) {
+        await autoSave(next, steps[next]);
+      }
+    },
+    [autoSave, currentIndex, setIndex, steps]
+  );
+  const validateAdvance = useCallback(
+    () => runWizardAdvanceGate({
+      currentIndex,
+      currentStep,
+      steps,
+      beforeNext,
+      validateFields: form ? (fields) => form.validateFields(fields) : void 0
+    }),
+    [beforeNext, currentIndex, currentStep, form, steps]
+  );
+  const handlePrev = useCallback(() => {
+    if (currentIndex <= 0) return;
+    const target = findNextUnskippedStep(currentIndex - 1, -1, steps, currentIndex);
+    if (target === currentIndex) return;
+    setErrorMessage(void 0);
+    void setCurrent(target);
+  }, [currentIndex, setCurrent, steps]);
+  const finishAt = useCallback(
+    async (index) => {
+      if (form) {
+        const fields = steps[index]?.fields;
+        const valid = fields?.length ? await form.validateFields(fields) : await form.validate();
+        if (!valid) return;
+        await form.submit();
+      }
+      onFinish?.(index, steps, form?.getValues());
+      if (autoSave && steps[index]) await autoSave(index, steps[index]);
+    },
+    [autoSave, form, onFinish, steps]
+  );
+  const handleNext = useCallback(async () => {
+    if (totalCount === 0) return;
+    await lockRef.current.run(async () => {
+      setPending(true);
+      try {
+        const outcome = await validateAdvance();
+        if (!outcome.ok) {
+          setErrorMessage(outcome.message);
+          return;
+        }
+        setErrorMessage(void 0);
+        if (isLast) {
+          await finishAt(currentIndex);
+          return;
+        }
+        const target = findNextUnskippedStep(currentIndex + 1, 1, steps, currentIndex);
+        if (target === currentIndex) return;
+        await setCurrent(target);
+      } finally {
+        setPending(false);
+      }
+    });
+  }, [currentIndex, finishAt, isLast, setCurrent, steps, totalCount, validateAdvance]);
+  const handleStepChange = useCallback(
+    (nextIndex) => {
+      if (!canClickWizardStep(nextIndex, currentIndex, steps)) return;
+      setErrorMessage(void 0);
+      void setCurrent(nextIndex);
+    },
+    [currentIndex, setCurrent, steps]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      next: () => handleNext(),
+      prev: handlePrev,
+      finish: () => handleNext()
+    }),
+    [handleNext, handlePrev]
+  );
+  const contentNode = useMemo(() => {
+    if (!currentStep) return null;
+    if (renderStep) return renderStep(currentStep, currentIndex);
+    if (typeof children === "function") return children(currentStep, currentIndex);
+    if (children) return children;
+    return currentStep.content ?? null;
+  }, [children, currentIndex, currentStep, renderStep]);
+  const stepItems = useMemo(
+    () => steps.map((step, index) => ({
+      key: step.key ?? index,
+      title: step.title,
+      description: isStepSkipped(step) ? labels.skippedText : step.description,
+      status: step.status,
+      icon: step.icon,
+      disabled: step.disabled || isStepSkipped(step) || clickable && index > currentIndex
+    })),
+    [clickable, currentIndex, labels.skippedText, steps]
+  );
+  if (totalCount === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: getFormWizardWrapperClasses({ bordered, className }),
+        style,
+        "data-tiger-form-wizard": true,
+        role: "group",
+        "aria-label": labels.ariaLabel,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getFormWizardWrapperClasses({ bordered, className }),
+      style,
+      "data-tiger-form-wizard": true,
+      role: "group",
+      "aria-label": labels.ariaLabel,
+      ...props,
+      children: [
+        showSteps ? /* @__PURE__ */ jsx("div", { className: getFormWizardHeaderClasses(bordered), children: /* @__PURE__ */ jsx(
+          Steps,
+          {
+            current: currentIndex,
+            direction,
+            size,
+            simple,
+            clickable,
+            items: stepItems,
+            onChange: handleStepChange
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: getFormWizardBodyClasses(), "aria-labelledby": titleId, children: [
+          /* @__PURE__ */ jsx("div", { id: titleId, className: "sr-only", children: currentStep?.title }),
+          /* @__PURE__ */ jsx("div", { id: liveId, className: "sr-only", "aria-live": "polite", children: currentStep?.title }),
+          errorMessage ? /* @__PURE__ */ jsx("div", { role: "alert", className: "mb-3 w-full text-sm text-[var(--tiger-error,#dc2626)]", children: errorMessage }) : null,
+          contentNode
+        ] }),
+        showActions ? /* @__PURE__ */ jsxs("div", { className: getFormWizardActionsClasses(bordered), role: "group", children: [
+          !isFirst ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              htmlType: "button",
+              variant: "secondary",
+              className: "group",
+              onClick: handlePrev,
+              disabled: pending,
+              size: size === "small" ? "sm" : "md",
+              icon: /* @__PURE__ */ jsx(Icon, { name: "arrow-left", className: "w-3.5 h-3.5" }),
+              children: resolveLocaleText(labels.prevText, prevText)
+            }
+          ) : /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              htmlType: "button",
+              variant: "primary",
+              className: "group",
+              onClick: () => void handleNext(),
+              loading: pending,
+              disabled: pending,
+              size: size === "small" ? "sm" : "md",
+              icon: /* @__PURE__ */ jsx(Icon, { name: isLast ? "check" : "arrow-right", className: "w-3.5 h-3.5" }),
+              iconPosition: isLast ? "start" : "end",
+              children: isLast ? resolveLocaleText(labels.finishText, finishText) : resolveLocaleText(labels.nextText, nextText)
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+});
+FormWizard.displayName = "TigerFormWizard";
+var FormWizard_default = FormWizard;
+
+export {
+  FormWizard,
+  FormWizard_default
+};