@deephaven/components 0.43.0 → 0.44.0

package/dist/RandomAreaPlotAnimation.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/RandomAreaPlotAnimation.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE","file":"RandomAreaPlotAnimation.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.random-area-plot-animation-container {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n\n  canvas {\n    transition: all $transition;\n    display: block;\n\n    &.shade {\n      filter: grayscale(100%) brightness(90%);\n    }\n  }\n}\n"]}

package/dist/RandomAreaPlotAnimation.js

@@ -0,0 +1,290 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/display-name */
+
+import React, { useEffect, useState, useRef } from 'react';
+import debounce from 'lodash.debounce';
+import { assertNotNull } from '@deephaven/utils';
+import "./RandomAreaPlotAnimation.css";
+import ThemeExport from "./ThemeExport.js";
+var VOLATILITY = 0.025; // how spikey the data gets
+var LOW = 0.9;
+var HIGH = 0.1;
+var START_Y = 0.618;
+var FOREGROUND = ThemeExport['primary-dark'];
+var GRID_SIZE = 80;
+var GRID_COLOR = ThemeExport['gray-800'];
+var BACKGROUND = ThemeExport['gray-900'];
+var PATTERN = {
+  SIZE: 8,
+  DOT_SIZE: 2,
+  FILL_OPACITY: 0.25
+};
+var PX_PER_SECOND = 18;
+var RESIZE_DEBOUNCE = 250;
+var INTERACTION_TIMEOUT = 60 * 1000;
+
+// Draw a background canvas, paint it with a fun chart looking animation
+var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
+  var canvas = useRef(null);
+  var container = useRef(null);
+  var [shade, setShade] = useState(false);
+  var scale = window.devicePixelRatio;
+  var ctx;
+  var pattern;
+  var width;
+  var height;
+  var rAF;
+  var lastTimestamp = null;
+  var data = [];
+  function setCanvasSize() {
+    var _ctx;
+    // Set canvas size to fill screen
+    if (container.current != null) {
+      width = container.current.offsetWidth;
+      height = container.current.offsetHeight;
+    }
+    if (canvas.current != null) {
+      canvas.current.style.width = "".concat(width, "px");
+      canvas.current.style.height = "".concat(height, "px");
+      canvas.current.width = width * scale;
+      canvas.current.height = height * scale;
+    }
+    (_ctx = ctx) === null || _ctx === void 0 ? void 0 : _ctx.scale(scale, scale);
+  }
+
+  // Returns the background fill create offscreen as pattern
+  function createPatternFill() {
+    // create the off-screen canvas
+    var canvasPattern = document.createElement('canvas');
+    canvasPattern.width = PATTERN.SIZE;
+    canvasPattern.height = PATTERN.SIZE;
+    var contextPattern = canvasPattern.getContext('2d');
+
+    // draw pattern to off-screen context
+    if (contextPattern != null) {
+      contextPattern.fillStyle = FOREGROUND;
+      contextPattern.fillRect(0, 0, PATTERN.DOT_SIZE, PATTERN.DOT_SIZE);
+
+      // add an overlay fill
+      contextPattern.fillStyle = FOREGROUND + Math.round(255 * PATTERN.FILL_OPACITY).toString(16).padStart(2, '0'); // adds opacity in hex to color
+      contextPattern.fillRect(0, 0, PATTERN.SIZE, PATTERN.SIZE);
+    }
+    return contextPattern === null || contextPattern === void 0 ? void 0 : contextPattern.createPattern(canvasPattern, 'repeat');
+  }
+
+  /**
+   * Generates a step in a random walk between LOW - HIGH given a previous value
+   * data is always in 0-1 data space so its scaleable
+   * data space is converted to screen space inside draw functions
+   * @param prev previous random walk step
+   * @return new random walk step
+   */
+  function randomWalk(prev) {
+    var rand = Math.random() - 0.5; // give it directionality
+    var change = VOLATILITY * rand; // scale by volatity constant
+
+    // ensure directional bounce off approaching edges
+    if (prev < HIGH) {
+      change = Math.abs(change);
+    } else if (prev > LOW) {
+      change = -Math.abs(change);
+    }
+    return prev + change;
+  }
+  function initData() {
+    var startingData = [];
+    var y = START_Y; // always start towards the bottom of the screen
+    for (var x = 0; x < width + PX_PER_SECOND; x += 1) {
+      y = randomWalk(y);
+      startingData.push(y);
+    }
+    return startingData;
+  }
+  function setDataSize() {
+    while (data.length >= width + PX_PER_SECOND) {
+      data.pop();
+    }
+    while (data.length < width + PX_PER_SECOND) {
+      data.push(randomWalk(data[data.length - 1]));
+    }
+  }
+  function drawAreaLine(path, context) {
+    context.beginPath();
+    // start offscreen
+    context.moveTo(-1, height + 1);
+    context.lineTo(-1, height * path[0]);
+
+    // draw the line
+    for (var i = 0; i < path.length; i += 1) {
+      context.lineTo(i, height * path[i]);
+    }
+
+    // close offscreen
+    context.lineTo(width + PX_PER_SECOND, height * path[path.length - 1]);
+    context.lineTo(width + PX_PER_SECOND, height + 1);
+    context.closePath();
+  }
+  function drawGridLines(context) {
+    context.beginPath();
+    // draw verticals
+    for (var x = 1; x < width; x += GRID_SIZE) {
+      context.moveTo(x, 0);
+      context.lineTo(x, height);
+    }
+    // draw horizontals
+    for (var y = 1; y < height; y += GRID_SIZE) {
+      context.moveTo(0, y);
+      context.lineTo(width, y);
+    }
+  }
+
+  /**
+   * Main draw loop for where the animation happens
+   * all the styling happens within drawCanvas from paths generated by other functions
+   * @param timestamp passed in callback from requestAnimationFrame
+   */
+  function drawCanvas(timestamp) {
+    var _lastTimestamp, _lastTimestamp2, _lastTimestamp3;
+    lastTimestamp = (_lastTimestamp = lastTimestamp) !== null && _lastTimestamp !== void 0 ? _lastTimestamp : timestamp;
+    assertNotNull(ctx);
+    // clear the canvas
+    ctx.fillStyle = BACKGROUND;
+    ctx.fillRect(0, 0, width, height);
+    drawGridLines(ctx);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = GRID_COLOR;
+    ctx.stroke();
+
+    // for speeds less then 60 px per second, subpixel motion is required to look smooth
+    var subPixelMotion = (((_lastTimestamp2 = lastTimestamp) !== null && _lastTimestamp2 !== void 0 ? _lastTimestamp2 : 0) - (timestamp !== null && timestamp !== void 0 ? timestamp : 0)) / (1000 / PX_PER_SECOND);
+    ctx.translate(subPixelMotion, 0);
+    drawAreaLine(data, ctx);
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = FOREGROUND;
+    ctx.stroke();
+    ctx.translate(-subPixelMotion, 0); // we don't pattern to shift however
+    if (pattern != null) {
+      ctx.fillStyle = pattern;
+    }
+    ctx.fill();
+    ctx.setTransform(scale, 0, 0, scale, 0, 0); // reset the translate matrix to normal
+
+    // generate new data points
+    if ((timestamp !== null && timestamp !== void 0 ? timestamp : 0) - ((_lastTimestamp3 = lastTimestamp) !== null && _lastTimestamp3 !== void 0 ? _lastTimestamp3 : 0) > 1000 / PX_PER_SECOND) {
+      var _lastTimestamp4;
+      // number of points to add since last update
+      var numberOfPoints = Math.floor(((timestamp !== null && timestamp !== void 0 ? timestamp : 0) - ((_lastTimestamp4 = lastTimestamp) !== null && _lastTimestamp4 !== void 0 ? _lastTimestamp4 : 0)) / (1000 / PX_PER_SECOND));
+      for (var i = 0; i < numberOfPoints; i += 1) {
+        data.shift();
+        data.push(randomWalk(data[data.length - 1]));
+      }
+      lastTimestamp = timestamp;
+    }
+    if (rAF != null) {
+      cancelAnimationFrame(rAF);
+    }
+    rAF = requestAnimationFrame(drawCanvas);
+  }
+
+  // debounce the resize so its not overly aggresive
+  var debouncedHandleResize = debounce(() => {
+    rAF = requestAnimationFrame(timestamp => {
+      setCanvasSize(); // setCanvas can cause lag if not debounced
+
+      // fill or remove extra data points
+      setDataSize();
+
+      // opening devtools triggers a blur then resize,
+      // need to reset shade as we are restarting animation
+      setShade(false);
+      drawCanvas(timestamp);
+    });
+  }, RESIZE_DEBOUNCE, {
+    leading: true
+  } // resize immediately, once.
+  );
+
+  function pauseAnimation() {
+    // pause animation when browser window is blurred to conserve CPU usage
+    setShade(true);
+    if (rAF != null) {
+      cancelAnimationFrame(rAF);
+    }
+    rAF = null;
+    lastTimestamp = null;
+  }
+
+  // when timeout expires, pause animation
+  var resetIdleTimeout = debounce(() => {
+    pauseAnimation();
+  }, INTERACTION_TIMEOUT);
+  function startAnimation() {
+    // can fire multiple times, check if rAF is null first
+    // restart animation loop, and fade back in
+    if (rAF == null) {
+      setShade(false);
+      setCanvasSize();
+      setDataSize();
+      rAF = requestAnimationFrame(drawCanvas);
+    }
+    resetIdleTimeout();
+  }
+  function handleActivity() {
+    if (document.hasFocus()) {
+      // only if document has focus (mousemove can fire on non-focused tabs)
+      startAnimation();
+    }
+  }
+  function handleResize() {
+    // pause and debounce animation during resize for better resizing performance
+    if (rAF != null) {
+      cancelAnimationFrame(rAF);
+    }
+    resetIdleTimeout(); // treat resizing as a form of activity
+    debouncedHandleResize();
+  }
+
+  // react mount/unmount hooks
+  useEffect(() => {
+    var _canvas$current;
+    ctx = (_canvas$current = canvas.current) === null || _canvas$current === void 0 ? void 0 : _canvas$current.getContext('2d', {
+      alpha: false
+    });
+    setCanvasSize();
+    data = initData();
+    pattern = createPatternFill();
+
+    // start draw loop
+    drawCanvas();
+    resetIdleTimeout();
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('focus', startAnimation);
+    window.addEventListener('blur', pauseAnimation);
+
+    // don't burn cpu if the user is "idle", start a timer that resets
+    // on any user activity, and on timeout expiry pause the animation
+    window.addEventListener('mousemove', handleActivity);
+    window.addEventListener('keydown', handleActivity);
+    return () => {
+      if (rAF != null) {
+        cancelAnimationFrame(rAF);
+      }
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('focus', startAnimation);
+      window.removeEventListener('blur', pauseAnimation);
+      window.removeEventListener('mousemove', handleActivity);
+      window.removeEventListener('keydown', handleActivity);
+      resetIdleTimeout.cancel();
+      debouncedHandleResize.cancel();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "random-area-plot-animation-container",
+    ref: container
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvas,
+    className: shade ? 'shade' : ''
+  }));
+});
+export default RandomAreaPlotAnimation;
+//# sourceMappingURL=RandomAreaPlotAnimation.js.map

