@deephaven/components 0.55.0 → 0.55.1-alpha-theme-spectrum.17

package/dist/RandomAreaPlotAnimation.js

@@ -1,31 +1,44 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/display-name */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import debounce from 'lodash.debounce';
 import { assertNotNull } from '@deephaven/utils';
 import "./RandomAreaPlotAnimation.css";
-import ThemeExport from "./ThemeExport.js";
+import { resolveCssVariablesInRecord, useTheme } from "./theme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 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
+  DOT_SIZE: 2
 };
 var PX_PER_SECOND = 18;
 var RESIZE_DEBOUNCE = 250;
 var INTERACTION_TIMEOUT = 60 * 1000;
+var THEME_COLOR_VARIABLES = {
+  background: 'var(--dh-color-random-area-plot-animation-bg)',
+  foregroundFill: 'var(--dh-color-random-area-plot-animation-fg-fill)',
+  foregroundStroke: 'var(--dh-color-random-area-plot-animation-fg-stroke)',
+  gridColor: 'var(--dh-color-random-area-plot-animation-grid)'
+};
+
+/**
+ * Resolve theme colors needed for our animation.
+ */
+function getRandomAreaPlotAnimationThemeColors() {
+  return resolveCssVariablesInRecord(THEME_COLOR_VARIABLES);
+}
 
 // Draw a background canvas, paint it with a fun chart looking animation
 var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
+  var {
+    activeThemes
+  } = useTheme();
+  var themeColors = useMemo(() => activeThemes == null ? null : getRandomAreaPlotAnimationThemeColors(), [activeThemes]);
   var canvas = useRef(null);
   var container = useRef(null);
   var [shade, setShade] = useState(false);
