@tesouro/embedded-components-react 0.2.160 → 0.2.162

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/ui/dist/index12.js

@@ -0,0 +1,170 @@
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { useMemo as I, Fragment as h } from "react";
+import { SquarePen as L, Trash2 as M } from "lucide-react";
+import { Button as d, Typography as n, TooltipProvider as $, Tooltip as q, TooltipTrigger as z, TooltipContent as O, Badge as U } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { AmountConditionBuilder as H } from "./index2.js";
+import { ApproverGroupsBuilder as J } from "./index10.js";
+import { PolicyCardDefaultLabels as p } from "./index13.js";
+const _ = ({
+  id: o,
+  title: f,
+  sentence: x,
+  approverSteps: c,
+  approverOptions: g,
+  amountCondition: C,
+  onAmountConditionChange: A,
+  onAmountFieldBlur: y,
+  amountConditionErrors: S,
+  onApproverStepsChange: B,
+  onAddApproverStep: N,
+  onRemoveApproverStep: D,
+  approverErrors: P,
+  addApproverStepDisabled: T,
+  isEditing: s,
+  onEdit: E,
+  onCancel: G,
+  onSave: k,
+  onDelete: u,
+  saveDisabled: m,
+  saveDisabledReasons: w,
+  disabled: a,
+  labels: l
+}) => {
+  const r = I(
+    () => ({
+      ...p,
+      ...l,
+      AmountConditionBuilder: {
+        ...p.AmountConditionBuilder,
+        ...l?.AmountConditionBuilder
+      },
+      ApproverGroupsBuilder: {
+        ...p.ApproverGroupsBuilder,
+        ...l?.ApproverGroupsBuilder
+      }
+    }),
+    [l]
+  ), v = /* @__PURE__ */ t(
+    d,
+    {
+      type: "button",
+      onClick: k,
+      disabled: a || m,
+      "data-testid": `policy-card-save-button-${o}`,
+      children: r.Save
+    }
+  ), j = {
+    steps: c,
+    options: g,
+    onStepsChange: B,
+    onAddStep: N,
+    onRemoveStep: D,
+    errors: P,
+    addStepDisabled: T,
+    disabled: a,
+    labels: r.ApproverGroupsBuilder
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-testid": `policy-card-${o}`,
+      className: `ttw:flex ttw:w-full ttw:flex-col ttw:gap-4 ttw:rounded-xl ttw:border ttw:bg-card ttw:p-6 ${s ? "ttw:border-primary" : "ttw:border-border"}`,
+      children: [
+        s ? null : /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4", children: [
+          /* @__PURE__ */ t(n, { variant: "body1", children: f }),
+          /* @__PURE__ */ t(
+            d,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": r.EditAriaLabel,
+              onClick: E,
+              disabled: a,
+              "data-testid": `policy-card-edit-button-${o}`,
+              children: /* @__PURE__ */ t(L, {})
+            }
+          )
+        ] }),
+        s ? /* @__PURE__ */ e("div", { className: "ttw:flex ttw:flex-col ttw:gap-4", children: [
+          /* @__PURE__ */ t(
+            H,
+            {
+              value: C,
+              onChange: A,
+              onFieldBlur: y,
+              errors: S,
+              disabled: a,
+              labels: r.AmountConditionBuilder
+            }
+          ),
+          /* @__PURE__ */ t(J, { ...j }),
+          /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-center ttw:gap-4 ttw:pt-2", children: [
+            u ? /* @__PURE__ */ e(
+              d,
+              {
+                type: "button",
+                variant: "ghost",
+                onClick: u,
+                disabled: a,
+                className: "ttw:w-fit ttw:px-0 ttw:text-destructive ttw:hover:text-destructive",
+                "data-testid": `policy-card-delete-button-${o}`,
+                children: [
+                  /* @__PURE__ */ t(M, {}),
+                  r.Delete
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ e("div", { className: "ttw:ml-auto ttw:flex ttw:items-center ttw:gap-2", children: [
+              /* @__PURE__ */ t(
+                d,
+                {
+                  type: "button",
+                  variant: "outline",
+                  onClick: G,
+                  disabled: a,
+                  "data-testid": `policy-card-cancel-button-${o}`,
+                  children: r.Cancel
+                }
+              ),
+              m && w?.length ? /* @__PURE__ */ t($, { children: /* @__PURE__ */ e(q, { children: [
+                /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ t(
+                  "span",
+                  {
+                    tabIndex: 0,
+                    className: "ttw:inline-flex ttw:cursor-not-allowed ttw:rounded-md",
+                    "data-testid": `policy-card-save-blocked-${o}`,
+                    children: v
+                  }
+                ) }),
+                /* @__PURE__ */ t(
+                  O,
+                  {
+                    side: "top",
+                    className: "ttw:flex ttw:flex-col ttw:gap-1",
+                    children: w.map((i) => /* @__PURE__ */ t("span", { children: i }, i))
+                  }
+                )
+              ] }) }) : v
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ e("div", { className: "ttw:flex ttw:flex-col ttw:gap-2.5", children: [
+          /* @__PURE__ */ t(n, { variant: "body2", color: "muted", className: "ttw:font-medium", children: x }),
+          c.map((i, F) => /* @__PURE__ */ e(h, { children: [
+            F > 0 ? /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-center ttw:gap-2.5 ttw:pl-1", children: [
+              /* @__PURE__ */ t(n, { variant: "caption", color: "muted", children: r.GroupConnector }),
+              /* @__PURE__ */ t("div", { className: "ttw:h-px ttw:flex-1 ttw:bg-border" })
+            ] }) : null,
+            /* @__PURE__ */ t("div", { className: "ttw:flex ttw:flex-wrap ttw:items-center ttw:gap-1.5", children: i.selectedItems.map((b, R) => /* @__PURE__ */ e(h, { children: [
+              R > 0 ? /* @__PURE__ */ t(n, { variant: "body2", color: "muted", children: r.ApproverConnector }) : null,
+              /* @__PURE__ */ t(U, { variant: "outline", children: b.label })
+            ] }, b.id)) })
+          ] }, i.id))
+        ] })
+      ]
+    }
+  );
+};
+export {
+  _ as PolicyCard
+};

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/ui/dist/index13.js

