@tesouro/embedded-components-react 0.2.175 → 0.2.176

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

@@ -1,236 +1,122 @@
-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,
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { useMemo as P } from "react";
+import { Skeleton as o } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { GapCoverageAlert as x } from "./index6.js";
+import { NoPolicyBanner as A } from "./index4.js";
+import { PolicyCard as y } from "./index14.js";
+import { UnlistedPoliciesNotice as G } from "./index8.js";
+import { ApprovalPoliciesListDefaultLabels as s } from "./index19.js";
+const D = ({
+  items: r,
+  editingId: w,
+  onAddRule: g,
+  gaps: p,
+  onSelectGap: N,
+  unlistedPoliciesHeading: n,
+  unlistedPoliciesBlockAmounts: h,
+  unlistedPoliciesStillApply: v,
+  createRuleDisabledReason: m,
+  isLoading: b,
   disabled: d,
-  error: i,
-  labels: l,
-  testId: A
+  labels: e
 }) => {
-  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)
+  const c = P(
+    () => ({
+      ...s,
+      ...e,
+      GapCoverageAlert: {
+        ...s.GapCoverageAlert,
+        ...e?.GapCoverageAlert
       },
-      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("");
+      NoPolicyBanner: {
+        ...s.NoPolicyBanner,
+        ...e?.NoPolicyBanner
       },
-      children: [
-        /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ r(
+      UnlistedPoliciesNotice: {
+        ...s.UnlistedPoliciesNotice,
+        ...e?.UnlistedPoliciesNotice
+      }
+    }),
+    [e]
+  ), f = n ? /* @__PURE__ */ t(
+    G,
+    {
+      heading: n,
+      showAmountsBlocked: h,
+      showStillApply: v,
+      labels: c.UnlistedPoliciesNotice
+    }
+  ) : null;
+  if (b && r.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, i) => /* @__PURE__ */ a(
           "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"}`,
+            className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:rounded-xl ttw:border ttw:border-border ttw:bg-card ttw:p-6",
             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__ */ a("div", { className: "ttw:flex ttw:items-center ttw:justify-between", children: [
+                /* @__PURE__ */ t(o, { className: "ttw:h-5 ttw:w-64" }),
+                /* @__PURE__ */ t(o, { className: "ttw:h-8 ttw:w-8" })
+              ] }),
+              /* @__PURE__ */ t(o, { className: "ttw:h-4 ttw:w-80" }),
+              /* @__PURE__ */ t(o, { className: "ttw:h-6 ttw:w-32" })
             ]
-          }
-        ) }),
-        /* @__PURE__ */ e(
-          _,
-          {
-            align: "start",
-            sideOffset: 4,
-            onOpenAutoFocus: (t) => t.preventDefault(),
-            onInteractOutside: (t) => {
-              t.target instanceof Node && x.current?.contains(t.target) && t.preventDefault();
+          },
+          i
+        ))
+      }
+    );
+  if (r.length === 0)
+    return /* @__PURE__ */ a("div", { className: "ttw:flex ttw:w-full ttw:flex-col ttw:gap-4", children: [
+      f,
+      /* @__PURE__ */ t(
+        A,
+        {
+          onCreateRule: g,
+          disabled: d || m !== void 0,
+          createRuleDisabledReason: m,
+          hasUnlistedRules: n !== void 0,
+          labels: c.NoPolicyBanner
+        }
+      )
+    ] });
+  const u = w !== null;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-testid": "approval-policies-list",
+      className: "ttw:flex ttw:w-full ttw:flex-col ttw:gap-4",
+      children: [
+        f,
+        /* @__PURE__ */ t("div", { className: "ttw:flex ttw:flex-col ttw:gap-4", children: r.map((l) => {
+          const i = l.id === w;
+          return /* @__PURE__ */ t(
+            y,
+            {
+              ...l,
+              isEditing: i,
+              disabled: d || u && !i
             },
-            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
-            ] }) })
+            l.id
+          );
+        }) }),
+        p.length > 0 ? /* @__PURE__ */ t(
+          x,
+          {
+            gaps: p,
+            onSelectGap: N,
+            disabled: d || u,
+            labels: c.GapCoverageAlert
           }
-        )
+        ) : null
       ]
     }
-  ) });
+  );
 };
 export {
-  Z as ApproverPicker
+  D as ApprovalPoliciesList
 };

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

@@ -0,0 +1,11 @@
+import { GapCoverageAlertDefaultLabels as e } from "./index7.js";
+import { NoPolicyBannerDefaultLabels as o } from "./index5.js";
+import { UnlistedPoliciesNoticeDefaultLabels as a } from "./index9.js";
+const r = {
+  GapCoverageAlert: e,
+  NoPolicyBanner: o,
+  UnlistedPoliciesNotice: a
+};
+export {
+  r as ApprovalPoliciesListDefaultLabels
+};

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

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