@vector-business-services/cristal-ds-web 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -20,6 +20,7 @@ var tooltip = require('primereact/tooltip');
 var tag = require('primereact/tag');
 var dialog = require('primereact/dialog');
 var multiselect = require('primereact/multiselect');
+var tabmenu = require('primereact/tabmenu');
 var panel = require('primereact/panel');
 var radiobutton = require('primereact/radiobutton');
 var scrollpanel = require('primereact/scrollpanel');
@@ -1219,6 +1220,105 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
     ] })
   ] });
 });
+var PageHeader = react.forwardRef(function PageHeader2({
+  title,
+  variant = "primary",
+  onBack,
+  backLabel = "Voltar",
+  tag,
+  segmentControl,
+  actions,
+  onExpand,
+  expandLabel = "Expandir",
+  tabs,
+  activeTab,
+  onTabChange,
+  tabsLabel,
+  className,
+  ...props
+}, ref) {
+  const [interna, setInterna] = react.useState(0);
+  const ativa = activeTab ?? interna;
+  const tools = segmentControl || actions;
+  const tabTemplate = (tab) => (
+    // O TabMenu também passa o index da aba nas opções, além do que o tipo do MenuItem declara.
+    function TabContent(item, options) {
+      const { element, index } = options;
+      const active = index === ativa;
+      return react.cloneElement(
+        element,
+        { "aria-current": active ? "page" : void 0 },
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          (variant === "primary" || tab.icon) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-page-header__tab-icon", "aria-hidden": "true", children: tab.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-page-header__tab-label", children: item.label })
+        ] })
+      );
+    }
+  );
+  const classes = ["cr-page-header", `cr-page-header--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: classes, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `cr-page-header__title-group${tools ? " cr-page-header__title-group--tools" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-page-header__title-text", children: [
+            onBack && /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton,
+              {
+                variant: "tertiary",
+                size: "small",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowLeft, {}),
+                "aria-label": backLabel,
+                onClick: onBack
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "cr-page-header__title", children: title }),
+            tag && /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: "cr-page-header__tag", children: tag })
+          ] }),
+          tools && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-page-header__tools", children: [
+            segmentControl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cr-page-header__segment", children: segmentControl }),
+            actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cr-page-header__actions", children: actions })
+          ] }),
+          onExpand && /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              className: "cr-page-header__expand",
+              variant: "tertiary",
+              size: "medium",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowsOutSimple, {}),
+              "aria-label": expandLabel,
+              onClick: onExpand
+            }
+          )
+        ]
+      }
+    ),
+    tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      tabmenu.TabMenu,
+      {
+        unstyled: true,
+        model: tabs.map((tab) => ({
+          label: tab.label,
+          disabled: tab.disabled,
+          template: tabTemplate(tab)
+        })),
+        activeIndex: ativa,
+        onTabChange: (event) => {
+          setInterna(event.index);
+          onTabChange?.(event.index);
+        },
+        pt: {
+          root: { className: "cr-page-header__tabs" },
+          menu: { className: "cr-page-header__tab-list", "aria-label": tabsLabel ?? title },
+          menuitem: { className: "cr-page-header__tab-item" },
+          action: { className: "cr-page-header__tab" },
+          inkbar: { className: "cr-page-header__inkbar" }
+        }
+      }
+    )
+  ] });
+});
 var Panel = react.forwardRef(function Panel2({ className, style, children, ...props }, ref) {
   const primeRef = react.useRef(null);
   react.useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -1631,6 +1731,7 @@ exports.MenuPrincipal = MenuPrincipal;
 exports.Menubar = Menubar;
 exports.Modal = Modal;
 exports.MultiSelect = MultiSelect;
+exports.PageHeader = PageHeader;
 exports.Panel = Panel;
 exports.Radio = Radio;
 exports.ScrollPanel = ScrollPanel;