@wise/dynamic-flow-client 4.19.0 → 4.19.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/main.js +51 -20
- package/build/main.mjs +51 -20
- package/build/types/revamp/domain/components/RootDomainComponent.d.ts +3 -2
- package/build/types/revamp/domain/types.d.ts +1 -0
- package/build/types/revamp/useDynamicFlowCore.d.ts +2 -1
- package/build/types/test-utils/index.d.ts +1 -1
- package/package.json +19 -18
- package/build/types/revamp/tests/renderers/StepRenderer.test.d.ts +0 -1
package/build/main.js
CHANGED
|
@@ -1245,7 +1245,7 @@ var CoreRootRenderer = {
|
|
|
1245
1245
|
canRenderType: "root",
|
|
1246
1246
|
render: ({ children, childrenProps }) => {
|
|
1247
1247
|
const [stepProps] = findRendererPropsByType(childrenProps, "step");
|
|
1248
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow", children });
|
|
1248
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow-step", children });
|
|
1249
1249
|
}
|
|
1250
1250
|
};
|
|
1251
1251
|
|
|
@@ -2258,7 +2258,7 @@ var getInputUpdateFunction = (updateComponent) => {
|
|
|
2258
2258
|
};
|
|
2259
2259
|
|
|
2260
2260
|
// src/revamp/domain/components/RootDomainComponent.ts
|
|
2261
|
-
var createRootDomainComponent = (updateComponent) => {
|
|
2261
|
+
var createRootDomainComponent = (updateComponent, scrollToTop) => {
|
|
2262
2262
|
const update = getInputUpdateFunction(updateComponent);
|
|
2263
2263
|
const rootComponent = {
|
|
2264
2264
|
type: "root",
|
|
@@ -2308,6 +2308,10 @@ var createRootDomainComponent = (updateComponent) => {
|
|
|
2308
2308
|
getTrackEvent() {
|
|
2309
2309
|
return this.stepComponent ? this.stepComponent.trackEvent : null;
|
|
2310
2310
|
},
|
|
2311
|
+
isBusy() {
|
|
2312
|
+
const loadingState = this.getLoadingState();
|
|
2313
|
+
return loadingState === "submitting" || loadingState === "refreshing";
|
|
2314
|
+
},
|
|
2311
2315
|
hasStep() {
|
|
2312
2316
|
return Boolean(this.stepComponent);
|
|
2313
2317
|
},
|
|
@@ -2315,10 +2319,12 @@ var createRootDomainComponent = (updateComponent) => {
|
|
|
2315
2319
|
var _a;
|
|
2316
2320
|
(_a = this.stepComponent) == null ? void 0 : _a.stop();
|
|
2317
2321
|
},
|
|
2318
|
-
setStep(
|
|
2322
|
+
setStep(step) {
|
|
2323
|
+
const scrollAfterUpdate = getScrollAfterUpdate(step, this.stepComponent, scrollToTop);
|
|
2319
2324
|
this._update((draft) => {
|
|
2320
|
-
draft.stepComponent =
|
|
2325
|
+
draft.stepComponent = step;
|
|
2321
2326
|
});
|
|
2327
|
+
scrollAfterUpdate == null ? void 0 : scrollAfterUpdate();
|
|
2322
2328
|
},
|
|
2323
2329
|
getRefreshUrl() {
|
|
2324
2330
|
var _a, _b, _c, _d;
|
|
@@ -2327,6 +2333,16 @@ var createRootDomainComponent = (updateComponent) => {
|
|
|
2327
2333
|
};
|
|
2328
2334
|
return rootComponent;
|
|
2329
2335
|
};
|
|
2336
|
+
var getScrollAfterUpdate = (newStep, currentStep, scrollToTop) => {
|
|
2337
|
+
if (!currentStep) {
|
|
2338
|
+
return void 0;
|
|
2339
|
+
}
|
|
2340
|
+
const isNewStep = newStep.uid !== currentStep.uid;
|
|
2341
|
+
const hasNewError = newStep.error != null && newStep.error !== currentStep.error;
|
|
2342
|
+
const shouldScroll = isNewStep || hasNewError;
|
|
2343
|
+
const scrollBehavior = hasNewError ? "smooth" : "instant";
|
|
2344
|
+
return shouldScroll ? () => scrollToTop(scrollBehavior) : void 0;
|
|
2345
|
+
};
|
|
2330
2346
|
|
|
2331
2347
|
// src/revamp/domain/components/ModalComponent.ts
|
|
2332
2348
|
var createModalContentComponent = (modalProps, updateComponent) => {
|
|
@@ -7164,13 +7180,16 @@ function useDynamicFlowCore(props) {
|
|
|
7164
7180
|
const onError = useStableCallback(rest.onError);
|
|
7165
7181
|
const onEvent = useStableCallback(rest.onEvent);
|
|
7166
7182
|
const onLog = useStableCallback(rest.onLog);
|
|
7183
|
+
const scrollToTop = useStableCallback(props.scrollToTop);
|
|
7167
7184
|
const { formatMessage, locale } = (0, import_react_intl7.useIntl)();
|
|
7168
7185
|
const getErrorMessageFunctions = (0, import_react3.useMemo)(
|
|
7169
7186
|
() => getSchemaErrorMessageFunction(formatMessage, locale),
|
|
7170
7187
|
[formatMessage, locale]
|
|
7171
7188
|
);
|
|
7172
7189
|
const rerender = useRerender();
|
|
7173
|
-
const rootComponentRef = (0, import_react3.useRef)(
|
|
7190
|
+
const rootComponentRef = (0, import_react3.useRef)(
|
|
7191
|
+
createRootDomainComponent(rerender, scrollToTop)
|
|
7192
|
+
);
|
|
7174
7193
|
const stepCount = (0, import_react3.useRef)(0);
|
|
7175
7194
|
const stepRef = (0, import_react3.useRef)(initialStep != null ? initialStep : null);
|
|
7176
7195
|
const etagRef = (0, import_react3.useRef)(null);
|
|
@@ -7183,6 +7202,7 @@ function useDynamicFlowCore(props) {
|
|
|
7183
7202
|
(0, import_react3.useEffect)(() => {
|
|
7184
7203
|
trackCoreEvent("Initiated");
|
|
7185
7204
|
if (!initialStep && initialAction) {
|
|
7205
|
+
rootComponentRef.current.setLoadingState("submitting");
|
|
7186
7206
|
void onAction(__spreadValues({ method: "GET" }, initialAction), null);
|
|
7187
7207
|
}
|
|
7188
7208
|
if (initialStep && !initialAction) {
|
|
@@ -7280,14 +7300,18 @@ function useDynamicFlowCore(props) {
|
|
|
7280
7300
|
const onBehavior = (0, import_react3.useCallback)(async (behavior) => {
|
|
7281
7301
|
switch (behavior.type) {
|
|
7282
7302
|
case "action": {
|
|
7283
|
-
rootComponentRef.current.
|
|
7303
|
+
if (rootComponentRef.current.isBusy()) {
|
|
7304
|
+
return { abort: () => {
|
|
7305
|
+
} };
|
|
7306
|
+
}
|
|
7284
7307
|
rootComponentRef.current.dismissAllModals();
|
|
7308
|
+
const { action } = behavior;
|
|
7309
|
+
const skipValidation = action.method === "GET" || Boolean(action.skipValidation);
|
|
7310
|
+
const canSubmit = skipValidation || rootComponentRef.current.validate();
|
|
7285
7311
|
try {
|
|
7286
|
-
const { action } = behavior;
|
|
7287
|
-
const model = await rootComponentRef.current.getSubmittableValue();
|
|
7288
|
-
const skipValidation = action.method === "GET" || Boolean(action.skipValidation);
|
|
7289
|
-
const canSubmit = skipValidation || rootComponentRef.current.validate();
|
|
7290
7312
|
if (canSubmit) {
|
|
7313
|
+
rootComponentRef.current.setLoadingState("submitting");
|
|
7314
|
+
const model = await rootComponentRef.current.getSubmittableValue();
|
|
7291
7315
|
void onAction(action, model);
|
|
7292
7316
|
} else {
|
|
7293
7317
|
rootComponentRef.current.setLoadingState("idle");
|
|
@@ -7304,6 +7328,7 @@ function useDynamicFlowCore(props) {
|
|
|
7304
7328
|
case "non-merging-action": {
|
|
7305
7329
|
rootComponentRef.current.dismissAllModals();
|
|
7306
7330
|
const { action } = behavior;
|
|
7331
|
+
rootComponentRef.current.setLoadingState("submitting");
|
|
7307
7332
|
void onAction(action, null);
|
|
7308
7333
|
break;
|
|
7309
7334
|
}
|
|
@@ -7348,7 +7373,6 @@ function useDynamicFlowCore(props) {
|
|
|
7348
7373
|
const onAction = (0, import_react3.useCallback)(async (action, model) => {
|
|
7349
7374
|
var _a2, _b, _c, _d, _e, _f;
|
|
7350
7375
|
try {
|
|
7351
|
-
rootComponentRef.current.setLoadingState("submitting");
|
|
7352
7376
|
const command = await executeSubmission({
|
|
7353
7377
|
action,
|
|
7354
7378
|
model,
|
|
@@ -7497,10 +7521,17 @@ var useRerender = () => {
|
|
|
7497
7521
|
|
|
7498
7522
|
// src/revamp/DynamicFlowCore.tsx
|
|
7499
7523
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
7524
|
+
var className = "dynamic-flow";
|
|
7500
7525
|
function DynamicFlowCore(props) {
|
|
7501
7526
|
var _a;
|
|
7502
|
-
const {
|
|
7503
|
-
const {
|
|
7527
|
+
const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
|
|
7528
|
+
const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({}, props), {
|
|
7529
|
+
scrollToTop: (behavior) => {
|
|
7530
|
+
var _a2;
|
|
7531
|
+
const element = document.querySelector(`div#${flowId}.${className}`);
|
|
7532
|
+
(_a2 = element == null ? void 0 : element.scrollIntoView) == null ? void 0 : _a2.call(element, { behavior });
|
|
7533
|
+
}
|
|
7534
|
+
}));
|
|
7504
7535
|
const render = (0, import_react4.useMemo)(
|
|
7505
7536
|
() => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
|
|
7506
7537
|
[renderers]
|
|
@@ -7520,7 +7551,7 @@ function DynamicFlowCore(props) {
|
|
|
7520
7551
|
onError == null ? void 0 : onError(error);
|
|
7521
7552
|
onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
|
|
7522
7553
|
},
|
|
7523
|
-
children: render(tree)
|
|
7554
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: flowId, className, children: render(tree) })
|
|
7524
7555
|
}
|
|
7525
7556
|
);
|
|
7526
7557
|
}
|
|
@@ -8876,7 +8907,7 @@ function DynamicButtonWithoutBehavior(props) {
|
|
|
8876
8907
|
const type = getButtonType(component.context, componentAction);
|
|
8877
8908
|
const priority = getButtonPriority(component.control, componentAction);
|
|
8878
8909
|
const { loading } = useDynamicFlow();
|
|
8879
|
-
const
|
|
8910
|
+
const className2 = getMargin(component.margin || "md");
|
|
8880
8911
|
const disabled = loading || component.disabled || (componentAction == null ? void 0 : componentAction.disabled);
|
|
8881
8912
|
const title = (_b = (_a = component.title) != null ? _a : componentAction == null ? void 0 : componentAction.title) != null ? _b : "";
|
|
8882
8913
|
const onClick = () => {
|
|
@@ -8891,7 +8922,7 @@ function DynamicButtonWithoutBehavior(props) {
|
|
|
8891
8922
|
type: priority === "tertiary" ? void 0 : type,
|
|
8892
8923
|
priority,
|
|
8893
8924
|
block: true,
|
|
8894
|
-
className,
|
|
8925
|
+
className: className2,
|
|
8895
8926
|
disabled,
|
|
8896
8927
|
onClick,
|
|
8897
8928
|
children: title
|
|
@@ -8904,7 +8935,7 @@ function DynamicButtonWithBehavior(props) {
|
|
|
8904
8935
|
const type = getButtonTypeFromContext(component.context);
|
|
8905
8936
|
const priority = (_a = component.control) != null ? _a : "secondary";
|
|
8906
8937
|
const { loading } = useDynamicFlow();
|
|
8907
|
-
const
|
|
8938
|
+
const className2 = getMargin(component.margin || "md");
|
|
8908
8939
|
const disabled = loading || component.disabled;
|
|
8909
8940
|
const title = (_b = component.title) != null ? _b : "";
|
|
8910
8941
|
const onClick = () => {
|
|
@@ -8943,7 +8974,7 @@ function DynamicButtonWithBehavior(props) {
|
|
|
8943
8974
|
type: priority === "tertiary" ? void 0 : type,
|
|
8944
8975
|
priority,
|
|
8945
8976
|
block: true,
|
|
8946
|
-
className,
|
|
8977
|
+
className: className2,
|
|
8947
8978
|
disabled,
|
|
8948
8979
|
onClick,
|
|
8949
8980
|
children: title
|
|
@@ -9033,8 +9064,8 @@ var DynamicDecision_default = DynamicDecision;
|
|
|
9033
9064
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
9034
9065
|
var DynamicDivider = ({ component }) => {
|
|
9035
9066
|
const margin = getMargin(component.margin);
|
|
9036
|
-
const
|
|
9037
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { className });
|
|
9067
|
+
const className2 = `m-t-0 ${margin}`;
|
|
9068
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { className: className2 });
|
|
9038
9069
|
};
|
|
9039
9070
|
var DynamicDivider_default = DynamicDivider;
|
|
9040
9071
|
|
package/build/main.mjs
CHANGED
|
@@ -1202,7 +1202,7 @@ var CoreRootRenderer = {
|
|
|
1202
1202
|
canRenderType: "root",
|
|
1203
1203
|
render: ({ children, childrenProps }) => {
|
|
1204
1204
|
const [stepProps] = findRendererPropsByType(childrenProps, "step");
|
|
1205
|
-
return /* @__PURE__ */ jsx4("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow", children });
|
|
1205
|
+
return /* @__PURE__ */ jsx4("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow-step", children });
|
|
1206
1206
|
}
|
|
1207
1207
|
};
|
|
1208
1208
|
|
|
@@ -2215,7 +2215,7 @@ var getInputUpdateFunction = (updateComponent) => {
|
|
|
2215
2215
|
};
|
|
2216
2216
|
|
|
2217
2217
|
// src/revamp/domain/components/RootDomainComponent.ts
|
|
2218
|
-
var createRootDomainComponent = (updateComponent) => {
|
|
2218
|
+
var createRootDomainComponent = (updateComponent, scrollToTop) => {
|
|
2219
2219
|
const update = getInputUpdateFunction(updateComponent);
|
|
2220
2220
|
const rootComponent = {
|
|
2221
2221
|
type: "root",
|
|
@@ -2265,6 +2265,10 @@ var createRootDomainComponent = (updateComponent) => {
|
|
|
2265
2265
|
getTrackEvent() {
|
|
2266
2266
|
return this.stepComponent ? this.stepComponent.trackEvent : null;
|
|
2267
2267
|
},
|
|
2268
|
+
isBusy() {
|
|
2269
|
+
const loadingState = this.getLoadingState();
|
|
2270
|
+
return loadingState === "submitting" || loadingState === "refreshing";
|
|
2271
|
+
},
|
|
2268
2272
|
hasStep() {
|
|
2269
2273
|
return Boolean(this.stepComponent);
|
|
2270
2274
|
},
|
|
@@ -2272,10 +2276,12 @@ var createRootDomainComponent = (updateComponent) => {
|
|
|
2272
2276
|
var _a;
|
|
2273
2277
|
(_a = this.stepComponent) == null ? void 0 : _a.stop();
|
|
2274
2278
|
},
|
|
2275
|
-
setStep(
|
|
2279
|
+
setStep(step) {
|
|
2280
|
+
const scrollAfterUpdate = getScrollAfterUpdate(step, this.stepComponent, scrollToTop);
|
|
2276
2281
|
this._update((draft) => {
|
|
2277
|
-
draft.stepComponent =
|
|
2282
|
+
draft.stepComponent = step;
|
|
2278
2283
|
});
|
|
2284
|
+
scrollAfterUpdate == null ? void 0 : scrollAfterUpdate();
|
|
2279
2285
|
},
|
|
2280
2286
|
getRefreshUrl() {
|
|
2281
2287
|
var _a, _b, _c, _d;
|
|
@@ -2284,6 +2290,16 @@ var createRootDomainComponent = (updateComponent) => {
|
|
|
2284
2290
|
};
|
|
2285
2291
|
return rootComponent;
|
|
2286
2292
|
};
|
|
2293
|
+
var getScrollAfterUpdate = (newStep, currentStep, scrollToTop) => {
|
|
2294
|
+
if (!currentStep) {
|
|
2295
|
+
return void 0;
|
|
2296
|
+
}
|
|
2297
|
+
const isNewStep = newStep.uid !== currentStep.uid;
|
|
2298
|
+
const hasNewError = newStep.error != null && newStep.error !== currentStep.error;
|
|
2299
|
+
const shouldScroll = isNewStep || hasNewError;
|
|
2300
|
+
const scrollBehavior = hasNewError ? "smooth" : "instant";
|
|
2301
|
+
return shouldScroll ? () => scrollToTop(scrollBehavior) : void 0;
|
|
2302
|
+
};
|
|
2287
2303
|
|
|
2288
2304
|
// src/revamp/domain/components/ModalComponent.ts
|
|
2289
2305
|
var createModalContentComponent = (modalProps, updateComponent) => {
|
|
@@ -7121,13 +7137,16 @@ function useDynamicFlowCore(props) {
|
|
|
7121
7137
|
const onError = useStableCallback(rest.onError);
|
|
7122
7138
|
const onEvent = useStableCallback(rest.onEvent);
|
|
7123
7139
|
const onLog = useStableCallback(rest.onLog);
|
|
7140
|
+
const scrollToTop = useStableCallback(props.scrollToTop);
|
|
7124
7141
|
const { formatMessage, locale } = useIntl2();
|
|
7125
7142
|
const getErrorMessageFunctions = useMemo(
|
|
7126
7143
|
() => getSchemaErrorMessageFunction(formatMessage, locale),
|
|
7127
7144
|
[formatMessage, locale]
|
|
7128
7145
|
);
|
|
7129
7146
|
const rerender = useRerender();
|
|
7130
|
-
const rootComponentRef = useRef2(
|
|
7147
|
+
const rootComponentRef = useRef2(
|
|
7148
|
+
createRootDomainComponent(rerender, scrollToTop)
|
|
7149
|
+
);
|
|
7131
7150
|
const stepCount = useRef2(0);
|
|
7132
7151
|
const stepRef = useRef2(initialStep != null ? initialStep : null);
|
|
7133
7152
|
const etagRef = useRef2(null);
|
|
@@ -7140,6 +7159,7 @@ function useDynamicFlowCore(props) {
|
|
|
7140
7159
|
useEffect(() => {
|
|
7141
7160
|
trackCoreEvent("Initiated");
|
|
7142
7161
|
if (!initialStep && initialAction) {
|
|
7162
|
+
rootComponentRef.current.setLoadingState("submitting");
|
|
7143
7163
|
void onAction(__spreadValues({ method: "GET" }, initialAction), null);
|
|
7144
7164
|
}
|
|
7145
7165
|
if (initialStep && !initialAction) {
|
|
@@ -7237,14 +7257,18 @@ function useDynamicFlowCore(props) {
|
|
|
7237
7257
|
const onBehavior = useCallback2(async (behavior) => {
|
|
7238
7258
|
switch (behavior.type) {
|
|
7239
7259
|
case "action": {
|
|
7240
|
-
rootComponentRef.current.
|
|
7260
|
+
if (rootComponentRef.current.isBusy()) {
|
|
7261
|
+
return { abort: () => {
|
|
7262
|
+
} };
|
|
7263
|
+
}
|
|
7241
7264
|
rootComponentRef.current.dismissAllModals();
|
|
7265
|
+
const { action } = behavior;
|
|
7266
|
+
const skipValidation = action.method === "GET" || Boolean(action.skipValidation);
|
|
7267
|
+
const canSubmit = skipValidation || rootComponentRef.current.validate();
|
|
7242
7268
|
try {
|
|
7243
|
-
const { action } = behavior;
|
|
7244
|
-
const model = await rootComponentRef.current.getSubmittableValue();
|
|
7245
|
-
const skipValidation = action.method === "GET" || Boolean(action.skipValidation);
|
|
7246
|
-
const canSubmit = skipValidation || rootComponentRef.current.validate();
|
|
7247
7269
|
if (canSubmit) {
|
|
7270
|
+
rootComponentRef.current.setLoadingState("submitting");
|
|
7271
|
+
const model = await rootComponentRef.current.getSubmittableValue();
|
|
7248
7272
|
void onAction(action, model);
|
|
7249
7273
|
} else {
|
|
7250
7274
|
rootComponentRef.current.setLoadingState("idle");
|
|
@@ -7261,6 +7285,7 @@ function useDynamicFlowCore(props) {
|
|
|
7261
7285
|
case "non-merging-action": {
|
|
7262
7286
|
rootComponentRef.current.dismissAllModals();
|
|
7263
7287
|
const { action } = behavior;
|
|
7288
|
+
rootComponentRef.current.setLoadingState("submitting");
|
|
7264
7289
|
void onAction(action, null);
|
|
7265
7290
|
break;
|
|
7266
7291
|
}
|
|
@@ -7305,7 +7330,6 @@ function useDynamicFlowCore(props) {
|
|
|
7305
7330
|
const onAction = useCallback2(async (action, model) => {
|
|
7306
7331
|
var _a2, _b, _c, _d, _e, _f;
|
|
7307
7332
|
try {
|
|
7308
|
-
rootComponentRef.current.setLoadingState("submitting");
|
|
7309
7333
|
const command = await executeSubmission({
|
|
7310
7334
|
action,
|
|
7311
7335
|
model,
|
|
@@ -7454,10 +7478,17 @@ var useRerender = () => {
|
|
|
7454
7478
|
|
|
7455
7479
|
// src/revamp/DynamicFlowCore.tsx
|
|
7456
7480
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
7481
|
+
var className = "dynamic-flow";
|
|
7457
7482
|
function DynamicFlowCore(props) {
|
|
7458
7483
|
var _a;
|
|
7459
|
-
const {
|
|
7460
|
-
const {
|
|
7484
|
+
const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
|
|
7485
|
+
const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({}, props), {
|
|
7486
|
+
scrollToTop: (behavior) => {
|
|
7487
|
+
var _a2;
|
|
7488
|
+
const element = document.querySelector(`div#${flowId}.${className}`);
|
|
7489
|
+
(_a2 = element == null ? void 0 : element.scrollIntoView) == null ? void 0 : _a2.call(element, { behavior });
|
|
7490
|
+
}
|
|
7491
|
+
}));
|
|
7461
7492
|
const render = useMemo2(
|
|
7462
7493
|
() => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
|
|
7463
7494
|
[renderers]
|
|
@@ -7477,7 +7508,7 @@ function DynamicFlowCore(props) {
|
|
|
7477
7508
|
onError == null ? void 0 : onError(error);
|
|
7478
7509
|
onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
|
|
7479
7510
|
},
|
|
7480
|
-
children: render(tree)
|
|
7511
|
+
children: /* @__PURE__ */ jsx6("div", { id: flowId, className, children: render(tree) })
|
|
7481
7512
|
}
|
|
7482
7513
|
);
|
|
7483
7514
|
}
|
|
@@ -8833,7 +8864,7 @@ function DynamicButtonWithoutBehavior(props) {
|
|
|
8833
8864
|
const type = getButtonType(component.context, componentAction);
|
|
8834
8865
|
const priority = getButtonPriority(component.control, componentAction);
|
|
8835
8866
|
const { loading } = useDynamicFlow();
|
|
8836
|
-
const
|
|
8867
|
+
const className2 = getMargin(component.margin || "md");
|
|
8837
8868
|
const disabled = loading || component.disabled || (componentAction == null ? void 0 : componentAction.disabled);
|
|
8838
8869
|
const title = (_b = (_a = component.title) != null ? _a : componentAction == null ? void 0 : componentAction.title) != null ? _b : "";
|
|
8839
8870
|
const onClick = () => {
|
|
@@ -8848,7 +8879,7 @@ function DynamicButtonWithoutBehavior(props) {
|
|
|
8848
8879
|
type: priority === "tertiary" ? void 0 : type,
|
|
8849
8880
|
priority,
|
|
8850
8881
|
block: true,
|
|
8851
|
-
className,
|
|
8882
|
+
className: className2,
|
|
8852
8883
|
disabled,
|
|
8853
8884
|
onClick,
|
|
8854
8885
|
children: title
|
|
@@ -8861,7 +8892,7 @@ function DynamicButtonWithBehavior(props) {
|
|
|
8861
8892
|
const type = getButtonTypeFromContext(component.context);
|
|
8862
8893
|
const priority = (_a = component.control) != null ? _a : "secondary";
|
|
8863
8894
|
const { loading } = useDynamicFlow();
|
|
8864
|
-
const
|
|
8895
|
+
const className2 = getMargin(component.margin || "md");
|
|
8865
8896
|
const disabled = loading || component.disabled;
|
|
8866
8897
|
const title = (_b = component.title) != null ? _b : "";
|
|
8867
8898
|
const onClick = () => {
|
|
@@ -8900,7 +8931,7 @@ function DynamicButtonWithBehavior(props) {
|
|
|
8900
8931
|
type: priority === "tertiary" ? void 0 : type,
|
|
8901
8932
|
priority,
|
|
8902
8933
|
block: true,
|
|
8903
|
-
className,
|
|
8934
|
+
className: className2,
|
|
8904
8935
|
disabled,
|
|
8905
8936
|
onClick,
|
|
8906
8937
|
children: title
|
|
@@ -8990,8 +9021,8 @@ var DynamicDecision_default = DynamicDecision;
|
|
|
8990
9021
|
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
8991
9022
|
var DynamicDivider = ({ component }) => {
|
|
8992
9023
|
const margin = getMargin(component.margin);
|
|
8993
|
-
const
|
|
8994
|
-
return /* @__PURE__ */ jsx21("hr", { className });
|
|
9024
|
+
const className2 = `m-t-0 ${margin}`;
|
|
9025
|
+
return /* @__PURE__ */ jsx21("hr", { className: className2 });
|
|
8995
9026
|
};
|
|
8996
9027
|
var DynamicDivider_default = DynamicDivider;
|
|
8997
9028
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Model } from '@wise/dynamic-flow-types';
|
|
2
2
|
import { AnalyticsEventDispatcher } from '../features/events';
|
|
3
|
-
import { BaseComponent, DomainComponent, LoadingState, LocalValue, SchemaComponent, UpdateComponent } from '../types';
|
|
3
|
+
import { BaseComponent, DomainComponent, LoadingState, LocalValue, SchemaComponent, ScrollToTop, UpdateComponent } from '../types';
|
|
4
4
|
import { ModalComponent } from './ModalComponent';
|
|
5
5
|
import { StepDomainComponent } from './step/StepDomainComponent';
|
|
6
6
|
export type RootDomainComponent = BaseComponent & {
|
|
@@ -16,6 +16,7 @@ export type RootDomainComponent = BaseComponent & {
|
|
|
16
16
|
getSchemaComponents: () => SchemaComponent[];
|
|
17
17
|
getSubmittableValue: () => Promise<Model>;
|
|
18
18
|
getSubmittableValueSync: () => Model;
|
|
19
|
+
isBusy: () => boolean;
|
|
19
20
|
validate: () => boolean;
|
|
20
21
|
getTrackEvent: () => AnalyticsEventDispatcher<string> | null;
|
|
21
22
|
setLoadingState: (loadingState: LoadingState) => void;
|
|
@@ -24,4 +25,4 @@ export type RootDomainComponent = BaseComponent & {
|
|
|
24
25
|
setStep: (stepComponent: StepDomainComponent) => void;
|
|
25
26
|
getRefreshUrl: () => string | null;
|
|
26
27
|
};
|
|
27
|
-
export declare const createRootDomainComponent: (updateComponent: UpdateComponent) => RootDomainComponent;
|
|
28
|
+
export declare const createRootDomainComponent: (updateComponent: UpdateComponent, scrollToTop: ScrollToTop) => RootDomainComponent;
|
|
@@ -155,6 +155,7 @@ export type BaseInputComponent<LV extends LocalValue> = BaseSchemaComponent<LV>
|
|
|
155
155
|
onFocus: () => void;
|
|
156
156
|
};
|
|
157
157
|
export type UpdateComponent = () => void;
|
|
158
|
+
export type ScrollToTop = (behavior: ScrollBehavior) => void;
|
|
158
159
|
export type OnBehavior = (behavior: Behavior) => Promise<BehaviorController>;
|
|
159
160
|
export type BehaviorController = {
|
|
160
161
|
abort: () => void;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { RootDomainComponent } from './domain/components/RootDomainComponent';
|
|
2
|
-
import type { OnValueChange } from './domain/types';
|
|
2
|
+
import type { OnValueChange, ScrollToTop } from './domain/types';
|
|
3
3
|
import type { DynamicFlowCoreProps } from './types';
|
|
4
4
|
type UseDynamicFlowCoreProps = Omit<DynamicFlowCoreProps, 'renderers'> & {
|
|
5
5
|
onValueChange?: OnValueChange;
|
|
6
|
+
scrollToTop?: ScrollToTop;
|
|
6
7
|
onLink: (url: string) => boolean;
|
|
7
8
|
};
|
|
8
9
|
export declare function useDynamicFlowCore(props: UseDynamicFlowCoreProps): {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { getMockHttpClient, respondWith, respondWithEtag, respondWithEmptyOk, respondWithEmptyAndEtag, } from './fetch-utils';
|
|
1
|
+
export { getMockHttpClient, respondWith, respondWithDelay, respondWithEtag, respondWithEmptyOk, respondWithEmptyAndEtag, } from './fetch-utils';
|
|
2
2
|
export { renderWithProviders } from './rtl-utils';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wise/dynamic-flow-client",
|
|
3
|
-
"version": "4.19.
|
|
3
|
+
"version": "4.19.2",
|
|
4
4
|
"description": "Dynamic Flow web client",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "./build/main.js",
|
|
@@ -37,31 +37,32 @@
|
|
|
37
37
|
"@babel/preset-react": "7.27.1",
|
|
38
38
|
"@babel/preset-typescript": "7.27.1",
|
|
39
39
|
"@chromatic-com/storybook": "4.1.1",
|
|
40
|
-
"@formatjs/cli": "^6.7.
|
|
41
|
-
"@storybook/addon-a11y": "^9.1.
|
|
42
|
-
"@storybook/addon-docs": "^9.1.
|
|
43
|
-
"@storybook/addon-links": "^9.1.
|
|
44
|
-
"@storybook/react-vite": "9.1.
|
|
40
|
+
"@formatjs/cli": "^6.7.4",
|
|
41
|
+
"@storybook/addon-a11y": "^9.1.10",
|
|
42
|
+
"@storybook/addon-docs": "^9.1.10",
|
|
43
|
+
"@storybook/addon-links": "^9.1.10",
|
|
44
|
+
"@storybook/react-vite": "9.1.10",
|
|
45
45
|
"@testing-library/dom": "10.4.1",
|
|
46
|
-
"@testing-library/jest-dom": "6.
|
|
46
|
+
"@testing-library/jest-dom": "6.9.1",
|
|
47
47
|
"@testing-library/react": "16.3.0",
|
|
48
48
|
"@testing-library/user-event": "14.6.1",
|
|
49
|
-
"@transferwise/components": "46.
|
|
49
|
+
"@transferwise/components": "46.112.0",
|
|
50
50
|
"@transferwise/formatting": "^2.13.4",
|
|
51
51
|
"@transferwise/icons": "3.22.4",
|
|
52
|
+
"@transferwise/navigation-ui": "4.40.0",
|
|
52
53
|
"@transferwise/neptune-css": "14.25.0",
|
|
53
54
|
"@types/jest": "30.0.0",
|
|
54
|
-
"@types/node": "22.18.
|
|
55
|
-
"@types/react": "18.3.
|
|
55
|
+
"@types/node": "22.18.9",
|
|
56
|
+
"@types/react": "18.3.26",
|
|
56
57
|
"@types/react-dom": "18.3.7",
|
|
57
58
|
"@types/react-intl": "3.0.0",
|
|
58
|
-
"@wise/art": "2.24.
|
|
59
|
+
"@wise/art": "2.24.7",
|
|
59
60
|
"@wise/components-theming": "^1.7.0",
|
|
60
|
-
"babel-jest": "30.
|
|
61
|
+
"babel-jest": "30.2.0",
|
|
61
62
|
"esbuild": "0.25.9",
|
|
62
|
-
"eslint-plugin-storybook": "9.1.
|
|
63
|
-
"jest": "30.
|
|
64
|
-
"jest-environment-jsdom": "30.
|
|
63
|
+
"eslint-plugin-storybook": "9.1.10",
|
|
64
|
+
"jest": "30.2.0",
|
|
65
|
+
"jest-environment-jsdom": "30.2.0",
|
|
65
66
|
"jest-fetch-mock": "^3.0.3",
|
|
66
67
|
"jest-watch-typeahead": "^3.0.1",
|
|
67
68
|
"npm-run-all2": "8.0.4",
|
|
@@ -71,13 +72,13 @@
|
|
|
71
72
|
"react": "18.3.1",
|
|
72
73
|
"react-dom": "18.3.1",
|
|
73
74
|
"react-intl": "6.8.9",
|
|
74
|
-
"storybook": "^9.1.
|
|
75
|
-
"stylelint": "16.
|
|
75
|
+
"storybook": "^9.1.10",
|
|
76
|
+
"stylelint": "16.25.0",
|
|
76
77
|
"stylelint-config-standard": "36.0.1",
|
|
77
78
|
"stylelint-no-unsupported-browser-features": "8.0.4",
|
|
78
79
|
"stylelint-value-no-unknown-custom-properties": "6.0.1",
|
|
79
80
|
"tsx": "4.20.6",
|
|
80
|
-
"typescript": "5.9.
|
|
81
|
+
"typescript": "5.9.3",
|
|
81
82
|
"@wise/dynamic-flow-renderers": "0.0.0",
|
|
82
83
|
"@wise/dynamic-flow-fixtures": "0.0.1"
|
|
83
84
|
},
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|