Add the PopupMenu component.

Author: macroing

README.md

@@ -43,6 +43,7 @@ The components in this library will be described below.
 - [OptionList](https://github.com/macroing/simple-react-components/tree/master/documentation/option-list) provides a component that defines an option list.
 - [Pagination](https://github.com/macroing/simple-react-components/tree/master/documentation/pagination) provides a component that defines a pagination.
 - [Panel](https://github.com/macroing/simple-react-components/tree/master/documentation/panel) provides a component that defines a panel.
+- [PopupMenu](https://github.com/macroing/simple-react-components/tree/master/documentation/popup-menu) provides a component that defines a popup menu.
 - [Select](https://github.com/macroing/simple-react-components/tree/master/documentation/select) provides a component that defines a select.
 - [Stars](https://github.com/macroing/simple-react-components/tree/master/documentation/stars) provides a component that defines stars.
 - [TabPane](https://github.com/macroing/simple-react-components/tree/master/documentation/tab-pane) provides a component that defines a tab pane.

dist/index/index.js

@@ -0,0 +1 @@
+# `PopupMenu`

dist/index/src/PopupMenu.js

@@ -23,6 +23,7 @@ import OneColumnLayout from "./src/OneColumnLayout";
 import OptionList from "./src/OptionList";
 import Pagination from "./src/Pagination";
 import Panel from "./src/Panel";
+import PopupMenu from "./src/PopupMenu";
 import Select from "./src/Select";
 import Stars from "./src/Stars";
 import TabPane from "./src/TabPane";
@@ -33,4 +34,4 @@ import ThreeColumnLayout from "./src/ThreeColumnLayout";
 import TooltipContainer from "./src/TooltipContainer";
 import TwoColumnLayout from "./src/TwoColumnLayout";
 
-export { Accordion, Background, Button, ButtonLink, Card, Carousel, Chip, DesktopMenuBar, Dialog, FileInputButtonLabel, Footer, Form, Header, IconButton, Image, ImageViewer, Input, Jumbotron, LinkButton, MenuBar, MobileMenuBar, OneColumnLayout, OptionList, Pagination, Panel, Select, Stars, TabPane, Table, TaskBar, TextArea, ThreeColumnLayout, TooltipContainer, TwoColumnLayout };
+export { Accordion, Background, Button, ButtonLink, Card, Carousel, Chip, DesktopMenuBar, Dialog, FileInputButtonLabel, Footer, Form, Header, IconButton, Image, ImageViewer, Input, Jumbotron, LinkButton, MenuBar, MobileMenuBar, OneColumnLayout, OptionList, Pagination, Panel, PopupMenu, Select, Stars, TabPane, Table, TaskBar, TextArea, ThreeColumnLayout, TooltipContainer, TwoColumnLayout };

dist/index/src/PopupMenu.module.css.js

@@ -0,0 +1,61 @@
+"use client";
+
+import importedStyles from "./PopupMenu.module.css";
+
+export default function PopupMenu(props) {
+  const isVisible = props.isVisible;
+  const items = props.items;
+  const linkFactory = props.linkFactory || defaultLinkFactory;
+  const setIsVisible = props.setIsVisible;
+  const styles = props.styles || importedStyles;
+  const title = props.title;
+
+  function defaultLinkFactory(className, href, onClick, children) {
+    return (
+      <a className={className} href={href} onClick={onClick}>
+        {children}
+      </a>
+    );
+  }
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className={styles.popup_menu}>
+      <div className={styles.header}>
+        <div className={styles.title}>{title}</div>
+        <button className={styles.close} onClick={(e) => setIsVisible(false)}>
+          <span aria-hidden className="fa fa-times"></span>
+        </button>
+      </div>
+      <div className={styles.content}>
+        <ul className={styles.ul}>
+          {items.map((item, itemIndex) => (
+            <li className={styles.li + (item.heading ? " " + styles.li_heading : "") + (item.indented ? " " + styles.li_indented : "")} key={"item-" + itemIndex}>
+              {item.href ? (
+                linkFactory(
+                  styles.a,
+                  item.href,
+                  (e) => setIsVisible(false),
+                  <>
+                    {item.icon && <span aria-hidden className={item.icon + " " + styles.icon}></span>} <span>{item.text}</span> {item.badge && <span className={styles.badge}>{item.badge}</span>}
+                  </>
+                )
+              ) : item.onClick ? (
+                <button className={styles.button} onClick={item.onClick}>
+                  {item.icon && <span aria-hidden className={item.icon + " " + styles.icon}></span>} <span>{item.text}</span> {item.badge && <span className={styles.badge}>{item.badge}</span>}
+                </button>
+              ) : (
+                <div className={styles.div}>
+                  {item.icon && <span aria-hidden className={item.icon + " " + styles.icon}></span>} <span>{item.text}</span> {item.badge && <span className={styles.badge}>{item.badge}</span>}
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}