@@ -0,0 +1,15 @@
+import { AmountConditionBuilderDefaultLabels as e } from "./index3.js";
+import { APPROVER_GROUPS_BUILDER_LABELS_EN as o } from "./index11.js";
+const l = {
+  EditAriaLabel: "Edit rule",
+  Delete: "Delete",
+  Cancel: "Cancel",
+  Save: "Save",
+  ApproverConnector: "or",
+  GroupConnector: "And",
+  AmountConditionBuilder: e,
+  ApproverGroupsBuilder: o
+};
+export {
+  l as PolicyCardDefaultLabels
+};

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/ui/dist/index14.js

@@ -0,0 +1,65 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import { Trash2 as s } from "lucide-react";
+import { AlertDialog as u, AlertDialogContent as D, AlertDialogHeader as g, AlertDialogTitle as w, AlertDialogDescription as f, AlertDialogFooter as h, Button as n } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { DeleteRuleDialogDefaultLabels as p } from "./index15.js";
+const j = ({
+  open: r,
+  onOpenChange: o,
+  onConfirm: c,
+  onCancel: d,
+  isDeleting: a,
+  labels: i
+}) => {
+  const t = m(
+    () => ({ ...p, ...i }),
+    [i]
+  );
+  return /* @__PURE__ */ e(u, { open: r, onOpenChange: o, children: /* @__PURE__ */ l(
+    D,
+    {
+      "data-testid": "delete-rule-dialog",
+      className: "ttw:sm:max-w-sm",
+      children: [
+        /* @__PURE__ */ l(g, { className: "ttw:items-center ttw:text-center", children: [
+          /* @__PURE__ */ e("div", { className: "ttw:flex ttw:size-11 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-destructive", children: /* @__PURE__ */ e(s, { className: "ttw:size-4 ttw:text-white", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ e(w, { children: t.Title }),
+          /* @__PURE__ */ e(f, { children: t.Description })
+        ] }),
+        /* @__PURE__ */ l(h, { className: "ttw:sm:justify-center", children: [
+          /* @__PURE__ */ e(
+            n,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: d,
+              disabled: a,
+              className: "ttw:flex-1",
+              "data-testid": "delete-rule-dialog-cancel-button",
+              children: t.Cancel
+            }
+          ),
+          /* @__PURE__ */ l(
+            n,
+            {
+              type: "button",
+              variant: "destructive",
+              onClick: c,
+              disabled: a,
+              loading: a,
+              className: "ttw:flex-1",
+              "data-testid": "delete-rule-dialog-confirm-button",
+              children: [
+                /* @__PURE__ */ e(s, {}),
+                t.Delete
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  j as DeleteRuleDialog
+};

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/ui/dist/index15.js

@@ -0,0 +1,9 @@
+const e = {
+  Title: "Delete this rule?",
+  Description: "You can't undo this action.",
+  Cancel: "Cancel",
+  Delete: "Delete"
+};
+export {
+  e as DeleteRuleDialogDefaultLabels
+};

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/ui/dist/index16.js

@@ -0,0 +1,99 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+import { Skeleton as r } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { GapCoverageAlert as u } from "./index6.js";
+import { NoPolicyBanner as v } from "./index4.js";
+import { PolicyCard as N } from "./index12.js";
+import { ApprovalPoliciesListDefaultLabels as n } from "./index17.js";
+const B = ({
+  items: o,
+  editingId: d,
+  onAddRule: m,
+  gaps: w,
+  onSelectGap: f,
+  isLoading: g,
+  disabled: s,
+  labels: e
+}) => {
+  const c = b(
+    () => ({
+      ...n,
+      ...e,
+      GapCoverageAlert: {
+        ...n.GapCoverageAlert,
+        ...e?.GapCoverageAlert
+      },
+      NoPolicyBanner: {
+        ...n.NoPolicyBanner,
+        ...e?.NoPolicyBanner
+      }
+    }),
+    [e]
+  );
+  if (g && o.length === 0)
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        "data-testid": "approval-policies-loading",
+        className: "ttw:flex ttw:w-full ttw:flex-col ttw:gap-4",
+        children: Array.from({ length: 2 }).map((l, a) => /* @__PURE__ */ i(
+          "div",
+          {
+            className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:rounded-xl ttw:border ttw:border-border ttw:bg-card ttw:p-6",
+            children: [
+              /* @__PURE__ */ i("div", { className: "ttw:flex ttw:items-center ttw:justify-between", children: [
+                /* @__PURE__ */ t(r, { className: "ttw:h-5 ttw:w-64" }),
+                /* @__PURE__ */ t(r, { className: "ttw:h-8 ttw:w-8" })
+              ] }),
+              /* @__PURE__ */ t(r, { className: "ttw:h-4 ttw:w-80" }),
+              /* @__PURE__ */ t(r, { className: "ttw:h-6 ttw:w-32" })
+            ]
+          },
+          a
+        ))
+      }
+    );
+  if (o.length === 0)
+    return /* @__PURE__ */ t(
+      v,
+      {
+        onCreateRule: m,
+        disabled: s,
+        labels: c.NoPolicyBanner
+      }
+    );
+  const p = d !== null;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-testid": "approval-policies-list",
+      className: "ttw:flex ttw:w-full ttw:flex-col ttw:gap-4",
+      children: [
+        /* @__PURE__ */ t("div", { className: "ttw:flex ttw:flex-col ttw:gap-4", children: o.map((l) => {
+          const a = l.id === d;
+          return /* @__PURE__ */ t(
+            N,
+            {
+              ...l,
+              isEditing: a,
+              disabled: s || p && !a
+            },
+            l.id
+          );
+        }) }),
+        w.length > 0 ? /* @__PURE__ */ t(
+          u,
+          {
+            gaps: w,
+            onSelectGap: f,
+            disabled: s || p,
+            labels: c.GapCoverageAlert
+          }
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  B as ApprovalPoliciesList
+};

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/ui/dist/index17.js

@@ -0,0 +1,9 @@
+import { GapCoverageAlertDefaultLabels as e } from "./index7.js";
+import { NoPolicyBannerDefaultLabels as a } from "./index5.js";
+const l = {
+  GapCoverageAlert: e,
+  NoPolicyBanner: a
+};
+export {
+  l as ApprovalPoliciesListDefaultLabels
+};

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/ui/dist/index18.js

@@ -0,0 +1,236 @@
+import { jsx as e, jsxs as r, Fragment as C } from "react/jsx-runtime";
+import { useState as k, useId as $, useRef as S, useMemo as P, Fragment as H } from "react";
+import { X as j, CircleAlert as I, ChevronDown as U } from "lucide-react";
+import { TooltipProvider as B, Popover as K, PopoverAnchor as W, Badge as X, Tooltip as T, TooltipTrigger as D, TooltipContent as M, PopoverContent as _, Typography as u, Checkbox as q } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+function E({
+  id: a,
+  label: o
+}) {
+  return { id: a, label: o };
+}
+function G({
+  option: a,
+  isSelected: o,
+  isDisabled: s,
+  reason: c,
+  onToggle: d
+}) {
+  const i = /* @__PURE__ */ r(
+    "label",
+    {
+      "data-testid": `approver-option-${a.id}`,
+      "aria-selected": o,
+      "aria-disabled": s,
+      className: `ttw:flex ttw:w-full ttw:items-center ttw:gap-2 ttw:rounded-sm ttw:px-2 ttw:py-1.5 ttw:text-sm ${s ? "ttw:cursor-not-allowed ttw:opacity-50" : "ttw:cursor-pointer hover:ttw:bg-accent hover:ttw:text-accent-foreground"}`,
+      children: [
+        /* @__PURE__ */ e(
+          q,
+          {
+            checked: o,
+            onCheckedChange: () => {
+              s && !o || d();
+            }
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "ttw:min-w-0 ttw:flex-1 ttw:truncate", children: a.label }),
+        a.sublabel ? /* @__PURE__ */ e("span", { className: "ttw:shrink-0 ttw:text-xs ttw:text-muted-foreground", children: a.sublabel }) : null
+      ]
+    }
+  );
+  return c ? /* @__PURE__ */ r(T, { children: [
+    /* @__PURE__ */ e(D, { asChild: !0, children: i }),
+    /* @__PURE__ */ e(M, { side: "right", children: c })
+  ] }) : i;
+}
+const Z = ({
+  value: a,
+  options: o,
+  onChange: s,
+  lockedSections: c,
+  disabled: d,
+  error: i,
+  labels: l,
+  testId: A
+}) => {
+  const [R, w] = k(!1), [p, h] = k(""), m = $(), b = S(null), x = S(null), N = P(
+    () => new Set(a.map((t) => t.id)),
+    [a]
+  ), g = P(() => {
+    const t = p.trim().toLowerCase();
+    return t ? o.filter(
+      (n) => n.label.toLowerCase().includes(t) || n.sublabel?.toLowerCase().includes(t)
+    ) : o;
+  }, [o, p]), f = g.filter(
+    (t) => t.section === "roles"
+  ), v = g.filter(
+    (t) => t.section === "teamMembers"
+  ), y = (t) => {
+    const n = c?.[t.section];
+    return /* @__PURE__ */ e(
+      G,
+      {
+        option: t,
+        isSelected: N.has(t.id),
+        isDisabled: !!t.disabled || !!n,
+        reason: t.disabledReason ?? n,
+        onToggle: () => F(t)
+      },
+      t.id
+    );
+  }, F = (t) => {
+    N.has(t.id) ? s(a.filter((n) => n.id !== t.id)) : s([...a, E(t)]), h(""), b.current?.focus();
+  }, L = (t) => {
+    s(a.filter((n) => n.id !== t));
+  }, O = f.length > 0 && v.length > 0;
+  return /* @__PURE__ */ e(B, { children: /* @__PURE__ */ r(
+    K,
+    {
+      open: R,
+      onOpenChange: (t) => {
+        w(t), t || h("");
+      },
+      children: [
+        /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: x,
+            onPointerDown: () => {
+              d || w(!0);
+            },
+            onClick: () => {
+              d || b.current?.focus();
+            },
+            className: `ttw:flex ttw:min-h-9 ttw:w-full ttw:cursor-text ttw:flex-wrap ttw:items-center ttw:gap-1.5 ttw:rounded-md ttw:border ttw:bg-transparent ttw:px-2.5 ttw:py-1.5 ttw:has-[:disabled]:cursor-not-allowed ttw:has-[:disabled]:opacity-60 ${i ? "ttw:border-destructive" : "ttw:border-input"}`,
+            children: [
+              a.map((t, n) => /* @__PURE__ */ r(H, { children: [
+                n > 0 ? /* @__PURE__ */ e("span", { className: "ttw:text-xs ttw:text-muted-foreground", children: l.ApproverConnector }) : null,
+                /* @__PURE__ */ r(X, { variant: "outline", className: "ttw:gap-1 ttw:pr-1", children: [
+                  t.label,
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": l.RemoveApproverAriaLabel.replace(
+                        "{name}",
+                        t.label
+                      ),
+                      onClick: (z) => {
+                        z.stopPropagation(), L(t.id);
+                      },
+                      disabled: d,
+                      className: "ttw:inline-flex ttw:size-3.5 ttw:shrink-0 ttw:items-center ttw:justify-center ttw:rounded-sm ttw:opacity-70 ttw:disabled:cursor-not-allowed hover:ttw:opacity-100",
+                      children: /* @__PURE__ */ e(j, { className: "ttw:size-3" })
+                    }
+                  )
+                ] })
+              ] }, t.id)),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ref: b,
+                  type: "text",
+                  value: p,
+                  onChange: (t) => {
+                    h(t.target.value), w(!0);
+                  },
+                  onFocus: () => w(!0),
+                  disabled: d,
+                  placeholder: a.length === 0 ? l.ChoosePlaceholder : "",
+                  "aria-label": l.ChoosePlaceholder,
+                  "aria-invalid": !!i,
+                  "aria-describedby": i ? m : void 0,
+                  "data-testid": A,
+                  className: "ttw:min-w-16 ttw:flex-1 ttw:bg-transparent ttw:text-sm ttw:outline-none ttw:placeholder:text-muted-foreground ttw:disabled:cursor-not-allowed"
+                }
+              ),
+              i ? /* @__PURE__ */ r(C, { children: [
+                /* @__PURE__ */ r(T, { children: [
+                  /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-labelledby": m,
+                      onClick: (t) => t.stopPropagation(),
+                      className: "ttw:ml-auto ttw:inline-flex ttw:shrink-0 ttw:items-center ttw:rounded",
+                      children: /* @__PURE__ */ e(I, { className: "ttw:size-4 ttw:text-destructive" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(M, { side: "top", children: i })
+                ] }),
+                /* @__PURE__ */ e("span", { id: m, role: "alert", className: "ttw:sr-only", children: i })
+              ] }) : null,
+              /* @__PURE__ */ e(
+                U,
+                {
+                  "aria-hidden": "true",
+                  className: `ttw:size-4 ttw:shrink-0 ttw:text-muted-foreground ${i ? "ttw:ml-1" : "ttw:ml-auto"}`
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          _,
+          {
+            align: "start",
+            sideOffset: 4,
+            onOpenAutoFocus: (t) => t.preventDefault(),
+            onInteractOutside: (t) => {
+              t.target instanceof Node && x.current?.contains(t.target) && t.preventDefault();
+            },
+            className: "ttw:w-[var(--radix-popover-trigger-width)] ttw:min-w-80 ttw:p-2",
+            children: /* @__PURE__ */ e("div", { className: "ttw:max-h-64 ttw:overflow-y-auto", children: g.length === 0 ? /* @__PURE__ */ e(
+              u,
+              {
+                variant: "body2",
+                color: "muted",
+                className: "ttw:px-2 ttw:py-1.5",
+                children: o.length === 0 ? l.NoOptionsMessage : l.NoResultsMessage
+              }
+            ) : /* @__PURE__ */ r(C, { children: [
+              f.length > 0 ? /* @__PURE__ */ r("div", { role: "group", "aria-label": l.RolesSectionHeading, children: [
+                /* @__PURE__ */ e(
+                  u,
+                  {
+                    variant: "body2",
+                    color: "muted",
+                    className: "ttw:block ttw:px-2 ttw:py-1",
+                    children: l.RolesSectionHeading
+                  }
+                ),
+                f.map(y)
+              ] }) : null,
+              O ? /* @__PURE__ */ r("div", { className: "ttw:my-1 ttw:flex ttw:items-center ttw:gap-2 ttw:px-2", children: [
+                /* @__PURE__ */ e("div", { className: "ttw:h-px ttw:flex-1 ttw:bg-border" }),
+                /* @__PURE__ */ e(u, { variant: "caption", color: "muted", children: l.OrDividerLabel }),
+                /* @__PURE__ */ e("div", { className: "ttw:h-px ttw:flex-1 ttw:bg-border" })
+              ] }) : null,
+              v.length > 0 ? /* @__PURE__ */ r(
+                "div",
+                {
+                  role: "group",
+                  "aria-label": l.TeamMembersSectionHeading,
+                  children: [
+                    /* @__PURE__ */ e(
+                      u,
+                      {
+                        variant: "body2",
+                        color: "muted",
+                        className: "ttw:block ttw:px-2 ttw:py-1",
+                        children: l.TeamMembersSectionHeading
+                      }
+                    ),
+                    v.map(y)
+                  ]
+                }
+              ) : null
+            ] }) })
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  Z as ApproverPicker
+};