@deephaven/iris-grid 0.43.0 → 0.44.1-beta.0

package/dist/FilterInputField.js

@@ -0,0 +1,232 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import debounce from 'lodash.debounce';
+import { vsFilter, dhFilterFilled } from '@deephaven/icons';
+import "./FilterInputField.css";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button } from '@deephaven/components';
+/**
+ * An input field showing a input field and button.
+ * Debounces changes.
+ */
+class FilterInputField extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "inputField", void 0);
+    _defineProperty(this, "initialValue", void 0);
+    _defineProperty(this, "debouncedSendUpdate", void 0);
+    var {
+      debounceMs
+    } = props;
+    this.debouncedSendUpdate = debounce(this.sendUpdate.bind(this), debounceMs);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleCommit = this.handleCommit.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleContextMenu = this.handleContextMenu.bind(this);
+    this.inputField = null;
+    var {
+      value
+    } = props;
+    this.initialValue = value;
+    this.state = {
+      isChanged: false,
+      value
+    };
+  }
+  componentDidMount() {
+    var _this$inputField;
+    (_this$inputField = this.inputField) === null || _this$inputField === void 0 ? void 0 : _this$inputField.focus();
+  }
+  componentDidUpdate(prevProps) {
+    var {
+      debounceMs
+    } = this.props;
+    if (prevProps.debounceMs !== debounceMs) {
+      this.debouncedSendUpdate.flush();
+      this.debouncedSendUpdate = debounce(this.sendUpdate.bind(this), debounceMs);
+    }
+  }
+  componentWillUnmount() {
+    this.debouncedSendUpdate.cancel();
+  }
+  // clear filters needs to be able to reset the value externally
+  // and due to the way this component handles its own debouncing
+  // this was easier than moving state up.
+  setValue(value) {
+    this.initialValue = value;
+    this.setState({
+      value
+    });
+  }
+  focus() {
+    var _this$inputField2;
+    (_this$inputField2 = this.inputField) === null || _this$inputField2 === void 0 ? void 0 : _this$inputField2.focus();
+  }
+  handleChange(event) {
+    var {
+      value
+    } = event.target;
+    this.setState({
+      value,
+      isChanged: true
+    });
+    this.debouncedSendUpdate(value);
+  }
+  handleCancel() {
+    this.debouncedSendUpdate.cancel();
+    var {
+      initialValue
+    } = this;
+    var {
+      isChanged
+    } = this.state;
+    if (isChanged) {
+      this.sendUpdate(initialValue);
+    }
+    var {
+      onDone
+    } = this.props;
+    onDone();
+  }
+  handleCommit() {
+    var setGridFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    var defocusInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    this.debouncedSendUpdate.flush();
+    var {
+      onDone
+    } = this.props;
+    onDone(setGridFocus, defocusInput);
+  }
+  handleFocus() {
+    var _this$inputField3;
+    (_this$inputField3 = this.inputField) === null || _this$inputField3 === void 0 ? void 0 : _this$inputField3.select();
+  }
+  handleBlur(event) {
+    var {
+      relatedTarget
+    } = event;
+    // handleCommit results in a call that steals focus
+    if (relatedTarget != null && relatedTarget.classList.contains('context-menu-container')) {
+      // input blurred by calling context-menu
+      // don't set grid focus, but do null column focus
+      this.handleCommit(false, true);
+    } else if (relatedTarget != null && relatedTarget.classList.contains('advanced-filter-button')) {
+      // blurred by clicking an advanced filter button
+      // don't set grid focus, maintain focusedFilterBarColumn state
+      this.handleCommit(false, false);
+    } else {
+      // clear both, blurred elsewhere
+      this.handleCommit(true, true);
+    }
+  }
+  handleTab() {
+    var backward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    this.debouncedSendUpdate.flush();
+    var {
+      onTab
+    } = this.props;
+    onTab(backward);
+  }
+  handleKeyDown(event) {
+    switch (event.key) {
+      case 'Escape':
+        event.stopPropagation();
+        event.preventDefault();
+        this.handleCancel();
+        break;
+      case 'Enter':
+        event.stopPropagation();
+        event.preventDefault();
+        this.handleCommit();
+        break;
+      case 'Tab':
+        event.stopPropagation();
+        event.preventDefault();
+        this.handleTab(event.shiftKey);
+        break;
+      default:
+        break;
+    }
+  }
+  handleContextMenu(event) {
+    var {
+      onContextMenu
+    } = this.props;
+    onContextMenu(event);
+  }
+  sendUpdate(value) {
+    var {
+      onChange
+    } = this.props;
+    onChange(value);
+  }
+  render() {
+    var {
+      className,
+      style,
+      isAdvancedFilterSet,
+      onAdvancedFiltersTriggered
+    } = this.props;
+    var {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: "iris-grid-input-autosized-wrapper",
+      "data-value": value // used by css based autosizer
+    }, /*#__PURE__*/React.createElement("input", {
+      ref: inputField => {
+        this.inputField = inputField;
+      },
+      className: classNames('iris-grid-input-field', className),
+      type: "text",
+      value: value,
+      onBlur: this.handleBlur,
+      onFocus: this.handleFocus,
+      onChange: this.handleChange,
+      onKeyDown: this.handleKeyDown,
+      onContextMenu: this.handleContextMenu,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: "false"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "advanced-filter-button-container"
+    }, /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: classNames('btn-link-icon advanced-filter-button', {
+        'filter-set': isAdvancedFilterSet
+      }),
+      onClick: onAdvancedFiltersTriggered,
+      onContextMenu: this.handleContextMenu
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "fa-layers "
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: dhFilterFilled,
+      className: "filter-solid"
+    }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsFilter,
+      className: "filter-light"
+    })))));
+  }
+}
+_defineProperty(FilterInputField, "defaultProps", {
+  style: {},
+  className: '',
+  value: '',
+  isAdvancedFilterSet: false,
+  onAdvancedFiltersTriggered: () => undefined,
+  onChange: () => undefined,
+  onDone: () => undefined,
+  onTab: () => undefined,
+  onContextMenu: () => undefined,
+  debounceMs: 150
+});
+export default FilterInputField;
+//# sourceMappingURL=FilterInputField.js.map

