@deephaven/components 0.46.1-beta.2 → 0.46.1-beta.4

package/dist/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["classNames","React","useCallback","useEffect","useRef","useState","ReactDOM","CSSTransition","ThemeExport","Modal","className","children","role","keyboard","isOpen","centered","size","onOpened","onClosed","toggle","dataTestId","element","background","backgroundClicked","setBackgroundClicked","handleKeyDown","event","key","addKeydownEventListener","window","addEventListener","removeEventListener","open","closed","current","document","createElement","setAttribute","body","appendChild","onExited","removeChild","undefined","createPortal","appearActive","appearDone","transitionMs","zIndex","e","target","display"],"sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport ThemeExport from '../ThemeExport';\n\ninterface ModalProps {\n  className?: string;\n  children?: ReactNode;\n  role?: string;\n  keyboard?: boolean;\n  isOpen?: boolean;\n  centered?: boolean;\n  size?: 'sm' | 'lg' | 'xl' | undefined;\n  onOpened?: () => void;\n  onClosed?: () => void;\n  toggle?: () => void;\n  'data-testid'?: string;\n}\n\nfunction Modal({\n  className = 'theme-bg-light',\n  children,\n  role = 'role',\n  keyboard = true,\n  isOpen = false,\n  centered = false,\n  size,\n  onOpened,\n  onClosed,\n  toggle,\n  'data-testid': dataTestId,\n}: ModalProps): React.ReactElement | null {\n  const element = useRef<HTMLElement>();\n  const background = useRef<HTMLDivElement>(null);\n  const [backgroundClicked, setBackgroundClicked] = useState(false);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent): void => {\n      switch (event.key) {\n        case 'Escape':\n          toggle?.();\n          break;\n        default:\n          break;\n      }\n    },\n    [toggle]\n  );\n\n  useEffect(\n    function addKeydownEventListener() {\n      if (isOpen && keyboard) {\n        window.addEventListener('keydown', handleKeyDown);\n        return () => window.removeEventListener('keydown', handleKeyDown);\n      }\n    },\n    [handleKeyDown, isOpen, keyboard]\n  );\n\n  useEffect(\n    function open() {\n      if (isOpen && onOpened) {\n        onOpened();\n      }\n    },\n    [onOpened, isOpen]\n  );\n\n  useEffect(\n    function closed() {\n      if (!isOpen && onClosed) {\n        onClosed();\n      }\n    },\n    [onClosed, isOpen]\n  );\n\n  if (isOpen && !element.current) {\n    element.current = document.createElement('div');\n    element.current.setAttribute(\n      'style',\n      'padding-right: 15px; display: block'\n    );\n    element.current.setAttribute('role', 'presentation');\n    document.body.appendChild(element.current);\n  }\n\n  const onExited = () => {\n    if (element.current) {\n      document.body.removeChild(element.current);\n      element.current = undefined;\n    }\n  };\n\n  return element.current\n    ? ReactDOM.createPortal(\n        <>\n          <CSSTransition\n            appear\n            mountOnEnter\n            unmountOnExit\n            in={isOpen}\n            classNames={{\n              appearActive: 'show',\n              appearDone: 'show',\n            }}\n            timeout={ThemeExport.transitionMs}\n            onExited={onExited}\n          >\n            <div\n              className={classNames('modal-backdrop fade')}\n              style={{ zIndex: 1050 }}\n            />\n          </CSSTransition>\n          <CSSTransition\n            appear\n            mountOnEnter\n            unmountOnExit\n            in={isOpen}\n            classNames={{\n              appearDone: 'show',\n            }}\n            timeout={ThemeExport.transitionMs}\n            onExited={onExited}\n          >\n            <div\n              ref={background}\n              className=\"modal fade\"\n              onMouseDown={e => {\n                if (e.target === background.current) {\n                  setBackgroundClicked(true);\n                } else {\n                  setBackgroundClicked(false);\n                }\n              }}\n              onMouseUp={e => {\n                if (\n                  backgroundClicked &&\n                  e.target === background.current &&\n                  toggle !== undefined\n                ) {\n                  toggle();\n                }\n              }}\n              role=\"dialog\"\n              style={{ display: 'block' }}\n            >\n              <div\n                className={classNames(`modal-dialog ${className}`, {\n                  'modal-lg': size === 'lg',\n                  'modal-sm': size === 'sm',\n                  'modal-xl': size === 'xl',\n                  'modal-dialog-centered': centered,\n                })}\n                style={{ zIndex: 1040 }}\n              >\n                <div\n                  className=\"modal-content\"\n                  role=\"presentation\"\n                  data-testid={dataTestId}\n                >\n                  {children}\n                </div>\n              </div>\n            </div>\n          </CSSTransition>\n        </>,\n        element.current\n      )\n    : null;\n}\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["classNames","React","useCallback","useEffect","useRef","useState","ReactDOM","CSSTransition","ThemeExport","Modal","className","children","role","keyboard","isOpen","centered","size","onOpened","onClosed","toggle","dataTestId","element","background","backgroundClicked","setBackgroundClicked","handleKeyDown","event","key","addKeydownEventListener","window","addEventListener","removeEventListener","open","closed","current","document","createElement","setAttribute","body","appendChild","onExited","removeChild","undefined","createPortal","appearActive","appearDone","transitionMs","zIndex","e","target","display"],"sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport ThemeExport from '../ThemeExport';\n\ninterface ModalProps {\n  className?: string;\n  children?: ReactNode;\n  role?: string;\n  keyboard?: boolean;\n  isOpen?: boolean;\n  centered?: boolean;\n  size?: 'sm' | 'lg' | 'xl' | undefined;\n  onOpened?: () => void;\n  onClosed?: () => void;\n  toggle?: () => void;\n  'data-testid'?: string;\n}\n\nfunction Modal({\n  className = 'theme-bg-light',\n  children,\n  role = 'role',\n  keyboard = true,\n  isOpen = false,\n  centered = false,\n  size,\n  onOpened,\n  onClosed,\n  toggle,\n  'data-testid': dataTestId,\n}: ModalProps): React.ReactElement | null {\n  const element = useRef<HTMLElement>();\n  const background = useRef<HTMLDivElement>(null);\n  const [backgroundClicked, setBackgroundClicked] = useState(false);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent): void => {\n      switch (event.key) {\n        case 'Escape':\n          toggle?.();\n          break;\n        default:\n          break;\n      }\n    },\n    [toggle]\n  );\n\n  useEffect(\n    function addKeydownEventListener() {\n      if (isOpen && keyboard) {\n        window.addEventListener('keydown', handleKeyDown);\n        return () => window.removeEventListener('keydown', handleKeyDown);\n      }\n    },\n    [handleKeyDown, isOpen, keyboard]\n  );\n\n  useEffect(\n    function open() {\n      if (isOpen && onOpened) {\n        onOpened();\n      }\n    },\n    [onOpened, isOpen]\n  );\n\n  useEffect(\n    function closed() {\n      if (!isOpen && onClosed) {\n        onClosed();\n      }\n    },\n    [onClosed, isOpen]\n  );\n\n  if (isOpen && !element.current) {\n    element.current = document.createElement('div');\n    element.current.setAttribute(\n      'style',\n      'padding-right: 15px; display: block'\n    );\n    element.current.setAttribute('role', 'presentation');\n    document.body.appendChild(element.current);\n  }\n\n  const onExited = () => {\n    if (element.current) {\n      document.body.removeChild(element.current);\n      element.current = undefined;\n    }\n  };\n\n  return element.current\n    ? ReactDOM.createPortal(\n        <>\n          <CSSTransition\n            appear\n            mountOnEnter\n            unmountOnExit\n            in={isOpen}\n            classNames={{\n              appearActive: 'show',\n              appearDone: 'show',\n            }}\n            timeout={ThemeExport.transitionMs}\n            onExited={onExited}\n          >\n            <div\n              className={classNames('modal-backdrop fade')}\n              style={{ zIndex: 1050 }}\n            />\n          </CSSTransition>\n          <CSSTransition\n            appear\n            mountOnEnter\n            unmountOnExit\n            in={isOpen}\n            classNames={{\n              appearDone: 'show',\n            }}\n            timeout={ThemeExport.transitionMs}\n            onExited={onExited}\n          >\n            <div\n              ref={background}\n              className=\"modal fade\"\n              onMouseDown={e => {\n                if (e.target === background.current) {\n                  setBackgroundClicked(true);\n                } else {\n                  setBackgroundClicked(false);\n                }\n              }}\n              onMouseUp={e => {\n                if (\n                  backgroundClicked &&\n                  e.target === background.current &&\n                  toggle !== undefined\n                ) {\n                  toggle();\n                }\n              }}\n              role=\"dialog\"\n              style={{ display: 'block' }}\n            >\n              <div\n                className={classNames(`modal-dialog ${className}`, {\n                  'modal-lg': size === 'lg',\n                  'modal-sm': size === 'sm',\n                  'modal-xl': size === 'xl',\n                  'modal-dialog-centered': centered,\n                })}\n                style={{ zIndex: 1040 }}\n              >\n                <div\n                  className=\"modal-content\"\n                  role=\"presentation\"\n                  data-testid={dataTestId}\n                >\n                  {children}\n                </div>\n              </div>\n            </div>\n          </CSSTransition>\n        </>,\n        element.current\n      )\n    : null;\n}\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/modal/ModalBody.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 function ModalBody(_ref) {
   var {
     className = 'modal-body',
@@ -6,11 +7,12 @@ function ModalBody(_ref) {
     children,
     'data-testid': dataTestId
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: className,
     "data-testid": dataTestId,
-    style: style
-  }, children);
+    style: style,
+    children: children
+  });
 }
 export default ModalBody;
 //# sourceMappingURL=ModalBody.js.map

