@tesouro/embedded-components-react 0.2.131 → 0.2.133

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

@@ -1,120 +1,218 @@
 "use client";
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { useRef as P, useMemo as j, useEffect as z } from "react";
-import { ArrowLeftIcon as q, SendIcon as G } from "lucide-react";
-import { Button as E, Label as C, Input as S, Select as U, SelectTrigger as W, SelectValue as J, SelectContent as K, SelectItem as O } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useRef as z, useMemo as _, useEffect as q, useState as G } from "react";
+import { ArrowLeftIcon as $, SendIcon as J, ChevronDownIcon as Q, CheckIcon as U } from "lucide-react";
+import { Button as M, Label as R, Input as D, Select as W, SelectTrigger as Y, SelectValue as K, SelectContent as X, SelectItem as O, Popover as Z, PopoverTrigger as ee, cn as te, PopoverContent as ae, Command as ie, CommandInput as ne, CommandList as re, CommandEmpty as le, CommandItem as k } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
 import "@radix-ui/react-use-controllable-state";
 import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
-import { InlineErrorAlert as D } 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 M({ id: a, message: m }) {
-  return /* @__PURE__ */ t("p", { id: a, className: "ttw:text-sm ttw:text-destructive", children: m });
+import { InlineErrorAlert as I } from "../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
+import { AccountAccessTable as oe } from "./index3.js";
+import { DEFAULT_LABELS as se } from "./index17.js";
+import { RoleCardGroup as ce } from "./index11.js";
+function H({ id: a, message: c }) {
+  return /* @__PURE__ */ t("p", { id: a, className: "ttw:text-sm ttw:text-destructive", children: c });
 }
-const R = "__none__";
-function x({
+const T = "__none__";
+function de({
   id: a,
-  label: m,
-  value: u,
-  options: v,
-  placeholder: y,
-  emptyMessage: p,
-  loadingMessage: h,
-  noneLabel: b,
+  value: c,
+  options: p,
+  placeholder: u,
+  searchPlaceholder: N,
+  noResultsLabel: g,
+  noneLabel: v,
+  disabled: h,
+  onValueChange: d
+}) {
+  const [w, y] = G(!1), b = p.find((n) => n.value === c), f = (n) => {
+    d(n), y(!1);
+  };
+  return /* @__PURE__ */ i(Z, { open: w, onOpenChange: y, children: [
+    /* @__PURE__ */ t(ee, { asChild: !0, children: /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        id: a,
+        role: "combobox",
+        "aria-expanded": w,
+        disabled: h,
+        className: "ttw:flex ttw:h-9 ttw:w-full ttw:items-center ttw:justify-between ttw:gap-2 ttw:rounded-md ttw:border ttw:border-input ttw:bg-transparent ttw:px-3 ttw:py-2 ttw:text-sm ttw:shadow-xs ttw:outline-none ttw:focus-visible:border-ring ttw:focus-visible:ring-[3px] ttw:focus-visible:ring-ring/50 ttw:disabled:cursor-not-allowed ttw:disabled:opacity-50",
+        children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: te(
+                "ttw:truncate",
+                !b && "ttw:text-muted-foreground"
+              ),
+              children: b ? b.label : u
+            }
+          ),
+          /* @__PURE__ */ t(Q, { className: "ttw:size-4 ttw:shrink-0 ttw:opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(
+      ae,
+      {
+        align: "start",
+        className: "ttw:w-[var(--radix-popover-trigger-width)] ttw:p-0",
+        children: /* @__PURE__ */ i(
+          ie,
+          {
+            filter: (n, l) => n.toLowerCase().includes(l.toLowerCase()) ? 1 : 0,
+            children: [
+              /* @__PURE__ */ t(
+                ne,
+                {
+                  placeholder: N,
+                  "aria-label": N
+                }
+              ),
+              /* @__PURE__ */ i(re, { children: [
+                /* @__PURE__ */ t(le, { children: g }),
+                c ? /* @__PURE__ */ t(k, { value: v, onSelect: () => f(""), children: v }) : null,
+                p.map((n) => /* @__PURE__ */ i(
+                  k,
+                  {
+                    value: `${n.label} ${n.sublabel ?? ""} ${n.value}`,
+                    onSelect: () => f(n.value),
+                    children: [
+                      /* @__PURE__ */ i("span", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:gap-0.5", children: [
+                        /* @__PURE__ */ t("span", { className: "ttw:truncate", children: n.label }),
+                        n.sublabel ? /* @__PURE__ */ t("span", { className: "ttw:truncate ttw:text-xs ttw:text-muted-foreground", children: n.sublabel }) : null
+                      ] }),
+                      n.value === c ? /* @__PURE__ */ t(U, { className: "ttw:ml-auto ttw:size-4 ttw:shrink-0" }) : null
+                    ]
+                  },
+                  n.value
+                ))
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function S({
+  id: a,
+  label: c,
+  value: p,
+  options: u,
+  placeholder: N,
+  emptyMessage: g,
+  loadingMessage: v,
+  noneLabel: h,
   isLoading: d = !1,
   isError: w = !1,
-  errorMessage: A,
-  errorHelper: N,
+  errorMessage: y,
+  errorHelper: b,
   emptyHelper: f,
-  readyHelper: L,
-  disabled: o,
-  onValueChange: r
+  readyHelper: n,
+  disabled: l,
+  searchable: o = !1,
+  searchPlaceholder: C,
+  noResultsLabel: x,
+  onValueChange: s
 }) {
-  const c = v.length > 0, g = w ? A ?? p : d ? h : c ? y : p, s = w ? N : !d && !c ? f : c ? L : void 0;
-  return /* @__PURE__ */ n("div", { className: "ttw:space-y-2", children: [
-    /* @__PURE__ */ t(C, { htmlFor: a, children: m }),
-    /* @__PURE__ */ n(
-      U,
+  const L = u.length > 0, A = w ? y ?? g : d ? v : L ? N : g, E = w ? b : !d && !L ? f : L ? n : void 0;
+  return /* @__PURE__ */ i("div", { className: "ttw:space-y-2", children: [
+    /* @__PURE__ */ t(R, { htmlFor: a, children: c }),
+    o ? /* @__PURE__ */ t(
+      de,
+      {
+        id: a,
+        value: p,
+        options: u,
+        placeholder: A,
+        searchPlaceholder: C ?? "",
+        noResultsLabel: x ?? "",
+        noneLabel: h,
+        disabled: l || d || !L,
+        onValueChange: s
+      }
+    ) : /* @__PURE__ */ i(
+      W,
       {
-        value: u || void 0,
-        disabled: o || d || !c,
-        onValueChange: (l) => r(l === R ? "" : l),
+        value: p || void 0,
+        disabled: l || d || !L,
+        onValueChange: (m) => s(m === T ? "" : m),
         children: [
-          /* @__PURE__ */ t(W, { id: a, className: "ttw:w-full", children: /* @__PURE__ */ t(J, { placeholder: g }) }),
-          /* @__PURE__ */ n(K, { children: [
-            u ? /* @__PURE__ */ t(O, { value: R, children: b }) : null,
-            v.map((l) => /* @__PURE__ */ t(
+          /* @__PURE__ */ t(Y, { id: a, className: "ttw:w-full", children: /* @__PURE__ */ t(K, { placeholder: A }) }),
+          /* @__PURE__ */ i(X, { children: [
+            p ? /* @__PURE__ */ t(O, { value: T, children: h }) : null,
+            u.map((m) => /* @__PURE__ */ t(
               O,
               {
-                value: l.value,
-                description: l.sublabel,
-                children: l.label
+                value: m.value,
+                description: m.sublabel,
+                children: m.label
               },
-              l.value
+              m.value
             ))
           ] })
         ]
       }
     ),
-    s ? /* @__PURE__ */ t("p", { className: "ttw:text-xs ttw:text-muted-foreground", children: s }) : null
+    E ? /* @__PURE__ */ t("p", { className: "ttw:text-xs ttw:text-muted-foreground", children: E }) : null
   ] });
 }
-function le({
+function Ne({
   form: a,
-  roleOptions: m,
-  departmentOptions: u,
-  locationOptions: v,
-  reportingManagerOptions: y,
-  accountAccessOptions: p,
-  departmentsLoading: h = !1,
-  locationsLoading: b = !1,
+  roleOptions: c,
+  departmentOptions: p,
+  locationOptions: u,
+  reportingManagerOptions: N,
+  accountAccessOptions: g,
+  departmentsLoading: v = !1,
+  locationsLoading: h = !1,
   reportingManagersLoading: d = !1,
   departmentsError: w = !1,
-  locationsError: A = !1,
-  reportingManagersError: N = !1,
+  locationsError: y = !1,
+  reportingManagersError: b = !1,
   accountAccessLoading: f = !1,
-  accountAccessError: L = !1,
-  accountAccessMode: o = "hidden",
-  errors: r,
-  submitErrorMessage: c,
-  isSubmitting: g = !1,
+  accountAccessError: n = !1,
+  accountAccessMode: l = "hidden",
+  errors: o,
+  submitErrorMessage: C,
+  isSubmitting: x = !1,
   onFormChange: s,
-  onBackClick: l,
-  onCancel: B,
-  onSubmit: T,
-  labels: k
+  onBackClick: L,
+  onCancel: A,
+  onSubmit: E,
+  labels: m
 }) {
-  const e = { ...X, ...k }, H = P(null), V = j(
-    () => p.map((i) => ({
-      ...i,
-      checked: o === "admin" || a.accountAccess.includes(i.value)
+  const e = { ...se, ...m }, P = z(null), V = _(
+    () => g.map((r) => ({
+      ...r,
+      checked: l === "admin" || a.accountAccess.includes(r.value)
     })),
-    [p, o, a.accountAccess]
-  ), I = (i, F) => {
+    [g, l, a.accountAccess]
+  ), B = (r, F) => {
     s({
       ...a,
-      accountAccess: F ? [...a.accountAccess, i] : a.accountAccess.filter((_) => _ !== i)
+      accountAccess: F ? [...a.accountAccess, r] : a.accountAccess.filter((j) => j !== r)
     });
   };
-  return z(() => {
-    H.current?.focus();
-  }, []), /* @__PURE__ */ n(
+  return q(() => {
+    P.current?.focus();
+  }, []), /* @__PURE__ */ i(
     "section",
     {
       "aria-label": e.inviteTitle,
       className: "ttw:rounded-md ttw:border ttw:border-border ttw:bg-card ttw:p-4",
       children: [
-        /* @__PURE__ */ n(
-          E,
+        /* @__PURE__ */ i(
+          M,
           {
-            ref: H,
+            ref: P,
             variant: "ghost",
             size: "sm",
-            disabled: g,
-            onClick: l,
+            disabled: x,
+            onClick: L,
             children: [
-              /* @__PURE__ */ t(q, { "aria-hidden": !0, className: "ttw:size-4" }),
+              /* @__PURE__ */ t($, { "aria-hidden": !0, className: "ttw:size-4" }),
               e.inviteBackToTeamButton
             ]
           }
@@ -125,33 +223,33 @@ function le({
           {
             noValidate: !0,
             className: "ttw:mt-4",
-            onSubmit: (i) => {
-              i.preventDefault(), T();
+            onSubmit: (r) => {
+              r.preventDefault(), E();
             },
-            children: /* @__PURE__ */ n("fieldset", { className: "ttw:space-y-6", disabled: g, children: [
-              /* @__PURE__ */ n("div", { className: "ttw:space-y-4", children: [
+            children: /* @__PURE__ */ i("fieldset", { className: "ttw:space-y-6", disabled: x, children: [
+              /* @__PURE__ */ i("div", { className: "ttw:space-y-4", children: [
                 /* @__PURE__ */ t("h4", { className: "ttw:text-base ttw:font-semibold ttw:text-foreground", children: e.inviteDetailsSectionHeading }),
-                /* @__PURE__ */ n("div", { className: "ttw:space-y-2", children: [
-                  /* @__PURE__ */ t(C, { htmlFor: "team-invite-name", children: e.inviteNameLabel }),
+                /* @__PURE__ */ i("div", { className: "ttw:space-y-2", children: [
+                  /* @__PURE__ */ t(R, { htmlFor: "team-invite-name", children: e.inviteNameLabel }),
                   /* @__PURE__ */ t(
-                    S,
+                    D,
                     {
                       id: "team-invite-name",
                       name: "name",
                       autoComplete: "name",
                       required: !0,
                       value: a.name,
-                      "aria-invalid": r?.name ? !0 : void 0,
-                      "aria-describedby": r?.name ? "team-invite-name-error" : void 0,
-                      onChange: (i) => s({ ...a, name: i.target.value })
+                      "aria-invalid": o?.name ? !0 : void 0,
+                      "aria-describedby": o?.name ? "team-invite-name-error" : void 0,
+                      onChange: (r) => s({ ...a, name: r.target.value })
                     }
                   ),
-                  r?.name && /* @__PURE__ */ t(M, { id: "team-invite-name-error", message: r.name })
+                  o?.name && /* @__PURE__ */ t(H, { id: "team-invite-name-error", message: o.name })
                 ] }),
-                /* @__PURE__ */ n("div", { className: "ttw:space-y-2", children: [
-                  /* @__PURE__ */ t(C, { htmlFor: "team-invite-email", children: e.inviteWorkEmailLabel }),
+                /* @__PURE__ */ i("div", { className: "ttw:space-y-2", children: [
+                  /* @__PURE__ */ t(R, { htmlFor: "team-invite-email", children: e.inviteWorkEmailLabel }),
                   /* @__PURE__ */ t(
-                    S,
+                    D,
                     {
                       id: "team-invite-email",
                       name: "email",
@@ -159,81 +257,84 @@ function le({
                       autoComplete: "email",
                       required: !0,
                       value: a.email,
-                      "aria-invalid": r?.email ? !0 : void 0,
-                      "aria-describedby": r?.email ? "team-invite-email-error" : void 0,
-                      onChange: (i) => s({ ...a, email: i.target.value })
+                      "aria-invalid": o?.email ? !0 : void 0,
+                      "aria-describedby": o?.email ? "team-invite-email-error" : void 0,
+                      onChange: (r) => s({ ...a, email: r.target.value })
                     }
                   ),
-                  r?.email && /* @__PURE__ */ t(
-                    M,
+                  o?.email && /* @__PURE__ */ t(
+                    H,
                     {
                       id: "team-invite-email-error",
-                      message: r.email
+                      message: o.email
                     }
                   )
                 ] }),
-                /* @__PURE__ */ n("div", { className: "ttw:grid ttw:grid-cols-1 ttw:gap-4 ttw:sm:grid-cols-2", children: [
+                /* @__PURE__ */ i("div", { className: "ttw:grid ttw:grid-cols-1 ttw:gap-4 ttw:sm:grid-cols-2", children: [
                   /* @__PURE__ */ t(
-                    x,
+                    S,
                     {
                       id: "team-invite-department",
                       label: e.inviteDepartmentLabel,
                       value: a.department,
-                      options: u,
+                      options: p,
                       placeholder: e.inviteDepartmentPlaceholder,
                       emptyMessage: e.inviteDepartmentEmpty,
                       loadingMessage: e.inviteOptionsLoading,
                       noneLabel: e.inviteOptionNone,
-                      isLoading: h,
+                      isLoading: v,
                       isError: w,
                       errorMessage: e.inviteDepartmentLoadError,
                       errorHelper: e.inviteDepartmentLoadErrorHelper,
                       emptyHelper: e.inviteDepartmentEmptyHelper,
-                      onValueChange: (i) => s({ ...a, department: i })
+                      onValueChange: (r) => s({ ...a, department: r })
                     }
                   ),
                   /* @__PURE__ */ t(
-                    x,
+                    S,
                     {
                       id: "team-invite-location",
                       label: e.inviteLocationLabel,
                       value: a.location,
-                      options: v,
+                      options: u,
                       placeholder: e.inviteLocationPlaceholder,
                       emptyMessage: e.inviteLocationEmpty,
                       loadingMessage: e.inviteOptionsLoading,
                       noneLabel: e.inviteOptionNone,
-                      isLoading: b,
-                      isError: A,
+                      isLoading: h,
+                      isError: y,
                       errorMessage: e.inviteLocationLoadError,
                       errorHelper: e.inviteLocationLoadErrorHelper,
                       emptyHelper: e.inviteLocationEmptyHelper,
-                      onValueChange: (i) => s({ ...a, location: i })
+                      onValueChange: (r) => s({ ...a, location: r })
                     }
                   )
                 ] }),
                 /* @__PURE__ */ t(
-                  x,
+                  S,
                   {
                     id: "team-invite-reporting-manager",
                     label: e.inviteReportingManagerLabel,
                     value: a.reportingManager,
-                    options: y,
+                    options: N,
                     placeholder: e.inviteReportingManagerPlaceholder,
                     emptyMessage: e.inviteReportingManagerEmpty,
                     loadingMessage: e.inviteOptionsLoading,
                     noneLabel: e.inviteOptionNone,
                     isLoading: d,
-                    isError: N,
+                    isError: b,
                     errorMessage: e.inviteReportingManagerLoadError,
                     errorHelper: e.inviteReportingManagerLoadErrorHelper,
                     emptyHelper: e.inviteReportingManagerEmptyHelper,
                     readyHelper: e.inviteReportingManagerHelper,
-                    onValueChange: (i) => s({ ...a, reportingManager: i })
+                    searchable: !0,
+                    searchPlaceholder: e.inviteReportingManagerSearchPlaceholder,
+                    noResultsLabel: e.inviteReportingManagerNoResults,
+                    onValueChange: (r) => s({ ...a, reportingManager: r })
                   }
                 )
               ] }),
-              /* @__PURE__ */ n("div", { className: "ttw:space-y-1", children: [
+              /* @__PURE__ */ i("div", { className: "ttw:space-y-1", children: [
                 /* @__PURE__ */ t(
                   "div",
                   {
@@ -244,20 +345,20 @@ function le({
                 ),
                 /* @__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,
+                  ce,
                   {
                     idPrefix: "team-invite-role",
-                    options: m,
+                    options: c,
                     value: a.role,
-                    onValueChange: (i) => s({ ...a, role: i }),
+                    onValueChange: (r) => s({ ...a, role: r }),
                     ariaLabelledBy: "team-invite-role-heading",
-                    ariaInvalid: !!r?.role,
-                    ariaDescribedBy: r?.role ? "team-invite-role-error" : void 0
+                    ariaInvalid: !!o?.role,
+                    ariaDescribedBy: o?.role ? "team-invite-role-error" : void 0
                   }
                 ) }),
-                r?.role && /* @__PURE__ */ t(M, { id: "team-invite-role-error", message: r.role })
+                o?.role && /* @__PURE__ */ t(H, { id: "team-invite-role-error", message: o.role })
               ] }),
-              o === "employee" && /* @__PURE__ */ n("div", { className: "ttw:space-y-2", children: [
+              l === "employee" && /* @__PURE__ */ i("div", { className: "ttw:space-y-2", children: [
                 /* @__PURE__ */ t(
                   "div",
                   {
@@ -268,7 +369,7 @@ function le({
                 ),
                 /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:text-muted-foreground", children: e.manageAccessEmployeeNote })
               ] }),
-              (o === "picker" || o === "admin") && /* @__PURE__ */ n("div", { className: "ttw:space-y-2", children: [
+              (l === "picker" || l === "admin") && /* @__PURE__ */ i("div", { className: "ttw:space-y-2", children: [
                 /* @__PURE__ */ t(
                   "div",
                   {
@@ -278,13 +379,13 @@ function le({
                   }
                 ),
                 /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:text-muted-foreground", children: e.inviteAccountAccessSectionDescription }),
-                L ? /* @__PURE__ */ t(D, { children: e.inviteAccountAccessLoadError }) : f ? /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:text-muted-foreground", children: e.inviteOptionsLoading }) : /* @__PURE__ */ t(
-                  Q,
+                n ? /* @__PURE__ */ t(I, { children: e.inviteAccountAccessLoadError }) : f ? /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:text-muted-foreground", children: e.inviteOptionsLoading }) : /* @__PURE__ */ t(
+                  oe,
                   {
                     rows: V,
-                    onToggle: I,
-                    disabled: o === "admin",
-                    note: o === "admin" ? e.inviteAccountAccessAdminNote : void 0,
+                    onToggle: B,
+                    disabled: l === "admin",
+                    note: l === "admin" ? e.inviteAccountAccessAdminNote : void 0,
                     emptyMessage: e.inviteAccountAccessEmpty,
                     labels: {
                       accountNameColumn: e.accountAccessNameColumn,
@@ -294,18 +395,18 @@ function le({
                   }
                 )
               ] }),
-              c && /* @__PURE__ */ t(D, { children: c }),
-              /* @__PURE__ */ n("div", { className: "ttw:flex ttw:justify-end ttw:gap-2", children: [
-                /* @__PURE__ */ t(E, { type: "button", variant: "ghost", onClick: B, children: e.inviteCancelButton }),
-                /* @__PURE__ */ n(
-                  E,
+              C && /* @__PURE__ */ t(I, { children: C }),
+              /* @__PURE__ */ i("div", { className: "ttw:flex ttw:justify-end ttw:gap-2", children: [
+                /* @__PURE__ */ t(M, { type: "button", variant: "ghost", onClick: A, children: e.inviteCancelButton }),
+                /* @__PURE__ */ i(
+                  M,
                   {
                     type: "submit",
-                    loading: g,
-                    disabled: h || b || d || (o === "picker" || o === "admin") && (f || L),
+                    loading: x,
+                    disabled: v || h || d || (l === "picker" || l === "admin") && (f || n),
                     children: [
                       e.inviteSubmitButton,
-                      /* @__PURE__ */ t(G, { "aria-hidden": !0, className: "ttw:size-4" })
+                      /* @__PURE__ */ t(J, { "aria-hidden": !0, className: "ttw:size-4" })
                     ]
                   }
                 )
@@ -318,6 +419,6 @@ function le({
   );
 }
 export {
-  le as InviteTeamMemberForm,
-  x as OptionalSelect
+  Ne as InviteTeamMemberForm,
+  S as OptionalSelect
 };

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

@@ -58,6 +58,8 @@ const e = {
   inviteReportingManagerLoadErrorHelper: "Reporting managers could not be loaded. Try refreshing the page.",
   inviteReportingManagerEmptyHelper: "No active team members are available to assign as a reporting manager yet.",
   inviteReportingManagerHelper: "The reporting manager can view this user’s expenses and approve them if the approval rules allow.",
+  inviteReportingManagerSearchPlaceholder: "Search by name, role, or email",
+  inviteReportingManagerNoResults: "No matching team members",
   inviteOptionsLoading: "Loading…",
   inviteOptionNone: "None",
   inviteRoleSectionHeading: "Assign role",