@wise/dynamic-flow-client 3.20.1 → 3.21.0

package/build/main.mjs

@@ -6123,12 +6123,6 @@ var decisionLayoutOptionSchema = z.object({
   icon: iconSchema.optional(),
   image: imageLayoutSchema.optional()
 });
-var statusListLayoutItemSchema = z.object({
-  title: z.string(),
-  description: z.string().optional(),
-  icon: iconSchema,
-  status: statusListLayoutStatusSchema.optional()
-});
 var instructionsLayoutSchema = z.object({
   type: z.literal("instructions"),
   title: z.string().optional(),
@@ -6136,6 +6130,10 @@ var instructionsLayoutSchema = z.object({
   control: z.string().optional(),
   margin: sizeSchema.optional()
 });
+var behaviorSchema = z.object({
+  action: actionSchema.optional(),
+  link: linkSchema.optional()
+});
 var buttonLayoutSchema = z.object({
   type: z.literal("button"),
   size: sizeSchema.optional(),
@@ -6152,10 +6150,6 @@ var reviewLayoutFieldSchema = z.object({
   value: z.string(),
   help: helpSchema.optional()
 });
-var behaviorSchema = z.object({
-  action: actionSchema.optional(),
-  link: linkSchema.optional()
-});
 var searchResultSearchSchema = z.object({
   type: z.literal("search"),
   title: z.string(),
@@ -6216,12 +6210,10 @@ var decisionLayoutSchema = z.object({
   control: z.string().optional(),
   margin: sizeSchema.optional()
 });
-var statusListLayoutSchema = z.object({
-  type: z.literal("status-list"),
-  items: z.array(statusListLayoutItemSchema),
-  title: z.string().optional(),
-  control: z.string().optional(),
-  margin: sizeSchema.optional()
+var itemCallToActionSchema = z.object({
+  title: z.string(),
+  accessibilityDescription: z.string().optional(),
+  behavior: behaviorSchema
 });
 var reviewLayoutSchema = z.object({
   type: z.literal("review"),
@@ -6255,6 +6247,13 @@ var alertLayoutSchema = z.object({
   margin: sizeSchema.optional(),
   callToAction: alertLayoutCallToActionSchema.optional()
 });
+var statusListLayoutItemSchema = z.object({
+  title: z.string(),
+  description: z.string().optional(),
+  icon: iconSchema,
+  status: statusListLayoutStatusSchema.optional(),
+  callToAction: itemCallToActionSchema.optional()
+});
 var searchResponseBodySchema = z.object({
   results: z.array(searchResultSchema)
 });
@@ -6296,6 +6295,13 @@ var constSchemaSchema = z.object({
   analyticsId: z.string().optional(),
   disabled: z.boolean().optional()
 });
+var statusListLayoutSchema = z.object({
+  type: z.literal("status-list"),
+  items: z.array(statusListLayoutItemSchema),
+  title: z.string().optional(),
+  control: z.string().optional(),
+  margin: sizeSchema.optional()
+});
 var layoutSchema = z.lazy(
   () => z.union([
     alertLayoutSchema,
@@ -14708,10 +14714,9 @@ var priorities = {
   positive: "primary",
   negative: "primary"
 };
-var getButtonPriority = (component) => {
-  var _a;
-  const actionType = component.action.type;
-  return (_a = component.control) != null ? _a : actionType ? priorities[actionType] : "secondary";
+var getButtonPriority = (control, action) => {
+  const actionType = action ? action.type : void 0;
+  return control != null ? control : actionType ? priorities[actionType] : "secondary";
 };
 var contextToType = {
   positive: "positive",
@@ -14726,13 +14731,16 @@ var actionTypeToType = {
   positive: "positive",
   negative: "negative"
 };
-var getButtonType = (component) => {
-  if (component.context) {
-    return contextToType[component.context];
+var getButtonType = (context, action) => {
+  if (context) {
+    return contextToType[context];
   }
-  const actionType = component.action.type;
+  const actionType = action ? action.type : void 0;
   return actionType ? actionTypeToType[actionType] : "accent";
 };
+var getButtonTypeFromContext = (context) => {
+  return context ? contextToType[context] : "accent";
+};
 var getButtonSize = (size) => {
   switch (size) {
     case "xs":
@@ -14750,13 +14758,55 @@ var getButtonSize = (size) => {
 // src/legacy/layout/button/DynamicButton.tsx
 import { jsx as jsx72 } from "react/jsx-runtime";
 function DynamicButton(props) {
-  var _a;
+  return props.component.behavior ? /* @__PURE__ */ jsx72(DynamicButtonWithBehavior, __spreadValues({}, props)) : /* @__PURE__ */ jsx72(DynamicButtonWithoutBehavior, __spreadValues({}, props));
+}
+function DynamicButtonWithoutBehavior(props) {
+  var _a, _b;
   const { component, onAction } = props;
   const componentAction = component.action;
-  const type = getButtonType(component);
-  const priority = getButtonPriority(component);
+  const type = getButtonType(component.context, componentAction);
+  const priority = getButtonPriority(component.control, componentAction);
+  const { loading } = useDynamicFlow();
+  const className = getMargin2(component.margin || "md");
+  const disabled = loading || component.disabled || (componentAction == null ? void 0 : componentAction.disabled);
+  const title = (_b = (_a = component.title) != null ? _a : componentAction == null ? void 0 : componentAction.title) != null ? _b : "";
+  const onClick = () => {
+    if (componentAction) {
+      onAction(componentAction);
+    }
+  };
+  return /* @__PURE__ */ jsx72(
+    Button6,
+    {
+      size: getButtonSize(component.size),
+      type: priority === "tertiary" ? void 0 : type,
+      priority,
+      block: true,
+      className,
+      disabled,
+      onClick,
+      children: title
+    }
+  );
+}
+function DynamicButtonWithBehavior(props) {
+  var _a, _b;
+  const { component } = props;
+  const type = getButtonTypeFromContext(component.context);
+  const priority = (_a = component.control) != null ? _a : "secondary";
   const { loading } = useDynamicFlow();
   const className = getMargin2(component.margin || "md");
+  const disabled = loading || component.disabled;
+  const title = (_b = component.title) != null ? _b : "";
+  const onClick = () => {
+    const { behavior } = component;
+    if (behavior == null ? void 0 : behavior.action) {
+      props.onAction(behavior.action);
+    }
+    if (behavior == null ? void 0 : behavior.link) {
+      window.open(behavior.link.url, "_blank");
+    }
+  };
   return /* @__PURE__ */ jsx72(
     Button6,
     {
@@ -14765,9 +14815,9 @@ function DynamicButton(props) {
       priority,
       block: true,
       className,
-      disabled: loading || component.disabled || componentAction.disabled,
-      onClick: () => onAction(componentAction),
-      children: (_a = component.title) != null ? _a : componentAction.title
+      disabled,
+      onClick,
+      children: title
     }
   );
 }
@@ -16311,7 +16361,7 @@ var _FormControl = class _FormControl extends PureComponent {
             UNSAFE_inputAttributes: {
               id,
               "aria-invalid": invalid,
-              "aria-labelledby": void 0,
+              "aria-labelledby": labelledBy,
               "aria-describedby": describedBy
             },
             onChange: this.handleOnChange
@@ -16343,7 +16393,7 @@ var _FormControl = class _FormControl extends PureComponent {
             UNSAFE_triggerButtonProps: {
               id,
               "aria-invalid": invalid,
-              "aria-labelledby": void 0,
+              "aria-labelledby": labelledBy,
               "aria-describedby": describedBy
             },
             items: items.map((value2) => ({
@@ -16864,11 +16914,12 @@ function OneOfSchema(props) {
     "has-error": !changed && props.errors && !isEmpty(props.errors) || (props.submitted || changed && blurred) && validations.length
   };
   const feedbackId = `${id}-feedback`;
+  const labelId = `${id}-label`;
   return /* @__PURE__ */ jsxs32(Fragment15, { children: [
     (props.schema.oneOf.length > 1 || isConstSchema2(props.schema.oneOf[0])) && /* @__PURE__ */ jsxs32(Fragment15, { children: [
       props.schema.alert && /* @__PURE__ */ jsx91(DynamicAlert_default, { component: props.schema.alert }),
       /* @__PURE__ */ jsxs32("div", { className: (0, import_classnames11.default)(formGroupClasses), children: [
-        getTitleAndHelp(props.schema, id),
+        getTitleAndHelp(props.schema, id, labelId),
         /* @__PURE__ */ jsx91(
           SchemaFormControl_default,
           {
@@ -16878,6 +16929,7 @@ function OneOfSchema(props) {
             disabled,
             invalid: !isEmpty(props.errors) || validations.length > 0,
             describedBy: feedbackId,
+            labelledBy: labelId,
             required,
             onChange: onChooseNewSchema,
             onFocus,
@@ -16916,10 +16968,10 @@ function OneOfSchema(props) {
     )
   ] });
 }
-function getTitleAndHelp(schema, forId) {
+function getTitleAndHelp(schema, forId, labelId) {
   var _a;
   const helpElement = schema.help ? /* @__PURE__ */ jsx91(Help_default2, { help: schema.help }) : null;
-  const titleElement = isConstSchema2(schema.oneOf[0]) ? /* @__PURE__ */ jsx91("div", { className: "m-b-1", children: /* @__PURE__ */ jsxs32("label", { className: "control-label d-inline", htmlFor: forId, children: [
+  const titleElement = isConstSchema2(schema.oneOf[0]) ? /* @__PURE__ */ jsx91("div", { className: "m-b-1", children: /* @__PURE__ */ jsxs32("label", { className: "control-label d-inline", id: labelId, htmlFor: forId, children: [
     schema.title,
     " ",
     helpElement

package/build/types/legacy/layout/button/DynamicButton.d.ts

@@ -1,7 +1,9 @@
-import type { ButtonLayout } from '@wise/dynamic-flow-types';
+import type { Behavior, ButtonLayout } from '@wise/dynamic-flow-types';
 import type { CommonLayoutProps } from '../DynamicLayout';
 type Props = Omit<CommonLayoutProps, 'submitted' | 'onModelChange' | 'onPersistAsync'> & {
-    component: ButtonLayout;
+    component: ButtonLayout & {
+        behavior?: Behavior;
+    };
 };
 declare function DynamicButton(props: Props): import("react/jsx-runtime").JSX.Element;
 export default DynamicButton;

package/build/types/legacy/layout/button/utils.d.ts

@@ -1,4 +1,5 @@
-import type { ButtonLayout, Size } from '@wise/dynamic-flow-types';
-export declare const getButtonPriority: (component: ButtonLayout) => "primary" | "secondary" | "tertiary";
-export declare const getButtonType: (component: ButtonLayout) => "positive" | "negative" | "accent";
+import type { Action, Size } from '@wise/dynamic-flow-types';
+export declare const getButtonPriority: (control: "primary" | "secondary" | "tertiary" | undefined, action: Action | undefined) => "primary" | "secondary" | "tertiary";
+export declare const getButtonType: (context: "positive" | "negative" | "neutral" | undefined, action: Action | undefined) => "positive" | "negative" | "accent";
+export declare const getButtonTypeFromContext: (context: "positive" | "negative" | "neutral" | undefined) => "positive" | "negative" | "accent";
 export declare const getButtonSize: (size: Size | undefined) => "sm" | "md" | "lg";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.20.1",
+  "version": "3.21.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -103,7 +103,7 @@
     "nanoid": "5.0.7",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.22.4"
+    "@wise/dynamic-flow-types": "2.23.1"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",