@tesouro/embedded-components-react 0.2.132 → 0.2.148

package/dist/libs/tesouro-embedded-components-react/shared/ui/dist/lib/OnboardingShell/OnboardingShellScrollRegion.js

@@ -0,0 +1,96 @@
+import { jsxs as c, jsx as d } from "react/jsx-runtime";
+import * as n from "react";
+import { ArrowDown as y } from "lucide-react";
+import { useScrollHintContainer as x } from "./useScrollHintContainer.js";
+const m = 160;
+function u(t) {
+  const [r, o] = n.useState(t), [a, i] = n.useState(t);
+  n.useEffect(() => {
+    if (t) {
+      o(!0);
+      const e = requestAnimationFrame(() => i(!0));
+      return () => cancelAnimationFrame(e);
+    }
+    i(!1);
+  }, [t]);
+  const s = n.useCallback(
+    (e) => {
+      e.propertyName === "opacity" && (t || o(!1));
+    },
+    [t]
+  );
+  return { mounted: r, visible: a, onTransitionEnd: s };
+}
+function T({
+  activeStep: t,
+  scrollForMoreLabel: r,
+  children: o
+}) {
+  const {
+    containerRef: a,
+    showHint: i,
+    hasOverflow: s,
+    fadeVisible: e,
+    fadeHeight: l,
+    resetHint: w
+  } = x(), {
+    mounted: p,
+    visible: f,
+    onTransitionEnd: b
+  } = u(e), {
+    mounted: h,
+    visible: g,
+    onTransitionEnd: v
+  } = u(i);
+  return n.useEffect(() => {
+    w();
+  }, [t, w]), /* @__PURE__ */ c(
+    "div",
+    {
+      ref: a,
+      className: "ttw:relative ttw:min-h-0 ttw:overflow-y-auto ttw:px-8 ttw:pt-2",
+      "data-testid": "onboarding-shell-scroll-region",
+      children: [
+        /* @__PURE__ */ d("div", { className: "ttw:pb-4", children: o }),
+        s && p ? /* @__PURE__ */ d(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-testid": "onboarding-shell-scroll-fade",
+            onTransitionEnd: b,
+            className: "ttw:pointer-events-none ttw:sticky ttw:bottom-0 ttw:left-0 ttw:right-0 ttw:z-[1] ttw:transition-opacity ttw:ease-in-out",
+            style: {
+              height: l,
+              marginTop: `-${l}px`,
+              opacity: f ? 1 : 0,
+              transitionDuration: `${m}ms`,
+              background: "linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--ttw-background) 85%, var(--ttw-background) 100%)"
+            }
+          }
+        ) : null,
+        h ? /* @__PURE__ */ c(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "data-testid": "onboarding-shell-scroll-hint",
+            onTransitionEnd: v,
+            className: "ttw:pointer-events-none ttw:absolute ttw:left-1/2 ttw:z-[2] ttw:flex ttw:-translate-x-1/2 ttw:items-center ttw:gap-1 ttw:rounded-full ttw:bg-primary ttw:px-3 ttw:py-1.5 ttw:text-[13px] ttw:font-medium ttw:text-primary-foreground ttw:shadow-md ttw:transition-opacity ttw:ease-in-out",
+            style: {
+              bottom: l / 2,
+              opacity: g ? 1 : 0,
+              transitionDuration: `${m}ms`
+            },
+            children: [
+              r,
+              /* @__PURE__ */ d(y, { className: "ttw:size-4", "aria-hidden": !0 })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  T as OnboardingShellScrollRegion
+};

package/dist/libs/tesouro-embedded-components-react/shared/ui/dist/lib/OnboardingShell/OnboardingShellStepper.js

@@ -0,0 +1,62 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { Check as f } from "lucide-react";
+import { ONBOARDING_SHELL_LABELS_EN as m } from "./labels.js";
+const a = "#18C29C", p = "#E0E3E8", u = "#E0E3E8", x = "#667085";
+function N({
+  stepLabels: l,
+  activeStep: r,
+  labels: n
+}) {
+  const i = { ...m, ...n };
+  return /* @__PURE__ */ e("div", { className: "ttw:mb-2", children: /* @__PURE__ */ e(
+    "ol",
+    {
+      className: "ttw:flex ttw:w-full ttw:items-center",
+      "aria-label": i.stepperAriaLabel,
+      children: l.map((c, t) => {
+        const s = t < r, o = t === r, w = t + 1;
+        return /* @__PURE__ */ d(
+          "li",
+          {
+            className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:items-center ttw:last:flex-none",
+            "aria-current": o ? "step" : void 0,
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "ttw:flex ttw:size-6 ttw:shrink-0 ttw:items-center ttw:justify-center ttw:rounded-full ttw:text-sm ttw:font-bold ttw:transition-colors",
+                  style: s ? { backgroundColor: a, color: "#fff" } : o ? {
+                    backgroundColor: "#fff",
+                    color: "var(--ttw-primary)",
+                    border: "2px solid var(--ttw-primary)",
+                    boxShadow: "0 0 0 2px #E6E9FA"
+                  } : {
+                    backgroundColor: "#fff",
+                    color: x,
+                    border: `2px solid ${u}`
+                  },
+                  children: s ? /* @__PURE__ */ e(f, { className: "ttw:size-4", "aria-hidden": !0, strokeWidth: 3 }) : w
+                }
+              ),
+              t < l.length - 1 ? /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "ttw:mx-1 ttw:h-0.5 ttw:min-w-2 ttw:flex-1 ttw:rounded-full",
+                  style: {
+                    backgroundColor: t < r ? a : p
+                  },
+                  "aria-hidden": !0
+                }
+              ) : null,
+              /* @__PURE__ */ e("span", { className: "ttw:sr-only", children: c })
+            ]
+          },
+          `step-${t}`
+        );
+      })
+    }
+  ) });
+}
+export {
+  N as OnboardingShellStepper
+};

