@deephaven/components 0.55.1-beta.0 → 0.55.1-beta.6

package/dist/SearchInput.css

@@ -26,18 +26,28 @@
 .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;
+.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: rgba(240, 240, 238, 0.2);
+  border-radius: 10px;
+  padding: 1px 5px;
+}
+.search-group .search-match {
+  background-color: rgba(240, 240, 238, 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"],"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,OC5CO;ED6CP;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\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-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: rgba($white, 0.2);\n    border-radius: 10px;\n    padding: 1px 5px;\n  }\n\n  .search-match {\n    background-color: rgba($white, 0.2);\n    border-radius: 10px;\n    padding: 1px 5px;\n    margin: 0 5px;\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"]}

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/shortcuts/GlobalShortcuts.d.ts

@@ -5,6 +5,8 @@ declare const GLOBAL_SHORTCUTS: {
     SELECT_ALL: import("./Shortcut").default;
     LINKER: import("./Shortcut").default;
     LINKER_CLOSE: import("./Shortcut").default;
+    NEXT: import("./Shortcut").default;
+    PREVIOUS: import("./Shortcut").default;
 };
 export default GLOBAL_SHORTCUTS;
 //# sourceMappingURL=GlobalShortcuts.d.ts.map

package/dist/shortcuts/GlobalShortcuts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalShortcuts.d.ts","sourceRoot":"","sources":["../../src/shortcuts/GlobalShortcuts.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;;;;;;CA0CrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"GlobalShortcuts.d.ts","sourceRoot":"","sources":["../../src/shortcuts/GlobalShortcuts.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;;;;;;;;CAwDrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/shortcuts/GlobalShortcuts.js

@@ -41,6 +41,20 @@ var GLOBAL_SHORTCUTS = {
     shortcut: [KEY.ESCAPE],
     macShortcut: [KEY.ESCAPE],
     isEditable: false
+  }),
+  NEXT: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.NEXT',
+    name: 'Next',
+    shortcut: [KEY.ENTER],
+    macShortcut: [KEY.ENTER],
+    isEditable: false
+  }),
+  PREVIOUS: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.PREVIOUS',
+    name: 'Previous',
+    shortcut: [MODIFIER.SHIFT, KEY.ENTER],
+    macShortcut: [MODIFIER.SHIFT, KEY.ENTER],
+    isEditable: false
   })
 };
 export default GLOBAL_SHORTCUTS;

