From b6574ecdd58061322f1cdf8676adbc701df9e053 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Mon, 5 Aug 2024 17:26:32 +0200
Subject: [PATCH 1/2] added divider, group, title

---
 .../popover-menu-panel-divider.tsx            |  5 ++
 .../popover-menu/popover-menu-panel-group.tsx |  9 ++++
 .../popover-menu/popover-menu-panel-item.tsx  | 49 +++++++++++++++++++
 .../popover-menu/popover-menu-panel-title.tsx | 11 +++++
 .../popover-menu/popover-menu-panel.tsx       | 32 ++++--------
 .../popover-menu/popover-menu.stories.tsx     | 19 +++++--
 6 files changed, 100 insertions(+), 25 deletions(-)
 create mode 100644 src/components/popover-menu/popover-menu-panel-divider.tsx
 create mode 100644 src/components/popover-menu/popover-menu-panel-group.tsx
 create mode 100644 src/components/popover-menu/popover-menu-panel-item.tsx
 create mode 100644 src/components/popover-menu/popover-menu-panel-title.tsx

diff --git a/src/components/popover-menu/popover-menu-panel-divider.tsx b/src/components/popover-menu/popover-menu-panel-divider.tsx
new file mode 100644
index 00000000..e4d70002
--- /dev/null
+++ b/src/components/popover-menu/popover-menu-panel-divider.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export const PopoverMenuPanelDivider = () => {
+    return <div className="h-px w-full bg-neutral-300" />;
+};
diff --git a/src/components/popover-menu/popover-menu-panel-group.tsx b/src/components/popover-menu/popover-menu-panel-group.tsx
new file mode 100644
index 00000000..a61e16fa
--- /dev/null
+++ b/src/components/popover-menu/popover-menu-panel-group.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+interface PopoverMenuGroupProps {
+    children: React.ReactNode;
+}
+
+export const PopoverMenuPanelGroup = ({ children }: PopoverMenuGroupProps) => {
+    return <div className="flex flex-col">{children}</div>;
+};
diff --git a/src/components/popover-menu/popover-menu-panel-item.tsx b/src/components/popover-menu/popover-menu-panel-item.tsx
new file mode 100644
index 00000000..d4bf4f3b
--- /dev/null
+++ b/src/components/popover-menu/popover-menu-panel-item.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+
+const itemIntents = {
+    neutral: "text-neutral-700 fill-neutral-700 hover:bg-primary-100",
+    danger: "text-danger-500 fill-danger-500 hover:bg-danger-100",
+};
+
+const activeItemIntents = {
+    neutral: "bg-primary-100 fill-primary-400 text-primary-400 before:bg-primary-400",
+    danger: "bg-danger-100 fill-danger-400 text-danger-500 before:bg-danger-400",
+};
+
+export interface PopoverMenuPanelItemProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+    Icon?: React.ComponentType<{ className: string }>;
+    variant?: keyof typeof itemIntents;
+    active?: boolean;
+}
+
+export const PopoverMenuPanelItem = ({
+    children,
+    onClick,
+    Icon,
+    variant = "neutral",
+    active,
+}: PopoverMenuPanelItemProps) => {
+    const intentStyles = itemIntents[variant];
+
+    return (
+        <div
+            className={classNames(
+                "relative flex w-full cursor-pointer flex-row items-center gap-3 overflow-hidden px-4 py-2 text-sm font-normal focus:ring-2 focus:ring-primary-200",
+                intentStyles,
+                active && activeItemIntents[variant],
+                active &&
+                    "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md"
+            )}
+            role="menuitem"
+            tabIndex={0}
+            onClick={onClick}
+            onKeyDown={onClick}
+        >
+            {Icon && <Icon className={classNames("h-3.5 w-3.5")} />}
+            {children}
+        </div>
+    );
+};
diff --git a/src/components/popover-menu/popover-menu-panel-title.tsx b/src/components/popover-menu/popover-menu-panel-title.tsx
new file mode 100644
index 00000000..e602cf2b
--- /dev/null
+++ b/src/components/popover-menu/popover-menu-panel-title.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+interface PopoverMenuPanelTitleProps {
+    children: React.ReactNode;
+}
+
+export const PopoverMenuPanelTitle = ({ children }: PopoverMenuPanelTitleProps) => {
+    return (
+        <p className="px-4 pb-2 pt-3 text-xs font-normal uppercase text-neutral-700">{children}</p>
+    );
+};
diff --git a/src/components/popover-menu/popover-menu-panel.tsx b/src/components/popover-menu/popover-menu-panel.tsx
index 305a24ba..7f8d2422 100644
--- a/src/components/popover-menu/popover-menu-panel.tsx
+++ b/src/components/popover-menu/popover-menu-panel.tsx
@@ -1,31 +1,16 @@
 import { PopoverPanel as HeadlessUiPopoverPanel } from "@headlessui/react";
 import React from "react";
 import { usePopoverMenuContext } from "./popover-menu-context";
+import { PopoverMenuPanelGroup } from "./popover-menu-panel-group";
+import { PopoverMenuPanelItem } from "./popover-menu-panel-item";
+import { PopoverMenuPanelDivider } from "./popover-menu-panel-divider";
+import { PopoverMenuPanelTitle } from "./popover-menu-panel-title";
 
