@vector-business-services/cristal-ds-web 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -17,6 +17,7 @@ var menu = require('primereact/menu');
 var menubar = require('primereact/menubar');
 var avatar = require('primereact/avatar');
 var tooltip = require('primereact/tooltip');
+var tag = require('primereact/tag');
 var dialog = require('primereact/dialog');
 var multiselect = require('primereact/multiselect');
 var panel = require('primereact/panel');
@@ -26,7 +27,6 @@ var selectbutton = require('primereact/selectbutton');
 var dropdown = require('primereact/dropdown');
 var inputswitch = require('primereact/inputswitch');
 var tabview = require('primereact/tabview');
-var tag = require('primereact/tag');
 
 // src/components/AutoComplete/AutoComplete.tsx
 var AutoComplete = react.forwardRef(function AutoComplete2({
@@ -321,6 +321,7 @@ function Drawer({
   subtitle,
   side = "right",
   behavior = "full",
+  modal = true,
   onBack,
   backLabel = "Voltar",
   closeLabel = "Fechar",
@@ -354,7 +355,7 @@ function Drawer({
     return () => observer.disconnect();
   }, [rolagem, children]);
   const prenderFoco = (event) => {
-    if (event.key !== "Tab" || !panelRef.current) return;
+    if (!modal || event.key !== "Tab" || !panelRef.current) return;
     const focaveis = [...panelRef.current.querySelectorAll(FOCAVEIS)];
     const primeiro = focaveis[0];
     const ultimo = focaveis[focaveis.length - 1];
@@ -376,16 +377,29 @@ function Drawer({
       visible,
       onHide,
       position: side,
-      blockScroll: true,
+      modal,
+      blockScroll: modal,
+      dismissable: modal,
       pt: {
-        mask: { className: `cr-drawer__mask cr-drawer__mask--${side}` },
+        mask: {
+          className: `cr-drawer__mask cr-drawer__mask--${side}${modal ? "" : " cr-drawer__mask--sem-overlay"}`
+        },
         root: {
           className: classes,
           role: "dialog",
-          "aria-modal": true,
+          "aria-modal": modal || void 0,
           "aria-labelledby": titleId,
           "aria-describedby": subtitle ? subtitleId : void 0,
           onKeyDown: prenderFoco
+        },
+        // No unstyled o Prime não põe classes na transição: o Cristal dá as dele (Drawer.css).
+        // O tipo do Prime exige o addEndListener do react-transition-group, que aqui não se usa.
+        transition: {
+          classNames: {
+            enter: "cr-drawer--enter",
+            enterActive: "cr-drawer--enter-active",
+            exitActive: "cr-drawer--exit-active"
+          }
         }
       },
       content: ({ closeIconRef, hide }) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -830,6 +844,105 @@ var Menubar = react.forwardRef(function Menubar2({
     }
   ) });
 });
+var Tag = react.forwardRef(function Tag2({ variant = "default", size = "small", icon, className, children, ...props }, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const classes = ["cr-tag", `cr-tag--${variant}`, `cr-tag--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tag.Tag,
+    {
+      unstyled: true,
+      ref: primeRef,
+      className: classes,
+      icon: icon ? () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-tag__icon", "aria-hidden": "true", children: icon }) : void 0,
+      value: children,
+      ...props
+    }
+  );
+});
+var isGroup = (entry) => "items" in entry;
+var MenuPrincipal = react.forwardRef(
+  function MenuPrincipal2({
+    model,
+    popup = false,
+    "aria-label": ariaLabel = "Menu principal",
+    onShow,
+    onHide,
+    id,
+    className
+  }, ref) {
+    const primeRef = react.useRef(null);
+    const context = react.useContext(api.PrimeReactContext);
+    react.useImperativeHandle(ref, () => ({
+      toggle: (event) => primeRef.current?.toggle(event),
+      show: (event) => primeRef.current?.show(event),
+      hide: (event) => primeRef.current?.hide(event),
+      getElement: () => primeRef.current?.getElement() ?? null
+    }));
+    const toPrime = (item) => ({
+      id: item.id,
+      // Sem label no Prime: ele viraria o aria-label do item, só com parte do texto visível. O
+      // nome vem do conteúdo: o nome, a descrição e a tag. Os espaços entre eles não aparecem
+      // (estão em flex), mas separam as palavras no nome ("Início Tela inicial", não colado).
+      command: item.command,
+      url: item.url,
+      target: item.target,
+      className: item.className,
+      // O <a> leva o data-pc-section do Prime: o Enter do teclado clica nele (e segue o link).
+      template: () => /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          className: "cr-menu-principal__action",
+          "data-pc-section": "action",
+          href: item.url ?? "#",
+          target: item.target,
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-menu-principal__icon", "aria-hidden": "true", children: item.icon }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cr-menu-principal__text", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-menu-principal__label", children: item.label }),
+              " ",
+              item.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-menu-principal__description", children: item.description })
+            ] }),
+            " ",
+            item.tag && /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: "cr-menu-principal__tag", variant: "warning", icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.DribbbleLogo, {}), children: item.tag })
+          ]
+        }
+      )
+    });
+    const items = [];
+    let anterior;
+    model.forEach((entry) => {
+      if (anterior && (isGroup(entry) || isGroup(anterior))) items.push({ separator: true });
+      items.push(
+        isGroup(entry) ? { id: entry.id, label: entry.label, items: entry.items.map(toPrime) } : toPrime(entry)
+      );
+      anterior = entry;
+    });
+    const classes = ["cr-menu-principal", popup && "cr-menu-principal--popup", className].filter(Boolean).join(" ");
+    const pt = {
+      menu: { className: "cr-menu-principal__list", "aria-label": ariaLabel },
+      submenuHeader: { className: "cr-menu-principal__group" },
+      separator: { className: "cr-menu-principal__separator" },
+      menuitem: { className: "cr-menu-principal__item" }
+    };
+    const menu$1 = /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu,
+      {
+        unstyled: true,
+        ref: primeRef,
+        id,
+        className: classes,
+        model: items,
+        popup,
+        onShow,
+        onHide,
+        pt
+      }
+    );
+    return context ? menu$1 : /* @__PURE__ */ jsxRuntime.jsx(api.PrimeReactProvider, { children: menu$1 });
+  }
+);
 function Modal({
   visible,
   onHide,
@@ -1495,22 +1608,6 @@ var Tabs = react.forwardRef(function Tabs2({ activeIndex, onTabChange, children,
     }
   );
 });
-var Tag = react.forwardRef(function Tag2({ variant = "default", size = "small", icon, className, children, ...props }, ref) {
-  const primeRef = react.useRef(null);
-  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
-  const classes = ["cr-tag", `cr-tag--${variant}`, `cr-tag--${size}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    tag.Tag,
-    {
-      unstyled: true,
-      ref: primeRef,
-      className: classes,
-      icon: icon ? () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-tag__icon", "aria-hidden": "true", children: icon }) : void 0,
-      value: children,
-      ...props
-    }
-  );
-});
 
 exports.AutoComplete = AutoComplete;
 exports.Badge = Badge;
@@ -1523,6 +1620,7 @@ exports.Drawer = Drawer;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Menu = Menu;
+exports.MenuPrincipal = MenuPrincipal;
 exports.Menubar = Menubar;
 exports.Modal = Modal;
 exports.MultiSelect = MultiSelect;