package/dist/modal/ModalBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBody.js","names":["React","ModalBody","className","style","children","dataTestId"],"sources":["../../src/modal/ModalBody.tsx"],"sourcesContent":["import React, { CSSProperties, ReactElement, ReactNode } from 'react';\n\ninterface ModalBodyProps {\n  className?: string;\n  style?: CSSProperties;\n  children?: ReactNode;\n  'data-testid'?: string;\n}\n\nfunction ModalBody({\n  className = 'modal-body',\n  style,\n  children,\n  'data-testid': dataTestId,\n}: ModalBodyProps): ReactElement {\n  return (\n    <div className={className} data-testid={dataTestId} style={style}>\n      {children}\n    </div>\n  );\n}\n\nexport default ModalBody;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAkD,OAAO;AASrE,SAASC,SAAS,OAKe;EAAA,IALd;IACjBC,SAAS,GAAG,YAAY;IACxBC,KAAK;IACLC,QAAQ;IACR,aAAa,EAAEC;EACD,CAAC;EACf,oBACE;IAAK,SAAS,EAAEH,SAAU;IAAC,eAAaG,UAAW;IAAC,KAAK,EAAEF;EAAM,GAC9DC,QAAQ,CACL;AAEV;AAEA,eAAeH,SAAS"}
+{"version":3,"file":"ModalBody.js","names":["React","ModalBody","className","style","children","dataTestId"],"sources":["../../src/modal/ModalBody.tsx"],"sourcesContent":["import React, { CSSProperties, ReactElement, ReactNode } from 'react';\n\ninterface ModalBodyProps {\n  className?: string;\n  style?: CSSProperties;\n  children?: ReactNode;\n  'data-testid'?: string;\n}\n\nfunction ModalBody({\n  className = 'modal-body',\n  style,\n  children,\n  'data-testid': dataTestId,\n}: ModalBodyProps): ReactElement {\n  return (\n    <div className={className} data-testid={dataTestId} style={style}>\n      {children}\n    </div>\n  );\n}\n\nexport default ModalBody;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAkD,OAAO;AAAC;AAStE,SAASC,SAAS,OAKe;EAAA,IALd;IACjBC,SAAS,GAAG,YAAY;IACxBC,KAAK;IACLC,QAAQ;IACR,aAAa,EAAEC;EACD,CAAC;EACf,oBACE;IAAK,SAAS,EAAEH,SAAU;IAAC,eAAaG,UAAW;IAAC,KAAK,EAAEF,KAAM;IAAA,UAC9DC;EAAQ,EACL;AAEV;AAEA,eAAeH,SAAS"}

package/dist/modal/ModalFooter.js

@@ -1,14 +1,16 @@
 import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 function ModalFooter(_ref) {
   var {
     className = 'modal-footer',
     children,
     'data-testid': dataTestId
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: className,
-    "data-testid": dataTestId
-  }, children);
+    "data-testid": dataTestId,
+    children: children
+  });
 }
 export default ModalFooter;
 //# sourceMappingURL=ModalFooter.js.map

package/dist/modal/ModalFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooter.js","names":["React","ModalFooter","className","children","dataTestId"],"sources":["../../src/modal/ModalFooter.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\n\ninterface ModalFooterProps {\n  className?: string;\n  children?: ReactNode;\n  'data-testid'?: string;\n}\n\nfunction ModalFooter({\n  className = 'modal-footer',\n  children,\n  'data-testid': dataTestId,\n}: ModalFooterProps): ReactElement {\n  return (\n    <div className={className} data-testid={dataTestId}>\n      {children}\n    </div>\n  );\n}\n\nexport default ModalFooter;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAmC,OAAO;AAQtD,SAASC,WAAW,OAIe;EAAA,IAJd;IACnBC,SAAS,GAAG,cAAc;IAC1BC,QAAQ;IACR,aAAa,EAAEC;EACC,CAAC;EACjB,oBACE;IAAK,SAAS,EAAEF,SAAU;IAAC,eAAaE;EAAW,GAChDD,QAAQ,CACL;AAEV;AAEA,eAAeF,WAAW"}
+{"version":3,"file":"ModalFooter.js","names":["React","ModalFooter","className","children","dataTestId"],"sources":["../../src/modal/ModalFooter.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\n\ninterface ModalFooterProps {\n  className?: string;\n  children?: ReactNode;\n  'data-testid'?: string;\n}\n\nfunction ModalFooter({\n  className = 'modal-footer',\n  children,\n  'data-testid': dataTestId,\n}: ModalFooterProps): ReactElement {\n  return (\n    <div className={className} data-testid={dataTestId}>\n      {children}\n    </div>\n  );\n}\n\nexport default ModalFooter;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAmC,OAAO;AAAC;AAQvD,SAASC,WAAW,OAIe;EAAA,IAJd;IACnBC,SAAS,GAAG,cAAc;IAC1BC,QAAQ;IACR,aAAa,EAAEC;EACC,CAAC;EACjB,oBACE;IAAK,SAAS,EAAEF,SAAU;IAAC,eAAaE,UAAW;IAAA,UAChDD;EAAQ,EACL;AAEV;AAEA,eAAeF,WAAW"}

package/dist/modal/ModalHeader.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function ModalHeader(_ref) {
   var {
     className,
@@ -8,20 +10,24 @@ function ModalHeader(_ref) {
     toggle,
     'data-testid': dataTestId
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "modal-header ".concat(className),
-    style: style
-  }, /*#__PURE__*/React.createElement("h5", {
-    className: "modal-title"
-  }, children), closeButton && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "close",
-    "data-dismiss": "modal",
-    "aria-label": "Close",
-    onClick: toggle
-  }, /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true"
-  }, "\xD7")));
+    style: style,
+    children: [/*#__PURE__*/_jsx("h5", {
+      className: "modal-title",
+      children: children
+    }), closeButton && /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "close",
+      "data-dismiss": "modal",
+      "aria-label": "Close",
+      onClick: toggle,
+      children: /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: "\xD7"
+      })
+    })]
+  });
 }
 export default ModalHeader;
 //# sourceMappingURL=ModalHeader.js.map