package/dist/RandomAreaPlotAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RandomAreaPlotAnimation.js","names":["React","useEffect","useState","useRef","debounce","assertNotNull","ThemeExport","VOLATILITY","LOW","HIGH","START_Y","FOREGROUND","GRID_SIZE","GRID_COLOR","BACKGROUND","PATTERN","SIZE","DOT_SIZE","FILL_OPACITY","PX_PER_SECOND","RESIZE_DEBOUNCE","INTERACTION_TIMEOUT","RandomAreaPlotAnimation","memo","canvas","container","shade","setShade","scale","window","devicePixelRatio","ctx","pattern","width","height","rAF","lastTimestamp","data","setCanvasSize","current","offsetWidth","offsetHeight","style","createPatternFill","canvasPattern","document","createElement","contextPattern","getContext","fillStyle","fillRect","Math","round","toString","padStart","createPattern","randomWalk","prev","rand","random","change","abs","initData","startingData","y","x","push","setDataSize","length","pop","drawAreaLine","path","context","beginPath","moveTo","lineTo","i","closePath","drawGridLines","drawCanvas","timestamp","lineWidth","strokeStyle","stroke","subPixelMotion","translate","fill","setTransform","numberOfPoints","floor","shift","cancelAnimationFrame","requestAnimationFrame","debouncedHandleResize","leading","pauseAnimation","resetIdleTimeout","startAnimation","handleActivity","hasFocus","handleResize","alpha","addEventListener","removeEventListener","cancel"],"sources":["../src/RandomAreaPlotAnimation.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/display-name */\n\nimport React, { useEffect, useState, useRef } from 'react';\nimport debounce from 'lodash.debounce';\nimport { assertNotNull } from '@deephaven/utils';\nimport './RandomAreaPlotAnimation.scss';\nimport ThemeExport from './ThemeExport';\n\nconst VOLATILITY = 0.025; // how spikey the data gets\nconst LOW = 0.9;\nconst HIGH = 0.1;\nconst START_Y = 0.618;\nconst FOREGROUND = ThemeExport['primary-dark'];\nconst GRID_SIZE = 80;\nconst GRID_COLOR = ThemeExport['gray-800'];\nconst BACKGROUND = ThemeExport['gray-900'];\nconst PATTERN = { SIZE: 8, DOT_SIZE: 2, FILL_OPACITY: 0.25 };\nconst PX_PER_SECOND = 18;\nconst RESIZE_DEBOUNCE = 250;\nconst INTERACTION_TIMEOUT = 60 * 1000;\n\n// Draw a background canvas, paint it with a fun chart looking animation\nconst RandomAreaPlotAnimation = React.memo(() => {\n  const canvas = useRef<HTMLCanvasElement>(null);\n  const container = useRef<HTMLDivElement>(null);\n  const [shade, setShade] = useState(false);\n  const scale = window.devicePixelRatio;\n\n  let ctx: CanvasRenderingContext2D | null | undefined;\n  let pattern: CanvasPattern | null | undefined;\n  let width: number;\n  let height: number;\n  let rAF: number | null;\n\n  let lastTimestamp: DOMHighResTimeStamp | null | undefined = null;\n  let data: number[] = [];\n\n  function setCanvasSize() {\n    // Set canvas size to fill screen\n    if (container.current != null) {\n      width = container.current.offsetWidth;\n      height = container.current.offsetHeight;\n    }\n\n    if (canvas.current != null) {\n      canvas.current.style.width = `${width}px`;\n      canvas.current.style.height = `${height}px`;\n\n      canvas.current.width = width * scale;\n      canvas.current.height = height * scale;\n    }\n\n    ctx?.scale(scale, scale);\n  }\n\n  // Returns the background fill create offscreen as pattern\n  function createPatternFill() {\n    // create the off-screen canvas\n    const canvasPattern = document.createElement('canvas');\n    canvasPattern.width = PATTERN.SIZE;\n    canvasPattern.height = PATTERN.SIZE;\n    const contextPattern = canvasPattern.getContext('2d');\n\n    // draw pattern to off-screen context\n    if (contextPattern != null) {\n      contextPattern.fillStyle = FOREGROUND;\n      contextPattern.fillRect(0, 0, PATTERN.DOT_SIZE, PATTERN.DOT_SIZE);\n\n      // add an overlay fill\n      contextPattern.fillStyle =\n        FOREGROUND +\n        Math.round(255 * PATTERN.FILL_OPACITY)\n          .toString(16)\n          .padStart(2, '0'); // adds opacity in hex to color\n      contextPattern.fillRect(0, 0, PATTERN.SIZE, PATTERN.SIZE);\n    }\n    return contextPattern?.createPattern(canvasPattern, 'repeat');\n  }\n\n  /**\n   * Generates a step in a random walk between LOW - HIGH given a previous value\n   * data is always in 0-1 data space so its scaleable\n   * data space is converted to screen space inside draw functions\n   * @param prev previous random walk step\n   * @return new random walk step\n   */\n  function randomWalk(prev: number): number {\n    const rand = Math.random() - 0.5; // give it directionality\n    let change = VOLATILITY * rand; // scale by volatity constant\n\n    // ensure directional bounce off approaching edges\n    if (prev < HIGH) {\n      change = Math.abs(change);\n    } else if (prev > LOW) {\n      change = -Math.abs(change);\n    }\n\n    return prev + change;\n  }\n\n  function initData() {\n    const startingData = [];\n    let y = START_Y; // always start towards the bottom of the screen\n    for (let x = 0; x < width + PX_PER_SECOND; x += 1) {\n      y = randomWalk(y);\n      startingData.push(y);\n    }\n    return startingData;\n  }\n\n  function setDataSize() {\n    while (data.length >= width + PX_PER_SECOND) {\n      data.pop();\n    }\n    while (data.length < width + PX_PER_SECOND) {\n      data.push(randomWalk(data[data.length - 1]));\n    }\n  }\n\n  function drawAreaLine(path: number[], context: CanvasRenderingContext2D) {\n    context.beginPath();\n    // start offscreen\n    context.moveTo(-1, height + 1);\n    context.lineTo(-1, height * path[0]);\n\n    // draw the line\n    for (let i = 0; i < path.length; i += 1) {\n      context.lineTo(i, height * path[i]);\n    }\n\n    // close offscreen\n    context.lineTo(width + PX_PER_SECOND, height * path[path.length - 1]);\n    context.lineTo(width + PX_PER_SECOND, height + 1);\n    context.closePath();\n  }\n\n  function drawGridLines(context: CanvasRenderingContext2D) {\n    context.beginPath();\n    // draw verticals\n    for (let x = 1; x < width; x += GRID_SIZE) {\n      context.moveTo(x, 0);\n      context.lineTo(x, height);\n    }\n    // draw horizontals\n    for (let y = 1; y < height; y += GRID_SIZE) {\n      context.moveTo(0, y);\n      context.lineTo(width, y);\n    }\n  }\n\n  /**\n   * Main draw loop for where the animation happens\n   * all the styling happens within drawCanvas from paths generated by other functions\n   * @param timestamp passed in callback from requestAnimationFrame\n   */\n  function drawCanvas(timestamp?: DOMHighResTimeStamp) {\n    lastTimestamp = lastTimestamp ?? timestamp;\n\n    assertNotNull(ctx);\n    // clear the canvas\n    ctx.fillStyle = BACKGROUND;\n    ctx.fillRect(0, 0, width, height);\n\n    drawGridLines(ctx);\n    ctx.lineWidth = 1;\n    ctx.strokeStyle = GRID_COLOR;\n    ctx.stroke();\n\n    // for speeds less then 60 px per second, subpixel motion is required to look smooth\n    const subPixelMotion =\n      ((lastTimestamp ?? 0) - (timestamp ?? 0)) / (1000 / PX_PER_SECOND);\n    ctx.translate(subPixelMotion, 0);\n\n    drawAreaLine(data, ctx);\n    ctx.lineWidth = 2;\n    ctx.strokeStyle = FOREGROUND;\n    ctx.stroke();\n\n    ctx.translate(-subPixelMotion, 0); // we don't pattern to shift however\n    if (pattern != null) {\n      ctx.fillStyle = pattern;\n    }\n    ctx.fill();\n    ctx.setTransform(scale, 0, 0, scale, 0, 0); // reset the translate matrix to normal\n\n    // generate new data points\n    if ((timestamp ?? 0) - (lastTimestamp ?? 0) > 1000 / PX_PER_SECOND) {\n      // number of points to add since last update\n      const numberOfPoints = Math.floor(\n        ((timestamp ?? 0) - (lastTimestamp ?? 0)) / (1000 / PX_PER_SECOND)\n      );\n      for (let i = 0; i < numberOfPoints; i += 1) {\n        data.shift();\n        data.push(randomWalk(data[data.length - 1]));\n      }\n      lastTimestamp = timestamp;\n    }\n\n    if (rAF != null) {\n      cancelAnimationFrame(rAF);\n    }\n    rAF = requestAnimationFrame(drawCanvas);\n  }\n\n  // debounce the resize so its not overly aggresive\n  const debouncedHandleResize = debounce(\n    () => {\n      rAF = requestAnimationFrame(timestamp => {\n        setCanvasSize(); // setCanvas can cause lag if not debounced\n\n        // fill or remove extra data points\n        setDataSize();\n\n        // opening devtools triggers a blur then resize,\n        // need to reset shade as we are restarting animation\n        setShade(false);\n        drawCanvas(timestamp);\n      });\n    },\n    RESIZE_DEBOUNCE,\n    { leading: true } // resize immediately, once.\n  );\n\n  function pauseAnimation() {\n    // pause animation when browser window is blurred to conserve CPU usage\n    setShade(true);\n    if (rAF != null) {\n      cancelAnimationFrame(rAF);\n    }\n    rAF = null;\n    lastTimestamp = null;\n  }\n\n  // when timeout expires, pause animation\n  const resetIdleTimeout = debounce(() => {\n    pauseAnimation();\n  }, INTERACTION_TIMEOUT);\n\n  function startAnimation() {\n    // can fire multiple times, check if rAF is null first\n    // restart animation loop, and fade back in\n    if (rAF == null) {\n      setShade(false);\n      setCanvasSize();\n      setDataSize();\n      rAF = requestAnimationFrame(drawCanvas);\n    }\n    resetIdleTimeout();\n  }\n\n  function handleActivity() {\n    if (document.hasFocus()) {\n      // only if document has focus (mousemove can fire on non-focused tabs)\n      startAnimation();\n    }\n  }\n\n  function handleResize() {\n    // pause and debounce animation during resize for better resizing performance\n    if (rAF != null) {\n      cancelAnimationFrame(rAF);\n    }\n    resetIdleTimeout(); // treat resizing as a form of activity\n    debouncedHandleResize();\n  }\n\n  // react mount/unmount hooks\n  useEffect(() => {\n    ctx = canvas.current?.getContext('2d', { alpha: false });\n    setCanvasSize();\n    data = initData();\n    pattern = createPatternFill();\n\n    // start draw loop\n    drawCanvas();\n    resetIdleTimeout();\n\n    window.addEventListener('resize', handleResize);\n\n    window.addEventListener('focus', startAnimation);\n    window.addEventListener('blur', pauseAnimation);\n\n    // don't burn cpu if the user is \"idle\", start a timer that resets\n    // on any user activity, and on timeout expiry pause the animation\n    window.addEventListener('mousemove', handleActivity);\n    window.addEventListener('keydown', handleActivity);\n\n    return () => {\n      if (rAF != null) {\n        cancelAnimationFrame(rAF);\n      }\n      window.removeEventListener('resize', handleResize);\n      window.removeEventListener('focus', startAnimation);\n      window.removeEventListener('blur', pauseAnimation);\n\n      window.removeEventListener('mousemove', handleActivity);\n      window.removeEventListener('keydown', handleActivity);\n\n      resetIdleTimeout.cancel();\n      debouncedHandleResize.cancel();\n    };\n  }, []);\n\n  return (\n    <div className=\"random-area-plot-animation-container\" ref={container}>\n      <canvas ref={canvas} className={shade ? 'shade' : ''} />\n    </div>\n  );\n});\n\nexport default RandomAreaPlotAnimation;\n"],"mappings":"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"}

