@appcorp/app-corp-vista 0.2.41 → 0.2.43

package/molecules/vista-header-v1/nav-bar.js

@@ -22,33 +22,33 @@ var NavBar = function (_a) {
                     react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
                     react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
             react_1.default.createElement(react_2.PopoverGroup, { className: "hidden lg:flex lg:gap-x-12" }, items.map(function (_a) {
-                var name = _a.name, href = _a.href, megaMenu = _a.megaMenu, cta = _a.cta;
+                var cta = _a.cta, handleOnClick = _a.handleOnClick, megaMenu = _a.megaMenu, name = _a.name;
                 var multiGrid = megaMenu && megaMenu.length > 5 ? true : false;
                 if (megaMenu && (megaMenu === null || megaMenu === void 0 ? void 0 : megaMenu.length) > 1) {
                     return (react_1.default.createElement(react_2.Popover, { key: name, className: "" },
-                        react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900" },
+                        react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 cursor-pointer", onClick: handleOnClick },
                             name,
                             react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" })),
-                        react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-3 w-screen ".concat(multiGrid ? 'max-w-7xl' : 'max-w-md', " -translate-x-1/2 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in") },
+                        react_1.default.createElement(react_2.PopoverPanel, { className: "absolute left-1/2 z-10 mt-3 w-screen ".concat(multiGrid ? 'max-w-7xl' : 'max-w-md', " -translate-x-1/2 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in"), transition: true },
                             react_1.default.createElement("div", { className: "".concat(multiGrid ? 'grid grid-cols-2 gap-4' : 'p-4') }, megaMenu.map(function (_a) {
-                                var name = _a.name, href = _a.href, description = _a.description, icon = _a.icon;
+                                var name = _a.name, handleChildOnClick = _a.handleOnClick, description = _a.description, icon = _a.icon;
                                 return (react_1.default.createElement("div", { key: name, className: "group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50" },
                                     react_1.default.createElement("div", { className: "flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white" }, icon),
                                     react_1.default.createElement("div", { className: "flex-auto" },
-                                        react_1.default.createElement("a", { href: href, className: "block font-semibold text-primary" },
+                                        react_1.default.createElement("button", { onClick: handleChildOnClick, className: "block font-semibold text-primary" },
                                             name,
                                             react_1.default.createElement("span", { className: "absolute inset-0" })),
                                         react_1.default.createElement("p", { className: "mt-1 text-gray-600" }, description))));
                             })),
                             react_1.default.createElement("div", { className: "grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50" }, cta && cta.length > 1 && cta.map(function (_a) {
-                                var icon = _a.icon, name = _a.name, href = _a.href;
-                                return (react_1.default.createElement("a", { key: name, href: href, className: "flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100" },
+                                var icon = _a.icon, name = _a.name, handleOnClick = _a.handleOnClick;
+                                return (react_1.default.createElement("button", { key: name, onClick: handleOnClick, className: "flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100" },
                                     icon,
                                     name));
                             })))));
                 }
                 ;
-                return (react_1.default.createElement("a", { key: name, href: href, className: "text-sm/6 font-semibold text-gray-900" }, name));
+                return (react_1.default.createElement("div", { className: "text-sm/6 font-semibold text-gray-900 cursor-pointer", key: name, onClick: handleOnClick }, name));
             })),
             react_1.default.createElement("div", { className: "hidden lg:flex lg:flex-1 lg:justify-end" }, loginVisible && (react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
                 "Log in ",
@@ -59,7 +59,7 @@ var NavBar = function (_a) {
                 react_1.default.createElement("div", { className: "flex items-center justify-between" },
                     react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
                         react_1.default.createElement("span", { className: "sr-only" }, companyName),
-                        react_1.default.createElement("img", { alt: logoAlt, src: logoSrc, className: "h-8 w-auto" })),
+                        react_1.default.createElement("img", { alt: logoAlt, className: "h-8 w-auto", src: logoSrc })),
                     react_1.default.createElement("button", { type: "button", onClick: function () { return handleMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
                         react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
                         react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
@@ -72,12 +72,12 @@ var NavBar = function (_a) {
                                         item.name,
                                         react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none group-data-open:rotate-180" })),
                                     react_1.default.createElement(react_2.DisclosurePanel, { className: "mt-2 space-y-2" }, item.megaMenu.map(function (_a) {
-                                        var name = _a.name, href = _a.href;
-                                        return (react_1.default.createElement(react_2.DisclosureButton, { as: "a", className: "block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-50", href: href, key: name }, name));
+                                        var name = _a.name, handleOnClick = _a.handleOnClick;
+                                        return (react_1.default.createElement(react_2.DisclosureButton, { className: "block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-50", key: name, onClick: handleOnClick }, name));
                                     }))));
                             }
                             ;
-                            return (react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50", key: item.name }, item.name));
+                            return (react_1.default.createElement("div", { className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50", key: item.name, onClick: item.handleOnClick }, item.name));
                         })),
                         loginVisible && (react_1.default.createElement("div", { className: "py-6" },
                             react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Log in")))))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/app-corp-vista",
-  "version": "0.2.41",
+  "version": "0.2.43",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib",
     "build:next": "next build",

package/type/vista-header-type.d.ts

@@ -1,20 +1,20 @@
 import { ReactElement } from "react";
 export interface VistaHeaderMegaMenuItem {
-    description: string;
-    href: string;
-    icon: ReactElement;
     name: string;
+    icon: ReactElement;
+    handleOnClick: () => void;
+    description: string;
 }
 export interface VistaHeaderCtaItem {
-    href: string;
+    handleOnClick: () => void;
     icon: ReactElement;
     name: string;
 }
 export interface VistaHeaderV1Item {
-    href: string;
     megaMenu?: VistaHeaderMegaMenuItem[];
     cta?: VistaHeaderCtaItem[];
     name: string;
+    handleOnClick: () => void;
 }
 export interface VistaHeaderV1Props {
     companyName: string;