@secmia/openui-flow 4.2.5 → 4.2.8

package/dist/index.d.mts

@@ -286,6 +286,7 @@ type UseAdaptiveFlowOptions<TContext extends AdaptiveContextBase = AdaptiveConte
 type UseAdaptiveFlowResult<TContext extends AdaptiveContextBase, TRequirement extends string, TStep extends string> = {
     context: TContext;
     step: TStep;
+    hasEvaluated: boolean;
     completeStep: TStep;
     requirements: readonly TRequirement[];
     missingRequirements: TRequirement[];

package/dist/index.d.ts

@@ -286,6 +286,7 @@ type UseAdaptiveFlowOptions<TContext extends AdaptiveContextBase = AdaptiveConte
 type UseAdaptiveFlowResult<TContext extends AdaptiveContextBase, TRequirement extends string, TStep extends string> = {
     context: TContext;
     step: TStep;
+    hasEvaluated: boolean;
     completeStep: TStep;
     requirements: readonly TRequirement[];
     missingRequirements: TRequirement[];

package/dist/index.js

@@ -610,6 +610,7 @@ function useAdaptiveFlow({
         return {
           ...state,
           step: action.step,
+          hasEvaluated: true,
           missingRequirements: action.missingRequirements,
           transitions: [...state.transitions, action.transition].slice(-100)
         };
@@ -634,6 +635,7 @@ function useAdaptiveFlow({
   const [context, setContext] = React.useState(() => withDefaults(initialValue));
   const [runtime, dispatch] = React.useReducer(runtimeReducer, {
     step: normalizedCompleteStep,
+    hasEvaluated: false,
     missingRequirements: [],
     transitions: [],
     busy: false,
@@ -645,6 +647,7 @@ function useAdaptiveFlow({
   });
   const {
     step,
+    hasEvaluated,
     missingRequirements,
     transitions,
     busy,
@@ -928,6 +931,7 @@ function useAdaptiveFlow({
   return {
     context,
     step,
+    hasEvaluated,
     completeStep: normalizedCompleteStep,
     requirements: normalizedRequirements,
     missingRequirements,
@@ -974,6 +978,7 @@ function AdaptiveFlow({
   const {
     context,
     step,
+    hasEvaluated,
     completeStep: normalizedCompleteStep,
     requirements: normalizedRequirements,
     missingRequirements: missing,
@@ -1011,9 +1016,11 @@ function AdaptiveFlow({
     () => oauthProviders && oauthProviders.length > 0 ? oauthProviders : defaultOAuthProviders,
     [oauthProviders]
   );
+  const completedCount = hasEvaluated ? normalizedRequirements.length - missing.length : 0;
   const needsJobTitle = normalizedRequirements.includes("has_job_title");
-  const stepLabel = stepTitles?.[step] ?? defaultStepTitle[step] ?? step;
+  const stepLabel = hasEvaluated ? stepTitles?.[step] ?? defaultStepTitle[step] ?? step : "Loading flow";
   const defaultView = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    !hasEvaluated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: classNames?.info, style: uiStyles.info, children: "Evaluating required steps..." }) : null,
     step === "COLLECT_EMAIL" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       EmailBlock,
       {
@@ -1111,7 +1118,7 @@ function AdaptiveFlow({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: classNames?.title, style: uiStyles.title, children: stepLabel })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNames?.badge, style: uiStyles.badge, children: [
-        normalizedRequirements.length - missing.length,
+        completedCount,
         "/",
         normalizedRequirements.length
       ] })
@@ -1423,10 +1430,11 @@ var defaultStyles = {
     gap: 12,
     width: "100%",
     maxWidth: 560,
-    border: "1px solid #e5e7eb",
+    border: "1px solid #cbd5e1",
     borderRadius: 14,
     padding: 16,
-    background: "#ffffff",
+    background: "#f8fafc",
+    color: "#0f172a",
     fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
   },
   headerRow: {
@@ -1439,7 +1447,7 @@ var defaultStyles = {
     fontSize: 12,
     textTransform: "uppercase",
     letterSpacing: 1.2,
-    color: "#6b7280",
+    color: "#475569",
     marginBottom: 4
   },
   title: {
@@ -1448,12 +1456,13 @@ var defaultStyles = {
     lineHeight: "28px"
   },
   badge: {
-    border: "1px solid #d1d5db",
+    border: "1px solid #cbd5e1",
     borderRadius: 999,
     padding: "4px 10px",
     fontSize: 12,
     fontWeight: 600,
-    color: "#374151"
+    color: "#1e293b",
+    background: "#ffffff"
   },
   success: {
     border: "1px solid #bbf7d0",
@@ -1481,7 +1490,7 @@ var defaultStyles = {
   },
   caption: {
     margin: 0,
-    color: "#4b5563",
+    color: "#334155",
     fontSize: 14
   },
   formRow: {
@@ -1496,19 +1505,22 @@ var defaultStyles = {
   },
   input: {
     width: "100%",
-    border: "1px solid #d1d5db",
+    border: "1px solid #94a3b8",
     borderRadius: 8,
     height: 40,
     padding: "0 12px",
-    fontSize: 14
+    fontSize: 14,
+    background: "#ffffff",
+    color: "#0f172a"
   },
   button: {
-    border: "1px solid #d1d5db",
+    border: "1px solid #94a3b8",
     borderRadius: 8,
     height: 40,
     padding: "0 14px",
     fontWeight: 600,
     background: "#ffffff",
+    color: "#0f172a",
     whiteSpace: "nowrap",
     cursor: "pointer"
   },
@@ -1533,10 +1545,11 @@ var defaultStyles = {
   },
   oauthButton: {
     flex: 1,
-    border: "1px solid #d1d5db",
+    border: "1px solid #94a3b8",
     borderRadius: 8,
     padding: "10px 12px",
-    background: "#f9fafb",
+    background: "#ffffff",
+    color: "#0f172a",
     cursor: "pointer"
   }
 };