@deephaven/components 0.43.0 → 0.44.0

package/dist/navigation/Page.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { vsClose, vsChevronLeft } from '@deephaven/icons';
+import "./Page.css";
+import Button from "../Button.js";
+/**
+ * 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.
+ */
+export function Page(_ref) {
+  var {
+    children,
+    onBack,
+    onClose,
+    title,
+    'data-testid': dataTestId
+  } = _ref;
+  return /*#__PURE__*/React.createElement("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));
+}
+export default Page;
+//# sourceMappingURL=Page.js.map

package/dist/navigation/Page.js.map

@@ -0,0 +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"}

package/dist/navigation/Stack.css

@@ -0,0 +1,24 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.navigation-stack {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.navigation-stack .main-view,
+.navigation-stack .popping-view,
+.navigation-stack .pushing-view {
+  width: 100%;
+  height: 100%;
+  background: #2d2a2e;
+  position: absolute;
+}
+.navigation-stack .pushing-view,
+.navigation-stack .popping-view {
+  box-shadow: -4px 0 8px rgba(26, 23, 26, 0.45);
+}
+.navigation-stack .popping-view {
+  left: 100%;
+}
+
+/*# sourceMappingURL=Stack.css.map */

package/dist/navigation/Stack.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/custom.scss","../../src/navigation/Stack.scss","../../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA,YCFY;EDGZ;;AAGF;AAAA;EAEE;;AAGF;EACE","file":"Stack.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '../../scss/custom.scss';\n\n.navigation-stack {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n\n  .main-view,\n  .popping-view,\n  .pushing-view {\n    width: 100%;\n    height: 100%;\n    background: $content-bg;\n    position: absolute;\n  }\n\n  .pushing-view,\n  .popping-view {\n    box-shadow: -4px 0 8px rgba($black, 0.45);\n  }\n\n  .popping-view {\n    left: 100%;\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n"]}

package/dist/navigation/Stack.js

@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { usePrevious } from '@deephaven/react-hooks';
+import ThemeExport from "../ThemeExport.js";
+import "./Stack.css";
+/**
+ * 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.
+ */
+export function Stack(_ref) {
+  var {
+    children,
+    'data-testid': dataTestId
+  } = _ref;
+  var childrenArray = useMemo(() => React.Children.toArray(children), [children]);
+  var prevChildrenArray = usePrevious(childrenArray);
+  var [mainView, setMainView] = useState(childrenArray[childrenArray.length - 1]);
+  var [pushingView, setPushingView] = useState(null);
+  var [poppingView, setPoppingView] = useState(null);
+
+  /**
+   * To do the animation effect, we just need to set the proper pushing/popping views when the stack changes.
+   * `mainView` - The main view of the stack, stationary, filling the container.
+   * `pushingView` - A view that's currently being pushed. Slides from off screen right to overtop of `mainView`.
+   * `poppingView` - A view that's currently being popped. Slides from overtop of `mainView` to right off screen.
+   *
+   * When the `pushingView` or `poppingView` is set, that will kick off their animation.
+   * Completion of the animation is handled in `pushComplete` or `popComplete`, and then the stack is in an idle state again.
+   */
+  useEffect(function initAnimation() {
+    if (prevChildrenArray === undefined || childrenArray === prevChildrenArray) {
+      return;
+    }
+    var topChild = childrenArray[childrenArray.length - 1];
+    if (childrenArray.length === prevChildrenArray.length || prevChildrenArray.length === 0 || pushingView !== null || poppingView !== null) {
+      // 1) Stack is the same size, we've just mounted, or we're already in an animation - just update the view
+      if (pushingView !== null && topChild !== pushingView) {
+        // Stack was updated mid animation
+        setPushingView(topChild);
+      } else if (topChild !== poppingView && topChild !== mainView) {
+        // Replace the current view
+        setMainView(topChild);
+      }
+    } else if (childrenArray.length > prevChildrenArray.length) {
+      // 2) Stack has grown - start the push animation
+      setPushingView(topChild);
+    } else if (childrenArray.length < prevChildrenArray.length) {
+      // 3) Stack has shrunk - start the pop animation
+      setMainView(topChild);
+      setPoppingView(prevChildrenArray[prevChildrenArray.length - 1]);
+    }
+  }, [childrenArray, prevChildrenArray, pushingView, poppingView, mainView]);
+  var pushComplete = useCallback(() => {
+    setMainView(pushingView);
+    setPushingView(null);
+  }, [pushingView]);
+  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))));
+}
+export default Stack;
+//# sourceMappingURL=Stack.js.map

