@gearbox-protocol/ui-kit 4.0.0-next.8 → 4.0.0-next.9

package/dist/cjs/components/composites/tx-preview/confirm/dialog/TransactionConfirmShell.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../client-adapters/styled-dialog-container/styled-dialog-container.cjs"),w=require("../../../../confirm-menu/confirm-menu.cjs"),S=require("../../../../error-message/error-line-message.cjs");require("react-intl");require("../../../../buttons/button/button.cjs");require("../../../../dialog/dialog-container.cjs");const h=require("../../../../typed-intl/index.cjs");require("react");require("@gearbox-protocol/sdk");const q=require("../../../../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../../../../utils/z-index.cjs");const C=require("../../../../modal/modal.cjs"),T=require("../../../../skeleton/skeleton-stack.cjs"),k=require("../../../../spinner/spinner.cjs"),P=require("../../../../typography/typography.cjs"),f=require("../../../../vspace/vspace.cjs"),y=require("../stepper/ProgressStepper.cjs"),M=require("../stepper/transactionExecutionStepTypes.cjs"),D=require("./computeTransactionConfirmDialogLayout.cjs"),t=require("./constants.cjs");function N(n){const{mode:r,open:u=!0,phase:d="confirm",onClose:l,title:i,titleAddon:m,hideTitleAddonOnResult:s=!0,body:o,className:a,previewClassName:c,"data-testid":_,shellTestId:g}=n;if(r==="dialog"&&!u)return null;const p=o.kind==="ready"?d:"confirm",v=p!=="confirm"&&p!=="awaiting_receipt"&&s?void 0:m,x=e.jsx(j.StyledDialogContainer,{className:q.cn(t.transactionConfirmDialogShellVariants(),r==="dialog"?t.transactionConfirmModalContainerVariants():null,a),"data-testid":_,children:e.jsx(L,{body:o,phase:p,previewClassName:c,testId:g??t.TransactionConfirmDialogTest.root,header:e.jsx(w.ConfirmMenu,{title:i,titleAddon:v,onClose:l})})});return r==="page"?x:e.jsx(C.Modal,{show:!0,onClickOutside:l,zIndexLayer:"MODAL",children:x})}function L({body:n,phase:r,previewClassName:u,testId:d,header:l}){const i=n.kind==="ready"?n.stepper:void 0,m=!!(i&&M.shouldShowTransactionProgressStepper(i.steps)),s=D.computeTransactionConfirmDialogLayout(r,m),o=n.kind==="ready"?V(n,r):void 0,a=n.kind==="ready"?n.execution:void 0;return e.jsxs("div",{className:t.transactionConfirmShellContentVariants(),"data-testid":d,children:[e.jsx("div",{className:"shrink-0",children:l}),e.jsx(f.VSpace,{size:"sm"}),s.showResult&&o?e.jsx("div",{className:"flex min-h-0 flex-1 flex-col","data-testid":t.TransactionConfirmDialogTest.result,children:o}):null,s.showResult?null:e.jsxs("div",{className:"flex min-h-0 flex-1 flex-col",children:[s.showPreview?e.jsx("div",{className:u??t.transactionConfirmPreviewScrollVariants(),children:e.jsx(I,{body:n})}):null,s.showPreview&&s.showExecution&&a?e.jsx(f.VSpace,{size:"md"}):null,s.showExecution&&a?e.jsx("div",{className:"min-w-0 w-full shrink-0","data-testid":t.TransactionConfirmDialogTest.execution,children:a}):null]}),s.showProgressStepper&&i?e.jsxs(e.Fragment,{children:[e.jsx(f.VSpace,{size:"md"}),e.jsx("div",{className:"shrink-0","data-testid":t.TransactionConfirmDialogTest.progress,children:e.jsx(y.ProgressStepper,{tone:"muted",steps:i.steps.map(c=>({id:c.id,status:c.status,label:i.renderLabel(c)}))})})]}):null]})}function I({body:n}){const r=h.useIntlTyped();return n.kind==="loading"?e.jsxs("div",{className:"flex flex-col items-center justify-center gap-3 py-8",children:[e.jsx(k.Spinner,{}),e.jsx(P.Typography,{variant:"bodySmall",color:"muted",as:"p",children:e.jsx(h.FormattedMessageTyped,{messageId:"components.transactionConfirm.previewLoading"})})]}):n.kind==="error"?e.jsx(S.ErrorLineMessage,{err:n.error,title:n.title??r.formatMessage({messageId:"components.transactionConfirm.previewErrorTitle"})}):n.previewLoading?e.jsx(T.SkeletonStack,{lines:3}):e.jsx(e.Fragment,{children:n.preview})}function V(n,r){if(n.result){if(r==="success")return n.result.success;if(r==="failure")return n.result.failure}}exports.TransactionConfirmShell=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../client-adapters/styled-dialog-container/styled-dialog-container.cjs"),C=require("../../../../confirm-menu/confirm-menu.cjs"),q=require("../../../../error-message/error-line-message.cjs");require("react-intl");require("../../../../buttons/button/button.cjs");require("../../../../dialog/dialog-container.cjs");const x=require("../../../../typed-intl/index.cjs");require("react");require("@gearbox-protocol/sdk");const w=require("../../../../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../../../../utils/z-index.cjs");const S=require("../../../../modal/modal.cjs"),T=require("../../../../skeleton/skeleton-stack.cjs"),k=require("../../../../spinner/spinner.cjs"),y=require("../../../../typography/typography.cjs"),p=require("../../../../vspace/vspace.cjs"),P=require("../stepper/ProgressStepper.cjs"),M=require("./computeTransactionConfirmDialogLayout.cjs"),t=require("./constants.cjs");function D(n){const{mode:r,open:c=!0,phase:u="confirm",onClose:l,title:i,titleAddon:d,hideTitleAddonOnResult:s=!0,body:o,className:a,previewClassName:g,"data-testid":h,shellTestId:_}=n;if(r==="dialog"&&!c)return null;const m=o.kind==="ready"?u:"confirm",v=m!=="confirm"&&m!=="awaiting_receipt"&&s?void 0:d,f=e.jsx(j.StyledDialogContainer,{className:w.cn(t.transactionConfirmDialogShellVariants(),r==="dialog"?t.transactionConfirmModalContainerVariants():null,a),"data-testid":h,children:e.jsx(N,{body:o,phase:m,previewClassName:g,testId:_??t.TransactionConfirmDialogTest.root,header:e.jsx(C.ConfirmMenu,{title:i,titleAddon:v,onClose:l})})});return r==="page"?f:e.jsx(S.Modal,{show:!0,onClickOutside:l,zIndexLayer:"MODAL",children:f})}function N({body:n,phase:r,previewClassName:c,testId:u,header:l}){const i=n.kind==="ready"?n.stepper:void 0,d=!!(i&&i.length>0),s=M.computeTransactionConfirmDialogLayout(r,d),o=n.kind==="ready"?L(n,r):void 0,a=n.kind==="ready"?n.execution:void 0;return e.jsxs("div",{className:t.transactionConfirmShellContentVariants(),"data-testid":u,children:[e.jsx("div",{className:"shrink-0",children:l}),e.jsx(p.VSpace,{size:"sm"}),s.showResult&&o?e.jsx("div",{className:"flex min-h-0 flex-1 flex-col","data-testid":t.TransactionConfirmDialogTest.result,children:o}):null,s.showResult?null:e.jsxs("div",{className:"flex min-h-0 flex-1 flex-col",children:[s.showPreview?e.jsx("div",{className:c??t.transactionConfirmPreviewScrollVariants(),children:e.jsx(I,{body:n})}):null,s.showPreview&&s.showExecution&&a?e.jsx(p.VSpace,{size:"md"}):null,s.showExecution&&a?e.jsx("div",{className:"min-w-0 w-full shrink-0","data-testid":t.TransactionConfirmDialogTest.execution,children:a}):null]}),s.showProgressStepper&&i?e.jsxs(e.Fragment,{children:[e.jsx(p.VSpace,{size:"md"}),e.jsx("div",{className:"shrink-0","data-testid":t.TransactionConfirmDialogTest.progress,children:e.jsx(P.ProgressStepper,{tone:"muted",steps:i})})]}):null]})}function I({body:n}){const r=x.useIntlTyped();return n.kind==="loading"?e.jsxs("div",{className:"flex flex-col items-center justify-center gap-3 py-8",children:[e.jsx(k.Spinner,{}),e.jsx(y.Typography,{variant:"bodySmall",color:"muted",as:"p",children:e.jsx(x.FormattedMessageTyped,{messageId:"components.transactionConfirm.previewLoading"})})]}):n.kind==="error"?e.jsx(q.ErrorLineMessage,{err:n.error,title:n.title??r.formatMessage({messageId:"components.transactionConfirm.previewErrorTitle"})}):n.previewLoading?e.jsx(T.SkeletonStack,{lines:3}):e.jsx(e.Fragment,{children:n.preview})}function L(n,r){if(n.result){if(r==="success")return n.result.success;if(r==="failure")return n.result.failure}}exports.TransactionConfirmShell=D;

