fix: include dependencies in non-esm bundle

packages/nucleus/src/components/listbox/ListBoxPopover.jsx

@@ -2,13 +2,10 @@ import React, {
   useCallback,
 } from 'react';
 
-import {
-  Popover,
-} from 'react-leonardo-ui';
-
 import Lock from '@nebula.js/ui/icons/Lock';
 import Unlock from '@nebula.js/ui/icons/Unlock';
 import ButtonInline from '@nebula.js/ui/components/ButtonInline';
+import Popover from '@nebula.js/ui/components/popover';
 
 import useModel from '../../hooks/useModel';
 import useLayout from '../../hooks/useLayout';
@@ -79,7 +76,7 @@ export default function ListBoxPopover({
         )
       }
       </Popover.Header>
-      <Popover.Body nopad>
+      <Popover.Body>
         <ListBox model={model} />
       </Popover.Body>
     </Popover>

packages/ui/components/popover/Body.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const PopoverBody = ({
+  children,
+}) => (
+  <div>
+    {children}
+  </div>
+);
+
+export default PopoverBody;

packages/ui/components/popover/Content.jsx

@@ -0,0 +1,176 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+import { oppositeDock, positionToElement } from 'react-leonardo-ui/src/positioner';
+
+import styled from '../styled';
+
+const classes = styled({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '2px',
+  margin: 'auto',
+  minWidth: '250px',
+  border: '1px solid transparent',
+  zIndex: '1021',
+  backgroundColor: '$grey100',
+  borderColor: '$alpha15',
+  boxShadow: '0 1px 2px $alpha03',
+});
+
+const [arrowC] = styled({
+  position: 'absolute',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    width: 0,
+    height: 0,
+  },
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    width: 0,
+    height: 0,
+  },
+});
+
+const [arrowTop] = styled({
+  position: 'absolute',
+  top: 0,
+  '&::before': {
+    left: '-8px',
+    bottom: 0,
+    borderLeft: '8px solid transparent',
+    borderRight: '8px solid transparent',
+    borderBottom: '8px solid $alpha15',
+  },
+  '&::after': {
+    left: '-8px',
+    bottom: '-1px',
+    borderLeft: '8px solid transparent',
+    borderRight: '8px solid transparent',
+    borderBottom: '8px solid $grey100',
+  },
+});
+
+const [arrowBottom] = styled({
+  position: 'absolute',
+  bottom: 0,
+  '&::before': {
+    left: '-8px',
+    top: 0,
+    borderLeft: '8px solid transparent',
+    borderRight: '8px solid transparent',
+    borderTop: '8px solid $alpha15',
+  },
+  '&::after': {
+    left: '-8px',
+    top: '-1px',
+    borderLeft: '8px solid transparent',
+    borderRight: '8px solid transparent',
+    borderTop: '8px solid $grey100',
+  },
+});
+
+const [arrowLeft] = styled({
+  position: 'absolute',
+  left: 0,
+  top: '50%',
+  '&::before': {
+    top: '-8px',
+    right: 0,
+    borderRight: '8px solid $alpha15',
+    borderTop: '8px solid transparent',
+    borderBottom: '8px solid transparent',
+  },
+  '&::after': {
+    top: '-8px',
+    right: '-1px',
+    borderRight: '8px solid $grey100',
+    borderTop: '8px solid transparent',
+    borderBottom: '8px solid transparent',
+  },
+});
+
+const [arrowRight] = styled({
+  position: 'absolute',
+  left: 0,
+  top: '50%',
+  '&::before': {
+    top: '-8px',
+    left: 0,
+    borderLeft: '8px solid $alpha15',
+    borderTop: '8px solid transparent',
+    borderBottom: '8px solid transparent',
+  },
+  '&::after': {
+    top: '-8px',
+    left: '-1px',
+    borderLeft: '8px solid $grey100',
+    borderTop: '8px solid transparent',
+    borderBottom: '8px solid transparent',
+  },
+});
+
+const arrows = {
+  left: arrowLeft,
+  right: arrowRight,
+  top: arrowTop,
+  bottom: arrowBottom,
+};
+
+export default function PopoverContent({
+  children,
+  alignTo,
+}) {
+  const [p, setP] = useState(null);
+  const ref = useRef(null);
+
+  const style = {
+    visibility: p ? 'visible' : 'hidden',
+    position: 'absolute',
+    maxWidth: '500px',
+    top: p ? `${p.position.top}px` : '-99999px',
+    left: p ? `${p.position.left}px` : '-99999px',
+  };
+
+  useEffect(() => {
+    const pp = positionToElement(ref.current, alignTo, 'right', {
+      dock: 'right',
+      offset: 8,
+      minWindowOffset: 10,
+      minEdgeOffset: 5,
+    });
+    setP(pp);
+  }, [alignTo]);
+
+  const arrow = {
+    dock: '',
+    style: {},
+  };
+  if (p) {
+    arrow.dock = oppositeDock(p.dock);
+    if (arrow.dock === 'top' || arrow.dock === 'bottom') {
+      arrow.style.left = `${p.toPosition.left - p.position.left}px`;
+    } else {
+      arrow.style.top = `${p.toPosition.top - p.position.top}px`;
+    }
+  }
+  const arrowElem = (
+    <div
+      className={[arrowC, arrows[arrow.dock]].join(' ')}
+      style={arrow.style}
+    />
+  );
+  return (
+    <div
+      className={classes.join(' ')}
+      ref={ref}
+      role="dialog"
+      style={style}
+    >
+      {children}
+      {arrowElem}
+    </div>
+  );
+}