package/dist/modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","names":["React","ModalHeader","className","children","closeButton","style","toggle","dataTestId"],"sources":["../../src/modal/ModalHeader.tsx"],"sourcesContent":["import React, { CSSProperties, ReactElement, ReactNode } from 'react';\n\ninterface ModalHeaderProps {\n  className?: string;\n  children?: ReactNode;\n  closeButton?: boolean;\n  style?: CSSProperties;\n  toggle?: () => void;\n  'data-testid'?: string;\n}\n\nfunction ModalHeader({\n  className,\n  children,\n  closeButton = true,\n  style,\n  toggle,\n  'data-testid': dataTestId,\n}: ModalHeaderProps): ReactElement {\n  return (\n    <div className={`modal-header ${className}`} style={style}>\n      <h5 className=\"modal-title\">{children}</h5>\n      {closeButton && (\n        <button\n          type=\"button\"\n          className=\"close\"\n          data-dismiss=\"modal\"\n          aria-label=\"Close\"\n          onClick={toggle}\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport default ModalHeader;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAkD,OAAO;AAWrE,SAASC,WAAW,OAOe;EAAA,IAPd;IACnBC,SAAS;IACTC,QAAQ;IACRC,WAAW,GAAG,IAAI;IAClBC,KAAK;IACLC,MAAM;IACN,aAAa,EAAEC;EACC,CAAC;EACjB,oBACE;IAAK,SAAS,yBAAkBL,SAAS,CAAG;IAAC,KAAK,EAAEG;EAAM,gBACxD;IAAI,SAAS,EAAC;EAAa,GAAEF,QAAQ,CAAM,EAC1CC,WAAW,iBACV;IACE,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,OAAO;IACjB,gBAAa,OAAO;IACpB,cAAW,OAAO;IAClB,OAAO,EAAEE;EAAO,gBAEhB;IAAM,eAAY;EAAM,GAAC,MAAO,CAAO,CAE1C,CACG;AAEV;AAEA,eAAeL,WAAW"}
+{"version":3,"file":"ModalHeader.js","names":["React","ModalHeader","className","children","closeButton","style","toggle","dataTestId"],"sources":["../../src/modal/ModalHeader.tsx"],"sourcesContent":["import React, { CSSProperties, ReactElement, ReactNode } from 'react';\n\ninterface ModalHeaderProps {\n  className?: string;\n  children?: ReactNode;\n  closeButton?: boolean;\n  style?: CSSProperties;\n  toggle?: () => void;\n  'data-testid'?: string;\n}\n\nfunction ModalHeader({\n  className,\n  children,\n  closeButton = true,\n  style,\n  toggle,\n  'data-testid': dataTestId,\n}: ModalHeaderProps): ReactElement {\n  return (\n    <div className={`modal-header ${className}`} style={style}>\n      <h5 className=\"modal-title\">{children}</h5>\n      {closeButton && (\n        <button\n          type=\"button\"\n          className=\"close\"\n          data-dismiss=\"modal\"\n          aria-label=\"Close\"\n          onClick={toggle}\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport default ModalHeader;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAkD,OAAO;AAAC;AAAA;AAWtE,SAASC,WAAW,OAOe;EAAA,IAPd;IACnBC,SAAS;IACTC,QAAQ;IACRC,WAAW,GAAG,IAAI;IAClBC,KAAK;IACLC,MAAM;IACN,aAAa,EAAEC;EACC,CAAC;EACjB,oBACE;IAAK,SAAS,yBAAkBL,SAAS,CAAG;IAAC,KAAK,EAAEG,KAAM;IAAA,wBACxD;MAAI,SAAS,EAAC,aAAa;MAAA,UAAEF;IAAQ,EAAM,EAC1CC,WAAW,iBACV;MACE,IAAI,EAAC,QAAQ;MACb,SAAS,EAAC,OAAO;MACjB,gBAAa,OAAO;MACpB,cAAW,OAAO;MAClB,OAAO,EAAEE,MAAO;MAAA,uBAEhB;QAAM,eAAY,MAAM;QAAA,UAAC;MAAO;IAAO,EAE1C;EAAA,EACG;AAEV;AAEA,eAAeL,WAAW"}

package/dist/navigation/Menu.js

@@ -1,25 +1,28 @@
 import React from 'react';
 import MenuItem from "./MenuItem.js";
 import "./Menu.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function Menu(_ref) {
   var {
     items,
     onSelect: _onSelect = () => undefined,
     'data-testid': dataTestId
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "navigation-menu-view",
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "navigation-menu-list"
-  }, items.map((item, itemIndex) => /*#__PURE__*/React.createElement("li", {
-    key: item.title
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    item: item,
-    onSelect: () => {
-      _onSelect(itemIndex);
-    }
-  })))));
+    "data-testid": dataTestId,
+    children: /*#__PURE__*/_jsx("ul", {
+      className: "navigation-menu-list",
+      children: items.map((item, itemIndex) => /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(MenuItem, {
+          item: item,
+          onSelect: () => {
+            _onSelect(itemIndex);
+          }
+        })
+      }, item.title))
+    })
+  });
 }
 export default Menu;
 //# sourceMappingURL=Menu.js.map

package/dist/navigation/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["React","MenuItem","Menu","items","onSelect","undefined","dataTestId","map","item","itemIndex","title"],"sources":["../../src/navigation/Menu.tsx"],"sourcesContent":["import React from 'react';\nimport MenuItem, { MenuItemDef } from './MenuItem';\nimport './Menu.scss';\n\nexport type MenuSelectCallback = (itemIndex: number) => void;\n\nexport type MenuProps = {\n  items: readonly MenuItemDef[];\n  onSelect?: MenuSelectCallback;\n  'data-testid'?: string;\n};\n\nexport function Menu({\n  items,\n  onSelect = () => undefined,\n  'data-testid': dataTestId,\n}: MenuProps): JSX.Element {\n  return (\n    <div className=\"navigation-menu-view\" data-testid={dataTestId}>\n      <ul className=\"navigation-menu-list\">\n        {items.map((item, itemIndex) => (\n          <li key={item.title}>\n            <MenuItem\n              item={item}\n              onSelect={() => {\n                onSelect(itemIndex);\n              }}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nexport default Menu;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAAC,OACnBC,QAAQ;AAAA;AAWf,OAAO,SAASC,IAAI,OAIO;EAAA,IAJN;IACnBC,KAAK;IACLC,QAAQ,EAARA,SAAQ,GAAG,MAAMC,SAAS;IAC1B,aAAa,EAAEC;EACN,CAAC;EACV,oBACE;IAAK,SAAS,EAAC,sBAAsB;IAAC,eAAaA;EAAW,gBAC5D;IAAI,SAAS,EAAC;EAAsB,GACjCH,KAAK,CAACI,GAAG,CAAC,CAACC,IAAI,EAAEC,SAAS,kBACzB;IAAI,GAAG,EAAED,IAAI,CAACE;EAAM,gBAClB,oBAAC,QAAQ;IACP,IAAI,EAAEF,IAAK;IACX,QAAQ,EAAE,MAAM;MACdJ,SAAQ,CAACK,SAAS,CAAC;IACrB;EAAE,EACF,CAEL,CAAC,CACC,CACD;AAEV;AAEA,eAAeP,IAAI"}
+{"version":3,"file":"Menu.js","names":["React","MenuItem","Menu","items","onSelect","undefined","dataTestId","map","item","itemIndex","title"],"sources":["../../src/navigation/Menu.tsx"],"sourcesContent":["import React from 'react';\nimport MenuItem, { MenuItemDef } from './MenuItem';\nimport './Menu.scss';\n\nexport type MenuSelectCallback = (itemIndex: number) => void;\n\nexport type MenuProps = {\n  items: readonly MenuItemDef[];\n  onSelect?: MenuSelectCallback;\n  'data-testid'?: string;\n};\n\nexport function Menu({\n  items,\n  onSelect = () => undefined,\n  'data-testid': dataTestId,\n}: MenuProps): JSX.Element {\n  return (\n    <div className=\"navigation-menu-view\" data-testid={dataTestId}>\n      <ul className=\"navigation-menu-list\">\n        {items.map((item, itemIndex) => (\n          <li key={item.title}>\n            <MenuItem\n              item={item}\n              onSelect={() => {\n                onSelect(itemIndex);\n              }}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nexport default Menu;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAAC,OACnBC,QAAQ;AAAA;AAAA;AAWf,OAAO,SAASC,IAAI,OAIO;EAAA,IAJN;IACnBC,KAAK;IACLC,QAAQ,EAARA,SAAQ,GAAG,MAAMC,SAAS;IAC1B,aAAa,EAAEC;EACN,CAAC;EACV,oBACE;IAAK,SAAS,EAAC,sBAAsB;IAAC,eAAaA,UAAW;IAAA,uBAC5D;MAAI,SAAS,EAAC,sBAAsB;MAAA,UACjCH,KAAK,CAACI,GAAG,CAAC,CAACC,IAAI,EAAEC,SAAS,kBACzB;QAAA,uBACE,KAAC,QAAQ;UACP,IAAI,EAAED,IAAK;UACX,QAAQ,EAAE,MAAM;YACdJ,SAAQ,CAACK,SAAS,CAAC;UACrB;QAAE;MACF,GANKD,IAAI,CAACE,KAAK,CAQpB;IAAC;EACC,EACD;AAEV;AAEA,eAAeR,IAAI"}

package/dist/navigation/MenuItem.js

@@ -3,6 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { vsChevronRight } from '@deephaven/icons';
 import "./MenuItem.css";
 import UISwitch from "../UISwitch.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function isSwitchMenuItemType(item) {
   return item.isOn !== undefined;
 }