package/dist/libs/tesouro-embedded-components-react/shared/ui/dist/lib/OnboardingShell/labels.js

@@ -0,0 +1,10 @@
+const o = {
+  backButton: "Back",
+  cancelButton: "Cancel",
+  dismissAriaLabel: "Close onboarding",
+  stepperAriaLabel: "Onboarding progress",
+  scrollForMore: "Scroll for more"
+};
+export {
+  o as ONBOARDING_SHELL_LABELS_EN
+};

package/dist/libs/tesouro-embedded-components-react/shared/ui/dist/lib/OnboardingShell/useScrollHintContainer.js

@@ -0,0 +1,38 @@
+import * as t from "react";
+function b({
+  fadeHeight: u = 32,
+  hideFadeAtBottom: i = !0
+} = {}) {
+  const n = t.useRef(null), [l, c] = t.useState(!1), [f, d] = t.useState(!1), [v, h] = t.useState(!1), [p, H] = t.useState(!1), r = t.useCallback(() => {
+    const e = n.current;
+    if (!e) return;
+    const s = e.scrollHeight - e.clientHeight > 1, o = e.scrollTop < 2, w = e.scrollTop + e.clientHeight >= e.scrollHeight - 2, a = l || e.scrollTop > 1;
+    h(s), d(!a && s && o), H(s && !a && (!i || !w));
+  }, [l, i]);
+  t.useEffect(() => {
+    const e = n.current;
+    if (!e) return;
+    const s = () => {
+      !l && e.scrollTop > 1 && c(!0), r();
+    };
+    let o;
+    return typeof ResizeObserver < "u" && (o = new ResizeObserver(r), o.observe(e)), requestAnimationFrame(r), e.addEventListener("scroll", s), window.addEventListener("resize", r), () => {
+      o?.disconnect(), e.removeEventListener("scroll", s), window.removeEventListener("resize", r);
+    };
+  }, [r, l]);
+  const m = t.useCallback(() => {
+    c(!1), n.current && (n.current.scrollTop = 0);
+  }, []);
+  return {
+    containerRef: n,
+    showHint: f,
+    hasOverflow: v,
+    fadeVisible: p,
+    fadeHeight: u,
+    resetHint: m,
+    recompute: r
+  };
+}
+export {
+  b as useScrollHintContainer
+};

package/dist/libs/tesouro-embedded-components-react/tags-widget/feature/dist/index2.js

@@ -11,6 +11,7 @@ import "@radix-ui/react-use-controllable-state";
 import "lucide-react";
 import "../../../../../packages/shared-ui-shadcn/dist/index.js";
 import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import "../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
 import "../../../shared/feature/dist/lib/WidgetProvider/WidgetContext.js";
 import { WidgetProvider as u } from "../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
 import "../../../shared/feature/dist/lib/WidgetProvider/WidgetTokenRefreshContext.js";
@@ -100,7 +101,7 @@ function N({
     )
   ] });
 }