packages/ui/components/popover/Header.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const PopoverHeader = ({
+  children,
+}) => {
+  const style = { padding: '8px' };
+  return (
+    <div style={style}>
+      {children}
+    </div>
+  );
+};
+
+export default PopoverHeader;

packages/ui/components/popover/Popover.jsx

@@ -0,0 +1,41 @@
+import React, { useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import PopoverContent from './Content';
+
+export default function Popover({
+  onOutside,
+  alignTo,
+  children,
+} = {}) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (typeof onOutside !== 'function') {
+      return undefined;
+    }
+    const outsideEvent = 'ontouchend' in window ? 'touchend' : 'click';
+    const out = (e) => {
+      const element = ref.current;
+      if (element && !element.contains(e.target)) {
+        onOutside(e);
+      }
+    };
+
+    document.addEventListener(outsideEvent, out);
+    return () => {
+      document.removeEventListener(outsideEvent, out);
+    };
+  }, [onOutside]);
+
+  return (
+    createPortal(
+      <div ref={ref}>
+        <PopoverContent alignTo={alignTo}>
+          {children}
+        </PopoverContent>
+      </div>,
+      document.body,
+    )
+  );
+}

packages/ui/components/popover/index.js

@@ -0,0 +1,8 @@
+import Popover from './Popover';
+import Body from './Body';
+import Header from './Header';
+
+Popover.Header = Header;
+Popover.Body = Body;
+
+export default Popover;

packages/ui/package.json

@@ -8,6 +8,8 @@
   "keywords": [],
   "scripts": {},
   "devDependencies": {
-    "react": "^16.8.6"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-leonardo-ui": "^0.15.0"
   }
 }

rollup.config.js

@@ -36,7 +36,6 @@ const GLOBALS = {
 const EXTERNALS = [
   'react',
   'react-dom',
-  'react-leonardo-ui',
 ];
 
 const config = (isEsm) => {
@@ -45,7 +44,7 @@ const config = (isEsm) => {
   const dir = path.dirname(outputFile);
   const umdName = basename.replace(/-([a-z])/g, (m, p1) => p1.toUpperCase()).split('.js').join('');
 
-  const external = [...EXTERNALS, ...(isEsm ? Object.keys(pkg.dependencies || {}) : [])];
+  const external = isEsm ? [...EXTERNALS, ...Object.keys(pkg.dependencies || {})] : [];
   const globals = {};
   external.forEach((e) => {
     if ([GLOBALS[e]]) {
@@ -72,9 +71,18 @@ const config = (isEsm) => {
       nodeResolve({
         extensions: ['.js', '.jsx'],
       }),
-      commonjs(),
+      commonjs({
+        namedExports: {
+          react: ['useState', 'useEffect', 'useRef', 'useContext', 'useCallback', 'createElement', 'PureComponent'],
+          'react-dom': ['createPortal'],
+        },
+      }),
       babel({
         babelrc: false,
+        include: [
+          '/**/packages/nucleus/**',
+          '/**/packages/ui/**',
+        ],
         presets: [
           ['@babel/preset-env', {
             modules: false,