@luscii-healthtech/web-ui 0.4.2 → 0.4.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/NavMenu/{NavMenu.js → NavMenu.tsx}

@@ -4,8 +4,12 @@ import { useState } from "react";
 import Button from "../Button/Button";
 
 import { NavMenuContent } from "./NavMenuContent";
+import { NavMenuItemProps } from "./NavMenuItem";
 
-export function NavMenu(props) {
+export type NavMenuElement = NavMenuItemProps | { type: "separator" | "spacer" }
+export type NavMenuProps = { items: NavMenuElement[] };
+
+export function NavMenu({ items }: NavMenuProps): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleToggleOpen = () => {
@@ -15,7 +19,7 @@ export function NavMenu(props) {
   return (
     <>
       <div className={"hidden h-screen lg:flex"}>
-        <NavMenuContent items={props.items} />
+        <NavMenuContent items={items} />
       </div>
       <div className={"lg:hidden relative bg-nav-header w-screen flex items-center p-2 shadow-lg"}>
         <Button
@@ -27,7 +31,7 @@ export function NavMenu(props) {
       </div>
       {isOpen && (
         <div className="absolute z-20">
-          <NavMenuContent items={props.items} />
+          <NavMenuContent items={items} />
         </div>
       )}
     </>

package/src/components/NavMenu/NavMenu.utils.ts

@@ -0,0 +1,6 @@
+import { NavMenuElement } from "./NavMenu";
+import { NavMenuItemProps } from "./NavMenuItem";
+
+export function isNavMenuItem(item: NavMenuElement): item is NavMenuItemProps {
+    return item.type === "base" || item.type === undefined;
+}

package/src/components/NavMenu/NavMenuContent.tsx

@@ -1,21 +1,21 @@
 import * as React from "react";
 
-import { NavMenuItem, NavMenuItemProps } from "./NavMenuItem";
+import { NavMenuProps } from "./NavMenu";
+import { NavMenuItem } from "./NavMenuItem";
+import { isNavMenuItem } from "./NavMenu.utils";
 
-interface NavMenuContentProps {
-  items: Array<NavMenuItemProps>;
-}
-
-export const NavMenuContent = (props: NavMenuContentProps): JSX.Element => {
+export const NavMenuContent = ({ items }: NavMenuProps): JSX.Element => {
   return (
     <div className={"flex flex-col bg-nav-menu w-46 pl-1 py-2 lg:relative shadow-lg"}>
-      {props.items.map((item, index) => {
+      {items.map((item, index) => {
         if (item.type === "separator") {
           return <div key={`${item.type}-${index}`} className={"border-b ml-3 border-slate-600"} />;
         } else if (item.type === "spacer") {
           return <div key={`${item.type}-${index}`} className={"mt-auto"} />;
-        } else {
+        } else if (isNavMenuItem(item)) {
           return <NavMenuItem {...item} key={item.title} />;
+        } else {
+          return null as never;
         }
       })}
     </div>

package/src/components/NavMenu/NavMenuItem.tsx

@@ -15,7 +15,7 @@ export interface NavMenuItemProps {
   dataTestId: string;
   gtmEvent?: string;
   isExternal?: boolean;
-  type?: "separator" | "spacer" | "base" | void;
+  type?: "base";
   track?: (event: string) => void;
 }
 

package/src/index.tsx

@@ -40,7 +40,7 @@ export {
 export { default as Menu } from "./components/Menu/Menu";
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";
 export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
-export { NavMenu } from "./components/NavMenu/NavMenu";
+export { NavMenu, NavMenuElement } from "./components/NavMenu/NavMenu";
 export {
   NotificationBanner,
   NotificationBannerColor,