najm-kit 0.0.27 → 0.0.29

package/dist/index.d.ts

@@ -2228,9 +2228,16 @@ interface UseFormSubmissionOptions {
 }
 interface FormSubmissionState {
     formDataRef: React.MutableRefObject<Record<string, any>>;
-    handleStepSubmit: (stepData: any) => Promise<void>;
+    handleStepSubmit: (stepData: any) => Promise<StepSubmitResult>;
     getStepDefaultValues: (stepId: string) => Record<string, any>;
 }
+type StepSubmitResult = {
+    ok: true;
+} | {
+    ok: false;
+    error: any;
+    data: Record<string, any>;
+};
 declare function useFormSubmission({ steps, schema, defaultValues, onSubmit, currentStep, isLastStep, handleNext, markStepCompleted, reset, }: UseFormSubmissionOptions): FormSubmissionState;
 
 interface NTableClassNames {

package/dist/index.mjs

@@ -7709,25 +7709,41 @@ function useFormSubmission({
       if (stepId) {
         formDataRef.current = { ...formDataRef.current, ...stepData };
       }
-      markStepCompleted(currentStep - 1);
       if (!isLastStep) {
+        markStepCompleted(currentStep - 1);
         handleNext();
+        return { ok: true };
       } else {
         const fullData = { ...formDataRef.current };
+        let submitData = fullData;
         if (schema?.parse) {
-          const validated = schema.parse(fullData);
-          await onSubmit(validated);
-        } else {
-          await onSubmit(fullData);
+          const result = schema.safeParse?.(fullData);
+          if (result) {
+            if (!result.success) {
+              return { ok: false, error: result.error, data: fullData };
+            }
+            submitData = result.data;
+          } else {
+            submitData = schema.parse(fullData);
+          }
         }
+        await onSubmit(submitData);
+        markStepCompleted(currentStep - 1);
         reset();
-        formDataRef.current = {};
+        formDataRef.current = defaultValues ?? {};
+        return { ok: true };
       }
     },
-    [steps, currentStep, isLastStep, schema, onSubmit, handleNext, markStepCompleted, reset]
+    [steps, currentStep, isLastStep, schema, onSubmit, handleNext, markStepCompleted, reset, defaultValues]
   );
   return { formDataRef, handleStepSubmit, getStepDefaultValues };
 }
