fix: use Portal for context menu (#444)

zakodium-oss · Jan 18, 2023 · c3f8c12 · c3f8c12
1 parent 086f0b8
commit c3f8c12
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 18 deletions.
diff --git a/src/components/dropdown-menu/DropdownMenu.tsx b/src/components/dropdown-menu/DropdownMenu.tsx
@@ -72,24 +72,26 @@ function DropdownContextMenu<T>(props: Omit<DropdownMenuProps<T>, 'trigger'>) {
   return (
     <HandleMenuContextDiv onContextMenu={handleContextMenu}>
       {isPopperElementOpen && (
-        <div ref={ref}>
-          <div
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <Menu>
-              <MenuItems
-                itemsStatic
-                onSelect={(selected) => {
-                  closePopperElement();
-                  onSelect(selected);
-                }}
-                {...otherProps}
-              />
-            </Menu>
+        <Portal>
+          <div ref={ref}>
+            <div
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <Menu>
+                <MenuItems
+                  itemsStatic
+                  onSelect={(selected) => {
+                    closePopperElement();
+                    onSelect(selected);
+                  }}
+                  {...otherProps}
+                />
+              </Menu>
+            </div>
           </div>
-        </div>
+        </Portal>
       )}
 
       {children}

diff --git a/stories/components/dropdown.stories.tsx b/stories/components/dropdown.stories.tsx
@@ -17,7 +17,12 @@ import {
   MenuItems,
   MenuOptions,
 } from '../../src/components/dropdown-menu/MenuItems';
-import { DropdownMenu } from '../../src/components/index';
+import {
+  DropdownMenu,
+  Table,
+  ValueRenderers,
+} from '../../src/components/index';
+import data from '../data/table.json';
 
 export default {
   title: 'Components / DropdownMenu',
@@ -187,3 +192,79 @@ export function Complex() {
     </Menu>
   );
 }
+export function TableWithHeaderDropDownMenu() {
+  const options = useMemo<MenuOptions<string>>(() => {
+    return [
+      { label: 'Back', type: 'option', icon: <FaAddressBook /> },
+      {
+        label: 'Forward',
+        type: 'option',
+        disabled: true,
+        icon: <FaAccessibleIcon />,
+      },
+      { label: 'Refresh', type: 'option', icon: <Fa500Px /> },
+      { type: 'divider' },
+      { label: 'Save as', type: 'option', icon: <FaAccusoft /> },
+      { label: 'Print', type: 'option', icon: <FaAcquisitionsIncorporated /> },
+      { label: 'Cast media to device', type: 'option', icon: <FaAd /> },
+      { type: 'divider' },
+      {
+        label: 'Send page to your devices',
+        type: 'option',
+        icon: <FaAddressCard />,
+      },
+      {
+        label: 'Create QR Code for this page',
+        type: 'option',
+        icon: <FaAdjust />,
+      },
+    ];
+  }, []);
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <ColumnWithDropdownMenu value="id" options={options} />
+          <ColumnWithDropdownMenu value="name" options={options} />
+          <ColumnWithDropdownMenu value="rn" options={options} />
+          <ColumnWithDropdownMenu value="mw" options={options} />
+          <ColumnWithDropdownMenu value="em" options={options} />
+          <ColumnWithDropdownMenu value="isExpensive" options={options} />
+          <ColumnWithDropdownMenu value="color" options={options} />
+        </tr>
+      </thead>
+      <tbody>
+        {data
+          .slice(0, 2)
+          .map(({ id, name, rn, mw, em, isExpensive, color }) => (
+            <Table.Row key={id}>
+              <ValueRenderers.Text value={id} />
+              <ValueRenderers.Text value={name} />
+              <ValueRenderers.Text value={rn} />
+              <ValueRenderers.Number value={mw} fixed={2} />
+              <ValueRenderers.Number value={em} fixed={4} />
+              <ValueRenderers.Boolean value={isExpensive} />
+              <ValueRenderers.Color value={color} />
+            </Table.Row>
+          ))}
+      </tbody>
+    </table>
+  );
+}
+
+function ColumnWithDropdownMenu({
+  value,
+  options,
+}: {
+  value: string;
+  options: MenuOptions<string>;
+}) {
+  return (
+    <td>
+      <DropdownMenu trigger="contextMenu" onSelect={noop} options={options}>
+        <div>{value}</div>
+      </DropdownMenu>
+    </td>
+  );
+}