Adds click outside onClose onOpen hooks. Fixes active styles.

AgnosticUI · Mar 24, 2022 · 1c0d55a · 1c0d55a
1 parent bfd5dcf
commit 1c0d55a
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 50 deletions.
diff --git a/agnostic-css/src/components/menu/menu.css b/agnostic-css/src/components/menu/menu.css
@@ -48,12 +48,15 @@
   border-top: 0;
 }
 
-.menu-item-selected,
-.menu-item:active {
+.menu-item-selected {
   color: white;
   background-color: var(--agnostic-primary);
 }
 
+.menu-item:active {
+  color: var(--agnostic-primary);
+}
+
 /* TODO make this more flexible eventually */
 .menu-icon {
   font-family: sans-serif;

diff --git a/agnostic-react/src/Menu.tsx b/agnostic-react/src/Menu.tsx
@@ -25,9 +25,9 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
   isBordered?: boolean;
   menuItems: JSX.Element[];
   icon?: ReactNode;
-  onOpen: (selectedItem: number) => void;
-  onClose: (selectedItem: number) => void;
-  // closeOnBlur?: boolean;
+  onOpen?: (selectedItem: number) => void;
+  onClose?: (selectedItem: number) => void;
+  closeOnClickOutside?: boolean;
   closeOnSelect?: boolean;
 }
 
@@ -71,7 +71,7 @@ export const Menu: FC<MenuProps> = ({
   menuItems,
   onOpen,
   onClose,
-  // closeOnBlur = true,
+  closeOnClickOutside = true,
   closeOnSelect = true,
 }): ReactElement => {
   const [expanded, setExpanded] = useState(false);
@@ -177,7 +177,7 @@ export const Menu: FC<MenuProps> = ({
   };
 
   const clickedOutside = (ev: Event) => {
-    if (expanded) {
+    if (expanded && closeOnClickOutside) {
       if (!isInside(ev.target)) {
         setExpanded(false);
         focusTriggerButton();

diff --git a/agnostic-react/src/menu.css b/agnostic-react/src/menu.css
@@ -48,12 +48,15 @@
   border-top: 0;
 }
 
-.menu-item-selected,
-.menu-item:active {
+.menu-item-selected {
   color: white;
   background-color: var(--agnostic-primary);
 }
 
+.menu-item:active {
+  color: var(--agnostic-primary);
+}
+
 /* TODO make this more flexible eventually */
 .menu-icon {
   font-family: sans-serif;

diff --git a/agnostic-react/src/stories/Menu.stories.tsx b/agnostic-react/src/stories/Menu.stories.tsx
@@ -15,7 +15,6 @@ export default {
   },
 } as Meta;
 
-// tabButtons: JSX.Element[];
 export const Default = () => (
   <Menu
     id="mymenu1"
@@ -31,46 +30,117 @@ export const Default = () => (
   />
 );
 
-// export const Small = () => (
-//   <Menu id="mymenu2" buttonLabel="Players" size="small">
-//     <MenuItem>Andre Agassi</MenuItem>
-//     <MenuItem>Serena Williams</MenuItem>
-//     <MenuItem isDisabled>Rafael Nadal</MenuItem>
-//     <MenuItem isSelected>Roger Federer</MenuItem>
-//     <MenuItem>Althea Gibson</MenuItem>
-//     <MenuItem>Bjorn Borg</MenuItem>
-//   </Menu>
-// );
+export const NoCloseOnClickOutside = () => (
+  <Menu
+    closeOnClickOutside={false}
+    id="mymenu2"
+    buttonLabel="Players"
+    menuItems={[
+      <MenuItem>Andre Agassi</MenuItem>,
+      <MenuItem>Serena Williams</MenuItem>,
+      <MenuItem isDisabled>Rafael Nadal</MenuItem>,
+      <MenuItem>Roger Federer</MenuItem>,
+      <MenuItem>Althea Gibson</MenuItem>,
+      <MenuItem>Bjorn Borg</MenuItem>,
+    ]}
+  />
+);
 
-// export const Large = () => (
-//   <Menu id="mymenu3" buttonLabel="Players" size="large">
-//     <MenuItem>Andre Agassi</MenuItem>
-//     <MenuItem>Serena Williams</MenuItem>
-//     <MenuItem isDisabled>Rafael Nadal</MenuItem>
-//     <MenuItem isSelected>Roger Federer</MenuItem>
-//     <MenuItem>Althea Gibson</MenuItem>
-//     <MenuItem>Bjorn Borg</MenuItem>
-//   </Menu>
-// );
+export const NoCloseOnSelect = () => (
+  <Menu
+    closeOnSelect={false}
+    id="mymenu3"
+    buttonLabel="Players"
+    menuItems={[
+      <MenuItem>Andre Agassi</MenuItem>,
+      <MenuItem>Serena Williams</MenuItem>,
+      <MenuItem isDisabled>Rafael Nadal</MenuItem>,
+      <MenuItem>Roger Federer</MenuItem>,
+      <MenuItem>Althea Gibson</MenuItem>,
+      <MenuItem>Bjorn Borg</MenuItem>,
+    ]}
+  />
+);
 
-// export const Rounded = () => (
-//   <Menu isRounded id="mymenu4" buttonLabel="Players">
-//     <MenuItem>Andre Agassi</MenuItem>
-//     <MenuItem>Serena Williams</MenuItem>
-//     <MenuItem isDisabled>Rafael Nadal</MenuItem>
-//     <MenuItem>Roger Federer</MenuItem>
-//     <MenuItem>Althea Gibson</MenuItem>
-//     <MenuItem isSelected>Bjorn Borg</MenuItem>
-//   </Menu>
-// );
+export const NoCloseOnSelectOrClickOutside = () => (
+  <Menu
+    closeOnSelect={false}
+    closeOnClickOutside={false}
+    id="mymenu4"
+    buttonLabel="Players"
+    menuItems={[
+      <MenuItem>Andre Agassi</MenuItem>,
+      <MenuItem>Serena Williams</MenuItem>,
+      <MenuItem isDisabled>Rafael Nadal</MenuItem>,
+      <MenuItem>Roger Federer</MenuItem>,
+      <MenuItem>Althea Gibson</MenuItem>,
+      <MenuItem>Bjorn Borg</MenuItem>,
+    ]}
+  />
+);
 
-// export const Bordered = () => (
-//   <Menu isBordered id="mymenu5" buttonLabel="Players">
-//     <MenuItem>Andre Agassi</MenuItem>
-//     <MenuItem>Serena Williams</MenuItem>
-//     <MenuItem isDisabled>Rafael Nadal</MenuItem>
-//     <MenuItem>Roger Federer</MenuItem>
-//     <MenuItem>Althea Gibson</MenuItem>
-//     <MenuItem isSelected>Bjorn Borg</MenuItem>
-//   </Menu>
-// );
+export const Small = () => (
+  <Menu
+    id="mymenu5"
+    size="small"
+    buttonLabel="Players"
+    menuItems={[
+      <MenuItem>Andre Agassi</MenuItem>,
+      <MenuItem>Serena Williams</MenuItem>,
+      <MenuItem isDisabled>Rafael Nadal</MenuItem>,
+      <MenuItem>Roger Federer</MenuItem>,
+      <MenuItem>Althea Gibson</MenuItem>,
+      <MenuItem>Bjorn Borg</MenuItem>,
+    ]}
+  />
+);
+
+export const Large = () => (
+  <Menu
+    id="mymenu6"
+    size="large"
+    buttonLabel="Players"
+    menuItems={[
+      <MenuItem>Andre Agassi</MenuItem>,
+      <MenuItem>Serena Williams</MenuItem>,
+      <MenuItem isDisabled>Rafael Nadal</MenuItem>,
+      <MenuItem>Roger Federer</MenuItem>,
+      <MenuItem>Althea Gibson</MenuItem>,
+      <MenuItem>Bjorn Borg</MenuItem>,
+    ]}
+  />
+);
+
+export const Rounded = () => (
+  <Menu
+    isRounded
+    id="mymenu7"
+    size="large"
+    buttonLabel="Players"
+    menuItems={[
+      <MenuItem>Andre Agassi</MenuItem>,
+      <MenuItem>Serena Williams</MenuItem>,
+      <MenuItem isDisabled>Rafael Nadal</MenuItem>,
+      <MenuItem>Roger Federer</MenuItem>,
+      <MenuItem>Althea Gibson</MenuItem>,
+      <MenuItem>Bjorn Borg</MenuItem>,
+    ]}
+  />
+);
+
+export const Bordered = () => (
+  <Menu
+    isBordered
+    id="mymenu8"
+    size="large"
+    buttonLabel="Players"
+    menuItems={[
+      <MenuItem>Andre Agassi</MenuItem>,
+      <MenuItem>Serena Williams</MenuItem>,
+      <MenuItem isDisabled>Rafael Nadal</MenuItem>,
+      <MenuItem>Roger Federer</MenuItem>,
+      <MenuItem>Althea Gibson</MenuItem>,
+      <MenuItem>Bjorn Borg</MenuItem>,
+    ]}
+  />
+);