package/dist/esm/components/composites/tx-preview/confirm/dialog/TransactionConfirmShell.js

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as m, Fragment as g } from "react/jsx-runtime";
+import { jsx as r, jsxs as l, Fragment as v } from "react/jsx-runtime";
 import { StyledDialogContainer as S } from "../../../../client-adapters/styled-dialog-container/styled-dialog-container.js";
 import { ConfirmMenu as k } from "../../../../confirm-menu/confirm-menu.js";
 import { ErrorLineMessage as T } from "../../../../error-message/error-line-message.js";
@@ -13,121 +13,110 @@ import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../../../utils/z-index.js";
-import { Modal as L } from "../../../../modal/modal.js";
-import { SkeletonStack as M } from "../../../../skeleton/skeleton-stack.js";
+import { Modal as M } from "../../../../modal/modal.js";
+import { SkeletonStack as L } from "../../../../skeleton/skeleton-stack.js";
 import { Spinner as A } from "../../../../spinner/spinner.js";
 import { Typography as D } from "../../../../typography/typography.js";
-import { VSpace as h } from "../../../../vspace/vspace.js";
+import { VSpace as f } from "../../../../vspace/vspace.js";
 import { ProgressStepper as V } from "../stepper/ProgressStepper.js";
-import { shouldShowTransactionProgressStepper as z } from "../stepper/transactionExecutionStepTypes.js";
-import { computeTransactionConfirmDialogLayout as E } from "./computeTransactionConfirmDialogLayout.js";
-import { TransactionConfirmDialogTest as d, transactionConfirmModalContainerVariants as R, transactionConfirmDialogShellVariants as j, transactionConfirmShellContentVariants as y, transactionConfirmPreviewScrollVariants as O } from "./constants.js";
-function ce(e) {
+import { computeTransactionConfirmDialogLayout as z } from "./computeTransactionConfirmDialogLayout.js";
+import { TransactionConfirmDialogTest as m, transactionConfirmModalContainerVariants as E, transactionConfirmDialogShellVariants as R, transactionConfirmShellContentVariants as j, transactionConfirmPreviewScrollVariants as y } from "./constants.js";
+function me(e) {
   const {
     mode: t,
     open: c = !0,
-    phase: p = "confirm",
-    onClose: l,
+    phase: d = "confirm",
+    onClose: a,
     title: n,
-    titleAddon: u,
+    titleAddon: p,
     hideTitleAddonOnResult: i = !0,
     body: o,
     className: s,
-    previewClassName: a,
+    previewClassName: g,
     "data-testid": w,
     shellTestId: x
   } = e;
   if (t === "dialog" && !c) return null;
-  const f = o.kind === "ready" ? p : "confirm", C = f !== "confirm" && f !== "awaiting_receipt" && i ? void 0 : u, v = /* @__PURE__ */ r(
+  const u = o.kind === "ready" ? d : "confirm", C = u !== "confirm" && u !== "awaiting_receipt" && i ? void 0 : p, h = /* @__PURE__ */ r(
     S,
     {
       className: I(
-        j(),
-        t === "dialog" ? R() : null,
+        R(),
+        t === "dialog" ? E() : null,
         s
       ),
       "data-testid": w,
       children: /* @__PURE__ */ r(
-        F,
+        O,
         {
           body: o,
-          phase: f,
-          previewClassName: a,
-          testId: x ?? d.root,
+          phase: u,
+          previewClassName: g,
+          testId: x ?? m.root,
           header: /* @__PURE__ */ r(
             k,
             {
               title: n,
               titleAddon: C,
-              onClose: l
+              onClose: a
             }
           )
         }
       )
     }
   );
-  return t === "page" ? v : /* @__PURE__ */ r(L, { show: !0, onClickOutside: l, zIndexLayer: "MODAL", children: v });
+  return t === "page" ? h : /* @__PURE__ */ r(M, { show: !0, onClickOutside: a, zIndexLayer: "MODAL", children: h });
 }
-function F({
+function O({
   body: e,
   phase: t,
   previewClassName: c,
-  testId: p,
-  header: l
+  testId: d,
+  header: a
 }) {
-  const n = e.kind === "ready" ? e.stepper : void 0, u = !!(n && z(n.steps)), i = E(t, u), o = e.kind === "ready" ? _(e, t) : void 0, s = e.kind === "ready" ? e.execution : void 0;
-  return /* @__PURE__ */ m(
+  const n = e.kind === "ready" ? e.stepper : void 0, p = !!(n && n.length > 0), i = z(t, p), o = e.kind === "ready" ? B(e, t) : void 0, s = e.kind === "ready" ? e.execution : void 0;
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: y(),
-      "data-testid": p,
+      className: j(),
+      "data-testid": d,
       children: [
-        /* @__PURE__ */ r("div", { className: "shrink-0", children: l }),
-        /* @__PURE__ */ r(h, { size: "sm" }),
+        /* @__PURE__ */ r("div", { className: "shrink-0", children: a }),
+        /* @__PURE__ */ r(f, { size: "sm" }),
         i.showResult && o ? /* @__PURE__ */ r(
           "div",
           {
             className: "flex min-h-0 flex-1 flex-col",
-            "data-testid": d.result,
+            "data-testid": m.result,
             children: o
           }
         ) : null,
-        i.showResult ? null : /* @__PURE__ */ m("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+        i.showResult ? null : /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col", children: [
           i.showPreview ? /* @__PURE__ */ r(
             "div",
             {
-              className: c ?? O(),
-              children: /* @__PURE__ */ r(B, { body: e })
+              className: c ?? y(),
+              children: /* @__PURE__ */ r(F, { body: e })
             }
           ) : null,
-          i.showPreview && i.showExecution && s ? /* @__PURE__ */ r(h, { size: "md" }) : null,
+          i.showPreview && i.showExecution && s ? /* @__PURE__ */ r(f, { size: "md" }) : null,
           i.showExecution && s ? /* @__PURE__ */ r(
             "div",
             {
               className: "min-w-0 w-full shrink-0",
-              "data-testid": d.execution,
+              "data-testid": m.execution,
               children: s
             }
           ) : null
         ] }),
-        i.showProgressStepper && n ? /* @__PURE__ */ m(g, { children: [
-          /* @__PURE__ */ r(h, { size: "md" }),
+        i.showProgressStepper && n ? /* @__PURE__ */ l(v, { children: [
+          /* @__PURE__ */ r(f, { size: "md" }),
           /* @__PURE__ */ r(
             "div",
             {
               className: "shrink-0",
-              "data-testid": d.progress,
-              children: /* @__PURE__ */ r(
-                V,
-                {
-                  tone: "muted",
-                  steps: n.steps.map((a) => ({
-                    id: a.id,
-                    status: a.status,
-                    label: n.renderLabel(a)
-                  }))
-                }
-              )
+              "data-testid": m.progress,
+              children: /* @__PURE__ */ r(V, { tone: "muted", steps: n })
             }
           )
         ] }) : null
@@ -135,11 +124,11 @@ function F({
     }
   );
 }
-function B({
+function F({
   body: e
 }) {
   const t = N();
-  return e.kind === "loading" ? /* @__PURE__ */ m("div", { className: "flex flex-col items-center justify-center gap-3 py-8", children: [
+  return e.kind === "loading" ? /* @__PURE__ */ l("div", { className: "flex flex-col items-center justify-center gap-3 py-8", children: [
     /* @__PURE__ */ r(A, {}),
     /* @__PURE__ */ r(D, { variant: "bodySmall", color: "muted", as: "p", children: /* @__PURE__ */ r(P, { messageId: "components.transactionConfirm.previewLoading" }) })
   ] }) : e.kind === "error" ? /* @__PURE__ */ r(
@@ -150,14 +139,14 @@ function B({
         messageId: "components.transactionConfirm.previewErrorTitle"
       })
     }
-  ) : e.previewLoading ? /* @__PURE__ */ r(M, { lines: 3 }) : /* @__PURE__ */ r(g, { children: e.preview });
+  ) : e.previewLoading ? /* @__PURE__ */ r(L, { lines: 3 }) : /* @__PURE__ */ r(v, { children: e.preview });
 }
-function _(e, t) {
+function B(e, t) {
   if (e.result) {
     if (t === "success") return e.result.success;
     if (t === "failure") return e.result.failure;
   }
 }
 export {
-  ce as TransactionConfirmShell
+  me as TransactionConfirmShell
 };

package/dist/types/components/composites/tx-preview/confirm/dialog/transactionConfirmShellTypes.d.ts

@@ -1,15 +1,18 @@
 import { default as React } from 'react';
-import { TransactionExecutionStepView } from '../stepper/transactionExecutionStepTypes';
+import { ProgressStepperStep } from '../stepper/ProgressStepper';
 import { TransactionConfirmPhase } from './transactionConfirmPhase';
 /**
  * How the card is framed. The body is identical in both: `page` drops the card
  * into page flow, `dialog` puts the same card inside a modal.
  */
 export type TransactionConfirmShellMode = "page" | "dialog";
-export interface TransactionConfirmShellStepper {
-    readonly steps: ReadonlyArray<TransactionExecutionStepView>;
-    readonly renderLabel: (step: TransactionExecutionStepView) => React.ReactNode;
-}
+/**
+ * Pre-labelled, ready-to-render steps. The slot no longer restricts step ids
+ * to the execution union: session-plan steppers (agreement/approve/confirm
+ * plus a delayed request/complete tail) carry their own ids and labels, and
+ * visibility is the caller's decision — omit the slot to hide the stepper.
+ */
+export type TransactionConfirmShellStepper = ReadonlyArray<ProgressStepperStep>;
 /**
  * Shown instead of preview and execution once the phase is terminal.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.8",
+  "version": "4.0.0-next.9",
   "description": "Internal UI components",
   "repository": {
     "type": "git",