package/dist/SearchInput.css

@@ -0,0 +1,43 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.search-group {
+  position: relative;
+}
+.search-group .form-control {
+  padding-right: 1.75rem;
+}
+.search-group .search-icon {
+  pointer-events: none;
+  position: absolute;
+  right: 0.5rem;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.search-group ::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 16px;
+  width: 16px;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c0bfbf' d='M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z'/%3E%3C/svg%3E");
+  transition: background-image 0.15s;
+}
+.search-group ::-webkit-search-cancel-button:hover {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fcfcfa' d='M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z' /%3E%3C/svg%3E");
+}
+.search-group .search-match {
+  pointer-events: none;
+  position: absolute;
+  right: 3rem;
+  top: 15%;
+  bottom: 15%;
+  height: 70%;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  border-radius: 1rem;
+  background-color: rgba(240, 240, 238, 0.25);
+}
+
+/*# sourceMappingURL=SearchInput.css.map */

package/dist/SearchInput.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/SearchInput.scss","../scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA,OCTO;EDUP;EACA;EACA;EACA;EACA;;AAGF;EAIE;EACA;EACA;EACA;EAEA;EAKA;;AACA;EACE;;AAQJ;EACE;EACA;EACA,OCzCO;ED0CP;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"SearchInput.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.search-group {\n  position: relative;\n\n  .form-control {\n    padding-right: 1.75rem; // leave space for search icon and cancel button from browser\n  }\n\n  .search-icon {\n    pointer-events: none;\n    position: absolute;\n    right: $spacer-2;\n    top: 0;\n    bottom: 0;\n    height: 100%;\n    display: flex;\n    align-items: center;\n  }\n\n  ::-webkit-search-cancel-button {\n    $close-path: 'M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z';\n\n    // Need to specify -webkit-appearance: none for Chrome\n    -webkit-appearance: none;\n    height: 16px;\n    width: 16px;\n    background-repeat: no-repeat;\n    // vsClose icon\n    background-image: str-replace(\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$gray-300}' d='#{$close-path}'/%3E%3C/svg%3E\"),\n      '#',\n      '%23'\n    );\n    transition: background-image $transition;\n    &:hover {\n      background-image: str-replace(\n        url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$gray-100}' d='#{$close-path}' /%3E%3C/svg%3E\"),\n        '#',\n        '%23'\n      );\n    }\n  }\n\n  .search-match {\n    pointer-events: none;\n    position: absolute;\n    right: $spacer-5;\n    top: 15%;\n    bottom: 15%;\n    height: 70%;\n    display: flex;\n    align-items: center;\n    padding: 0 $spacer-2;\n    border-radius: 1rem;\n    background-color: rgba($white, 0.25);\n  }\n}\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n"]}