package/dist/FilterInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterInputField.js","names":["React","PureComponent","classNames","debounce","vsFilter","dhFilterFilled","FontAwesomeIcon","Button","FilterInputField","constructor","props","debounceMs","debouncedSendUpdate","sendUpdate","bind","handleCancel","handleChange","handleCommit","handleFocus","handleBlur","handleKeyDown","handleContextMenu","inputField","value","initialValue","state","isChanged","componentDidMount","focus","componentDidUpdate","prevProps","flush","componentWillUnmount","cancel","setValue","setState","event","target","onDone","setGridFocus","defocusInput","select","relatedTarget","classList","contains","handleTab","backward","onTab","key","stopPropagation","preventDefault","shiftKey","onContextMenu","onChange","render","className","style","isAdvancedFilterSet","onAdvancedFiltersTriggered","undefined"],"sources":["../src/FilterInputField.tsx"],"sourcesContent":["import React, { ChangeEvent, PureComponent, ReactElement } from 'react';\nimport classNames from 'classnames';\nimport debounce from 'lodash.debounce';\nimport { vsFilter, dhFilterFilled } from '@deephaven/icons';\nimport './FilterInputField.scss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport type { DebouncedFunc } from 'lodash';\nimport { Button } from '@deephaven/components';\n\ninterface FilterInputFieldProps {\n  className: string;\n  style: React.CSSProperties;\n  value: string;\n  isAdvancedFilterSet: boolean;\n  onAdvancedFiltersTriggered: React.MouseEventHandler<HTMLButtonElement>;\n  onChange: (value: string) => void;\n  onDone: (setGridFocus?: boolean, defocusInput?: boolean) => void;\n  onTab: (backward: boolean) => void;\n  onContextMenu: React.MouseEventHandler<HTMLInputElement | HTMLButtonElement>;\n  debounceMs: number;\n}\ninterface FilterInputFieldState {\n  isChanged: boolean;\n  value: string;\n}\n/**\n * An input field showing a input field and button.\n * Debounces changes.\n */\nclass FilterInputField extends PureComponent<\n  FilterInputFieldProps,\n  FilterInputFieldState\n> {\n  static defaultProps = {\n    style: {},\n    className: '',\n    value: '',\n    isAdvancedFilterSet: false,\n    onAdvancedFiltersTriggered: (): void => undefined,\n    onChange: (): void => undefined,\n    onDone: (): void => undefined,\n    onTab: (): void => undefined,\n    onContextMenu: (): void => undefined,\n    debounceMs: 150,\n  };\n\n  constructor(props: FilterInputFieldProps) {\n    super(props);\n\n    const { debounceMs } = props;\n\n    this.debouncedSendUpdate = debounce(this.sendUpdate.bind(this), debounceMs);\n    this.handleCancel = this.handleCancel.bind(this);\n    this.handleChange = this.handleChange.bind(this);\n    this.handleCommit = this.handleCommit.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleContextMenu = this.handleContextMenu.bind(this);\n\n    this.inputField = null;\n\n    const { value } = props;\n    this.initialValue = value;\n    this.state = {\n      isChanged: false,\n      value,\n    };\n  }\n\n  componentDidMount(): void {\n    this.inputField?.focus();\n  }\n\n  componentDidUpdate(prevProps: FilterInputFieldProps): void {\n    const { debounceMs } = this.props;\n    if (prevProps.debounceMs !== debounceMs) {\n      this.debouncedSendUpdate.flush();\n      this.debouncedSendUpdate = debounce(\n        this.sendUpdate.bind(this),\n        debounceMs\n      );\n    }\n  }\n\n  componentWillUnmount(): void {\n    this.debouncedSendUpdate.cancel();\n  }\n\n  inputField: HTMLInputElement | null;\n\n  initialValue: string;\n\n  debouncedSendUpdate: DebouncedFunc<(value: string) => void>;\n\n  // clear filters needs to be able to reset the value externally\n  // and due to the way this component handles its own debouncing\n  // this was easier than moving state up.\n  setValue(value: string): void {\n    this.initialValue = value;\n    this.setState({ value });\n  }\n\n  focus(): void {\n    this.inputField?.focus();\n  }\n\n  handleChange(event: ChangeEvent<HTMLInputElement>): void {\n    const { value } = event.target;\n    this.setState({ value, isChanged: true });\n\n    this.debouncedSendUpdate(value);\n  }\n\n  handleCancel(): void {\n    this.debouncedSendUpdate.cancel();\n    const { initialValue } = this;\n    const { isChanged } = this.state;\n    if (isChanged) {\n      this.sendUpdate(initialValue);\n    }\n\n    const { onDone } = this.props;\n    onDone();\n  }\n\n  handleCommit(setGridFocus = true, defocusInput = true): void {\n    this.debouncedSendUpdate.flush();\n\n    const { onDone } = this.props;\n    onDone(setGridFocus, defocusInput);\n  }\n\n  handleFocus(): void {\n    this.inputField?.select();\n  }\n\n  handleBlur(event: React.FocusEvent<HTMLInputElement>): void {\n    const { relatedTarget } = event;\n    // handleCommit results in a call that steals focus\n    if (\n      relatedTarget != null &&\n      relatedTarget.classList.contains('context-menu-container')\n    ) {\n      // input blurred by calling context-menu\n      // don't set grid focus, but do null column focus\n      this.handleCommit(false, true);\n    } else if (\n      relatedTarget != null &&\n      relatedTarget.classList.contains('advanced-filter-button')\n    ) {\n      // blurred by clicking an advanced filter button\n      // don't set grid focus, maintain focusedFilterBarColumn state\n      this.handleCommit(false, false);\n    } else {\n      // clear both, blurred elsewhere\n      this.handleCommit(true, true);\n    }\n  }\n\n  handleTab(backward = false): void {\n    this.debouncedSendUpdate.flush();\n\n    const { onTab } = this.props;\n    onTab(backward);\n  }\n\n  handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\n    switch (event.key) {\n      case 'Escape':\n        event.stopPropagation();\n        event.preventDefault();\n        this.handleCancel();\n        break;\n      case 'Enter':\n        event.stopPropagation();\n        event.preventDefault();\n        this.handleCommit();\n        break;\n      case 'Tab':\n        event.stopPropagation();\n        event.preventDefault();\n        this.handleTab(event.shiftKey);\n        break;\n      default:\n        break;\n    }\n  }\n\n  handleContextMenu(\n    event: React.MouseEvent<HTMLInputElement | HTMLButtonElement>\n  ): void {\n    const { onContextMenu } = this.props;\n    onContextMenu(event);\n  }\n\n  sendUpdate(value: string): void {\n    const { onChange } = this.props;\n    onChange(value);\n  }\n\n  render(): ReactElement {\n    const {\n      className,\n      style,\n      isAdvancedFilterSet,\n      onAdvancedFiltersTriggered,\n    } = this.props;\n    const { value } = this.state;\n    return (\n      <div\n        style={style}\n        className=\"iris-grid-input-autosized-wrapper\"\n        data-value={value} // used by css based autosizer\n      >\n        <input\n          ref={inputField => {\n            this.inputField = inputField;\n          }}\n          className={classNames('iris-grid-input-field', className)}\n          type=\"text\"\n          value={value}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onChange={this.handleChange}\n          onKeyDown={this.handleKeyDown}\n          onContextMenu={this.handleContextMenu}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoCapitalize=\"off\"\n          spellCheck=\"false\"\n        />\n        <div className=\"advanced-filter-button-container\">\n          <Button\n            kind=\"ghost\"\n            className={classNames('btn-link-icon advanced-filter-button', {\n              'filter-set': isAdvancedFilterSet,\n            })}\n            onClick={onAdvancedFiltersTriggered}\n            onContextMenu={this.handleContextMenu}\n          >\n            <div className=\"fa-layers \">\n              <FontAwesomeIcon icon={dhFilterFilled} className=\"filter-solid\" />\n              <FontAwesomeIcon icon={vsFilter} className=\"filter-light\" />\n            </div>\n          </Button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default FilterInputField;\n"],"mappings":"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"}

package/dist/GotoRow.css

@@ -0,0 +1,45 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.iris-grid-bottom-bar.goto-row {
+  height: auto;
+}
+
+.goto-row {
+  background-color: #2d2a2e;
+  border-top: 1px solid #1a171a;
+  display: block;
+}
+.goto-row .goto-row-row {
+  display: flex;
+  padding: 0.5rem;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+.goto-row .goto-row-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.goto-row .goto-row-text {
+  min-width: 10ch;
+  margin: 0;
+  font-size: 14px;
+}
+.goto-row .goto-row-close {
+  display: flex;
+}
+.goto-row input {
+  max-width: calc(0.75rem + 12ch + 0.75rem);
+}
+.goto-row select {
+  max-width: calc(0.75rem + 25ch + 0.75rem);
+}
+.goto-row .is-inactive {
+  color: #929192;
+}
+.goto-row .goto-value-date-time-input {
+  min-width: 30ch;
+}
+
+/*# sourceMappingURL=GotoRow.css.map */

package/dist/GotoRow.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/GotoRow.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;;;AAGF;EACE,kBCIc;EDHd;EACA;;AAEA;EACE;EACA,SEVO;EFWP;EACA;EACA,KEbO;;AFgBT;EACE;EACA;EACA,KEnBO;EFoBP;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAEF;EACE;;AAEF;EACE,OCtBO;;ADwBT;EACE","file":"GotoRow.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 '@deephaven/components/scss/custom.scss';\n\n.iris-grid-bottom-bar.goto-row {\n  height: auto;\n}\n\n.goto-row {\n  background-color: $content-bg;\n  border-top: $border-width solid $black;\n  display: block;\n\n  .goto-row-row {\n    display: flex;\n    padding: $spacer-2;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: $spacer-2;\n  }\n\n  .goto-row-wrapper {\n    display: flex;\n    align-items: center;\n    gap: $spacer-2;\n    flex-wrap: wrap;\n  }\n\n  .goto-row-text {\n    min-width: 10ch;\n    margin: 0;\n    font-size: 14px;\n  }\n\n  .goto-row-close {\n    display: flex;\n  }\n\n  input {\n    max-width: calc($input-padding-x + 12ch + $input-padding-x);\n  }\n  select {\n    max-width: calc($input-padding-x + 25ch + $input-padding-x);\n  }\n  .is-inactive {\n    color: $gray-400;\n  }\n  .goto-value-date-time-input {\n    min-width: 30ch;\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n"]}

package/dist/GotoRow.js

@@ -0,0 +1,298 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { vsClose, vsArrowUp, vsArrowDown } from '@deephaven/icons';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Type as FilterType } from '@deephaven/filters';
+import { Button, DateTimeInput } from '@deephaven/components';
+import { TableUtils } from '@deephaven/jsapi-utils';
+import classNames from 'classnames';
+import "./GotoRow.css";
+import shortid from 'shortid';
+import IrisGridBottomBar from "./IrisGridBottomBar.js";
+function isIrisGridProxyModel(model) {
+  return model.model !== undefined;
+}
+var DEFAULT_FORMAT_STRING = '###,##0';
+function GotoRow(_ref) {
+  var {
+    gotoRow,
+    gotoRowError,
+    gotoValueError,
+    onGotoRowSubmit,
+    isShown,
+    onEntering,
+    onEntered: _onEntered,
+    onExiting,
+    onExited,
+    model,
+    onGotoRowNumberChanged,
+    onClose,
+    gotoValueSelectedColumnName,
+    gotoValue,
+    gotoValueFilter,
+    onGotoValueSelectedColumnNameChanged,
+    onGotoValueSelectedFilterChanged,
+    onGotoValueChanged,
+    onGotoValueSubmit
+  } = _ref;
+  var gotoRowInputRef = useRef(null);
+  var gotoValueInputRef = useRef(null);
+  var [isGotoRowActive, setIsGotoRowActive] = useState(false);
+  var columns = [];
+  if (isIrisGridProxyModel(model) && model.table !== undefined) {
+    ({
+      columns
+    } = model.table);
+  }
+  var {
+    dh,
+    rowCount
+  } = model;
+  var gotoRowInputId = useMemo(() => "goto-row-input-".concat(shortid()), []);
+  var handleGotoValueNumberKeyDown = e => {
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      e.preventDefault();
+      onGotoValueSubmit();
+    } else if ((e.key === 'Backspace' || e.key === 'Delete') && (gotoValue === "".concat(Number.POSITIVE_INFINITY) || gotoValue === "".concat(Number.NEGATIVE_INFINITY))) {
+      onGotoValueInputChanged('');
+    }
+  };
+  var handleGotoValueKeySubmit = e => {
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      e.preventDefault();
+      onGotoValueSubmit(e.shiftKey);
+    }
+  };
+  var index = model.getColumnIndexByName(gotoValueSelectedColumnName);
+  var selectedColumn = columns[index !== null && index !== void 0 ? index : 0];
+  var columnType = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.type;
+  var normalizedType = TableUtils.getNormalizedType(columnType);
+  var onGotoValueInputChanged = value => {
+    onGotoValueChanged(value !== null && value !== void 0 ? value : '');
+  };
+  var selectInput = () => {
+    // when row changes without focus (i.e. via context menu), re-select input
+    if (isGotoRowActive && document.activeElement !== gotoRowInputRef.current) {
+      var _gotoRowInputRef$curr;
+      (_gotoRowInputRef$curr = gotoRowInputRef.current) === null || _gotoRowInputRef$curr === void 0 ? void 0 : _gotoRowInputRef$curr.select();
+    } else if (!isGotoRowActive && document.activeElement !== gotoValueInputRef.current) {
+      var _gotoValueInputRef$cu;
+      (_gotoValueInputRef$cu = gotoValueInputRef.current) === null || _gotoValueInputRef$cu === void 0 ? void 0 : _gotoValueInputRef$cu.select();
+    }
+  };
+  useEffect(selectInput, [isGotoRowActive, gotoRow, gotoValue]);
+  var renderValueInput = () => {
+    switch (normalizedType) {
+      case TableUtils.dataType.DECIMAL:
+      case TableUtils.dataType.INT:
+        return /*#__PURE__*/React.createElement("div", {
+          className: "goto-row-input"
+        }, /*#__PURE__*/React.createElement("input", {
+          ref: gotoValueInputRef,
+          className: classNames('form-control', {
+            'is-invalid': gotoValueError !== ''
+          }),
+          onKeyDown: handleGotoValueNumberKeyDown,
+          placeholder: "value",
+          onChange: e => {
+            var value = e.target.value.toLowerCase();
+            // regex tests for
+            if (/^-?[0-9]*\.?[0-9]*$/.test(e.target.value)) {
+              onGotoValueInputChanged(e.target.value);
+            } else if (value === '-i' || value === '-infinity') {
+              onGotoValueInputChanged("".concat(Number.NEGATIVE_INFINITY));
+            } else if (value === 'i' || value === 'infinity') {
+              onGotoValueInputChanged("".concat(Number.POSITIVE_INFINITY));
+            }
+          },
+          value: gotoValue,
+          "aria-label": "Value Input"
+        }));
+      case TableUtils.dataType.DATETIME:
+        return /*#__PURE__*/React.createElement("div", {
+          className: "goto-value-date-time-input"
+        }, /*#__PURE__*/React.createElement(DateTimeInput, {
+          ref: gotoValueInputRef,
+          className: classNames('form-control', 'goto-value-date-time-input', {
+            'is-invalid': gotoValueError !== ''
+          }),
+          defaultValue: gotoValue,
+          onChange: onGotoValueInputChanged,
+          onSubmit: handleGotoValueKeySubmit,
+          "aria-label": "Value Input"
+        }));
+      case TableUtils.dataType.STRING:
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+          className: "goto-row-input"
+        }, /*#__PURE__*/React.createElement("select", {
+          className: "custom-select",
+          onChange: event => {
+            onGotoValueSelectedFilterChanged(event.target.value);
+          },
+          value: gotoValueFilter,
+          "aria-label": "filter-type-select"
+        }, /*#__PURE__*/React.createElement("option", {
+          key: FilterType.eqIgnoreCase,
+          value: FilterType.eqIgnoreCase
+        }, "Equals (case-insensitive)"), /*#__PURE__*/React.createElement("option", {
+          key: FilterType.containsIgnoreCase,
+          value: FilterType.containsIgnoreCase
+        }, "Contains (case-insensitive)"), /*#__PURE__*/React.createElement("option", {
+          key: FilterType.eq,
+          value: FilterType.eq
+        }, "Equals"), /*#__PURE__*/React.createElement("option", {
+          key: FilterType.contains,
+          value: FilterType.contains
+        }, "Contains"))), /*#__PURE__*/React.createElement("div", {
+          className: "goto-row-input"
+        }, /*#__PURE__*/React.createElement("input", {
+          ref: gotoValueInputRef,
+          className: classNames('form-control', {
+            'is-invalid': gotoValueError !== ''
+          }),
+          onKeyDown: handleGotoValueKeySubmit,
+          placeholder: "value",
+          onChange: e => onGotoValueInputChanged(e.target.value),
+          value: gotoValue,
+          "aria-label": "Value Input"
+        })));
+      case TableUtils.dataType.BOOLEAN:
+        return /*#__PURE__*/React.createElement("div", {
+          className: "goto-row-input"
+        }, /*#__PURE__*/React.createElement("select", {
+          className: "custom-select",
+          onChange: event => {
+            onGotoValueInputChanged(event.target.value);
+          },
+          value: gotoValue,
+          "aria-label": "Value Input"
+        }, /*#__PURE__*/React.createElement("option", {
+          "aria-label": "null value",
+          key: "null",
+          value: ""
+        }), /*#__PURE__*/React.createElement("option", {
+          key: "true",
+          value: "true"
+        }, "true"), /*#__PURE__*/React.createElement("option", {
+          key: "false",
+          value: "false"
+        }, "false")));
+      default:
+        return /*#__PURE__*/React.createElement("div", {
+          className: "goto-row-input"
+        }, /*#__PURE__*/React.createElement("input", {
+          ref: gotoValueInputRef,
+          className: "form-control",
+          onKeyDown: handleGotoValueKeySubmit,
+          placeholder: "value",
+          onChange: e => onGotoValueInputChanged(e.target.value),
+          value: gotoValue,
+          "aria-label": "Value Input"
+        }));
+    }
+  };
+  return /*#__PURE__*/React.createElement(IrisGridBottomBar, {
+    isShown: isShown,
+    className: classNames('goto-row'),
+    onEntering: onEntering,
+    onEntered: () => {
+      _onEntered();
+      selectInput();
+    },
+    onExiting: onExiting,
+    onExited: onExited
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "goto-row-row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('goto-row-wrapper', {
+      'is-inactive': !isGotoRowActive
+    }),
+    onClick: () => setIsGotoRowActive(true),
+    onFocus: () => setIsGotoRowActive(true),
+    role: "group"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "goto-row-text",
+    htmlFor: gotoRowInputId
+  }, "Go to row"), /*#__PURE__*/React.createElement("div", {
+    className: "goto-row-input"
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: gotoRowInputRef,
+    "data-testid": "goto-row-input",
+    type: "number",
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.stopPropagation();
+        e.preventDefault();
+        onGotoRowSubmit();
+      }
+    },
+    className: classNames('form-control', {
+      'is-invalid': gotoRowError !== ''
+    }),
+    placeholder: "Row number",
+    onChange: event => {
+      onGotoRowNumberChanged(event);
+    },
+    value: gotoRow,
+    id: gotoRowInputId
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "goto-row-text"
+  }, "of ", dh.i18n.NumberFormat.format(DEFAULT_FORMAT_STRING, rowCount)), gotoRowError && /*#__PURE__*/React.createElement("div", {
+    className: "text-danger"
+  }, gotoRowError)), /*#__PURE__*/React.createElement("div", {
+    className: "goto-row-close"
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsClose,
+    style: {
+      marginRight: '0'
+    }
+  })))), model.isSeekRowAvailable && /*#__PURE__*/React.createElement("div", {
+    className: "goto-row-row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('goto-row-wrapper', {
+      'is-inactive': isGotoRowActive
+    }),
+    onClick: () => setIsGotoRowActive(false),
+    onFocus: () => setIsGotoRowActive(false),
+    role: "group"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "goto-row-text"
+  }, "Go to value"), /*#__PURE__*/React.createElement("div", {
+    className: "goto-row-input"
+  }, /*#__PURE__*/React.createElement("select", {
+    className: "custom-select",
+    onChange: event => {
+      var columnName = event.target.value;
+      onGotoValueSelectedColumnNameChanged(columnName);
+    },
+    value: gotoValueSelectedColumnName,
+    "aria-label": "column-name-select"
+  }, columns.map(column => /*#__PURE__*/React.createElement("option", {
+    key: column.name,
+    value: column.name
+  }, column.name)))), renderValueInput(), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    disabled: gotoValue === '',
+    onClick: () => {
+      onGotoValueSubmit(true);
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsArrowUp
+  })), /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    disabled: gotoValue === '',
+    onClick: () => {
+      onGotoValueSubmit(false);
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsArrowDown
+  }))), gotoValueError && /*#__PURE__*/React.createElement("div", {
+    className: "text-danger"
+  }, gotoValueError)))));
+}
+export default GotoRow;
+//# sourceMappingURL=GotoRow.js.map