@@ -29,7 +31,7 @@ export function MenuItem(_ref) {
     }
     return onSelect;
   }, [item, onSelect]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "btn btn-navigation-menu-item",
     "data-testid": "menu-item-".concat(title),
     onClick: handleSelect,
@@ -39,27 +41,32 @@ export function MenuItem(_ref) {
       }
     },
     tabIndex: 0,
-    role: "menuitem"
-  }, icon !== undefined && /*#__PURE__*/React.createElement("div", {
-    className: "icon"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: icon
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "title"
-  }, title), subtitle !== undefined && /*#__PURE__*/React.createElement("div", {
-    className: "shortcut"
-  }, subtitle), /*#__PURE__*/React.createElement("div", {
-    className: "accessory",
-    "data-testid": dataTestId
-  }, isSwitchMenuItemType(item) ? /*#__PURE__*/React.createElement(UISwitch, {
-    on: item.isOn,
-    onClick: event => {
-      event.stopPropagation();
-      handleSelect();
-    }
-  }) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: vsChevronRight
-  })));
+    role: "menuitem",
+    children: [icon !== undefined && /*#__PURE__*/_jsx("div", {
+      className: "icon",
+      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: icon
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "title",
+      children: title
+    }), subtitle !== undefined && /*#__PURE__*/_jsx("div", {
+      className: "shortcut",
+      children: subtitle
+    }), /*#__PURE__*/_jsx("div", {
+      className: "accessory",
+      "data-testid": dataTestId,
+      children: isSwitchMenuItemType(item) ? /*#__PURE__*/_jsx(UISwitch, {
+        on: item.isOn,
+        onClick: event => {
+          event.stopPropagation();
+          handleSelect();
+        }
+      }) : /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: vsChevronRight
+      })
+    })]
+  });
 }
 export default MenuItem;
 //# sourceMappingURL=MenuItem.js.map