package/dist/shortcuts/GlobalShortcuts.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalShortcuts.js","names":["ShortcutRegistry","MODIFIER","KEY","GLOBAL_SHORTCUTS","COPY","createAndAdd","id","name","shortcut","CTRL","C","macShortcut","CMD","isEditable","PASTE","V","SAVE","S","SELECT_ALL","A","LINKER","L","LINKER_CLOSE","ESCAPE"],"sources":["../../src/shortcuts/GlobalShortcuts.ts"],"sourcesContent":["import ShortcutRegistry from './ShortcutRegistry';\nimport { MODIFIER, KEY } from './Shortcut';\n\nconst GLOBAL_SHORTCUTS = {\n  COPY: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.COPY',\n    name: 'Copy',\n    shortcut: [MODIFIER.CTRL, KEY.C],\n    macShortcut: [MODIFIER.CMD, KEY.C],\n    isEditable: false,\n  }),\n  PASTE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.PASTE',\n    name: 'Paste',\n    shortcut: [MODIFIER.CTRL, KEY.V],\n    macShortcut: [MODIFIER.CMD, KEY.V],\n    isEditable: false,\n  }),\n  SAVE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SAVE',\n    name: 'Save',\n    shortcut: [MODIFIER.CTRL, KEY.S],\n    macShortcut: [MODIFIER.CMD, KEY.S],\n    isEditable: false,\n  }),\n  SELECT_ALL: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SELECT_ALL',\n    name: 'Select All',\n    shortcut: [MODIFIER.CTRL, KEY.A],\n    macShortcut: [MODIFIER.CMD, KEY.A],\n    isEditable: false,\n  }),\n  LINKER: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER',\n    name: 'Linker',\n    shortcut: [MODIFIER.CTRL, KEY.L],\n    macShortcut: [MODIFIER.CMD, KEY.L],\n  }),\n  LINKER_CLOSE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER_CLOSE',\n    name: 'Close Linker Overlay',\n    shortcut: [KEY.ESCAPE],\n    macShortcut: [KEY.ESCAPE],\n    isEditable: false,\n  }),\n};\n\nexport default GLOBAL_SHORTCUTS;\n"],"mappings":"OAAOA,gBAAgB;AAAA,SACdC,QAAQ,EAAEC,GAAG;AAEtB,IAAMC,gBAAgB,GAAG;EACvBC,IAAI,EAAEJ,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACQ,CAAC,CAAC;IAChCC,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACQ,CAAC,CAAC;IAClCG,UAAU,EAAE;EACd,CAAC,CAAC;EACFC,KAAK,EAAEd,gBAAgB,CAACK,YAAY,CAAC;IACnCC,EAAE,EAAE,cAAc;IAClBC,IAAI,EAAE,OAAO;IACbC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACa,CAAC,CAAC;IAChCJ,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACa,CAAC,CAAC;IAClCF,UAAU,EAAE;EACd,CAAC,CAAC;EACFG,IAAI,EAAEhB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACe,CAAC,CAAC;IAChCN,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACe,CAAC,CAAC;IAClCJ,UAAU,EAAE;EACd,CAAC,CAAC;EACFK,UAAU,EAAElB,gBAAgB,CAACK,YAAY,CAAC;IACxCC,EAAE,EAAE,mBAAmB;IACvBC,IAAI,EAAE,YAAY;IAClBC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACiB,CAAC,CAAC;IAChCR,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACiB,CAAC,CAAC;IAClCN,UAAU,EAAE;EACd,CAAC,CAAC;EACFO,MAAM,EAAEpB,gBAAgB,CAACK,YAAY,CAAC;IACpCC,EAAE,EAAE,eAAe;IACnBC,IAAI,EAAE,QAAQ;IACdC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACmB,CAAC,CAAC;IAChCV,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACmB,CAAC;EACnC,CAAC,CAAC;EACFC,YAAY,EAAEtB,gBAAgB,CAACK,YAAY,CAAC;IAC1CC,EAAE,EAAE,qBAAqB;IACzBC,IAAI,EAAE,sBAAsB;IAC5BC,QAAQ,EAAE,CAACN,GAAG,CAACqB,MAAM,CAAC;IACtBZ,WAAW,EAAE,CAACT,GAAG,CAACqB,MAAM,CAAC;IACzBV,UAAU,EAAE;EACd,CAAC;AACH,CAAC;AAED,eAAeV,gBAAgB"}
+{"version":3,"file":"GlobalShortcuts.js","names":["ShortcutRegistry","MODIFIER","KEY","GLOBAL_SHORTCUTS","COPY","createAndAdd","id","name","shortcut","CTRL","C","macShortcut","CMD","isEditable","PASTE","V","SAVE","S","SELECT_ALL","A","LINKER","L","LINKER_CLOSE","ESCAPE","NEXT","ENTER","PREVIOUS","SHIFT"],"sources":["../../src/shortcuts/GlobalShortcuts.ts"],"sourcesContent":["import ShortcutRegistry from './ShortcutRegistry';\nimport { MODIFIER, KEY } from './Shortcut';\n\nconst GLOBAL_SHORTCUTS = {\n  COPY: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.COPY',\n    name: 'Copy',\n    shortcut: [MODIFIER.CTRL, KEY.C],\n    macShortcut: [MODIFIER.CMD, KEY.C],\n    isEditable: false,\n  }),\n  PASTE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.PASTE',\n    name: 'Paste',\n    shortcut: [MODIFIER.CTRL, KEY.V],\n    macShortcut: [MODIFIER.CMD, KEY.V],\n    isEditable: false,\n  }),\n  SAVE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SAVE',\n    name: 'Save',\n    shortcut: [MODIFIER.CTRL, KEY.S],\n    macShortcut: [MODIFIER.CMD, KEY.S],\n    isEditable: false,\n  }),\n  SELECT_ALL: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SELECT_ALL',\n    name: 'Select All',\n    shortcut: [MODIFIER.CTRL, KEY.A],\n    macShortcut: [MODIFIER.CMD, KEY.A],\n    isEditable: false,\n  }),\n  LINKER: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER',\n    name: 'Linker',\n    shortcut: [MODIFIER.CTRL, KEY.L],\n    macShortcut: [MODIFIER.CMD, KEY.L],\n  }),\n  LINKER_CLOSE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER_CLOSE',\n    name: 'Close Linker Overlay',\n    shortcut: [KEY.ESCAPE],\n    macShortcut: [KEY.ESCAPE],\n    isEditable: false,\n  }),\n  NEXT: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.NEXT',\n    name: 'Next',\n    shortcut: [KEY.ENTER],\n    macShortcut: [KEY.ENTER],\n    isEditable: false,\n  }),\n  PREVIOUS: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.PREVIOUS',\n    name: 'Previous',\n    shortcut: [MODIFIER.SHIFT, KEY.ENTER],\n    macShortcut: [MODIFIER.SHIFT, KEY.ENTER],\n    isEditable: false,\n  }),\n};\n\nexport default GLOBAL_SHORTCUTS;\n"],"mappings":"OAAOA,gBAAgB;AAAA,SACdC,QAAQ,EAAEC,GAAG;AAEtB,IAAMC,gBAAgB,GAAG;EACvBC,IAAI,EAAEJ,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACQ,CAAC,CAAC;IAChCC,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACQ,CAAC,CAAC;IAClCG,UAAU,EAAE;EACd,CAAC,CAAC;EACFC,KAAK,EAAEd,gBAAgB,CAACK,YAAY,CAAC;IACnCC,EAAE,EAAE,cAAc;IAClBC,IAAI,EAAE,OAAO;IACbC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACa,CAAC,CAAC;IAChCJ,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACa,CAAC,CAAC;IAClCF,UAAU,EAAE;EACd,CAAC,CAAC;EACFG,IAAI,EAAEhB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACe,CAAC,CAAC;IAChCN,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACe,CAAC,CAAC;IAClCJ,UAAU,EAAE;EACd,CAAC,CAAC;EACFK,UAAU,EAAElB,gBAAgB,CAACK,YAAY,CAAC;IACxCC,EAAE,EAAE,mBAAmB;IACvBC,IAAI,EAAE,YAAY;IAClBC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACiB,CAAC,CAAC;IAChCR,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACiB,CAAC,CAAC;IAClCN,UAAU,EAAE;EACd,CAAC,CAAC;EACFO,MAAM,EAAEpB,gBAAgB,CAACK,YAAY,CAAC;IACpCC,EAAE,EAAE,eAAe;IACnBC,IAAI,EAAE,QAAQ;IACdC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACmB,CAAC,CAAC;IAChCV,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACmB,CAAC;EACnC,CAAC,CAAC;EACFC,YAAY,EAAEtB,gBAAgB,CAACK,YAAY,CAAC;IAC1CC,EAAE,EAAE,qBAAqB;IACzBC,IAAI,EAAE,sBAAsB;IAC5BC,QAAQ,EAAE,CAACN,GAAG,CAACqB,MAAM,CAAC;IACtBZ,WAAW,EAAE,CAACT,GAAG,CAACqB,MAAM,CAAC;IACzBV,UAAU,EAAE;EACd,CAAC,CAAC;EACFW,IAAI,EAAExB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACN,GAAG,CAACuB,KAAK,CAAC;IACrBd,WAAW,EAAE,CAACT,GAAG,CAACuB,KAAK,CAAC;IACxBZ,UAAU,EAAE;EACd,CAAC,CAAC;EACFa,QAAQ,EAAE1B,gBAAgB,CAACK,YAAY,CAAC;IACtCC,EAAE,EAAE,iBAAiB;IACrBC,IAAI,EAAE,UAAU;IAChBC,QAAQ,EAAE,CAACP,QAAQ,CAAC0B,KAAK,EAAEzB,GAAG,CAACuB,KAAK,CAAC;IACrCd,WAAW,EAAE,CAACV,QAAQ,CAAC0B,KAAK,EAAEzB,GAAG,CAACuB,KAAK,CAAC;IACxCZ,UAAU,EAAE;EACd,CAAC;AACH,CAAC;AAED,eAAeV,gBAAgB"}