@@ -55,6 +68,14 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
 
   // Returns the background fill create offscreen as pattern
   function createPatternFill() {
+    if (themeColors == null) {
+      return null;
+    }
+    var {
+      foregroundFill,
+      foregroundStroke
+    } = themeColors;
+
     // create the off-screen canvas
     var canvasPattern = document.createElement('canvas');
     canvasPattern.width = PATTERN.SIZE;
@@ -63,11 +84,11 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
 
     // draw pattern to off-screen context
     if (contextPattern != null) {
-      contextPattern.fillStyle = FOREGROUND;
+      contextPattern.fillStyle = foregroundStroke;
       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.fillStyle = foregroundFill;
       contextPattern.fillRect(0, 0, PATTERN.SIZE, PATTERN.SIZE);
     }
     return contextPattern === null || contextPattern === void 0 ? void 0 : contextPattern.createPattern(canvasPattern, 'repeat');
@@ -146,14 +167,22 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
    */
   function drawCanvas(timestamp) {
     var _lastTimestamp, _lastTimestamp2, _lastTimestamp3;
+    if (themeColors == null) {
+      return;
+    }
     lastTimestamp = (_lastTimestamp = lastTimestamp) !== null && _lastTimestamp !== void 0 ? _lastTimestamp : timestamp;
+    var {
+      background,
+      foregroundStroke,
+      gridColor
+    } = themeColors;
     assertNotNull(ctx);
     // clear the canvas
-    ctx.fillStyle = BACKGROUND;
+    ctx.fillStyle = background;
     ctx.fillRect(0, 0, width, height);
     drawGridLines(ctx);
     ctx.lineWidth = 1;
-    ctx.strokeStyle = GRID_COLOR;
+    ctx.strokeStyle = gridColor;
     ctx.stroke();
 
     // for speeds less then 60 px per second, subpixel motion is required to look smooth
@@ -161,7 +190,7 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
     ctx.translate(subPixelMotion, 0);
     drawAreaLine(data, ctx);
     ctx.lineWidth = 2;
-    ctx.strokeStyle = FOREGROUND;
+    ctx.strokeStyle = foregroundStroke;
     ctx.stroke();
     ctx.translate(-subPixelMotion, 0); // we don't pattern to shift however
     if (pattern != null) {
@@ -278,8 +307,8 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
       resetIdleTimeout.cancel();
       debouncedHandleResize.cancel();
     };
-  }, []);
-  return /*#__PURE__*/_jsx("div", {
+  }, [themeColors]);
+  return themeColors && /*#__PURE__*/_jsx("div", {
     className: "random-area-plot-animation-container",
     ref: container,
     children: /*#__PURE__*/_jsx("canvas", {

package/dist/RandomAreaPlotAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"RandomAreaPlotAnimation.js","names":["React","useEffect","useState","useRef","debounce","assertNotNull","ThemeExport","jsx","_jsx","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","_ctx","current","offsetWidth","offsetHeight","style","concat","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","_lastTimestamp","_lastTimestamp2","_lastTimestamp3","lineWidth","strokeStyle","stroke","subPixelMotion","translate","fill","setTransform","_lastTimestamp4","numberOfPoints","floor","shift","cancelAnimationFrame","requestAnimationFrame","debouncedHandleResize","leading","pauseAnimation","resetIdleTimeout","startAnimation","handleActivity","hasFocus","handleResize","_canvas$current","alpha","addEventListener","removeEventListener","cancel","className","ref","children"],"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(): void {\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(): CanvasPattern | null | undefined {\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(): number[] {\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(): void {\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(\n    path: number[],\n    context: CanvasRenderingContext2D\n  ): void {\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): void {\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): void {\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(): void {\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(): void {\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(): void {\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(): void {\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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"}
+{"version":3,"file":"RandomAreaPlotAnimation.js","names":["React","useEffect","useState","useRef","useMemo","debounce","assertNotNull","resolveCssVariablesInRecord","useTheme","jsx","_jsx","VOLATILITY","LOW","HIGH","START_Y","GRID_SIZE","PATTERN","SIZE","DOT_SIZE","PX_PER_SECOND","RESIZE_DEBOUNCE","INTERACTION_TIMEOUT","THEME_COLOR_VARIABLES","background","foregroundFill","foregroundStroke","gridColor","getRandomAreaPlotAnimationThemeColors","RandomAreaPlotAnimation","memo","activeThemes","themeColors","canvas","container","shade","setShade","scale","window","devicePixelRatio","ctx","pattern","width","height","rAF","lastTimestamp","data","setCanvasSize","_ctx","current","offsetWidth","offsetHeight","style","concat","createPatternFill","canvasPattern","document","createElement","contextPattern","getContext","fillStyle","fillRect","createPattern","randomWalk","prev","rand","Math","random","change","abs","initData","startingData","y","x","push","setDataSize","length","pop","drawAreaLine","path","context","beginPath","moveTo","lineTo","i","closePath","drawGridLines","drawCanvas","timestamp","_lastTimestamp","_lastTimestamp2","_lastTimestamp3","lineWidth","strokeStyle","stroke","subPixelMotion","translate","fill","setTransform","_lastTimestamp4","numberOfPoints","floor","shift","cancelAnimationFrame","requestAnimationFrame","debouncedHandleResize","leading","pauseAnimation","resetIdleTimeout","startAnimation","handleActivity","hasFocus","handleResize","_canvas$current","alpha","addEventListener","removeEventListener","cancel","className","ref","children"],"sources":["../src/RandomAreaPlotAnimation.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/display-name */\n\nimport React, { useEffect, useState, useRef, useMemo } from 'react';\nimport debounce from 'lodash.debounce';\nimport { assertNotNull } from '@deephaven/utils';\nimport './RandomAreaPlotAnimation.scss';\nimport { resolveCssVariablesInRecord, useTheme } from './theme';\n\nconst VOLATILITY = 0.025; // how spikey the data gets\nconst LOW = 0.9;\nconst HIGH = 0.1;\nconst START_Y = 0.618;\nconst GRID_SIZE = 80;\nconst PATTERN = { SIZE: 8, DOT_SIZE: 2 };\nconst PX_PER_SECOND = 18;\nconst RESIZE_DEBOUNCE = 250;\nconst INTERACTION_TIMEOUT = 60 * 1000;\n\ninterface ThemeColors {\n  background: string;\n  foregroundFill: string;\n  foregroundStroke: string;\n  gridColor: string;\n}\n\nconst THEME_COLOR_VARIABLES = {\n  background: 'var(--dh-color-random-area-plot-animation-bg)',\n  foregroundFill: 'var(--dh-color-random-area-plot-animation-fg-fill)',\n  foregroundStroke: 'var(--dh-color-random-area-plot-animation-fg-stroke)',\n  gridColor: 'var(--dh-color-random-area-plot-animation-grid)',\n} satisfies ThemeColors;\n\n/**\n * Resolve theme colors needed for our animation.\n */\nfunction getRandomAreaPlotAnimationThemeColors(): ThemeColors {\n  return resolveCssVariablesInRecord(THEME_COLOR_VARIABLES);\n}\n\n// Draw a background canvas, paint it with a fun chart looking animation\nconst RandomAreaPlotAnimation = React.memo(() => {\n  const { activeThemes } = useTheme();\n\n  const themeColors = useMemo(\n    () =>\n      activeThemes == null ? null : getRandomAreaPlotAnimationThemeColors(),\n    [activeThemes]\n  );\n\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(): void {\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(): CanvasPattern | null | undefined {\n    if (themeColors == null) {\n      return null;\n    }\n\n    const { foregroundFill, foregroundStroke } = themeColors;\n\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 = foregroundStroke;\n      contextPattern.fillRect(0, 0, PATTERN.DOT_SIZE, PATTERN.DOT_SIZE);\n\n      // add an overlay fill\n      contextPattern.fillStyle = foregroundFill;\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(): number[] {\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(): void {\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(\n    path: number[],\n    context: CanvasRenderingContext2D\n  ): void {\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): void {\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): void {\n    if (themeColors == null) {\n      return;\n    }\n\n    lastTimestamp = lastTimestamp ?? timestamp;\n\n    const { background, foregroundStroke, gridColor } = themeColors;\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 = gridColor;\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 = foregroundStroke;\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(): void {\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(): void {\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(): void {\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(): void {\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  }, [themeColors]);\n\n  return (\n    themeColors && (\n      <div className=\"random-area-plot-animation-container\" ref={container}>\n        <canvas ref={canvas} className={shade ? 'shade' : ''} />\n      </div>\n    )\n  );\n});\n\nexport default RandomAreaPlotAnimation;\n"],"mappings":"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"}

package/dist/SearchInput.css

@@ -6,6 +6,7 @@
   padding-right: 1.75rem;
 }
 .search-group .search-icon {
+  color: var(--dh-color-search-icon);
   pointer-events: none;
   position: absolute;
   right: 0.5rem;
@@ -16,28 +17,43 @@
   align-items: center;
 }
 .search-group ::-webkit-search-cancel-button {
+  background-size: 16px;
+  background-color: var(--dh-color-fg);
+  mask-image: var(--dh-svg-icon-search-cancel);
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  mask-size: 16px;
   -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;
+  opacity: 0.4;
+  transition: opacity 300ms ease;
 }
 .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");
+  opacity: 1;
 }
-.search-group .search-match {
-  pointer-events: none;
+.search-group .search-change-selection {
   position: absolute;
-  right: 3rem;
+  right: 0.25rem;
   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);
+}
+.search-group .search-change-button {
+  background: none;
+  border: none;
+  padding: 1px 2px;
+}
+.search-group .search-change-text {
+  background-color: hsla(var(--dh-color-white-hsl), 0.2);
+  border-radius: 10px;
+  padding: 1px 5px;
+}
+.search-group .search-match {
+  background-color: hsla(var(--dh-color-white-hsl), 0.2);
+  border-radius: 10px;
+  padding: 1px 5px;
+  margin: 0 5px;
 }
 
 /*# sourceMappingURL=SearchInput.css.map */

package/dist/SearchInput.css.map

@@ -1 +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:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    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"]}
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/SearchInput.scss","../scss/new_variables.scss","../scss/util.scss"],"names":[],"mappings":"AAAA;ACGA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA,OCTO;EDUP;EACA;EACA;EACA;EACA;;AAGF;EEpBA,iBFqBc;EEpBd;EACA,YFoB2B;EEnB3B;EACA;EACA,WFgBc;EAIZ;EACA,QALY;EAMZ,OANY;EAOZ;EACA;;AACA;EACE;;AAIJ;EACE;EACA,OCnCO;EDoCP;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;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@import '../scss/util.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    color: var(--dh-color-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    $icon-size: 16px;\n    @include icon-image-mask(var(--dh-svg-icon-search-cancel), $icon-size);\n\n    // Need to specify -webkit-appearance: none for Chrome\n    -webkit-appearance: none;\n    height: $icon-size;\n    width: $icon-size;\n    opacity: 0.4;\n    transition: opacity 300ms ease;\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .search-change-selection {\n    position: absolute;\n    right: $spacer-1;\n    top: 15%;\n    bottom: 15%;\n    height: 70%;\n  }\n\n  .search-change-button {\n    background: none;\n    border: none;\n    padding: 1px 2px;\n  }\n\n  .search-change-text {\n    background-color: hsla(var(--dh-color-white-hsl), 0.2);\n    border-radius: 10px;\n    padding: 1px 5px;\n  }\n\n  .search-match {\n    background-color: hsla(var(--dh-color-white-hsl), 0.2);\n    border-radius: 10px;\n    padding: 1px 5px;\n    margin: 0 5px;\n  }\n}\n","@use 'sass:math';\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:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    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@function hsla-opacity($semantic-name, $i: 100) {\n  @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));\n}\n\n@function accent-opacity($i: 100) {\n  @return hsla-opacity('accent', $i);\n}\n\n@function background-opacity($i: 100) {\n  @return hsla-opacity('bg', $i);\n}\n\n@function foreground-opacity($i: 100) {\n  @return hsla-opacity('fg', $i);\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","// Setup a mask-image for an inline svg\n@mixin icon-image-mask($mask-image, $size: 16px) {\n  background-size: $size;\n  background-color: var(--dh-color-fg);\n  mask-image: $mask-image;\n  mask-position: center center;\n  mask-repeat: no-repeat;\n  mask-size: $size;\n}\n\n// Caret icon for pickers, dropdowns, select, etc.\n@mixin caret-icon() {\n  $width: 10px;\n  $height: 6px;\n  @include icon-image-mask(var(--dh-svg-icon-selector-caret), $width $height);\n\n  background-color: var(--dh-color-selector-fg);\n  width: $width;\n  height: $height;\n}\n\n/// Utilty for increasing specificity by repeating a given selector n number of\n/// times.\n///\n/// It should work for selectors that can be concatenated without delimiters\n/// such as '.some-selector.some-selector', '#some-id#some-id', or '&&'. A\n/// case where it would not work would be with an element selector e.g. 'divdiv'.\n///\n/// Example usage:\n///\n/// #{multiply-specificity-n('.some-selector', 2)} {\n/// }\n///\n/// would produce\n///\n/// .some-selector.some-selector {\n/// }\n///\n/// @param {string} $selector the selector to duplicate\n/// @param {number} $n number of times to duplicate\n/// @return {string} duplicated selector\n@function multiply-specificity-n($selector, $n) {\n  $result: $selector;\n  @for $i from 2 through $n {\n    $result: selector-append($result, $selector);\n  }\n\n  @return $result;\n}\n\n// Linear gradient with same start and end color. Useful for certain scenarios\n// where we need a solid background image layer.\n@function solid-gradient($color) {\n  @return linear-gradient(0deg, $color, $color);\n}\n"]}

package/dist/SearchInput.d.ts

@@ -11,6 +11,10 @@ interface SearchInputProps {
     matchCount: number;
     id: string;
     'data-testid'?: string;
+    cursor?: {
+        index: number | undefined;
+        next: (direction: 'forward' | 'back') => void;
+    };
 }
 declare class SearchInput extends PureComponent<SearchInputProps> {
     static defaultProps: {
@@ -20,10 +24,15 @@ declare class SearchInput extends PureComponent<SearchInputProps> {
         onKeyDown(): void;
         id: string;
         'data-testid': undefined;
+        cursor: undefined;
     };
     constructor(props: SearchInputProps);
-    inputField: React.RefObject<HTMLInputElement>;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
     focus(): void;
+    inputField: React.RefObject<HTMLInputElement>;
+    searchChangeSelection: React.RefObject<HTMLDivElement>;
+    setInputPaddingRight(): void;
     render(): JSX.Element;
 }
 export default SearchInput;

package/dist/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../src/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,oBAAoB,CAAC;AAE5B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,cAAM,WAAY,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IACvD,MAAM,CAAC,YAAY;;;;qBAIJ,IAAI;;;MAKjB;gBAEU,KAAK,EAAE,gBAAgB;IAKnC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAE9C,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,GAAG,CAAC,OAAO;CAqCtB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../src/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK7C,OAAO,oBAAoB,CAAC;AAI5B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAC1B,IAAI,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,KAAK,IAAI,CAAC;KAC/C,CAAC;CACH;AAED,cAAM,WAAY,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IACvD,MAAM,CAAC,YAAY;;;;qBAIJ,IAAI;;;;MAMjB;gBAEU,KAAK,EAAE,gBAAgB;IAMnC,iBAAiB,IAAI,IAAI;IAIzB,kBAAkB,IAAI,IAAI;IAI1B,KAAK,IAAI,IAAI;IAIb,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAE9C,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAEvD,oBAAoB,IAAI,IAAI;IAS5B,MAAM,IAAI,GAAG,CAAC,OAAO;CAgGtB;AAED,eAAe,WAAW,CAAC"}

package/dist/SearchInput.js

@@ -3,21 +3,41 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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 { vsArrowLeft, vsArrowRight, vsSearch } from '@deephaven/icons';
 import classNames from 'classnames';
+import Button from "./Button.js";
 import "./SearchInput.css";
+import { GLOBAL_SHORTCUTS } from "./shortcuts/index.js";
+import { ContextActions } from "./context-actions/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 class SearchInput extends PureComponent {
   constructor(props) {
     super(props);
     _defineProperty(this, "inputField", void 0);
+    _defineProperty(this, "searchChangeSelection", void 0);
     this.inputField = /*#__PURE__*/React.createRef();
+    this.searchChangeSelection = /*#__PURE__*/React.createRef();
+  }
+  componentDidMount() {
+    this.setInputPaddingRight();
+  }
+  componentDidUpdate() {
+    this.setInputPaddingRight();
   }
   focus() {
     var _this$inputField$curr;
     (_this$inputField$curr = this.inputField.current) === null || _this$inputField$curr === void 0 ? void 0 : _this$inputField$curr.focus();
   }
+  setInputPaddingRight() {
+    var inputField = this.inputField.current;
+    var searchChangeSelection = this.searchChangeSelection.current;
+    if (inputField && searchChangeSelection) {
+      var paddingRight = searchChangeSelection.getBoundingClientRect().width;
+      inputField.style.paddingRight = "".concat(paddingRight, "px");
+    }
+  }
   render() {
     var {
       value,
@@ -29,8 +49,48 @@ class SearchInput extends PureComponent {
       matchCount,
       id,
       onKeyDown,
-      'data-testid': dataTestId
+      'data-testid': dataTestId,
+      cursor
     } = this.props;
+    var matchCountSection;
+    var contextActions = [{
+      action: () => cursor === null || cursor === void 0 ? void 0 : cursor.next('forward'),
+      shortcut: GLOBAL_SHORTCUTS.NEXT
+    }, {
+      action: () => cursor === null || cursor === void 0 ? void 0 : cursor.next('back'),
+      shortcut: GLOBAL_SHORTCUTS.PREVIOUS
+    }];
+    if (cursor && matchCount > 1) {
+      matchCountSection = /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          kind: "ghost",
+          className: "search-change-button",
+          type: "button",
+          onClick: () => {
+            cursor.next('back');
+          },
+          icon: vsArrowLeft,
+          tooltip: "Previous match (".concat(GLOBAL_SHORTCUTS.PREVIOUS.getDisplayText(), ")")
+        }), /*#__PURE__*/_jsxs("span", {
+          className: "search-change-text",
+          children: [cursor.index !== undefined && "".concat(cursor.index + 1, " of "), matchCount]
+        }), /*#__PURE__*/_jsx(Button, {
+          kind: "ghost",
+          className: "search-change-button",
+          type: "button",
+          onClick: () => {
+            cursor.next('forward');
+          },
+          icon: vsArrowRight,
+          tooltip: "Next match (".concat(GLOBAL_SHORTCUTS.NEXT.getDisplayText(), ")")
+        })]
+      });
+    } else {
+      matchCountSection = matchCount > 0 && /*#__PURE__*/_jsx("span", {
+        className: "search-match",
+        children: matchCount
+      });
+    }
     return /*#__PURE__*/_jsxs("div", {
       className: classNames('search-group', className),
       children: [/*#__PURE__*/_jsx("input", {
@@ -45,10 +105,15 @@ class SearchInput extends PureComponent {
         ref: this.inputField,
         id: id,
         "data-testid": dataTestId
-      }), matchCount != null && /*#__PURE__*/_jsx("span", {
-        className: "search-match",
-        children: matchCount
-      }), /*#__PURE__*/_jsx("span", {
+      }), matchCount != null ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "search-change-selection",
+          ref: this.searchChangeSelection,
+          children: matchCountSection
+        }), /*#__PURE__*/_jsx(ContextActions, {
+          actions: contextActions
+        })]
+      }) : /*#__PURE__*/_jsx("span", {
         className: "search-icon",
         children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
           icon: vsSearch
@@ -65,7 +130,8 @@ _defineProperty(SearchInput, "defaultProps", {
     // no-op
   },
   id: '',
-  'data-testid': undefined
+  'data-testid': undefined,
+  cursor: undefined
 });
 export default SearchInput;
 //# sourceMappingURL=SearchInput.js.map

package/dist/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","jsx","_jsx","jsxs","_jsxs","SearchInput","constructor","props","_defineProperty","inputField","createRef","focus","_this$inputField$curr","current","render","value","placeholder","onBlur","onChange","className","disabled","matchCount","id","onKeyDown","dataTestId","children","type","ref","icon","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;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAgBpC,MAAMC,WAAW,SAASR,aAAa,CAAmB;EAYxDS,WAAWA,CAACC,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA;IACb,IAAI,CAACC,UAAU,gBAAGb,KAAK,CAACc,SAAS,CAAC,CAAC;EACrC;EAIAC,KAAKA,CAAA,EAAS;IAAA,IAAAC,qBAAA;IACZ,CAAAA,qBAAA,OAAI,CAACH,UAAU,CAACI,OAAO,cAAAD,qBAAA,uBAAvBA,qBAAA,CAAyBD,KAAK,CAAC,CAAC;EAClC;EAEAG,MAAMA,CAAA,EAAgB;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,CAACjB,KAAK;IACd,oBACEH,KAAA;MAAKe,SAAS,EAAEnB,UAAU,CAAC,cAAc,EAAEmB,SAAS,CAAE;MAAAM,QAAA,gBACpDvB,IAAA;QACEwB,IAAI,EAAC,QAAQ;QACbX,KAAK,EAAEA,KAAM;QACbE,MAAM,EAAEA,MAAO;QACfC,QAAQ,EAAEA,QAAS;QACnBK,SAAS,EAAEA,SAAU;QACrBJ,SAAS,EAAC,cAAc;QACxBC,QAAQ,EAAEA,QAAS;QACnBJ,WAAW,EAAEA,WAAY;QACzBW,GAAG,EAAE,IAAI,CAAClB,UAAW;QACrBa,EAAE,EAAEA,EAAG;QACP,eAAaE;MAAW,CACzB,CAAC,EACDH,UAAU,IAAI,IAAI,iBACjBnB,IAAA;QAAMiB,SAAS,EAAC,cAAc;QAAAM,QAAA,EAAEJ;MAAU,CAAO,CAClD,eACDnB,IAAA;QAAMiB,SAAS,EAAC,aAAa;QAAAM,QAAA,eAC3BvB,IAAA,CAACJ,eAAe;UAAC8B,IAAI,EAAE7B;QAAS,CAAE;MAAC,CAC/B,CAAC;IAAA,CACJ,CAAC;EAEV;AACF;AAACS,eAAA,CA5DKH,WAAW,kBACO;EACpBW,WAAW,EAAE,QAAQ;EACrBG,SAAS,EAAE,EAAE;EACbE,UAAU,EAAE,IAAI;EAChBE,SAASA,CAAA,EAAS;IAChB;EAAA,CACD;EACDD,EAAE,EAAE,EAAE;EACN,aAAa,EAAEO;AACjB,CAAC;AAoDH,eAAexB,WAAW"}
+{"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsArrowLeft","vsArrowRight","vsSearch","classNames","Button","GLOBAL_SHORTCUTS","ContextActions","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SearchInput","constructor","props","_defineProperty","inputField","createRef","searchChangeSelection","componentDidMount","setInputPaddingRight","componentDidUpdate","focus","_this$inputField$curr","current","paddingRight","getBoundingClientRect","width","style","concat","render","value","placeholder","onBlur","onChange","className","disabled","matchCount","id","onKeyDown","dataTestId","cursor","matchCountSection","contextActions","action","next","shortcut","NEXT","PREVIOUS","children","kind","type","onClick","icon","tooltip","getDisplayText","index","undefined","ref","actions"],"sources":["../src/SearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsArrowLeft, vsArrowRight, vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport Button from './Button';\nimport './SearchInput.scss';\nimport { GLOBAL_SHORTCUTS } from './shortcuts';\nimport { ContextActions } from './context-actions';\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  cursor?: {\n    index: number | undefined;\n    next: (direction: 'forward' | 'back') => void;\n  };\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    cursor: undefined,\n  };\n\n  constructor(props: SearchInputProps) {\n    super(props);\n    this.inputField = React.createRef();\n    this.searchChangeSelection = React.createRef();\n  }\n\n  componentDidMount(): void {\n    this.setInputPaddingRight();\n  }\n\n  componentDidUpdate(): void {\n    this.setInputPaddingRight();\n  }\n\n  focus(): void {\n    this.inputField.current?.focus();\n  }\n\n  inputField: React.RefObject<HTMLInputElement>;\n\n  searchChangeSelection: React.RefObject<HTMLDivElement>;\n\n  setInputPaddingRight(): void {\n    const inputField = this.inputField.current;\n    const searchChangeSelection = this.searchChangeSelection.current;\n    if (inputField && searchChangeSelection) {\n      const paddingRight = searchChangeSelection.getBoundingClientRect().width;\n      inputField.style.paddingRight = `${paddingRight}px`;\n    }\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      cursor,\n    } = this.props;\n\n    let matchCountSection;\n    const contextActions = [\n      {\n        action: () => cursor?.next('forward'),\n        shortcut: GLOBAL_SHORTCUTS.NEXT,\n      },\n      {\n        action: () => cursor?.next('back'),\n        shortcut: GLOBAL_SHORTCUTS.PREVIOUS,\n      },\n    ];\n\n    if (cursor && matchCount > 1) {\n      matchCountSection = (\n        <>\n          <Button\n            kind=\"ghost\"\n            className=\"search-change-button\"\n            type=\"button\"\n            onClick={() => {\n              cursor.next('back');\n            }}\n            icon={vsArrowLeft}\n            tooltip={`Previous match (${GLOBAL_SHORTCUTS.PREVIOUS.getDisplayText()})`}\n          />\n          <span className=\"search-change-text\">\n            {cursor.index !== undefined && `${cursor.index + 1} of `}\n            {matchCount}\n          </span>\n          <Button\n            kind=\"ghost\"\n            className=\"search-change-button\"\n            type=\"button\"\n            onClick={() => {\n              cursor.next('forward');\n            }}\n            icon={vsArrowRight}\n            tooltip={`Next match (${GLOBAL_SHORTCUTS.NEXT.getDisplayText()})`}\n          />\n        </>\n      );\n    } else {\n      matchCountSection = matchCount > 0 && (\n        <span className=\"search-match\">{matchCount}</span>\n      );\n    }\n\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\n        {matchCount != null ? (\n          <>\n            <div\n              className=\"search-change-selection\"\n              ref={this.searchChangeSelection}\n            >\n              {matchCountSection}\n            </div>\n            <ContextActions actions={contextActions} />\n          </>\n        ) : (\n          <span className=\"search-icon\">\n            <FontAwesomeIcon icon={vsSearch} />\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default SearchInput;\n"],"mappings":"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"}

package/dist/SelectValueList.css

@@ -2,12 +2,12 @@
 .select-value-list-scroll-pane {
   overflow-x: hidden;
   overflow-y: auto;
-  border: 1px solid #929192;
+  border: 1px solid var(--dh-color-input-border);
   border-radius: 4px;
   padding: 0.375rem 0 0.375rem;
 }
 .select-value-list-scroll-pane.is-invalid {
-  border-color: rgba(249, 93, 132, 0.85);
+  border-color: hsla(var(--dh-color-negative-hsl), 0.85);
 }
 
 .select-value-list {
@@ -27,7 +27,7 @@
   display: flex;
 }
 .select-value-list .select-value-list-content .custom-control:hover {
-  background: #5b5a5c;
+  background: var(--dh-color-gray-500);
 }
 .select-value-list .select-value-list-content .custom-control .custom-control-label {
   margin-left: 0.75rem;