package/dist/SearchInput.js

@@ -0,0 +1,66 @@
+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); }
+import React, { PureComponent } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { vsSearch } from '@deephaven/icons';
+import classNames from 'classnames';
+import "./SearchInput.css";
+class SearchInput extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "inputField", void 0);
+    this.inputField = /*#__PURE__*/React.createRef();
+  }
+  focus() {
+    var _this$inputField$curr;
+    (_this$inputField$curr = this.inputField.current) === null || _this$inputField$curr === void 0 ? void 0 : _this$inputField$curr.focus();
+  }
+  render() {
+    var {
+      value,
+      placeholder,
+      onBlur,
+      onChange,
+      className,
+      disabled,
+      matchCount,
+      id,
+      onKeyDown,
+      'data-testid': dataTestId
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('search-group', className)
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "search",
+      value: value,
+      onBlur: onBlur,
+      onChange: onChange,
+      onKeyDown: onKeyDown,
+      className: "form-control",
+      disabled: disabled,
+      placeholder: placeholder,
+      ref: this.inputField,
+      id: id,
+      "data-testid": dataTestId
+    }), matchCount != null && /*#__PURE__*/React.createElement("span", {
+      className: "search-match"
+    }, matchCount), /*#__PURE__*/React.createElement("span", {
+      className: "search-icon"
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsSearch
+    })));
+  }
+}
+_defineProperty(SearchInput, "defaultProps", {
+  placeholder: 'Search',
+  className: '',
+  matchCount: null,
+  onKeyDown() {
+    // no-op
+  },
+  id: '',
+  'data-testid': undefined
+});
+export default SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/dist/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","SearchInput","constructor","props","inputField","createRef","focus","current","render","value","placeholder","onBlur","onChange","className","disabled","matchCount","id","onKeyDown","dataTestId","undefined"],"sources":["../src/SearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport './SearchInput.scss';\n\ninterface SearchInputProps {\n  value: string;\n  placeholder: string;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  className: string;\n  disabled?: boolean;\n  matchCount: number;\n  id: string;\n  'data-testid'?: string;\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n  static defaultProps = {\n    placeholder: 'Search',\n    className: '',\n    matchCount: null,\n    onKeyDown(): void {\n      // no-op\n    },\n    id: '',\n    'data-testid': undefined,\n  };\n\n  constructor(props: SearchInputProps) {\n    super(props);\n    this.inputField = React.createRef();\n  }\n\n  inputField: React.RefObject<HTMLInputElement>;\n\n  focus(): void {\n    this.inputField.current?.focus();\n  }\n\n  render(): JSX.Element {\n    const {\n      value,\n      placeholder,\n      onBlur,\n      onChange,\n      className,\n      disabled,\n      matchCount,\n      id,\n      onKeyDown,\n      'data-testid': dataTestId,\n    } = this.props;\n    return (\n      <div className={classNames('search-group', className)}>\n        <input\n          type=\"search\"\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          className=\"form-control\"\n          disabled={disabled}\n          placeholder={placeholder}\n          ref={this.inputField}\n          id={id}\n          data-testid={dataTestId}\n        />\n        {matchCount != null && (\n          <span className=\"search-match\">{matchCount}</span>\n        )}\n        <span className=\"search-icon\">\n          <FontAwesomeIcon icon={vsSearch} />\n        </span>\n      </div>\n    );\n  }\n}\n\nexport default SearchInput;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,OAAOC,UAAU,MAAM,YAAY;AAAC;AAgBpC,MAAMC,WAAW,SAASJ,aAAa,CAAmB;EAYxDK,WAAW,CAACC,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,CAAC;IAAC;IACb,IAAI,CAACC,UAAU,gBAAGR,KAAK,CAACS,SAAS,EAAE;EACrC;EAIAC,KAAK,GAAS;IAAA;IACZ,6BAAI,CAACF,UAAU,CAACG,OAAO,0DAAvB,sBAAyBD,KAAK,EAAE;EAClC;EAEAE,MAAM,GAAgB;IACpB,IAAM;MACJC,KAAK;MACLC,WAAW;MACXC,MAAM;MACNC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MACRC,UAAU;MACVC,EAAE;MACFC,SAAS;MACT,aAAa,EAAEC;IACjB,CAAC,GAAG,IAAI,CAACf,KAAK;IACd,oBACE;MAAK,SAAS,EAAEH,UAAU,CAAC,cAAc,EAAEa,SAAS;IAAE,gBACpD;MACE,IAAI,EAAC,QAAQ;MACb,KAAK,EAAEJ,KAAM;MACb,MAAM,EAAEE,MAAO;MACf,QAAQ,EAAEC,QAAS;MACnB,SAAS,EAAEK,SAAU;MACrB,SAAS,EAAC,cAAc;MACxB,QAAQ,EAAEH,QAAS;MACnB,WAAW,EAAEJ,WAAY;MACzB,GAAG,EAAE,IAAI,CAACN,UAAW;MACrB,EAAE,EAAEY,EAAG;MACP,eAAaE;IAAW,EACxB,EACDH,UAAU,IAAI,IAAI,iBACjB;MAAM,SAAS,EAAC;IAAc,GAAEA,UAAU,CAC3C,eACD;MAAM,SAAS,EAAC;IAAa,gBAC3B,oBAAC,eAAe;MAAC,IAAI,EAAEhB;IAAS,EAAG,CAC9B,CACH;EAEV;AACF;AAAC,gBA5DKE,WAAW,kBACO;EACpBS,WAAW,EAAE,QAAQ;EACrBG,SAAS,EAAE,EAAE;EACbE,UAAU,EAAE,IAAI;EAChBE,SAAS,GAAS;IAChB;EAAA,CACD;EACDD,EAAE,EAAE,EAAE;EACN,aAAa,EAAEG;AACjB,CAAC;AAoDH,eAAelB,WAAW"}

package/dist/Select.js

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+function Select(_ref) {
+  var {
+    children,
+    onBlur,
+    onChange,
+    className,
+    defaultValue,
+    name,
+    value,
+    disabled,
+    'data-testid': dataTestId
+  } = _ref;
+  var handleChange = useCallback(event => {
+    onChange(event.target.value);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement("select", {
+    className: classNames('custom-select', className),
+    onBlur: onBlur,
+    onChange: handleChange,
+    defaultValue: defaultValue,
+    value: value,
+    name: name,
+    disabled: disabled,
+    "data-testid": dataTestId
+  }, children);
+}
+export default Select;
+//# sourceMappingURL=Select.js.map

package/dist/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["React","useCallback","classNames","Select","children","onBlur","onChange","className","defaultValue","name","value","disabled","dataTestId","handleChange","event","target"],"sources":["../src/Select.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport classNames from 'classnames';\n\nexport type SelectProps = {\n  children: React.ReactNode;\n  onBlur?: React.FocusEventHandler<HTMLSelectElement>;\n  onChange: (value: string) => void;\n  className?: string;\n  defaultValue?: string;\n  name?: string;\n  value?: string;\n  disabled?: boolean;\n  'data-testid'?: string;\n};\n\nfunction Select({\n  children,\n  onBlur,\n  onChange,\n  className,\n  defaultValue,\n  name,\n  value,\n  disabled,\n  'data-testid': dataTestId,\n}: SelectProps): JSX.Element {\n  const handleChange = useCallback(\n    event => {\n      onChange(event.target.value);\n    },\n    [onChange]\n  );\n\n  return (\n    <select\n      className={classNames('custom-select', className)}\n      onBlur={onBlur}\n      onChange={handleChange}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      disabled={disabled}\n      data-testid={dataTestId}\n    >\n      {children}\n    </select>\n  );\n}\n\nexport default Select;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,UAAU,MAAM,YAAY;AAcnC,SAASC,MAAM,OAUc;EAAA,IAVb;IACdC,QAAQ;IACRC,MAAM;IACNC,QAAQ;IACRC,SAAS;IACTC,YAAY;IACZC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACR,aAAa,EAAEC;EACJ,CAAC;EACZ,IAAMC,YAAY,GAAGZ,WAAW,CAC9Ba,KAAK,IAAI;IACPR,QAAQ,CAACQ,KAAK,CAACC,MAAM,CAACL,KAAK,CAAC;EAC9B,CAAC,EACD,CAACJ,QAAQ,CAAC,CACX;EAED,oBACE;IACE,SAAS,EAAEJ,UAAU,CAAC,eAAe,EAAEK,SAAS,CAAE;IAClD,MAAM,EAAEF,MAAO;IACf,QAAQ,EAAEQ,YAAa;IACvB,YAAY,EAAEL,YAAa;IAC3B,KAAK,EAAEE,KAAM;IACb,IAAI,EAAED,IAAK;IACX,QAAQ,EAAEE,QAAS;IACnB,eAAaC;EAAW,GAEvBR,QAAQ,CACF;AAEb;AAEA,eAAeD,MAAM"}

package/dist/SelectValueList.css

@@ -0,0 +1,38 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.select-value-list-scroll-pane {
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: 1px solid #929192;
+  border-radius: 4px;
+  padding: 0.375rem 0 0.375rem;
+}
+.select-value-list-scroll-pane.is-invalid {
+  border-color: rgba(249, 93, 132, 0.85);
+}
+
+.select-value-list {
+  position: relative;
+}
+.select-value-list .select-value-list-content {
+  width: 100%;
+  margin: 0;
+  list-style-type: none;
+  padding: 0;
+}
+.select-value-list .select-value-list-content li {
+  width: 100%;
+}
+.select-value-list .select-value-list-content .custom-control {
+  margin: 0;
+  display: flex;
+}
+.select-value-list .select-value-list-content .custom-control:hover {
+  background: #5b5a5c;
+}
+.select-value-list .select-value-list-content .custom-control .custom-control-label {
+  margin-left: 0.75rem;
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+/*# sourceMappingURL=SelectValueList.css.map */