-export interface PopoverMenuPanelItemProps {
+export interface PopoverMenuPanelProps {
     children: React.ReactNode;
-    onClick?: () => void;
 }
 
-const PopoverMenuPanelItem = ({ children, onClick }: PopoverMenuPanelItemProps) => {
-    return (
-        <button
-            className="flex w-full cursor-pointer items-center overflow-hidden px-4 py-2 text-sm font-normal hover:bg-neutral-100 focus:ring-2 focus:ring-primary-200"
-            type="button"
-            tabIndex={0}
-            onClick={onClick}
-            onKeyDown={onClick}
-        >
-            {children}
-        </button>
-    );
-};
-
-export interface NavigationPopoverPanelProps {
-    children: React.ReactNode;
-}
-
-const PopoverMenuPanel = ({ children }: NavigationPopoverPanelProps) => {
+const PopoverMenuPanel = ({ children }: PopoverMenuPanelProps) => {
     const {
         popoverPanel: { setPopperElement, styles, attributes },
     } = usePopoverMenuContext();
@@ -35,7 +20,7 @@ const PopoverMenuPanel = ({ children }: NavigationPopoverPanelProps) => {
             ref={(el) => el && setPopperElement(el)}
             style={styles}
             {...attributes}
-            className="z-40 ml-2 w-52 rounded bg-neutral-0 py-2 shadow"
+            className="z-40 w-52 rounded bg-neutral-0 py-2 shadow"
         >
             {children}
         </HeadlessUiPopoverPanel>
@@ -43,5 +28,8 @@ const PopoverMenuPanel = ({ children }: NavigationPopoverPanelProps) => {
 };
 
 PopoverMenuPanel.Item = PopoverMenuPanelItem;
+PopoverMenuPanel.Group = PopoverMenuPanelGroup;
+PopoverMenuPanel.Divider = PopoverMenuPanelDivider;
+PopoverMenuPanel.Title = PopoverMenuPanelTitle;
 
 export { PopoverMenuPanel };
diff --git a/src/components/popover-menu/popover-menu.stories.tsx b/src/components/popover-menu/popover-menu.stories.tsx
index 29651e93..b910b1ad 100644
--- a/src/components/popover-menu/popover-menu.stories.tsx
+++ b/src/components/popover-menu/popover-menu.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { PopoverMenu } from "./popover-menu";
+import { AddIcon, ChatIcon, DeleteIcon, EditIcon } from "../../icons";
 
 const meta: Meta<typeof PopoverMenu> = {
     title: "Popover Menu",
@@ -25,9 +26,21 @@ export const Default: Story = {
                 <PopoverMenu.Overlay />
 
                 <PopoverMenu.Panel>
-                    <PopoverMenu.Panel.Item>Item 1</PopoverMenu.Panel.Item>
-                    <PopoverMenu.Panel.Item>Item 1</PopoverMenu.Panel.Item>
-                    <PopoverMenu.Panel.Item>Item 1</PopoverMenu.Panel.Item>
+                    <PopoverMenu.Panel.Title>You</PopoverMenu.Panel.Title>
+
+                    <PopoverMenu.Panel.Item Icon={EditIcon}>Edit profile</PopoverMenu.Panel.Item>
+                    <PopoverMenu.Panel.Item Icon={ChatIcon}>Support</PopoverMenu.Panel.Item>
+                    <PopoverMenu.Panel.Item Icon={AddIcon}>Invite member</PopoverMenu.Panel.Item>
+
+                    <PopoverMenu.Panel.Divider />
+
+                    <PopoverMenu.Panel.Group>
+                        <PopoverMenu.Panel.Title>Danger Zone</PopoverMenu.Panel.Title>
+
+                        <PopoverMenu.Panel.Item Icon={DeleteIcon} variant="danger">
+                            Item 1
+                        </PopoverMenu.Panel.Item>
+                    </PopoverMenu.Panel.Group>
                 </PopoverMenu.Panel>
             </PopoverMenu>
         </div>

From 48784f1e66e3e51cd209a9fc332d604ee7033138 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 6 Aug 2024 10:28:40 +0200
Subject: [PATCH 2/2] added exports for interfaces

---
 src/components/popover-menu/popover-menu-panel-group.tsx | 2 +-
 src/components/popover-menu/popover-menu-panel-title.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/popover-menu/popover-menu-panel-group.tsx b/src/components/popover-menu/popover-menu-panel-group.tsx
index a61e16fa..1b93789d 100644
--- a/src/components/popover-menu/popover-menu-panel-group.tsx
+++ b/src/components/popover-menu/popover-menu-panel-group.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-interface PopoverMenuGroupProps {
+export interface PopoverMenuGroupProps {
     children: React.ReactNode;
 }
 
diff --git a/src/components/popover-menu/popover-menu-panel-title.tsx b/src/components/popover-menu/popover-menu-panel-title.tsx
index e602cf2b..0c665127 100644
--- a/src/components/popover-menu/popover-menu-panel-title.tsx
+++ b/src/components/popover-menu/popover-menu-panel-title.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-interface PopoverMenuPanelTitleProps {
+export interface PopoverMenuPanelTitleProps {
     children: React.ReactNode;
 }