package/dist/navigation/Stack.js.map

@@ -0,0 +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(() => 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/navigation/index.js

@@ -0,0 +1,5 @@
+export { default as Menu } from "./Menu.js";
+export { default as MenuItem } from "./MenuItem.js";
+export { default as Page } from "./Page.js";
+export { default as Stack } from "./Stack.js";
+//# sourceMappingURL=index.js.map

package/dist/navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","Menu","MenuItem","Page","Stack"],"sources":["../../src/navigation/index.ts"],"sourcesContent":["export { default as Menu } from './Menu';\nexport type { MenuProps } from './Menu';\nexport { default as MenuItem } from './MenuItem';\nexport type { SwitchMenuItemDef, MenuItemDef, MenuItemProps } from './MenuItem';\nexport { default as Page } from './Page';\nexport type { PageProps } from './Page';\nexport { default as Stack } from './Stack';\n"],"mappings":"SAASA,OAAO,IAAIC,IAAI;AAAA,SAEfD,OAAO,IAAIE,QAAQ;AAAA,SAEnBF,OAAO,IAAIG,IAAI;AAAA,SAEfH,OAAO,IAAII,KAAK"}

package/dist/popper/Popper.css

@@ -0,0 +1,127 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.popper-container {
+  position: absolute;
+  z-index: 5000;
+}
+
+.popper {
+  background: #403e41;
+  color: #f0f0ee;
+  border-radius: 4px;
+  transition: visibility 0.15s, opacity 0.15s;
+  pointer-events: none;
+  outline: 0;
+}
+.popper .popper-content {
+  position: relative;
+  box-shadow: 0 0.1rem 1.5rem 0.25rem rgba(26, 23, 26, 0.45);
+}
+.popper .popper-content .tooltip-content {
+  text-align: center;
+  padding: 0.25rem 0.5rem;
+}
+.popper .popper-arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+  border-color: #403e41;
+}
+
+.popper.interactive {
+  pointer-events: auto;
+}
+
+.popper-transition-enter {
+  opacity: 0;
+  transition: none;
+}
+
+.popper-transition-exit {
+  opacity: 0;
+  transition: all 0.15s;
+}
+
+.popper-container[x-placement^=top] > .popper-transition-enter,
+.popper-container[x-placement^=top] > .popper-transition-exit {
+  transform: scale(0.92) translate(0, 10px);
+}
+
+.popper-container[x-placement^=right] > .popper-transition-enter,
+.popper-container[x-placement^=right] > .popper-transition-exit {
+  transform: scale(0.92) translate(-10px, 0);
+}
+
+.popper-container[x-placement^=bottom] > .popper-transition-enter,
+.popper-container[x-placement^=bottom] > .popper-transition-exit {
+  transform: scale(0.92) translate(0, -10px);
+}
+
+.popper-container[x-placement^=left] > .popper-transition-enter,
+.popper-container[x-placement^=left] > .popper-transition-exit {
+  transform: scale(0.92) translate(10px, 0);
+}
+
+.popper-container[x-placement^=top] > .popper-transition-enter-active.popper,
+.popper-container[x-placement^=right] > .popper-transition-enter-active.popper,
+.popper-container[x-placement^=bottom] > .popper-transition-enter-active.popper,
+.popper-container[x-placement^=left] > .popper-transition-enter-active.popper {
+  opacity: 1;
+  transform: none;
+  transition: all 0.15s ease-out;
+}
+
+.popper-container[x-placement^=top] > .popper {
+  margin-bottom: 5px;
+}
+.popper-container[x-placement^=top] > .popper .popper-arrow {
+  border-width: 5px 5px 0 5px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  bottom: -5px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.popper-container[x-placement^=bottom] > .popper {
+  margin-top: 5px;
+}
+.popper-container[x-placement^=bottom] > .popper .popper-arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  top: -5px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.popper-container[x-placement^=right] > .popper {
+  margin-left: 5px;
+}
+.popper-container[x-placement^=right] > .popper .popper-arrow {
+  border-width: 5px 5px 5px 0;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  left: -5px;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.popper-container[x-placement^=left] > .popper {
+  margin-right: 5px;
+}
+.popper-container[x-placement^=left] > .popper .popper-arrow {
+  border-width: 5px 0 5px 5px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  right: -5px;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/*# sourceMappingURL=Popper.css.map */

package/dist/popper/Popper.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/custom.scss","../../src/popper/Popper.scss","../../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACOA;EACE;EACA;;;AAGF;EACE,YCWS;EDVT,OCDe;EDEf,eC0Gc;EDzGd;EACA;EACA;;AAEA;EACE;EACA,YAnBY;;AAqBZ;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA,QAjCU;EAkCV,cCZO;;;ADgBX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;;AAGF;EACE,eArFY;;AAuFZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,YAnGY;;AAqGZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,aAjHY;;AAmHZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,cA/HY;;AAiIZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"Popper.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '../../scss/custom.scss';\n\n$arrow-width: 5px;\n$popper-shadow: 0 0.1rem 1.5rem 0.25rem rgba($black, 0.45);\n$animation-scale: 0.92;\n$animation-offset: 10px;\n\n.popper-container {\n  position: absolute;\n  z-index: 5000;\n}\n\n.popper {\n  background: $tooltip-bg;\n  color: $tooltip-color;\n  border-radius: $border-radius;\n  transition: visibility $transition, opacity $transition;\n  pointer-events: none;\n  outline: 0;\n\n  .popper-content {\n    position: relative;\n    box-shadow: $popper-shadow;\n\n    .tooltip-content {\n      text-align: center;\n      padding: $tooltip-padding-y $tooltip-padding-x;\n    }\n  }\n\n  .popper-arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: $arrow-width;\n    border-color: $tooltip-bg;\n  }\n}\n\n.popper.interactive {\n  pointer-events: auto;\n}\n\n.popper-transition-enter {\n  opacity: 0;\n  transition: none;\n}\n\n.popper-transition-exit {\n  opacity: 0;\n  transition: all $transition;\n}\n\n.popper-container[x-placement^='top'] > .popper-transition-enter,\n.popper-container[x-placement^='top'] > .popper-transition-exit {\n  transform: scale($animation-scale) translate(0, $animation-offset);\n}\n\n.popper-container[x-placement^='right'] > .popper-transition-enter,\n.popper-container[x-placement^='right'] > .popper-transition-exit {\n  transform: scale($animation-scale) translate(-$animation-offset, 0);\n}\n\n.popper-container[x-placement^='bottom'] > .popper-transition-enter,\n.popper-container[x-placement^='bottom'] > .popper-transition-exit {\n  transform: scale($animation-scale) translate(0, -$animation-offset);\n}\n\n.popper-container[x-placement^='left'] > .popper-transition-enter,\n.popper-container[x-placement^='left'] > .popper-transition-exit {\n  transform: scale($animation-scale) translate($animation-offset, 0);\n}\n\n.popper-container[x-placement^='top'] > .popper-transition-enter-active.popper,\n.popper-container[x-placement^='right']\n  > .popper-transition-enter-active.popper,\n.popper-container[x-placement^='bottom']\n  > .popper-transition-enter-active.popper,\n.popper-container[x-placement^='left']\n  > .popper-transition-enter-active.popper {\n  opacity: 1;\n  transform: none;\n  transition: all $transition ease-out;\n}\n\n.popper-container[x-placement^='top'] > .popper {\n  margin-bottom: $arrow-width;\n\n  .popper-arrow {\n    border-width: $arrow-width $arrow-width 0 $arrow-width;\n    border-left-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    bottom: -$arrow-width;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n}\n\n.popper-container[x-placement^='bottom'] > .popper {\n  margin-top: $arrow-width;\n\n  .popper-arrow {\n    border-width: 0 $arrow-width $arrow-width $arrow-width;\n    border-left-color: transparent;\n    border-right-color: transparent;\n    border-top-color: transparent;\n    top: -$arrow-width;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n}\n\n.popper-container[x-placement^='right'] > .popper {\n  margin-left: $arrow-width;\n\n  .popper-arrow {\n    border-width: $arrow-width $arrow-width $arrow-width 0;\n    border-left-color: transparent;\n    border-top-color: transparent;\n    border-bottom-color: transparent;\n    left: -$arrow-width;\n    margin-left: 0;\n    margin-right: 0;\n  }\n}\n\n.popper-container[x-placement^='left'] > .popper {\n  margin-right: $arrow-width;\n\n  .popper-arrow {\n    border-width: $arrow-width 0 $arrow-width $arrow-width;\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    right: -$arrow-width;\n    margin-left: 0;\n    margin-right: 0;\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n"]}

package/dist/popper/Popper.js

@@ -0,0 +1,283 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/**
+ *  A component for creating popover dialogs. Only requires child element.
+ *
+ * <Popper
+ *   options={popperOptions}
+ *   className="whatever"
+ *   onEntered={this.handleEnter}
+ *   onExited={this.handleExit}
+ *   closeOnBlur // if you want dialog to self close, on click outside
+ *   interactive // if popper contents will be interactable
+ *   isShown={variable} // controls if its shown or not,
+ *   ref={this.popper} // or via ref and this.popper.show() or this.popper.hide()
+ *  >
+ *   <ChildContent />
+ * </Popper>
+ */
+
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import PopperJs from 'popper.js';
+import PropTypes from 'prop-types';
+import ThemeExport from "../ThemeExport.js";
+import "./Popper.css";
+class Popper extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "element", void 0);
+    _defineProperty(this, "container", void 0);
+    _defineProperty(this, "rAF", void 0);
+    this.handleEnter = this.handleEnter.bind(this);
+    this.handleExit = this.handleExit.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.element = document.createElement('div');
+    this.element.className = 'popper-container';
+    this.container = /*#__PURE__*/React.createRef();
+
+    // cancelAnimationFrame does nothing if the handle isn't recognized
+    // requestAnimationFrame provides a non-zero number, so 0 as a default should be safe
+    this.rAF = 0;
+    var {
+      isShown
+    } = this.props;
+    this.state = {
+      show: isShown,
+      popper: null
+    };
+  }
+  componentDidUpdate(prevProps) {
+    var {
+      isShown
+    } = this.props;
+    if (prevProps.isShown !== isShown) {
+      if (isShown) {
+        cancelAnimationFrame(this.rAF);
+        this.rAF = window.requestAnimationFrame(() => {
+          this.show();
+        });
+      } else {
+        this.hide();
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.destroyPopper(false);
+  }
+  /** Goes through an element and it's parents until the first visible element is found */
+  getVisibleElement(element) {
+    if (element == null || element.clientHeight > 0 || element.clientWidth > 0) {
+      return element;
+    }
+    return this.getVisibleElement(element.parentElement);
+  }
+  initPopper() {
+    var {
+      popper
+    } = this.state;
+    var {
+      closeOnBlur,
+      referenceObject
+    } = this.props;
+    if (popper) {
+      return;
+    }
+    if (this.container.current === null) {
+      return;
+    }
+    var {
+      options
+    } = this.props;
+    options = _objectSpread({
+      placement: 'auto',
+      modifiers: {
+        preventOverflow: {
+          boundariesElement: 'viewport'
+        }
+      }
+    }, options);
+    document.body.appendChild(this.element);
+    var parent = this.getVisibleElement(this.container.current);
+    if (parent == null) {
+      parent = this.container.current;
+    }
+    popper = new PopperJs(referenceObject || parent, this.element, options);
+    popper.scheduleUpdate();
+
+    // delayed due to scheduleUpdate
+    cancelAnimationFrame(this.rAF);
+    this.rAF = window.requestAnimationFrame(() => {
+      // for blur on close to work, focus needs to be on or within the popper
+      if (closeOnBlur && !this.element.contains(document.activeElement)) {
+        // only set focus, if a focus isn't already set within
+        var elem = this.element.firstElementChild;
+        if (elem instanceof HTMLElement) {
+          elem.focus(); // first child of the portal element
+        }
+      }
+    });
+
+    this.setState({
+      popper
+    });
+  }
+  destroyPopper() {
+    var updateState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    cancelAnimationFrame(this.rAF);
+    var {
+      popper
+    } = this.state;
+    if (!popper) {
+      return;
+    }
+    popper.destroy();
+
+    // If component is exiting and unmounted in
+    // the same frame, destroy can be called twice.
+    // Check to make sure removeChild isn't called twice.
+    if (document.body.contains(this.element)) {
+      document.body.removeChild(this.element);
+    }
+    if (updateState) {
+      this.setState({
+        popper: null
+      });
+    }
+  }
+  show() {
+    this.initPopper();
+    this.setState({
+      show: true
+    });
+  }
+  hide() {
+    this.setState({
+      show: false
+    });
+  }
+  scheduleUpdate() {
+    var {
+      popper
+    } = this.state;
+    if (popper) popper.scheduleUpdate();
+  }
+  handleBlur(e) {
+    if (!(e.relatedTarget instanceof HTMLElement)) {
+      return;
+    }
+    if (!this.element.contains(e.relatedTarget)) {
+      this.hide();
+    }
+  }
+  handleEnter() {
+    var {
+      onEntered
+    } = this.props;
+    onEntered(); // trigger any parent component waiting for enter handler
+  }
+
+  handleExit() {
+    var {
+      onExited
+    } = this.props;
+    var {
+      show
+    } = this.state;
+    if (!show) {
+      this.destroyPopper();
+    }
+    onExited(); // trigger any parent component waiting for exited handler
+  }
+
+  renderContent() {
+    var {
+      className,
+      children,
+      timeout,
+      interactive,
+      closeOnBlur
+    } = this.props;
+    var {
+      show
+    } = this.state;
+    return /*#__PURE__*/React.createElement(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": ""
+    }))));
+  }
+  render() {
+    var {
+      popper
+    } = this.state;
+    var {
+      'data-testid': dataTestId
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "popper-parent-container",
+      ref: this.container,
+      style: {
+        display: 'none'
+      },
+      "data-testid": dataTestId
+    }, popper && /*#__PURE__*/ReactDOM.createPortal(this.renderContent(), this.element));
+  }
+}
+_defineProperty(Popper, "propTypes", {
+  children: PropTypes.node.isRequired,
+  options: PropTypes.shape({}),
+  className: PropTypes.string,
+  timeout: PropTypes.number,
+  onEntered: PropTypes.func,
+  onExited: PropTypes.func,
+  isShown: PropTypes.bool,
+  closeOnBlur: PropTypes.bool,
+  interactive: PropTypes.bool,
+  referenceObject: PropTypes.shape({}),
+  'data-testid': PropTypes.string
+});
+_defineProperty(Popper, "defaultProps", {
+  options: {},
+  className: '',
+  timeout: ThemeExport.transitionMs,
+  onEntered() {
+    // no-op
+  },
+  onExited() {
+    // no-op
+  },
+  isShown: false,
+  interactive: false,
+  closeOnBlur: false,
+  referenceObject: null,
+  'data-testid': undefined
+});
+export default Popper;
+//# sourceMappingURL=Popper.js.map