WIP: panel

packages/ui/src/app/app.jsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
 
@@ -27,6 +28,7 @@ import { QueryStateProvider, useComponentQueryState } from '../query-state';
 import I18N from '../i18n';
 import { Header } from './header';
 import css from './app.module.css';
+import { Panel } from './panel';
 
 const ScrollToTop = () => {
   const { pathname } = useLocation();
@@ -159,6 +161,8 @@ const PackagesContent = () => {
 };
 
 const AppComponent = ({ version, jobs }) => {
+  const [panel, setPanel] = useComponentQueryState('p');
+
   if (jobs?.length === 0) {
     return (
       <Layout version={version}>
@@ -207,6 +211,12 @@ const AppComponent = ({ version, jobs }) => {
           </Switch>
         </div>
       </Layout>
+
+      <button onClick={() => setPanel({ p: 'some' })} type="button">
+        open
+      </button>
+
+      <Panel state={panel} setState={setPanel} />
     </JobsProvider>
   );
 };

packages/ui/src/app/panel/index.ts

@@ -0,0 +1 @@
+export * from './panel';

packages/ui/src/app/panel/panel.module.css

@@ -0,0 +1,31 @@
+.root {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: var(--layer-high);
+}
+
+.inner {
+  padding: var(--space-small);
+  position: absolute;
+  right: -100%;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 60rem;
+  box-shadow: 0 0 var(--space-medium) var(--color-shadow);
+
+  background: white;
+  pointer-events: auto;
+  transition: var(--transition-in);
+  overflow-y: auto;
+}
+
+.open .inner {
+  right: 0;
+  transition: var(--transition-out);
+}

packages/ui/src/app/panel/panel.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import cx from 'classnames';
+
+import * as css from './panel.module.css';
+
+interface PanelState {
+  p: string;
+}
+
+interface PanelProps extends React.ComponentProps<'div'> {
+  state?: PanelState;
+  setState: (newState: PanelState) => void;
+}
+
+export const Panel = ({ className = '', state = { p: '' }, setState }: PanelProps) => {
+  const handleClose = useCallback(() => setState({ p: '' }), [setState]);
+  return (
+    <div className={cx(css.root, state?.p && css.open, className)}>
+      <div className={css.inner}>
+        Panel
+        <button onClick={handleClose} type="button">close</button>
+        <div id="portal-panel-content">
+          NONE
+        </div>
+      </div>
+    </div>
+  );
+}

packages/ui/src/components/bundle-modules/bundle-modules.jsx

@@ -11,6 +11,7 @@ import {
   MODULE_FILTERS,
   MODULE_FILE_TYPE,
 } from '@bundle-stats/utils';
+import { Portal } from 'ariakit/portal';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
@@ -102,10 +103,32 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
     [row],
   );
 
+   const getPortalElement = useCallback(() => {
+     const portalRoot = document.getElementById('portal-panel-content');
+     portalRoot.innerText = '';
+     return portalRoot;
+   }, []);
+
   if (!showHoverCard) {
-    return <div onMouseEnter={handleOnMouseEnter}>{content}</div>;
+    return <div onClick={handleOnMouseEnter}>{content}</div>;
   }
 
+  return (
+    <>
+      <div>{content}</div>
+      <Portal portalElement={getPortalElement}>
+        <ModuleInfo
+          item={row}
+          chunks={chunks}
+          chunkIds={chunkIds}
+          labels={labels}
+          customComponentLink={CustomComponentLink}
+          onClick={close}
+        />
+      </Portal>
+    </>
+  )
+
   return (
     <HoverCard label={content} hoverCardClassName={css.nameHoverCard}>
       {({ close }) => (