package/dist/theme/theme-spectrum/index.d.ts

@@ -1,3 +1,4 @@
+import './theme-spectrum-overrides.css';
 /**
  * Spectrum theme variables are exported as a map of css class names. The keys
  * come from css classes in the imported css modules. The values are generated

package/dist/theme/theme-spectrum/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-spectrum/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,0BAA0B;;CAItC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-spectrum/index.ts"],"names":[],"mappings":"AAIA,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,0BAA0B;;CAGtC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/dist/theme/theme-spectrum/index.js

@@ -4,8 +4,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 palette from "./theme-spectrum-palette.module.css";
-import alias from "./theme-spectrum-alias.module.css";
-import overrides from "./theme-spectrum-overrides.module.css";
+import alias from "./theme-spectrum-alias.module.css"; // don't import as module, so that classes can be used directly
+import "./theme-spectrum-overrides.css";
 /**
  * Spectrum theme variables are exported as a map of css class names. The keys
  * come from css classes in the imported css modules. The values are generated
@@ -17,6 +17,6 @@ import overrides from "./theme-spectrum-overrides.module.css";
  *   'dh-spectrum-alias': '_dh-spectrum-alias_18mbe_1',
  * }
  */
-export var themeSpectrumClassesCommon = _objectSpread(_objectSpread(_objectSpread({}, palette), alias), overrides);
+export var themeSpectrumClassesCommon = _objectSpread(_objectSpread({}, palette), alias);
 export default themeSpectrumClassesCommon;
 //# sourceMappingURL=index.js.map