+function issuePath(issue) {
+  return issue.path?.map(String).join(".") ?? "";
+}
+function matchesFieldPath(path, field) {
+  return path === field || path.startsWith(`${field}.`) || field.startsWith(`${path}.`);
+}
 function WizardForm({
   steps,
   schema,
@@ -7765,6 +7781,15 @@ function WizardForm({
   });
   const currentStepConfig = nav.currentStepConfig;
   const stepDefaults = getStepDefaultValues(currentStepConfig.id);
+  const pendingIssuesRef = useRef(null);
+  const getIssueStepIndex = (issue) => {
+    const path = issuePath(issue);
+    if (!path) return nav.currentStep - 1;
+    const stepIndex = steps.findIndex(
+      (step) => step.fields?.some((field) => matchesFieldPath(path, field))
+    );
+    return stepIndex >= 0 ? stepIndex : nav.currentStep - 1;
+  };
   const stepSchema = useMemo(() => {
     if (currentStepConfig.schema) return currentStepConfig.schema;
     if (currentStepConfig.fields && schema?.pick) {
@@ -7781,16 +7806,52 @@ function WizardForm({
     const newDefaults = getStepDefaultValues(currentStepConfig.id);
     form.reset(newDefaults);
   }, [nav.currentStep, currentStepConfig.id]);
+  useEffect(() => {
+    const pending = pendingIssuesRef.current;
+    if (!pending || pending.stepIndex !== nav.currentStep - 1) return;
+    pendingIssuesRef.current = null;
+    pending.issues.forEach((issue, index) => {
+      const name = issuePath(issue) || "root";
+      form.setError(
+        name,
+        { type: "validate", message: issue.message ?? "Invalid value" },
+        { shouldFocus: index === 0 }
+      );
+    });
+  }, [nav.currentStep, currentStepConfig.id, form]);
   const handleSubmit = async (data) => {
     onStepComplete?.(nav.currentStep - 1, data);
-    await handleStepSubmit(data);
+    const result = await handleStepSubmit(data);
+    if (result.ok === true) return;
+    const issues = Array.isArray(result.error?.issues) ? result.error.issues : [];
+    if (issues.length === 0) {
+      throw result.error;
+    }
+    const targetStepIndex = getIssueStepIndex(issues[0]);
+    const targetIssues = issues.filter((issue) => getIssueStepIndex(issue) === targetStepIndex);
+    if (targetStepIndex === nav.currentStep - 1) {
+      pendingIssuesRef.current = { stepIndex: targetStepIndex, issues: targetIssues };
+      const pending = pendingIssuesRef.current;
+      pendingIssuesRef.current = null;
+      pending.issues.forEach((issue, index) => {
+        const name = issuePath(issue) || "root";
+        form.setError(
+          name,
+          { type: "validate", message: issue.message ?? "Invalid value" },
+          { shouldFocus: index === 0 }
+        );
+      });
+      return;
+    }
+    pendingIssuesRef.current = { stepIndex: targetStepIndex, issues: targetIssues };
+    nav.goToStep(targetStepIndex + 1);
   };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-najm-wizard-form": "true",
       "data-najm-dialog-actions": "content",
-      className: cn("flex w-full flex-col gap-4", classNames?.root, className),
+      className: cn("flex min-h-full w-full flex-col gap-4", classNames?.root, className),
       children: [
         showHeader && /* @__PURE__ */ jsx(
           StepsHeader,
@@ -7807,7 +7868,7 @@ function WizardForm({
           {
             id: `step-${currentStepConfig.id}`,
             onSubmit: form.handleSubmit(handleSubmit),
-            className: cn("flex flex-col gap-4", classNames?.step),
+            className: cn("min-h-0 flex-1 overflow-y-auto pb-4 flex flex-col gap-4", classNames?.step),
             autoComplete: "off",
             children: [
               currentStepConfig.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: currentStepConfig.description }),
@@ -7815,7 +7876,7 @@ function WizardForm({
             ]
           }
         ) }) }),
-        showFooter && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", classNames?.footer), children: [
+        showFooter && /* @__PURE__ */ jsxs("div", { className: cn("sticky bottom-0 z-10 mt-auto flex shrink-0 items-center justify-between border-t border-border bg-background/95 pt-3 backdrop-blur", classNames?.footer), children: [
           /* @__PURE__ */ jsx("div", { children: !nav.isFirstStep && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: nav.handlePrevious, children: previousLabel }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             footerSlot,
@@ -7837,8 +7898,8 @@ var handler = {
 };
 useTableStore.use = new Proxy({}, handler);
 var actionButtonClass = (bordered, danger) => cn(
-  "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors",
-  danger ? "hover:bg-red-500/10 hover:text-red-400" : "hover:bg-muted hover:text-foreground",
+  "flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-transparent text-muted-foreground transition-colors",
+  danger ? "hover:border-red-200 hover:bg-red-50 hover:text-red-500" : "hover:border-border hover:bg-muted hover:text-foreground",
   bordered && "border border-muted-foreground"
 );
 function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }) {
@@ -9568,7 +9629,8 @@ function NTable(props) {
     [onRowContextMenu]
   );
   const autoOpenRowMenu = effectiveRowMenu ? handleOpenRowMenu : onRowContextMenu ? handleManualRowMenu : null;
-  const effectiveMenuButton = Boolean(autoOpenRowMenu) && (menuButtonProp ?? true);
+  const shouldCollapseActions = props.columns.length > 5;
+  const effectiveMenuButton = Boolean(autoOpenRowMenu) && (menuButtonProp ?? shouldCollapseActions);
   const store = useStoreSync({
     data: props.data ?? [],
     columns: props.columns ?? [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
   "main": "./dist/index.mjs",