-function J({
+function Q({
   baseUrl: i,
   widgetToken: s,
   organizationId: g,
@@ -132,5 +133,5 @@ function J({
   );
 }
 export {
-  J as TagsWidget
+  Q as TagsWidget
 };

package/dist/libs/tesouro-embedded-components-react/tags-widget/ui/dist/index2.js

@@ -1,6 +1,6 @@
 const e = {
   title: "Tags",
-  createButton: "Create new",
+  createButton: "Create",
   columnName: "Name",
   columnCategory: "Category",
   columnKeywords: "Keywords",

package/dist/libs/tesouro-embedded-components-react/tags-widget/ui/dist/index3.js

@@ -1,11 +1,12 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { PlusIcon as z, MoreVerticalIcon as A, Trash2Icon as D, ArrowUpIcon as b, ArrowDownIcon as I, ArrowUpDownIcon as L } from "lucide-react";
-import { Button as c, DataTable as T, DropdownMenu as k, DropdownMenuTrigger as E, DropdownMenuContent as K, DropdownMenuItem as M } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { PlusIcon as z, MoreVerticalIcon as A, Trash2Icon as D, ArrowUpIcon as b, ArrowDownIcon as I, ArrowUpDownIcon as T } from "lucide-react";
+import { Button as c, DataTable as L, DropdownMenu as k, DropdownMenuTrigger as E, DropdownMenuContent as K, DropdownMenuItem as M } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
 import "@radix-ui/react-use-controllable-state";
 import "react";
 import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
 import { EmptyState as R } from "../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
 import { ErrorState as B } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import "../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
 import { SectionHeading as j } from "../../../shared/ui/dist/lib/SectionHeading/SectionHeading.js";
 import { TAGS_SCREEN_LABELS_EN as U } from "./index2.js";
 const _ = [10, 25, 50, 100];
@@ -16,10 +17,10 @@ function g({
 }) {
   return /* @__PURE__ */ a("div", { className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-inherit", children: [
     n,
-    /* @__PURE__ */ e(c, { variant: "ghost", size: "icon-sm", onClick: i, children: r === "asc" ? /* @__PURE__ */ e(b, { className: "ttw:size-4" }) : r === "desc" ? /* @__PURE__ */ e(I, { className: "ttw:size-4" }) : /* @__PURE__ */ e(L, { className: "ttw:size-4" }) })
+    /* @__PURE__ */ e(c, { variant: "ghost", size: "icon-sm", onClick: i, children: r === "asc" ? /* @__PURE__ */ e(b, { className: "ttw:size-4" }) : r === "desc" ? /* @__PURE__ */ e(I, { className: "ttw:size-4" }) : /* @__PURE__ */ e(T, { className: "ttw:size-4" }) })
   ] });
 }
-function Y({
+function Z({
   tags: n,
   isLoading: r,
   isError: i,
@@ -33,8 +34,8 @@ function Y({
   onNextPage: C,
   onPrevPage: N,
   onCreateClick: l,
-  onRowClick: P,
-  onDeleteClick: f,
+  onRowClick: f,
+  onDeleteClick: P,
   onRetry: d,
   labels: v
 }) {
@@ -86,7 +87,7 @@ function Y({
           {
             variant: "destructive",
             onClick: (s) => {
-              s.stopPropagation(), f(o.original);
+              s.stopPropagation(), P(o.original);
             },
             children: [
               /* @__PURE__ */ e(D, { className: "ttw:size-4" }),
@@ -100,7 +101,7 @@ function Y({
   return /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:gap-4", children: [
     /* @__PURE__ */ a("div", { className: "ttw:flex ttw:items-center ttw:justify-between", children: [
       /* @__PURE__ */ e(j, { children: t.title }),
-      /* @__PURE__ */ a(c, { onClick: l, children: [
+      /* @__PURE__ */ a(c, { size: "sm", onClick: l, children: [
         /* @__PURE__ */ e(z, { "aria-hidden": !0, className: "ttw:size-4" }),
         t.createButton
       ] })
@@ -114,7 +115,7 @@ function Y({
         onRetry: d
       }
     ) : /* @__PURE__ */ e(
-      T,
+      L,
       {
         columns: x,
         data: n,
@@ -128,7 +129,7 @@ function Y({
         hasPrevPage: y,
         onNextPage: C,
         onPrevPage: N,
-        onRowClick: P,
+        onRowClick: f,
         children: /* @__PURE__ */ e(
           R,
           {
@@ -143,5 +144,5 @@ function Y({
   ] });
 }
 export {
-  Y as TagsScreen
+  Z as TagsScreen
 };

package/dist/libs/tesouro-embedded-components-react/tags-widget/ui/dist/index4.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import { useId as k } from "react";
-import { Sheet as T, SheetContent as I, SheetHeader as L, SheetTitle as B, SheetDescription as F, Label as c, Input as O, Select as P, SelectTrigger as $, SelectValue as D, SelectContent as E, SelectItem as V, InputTags as _, SheetFooter as j, Button as i } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { Sheet as T, SheetContent as I, SheetHeader as L, SheetTitle as B, SheetDescription as F, Label as c, Input as E, Select as O, SelectTrigger as P, SelectValue as $, SelectContent as D, SelectItem as V, InputTags as _, SheetFooter as j, Button as i } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
 import { TAG_FORM_SHEET_LABELS_EN as z } from "./index2.js";
 function M({
   open: h,
@@ -14,10 +14,10 @@ function M({
   showDelete: v,
   onNameChange: y,
   onCategoryChange: x,
-  onKeywordsChange: f,
-  onKeywordsInputChange: C,
-  onSubmit: S,
-  onCancel: b,
+  onKeywordsChange: S,
+  onKeywordsInputChange: f,
+  onSubmit: b,
+  onCancel: C,
   onDelete: d,
   labels: N
 }) {
@@ -32,7 +32,7 @@ function M({
       {
         id: r,
         onSubmit: (a) => {
-          a.preventDefault(), a.stopPropagation(), S();
+          a.preventDefault(), a.stopPropagation(), b();
         },
         children: /* @__PURE__ */ n("div", { className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:px-6 ttw:pt-8 ttw:pb-6", children: [
           l?.form && /* @__PURE__ */ e(
@@ -46,7 +46,7 @@ function M({
           /* @__PURE__ */ n("div", { className: "ttw:flex ttw:flex-col ttw:gap-1.5", children: [
             /* @__PURE__ */ e(c, { htmlFor: `${r}-name`, children: t.nameLabel }),
             /* @__PURE__ */ e(
-              O,
+              E,
               {
                 id: `${r}-name`,
                 autoFocus: !0,
@@ -60,13 +60,13 @@ function M({
           /* @__PURE__ */ n("div", { className: "ttw:flex ttw:flex-col ttw:gap-1.5", children: [
             /* @__PURE__ */ e(c, { htmlFor: `${r}-category`, children: t.categoryLabel }),
             /* @__PURE__ */ n(
-              P,
+              O,
               {
                 value: o.category === "" ? void 0 : o.category,
                 onValueChange: x,
                 children: [
-                  /* @__PURE__ */ e($, { id: `${r}-category`, className: "ttw:w-full", children: /* @__PURE__ */ e(D, { placeholder: t.categoryPlaceholder }) }),
-                  /* @__PURE__ */ e(E, { children: p.map((a) => /* @__PURE__ */ e(V, { value: a.value, children: a.label }, a.value)) })
+                  /* @__PURE__ */ e(P, { id: `${r}-category`, className: "ttw:w-full", children: /* @__PURE__ */ e($, { placeholder: t.categoryPlaceholder }) }),
+                  /* @__PURE__ */ e(D, { children: p.map((a) => /* @__PURE__ */ e(V, { value: a.value, children: a.label }, a.value)) })
                 ]
               }
             )
@@ -77,9 +77,9 @@ function M({
               _,
               {
                 value: o.keywords,
-                onChange: f,
+                onChange: S,
                 inputValue: o.keywordsInput,
-                onInputValueChange: C,
+                onInputValueChange: f,
                 placeholder: t.keywordsPlaceholder,
                 "aria-invalid": !!l?.keywords,
                 removeTagLabel: (a) => t.removeKeyword.replace("{keyword}", a)
@@ -102,7 +102,7 @@ function M({
           children: t.deleteButton
         }
       ),
-      /* @__PURE__ */ e(i, { type: "button", variant: "ghost", size: "lg", onClick: b, children: t.cancelButton }),
+      /* @__PURE__ */ e(i, { type: "button", variant: "ghost", size: "lg", onClick: C, children: t.cancelButton }),
       /* @__PURE__ */ e(i, { type: "submit", form: r, size: "lg", disabled: g, children: s === "edit" ? t.saveButton : t.createButton })
     ] })
   ] }) });

package/dist/libs/tesouro-embedded-components-react/tags-widget/ui/dist/index5.js

@@ -3,17 +3,17 @@ import { AlertDialog as d, AlertDialogContent as g, AlertDialogHeader as h, Aler
 import { TAG_DELETE_DIALOG_LABELS_EN as C } from "./index2.js";
 function E({
   open: t,
-  onOpenChange: l,
-  tagName: r,
+  onOpenChange: r,
+  tagName: l,
   isDeleting: a,
   onConfirm: s,
   onCancel: c,
   labels: D
 }) {
   const n = { ...C, ...D };
-  return /* @__PURE__ */ e(d, { open: t, onOpenChange: l, children: /* @__PURE__ */ o(g, { children: [
+  return /* @__PURE__ */ e(d, { open: t, onOpenChange: r, children: /* @__PURE__ */ o(g, { children: [
     /* @__PURE__ */ o(h, { children: [
-      /* @__PURE__ */ e(m, { children: n.title.replace("{name}", r) }),
+      /* @__PURE__ */ e(m, { children: n.title.replace("{name}", l) }),
       /* @__PURE__ */ e(p, { children: n.message })
     ] }),
     /* @__PURE__ */ o(A, { children: [