package/dist/theme/theme-spectrum/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["palette","alias","overrides","themeSpectrumClassesCommon","_objectSpread"],"sources":["../../../src/theme/theme-spectrum/index.ts"],"sourcesContent":["import palette from './theme-spectrum-palette.module.css';\nimport alias from './theme-spectrum-alias.module.css';\nimport overrides from './theme-spectrum-overrides.module.css';\n\n/**\n * Spectrum theme variables are exported as a map of css class names. The keys\n * come from css classes in the imported css modules. The values are generated\n * by Vite.\n *\n * e.g.\n * {\n *   'dh-spectrum-palette': '_dh-spectrum-palette_abr16_1',\n *   'dh-spectrum-alias': '_dh-spectrum-alias_18mbe_1',\n * }\n */\nexport const themeSpectrumClassesCommon = {\n  ...palette,\n  ...alias,\n  ...overrides,\n};\n\nexport default themeSpectrumClassesCommon;\n"],"mappings":";;;;;OAAOA,OAAO;AAAA,OACPC,KAAK;AAAA,OACLC,SAAS;AAEhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,0BAA0B,GAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,KAClCJ,OAAO,GACPC,KAAK,GACLC,SAAS,CACb;AAED,eAAeC,0BAA0B"}
+{"version":3,"file":"index.js","names":["palette","alias","themeSpectrumClassesCommon","_objectSpread"],"sources":["../../../src/theme/theme-spectrum/index.ts"],"sourcesContent":["import palette from './theme-spectrum-palette.module.css';\nimport alias from './theme-spectrum-alias.module.css';\n\n// don't import as module, so that classes can be used directly\nimport './theme-spectrum-overrides.css';\n\n/**\n * Spectrum theme variables are exported as a map of css class names. The keys\n * come from css classes in the imported css modules. The values are generated\n * by Vite.\n *\n * e.g.\n * {\n *   'dh-spectrum-palette': '_dh-spectrum-palette_abr16_1',\n *   'dh-spectrum-alias': '_dh-spectrum-alias_18mbe_1',\n * }\n */\nexport const themeSpectrumClassesCommon = {\n  ...palette,\n  ...alias,\n};\n\nexport default themeSpectrumClassesCommon;\n"],"mappings":";;;;;OAAOA,OAAO;AAAA,OACPC,KAAK,2CAEZ;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,0BAA0B,GAAAC,aAAA,CAAAA,aAAA,KAClCH,OAAO,GACPC,KAAK,CACT;AAED,eAAeC,0BAA0B"}

package/dist/theme/theme-spectrum/theme-spectrum-overrides.css

@@ -0,0 +1 @@
+[class^=spectrum]{font-family:var(--font-family-sans-serif) !important}.svg-inline--fa[class*=spectrum-Icon--sizeS]{--spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size)}/*# sourceMappingURL=theme-spectrum-overrides.css.map */

