@wise/dynamic-flow-client 3.20.1 → 3.21.0

package/build/main.js

@@ -6147,12 +6147,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(),
@@ -6160,6 +6154,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(),
@@ -6176,10 +6174,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(),
@@ -6240,12 +6234,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"),
@@ -6279,6 +6271,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)
 });
@@ -6320,6 +6319,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,
@@ -14726,10 +14732,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",
@@ -14744,13 +14749,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":
@@ -14768,13 +14776,55 @@ var getButtonSize = (size) => {
 // src/legacy/layout/button/DynamicButton.tsx
 var import_jsx_runtime73 = require("react/jsx-runtime");
 function DynamicButton(props) {
-  var _a;
+  return props.component.behavior ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DynamicButtonWithBehavior, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(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__ */ (0, import_jsx_runtime73.jsx)(
+    import_components42.Button,
+    {
+      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__ */ (0, import_jsx_runtime73.jsx)(
     import_components42.Button,
     {
@@ -14783,9 +14833,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
     }
   );
 }
@@ -16314,7 +16364,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
             UNSAFE_inputAttributes: {
               id,
               "aria-invalid": invalid,
-              "aria-labelledby": void 0,
+              "aria-labelledby": labelledBy,
               "aria-describedby": describedBy
             },
             onChange: this.handleOnChange
@@ -16346,7 +16396,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
             UNSAFE_triggerButtonProps: {
               id,
               "aria-invalid": invalid,
-              "aria-labelledby": void 0,
+              "aria-labelledby": labelledBy,
               "aria-describedby": describedBy
             },
             items: items.map((value2) => ({
@@ -16867,11 +16917,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__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
     (props.schema.oneOf.length > 1 || isConstSchema2(props.schema.oneOf[0])) && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
       props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DynamicAlert_default, { component: props.schema.alert }),
       /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: (0, import_classnames11.default)(formGroupClasses), children: [
-        getTitleAndHelp(props.schema, id),
+        getTitleAndHelp(props.schema, id, labelId),
         /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           SchemaFormControl_default,
           {
@@ -16881,6 +16932,7 @@ function OneOfSchema(props) {
             disabled,
             invalid: !isEmpty(props.errors) || validations.length > 0,
             describedBy: feedbackId,
+            labelledBy: labelId,
             required,
             onChange: onChooseNewSchema,
             onFocus,
@@ -16919,10 +16971,10 @@ function OneOfSchema(props) {
     )
   ] });
 }
-function getTitleAndHelp(schema, forId) {
+function getTitleAndHelp(schema, forId, labelId) {
   var _a;
   const helpElement = schema.help ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Help_default2, { help: schema.help }) : null;
-  const titleElement = isConstSchema2(schema.oneOf[0]) ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "m-b-1", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("label", { className: "control-label d-inline", htmlFor: forId, children: [
+  const titleElement = isConstSchema2(schema.oneOf[0]) ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "m-b-1", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("label", { className: "control-label d-inline", id: labelId, htmlFor: forId, children: [
     schema.title,
     " ",
     helpElement