package/dist/navigation/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","names":["React","useMemo","FontAwesomeIcon","vsChevronRight","UISwitch","isSwitchMenuItemType","item","isOn","undefined","MenuItem","onSelect","dataTestId","icon","subtitle","title","handleSelect","onChange","event","key","stopPropagation"],"sources":["../../src/navigation/MenuItem.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsChevronRight } from '@deephaven/icons';\nimport './MenuItem.scss';\n\nimport UISwitch from '../UISwitch';\n\nexport type MenuItemDef = {\n  title: string;\n  subtitle?: string;\n  icon?: IconProp;\n};\n\nexport type SwitchMenuItemDef = MenuItemDef & {\n  isOn: boolean;\n  onChange: (isOn: boolean) => void;\n};\n\nfunction isSwitchMenuItemType(item: MenuItemDef): item is SwitchMenuItemDef {\n  return (item as SwitchMenuItemDef).isOn !== undefined;\n}\n\nexport type MenuItemProps = {\n  item: MenuItemDef;\n  onSelect?: () => void;\n  'data-testid'?: string;\n};\n\n/**\n * @param props.item The menu item to set. Set a SwitchMenuItemDef to show a switch.\n * @param props.onSelect Called when the menu item is selected\n */\nexport function MenuItem({\n  item,\n  onSelect = () => undefined,\n  'data-testid': dataTestId,\n}: MenuItemProps): JSX.Element {\n  const { icon, subtitle, title } = item;\n  const handleSelect = useMemo(() => {\n    if (isSwitchMenuItemType(item)) {\n      return () => {\n        item.onChange(!item.isOn);\n      };\n    }\n    return onSelect;\n  }, [item, onSelect]);\n  return (\n    <div\n      className=\"btn btn-navigation-menu-item\"\n      data-testid={`menu-item-${title}`}\n      onClick={handleSelect}\n      onKeyDown={event => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          handleSelect();\n        }\n      }}\n      tabIndex={0}\n      role=\"menuitem\"\n    >\n      {icon !== undefined && (\n        <div className=\"icon\">\n          <FontAwesomeIcon icon={icon} />\n        </div>\n      )}\n      <div className=\"title\">{title}</div>\n      {subtitle !== undefined && <div className=\"shortcut\">{subtitle}</div>}\n      <div className=\"accessory\" data-testid={dataTestId}>\n        {isSwitchMenuItemType(item) ? (\n          <UISwitch\n            on={item.isOn}\n            onClick={event => {\n              event.stopPropagation();\n              handleSelect();\n            }}\n          />\n        ) : (\n          <FontAwesomeIcon icon={vsChevronRight} />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default MenuItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,kBAAkB;AAAC;AAAA,OAG3CC,QAAQ;AAaf,SAASC,oBAAoB,CAACC,IAAiB,EAA6B;EAC1E,OAAQA,IAAI,CAAuBC,IAAI,KAAKC,SAAS;AACvD;AAQA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQ,OAIO;EAAA,IAJN;IACvBH,IAAI;IACJI,QAAQ,GAAG,MAAMF,SAAS;IAC1B,aAAa,EAAEG;EACF,CAAC;EACd,IAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGR,IAAI;EACtC,IAAMS,YAAY,GAAGd,OAAO,CAAC,MAAM;IACjC,IAAII,oBAAoB,CAACC,IAAI,CAAC,EAAE;MAC9B,OAAO,MAAM;QACXA,IAAI,CAACU,QAAQ,CAAC,CAACV,IAAI,CAACC,IAAI,CAAC;MAC3B,CAAC;IACH;IACA,OAAOG,QAAQ;EACjB,CAAC,EAAE,CAACJ,IAAI,EAAEI,QAAQ,CAAC,CAAC;EACpB,oBACE;IACE,SAAS,EAAC,8BAA8B;IACxC,mCAA0BI,KAAK,CAAG;IAClC,OAAO,EAAEC,YAAa;IACtB,SAAS,EAAEE,KAAK,IAAI;MAClB,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9CH,YAAY,EAAE;MAChB;IACF,CAAE;IACF,QAAQ,EAAE,CAAE;IACZ,IAAI,EAAC;EAAU,GAEdH,IAAI,KAAKJ,SAAS,iBACjB;IAAK,SAAS,EAAC;EAAM,gBACnB,oBAAC,eAAe;IAAC,IAAI,EAAEI;EAAK,EAAG,CAElC,eACD;IAAK,SAAS,EAAC;EAAO,GAAEE,KAAK,CAAO,EACnCD,QAAQ,KAAKL,SAAS,iBAAI;IAAK,SAAS,EAAC;EAAU,GAAEK,QAAQ,CAAO,eACrE;IAAK,SAAS,EAAC,WAAW;IAAC,eAAaF;EAAW,GAChDN,oBAAoB,CAACC,IAAI,CAAC,gBACzB,oBAAC,QAAQ;IACP,EAAE,EAAEA,IAAI,CAACC,IAAK;IACd,OAAO,EAAEU,KAAK,IAAI;MAChBA,KAAK,CAACE,eAAe,EAAE;MACvBJ,YAAY,EAAE;IAChB;EAAE,EACF,gBAEF,oBAAC,eAAe;IAAC,IAAI,EAAEZ;EAAe,EACvC,CACG,CACF;AAEV;AAEA,eAAeM,QAAQ"}
+{"version":3,"file":"MenuItem.js","names":["React","useMemo","FontAwesomeIcon","vsChevronRight","UISwitch","isSwitchMenuItemType","item","isOn","undefined","MenuItem","onSelect","dataTestId","icon","subtitle","title","handleSelect","onChange","event","key","stopPropagation"],"sources":["../../src/navigation/MenuItem.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsChevronRight } from '@deephaven/icons';\nimport './MenuItem.scss';\n\nimport UISwitch from '../UISwitch';\n\nexport type MenuItemDef = {\n  title: string;\n  subtitle?: string;\n  icon?: IconProp;\n};\n\nexport type SwitchMenuItemDef = MenuItemDef & {\n  isOn: boolean;\n  onChange: (isOn: boolean) => void;\n};\n\nfunction isSwitchMenuItemType(item: MenuItemDef): item is SwitchMenuItemDef {\n  return (item as SwitchMenuItemDef).isOn !== undefined;\n}\n\nexport type MenuItemProps = {\n  item: MenuItemDef;\n  onSelect?: () => void;\n  'data-testid'?: string;\n};\n\n/**\n * @param props.item The menu item to set. Set a SwitchMenuItemDef to show a switch.\n * @param props.onSelect Called when the menu item is selected\n */\nexport function MenuItem({\n  item,\n  onSelect = () => undefined,\n  'data-testid': dataTestId,\n}: MenuItemProps): JSX.Element {\n  const { icon, subtitle, title } = item;\n  const handleSelect = useMemo(() => {\n    if (isSwitchMenuItemType(item)) {\n      return () => {\n        item.onChange(!item.isOn);\n      };\n    }\n    return onSelect;\n  }, [item, onSelect]);\n  return (\n    <div\n      className=\"btn btn-navigation-menu-item\"\n      data-testid={`menu-item-${title}`}\n      onClick={handleSelect}\n      onKeyDown={event => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          handleSelect();\n        }\n      }}\n      tabIndex={0}\n      role=\"menuitem\"\n    >\n      {icon !== undefined && (\n        <div className=\"icon\">\n          <FontAwesomeIcon icon={icon} />\n        </div>\n      )}\n      <div className=\"title\">{title}</div>\n      {subtitle !== undefined && <div className=\"shortcut\">{subtitle}</div>}\n      <div className=\"accessory\" data-testid={dataTestId}>\n        {isSwitchMenuItemType(item) ? (\n          <UISwitch\n            on={item.isOn}\n            onClick={event => {\n              event.stopPropagation();\n              handleSelect();\n            }}\n          />\n        ) : (\n          <FontAwesomeIcon icon={vsChevronRight} />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default MenuItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,kBAAkB;AAAC;AAAA,OAG3CC,QAAQ;AAAA;AAAA;AAaf,SAASC,oBAAoB,CAACC,IAAiB,EAA6B;EAC1E,OAAQA,IAAI,CAAuBC,IAAI,KAAKC,SAAS;AACvD;AAQA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQ,OAIO;EAAA,IAJN;IACvBH,IAAI;IACJI,QAAQ,GAAG,MAAMF,SAAS;IAC1B,aAAa,EAAEG;EACF,CAAC;EACd,IAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGR,IAAI;EACtC,IAAMS,YAAY,GAAGd,OAAO,CAAC,MAAM;IACjC,IAAII,oBAAoB,CAACC,IAAI,CAAC,EAAE;MAC9B,OAAO,MAAM;QACXA,IAAI,CAACU,QAAQ,CAAC,CAACV,IAAI,CAACC,IAAI,CAAC;MAC3B,CAAC;IACH;IACA,OAAOG,QAAQ;EACjB,CAAC,EAAE,CAACJ,IAAI,EAAEI,QAAQ,CAAC,CAAC;EACpB,oBACE;IACE,SAAS,EAAC,8BAA8B;IACxC,mCAA0BI,KAAK,CAAG;IAClC,OAAO,EAAEC,YAAa;IACtB,SAAS,EAAEE,KAAK,IAAI;MAClB,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9CH,YAAY,EAAE;MAChB;IACF,CAAE;IACF,QAAQ,EAAE,CAAE;IACZ,IAAI,EAAC,UAAU;IAAA,WAEdH,IAAI,KAAKJ,SAAS,iBACjB;MAAK,SAAS,EAAC,MAAM;MAAA,uBACnB,KAAC,eAAe;QAAC,IAAI,EAAEI;MAAK;IAAG,EAElC,eACD;MAAK,SAAS,EAAC,OAAO;MAAA,UAAEE;IAAK,EAAO,EACnCD,QAAQ,KAAKL,SAAS,iBAAI;MAAK,SAAS,EAAC,UAAU;MAAA,UAAEK;IAAQ,EAAO,eACrE;MAAK,SAAS,EAAC,WAAW;MAAC,eAAaF,UAAW;MAAA,UAChDN,oBAAoB,CAACC,IAAI,CAAC,gBACzB,KAAC,QAAQ;QACP,EAAE,EAAEA,IAAI,CAACC,IAAK;QACd,OAAO,EAAEU,KAAK,IAAI;UAChBA,KAAK,CAACE,eAAe,EAAE;UACvBJ,YAAY,EAAE;QAChB;MAAE,EACF,gBAEF,KAAC,eAAe;QAAC,IAAI,EAAEZ;MAAe;IACvC,EACG;EAAA,EACF;AAEV;AAEA,eAAeM,QAAQ"}

package/dist/navigation/Page.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { vsClose, vsChevronLeft } from '@deephaven/icons';
 import "./Page.css";
 import Button from "../Button.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A page view with a back button in the bottom left, a title at the top, and a close button in the top right.
  * Back and close buttons will only appear if `onBack` and/or `onClose` callbacks are set.
@@ -14,33 +16,40 @@ export function Page(_ref) {
     title,
     'data-testid': dataTestId
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "navigation-page",
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "navigation-title-bar"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "navigation-left-buttons"
-  }, onBack !== undefined && /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    className: "btn-back",
-    "data-testid": "btn-page-back",
-    onClick: onBack,
-    icon: vsChevronLeft
-  }, "Back")), /*#__PURE__*/React.createElement("div", {
-    className: "navigation-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: "navigation-right-buttons"
-  }, onClose !== undefined && /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    className: "btn-close px-2 m-1",
-    "data-testid": "btn-page-close",
-    onClick: onClose,
-    icon: vsClose,
-    tooltip: "Close"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "navigation-content"
-  }, children));
+    "data-testid": dataTestId,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "navigation-title-bar",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "navigation-left-buttons",
+        children: onBack !== undefined && /*#__PURE__*/_jsx(Button, {
+          kind: "ghost",
+          className: "btn-back",
+          "data-testid": "btn-page-back",
+          onClick: onBack,
+          icon: vsChevronLeft,
+          children: "Back"
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "navigation-title",
+        children: title
+      }), /*#__PURE__*/_jsx("div", {
+        className: "navigation-right-buttons",
+        children: onClose !== undefined && /*#__PURE__*/_jsx(Button, {
+          kind: "ghost",
+          className: "btn-close px-2 m-1",
+          "data-testid": "btn-page-close",
+          onClick: onClose,
+          icon: vsClose,
+          tooltip: "Close"
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "navigation-content",
+      children: children
+    })]
+  });
 }
 export default Page;
 //# sourceMappingURL=Page.js.map