package/dist/theme/theme-spectrum/theme-spectrum-overrides.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-spectrum/theme-spectrum-overrides.css"],"names":[],"mappings":"AAAA,kBAGE,qDAGF,6CAKE","file":"theme-spectrum-overrides.css","sourcesContent":["[class^='spectrum'] {\n  /* --font-family-sans-serif is defined in Bootstrap's _root.scss. We want\n  Spectrum to use the same default font-family */\n  font-family: var(--font-family-sans-serif) !important;\n}\n\n.svg-inline--fa[class*='spectrum-Icon--sizeS'] {\n  /* \n  Resize fontawesome icons used inside a spectrum icon wrapper to match\n  our icon size. Spectrum icons are 18px by default, but our icons are built on a 16px grid.\n  */\n  --spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.55.1-beta.0+8ddc1145",
+  "version": "0.55.1-beta.6+c0cc9667",
   "description": "Deephaven React component library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@adobe/react-spectrum": "^3.29.0",
-    "@deephaven/icons": "^0.55.1-beta.0+8ddc1145",
-    "@deephaven/log": "^0.55.1-beta.0+8ddc1145",
-    "@deephaven/react-hooks": "^0.55.1-beta.0+8ddc1145",
-    "@deephaven/utils": "^0.55.1-beta.0+8ddc1145",
+    "@deephaven/icons": "^0.55.1-beta.6+c0cc9667",
+    "@deephaven/log": "^0.55.1-beta.6+c0cc9667",
+    "@deephaven/react-hooks": "^0.55.1-beta.6+c0cc9667",
+    "@deephaven/utils": "^0.55.1-beta.6+c0cc9667",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-spectrum/theme-default": "^3.5.1",
@@ -52,7 +52,7 @@
     "react-dom": "^17.x"
   },
   "devDependencies": {
-    "@deephaven/mocks": "^0.55.1-beta.0+8ddc1145"
+    "@deephaven/mocks": "^0.55.1-beta.6+c0cc9667"
   },
   "files": [
     "dist",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8ddc11458b0f52d7a96f673f061d60c63cb7b24a"
+  "gitHead": "c0cc9667b70d8d21668c1d2bcfabe231cc3236bb"
 }

package/scss/BaseStyleSheet.scss

@@ -3,6 +3,11 @@
 @import './custom.scss';
 @import 'bootstrap/scss/bootstrap';
 
+:root {
+  --dh-svg-inline-icon-size: 16px;
+  --scrollbar-color: 255, 255, 255;
+}
+
 //Various non-variable css overides
 //Overide default size from 16px to 14px. We need density.
 html {
@@ -14,7 +19,7 @@ html {
 // and look best at that size. Default icon size back to 16px
 // vertical alignment changed to best match icon set against 14px text
 .svg-inline--fa {
-  font-size: 16px;
+  font-size: var(--dh-svg-inline-icon-size);
   vertical-align: -3px;
 }
 
@@ -656,12 +661,6 @@ input[type='number']::-webkit-inner-spin-button {
   background: rgba(var(--scrollbar-color), 0.35);
 }
 
-/* stylelint-disable no-descending-specificity */
-:root {
-  --scrollbar-color: 255, 255, 255;
-}
-/* stylelint-enable no-descending-specificity */
-
 // used in inverted color sections, like light modals
 .theme-bg-light {
   --scrollbar-color: 0, 0, 0;

package/dist/theme/theme-spectrum/theme-spectrum-overrides.module.css

@@ -1 +0,0 @@
-[class^=spectrum]{font-family:var(--font-family-sans-serif) !important}/*# sourceMappingURL=theme-spectrum-overrides.module.css.map */

package/dist/theme/theme-spectrum/theme-spectrum-overrides.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-spectrum/theme-spectrum-overrides.module.css"],"names":[],"mappings":"AAAA,kBAGE","file":"theme-spectrum-overrides.module.css","sourcesContent":["[class^='spectrum'] {\n  /* --font-family-sans-serif is defined in Bootstrap's _root.scss. We want\n  Spectrum to use the same default font-family */\n  font-family: var(--font-family-sans-serif) !important;\n}\n"]}