@tesouro/embedded-components-react 0.2.7 → 0.2.16

package/dist/libs/tesouro-embedded-components-react/team-widget/ui/dist/index10.js

@@ -1,169 +1,298 @@
 "use client";
-import { jsxs as r, jsx as t, Fragment as z } from "react/jsx-runtime";
-import { useRef as T, useEffect as D } from "react";
-import { Plus as L, Building2 as B, UsersIcon as j } from "lucide-react";
-import { Button as F, Table as A, TableHeader as E, TableRow as d, TableHead as o, TableBody as H, TableCell as i, Badge as u, Skeleton as l } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useRef as j, useMemo as z, useEffect as q } from "react";
+import { ArrowLeftIcon as G, SendIcon as U } from "lucide-react";
+import { Button as M, Label as C, Input as S, Select as W, SelectTrigger as $, SelectValue as J, SelectContent as K, SelectItem as D } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
 import "@radix-ui/react-use-controllable-state";
 import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
-import { PaginationFooter as R } from "../../../shared/ui/dist/lib/PaginationFooter/PaginationFooter.js";
-import { DEFAULT_LABELS as I } from "./index14.js";
-import { statusToneClassName as U } from "./index11.js";
-const K = [5, 10, 25], O = 4;
-function $() {
-  return /* @__PURE__ */ t(z, { children: Array.from({ length: 5 }).map((n, s) => /* @__PURE__ */ r(d, { children: [
-    /* @__PURE__ */ t(i, { children: /* @__PURE__ */ r("div", { className: "ttw:flex ttw:items-center ttw:gap-2", children: [
-      /* @__PURE__ */ t(l, { className: "ttw:size-8 ttw:rounded-full" }),
-      /* @__PURE__ */ r("div", { className: "ttw:flex-1 ttw:space-y-2", children: [
-        /* @__PURE__ */ t(l, { className: "ttw:h-4 ttw:w-32" }),
-        /* @__PURE__ */ t(l, { className: "ttw:h-3 ttw:w-44" })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(l, { className: "ttw:h-4 ttw:w-20" }) }),
-    /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(l, { className: "ttw:h-4 ttw:w-24" }) }),
-    /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(l, { className: "ttw:h-4 ttw:w-16" }) })
-  ] }, s)) });
+import { InlineErrorAlert as O } from "../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
+import { AccountAccessTable as Q } from "./index3.js";
+import { DEFAULT_LABELS as X } from "./index17.js";
+import { RoleCardGroup as Y } from "./index11.js";
+function E({ id: i, message: d }) {
+  return /* @__PURE__ */ t("p", { id: i, className: "ttw:text-sm ttw:text-destructive", children: d });
 }
-function h({
-  title: n,
-  description: s
+const R = "__none__";
+function x({
+  id: i,
+  label: d,
+  value: p,
+  options: g,
+  placeholder: A,
+  emptyMessage: m,
+  loadingMessage: u,
+  noneLabel: v,
+  isLoading: l = !1,
+  isError: h = !1,
+  errorMessage: y,
+  errorHelper: N,
+  emptyHelper: b,
+  readyHelper: f,
+  disabled: w,
+  onValueChange: s
 }) {
-  return /* @__PURE__ */ t(d, { className: "ttw:hover:bg-transparent", children: /* @__PURE__ */ t(i, { colSpan: O, className: "ttw:p-0", children: /* @__PURE__ */ r("div", { className: "ttw:flex ttw:flex-col ttw:items-center ttw:justify-center ttw:px-4 ttw:py-14 ttw:text-center", children: [
-    /* @__PURE__ */ t("div", { className: "ttw:mb-4 ttw:flex ttw:size-14 ttw:items-center ttw:justify-center ttw:rounded-2xl ttw:bg-muted", children: /* @__PURE__ */ t(j, { className: "ttw:size-6 ttw:text-muted-foreground" }) }),
-    /* @__PURE__ */ t("h3", { className: "ttw:mb-2 ttw:text-lg ttw:font-bold ttw:tracking-tight ttw:text-foreground", children: n }),
-    /* @__PURE__ */ t("p", { className: "ttw:max-w-sm ttw:text-sm ttw:text-muted-foreground", children: s })
-  ] }) }) });
+  const r = g.length > 0, L = h ? y ?? m : l ? u : r ? A : m, c = h ? N : !l && !r ? b : r ? f : void 0;
+  return /* @__PURE__ */ o("div", { className: "ttw:space-y-2", children: [
+    /* @__PURE__ */ t(C, { htmlFor: i, children: d }),
+    /* @__PURE__ */ o(
+      W,
+      {
+        value: p || void 0,
+        disabled: w || l || !r,
+        onValueChange: (n) => s(n === R ? "" : n),
+        children: [
+          /* @__PURE__ */ t($, { id: i, className: "ttw:w-full", children: /* @__PURE__ */ t(J, { placeholder: L }) }),
+          /* @__PURE__ */ o(K, { children: [
+            p ? /* @__PURE__ */ t(D, { value: R, children: v }) : null,
+            g.map((n) => /* @__PURE__ */ t(D, { value: n.value, children: n.label }, n.value))
+          ] })
+        ]
+      }
+    ),
+    c ? /* @__PURE__ */ t("p", { className: "ttw:text-xs ttw:text-muted-foreground", children: c }) : null
+  ] });
 }
-function X({
-  rows: n,
-  isLoading: s = !1,
-  isError: f = !1,
-  showPagination: b = !1,
-  isPreviousPageDisabled: g = !1,
-  isNextPageDisabled: p = !1,
-  pageSize: x = 10,
-  pageSizeOptions: N = K,
-  rangeLabel: v = "",
-  onPageSizeChange: y,
-  autoFocusRowKey: c,
-  onPreviousPageClick: k,
-  onNextPageClick: C,
-  onInviteClick: w,
-  labels: P
+function ce({
+  form: i,
+  roleOptions: d,
+  departmentOptions: p,
+  locationOptions: g,
+  reportingManagerOptions: A,
+  accountAccessOptions: m,
+  departmentsLoading: u = !1,
+  locationsLoading: v = !1,
+  reportingManagersLoading: l = !1,
+  departmentsError: h = !1,
+  locationsError: y = !1,
+  reportingManagersError: N = !1,
+  accountAccessLoading: b = !1,
+  accountAccessError: f = !1,
+  isAccountAccessVisible: w = !1,
+  isAccountAccessAdmin: s = !1,
+  errors: r,
+  submitErrorMessage: L,
+  isSubmitting: c = !1,
+  onFormChange: n,
+  onBackClick: T,
+  onCancel: B,
+  onSubmit: V,
+  labels: k
 }) {
-  const a = { ...I, ...P }, m = T(null);
-  return D(() => {
-    if (!c)
-      return;
-    const e = m.current;
-    e && (e.querySelector(
-      `button[data-row-key="${CSS.escape(c)}"]`
-    ) ?? e).focus();
-  }, [c]), /* @__PURE__ */ r(
+  const e = { ...X, ...k }, H = j(null), I = z(
+    () => m.map((a) => ({
+      ...a,
+      checked: s || i.accountAccess.includes(a.value)
+    })),
+    [m, s, i.accountAccess]
+  ), F = (a, _) => {
+    n({
+      ...i,
+      accountAccess: _ ? [...i.accountAccess, a] : i.accountAccess.filter((P) => P !== a)
+    });
+  };
+  return q(() => {
+    H.current?.focus();
+  }, []), /* @__PURE__ */ o(
     "section",
     {
-      ref: m,
-      tabIndex: -1,
-      "aria-label": a.title,
-      "aria-busy": s || void 0,
-      className: "ttw:overflow-hidden ttw:rounded-md ttw:border ttw:border-border ttw:bg-background",
+      "aria-label": e.inviteTitle,
+      className: "ttw:rounded-md ttw:border ttw:border-border ttw:bg-card ttw:p-4",
       children: [
-        s && /* @__PURE__ */ t("span", { role: "status", className: "ttw:sr-only", children: a.loadingLabel }),
-        /* @__PURE__ */ r("div", { className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4 ttw:border-b ttw:border-border ttw:p-3", children: [
-          /* @__PURE__ */ t("h2", { className: "ttw:text-lg ttw:font-semibold ttw:text-foreground", children: a.title }),
-          w && /* @__PURE__ */ r(F, { size: "sm", disabled: s, onClick: w, children: [
-            /* @__PURE__ */ t(L, { "aria-hidden": !0, className: "ttw:size-4" }),
-            a.inviteButton
-          ] })
-        ] }),
-        /* @__PURE__ */ r(A, { children: [
-          /* @__PURE__ */ t(E, { children: /* @__PURE__ */ r(d, { className: "ttw:hover:bg-transparent", children: [
-            /* @__PURE__ */ t(o, { children: a.nameColumn }),
-            /* @__PURE__ */ t(o, { children: a.roleColumn }),
-            /* @__PURE__ */ t(o, { children: a.departmentColumn }),
-            /* @__PURE__ */ t(o, { children: a.statusColumn })
-          ] }) }),
-          /* @__PURE__ */ t(H, { children: f ? /* @__PURE__ */ t(
-            h,
-            {
-              title: a.errorTitle,
-              description: a.errorDescription
-            }
-          ) : s ? /* @__PURE__ */ t($, {}) : n.length === 0 ? /* @__PURE__ */ t(
-            h,
-            {
-              title: a.emptyTitle,
-              description: a.emptyDescription
-            }
-          ) : n.map((e) => /* @__PURE__ */ r(
-            d,
-            {
-              "data-testid": `team-member-row-${e.key}`,
-              className: "ttw:cursor-pointer",
-              onClick: () => e.onSelect(),
-              children: [
-                /* @__PURE__ */ t(i, { children: /* @__PURE__ */ r(
-                  "button",
+        /* @__PURE__ */ o(
+          M,
+          {
+            ref: H,
+            variant: "ghost",
+            size: "sm",
+            disabled: c,
+            onClick: T,
+            children: [
+              /* @__PURE__ */ t(G, { "aria-hidden": !0, className: "ttw:size-4" }),
+              e.inviteBackToTeamButton
+            ]
+          }
+        ),
+        /* @__PURE__ */ t("h3", { className: "ttw:mt-4 ttw:text-lg ttw:font-semibold ttw:text-foreground", children: e.inviteTitle }),
+        /* @__PURE__ */ t(
+          "form",
+          {
+            noValidate: !0,
+            className: "ttw:mt-4",
+            onSubmit: (a) => {
+              a.preventDefault(), V();
+            },
+            children: /* @__PURE__ */ o("fieldset", { className: "ttw:space-y-6", disabled: c, children: [
+              /* @__PURE__ */ o("div", { className: "ttw:space-y-4", children: [
+                /* @__PURE__ */ t("h4", { className: "ttw:text-base ttw:font-semibold ttw:text-foreground", children: e.inviteDetailsSectionHeading }),
+                /* @__PURE__ */ o("div", { className: "ttw:space-y-2", children: [
+                  /* @__PURE__ */ t(C, { htmlFor: "team-invite-name", children: e.inviteNameLabel }),
+                  /* @__PURE__ */ t(
+                    S,
+                    {
+                      id: "team-invite-name",
+                      name: "name",
+                      autoComplete: "name",
+                      required: !0,
+                      value: i.name,
+                      "aria-invalid": r?.name ? !0 : void 0,
+                      "aria-describedby": r?.name ? "team-invite-name-error" : void 0,
+                      onChange: (a) => n({ ...i, name: a.target.value })
+                    }
+                  ),
+                  r?.name && /* @__PURE__ */ t(E, { id: "team-invite-name-error", message: r.name })
+                ] }),
+                /* @__PURE__ */ o("div", { className: "ttw:space-y-2", children: [
+                  /* @__PURE__ */ t(C, { htmlFor: "team-invite-email", children: e.inviteWorkEmailLabel }),
+                  /* @__PURE__ */ t(
+                    S,
+                    {
+                      id: "team-invite-email",
+                      name: "email",
+                      type: "email",
+                      autoComplete: "email",
+                      required: !0,
+                      value: i.email,
+                      "aria-invalid": r?.email ? !0 : void 0,
+                      "aria-describedby": r?.email ? "team-invite-email-error" : void 0,
+                      onChange: (a) => n({ ...i, email: a.target.value })
+                    }
+                  ),
+                  r?.email && /* @__PURE__ */ t(
+                    E,
+                    {
+                      id: "team-invite-email-error",
+                      message: r.email
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ o("div", { className: "ttw:grid ttw:grid-cols-1 ttw:gap-4 ttw:sm:grid-cols-2", children: [
+                  /* @__PURE__ */ t(
+                    x,
+                    {
+                      id: "team-invite-department",
+                      label: e.inviteDepartmentLabel,
+                      value: i.department,
+                      options: p,
+                      placeholder: e.inviteDepartmentPlaceholder,
+                      emptyMessage: e.inviteDepartmentEmpty,
+                      loadingMessage: e.inviteOptionsLoading,
+                      noneLabel: e.inviteOptionNone,
+                      isLoading: u,
+                      isError: h,
+                      errorMessage: e.inviteDepartmentLoadError,
+                      errorHelper: e.inviteDepartmentLoadErrorHelper,
+                      emptyHelper: e.inviteDepartmentEmptyHelper,
+                      onValueChange: (a) => n({ ...i, department: a })
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    x,
+                    {
+                      id: "team-invite-location",
+                      label: e.inviteLocationLabel,
+                      value: i.location,
+                      options: g,
+                      placeholder: e.inviteLocationPlaceholder,
+                      emptyMessage: e.inviteLocationEmpty,
+                      loadingMessage: e.inviteOptionsLoading,
+                      noneLabel: e.inviteOptionNone,
+                      isLoading: v,
+                      isError: y,
+                      errorMessage: e.inviteLocationLoadError,
+                      errorHelper: e.inviteLocationLoadErrorHelper,
+                      emptyHelper: e.inviteLocationEmptyHelper,
+                      onValueChange: (a) => n({ ...i, location: a })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ t(
+                  x,
                   {
-                    type: "button",
-                    "data-row-key": e.key,
-                    onClick: (S) => {
-                      S.stopPropagation(), e.onSelect();
-                    },
-                    className: "ttw:flex ttw:w-full ttw:max-w-md ttw:items-center ttw:gap-2 ttw:rounded-md ttw:text-left ttw:outline-none ttw:focus-visible:ring-2 ttw:focus-visible:ring-ring ttw:focus-visible:ring-offset-2",
-                    children: [
-                      /* @__PURE__ */ t(
-                        "span",
-                        {
-                          "aria-hidden": !0,
-                          className: "ttw:flex ttw:size-8 ttw:shrink-0 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-muted ttw:text-xs ttw:font-semibold ttw:text-muted-foreground",
-                          children: e.initials
-                        }
-                      ),
-                      /* @__PURE__ */ r("div", { className: "ttw:min-w-0 ttw:flex-1", children: [
-                        /* @__PURE__ */ t("div", { className: "ttw:text-sm ttw:font-medium ttw:text-foreground", children: e.name }),
-                        /* @__PURE__ */ t("div", { className: "ttw:truncate ttw:text-sm ttw:text-muted-foreground", children: e.email })
-                      ] })
-                    ]
+                    id: "team-invite-reporting-manager",
+                    label: e.inviteReportingManagerLabel,
+                    value: i.reportingManager,
+                    options: A,
+                    placeholder: e.inviteReportingManagerPlaceholder,
+                    emptyMessage: e.inviteReportingManagerEmpty,
+                    loadingMessage: e.inviteOptionsLoading,
+                    noneLabel: e.inviteOptionNone,
+                    isLoading: l,
+                    isError: N,
+                    errorMessage: e.inviteReportingManagerLoadError,
+                    errorHelper: e.inviteReportingManagerLoadErrorHelper,
+                    emptyHelper: e.inviteReportingManagerEmptyHelper,
+                    readyHelper: e.inviteReportingManagerHelper,
+                    onValueChange: (a) => n({ ...i, reportingManager: a })
                   }
-                ) }),
-                /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(
-                  u,
+                )
+              ] }),
+              /* @__PURE__ */ o("div", { className: "ttw:space-y-1", children: [
+                /* @__PURE__ */ t(
+                  "div",
                   {
-                    variant: "outline",
-                    className: "ttw:rounded ttw:border-[#D0D5DD] ttw:font-medium ttw:text-[#344054]",
-                    children: e.roleLabel
+                    id: "team-invite-role-heading",
+                    className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
+                    children: e.inviteRoleSectionHeading
+                  }
+                ),
+                /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:text-muted-foreground", children: e.inviteRoleSectionDescription }),
+                /* @__PURE__ */ t("div", { className: "ttw:mt-3", children: /* @__PURE__ */ t(
+                  Y,
+                  {
+                    idPrefix: "team-invite-role",
+                    options: d,
+                    value: i.role,
+                    onValueChange: (a) => n({ ...i, role: a }),
+                    ariaLabelledBy: "team-invite-role-heading",
+                    ariaInvalid: !!r?.role,
+                    ariaDescribedBy: r?.role ? "team-invite-role-error" : void 0
                   }
                 ) }),
-                /* @__PURE__ */ t(i, { children: /* @__PURE__ */ r("div", { className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-sm ttw:font-medium ttw:text-[#344054]", children: [
-                  /* @__PURE__ */ t(
-                    B,
-                    {
-                      "aria-hidden": !0,
-                      className: "ttw:size-4 ttw:shrink-0 ttw:text-[#98A2B3]"
+                r?.role && /* @__PURE__ */ t(E, { id: "team-invite-role-error", message: r.role })
+              ] }),
+              w && /* @__PURE__ */ o("div", { className: "ttw:space-y-2", children: [
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    id: "team-invite-account-access-heading",
+                    className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
+                    children: e.inviteAccountAccessSectionHeading
+                  }
+                ),
+                /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:text-muted-foreground", children: e.inviteAccountAccessSectionDescription }),
+                f ? /* @__PURE__ */ t(O, { children: e.inviteAccountAccessLoadError }) : b ? /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:text-muted-foreground", children: e.inviteOptionsLoading }) : /* @__PURE__ */ t(
+                  Q,
+                  {
+                    rows: I,
+                    onToggle: F,
+                    disabled: s,
+                    note: s ? e.inviteAccountAccessAdminNote : void 0,
+                    emptyMessage: e.inviteAccountAccessEmpty,
+                    labels: {
+                      accountNameColumn: e.accountAccessNameColumn,
+                      accessColumn: e.accountAccessAccessColumn,
+                      toggleAriaLabel: e.accountAccessToggleLabel
                     }
-                  ),
-                  /* @__PURE__ */ t("span", { children: e.departmentLabel })
-                ] }) }),
-                /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(u, { className: U(e.statusTone), children: e.statusLabel }) })
-              ]
-            },
-            e.key
-          )) })
-        ] }),
-        b && /* @__PURE__ */ t(
-          R,
-          {
-            pageSize: x,
-            pageSizeOptions: N,
-            rangeLabel: v,
-            isPreviousDisabled: g,
-            isNextDisabled: p,
-            isDisabled: s,
-            onPageSizeChange: y ?? (() => {
-            }),
-            onPreviousPageClick: k,
-            onNextPageClick: C,
-            labels: a
+                  }
+                )
+              ] }),
+              L && /* @__PURE__ */ t(O, { children: L }),
+              /* @__PURE__ */ o("div", { className: "ttw:flex ttw:justify-end ttw:gap-2", children: [
+                /* @__PURE__ */ t(M, { type: "button", variant: "ghost", onClick: B, children: e.inviteCancelButton }),
+                /* @__PURE__ */ o(
+                  M,
+                  {
+                    type: "submit",
+                    loading: c,
+                    disabled: u || v || l || w && (b || f),
+                    children: [
+                      e.inviteSubmitButton,
+                      /* @__PURE__ */ t(U, { "aria-hidden": !0, className: "ttw:size-4" })
+                    ]
+                  }
+                )
+              ] })
+            ] })
           }
         )
       ]
@@ -171,5 +300,6 @@ function X({
   );
 }
 export {
-  X as TeamMembersTable
+  ce as InviteTeamMemberForm,
+  x as OptionalSelect
 };

package/dist/libs/tesouro-embedded-components-react/team-widget/ui/dist/index11.js

@@ -1,11 +1,61 @@
-const e = {
-  success: "ttw:bg-[#ECFDF5] ttw:text-[#027A48]",
-  info: "ttw:bg-[#EFF8FF] ttw:text-[#175CD3]",
-  neutral: "ttw:bg-[#F2F4F7] ttw:text-[#344054]"
-}, w = "ttw:rounded ttw:border-transparent ttw:px-2 ttw:py-0.5 ttw:text-xs ttw:font-medium";
-function n(t) {
-  return `${w} ${e[t]}`;
+"use client";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { RadioGroup as p, Label as b, RadioGroupItem as f } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+function h({
+  options: i,
+  value: e,
+  onValueChange: o,
+  idPrefix: d,
+  disabled: s,
+  ariaLabelledBy: n,
+  ariaInvalid: w,
+  ariaDescribedBy: m
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      className: "ttw:gap-3",
+      value: e || void 0,
+      disabled: s,
+      "aria-labelledby": n,
+      "aria-invalid": w ? !0 : void 0,
+      "aria-describedby": m,
+      onValueChange: o,
+      children: i.map((t) => {
+        const u = t.icon, c = e === t.value, r = `${d}-${t.value}`;
+        return /* @__PURE__ */ l(
+          b,
+          {
+            htmlFor: r,
+            className: `ttw:flex ttw:w-full ttw:cursor-pointer ttw:items-start ttw:gap-3 ttw:rounded-xl ttw:border ttw:p-4 ${c ? "ttw:border-primary ttw:bg-primary/10" : "ttw:border-border ttw:bg-card"}`,
+            children: [
+              /* @__PURE__ */ a(
+                f,
+                {
+                  id: r,
+                  value: t.value,
+                  className: "ttw:mt-0.5"
+                }
+              ),
+              /* @__PURE__ */ a(
+                u,
+                {
+                  "aria-hidden": !0,
+                  className: "ttw:mt-0.5 ttw:size-4 ttw:shrink-0 ttw:text-foreground"
+                }
+              ),
+              /* @__PURE__ */ l("span", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:gap-1", children: [
+                /* @__PURE__ */ a("span", { className: "ttw:text-sm ttw:font-semibold ttw:text-foreground", children: t.label }),
+                t.description ? /* @__PURE__ */ a("span", { className: "ttw:text-sm ttw:font-normal ttw:leading-normal ttw:text-muted-foreground", children: t.description }) : null
+              ] })
+            ]
+          },
+          t.value
+        );
+      })
+    }
+  );
 }
 export {
-  n as statusToneClassName
+  h as RoleCardGroup
 };