package/dist/navigation/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","names":["React","vsClose","vsChevronLeft","Button","Page","children","onBack","onClose","title","dataTestId","undefined"],"sources":["../../src/navigation/Page.tsx"],"sourcesContent":["import React from 'react';\nimport { vsClose, vsChevronLeft } from '@deephaven/icons';\nimport './Page.scss';\nimport Button from '../Button';\n\nexport type PageProps = {\n  children: React.ReactNode;\n  onBack?: () => void;\n  onClose?: () => void;\n  title: string;\n  'data-testid'?: string;\n};\n\n/**\n * A page view with a back button in the bottom left, a title at the top, and a close button in the top right.\n * Back and close buttons will only appear if `onBack` and/or `onClose` callbacks are set.\n */\nexport function Page({\n  children,\n  onBack,\n  onClose,\n  title,\n  'data-testid': dataTestId,\n}: PageProps): JSX.Element {\n  return (\n    <div className=\"navigation-page\" data-testid={dataTestId}>\n      <div className=\"navigation-title-bar\">\n        <div className=\"navigation-left-buttons\">\n          {onBack !== undefined && (\n            <Button\n              kind=\"ghost\"\n              className=\"btn-back\"\n              data-testid=\"btn-page-back\"\n              onClick={onBack}\n              icon={vsChevronLeft}\n            >\n              Back\n            </Button>\n          )}\n        </div>\n        <div className=\"navigation-title\">{title}</div>\n        <div className=\"navigation-right-buttons\">\n          {onClose !== undefined && (\n            <Button\n              kind=\"ghost\"\n              className=\"btn-close px-2 m-1\"\n              data-testid=\"btn-page-close\"\n              onClick={onClose}\n              icon={vsClose}\n              tooltip=\"Close\"\n            />\n          )}\n        </div>\n      </div>\n      <div className=\"navigation-content\">{children}</div>\n    </div>\n  );\n}\n\nexport default Page;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,EAAEC,aAAa,QAAQ,kBAAkB;AAAC;AAAA,OAEnDC,MAAM;AAUb;AACA;AACA;AACA;AACA,OAAO,SAASC,IAAI,OAMO;EAAA,IANN;IACnBC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,KAAK;IACL,aAAa,EAAEC;EACN,CAAC;EACV,oBACE;IAAK,SAAS,EAAC,iBAAiB;IAAC,eAAaA;EAAW,gBACvD;IAAK,SAAS,EAAC;EAAsB,gBACnC;IAAK,SAAS,EAAC;EAAyB,GACrCH,MAAM,KAAKI,SAAS,iBACnB,oBAAC,MAAM;IACL,IAAI,EAAC,OAAO;IACZ,SAAS,EAAC,UAAU;IACpB,eAAY,eAAe;IAC3B,OAAO,EAAEJ,MAAO;IAChB,IAAI,EAAEJ;EAAc,GACrB,MAED,CACD,CACG,eACN;IAAK,SAAS,EAAC;EAAkB,GAAEM,KAAK,CAAO,eAC/C;IAAK,SAAS,EAAC;EAA0B,GACtCD,OAAO,KAAKG,SAAS,iBACpB,oBAAC,MAAM;IACL,IAAI,EAAC,OAAO;IACZ,SAAS,EAAC,oBAAoB;IAC9B,eAAY,gBAAgB;IAC5B,OAAO,EAAEH,OAAQ;IACjB,IAAI,EAAEN,OAAQ;IACd,OAAO,EAAC;EAAO,EAElB,CACG,CACF,eACN;IAAK,SAAS,EAAC;EAAoB,GAAEI,QAAQ,CAAO,CAChD;AAEV;AAEA,eAAeD,IAAI"}
+{"version":3,"file":"Page.js","names":["React","vsClose","vsChevronLeft","Button","Page","children","onBack","onClose","title","dataTestId","undefined"],"sources":["../../src/navigation/Page.tsx"],"sourcesContent":["import React from 'react';\nimport { vsClose, vsChevronLeft } from '@deephaven/icons';\nimport './Page.scss';\nimport Button from '../Button';\n\nexport type PageProps = {\n  children: React.ReactNode;\n  onBack?: () => void;\n  onClose?: () => void;\n  title: string;\n  'data-testid'?: string;\n};\n\n/**\n * A page view with a back button in the bottom left, a title at the top, and a close button in the top right.\n * Back and close buttons will only appear if `onBack` and/or `onClose` callbacks are set.\n */\nexport function Page({\n  children,\n  onBack,\n  onClose,\n  title,\n  'data-testid': dataTestId,\n}: PageProps): JSX.Element {\n  return (\n    <div className=\"navigation-page\" data-testid={dataTestId}>\n      <div className=\"navigation-title-bar\">\n        <div className=\"navigation-left-buttons\">\n          {onBack !== undefined && (\n            <Button\n              kind=\"ghost\"\n              className=\"btn-back\"\n              data-testid=\"btn-page-back\"\n              onClick={onBack}\n              icon={vsChevronLeft}\n            >\n              Back\n            </Button>\n          )}\n        </div>\n        <div className=\"navigation-title\">{title}</div>\n        <div className=\"navigation-right-buttons\">\n          {onClose !== undefined && (\n            <Button\n              kind=\"ghost\"\n              className=\"btn-close px-2 m-1\"\n              data-testid=\"btn-page-close\"\n              onClick={onClose}\n              icon={vsClose}\n              tooltip=\"Close\"\n            />\n          )}\n        </div>\n      </div>\n      <div className=\"navigation-content\">{children}</div>\n    </div>\n  );\n}\n\nexport default Page;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,EAAEC,aAAa,QAAQ,kBAAkB;AAAC;AAAA,OAEnDC,MAAM;AAAA;AAAA;AAUb;AACA;AACA;AACA;AACA,OAAO,SAASC,IAAI,OAMO;EAAA,IANN;IACnBC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,KAAK;IACL,aAAa,EAAEC;EACN,CAAC;EACV,oBACE;IAAK,SAAS,EAAC,iBAAiB;IAAC,eAAaA,UAAW;IAAA,wBACvD;MAAK,SAAS,EAAC,sBAAsB;MAAA,wBACnC;QAAK,SAAS,EAAC,yBAAyB;QAAA,UACrCH,MAAM,KAAKI,SAAS,iBACnB,KAAC,MAAM;UACL,IAAI,EAAC,OAAO;UACZ,SAAS,EAAC,UAAU;UACpB,eAAY,eAAe;UAC3B,OAAO,EAAEJ,MAAO;UAChB,IAAI,EAAEJ,aAAc;UAAA,UACrB;QAED;MACD,EACG,eACN;QAAK,SAAS,EAAC,kBAAkB;QAAA,UAAEM;MAAK,EAAO,eAC/C;QAAK,SAAS,EAAC,0BAA0B;QAAA,UACtCD,OAAO,KAAKG,SAAS,iBACpB,KAAC,MAAM;UACL,IAAI,EAAC,OAAO;UACZ,SAAS,EAAC,oBAAoB;UAC9B,eAAY,gBAAgB;UAC5B,OAAO,EAAEH,OAAQ;UACjB,IAAI,EAAEN,OAAQ;UACd,OAAO,EAAC;QAAO;MAElB,EACG;IAAA,EACF,eACN;MAAK,SAAS,EAAC,oBAAoB;MAAA,UAAEI;IAAQ,EAAO;EAAA,EAChD;AAEV;AAEA,eAAeD,IAAI"}

package/dist/navigation/Stack.js

@@ -3,6 +3,9 @@ import { CSSTransition } from 'react-transition-group';
 import { usePrevious } from '@deephaven/react-hooks';
 import ThemeExport from "../ThemeExport.js";
 import "./Stack.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Pass a full navigation stack of children, and then automatically does a sliding animation when the stack changes.
  * Adding items to the stack will do a "push" animation, and removing items from the stack will do a "pop" animation.
@@ -57,26 +60,36 @@ export function Stack(_ref) {
   var popComplete = useCallback(() => {
     setPoppingView(null);
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "navigation-stack"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "main-view",
-    "data-testid": dataTestId
-  }, mainView), /*#__PURE__*/React.createElement(CSSTransition, {
-    in: poppingView != null,
-    timeout: ThemeExport.transitionMidMs,
-    classNames: "slide-right",
-    onEntered: popComplete
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, poppingView != null && /*#__PURE__*/React.createElement("div", {
-    className: "popping-view"
-  }, poppingView))), /*#__PURE__*/React.createElement(CSSTransition, {
-    in: pushingView != null,
-    timeout: ThemeExport.transitionMidMs,
-    classNames: "slide-left",
-    onEntered: pushComplete
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, pushingView != null && /*#__PURE__*/React.createElement("div", {
-    className: "pushing-view"
-  }, pushingView))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "navigation-stack",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "main-view",
+      "data-testid": dataTestId,
+      children: mainView
+    }), /*#__PURE__*/_jsx(CSSTransition, {
+      in: poppingView != null,
+      timeout: ThemeExport.transitionMidMs,
+      classNames: "slide-right",
+      onEntered: popComplete,
+      children: /*#__PURE__*/_jsx(_Fragment, {
+        children: poppingView != null && /*#__PURE__*/_jsx("div", {
+          className: "popping-view",
+          children: poppingView
+        })
+      })
+    }), /*#__PURE__*/_jsx(CSSTransition, {
+      in: pushingView != null,
+      timeout: ThemeExport.transitionMidMs,
+      classNames: "slide-left",
+      onEntered: pushComplete,
+      children: /*#__PURE__*/_jsx(_Fragment, {
+        children: pushingView != null && /*#__PURE__*/_jsx("div", {
+          className: "pushing-view",
+          children: pushingView
+        })
+      })
+    })]
+  });
 }
 export default Stack;
 //# sourceMappingURL=Stack.js.map

package/dist/navigation/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","names":["React","useState","useEffect","useMemo","useCallback","CSSTransition","usePrevious","ThemeExport","Stack","children","dataTestId","childrenArray","Children","toArray","prevChildrenArray","mainView","setMainView","length","pushingView","setPushingView","poppingView","setPoppingView","initAnimation","undefined","topChild","pushComplete","popComplete","transitionMidMs"],"sources":["../../src/navigation/Stack.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { usePrevious } from '@deephaven/react-hooks';\nimport ThemeExport from '../ThemeExport';\nimport './Stack.scss';\n\nexport type StackProps = {\n  children: React.ReactNode | React.ReactNode[];\n  'data-testid'?: string;\n};\n\n/**\n * Pass a full navigation stack of children, and then automatically does a sliding animation when the stack changes.\n * Adding items to the stack will do a \"push\" animation, and removing items from the stack will do a \"pop\" animation.\n */\nexport function Stack({\n  children,\n  'data-testid': dataTestId,\n}: StackProps): JSX.Element {\n  const childrenArray = useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n  const prevChildrenArray = usePrevious(childrenArray);\n  const [mainView, setMainView] = useState<React.ReactNode>(\n    childrenArray[childrenArray.length - 1]\n  );\n\n  const [pushingView, setPushingView] = useState<React.ReactNode>(null);\n  const [poppingView, setPoppingView] = useState<React.ReactNode>(null);\n\n  /**\n   * To do the animation effect, we just need to set the proper pushing/popping views when the stack changes.\n   * `mainView` - The main view of the stack, stationary, filling the container.\n   * `pushingView` - A view that's currently being pushed. Slides from off screen right to overtop of `mainView`.\n   * `poppingView` - A view that's currently being popped. Slides from overtop of `mainView` to right off screen.\n   *\n   * When the `pushingView` or `poppingView` is set, that will kick off their animation.\n   * Completion of the animation is handled in `pushComplete` or `popComplete`, and then the stack is in an idle state again.\n   */\n  useEffect(\n    function initAnimation() {\n      if (\n        prevChildrenArray === undefined ||\n        childrenArray === prevChildrenArray\n      ) {\n        return;\n      }\n      const topChild = childrenArray[childrenArray.length - 1];\n      if (\n        childrenArray.length === prevChildrenArray.length ||\n        prevChildrenArray.length === 0 ||\n        pushingView !== null ||\n        poppingView !== null\n      ) {\n        // 1) Stack is the same size, we've just mounted, or we're already in an animation - just update the view\n        if (pushingView !== null && topChild !== pushingView) {\n          // Stack was updated mid animation\n          setPushingView(topChild);\n        } else if (topChild !== poppingView && topChild !== mainView) {\n          // Replace the current view\n          setMainView(topChild);\n        }\n      } else if (childrenArray.length > prevChildrenArray.length) {\n        // 2) Stack has grown - start the push animation\n        setPushingView(topChild);\n      } else if (childrenArray.length < prevChildrenArray.length) {\n        // 3) Stack has shrunk - start the pop animation\n        setMainView(topChild);\n        setPoppingView(prevChildrenArray[prevChildrenArray.length - 1]);\n      }\n    },\n    [childrenArray, prevChildrenArray, pushingView, poppingView, mainView]\n  );\n\n  const pushComplete = useCallback(() => {\n    setMainView(pushingView);\n    setPushingView(null);\n  }, [pushingView]);\n\n  const popComplete = useCallback(() => {\n    setPoppingView(null);\n  }, []);\n\n  return (\n    <div className=\"navigation-stack\">\n      <div className=\"main-view\" data-testid={dataTestId}>\n        {mainView}\n      </div>\n\n      <CSSTransition\n        in={poppingView != null}\n        timeout={ThemeExport.transitionMidMs}\n        classNames=\"slide-right\"\n        onEntered={popComplete}\n      >\n        {/* Without the fragment, the transition doesn't work. Without the conditional render, the stack is blank */}\n        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n        <>\n          {poppingView != null && (\n            <div className=\"popping-view\">{poppingView}</div>\n          )}\n        </>\n      </CSSTransition>\n      <CSSTransition\n        in={pushingView != null}\n        timeout={ThemeExport.transitionMidMs}\n        classNames=\"slide-left\"\n        onEntered={pushComplete}\n      >\n        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n        <>\n          {pushingView != null && (\n            <div className=\"pushing-view\">{pushingView}</div>\n          )}\n        </>\n      </CSSTransition>\n    </div>\n  );\n}\n\nexport default Stack;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AACxE,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,WAAW,QAAQ,wBAAwB;AAAC,OAC9CC,WAAW;AAAA;AAQlB;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAK,OAGO;EAAA,IAHN;IACpBC,QAAQ;IACR,aAAa,EAAEC;EACL,CAAC;EACX,IAAMC,aAAa,GAAGR,OAAO,CAC3B,MAAMH,KAAK,CAACY,QAAQ,CAACC,OAAO,CAACJ,QAAQ,CAAC,EACtC,CAACA,QAAQ,CAAC,CACX;EACD,IAAMK,iBAAiB,GAAGR,WAAW,CAACK,aAAa,CAAC;EACpD,IAAM,CAACI,QAAQ,EAAEC,WAAW,CAAC,GAAGf,QAAQ,CACtCU,aAAa,CAACA,aAAa,CAACM,MAAM,GAAG,CAAC,CAAC,CACxC;EAED,IAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGlB,QAAQ,CAAkB,IAAI,CAAC;EACrE,IAAM,CAACmB,WAAW,EAAEC,cAAc,CAAC,GAAGpB,QAAQ,CAAkB,IAAI,CAAC;;EAErE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,SAAS,CACP,SAASoB,aAAa,GAAG;IACvB,IACER,iBAAiB,KAAKS,SAAS,IAC/BZ,aAAa,KAAKG,iBAAiB,EACnC;MACA;IACF;IACA,IAAMU,QAAQ,GAAGb,aAAa,CAACA,aAAa,CAACM,MAAM,GAAG,CAAC,CAAC;IACxD,IACEN,aAAa,CAACM,MAAM,KAAKH,iBAAiB,CAACG,MAAM,IACjDH,iBAAiB,CAACG,MAAM,KAAK,CAAC,IAC9BC,WAAW,KAAK,IAAI,IACpBE,WAAW,KAAK,IAAI,EACpB;MACA;MACA,IAAIF,WAAW,KAAK,IAAI,IAAIM,QAAQ,KAAKN,WAAW,EAAE;QACpD;QACAC,cAAc,CAACK,QAAQ,CAAC;MAC1B,CAAC,MAAM,IAAIA,QAAQ,KAAKJ,WAAW,IAAII,QAAQ,KAAKT,QAAQ,EAAE;QAC5D;QACAC,WAAW,CAACQ,QAAQ,CAAC;MACvB;IACF,CAAC,MAAM,IAAIb,aAAa,CAACM,MAAM,GAAGH,iBAAiB,CAACG,MAAM,EAAE;MAC1D;MACAE,cAAc,CAACK,QAAQ,CAAC;IAC1B,CAAC,MAAM,IAAIb,aAAa,CAACM,MAAM,GAAGH,iBAAiB,CAACG,MAAM,EAAE;MAC1D;MACAD,WAAW,CAACQ,QAAQ,CAAC;MACrBH,cAAc,CAACP,iBAAiB,CAACA,iBAAiB,CAACG,MAAM,GAAG,CAAC,CAAC,CAAC;IACjE;EACF,CAAC,EACD,CAACN,aAAa,EAAEG,iBAAiB,EAAEI,WAAW,EAAEE,WAAW,EAAEL,QAAQ,CAAC,CACvE;EAED,IAAMU,YAAY,GAAGrB,WAAW,CAAC,MAAM;IACrCY,WAAW,CAACE,WAAW,CAAC;IACxBC,cAAc,CAAC,IAAI,CAAC;EACtB,CAAC,EAAE,CAACD,WAAW,CAAC,CAAC;EAEjB,IAAMQ,WAAW,GAAGtB,WAAW,CAAC,MAAM;IACpCiB,cAAc,CAAC,IAAI,CAAC;EACtB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE;IAAK,SAAS,EAAC;EAAkB,gBAC/B;IAAK,SAAS,EAAC,WAAW;IAAC,eAAaX;EAAW,GAChDK,QAAQ,CACL,eAEN,oBAAC,aAAa;IACZ,EAAE,EAAEK,WAAW,IAAI,IAAK;IACxB,OAAO,EAAEb,WAAW,CAACoB,eAAgB;IACrC,UAAU,EAAC,aAAa;IACxB,SAAS,EAAED;EAAY,gBAIvB,0CACGN,WAAW,IAAI,IAAI,iBAClB;IAAK,SAAS,EAAC;EAAc,GAAEA,WAAW,CAC3C,CACA,CACW,eAChB,oBAAC,aAAa;IACZ,EAAE,EAAEF,WAAW,IAAI,IAAK;IACxB,OAAO,EAAEX,WAAW,CAACoB,eAAgB;IACrC,UAAU,EAAC,YAAY;IACvB,SAAS,EAAEF;EAAa,gBAGxB,0CACGP,WAAW,IAAI,IAAI,iBAClB;IAAK,SAAS,EAAC;EAAc,GAAEA,WAAW,CAC3C,CACA,CACW,CACZ;AAEV;AAEA,eAAeV,KAAK"}
+{"version":3,"file":"Stack.js","names":["React","useState","useEffect","useMemo","useCallback","CSSTransition","usePrevious","ThemeExport","Stack","children","dataTestId","childrenArray","Children","toArray","prevChildrenArray","mainView","setMainView","length","pushingView","setPushingView","poppingView","setPoppingView","initAnimation","undefined","topChild","pushComplete","popComplete","transitionMidMs"],"sources":["../../src/navigation/Stack.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { usePrevious } from '@deephaven/react-hooks';\nimport ThemeExport from '../ThemeExport';\nimport './Stack.scss';\n\nexport type StackProps = {\n  children: React.ReactNode | React.ReactNode[];\n  'data-testid'?: string;\n};\n\n/**\n * Pass a full navigation stack of children, and then automatically does a sliding animation when the stack changes.\n * Adding items to the stack will do a \"push\" animation, and removing items from the stack will do a \"pop\" animation.\n */\nexport function Stack({\n  children,\n  'data-testid': dataTestId,\n}: StackProps): JSX.Element {\n  const childrenArray = useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n  const prevChildrenArray = usePrevious(childrenArray);\n  const [mainView, setMainView] = useState<React.ReactNode>(\n    childrenArray[childrenArray.length - 1]\n  );\n\n  const [pushingView, setPushingView] = useState<React.ReactNode>(null);\n  const [poppingView, setPoppingView] = useState<React.ReactNode>(null);\n\n  /**\n   * To do the animation effect, we just need to set the proper pushing/popping views when the stack changes.\n   * `mainView` - The main view of the stack, stationary, filling the container.\n   * `pushingView` - A view that's currently being pushed. Slides from off screen right to overtop of `mainView`.\n   * `poppingView` - A view that's currently being popped. Slides from overtop of `mainView` to right off screen.\n   *\n   * When the `pushingView` or `poppingView` is set, that will kick off their animation.\n   * Completion of the animation is handled in `pushComplete` or `popComplete`, and then the stack is in an idle state again.\n   */\n  useEffect(\n    function initAnimation() {\n      if (\n        prevChildrenArray === undefined ||\n        childrenArray === prevChildrenArray\n      ) {\n        return;\n      }\n      const topChild = childrenArray[childrenArray.length - 1];\n      if (\n        childrenArray.length === prevChildrenArray.length ||\n        prevChildrenArray.length === 0 ||\n        pushingView !== null ||\n        poppingView !== null\n      ) {\n        // 1) Stack is the same size, we've just mounted, or we're already in an animation - just update the view\n        if (pushingView !== null && topChild !== pushingView) {\n          // Stack was updated mid animation\n          setPushingView(topChild);\n        } else if (topChild !== poppingView && topChild !== mainView) {\n          // Replace the current view\n          setMainView(topChild);\n        }\n      } else if (childrenArray.length > prevChildrenArray.length) {\n        // 2) Stack has grown - start the push animation\n        setPushingView(topChild);\n      } else if (childrenArray.length < prevChildrenArray.length) {\n        // 3) Stack has shrunk - start the pop animation\n        setMainView(topChild);\n        setPoppingView(prevChildrenArray[prevChildrenArray.length - 1]);\n      }\n    },\n    [childrenArray, prevChildrenArray, pushingView, poppingView, mainView]\n  );\n\n  const pushComplete = useCallback(() => {\n    setMainView(pushingView);\n    setPushingView(null);\n  }, [pushingView]);\n\n  const popComplete = useCallback(() => {\n    setPoppingView(null);\n  }, []);\n\n  return (\n    <div className=\"navigation-stack\">\n      <div className=\"main-view\" data-testid={dataTestId}>\n        {mainView}\n      </div>\n\n      <CSSTransition\n        in={poppingView != null}\n        timeout={ThemeExport.transitionMidMs}\n        classNames=\"slide-right\"\n        onEntered={popComplete}\n      >\n        {/* Without the fragment, the transition doesn't work. Without the conditional render, the stack is blank */}\n        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n        <>\n          {poppingView != null && (\n            <div className=\"popping-view\">{poppingView}</div>\n          )}\n        </>\n      </CSSTransition>\n      <CSSTransition\n        in={pushingView != null}\n        timeout={ThemeExport.transitionMidMs}\n        classNames=\"slide-left\"\n        onEntered={pushComplete}\n      >\n        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n        <>\n          {pushingView != null && (\n            <div className=\"pushing-view\">{pushingView}</div>\n          )}\n        </>\n      </CSSTransition>\n    </div>\n  );\n}\n\nexport default Stack;\n"],"mappings":"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"}

package/dist/popper/Popper.js

@@ -28,6 +28,8 @@ import PopperJs from 'popper.js';
 import PropTypes from 'prop-types';
 import ThemeExport from "../ThemeExport.js";
 import "./Popper.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 class Popper extends Component {
   constructor(props) {
     super(props);
@@ -206,32 +208,35 @@ class Popper extends Component {
     var {
       show
     } = this.state;
-    return /*#__PURE__*/React.createElement(CSSTransition, {
+    return /*#__PURE__*/_jsx(CSSTransition, {
       in: show,
       timeout: timeout,
       classNames: "popper-transition",
       onEntered: this.handleEnter,
-      onExited: this.handleExit
-    }, /*#__PURE__*/React.createElement("div", {
-      onClick: e => {
-        // stop click events from escaping popper
-        e.stopPropagation();
-      },
-      onKeyDown: e => {
-        if (e.key === 'Escape') this.hide();
-      },
-      className: classNames('popper', {
-        interactive
-      }, className),
-      onBlur: closeOnBlur ? this.handleBlur : undefined,
-      tabIndex: closeOnBlur ? -1 : undefined,
-      role: "presentation"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "popper-content"
-    }, children, /*#__PURE__*/React.createElement("div", {
-      className: "popper-arrow",
-      "x-arrow": ""
-    }))));
+      onExited: this.handleExit,
+      children: /*#__PURE__*/_jsx("div", {
+        onClick: e => {
+          // stop click events from escaping popper
+          e.stopPropagation();
+        },
+        onKeyDown: e => {
+          if (e.key === 'Escape') this.hide();
+        },
+        className: classNames('popper', {
+          interactive
+        }, className),
+        onBlur: closeOnBlur ? this.handleBlur : undefined,
+        tabIndex: closeOnBlur ? -1 : undefined,
+        role: "presentation",
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "popper-content",
+          children: [children, /*#__PURE__*/_jsx("div", {
+            className: "popper-arrow",
+            "x-arrow": ""
+          })]
+        })
+      })
+    });
   }
   render() {
     var {
@@ -240,14 +245,15 @@ class Popper extends Component {
     var {
       'data-testid': dataTestId
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: "popper-parent-container",
       ref: this.container,
       style: {
         display: 'none'
       },
-      "data-testid": dataTestId
-    }, popper && /*#__PURE__*/ReactDOM.createPortal(this.renderContent(), this.element));
+      "data-testid": dataTestId,
+      children: popper && /*#__PURE__*/ReactDOM.createPortal(this.renderContent(), this.element)
+    });
   }
 }
 _defineProperty(Popper, "propTypes", {