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

package/dist/CustomTimeSelect.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/CustomTimeSelect.scss","../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACOA;EACE;;AAEA;EACE;EACA;EACA;EACA,eCkHY;EDjHZ;EACA;;AAEA;EACE,OCEK;;ADET;EACE,cCrBE;;ADwBJ;EACE,cCwHuB;;;ADnHzB;EACE,kBCpBa;;ADuBf;EACE;EACA;;AAGF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA,OCvCa;EDwCb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,kBA5D6B;;AA+D/B;EACE,OCtDa;EDuDb,kBCxDY;;AD0Dd;EACE;;AAGF;EACE,wBCqDY;EDpDZ,yBCoDY","file":"CustomTimeSelect.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$cs-option-btn-color: $dropdown-link-color;\n$cs-option-keyboard-selected-bg: rgba($primary, 0.5);\n$cs-option-hover-bg: $dropdown-link-hover-bg;\n$cs-option-hover-color: $dropdown-link-hover-color;\n\n.cs-container {\n  flex-wrap: nowrap;\n\n  .cs-dropdown .cs-btn {\n    display: flex;\n    direction: row;\n    justify-content: space-between;\n    border-radius: $border-radius;\n    border: $input-border-width solid $input-border-color;\n    min-width: 14rem;\n\n    .cs-caret {\n      color: $input-border-color;\n    }\n  }\n\n  .cs-dropdown-invalid .cs-btn-invalid {\n    border-color: $danger;\n  }\n\n  .cs-btn:focus {\n    border-color: $input-focus-border-color;\n  }\n}\n\n.cs-menu-container {\n  .cs-divider {\n    background-color: $black;\n  }\n\n  .cs-custom-container {\n    display: flex;\n    direction: row;\n  }\n\n  .custom-label {\n    padding: $input-btn-padding-y $input-btn-padding-x;\n  }\n  .cs-options {\n    max-height: 400px;\n    overflow: auto;\n  }\n  .cs-option-btn {\n    border: none;\n    width: 100%;\n    color: $cs-option-btn-color;\n    padding: $input-btn-padding-y $input-btn-padding-x;\n    white-space: nowrap;\n    text-decoration: none;\n    background-color: transparent;\n    text-align: left;\n    cursor: pointer;\n    user-select: none;\n    display: block;\n  }\n  .cs-option-btn.keyboard-active {\n    background-color: $cs-option-keyboard-selected-bg;\n  }\n\n  .cs-option-btn:hover {\n    color: $cs-option-hover-color;\n    background-color: $cs-option-hover-bg;\n  }\n  .cs-option-btn:focus {\n    outline: none;\n  }\n\n  .cs-options:first-child {\n    border-top-left-radius: $border-radius;\n    border-top-right-radius: $border-radius;\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:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  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:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  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"]}
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/CustomTimeSelect.scss","../scss/bootstrap_overrides.scss","../scss/util.scss"],"names":[],"mappings":"AAAA;ACQA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,eCgHY;ED/GZ;EACA;;AAEA;EElBF,iBAY4D;EAX5D;EACA,YAUyB;EATzB;EACA;EACA,WAO4D;EAE5D;EACA,OALQ;EAMR,QALS;EFUL;;AAIJ;EACE;;AAGF;EACE,cC7BE;;ADgCJ;EACE,cCgHuB;;;AD3GzB;EACE,kBC5Ba;;AD+Bf;EACE;EACA;;AAGF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA,OC/Ca;EDgDb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,kBAnE6B;;AAsE/B;EACE,OC9Da;ED+Db,kBChEY;;ADkEd;EACE;;AAGF;EACE,wBC6CY;ED5CZ,yBC4CY","file":"CustomTimeSelect.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$cs-option-btn-color: $dropdown-link-color;\n$cs-option-keyboard-selected-bg: rgba($primary, 0.5);\n$cs-option-hover-bg: $dropdown-link-hover-bg;\n$cs-option-hover-color: $dropdown-link-hover-color;\n\n.cs-container {\n  flex-wrap: nowrap;\n\n  .cs-dropdown .cs-btn {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    border-radius: $border-radius;\n    border: $input-border-width solid $input-border-color;\n    min-width: 14rem;\n\n    .cs-caret {\n      @include caret-icon;\n\n      margin-right: 4px;\n    }\n  }\n\n  .cs-dropdown:hover .cs-btn:not(:disabled) .cs-caret {\n    background-color: var(--dh-color-selector-hover-fg);\n  }\n\n  .cs-dropdown-invalid .cs-btn-invalid {\n    border-color: $danger;\n  }\n\n  .cs-btn:focus {\n    border-color: $input-focus-border-color;\n  }\n}\n\n.cs-menu-container {\n  .cs-divider {\n    background-color: $black;\n  }\n\n  .cs-custom-container {\n    display: flex;\n    direction: row;\n  }\n\n  .custom-label {\n    padding: $input-btn-padding-y $input-btn-padding-x;\n  }\n  .cs-options {\n    max-height: 400px;\n    overflow: auto;\n  }\n  .cs-option-btn {\n    border: none;\n    width: 100%;\n    color: $cs-option-btn-color;\n    padding: $input-btn-padding-y $input-btn-padding-x;\n    white-space: nowrap;\n    text-decoration: none;\n    background-color: transparent;\n    text-align: left;\n    cursor: pointer;\n    user-select: none;\n    display: block;\n  }\n  .cs-option-btn.keyboard-active {\n    background-color: $cs-option-keyboard-selected-bg;\n  }\n\n  .cs-option-btn:hover {\n    color: $cs-option-hover-color;\n    background-color: $cs-option-hover-bg;\n  }\n  .cs-option-btn:focus {\n    outline: none;\n  }\n\n  .cs-options:first-child {\n    border-top-left-radius: $border-radius;\n    border-top-right-radius: $border-radius;\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:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  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:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  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","// 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-foreground);\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}"]}

package/dist/CustomTimeSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomTimeSelect.d.ts","sourceRoot":"","sources":["../src/CustomTimeSelect.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CustomTimeSelect.d.ts","sourceRoot":"","sources":["../src/CustomTimeSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAW,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAG3D,OAAkB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,yBAAyB,CAAC;AAIjC,aAAK,yBAAyB;IAC5B,EAAE,OAAO;IACT,IAAI,SAAS;CACd;AAED,KAAK,qBAAqB,GAAG;IAC3B,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IAEnB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAC;IAE5C,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,aAAa,GAAG,MAAM,CAAC;AAE5B,KAAK,qBAAqB,GAAG;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,aAAa,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,cAAM,gBAAiB,SAAQ,SAAS,CACtC,qBAAqB,EACrB,qBAAqB,CACtB;IACC,MAAM,CAAC,yBAAyB,mCAA6B;IAE7D,MAAM,CAAC,qBAAqB,SAAO;IAEnC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAcjD;gBAEU,KAAK,EAAE,qBAAqB;IA8BxC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAE7C,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAE/C,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAE3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAEzC,eAAe,IAAI,MAAM;IAkBzB,aAAa,IAAI,IAAI;IAQrB,KAAK,IAAI,IAAI;IAIb,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKrC,YAAY,IAAI,IAAI;IAIpB,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,GAAG,IAAI;IAoDnE,oBAAoB,CAAC,SAAS,EAAE,yBAAyB,GAAG,IAAI;IAqDhE,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAanE,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAMpC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAInE,gBAAgB,IAAI,IAAI;IAqBxB,UAAU,IAAI,IAAI;IAIlB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUhC,gBAAgB,IAAI,IAAI;IAOxB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUtC,gBAAgB,IAAI,IAAI;IAQxB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAU5D,QAAQ,IAAI,IAAI;IAMhB,SAAS,CAAC,WAAW,UAAO,GAAG,IAAI;IAOnC,mBAAmB,IAAI,IAAI;IAW3B,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAmBzC,iBAAiB,IAAI,GAAG,CAAC,OAAO;IAoBhC,aAAa,IAAI,KAAK,CAAC,SAAS;IAwEhC,MAAM,IAAI,GAAG,CAAC,OAAO;CAsDtB;AAED,eAAe,gBAAgB,CAAC"}

package/dist/CustomTimeSelect.js

@@ -5,7 +5,7 @@ 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, { Component } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { vsCheck, dhSort } from '@deephaven/icons';
+import { vsCheck } from '@deephaven/icons';
 import { TimeUtils } from '@deephaven/utils';
 import classNames from 'classnames';
 import TimeInput from "./TimeInput.js";
@@ -481,10 +481,7 @@ class CustomTimeSelect extends Component {
             }),
             children: this.getSelectedText()
           }), /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-              icon: dhSort,
-              className: "cs-caret"
-            })
+            className: "cs-caret"
           }), /*#__PURE__*/_jsx(DropdownMenu, {
             isShown: menuIsOpen,
             actions: {

package/dist/CustomTimeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomTimeSelect.js","names":["React","Component","FontAwesomeIcon","vsCheck","dhSort","TimeUtils","classNames","TimeInput","DropdownMenu","jsx","_jsx","jsxs","_jsxs","CUSTOM_OPTION","MENU_NAVIGATION_DIRECTION","CustomTimeSelect","constructor","props","_defineProperty","value","valueToTime","toggleMenu","bind","handleMenuKeyDown","closeMenu","handleOptionClick","handleOptionFocus","handleMenuOpened","handleMenuExited","handleCustomInput","csContainer","createRef","menuContainer","button","input","state","keyboardOptionIndex","menuIsOpen","inputWidth","customTime","inputFocused","getSelectedText","options","placeholder","i","length","option","title","formatTime","setInputWidth","current","setState","getBoundingClientRect","width","focus","_this$button$current","updateInputValue","onChange","handleResize","event","_this$button$current2","key","updateFromCustom","stopPropagation","preventDefault","shiftKey","handleMenuNavigation","UP","DOWN","direction","menuOptionsLength","newKeyboardOptionIndex","focusInput","focusOption","scrollOptionIntoView","optionIndex","Number","currentTarget","timeToValue","update","updateAndClose","_this$button$current3","target","_this$menuContainer$c","activeOption","querySelector","HTMLElement","valueIndex","map","indexOf","_this$input$current","index","_this$menuContainer$c2","children","item","openMenu","updateKeyboardIndex","focusButton","arguments","undefined","_this$button$current4","_this$menuContainer$c3","offsetTop","DROP_DOWN_MENU_HEIGHT","scrollTop","renderMenuElement","className","ref","role","onKeyDown","onClick","style","renderOptions","icon","customText","matchFound","optionArray","concat","push","type","onFocus","onBlur","render","disabled","invalid","dataTestId","popperOptions","_objectSpread","placement","modifiers","preventOverflow","enabled","isShown","actions","menuElement","popperClassName","onMenuOpened","onMenuClosed","menuStyle","maxWidth","Math","round","time"],"sources":["../src/CustomTimeSelect.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { PopperOptions } from 'popper.js';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsCheck, dhSort, IconDefinition } from '@deephaven/icons';\nimport { TimeUtils } from '@deephaven/utils';\nimport classNames from 'classnames';\nimport TimeInput, { TimeInputElement } from './TimeInput';\nimport DropdownMenu from './menu-actions/DropdownMenu';\nimport './CustomTimeSelect.scss';\n\nconst CUSTOM_OPTION = -1;\n\nenum MENU_NAVIGATION_DIRECTION {\n  UP = 'UP',\n  DOWN = 'DOWN',\n}\n\ntype CustomTimeSelectProps = {\n  options: { title: string; value: number }[];\n  popperOptions: PopperOptions;\n  value: number | null;\n  onChange: (value: number) => void;\n  disabled: boolean;\n  icon: IconDefinition;\n  placeholder: string;\n  customText: string;\n  // Defaults to converting the value in milliseconds to time in seconds\n  valueToTime: (val: number | null) => number;\n  // Defaults to converting the time in seconds to value in milliseconds\n  timeToValue: (time: number) => number;\n  invalid: boolean;\n  'data-testid'?: string;\n};\n\ntype TimeInSeconds = number;\n\ntype CustomTimeSelectState = {\n  keyboardOptionIndex: number;\n  menuIsOpen: boolean;\n  inputWidth: number;\n  customTime: TimeInSeconds;\n  inputFocused: boolean;\n};\n\nclass CustomTimeSelect extends Component<\n  CustomTimeSelectProps,\n  CustomTimeSelectState\n> {\n  static MENU_NAVIGATION_DIRECTION = MENU_NAVIGATION_DIRECTION;\n\n  static DROP_DOWN_MENU_HEIGHT = 125;\n\n  static defaultProps: Partial<CustomTimeSelectProps> = {\n    onChange(): void {\n      // no-op\n    },\n    value: null,\n    disabled: false,\n    popperOptions: {},\n    icon: vsCheck,\n    customText: 'Custom',\n    placeholder: 'Select a time',\n    valueToTime: value => (value === null ? 0 : Math.round(value / 1000)),\n    timeToValue: time => time * 1000,\n    invalid: false,\n    'data-testid': undefined,\n  };\n\n  constructor(props: CustomTimeSelectProps) {\n    super(props);\n\n    const { value, valueToTime } = props;\n\n    this.toggleMenu = this.toggleMenu.bind(this);\n    this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);\n    this.closeMenu = this.closeMenu.bind(this);\n\n    this.handleOptionClick = this.handleOptionClick.bind(this);\n    this.handleOptionFocus = this.handleOptionFocus.bind(this);\n\n    this.handleMenuOpened = this.handleMenuOpened.bind(this);\n    this.handleMenuExited = this.handleMenuExited.bind(this);\n    this.handleCustomInput = this.handleCustomInput.bind(this);\n\n    this.csContainer = React.createRef();\n    this.menuContainer = React.createRef();\n    this.button = React.createRef();\n    this.input = React.createRef();\n\n    this.state = {\n      keyboardOptionIndex: 0,\n      menuIsOpen: false,\n      inputWidth: 100,\n      customTime: valueToTime(value),\n      inputFocused: false,\n    };\n  }\n\n  csContainer: React.RefObject<HTMLDivElement>;\n\n  menuContainer: React.RefObject<HTMLDivElement>;\n\n  button: React.RefObject<HTMLButtonElement>;\n\n  input: React.RefObject<TimeInputElement>;\n\n  getSelectedText(): string {\n    const { options, value, placeholder } = this.props;\n    const { customTime } = this.state;\n\n    if (value === null) {\n      return placeholder;\n    }\n\n    for (let i = 0; i < options.length; i += 1) {\n      const option = options[i];\n      if (option.value === value) {\n        return option.title;\n      }\n    }\n\n    return TimeUtils.formatTime(customTime);\n  }\n\n  setInputWidth(): void {\n    if (this.csContainer.current) {\n      this.setState({\n        inputWidth: this.csContainer.current.getBoundingClientRect().width,\n      });\n    }\n  }\n\n  focus(): void {\n    this.button.current?.focus();\n  }\n\n  updateInputValue(value: number): void {\n    const { onChange } = this.props;\n    onChange(value);\n  }\n\n  handleResize(): void {\n    this.setInputWidth();\n  }\n\n  handleMenuKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {\n    const { keyboardOptionIndex, inputFocused } = this.state;\n    const { options } = this.props;\n\n    switch (event.key) {\n      case 'Enter':\n      case ' ': // Space Bar\n        if (inputFocused) {\n          this.updateFromCustom();\n        } else {\n          this.updateInputValue(options[keyboardOptionIndex].value);\n        }\n        this.closeMenu();\n        this.button.current?.focus();\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'Tab':\n        if (event.shiftKey) {\n          this.handleMenuNavigation(\n            CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP\n          );\n        } else {\n          this.handleMenuNavigation(\n            CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN\n          );\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n        this.handleMenuNavigation(\n          CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP\n        );\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'ArrowDown':\n        this.handleMenuNavigation(\n          CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN\n        );\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'Escape':\n        this.closeMenu();\n        break;\n      default:\n        break;\n    }\n  }\n\n  handleMenuNavigation(direction: MENU_NAVIGATION_DIRECTION): void {\n    const { keyboardOptionIndex, inputFocused } = this.state;\n    const { options } = this.props;\n    const menuOptionsLength = options.length;\n    let newKeyboardOptionIndex = keyboardOptionIndex;\n    switch (direction) {\n      case CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP:\n        if (!inputFocused && keyboardOptionIndex === 0) {\n          this.focusInput();\n          break;\n        } else if (inputFocused) {\n          this.focusOption(keyboardOptionIndex);\n        }\n\n        if (keyboardOptionIndex > 0 && !inputFocused) {\n          newKeyboardOptionIndex =\n            (newKeyboardOptionIndex - 1) % menuOptionsLength;\n          this.setState({\n            keyboardOptionIndex: newKeyboardOptionIndex,\n          });\n        } else if (keyboardOptionIndex === 0) {\n          newKeyboardOptionIndex = menuOptionsLength - 1;\n          this.setState({\n            keyboardOptionIndex: newKeyboardOptionIndex,\n          });\n        }\n        this.scrollOptionIntoView(newKeyboardOptionIndex);\n        break;\n      case CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN:\n        if (!inputFocused && keyboardOptionIndex === menuOptionsLength - 1) {\n          this.focusInput();\n          break;\n        } else if (inputFocused) {\n          this.focusOption(keyboardOptionIndex);\n        }\n\n        if (\n          keyboardOptionIndex < menuOptionsLength &&\n          !(inputFocused && keyboardOptionIndex === 0)\n        ) {\n          newKeyboardOptionIndex =\n            (newKeyboardOptionIndex + 1) % menuOptionsLength;\n          this.setState({\n            keyboardOptionIndex: newKeyboardOptionIndex,\n          });\n        }\n        this.scrollOptionIntoView(newKeyboardOptionIndex);\n        break;\n      default:\n        break;\n    }\n  }\n\n  handleOptionClick(event: React.MouseEvent<HTMLButtonElement>): void {\n    const optionIndex = Number(event.currentTarget.value);\n    const { options, timeToValue } = this.props;\n    const { customTime } = this.state;\n\n    if (optionIndex === CUSTOM_OPTION) {\n      const update = timeToValue(customTime);\n      this.updateAndClose(update);\n    } else {\n      this.updateAndClose(options[optionIndex].value);\n    }\n  }\n\n  updateAndClose(update: number): void {\n    this.updateInputValue(update);\n    this.closeMenu();\n    this.button.current?.focus();\n  }\n\n  handleOptionFocus(event: React.FocusEvent<HTMLButtonElement>): void {\n    this.setState({ keyboardOptionIndex: Number(event.target.value) });\n  }\n\n  handleMenuOpened(): void {\n    const { options, value } = this.props;\n    const { keyboardOptionIndex } = this.state;\n    this.scrollOptionIntoView(keyboardOptionIndex);\n    const activeOption = this.menuContainer.current?.querySelector(\n      '.cs-option-btn.keyboard-active'\n    );\n    if (activeOption instanceof HTMLElement) {\n      activeOption.focus();\n    }\n\n    if (value === null) {\n      return;\n    }\n    const valueIndex = options.map(option => option.value).indexOf(value);\n    if (valueIndex < 0) {\n      // The custom option should be selected\n      this.focusInput();\n    }\n  }\n\n  focusInput(): void {\n    this.input.current?.focus();\n  }\n\n  focusOption(index: number): void {\n    const options = this.menuContainer.current?.querySelector('.cs-options');\n    if (options && options.children != null) {\n      const option = options.children.item(index);\n      if (option instanceof HTMLElement) {\n        option.focus();\n      }\n    }\n  }\n\n  handleMenuExited(): void {\n    const { menuIsOpen } = this.state;\n    if (menuIsOpen) {\n      this.setState({ menuIsOpen: false, keyboardOptionIndex: 0 });\n    }\n  }\n\n  handleCustomInput(value: number): void {\n    const { timeToValue } = this.props;\n\n    const update = timeToValue(value);\n    this.updateInputValue(update);\n    this.setState({\n      customTime: value,\n    });\n  }\n\n  updateFromCustom(): void {\n    const { timeToValue } = this.props;\n    const { customTime } = this.state;\n\n    const update = timeToValue(customTime);\n    this.updateInputValue(update);\n  }\n\n  toggleMenu(event: React.MouseEvent<HTMLButtonElement>): void {\n    const { menuIsOpen } = this.state;\n    if (menuIsOpen) {\n      this.closeMenu();\n    } else {\n      this.openMenu();\n    }\n    event.stopPropagation();\n  }\n\n  openMenu(): void {\n    this.updateKeyboardIndex();\n    this.setInputWidth();\n    this.setState({ menuIsOpen: true });\n  }\n\n  closeMenu(focusButton = true): void {\n    this.setState({ menuIsOpen: false });\n    if (focusButton) {\n      this.button.current?.focus();\n    }\n  }\n\n  updateKeyboardIndex(): void {\n    const { options, value } = this.props;\n    if (value === null) {\n      return;\n    }\n    const valueIndex = options.map(option => option.value).indexOf(value);\n    if (valueIndex > 0) {\n      this.setState({ keyboardOptionIndex: valueIndex });\n    }\n  }\n\n  scrollOptionIntoView(index: number): void {\n    const options = this.menuContainer.current?.querySelector('.cs-options');\n    if (options && options.children != null) {\n      const activeOption = options.children.item(index);\n      if (\n        activeOption instanceof HTMLElement &&\n        activeOption.offsetTop > CustomTimeSelect.DROP_DOWN_MENU_HEIGHT\n      ) {\n        options.scrollTop =\n          activeOption.offsetTop - CustomTimeSelect.DROP_DOWN_MENU_HEIGHT;\n      } else if (\n        (activeOption instanceof HTMLElement && activeOption.offsetTop < 0) ||\n        index === 0\n      ) {\n        options.scrollTop = 0;\n      }\n    }\n  }\n\n  renderMenuElement(): JSX.Element {\n    const { inputWidth } = this.state;\n    return (\n      <div\n        className=\"cs-menu-container\"\n        ref={this.menuContainer}\n        role=\"presentation\"\n        onKeyDown={this.handleMenuKeyDown}\n        onClick={event => {\n          event.stopPropagation();\n        }}\n        style={{ width: inputWidth }}\n      >\n        <div className=\"cs-options-container\">\n          <div className=\"cs-options\">{this.renderOptions()}</div>\n        </div>\n      </div>\n    );\n  }\n\n  renderOptions(): React.ReactNode {\n    const { options, value, icon, customText } = this.props;\n    const { keyboardOptionIndex, customTime, inputFocused } = this.state;\n\n    let matchFound = false;\n    const optionArray: JSX.Element[] = [];\n    for (let index = 0; index < options.length; index += 1) {\n      const option = options[index];\n      const key = `option-${index}-${option.value}`;\n      matchFound = matchFound || option.value === value;\n      optionArray.push(\n        <button\n          key={key}\n          type=\"button\"\n          value={index}\n          className={classNames('cs-option-btn', {\n            'keyboard-active': keyboardOptionIndex === index && !inputFocused,\n          })}\n          onClick={this.handleOptionClick}\n          onFocus={this.handleOptionFocus}\n        >\n          {option.value === value && (\n            <FontAwesomeIcon icon={icon} className=\"mr-2\" />\n          )}\n          {option.value !== value && <span className=\"mr-4\" />}\n          {option.title}\n        </button>\n      );\n    }\n\n    optionArray.push(<hr className=\"cs-divider\" key=\"option-divider\" />);\n\n    optionArray.push(\n      <button\n        key=\"option-custom-label\"\n        type=\"button\"\n        value={CUSTOM_OPTION}\n        className={classNames('cs-option-btn', {\n          'keyboard-active': inputFocused,\n        })}\n        onClick={this.handleOptionClick}\n        onFocus={this.handleOptionFocus}\n      >\n        {!matchFound && value !== null ? (\n          <FontAwesomeIcon icon={icon} className=\"mr-2\" />\n        ) : (\n          <span className=\"mr-4\" />\n        )}\n        {customText}\n      </button>\n    );\n\n    optionArray.push(\n      <div key=\"cs-custom-container\" className=\"cs-custom-container\">\n        <span className=\"mr-2\" />\n        <TimeInput\n          key=\"option-input\"\n          ref={this.input}\n          onChange={this.handleCustomInput}\n          value={customTime}\n          onFocus={() => this.setState({ inputFocused: true })}\n          onBlur={() => this.setState({ inputFocused: false })}\n        />\n        <span className=\"ml-2\" />\n      </div>\n    );\n\n    optionArray.push(<hr key=\"option-end\" className=\"mb-2\" />);\n\n    return optionArray;\n  }\n\n  render(): JSX.Element {\n    const { disabled, invalid, value, 'data-testid': dataTestId } = this.props;\n    const { menuIsOpen } = this.state;\n    let { popperOptions } = this.props;\n    popperOptions = {\n      placement: 'bottom-end',\n      modifiers: {\n        preventOverflow: { enabled: false },\n      },\n      ...popperOptions,\n    };\n\n    return (\n      <div\n        className=\"input-group cs-container context-menu\"\n        ref={this.csContainer}\n        data-testid={dataTestId}\n      >\n        <div\n          className={classNames('input-group-append cs-dropdown', {\n            'cs-dropdown-invalid': invalid,\n          })}\n        >\n          <button\n            type=\"button\"\n            className={classNames('btn cs-btn form-control', {\n              'cs-btn-invalid': invalid,\n            })}\n            ref={this.button}\n            onClick={this.toggleMenu}\n            disabled={disabled}\n          >\n            <span\n              className={classNames({\n                'text-muted': value === null,\n              })}\n            >\n              {this.getSelectedText()}\n            </span>\n            <span>\n              <FontAwesomeIcon icon={dhSort} className=\"cs-caret\" />\n            </span>\n            <DropdownMenu\n              isShown={menuIsOpen}\n              actions={{ menuElement: this.renderMenuElement() }}\n              popperOptions={popperOptions}\n              popperClassName=\"CustomTimeSelect\"\n              onMenuOpened={this.handleMenuOpened}\n              onMenuClosed={this.handleMenuExited}\n              menuStyle={{ maxWidth: '100rem' }}\n            />\n          </button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default CustomTimeSelect;\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAExC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,OAAO,EAAEC,MAAM,QAAwB,kBAAkB;AAClE,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,UAAU,MAAM,YAAY;AAAC,OAC7BC,SAAS;AAAA,OACTC,YAAY;AAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGnB,IAAMC,aAAa,GAAG,CAAC,CAAC;AAAC,IAEpBC,yBAAyB;AAAA,WAAzBA,yBAAyB;EAAzBA,yBAAyB;EAAzBA,yBAAyB;AAAA,GAAzBA,yBAAyB,KAAzBA,yBAAyB;AAgC9B,MAAMC,gBAAgB,SAASd,SAAS,CAGtC;EAqBAe,WAAWA,CAACC,KAA4B,EAAE;IACxC,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAEb,IAAM;MAAEC,KAAK;MAAEC;IAAY,CAAC,GAAGH,KAAK;IAEpC,IAAI,CAACI,UAAU,GAAG,IAAI,CAACA,UAAU,CAACC,IAAI,CAAC,IAAI,CAAC;IAC5C,IAAI,CAACC,iBAAiB,GAAG,IAAI,CAACA,iBAAiB,CAACD,IAAI,CAAC,IAAI,CAAC;IAC1D,IAAI,CAACE,SAAS,GAAG,IAAI,CAACA,SAAS,CAACF,IAAI,CAAC,IAAI,CAAC;IAE1C,IAAI,CAACG,iBAAiB,GAAG,IAAI,CAACA,iBAAiB,CAACH,IAAI,CAAC,IAAI,CAAC;IAC1D,IAAI,CAACI,iBAAiB,GAAG,IAAI,CAACA,iBAAiB,CAACJ,IAAI,CAAC,IAAI,CAAC;IAE1D,IAAI,CAACK,gBAAgB,GAAG,IAAI,CAACA,gBAAgB,CAACL,IAAI,CAAC,IAAI,CAAC;IACxD,IAAI,CAACM,gBAAgB,GAAG,IAAI,CAACA,gBAAgB,CAACN,IAAI,CAAC,IAAI,CAAC;IACxD,IAAI,CAACO,iBAAiB,GAAG,IAAI,CAACA,iBAAiB,CAACP,IAAI,CAAC,IAAI,CAAC;IAE1D,IAAI,CAACQ,WAAW,gBAAG9B,KAAK,CAAC+B,SAAS,CAAC,CAAC;IACpC,IAAI,CAACC,aAAa,gBAAGhC,KAAK,CAAC+B,SAAS,CAAC,CAAC;IACtC,IAAI,CAACE,MAAM,gBAAGjC,KAAK,CAAC+B,SAAS,CAAC,CAAC;IAC/B,IAAI,CAACG,KAAK,gBAAGlC,KAAK,CAAC+B,SAAS,CAAC,CAAC;IAE9B,IAAI,CAACI,KAAK,GAAG;MACXC,mBAAmB,EAAE,CAAC;MACtBC,UAAU,EAAE,KAAK;MACjBC,UAAU,EAAE,GAAG;MACfC,UAAU,EAAEnB,WAAW,CAACD,KAAK,CAAC;MAC9BqB,YAAY,EAAE;IAChB,CAAC;EACH;EAUAC,eAAeA,CAAA,EAAW;IACxB,IAAM;MAAEC,OAAO;MAAEvB,KAAK;MAAEwB;IAAY,CAAC,GAAG,IAAI,CAAC1B,KAAK;IAClD,IAAM;MAAEsB;IAAW,CAAC,GAAG,IAAI,CAACJ,KAAK;IAEjC,IAAIhB,KAAK,KAAK,IAAI,EAAE;MAClB,OAAOwB,WAAW;IACpB;IAEA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,OAAO,CAACG,MAAM,EAAED,CAAC,IAAI,CAAC,EAAE;MAC1C,IAAME,MAAM,GAAGJ,OAAO,CAACE,CAAC,CAAC;MACzB,IAAIE,MAAM,CAAC3B,KAAK,KAAKA,KAAK,EAAE;QAC1B,OAAO2B,MAAM,CAACC,KAAK;MACrB;IACF;IAEA,OAAO1C,SAAS,CAAC2C,UAAU,CAACT,UAAU,CAAC;EACzC;EAEAU,aAAaA,CAAA,EAAS;IACpB,IAAI,IAAI,CAACnB,WAAW,CAACoB,OAAO,EAAE;MAC5B,IAAI,CAACC,QAAQ,CAAC;QACZb,UAAU,EAAE,IAAI,CAACR,WAAW,CAACoB,OAAO,CAACE,qBAAqB,CAAC,CAAC,CAACC;MAC/D,CAAC,CAAC;IACJ;EACF;EAEAC,KAAKA,CAAA,EAAS;IAAA,IAAAC,oBAAA;IACZ,CAAAA,oBAAA,OAAI,CAACtB,MAAM,CAACiB,OAAO,cAAAK,oBAAA,uBAAnBA,oBAAA,CAAqBD,KAAK,CAAC,CAAC;EAC9B;EAEAE,gBAAgBA,CAACrC,KAAa,EAAQ;IACpC,IAAM;MAAEsC;IAAS,CAAC,GAAG,IAAI,CAACxC,KAAK;IAC/BwC,QAAQ,CAACtC,KAAK,CAAC;EACjB;EAEAuC,YAAYA,CAAA,EAAS;IACnB,IAAI,CAACT,aAAa,CAAC,CAAC;EACtB;EAEA1B,iBAAiBA,CAACoC,KAA0C,EAAQ;IAAA,IAAAC,qBAAA;IAClE,IAAM;MAAExB,mBAAmB;MAAEI;IAAa,CAAC,GAAG,IAAI,CAACL,KAAK;IACxD,IAAM;MAAEO;IAAQ,CAAC,GAAG,IAAI,CAACzB,KAAK;IAE9B,QAAQ0C,KAAK,CAACE,GAAG;MACf,KAAK,OAAO;MACZ,KAAK,GAAG;QAAE;QACR,IAAIrB,YAAY,EAAE;UAChB,IAAI,CAACsB,gBAAgB,CAAC,CAAC;QACzB,CAAC,MAAM;UACL,IAAI,CAACN,gBAAgB,CAACd,OAAO,CAACN,mBAAmB,CAAC,CAACjB,KAAK,CAAC;QAC3D;QACA,IAAI,CAACK,SAAS,CAAC,CAAC;QAChB,CAAAoC,qBAAA,OAAI,CAAC3B,MAAM,CAACiB,OAAO,cAAAU,qBAAA,uBAAnBA,qBAAA,CAAqBN,KAAK,CAAC,CAAC;QAC5BK,KAAK,CAACI,eAAe,CAAC,CAAC;QACvBJ,KAAK,CAACK,cAAc,CAAC,CAAC;QACtB;MACF,KAAK,KAAK;QACR,IAAIL,KAAK,CAACM,QAAQ,EAAE;UAClB,IAAI,CAACC,oBAAoB,CACvBnD,gBAAgB,CAACD,yBAAyB,CAACqD,EAC7C,CAAC;QACH,CAAC,MAAM;UACL,IAAI,CAACD,oBAAoB,CACvBnD,gBAAgB,CAACD,yBAAyB,CAACsD,IAC7C,CAAC;QACH;QACAT,KAAK,CAACI,eAAe,CAAC,CAAC;QACvBJ,KAAK,CAACK,cAAc,CAAC,CAAC;QACtB;MACF,KAAK,SAAS;QACZ,IAAI,CAACE,oBAAoB,CACvBnD,gBAAgB,CAACD,yBAAyB,CAACqD,EAC7C,CAAC;QACDR,KAAK,CAACI,eAAe,CAAC,CAAC;QACvBJ,KAAK,CAACK,cAAc,CAAC,CAAC;QACtB;MACF,KAAK,WAAW;QACd,IAAI,CAACE,oBAAoB,CACvBnD,gBAAgB,CAACD,yBAAyB,CAACsD,IAC7C,CAAC;QACDT,KAAK,CAACI,eAAe,CAAC,CAAC;QACvBJ,KAAK,CAACK,cAAc,CAAC,CAAC;QACtB;MACF,KAAK,QAAQ;QACX,IAAI,CAACxC,SAAS,CAAC,CAAC;QAChB;MACF;QACE;IACJ;EACF;EAEA0C,oBAAoBA,CAACG,SAAoC,EAAQ;IAC/D,IAAM;MAAEjC,mBAAmB;MAAEI;IAAa,CAAC,GAAG,IAAI,CAACL,KAAK;IACxD,IAAM;MAAEO;IAAQ,CAAC,GAAG,IAAI,CAACzB,KAAK;IAC9B,IAAMqD,iBAAiB,GAAG5B,OAAO,CAACG,MAAM;IACxC,IAAI0B,sBAAsB,GAAGnC,mBAAmB;IAChD,QAAQiC,SAAS;MACf,KAAKtD,gBAAgB,CAACD,yBAAyB,CAACqD,EAAE;QAChD,IAAI,CAAC3B,YAAY,IAAIJ,mBAAmB,KAAK,CAAC,EAAE;UAC9C,IAAI,CAACoC,UAAU,CAAC,CAAC;UACjB;QACF,CAAC,MAAM,IAAIhC,YAAY,EAAE;UACvB,IAAI,CAACiC,WAAW,CAACrC,mBAAmB,CAAC;QACvC;QAEA,IAAIA,mBAAmB,GAAG,CAAC,IAAI,CAACI,YAAY,EAAE;UAC5C+B,sBAAsB,GACpB,CAACA,sBAAsB,GAAG,CAAC,IAAID,iBAAiB;UAClD,IAAI,CAACnB,QAAQ,CAAC;YACZf,mBAAmB,EAAEmC;UACvB,CAAC,CAAC;QACJ,CAAC,MAAM,IAAInC,mBAAmB,KAAK,CAAC,EAAE;UACpCmC,sBAAsB,GAAGD,iBAAiB,GAAG,CAAC;UAC9C,IAAI,CAACnB,QAAQ,CAAC;YACZf,mBAAmB,EAAEmC;UACvB,CAAC,CAAC;QACJ;QACA,IAAI,CAACG,oBAAoB,CAACH,sBAAsB,CAAC;QACjD;MACF,KAAKxD,gBAAgB,CAACD,yBAAyB,CAACsD,IAAI;QAClD,IAAI,CAAC5B,YAAY,IAAIJ,mBAAmB,KAAKkC,iBAAiB,GAAG,CAAC,EAAE;UAClE,IAAI,CAACE,UAAU,CAAC,CAAC;UACjB;QACF,CAAC,MAAM,IAAIhC,YAAY,EAAE;UACvB,IAAI,CAACiC,WAAW,CAACrC,mBAAmB,CAAC;QACvC;QAEA,IACEA,mBAAmB,GAAGkC,iBAAiB,IACvC,EAAE9B,YAAY,IAAIJ,mBAAmB,KAAK,CAAC,CAAC,EAC5C;UACAmC,sBAAsB,GACpB,CAACA,sBAAsB,GAAG,CAAC,IAAID,iBAAiB;UAClD,IAAI,CAACnB,QAAQ,CAAC;YACZf,mBAAmB,EAAEmC;UACvB,CAAC,CAAC;QACJ;QACA,IAAI,CAACG,oBAAoB,CAACH,sBAAsB,CAAC;QACjD;MACF;QACE;IACJ;EACF;EAEA9C,iBAAiBA,CAACkC,KAA0C,EAAQ;IAClE,IAAMgB,WAAW,GAAGC,MAAM,CAACjB,KAAK,CAACkB,aAAa,CAAC1D,KAAK,CAAC;IACrD,IAAM;MAAEuB,OAAO;MAAEoC;IAAY,CAAC,GAAG,IAAI,CAAC7D,KAAK;IAC3C,IAAM;MAAEsB;IAAW,CAAC,GAAG,IAAI,CAACJ,KAAK;IAEjC,IAAIwC,WAAW,KAAK9D,aAAa,EAAE;MACjC,IAAMkE,MAAM,GAAGD,WAAW,CAACvC,UAAU,CAAC;MACtC,IAAI,CAACyC,cAAc,CAACD,MAAM,CAAC;IAC7B,CAAC,MAAM;MACL,IAAI,CAACC,cAAc,CAACtC,OAAO,CAACiC,WAAW,CAAC,CAACxD,KAAK,CAAC;IACjD;EACF;EAEA6D,cAAcA,CAACD,MAAc,EAAQ;IAAA,IAAAE,qBAAA;IACnC,IAAI,CAACzB,gBAAgB,CAACuB,MAAM,CAAC;IAC7B,IAAI,CAACvD,SAAS,CAAC,CAAC;IAChB,CAAAyD,qBAAA,OAAI,CAAChD,MAAM,CAACiB,OAAO,cAAA+B,qBAAA,uBAAnBA,qBAAA,CAAqB3B,KAAK,CAAC,CAAC;EAC9B;EAEA5B,iBAAiBA,CAACiC,KAA0C,EAAQ;IAClE,IAAI,CAACR,QAAQ,CAAC;MAAEf,mBAAmB,EAAEwC,MAAM,CAACjB,KAAK,CAACuB,MAAM,CAAC/D,KAAK;IAAE,CAAC,CAAC;EACpE;EAEAQ,gBAAgBA,CAAA,EAAS;IAAA,IAAAwD,qBAAA;IACvB,IAAM;MAAEzC,OAAO;MAAEvB;IAAM,CAAC,GAAG,IAAI,CAACF,KAAK;IACrC,IAAM;MAAEmB;IAAoB,CAAC,GAAG,IAAI,CAACD,KAAK;IAC1C,IAAI,CAACuC,oBAAoB,CAACtC,mBAAmB,CAAC;IAC9C,IAAMgD,YAAY,IAAAD,qBAAA,GAAG,IAAI,CAACnD,aAAa,CAACkB,OAAO,cAAAiC,qBAAA,uBAA1BA,qBAAA,CAA4BE,aAAa,CAC5D,gCACF,CAAC;IACD,IAAID,YAAY,YAAYE,WAAW,EAAE;MACvCF,YAAY,CAAC9B,KAAK,CAAC,CAAC;IACtB;IAEA,IAAInC,KAAK,KAAK,IAAI,EAAE;MAClB;IACF;IACA,IAAMoE,UAAU,GAAG7C,OAAO,CAAC8C,GAAG,CAAC1C,MAAM,IAAIA,MAAM,CAAC3B,KAAK,CAAC,CAACsE,OAAO,CAACtE,KAAK,CAAC;IACrE,IAAIoE,UAAU,GAAG,CAAC,EAAE;MAClB;MACA,IAAI,CAACf,UAAU,CAAC,CAAC;IACnB;EACF;EAEAA,UAAUA,CAAA,EAAS;IAAA,IAAAkB,mBAAA;IACjB,CAAAA,mBAAA,OAAI,CAACxD,KAAK,CAACgB,OAAO,cAAAwC,mBAAA,uBAAlBA,mBAAA,CAAoBpC,KAAK,CAAC,CAAC;EAC7B;EAEAmB,WAAWA,CAACkB,KAAa,EAAQ;IAAA,IAAAC,sBAAA;IAC/B,IAAMlD,OAAO,IAAAkD,sBAAA,GAAG,IAAI,CAAC5D,aAAa,CAACkB,OAAO,cAAA0C,sBAAA,uBAA1BA,sBAAA,CAA4BP,aAAa,CAAC,aAAa,CAAC;IACxE,IAAI3C,OAAO,IAAIA,OAAO,CAACmD,QAAQ,IAAI,IAAI,EAAE;MACvC,IAAM/C,MAAM,GAAGJ,OAAO,CAACmD,QAAQ,CAACC,IAAI,CAACH,KAAK,CAAC;MAC3C,IAAI7C,MAAM,YAAYwC,WAAW,EAAE;QACjCxC,MAAM,CAACQ,KAAK,CAAC,CAAC;MAChB;IACF;EACF;EAEA1B,gBAAgBA,CAAA,EAAS;IACvB,IAAM;MAAES;IAAW,CAAC,GAAG,IAAI,CAACF,KAAK;IACjC,IAAIE,UAAU,EAAE;MACd,IAAI,CAACc,QAAQ,CAAC;QAAEd,UAAU,EAAE,KAAK;QAAED,mBAAmB,EAAE;MAAE,CAAC,CAAC;IAC9D;EACF;EAEAP,iBAAiBA,CAACV,KAAa,EAAQ;IACrC,IAAM;MAAE2D;IAAY,CAAC,GAAG,IAAI,CAAC7D,KAAK;IAElC,IAAM8D,MAAM,GAAGD,WAAW,CAAC3D,KAAK,CAAC;IACjC,IAAI,CAACqC,gBAAgB,CAACuB,MAAM,CAAC;IAC7B,IAAI,CAAC5B,QAAQ,CAAC;MACZZ,UAAU,EAAEpB;IACd,CAAC,CAAC;EACJ;EAEA2C,gBAAgBA,CAAA,EAAS;IACvB,IAAM;MAAEgB;IAAY,CAAC,GAAG,IAAI,CAAC7D,KAAK;IAClC,IAAM;MAAEsB;IAAW,CAAC,GAAG,IAAI,CAACJ,KAAK;IAEjC,IAAM4C,MAAM,GAAGD,WAAW,CAACvC,UAAU,CAAC;IACtC,IAAI,CAACiB,gBAAgB,CAACuB,MAAM,CAAC;EAC/B;EAEA1D,UAAUA,CAACsC,KAA0C,EAAQ;IAC3D,IAAM;MAAEtB;IAAW,CAAC,GAAG,IAAI,CAACF,KAAK;IACjC,IAAIE,UAAU,EAAE;MACd,IAAI,CAACb,SAAS,CAAC,CAAC;IAClB,CAAC,MAAM;MACL,IAAI,CAACuE,QAAQ,CAAC,CAAC;IACjB;IACApC,KAAK,CAACI,eAAe,CAAC,CAAC;EACzB;EAEAgC,QAAQA,CAAA,EAAS;IACf,IAAI,CAACC,mBAAmB,CAAC,CAAC;IAC1B,IAAI,CAAC/C,aAAa,CAAC,CAAC;IACpB,IAAI,CAACE,QAAQ,CAAC;MAAEd,UAAU,EAAE;IAAK,CAAC,CAAC;EACrC;EAEAb,SAASA,CAAA,EAA2B;IAAA,IAA1ByE,WAAW,GAAAC,SAAA,CAAArD,MAAA,QAAAqD,SAAA,QAAAC,SAAA,GAAAD,SAAA,MAAG,IAAI;IAC1B,IAAI,CAAC/C,QAAQ,CAAC;MAAEd,UAAU,EAAE;IAAM,CAAC,CAAC;IACpC,IAAI4D,WAAW,EAAE;MAAA,IAAAG,qBAAA;MACf,CAAAA,qBAAA,OAAI,CAACnE,MAAM,CAACiB,OAAO,cAAAkD,qBAAA,uBAAnBA,qBAAA,CAAqB9C,KAAK,CAAC,CAAC;IAC9B;EACF;EAEA0C,mBAAmBA,CAAA,EAAS;IAC1B,IAAM;MAAEtD,OAAO;MAAEvB;IAAM,CAAC,GAAG,IAAI,CAACF,KAAK;IACrC,IAAIE,KAAK,KAAK,IAAI,EAAE;MAClB;IACF;IACA,IAAMoE,UAAU,GAAG7C,OAAO,CAAC8C,GAAG,CAAC1C,MAAM,IAAIA,MAAM,CAAC3B,KAAK,CAAC,CAACsE,OAAO,CAACtE,KAAK,CAAC;IACrE,IAAIoE,UAAU,GAAG,CAAC,EAAE;MAClB,IAAI,CAACpC,QAAQ,CAAC;QAAEf,mBAAmB,EAAEmD;MAAW,CAAC,CAAC;IACpD;EACF;EAEAb,oBAAoBA,CAACiB,KAAa,EAAQ;IAAA,IAAAU,sBAAA;IACxC,IAAM3D,OAAO,IAAA2D,sBAAA,GAAG,IAAI,CAACrE,aAAa,CAACkB,OAAO,cAAAmD,sBAAA,uBAA1BA,sBAAA,CAA4BhB,aAAa,CAAC,aAAa,CAAC;IACxE,IAAI3C,OAAO,IAAIA,OAAO,CAACmD,QAAQ,IAAI,IAAI,EAAE;MACvC,IAAMT,YAAY,GAAG1C,OAAO,CAACmD,QAAQ,CAACC,IAAI,CAACH,KAAK,CAAC;MACjD,IACEP,YAAY,YAAYE,WAAW,IACnCF,YAAY,CAACkB,SAAS,GAAGvF,gBAAgB,CAACwF,qBAAqB,EAC/D;QACA7D,OAAO,CAAC8D,SAAS,GACfpB,YAAY,CAACkB,SAAS,GAAGvF,gBAAgB,CAACwF,qBAAqB;MACnE,CAAC,MAAM,IACJnB,YAAY,YAAYE,WAAW,IAAIF,YAAY,CAACkB,SAAS,GAAG,CAAC,IAClEX,KAAK,KAAK,CAAC,EACX;QACAjD,OAAO,CAAC8D,SAAS,GAAG,CAAC;MACvB;IACF;EACF;EAEAC,iBAAiBA,CAAA,EAAgB;IAC/B,IAAM;MAAEnE;IAAW,CAAC,GAAG,IAAI,CAACH,KAAK;IACjC,oBACEzB,IAAA;MACEgG,SAAS,EAAC,mBAAmB;MAC7BC,GAAG,EAAE,IAAI,CAAC3E,aAAc;MACxB4E,IAAI,EAAC,cAAc;MACnBC,SAAS,EAAE,IAAI,CAACtF,iBAAkB;MAClCuF,OAAO,EAAEnD,KAAK,IAAI;QAChBA,KAAK,CAACI,eAAe,CAAC,CAAC;MACzB,CAAE;MACFgD,KAAK,EAAE;QAAE1D,KAAK,EAAEf;MAAW,CAAE;MAAAuD,QAAA,eAE7BnF,IAAA;QAAKgG,SAAS,EAAC,sBAAsB;QAAAb,QAAA,eACnCnF,IAAA;UAAKgG,SAAS,EAAC,YAAY;UAAAb,QAAA,EAAE,IAAI,CAACmB,aAAa,CAAC;QAAC,CAAM;MAAC,CACrD;IAAC,CACH,CAAC;EAEV;EAEAA,aAAaA,CAAA,EAAoB;IAC/B,IAAM;MAAEtE,OAAO;MAAEvB,KAAK;MAAE8F,IAAI;MAAEC;IAAW,CAAC,GAAG,IAAI,CAACjG,KAAK;IACvD,IAAM;MAAEmB,mBAAmB;MAAEG,UAAU;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACL,KAAK;IAEpE,IAAIgF,UAAU,GAAG,KAAK;IACtB,IAAMC,WAA0B,GAAG,EAAE;IACrC,KAAK,IAAIzB,KAAK,GAAG,CAAC,EAAEA,KAAK,GAAGjD,OAAO,CAACG,MAAM,EAAE8C,KAAK,IAAI,CAAC,EAAE;MACtD,IAAM7C,MAAM,GAAGJ,OAAO,CAACiD,KAAK,CAAC;MAC7B,IAAM9B,GAAG,aAAAwD,MAAA,CAAa1B,KAAK,OAAA0B,MAAA,CAAIvE,MAAM,CAAC3B,KAAK,CAAE;MAC7CgG,UAAU,GAAGA,UAAU,IAAIrE,MAAM,CAAC3B,KAAK,KAAKA,KAAK;MACjDiG,WAAW,CAACE,IAAI,eACd1G,KAAA;QAEE2G,IAAI,EAAC,QAAQ;QACbpG,KAAK,EAAEwE,KAAM;QACbe,SAAS,EAAEpG,UAAU,CAAC,eAAe,EAAE;UACrC,iBAAiB,EAAE8B,mBAAmB,KAAKuD,KAAK,IAAI,CAACnD;QACvD,CAAC,CAAE;QACHsE,OAAO,EAAE,IAAI,CAACrF,iBAAkB;QAChC+F,OAAO,EAAE,IAAI,CAAC9F,iBAAkB;QAAAmE,QAAA,GAE/B/C,MAAM,CAAC3B,KAAK,KAAKA,KAAK,iBACrBT,IAAA,CAACR,eAAe;UAAC+G,IAAI,EAAEA,IAAK;UAACP,SAAS,EAAC;QAAM,CAAE,CAChD,EACA5D,MAAM,CAAC3B,KAAK,KAAKA,KAAK,iBAAIT,IAAA;UAAMgG,SAAS,EAAC;QAAM,CAAE,CAAC,EACnD5D,MAAM,CAACC,KAAK;MAAA,GAbRc,GAcC,CACV,CAAC;IACH;IAEAuD,WAAW,CAACE,IAAI,eAAC5G,IAAA;MAAIgG,SAAS,EAAC;IAAY,GAAK,gBAAkB,CAAC,CAAC;IAEpEU,WAAW,CAACE,IAAI,eACd1G,KAAA;MAEE2G,IAAI,EAAC,QAAQ;MACbpG,KAAK,EAAEN,aAAc;MACrB6F,SAAS,EAAEpG,UAAU,CAAC,eAAe,EAAE;QACrC,iBAAiB,EAAEkC;MACrB,CAAC,CAAE;MACHsE,OAAO,EAAE,IAAI,CAACrF,iBAAkB;MAChC+F,OAAO,EAAE,IAAI,CAAC9F,iBAAkB;MAAAmE,QAAA,GAE/B,CAACsB,UAAU,IAAIhG,KAAK,KAAK,IAAI,gBAC5BT,IAAA,CAACR,eAAe;QAAC+G,IAAI,EAAEA,IAAK;QAACP,SAAS,EAAC;MAAM,CAAE,CAAC,gBAEhDhG,IAAA;QAAMgG,SAAS,EAAC;MAAM,CAAE,CACzB,EACAQ,UAAU;IAAA,GAdP,qBAeE,CACV,CAAC;IAEDE,WAAW,CAACE,IAAI,eACd1G,KAAA;MAA+B8F,SAAS,EAAC,qBAAqB;MAAAb,QAAA,gBAC5DnF,IAAA;QAAMgG,SAAS,EAAC;MAAM,CAAE,CAAC,eACzBhG,IAAA,CAACH,SAAS;QAERoG,GAAG,EAAE,IAAI,CAACzE,KAAM;QAChBuB,QAAQ,EAAE,IAAI,CAAC5B,iBAAkB;QACjCV,KAAK,EAAEoB,UAAW;QAClBiF,OAAO,EAAEA,CAAA,KAAM,IAAI,CAACrE,QAAQ,CAAC;UAAEX,YAAY,EAAE;QAAK,CAAC,CAAE;QACrDiF,MAAM,EAAEA,CAAA,KAAM,IAAI,CAACtE,QAAQ,CAAC;UAAEX,YAAY,EAAE;QAAM,CAAC;MAAE,GALjD,cAML,CAAC,eACF9B,IAAA;QAAMgG,SAAS,EAAC;MAAM,CAAE,CAAC;IAAA,GAVlB,qBAWJ,CACP,CAAC;IAEDU,WAAW,CAACE,IAAI,eAAC5G,IAAA;MAAqBgG,SAAS,EAAC;IAAM,GAA7B,YAA+B,CAAC,CAAC;IAE1D,OAAOU,WAAW;EACpB;EAEAM,MAAMA,CAAA,EAAgB;IACpB,IAAM;MAAEC,QAAQ;MAAEC,OAAO;MAAEzG,KAAK;MAAE,aAAa,EAAE0G;IAAW,CAAC,GAAG,IAAI,CAAC5G,KAAK;IAC1E,IAAM;MAAEoB;IAAW,CAAC,GAAG,IAAI,CAACF,KAAK;IACjC,IAAI;MAAE2F;IAAc,CAAC,GAAG,IAAI,CAAC7G,KAAK;IAClC6G,aAAa,GAAAC,aAAA;MACXC,SAAS,EAAE,YAAY;MACvBC,SAAS,EAAE;QACTC,eAAe,EAAE;UAAEC,OAAO,EAAE;QAAM;MACpC;IAAC,GACEL,aAAa,CACjB;IAED,oBACEpH,IAAA;MACEgG,SAAS,EAAC,uCAAuC;MACjDC,GAAG,EAAE,IAAI,CAAC7E,WAAY;MACtB,eAAa+F,UAAW;MAAAhC,QAAA,eAExBnF,IAAA;QACEgG,SAAS,EAAEpG,UAAU,CAAC,gCAAgC,EAAE;UACtD,qBAAqB,EAAEsH;QACzB,CAAC,CAAE;QAAA/B,QAAA,eAEHjF,KAAA;UACE2G,IAAI,EAAC,QAAQ;UACbb,SAAS,EAAEpG,UAAU,CAAC,yBAAyB,EAAE;YAC/C,gBAAgB,EAAEsH;UACpB,CAAC,CAAE;UACHjB,GAAG,EAAE,IAAI,CAAC1E,MAAO;UACjB6E,OAAO,EAAE,IAAI,CAACzF,UAAW;UACzBsG,QAAQ,EAAEA,QAAS;UAAA9B,QAAA,gBAEnBnF,IAAA;YACEgG,SAAS,EAAEpG,UAAU,CAAC;cACpB,YAAY,EAAEa,KAAK,KAAK;YAC1B,CAAC,CAAE;YAAA0E,QAAA,EAEF,IAAI,CAACpD,eAAe,CAAC;UAAC,CACnB,CAAC,eACP/B,IAAA;YAAAmF,QAAA,eACEnF,IAAA,CAACR,eAAe;cAAC+G,IAAI,EAAE7G,MAAO;cAACsG,SAAS,EAAC;YAAU,CAAE;UAAC,CAClD,CAAC,eACPhG,IAAA,CAACF,YAAY;YACX4H,OAAO,EAAE/F,UAAW;YACpBgG,OAAO,EAAE;cAAEC,WAAW,EAAE,IAAI,CAAC7B,iBAAiB,CAAC;YAAE,CAAE;YACnDqB,aAAa,EAAEA,aAAc;YAC7BS,eAAe,EAAC,kBAAkB;YAClCC,YAAY,EAAE,IAAI,CAAC7G,gBAAiB;YACpC8G,YAAY,EAAE,IAAI,CAAC7G,gBAAiB;YACpC8G,SAAS,EAAE;cAAEC,QAAQ,EAAE;YAAS;UAAE,CACnC,CAAC;QAAA,CACI;MAAC,CACN;IAAC,CACH,CAAC;EAEV;AACF;AAACzH,eAAA,CA1eKH,gBAAgB,+BAIeD,yBAAyB;AAAAI,eAAA,CAJxDH,gBAAgB,2BAMW,GAAG;AAAAG,eAAA,CAN9BH,gBAAgB,kBAQkC;EACpD0C,QAAQA,CAAA,EAAS;IACf;EAAA,CACD;EACDtC,KAAK,EAAE,IAAI;EACXwG,QAAQ,EAAE,KAAK;EACfG,aAAa,EAAE,CAAC,CAAC;EACjBb,IAAI,EAAE9G,OAAO;EACb+G,UAAU,EAAE,QAAQ;EACpBvE,WAAW,EAAE,eAAe;EAC5BvB,WAAW,EAAED,KAAK,IAAKA,KAAK,KAAK,IAAI,GAAG,CAAC,GAAGyH,IAAI,CAACC,KAAK,CAAC1H,KAAK,GAAG,IAAI,CAAE;EACrE2D,WAAW,EAAEgE,IAAI,IAAIA,IAAI,GAAG,IAAI;EAChClB,OAAO,EAAE,KAAK;EACd,aAAa,EAAEzB;AACjB,CAAC;AAsdH,eAAepF,gBAAgB"}
+{"version":3,"file":"CustomTimeSelect.js","names":["React","Component","FontAwesomeIcon","vsCheck","TimeUtils","classNames","TimeInput","DropdownMenu","jsx","_jsx","jsxs","_jsxs","CUSTOM_OPTION","MENU_NAVIGATION_DIRECTION","CustomTimeSelect","constructor","props","_defineProperty","value","valueToTime","toggleMenu","bind","handleMenuKeyDown","closeMenu","handleOptionClick","handleOptionFocus","handleMenuOpened","handleMenuExited","handleCustomInput","csContainer","createRef","menuContainer","button","input","state","keyboardOptionIndex","menuIsOpen","inputWidth","customTime","inputFocused","getSelectedText","options","placeholder","i","length","option","title","formatTime","setInputWidth","current","setState","getBoundingClientRect","width","focus","_this$button$current","updateInputValue","onChange","handleResize","event","_this$button$current2","key","updateFromCustom","stopPropagation","preventDefault","shiftKey","handleMenuNavigation","UP","DOWN","direction","menuOptionsLength","newKeyboardOptionIndex","focusInput","focusOption","scrollOptionIntoView","optionIndex","Number","currentTarget","timeToValue","update","updateAndClose","_this$button$current3","target","_this$menuContainer$c","activeOption","querySelector","HTMLElement","valueIndex","map","indexOf","_this$input$current","index","_this$menuContainer$c2","children","item","openMenu","updateKeyboardIndex","focusButton","arguments","undefined","_this$button$current4","_this$menuContainer$c3","offsetTop","DROP_DOWN_MENU_HEIGHT","scrollTop","renderMenuElement","className","ref","role","onKeyDown","onClick","style","renderOptions","icon","customText","matchFound","optionArray","concat","push","type","onFocus","onBlur","render","disabled","invalid","dataTestId","popperOptions","_objectSpread","placement","modifiers","preventOverflow","enabled","isShown","actions","menuElement","popperClassName","onMenuOpened","onMenuClosed","menuStyle","maxWidth","Math","round","time"],"sources":["../src/CustomTimeSelect.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { PopperOptions } from 'popper.js';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsCheck, IconDefinition } from '@deephaven/icons';\nimport { TimeUtils } from '@deephaven/utils';\nimport classNames from 'classnames';\nimport TimeInput, { TimeInputElement } from './TimeInput';\nimport DropdownMenu from './menu-actions/DropdownMenu';\nimport './CustomTimeSelect.scss';\n\nconst CUSTOM_OPTION = -1;\n\nenum MENU_NAVIGATION_DIRECTION {\n  UP = 'UP',\n  DOWN = 'DOWN',\n}\n\ntype CustomTimeSelectProps = {\n  options: { title: string; value: number }[];\n  popperOptions: PopperOptions;\n  value: number | null;\n  onChange: (value: number) => void;\n  disabled: boolean;\n  icon: IconDefinition;\n  placeholder: string;\n  customText: string;\n  // Defaults to converting the value in milliseconds to time in seconds\n  valueToTime: (val: number | null) => number;\n  // Defaults to converting the time in seconds to value in milliseconds\n  timeToValue: (time: number) => number;\n  invalid: boolean;\n  'data-testid'?: string;\n};\n\ntype TimeInSeconds = number;\n\ntype CustomTimeSelectState = {\n  keyboardOptionIndex: number;\n  menuIsOpen: boolean;\n  inputWidth: number;\n  customTime: TimeInSeconds;\n  inputFocused: boolean;\n};\n\nclass CustomTimeSelect extends Component<\n  CustomTimeSelectProps,\n  CustomTimeSelectState\n> {\n  static MENU_NAVIGATION_DIRECTION = MENU_NAVIGATION_DIRECTION;\n\n  static DROP_DOWN_MENU_HEIGHT = 125;\n\n  static defaultProps: Partial<CustomTimeSelectProps> = {\n    onChange(): void {\n      // no-op\n    },\n    value: null,\n    disabled: false,\n    popperOptions: {},\n    icon: vsCheck,\n    customText: 'Custom',\n    placeholder: 'Select a time',\n    valueToTime: value => (value === null ? 0 : Math.round(value / 1000)),\n    timeToValue: time => time * 1000,\n    invalid: false,\n    'data-testid': undefined,\n  };\n\n  constructor(props: CustomTimeSelectProps) {\n    super(props);\n\n    const { value, valueToTime } = props;\n\n    this.toggleMenu = this.toggleMenu.bind(this);\n    this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);\n    this.closeMenu = this.closeMenu.bind(this);\n\n    this.handleOptionClick = this.handleOptionClick.bind(this);\n    this.handleOptionFocus = this.handleOptionFocus.bind(this);\n\n    this.handleMenuOpened = this.handleMenuOpened.bind(this);\n    this.handleMenuExited = this.handleMenuExited.bind(this);\n    this.handleCustomInput = this.handleCustomInput.bind(this);\n\n    this.csContainer = React.createRef();\n    this.menuContainer = React.createRef();\n    this.button = React.createRef();\n    this.input = React.createRef();\n\n    this.state = {\n      keyboardOptionIndex: 0,\n      menuIsOpen: false,\n      inputWidth: 100,\n      customTime: valueToTime(value),\n      inputFocused: false,\n    };\n  }\n\n  csContainer: React.RefObject<HTMLDivElement>;\n\n  menuContainer: React.RefObject<HTMLDivElement>;\n\n  button: React.RefObject<HTMLButtonElement>;\n\n  input: React.RefObject<TimeInputElement>;\n\n  getSelectedText(): string {\n    const { options, value, placeholder } = this.props;\n    const { customTime } = this.state;\n\n    if (value === null) {\n      return placeholder;\n    }\n\n    for (let i = 0; i < options.length; i += 1) {\n      const option = options[i];\n      if (option.value === value) {\n        return option.title;\n      }\n    }\n\n    return TimeUtils.formatTime(customTime);\n  }\n\n  setInputWidth(): void {\n    if (this.csContainer.current) {\n      this.setState({\n        inputWidth: this.csContainer.current.getBoundingClientRect().width,\n      });\n    }\n  }\n\n  focus(): void {\n    this.button.current?.focus();\n  }\n\n  updateInputValue(value: number): void {\n    const { onChange } = this.props;\n    onChange(value);\n  }\n\n  handleResize(): void {\n    this.setInputWidth();\n  }\n\n  handleMenuKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {\n    const { keyboardOptionIndex, inputFocused } = this.state;\n    const { options } = this.props;\n\n    switch (event.key) {\n      case 'Enter':\n      case ' ': // Space Bar\n        if (inputFocused) {\n          this.updateFromCustom();\n        } else {\n          this.updateInputValue(options[keyboardOptionIndex].value);\n        }\n        this.closeMenu();\n        this.button.current?.focus();\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'Tab':\n        if (event.shiftKey) {\n          this.handleMenuNavigation(\n            CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP\n          );\n        } else {\n          this.handleMenuNavigation(\n            CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN\n          );\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n        this.handleMenuNavigation(\n          CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP\n        );\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'ArrowDown':\n        this.handleMenuNavigation(\n          CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN\n        );\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'Escape':\n        this.closeMenu();\n        break;\n      default:\n        break;\n    }\n  }\n\n  handleMenuNavigation(direction: MENU_NAVIGATION_DIRECTION): void {\n    const { keyboardOptionIndex, inputFocused } = this.state;\n    const { options } = this.props;\n    const menuOptionsLength = options.length;\n    let newKeyboardOptionIndex = keyboardOptionIndex;\n    switch (direction) {\n      case CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP:\n        if (!inputFocused && keyboardOptionIndex === 0) {\n          this.focusInput();\n          break;\n        } else if (inputFocused) {\n          this.focusOption(keyboardOptionIndex);\n        }\n\n        if (keyboardOptionIndex > 0 && !inputFocused) {\n          newKeyboardOptionIndex =\n            (newKeyboardOptionIndex - 1) % menuOptionsLength;\n          this.setState({\n            keyboardOptionIndex: newKeyboardOptionIndex,\n          });\n        } else if (keyboardOptionIndex === 0) {\n          newKeyboardOptionIndex = menuOptionsLength - 1;\n          this.setState({\n            keyboardOptionIndex: newKeyboardOptionIndex,\n          });\n        }\n        this.scrollOptionIntoView(newKeyboardOptionIndex);\n        break;\n      case CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN:\n        if (!inputFocused && keyboardOptionIndex === menuOptionsLength - 1) {\n          this.focusInput();\n          break;\n        } else if (inputFocused) {\n          this.focusOption(keyboardOptionIndex);\n        }\n\n        if (\n          keyboardOptionIndex < menuOptionsLength &&\n          !(inputFocused && keyboardOptionIndex === 0)\n        ) {\n          newKeyboardOptionIndex =\n            (newKeyboardOptionIndex + 1) % menuOptionsLength;\n          this.setState({\n            keyboardOptionIndex: newKeyboardOptionIndex,\n          });\n        }\n        this.scrollOptionIntoView(newKeyboardOptionIndex);\n        break;\n      default:\n        break;\n    }\n  }\n\n  handleOptionClick(event: React.MouseEvent<HTMLButtonElement>): void {\n    const optionIndex = Number(event.currentTarget.value);\n    const { options, timeToValue } = this.props;\n    const { customTime } = this.state;\n\n    if (optionIndex === CUSTOM_OPTION) {\n      const update = timeToValue(customTime);\n      this.updateAndClose(update);\n    } else {\n      this.updateAndClose(options[optionIndex].value);\n    }\n  }\n\n  updateAndClose(update: number): void {\n    this.updateInputValue(update);\n    this.closeMenu();\n    this.button.current?.focus();\n  }\n\n  handleOptionFocus(event: React.FocusEvent<HTMLButtonElement>): void {\n    this.setState({ keyboardOptionIndex: Number(event.target.value) });\n  }\n\n  handleMenuOpened(): void {\n    const { options, value } = this.props;\n    const { keyboardOptionIndex } = this.state;\n    this.scrollOptionIntoView(keyboardOptionIndex);\n    const activeOption = this.menuContainer.current?.querySelector(\n      '.cs-option-btn.keyboard-active'\n    );\n    if (activeOption instanceof HTMLElement) {\n      activeOption.focus();\n    }\n\n    if (value === null) {\n      return;\n    }\n    const valueIndex = options.map(option => option.value).indexOf(value);\n    if (valueIndex < 0) {\n      // The custom option should be selected\n      this.focusInput();\n    }\n  }\n\n  focusInput(): void {\n    this.input.current?.focus();\n  }\n\n  focusOption(index: number): void {\n    const options = this.menuContainer.current?.querySelector('.cs-options');\n    if (options && options.children != null) {\n      const option = options.children.item(index);\n      if (option instanceof HTMLElement) {\n        option.focus();\n      }\n    }\n  }\n\n  handleMenuExited(): void {\n    const { menuIsOpen } = this.state;\n    if (menuIsOpen) {\n      this.setState({ menuIsOpen: false, keyboardOptionIndex: 0 });\n    }\n  }\n\n  handleCustomInput(value: number): void {\n    const { timeToValue } = this.props;\n\n    const update = timeToValue(value);\n    this.updateInputValue(update);\n    this.setState({\n      customTime: value,\n    });\n  }\n\n  updateFromCustom(): void {\n    const { timeToValue } = this.props;\n    const { customTime } = this.state;\n\n    const update = timeToValue(customTime);\n    this.updateInputValue(update);\n  }\n\n  toggleMenu(event: React.MouseEvent<HTMLButtonElement>): void {\n    const { menuIsOpen } = this.state;\n    if (menuIsOpen) {\n      this.closeMenu();\n    } else {\n      this.openMenu();\n    }\n    event.stopPropagation();\n  }\n\n  openMenu(): void {\n    this.updateKeyboardIndex();\n    this.setInputWidth();\n    this.setState({ menuIsOpen: true });\n  }\n\n  closeMenu(focusButton = true): void {\n    this.setState({ menuIsOpen: false });\n    if (focusButton) {\n      this.button.current?.focus();\n    }\n  }\n\n  updateKeyboardIndex(): void {\n    const { options, value } = this.props;\n    if (value === null) {\n      return;\n    }\n    const valueIndex = options.map(option => option.value).indexOf(value);\n    if (valueIndex > 0) {\n      this.setState({ keyboardOptionIndex: valueIndex });\n    }\n  }\n\n  scrollOptionIntoView(index: number): void {\n    const options = this.menuContainer.current?.querySelector('.cs-options');\n    if (options && options.children != null) {\n      const activeOption = options.children.item(index);\n      if (\n        activeOption instanceof HTMLElement &&\n        activeOption.offsetTop > CustomTimeSelect.DROP_DOWN_MENU_HEIGHT\n      ) {\n        options.scrollTop =\n          activeOption.offsetTop - CustomTimeSelect.DROP_DOWN_MENU_HEIGHT;\n      } else if (\n        (activeOption instanceof HTMLElement && activeOption.offsetTop < 0) ||\n        index === 0\n      ) {\n        options.scrollTop = 0;\n      }\n    }\n  }\n\n  renderMenuElement(): JSX.Element {\n    const { inputWidth } = this.state;\n    return (\n      <div\n        className=\"cs-menu-container\"\n        ref={this.menuContainer}\n        role=\"presentation\"\n        onKeyDown={this.handleMenuKeyDown}\n        onClick={event => {\n          event.stopPropagation();\n        }}\n        style={{ width: inputWidth }}\n      >\n        <div className=\"cs-options-container\">\n          <div className=\"cs-options\">{this.renderOptions()}</div>\n        </div>\n      </div>\n    );\n  }\n\n  renderOptions(): React.ReactNode {\n    const { options, value, icon, customText } = this.props;\n    const { keyboardOptionIndex, customTime, inputFocused } = this.state;\n\n    let matchFound = false;\n    const optionArray: JSX.Element[] = [];\n    for (let index = 0; index < options.length; index += 1) {\n      const option = options[index];\n      const key = `option-${index}-${option.value}`;\n      matchFound = matchFound || option.value === value;\n      optionArray.push(\n        <button\n          key={key}\n          type=\"button\"\n          value={index}\n          className={classNames('cs-option-btn', {\n            'keyboard-active': keyboardOptionIndex === index && !inputFocused,\n          })}\n          onClick={this.handleOptionClick}\n          onFocus={this.handleOptionFocus}\n        >\n          {option.value === value && (\n            <FontAwesomeIcon icon={icon} className=\"mr-2\" />\n          )}\n          {option.value !== value && <span className=\"mr-4\" />}\n          {option.title}\n        </button>\n      );\n    }\n\n    optionArray.push(<hr className=\"cs-divider\" key=\"option-divider\" />);\n\n    optionArray.push(\n      <button\n        key=\"option-custom-label\"\n        type=\"button\"\n        value={CUSTOM_OPTION}\n        className={classNames('cs-option-btn', {\n          'keyboard-active': inputFocused,\n        })}\n        onClick={this.handleOptionClick}\n        onFocus={this.handleOptionFocus}\n      >\n        {!matchFound && value !== null ? (\n          <FontAwesomeIcon icon={icon} className=\"mr-2\" />\n        ) : (\n          <span className=\"mr-4\" />\n        )}\n        {customText}\n      </button>\n    );\n\n    optionArray.push(\n      <div key=\"cs-custom-container\" className=\"cs-custom-container\">\n        <span className=\"mr-2\" />\n        <TimeInput\n          key=\"option-input\"\n          ref={this.input}\n          onChange={this.handleCustomInput}\n          value={customTime}\n          onFocus={() => this.setState({ inputFocused: true })}\n          onBlur={() => this.setState({ inputFocused: false })}\n        />\n        <span className=\"ml-2\" />\n      </div>\n    );\n\n    optionArray.push(<hr key=\"option-end\" className=\"mb-2\" />);\n\n    return optionArray;\n  }\n\n  render(): JSX.Element {\n    const { disabled, invalid, value, 'data-testid': dataTestId } = this.props;\n    const { menuIsOpen } = this.state;\n    let { popperOptions } = this.props;\n    popperOptions = {\n      placement: 'bottom-end',\n      modifiers: {\n        preventOverflow: { enabled: false },\n      },\n      ...popperOptions,\n    };\n\n    return (\n      <div\n        className=\"input-group cs-container context-menu\"\n        ref={this.csContainer}\n        data-testid={dataTestId}\n      >\n        <div\n          className={classNames('input-group-append cs-dropdown', {\n            'cs-dropdown-invalid': invalid,\n          })}\n        >\n          <button\n            type=\"button\"\n            className={classNames('btn cs-btn form-control', {\n              'cs-btn-invalid': invalid,\n            })}\n            ref={this.button}\n            onClick={this.toggleMenu}\n            disabled={disabled}\n          >\n            <span\n              className={classNames({\n                'text-muted': value === null,\n              })}\n            >\n              {this.getSelectedText()}\n            </span>\n            <span className=\"cs-caret\" />\n            <DropdownMenu\n              isShown={menuIsOpen}\n              actions={{ menuElement: this.renderMenuElement() }}\n              popperOptions={popperOptions}\n              popperClassName=\"CustomTimeSelect\"\n              onMenuOpened={this.handleMenuOpened}\n              onMenuClosed={this.handleMenuExited}\n              menuStyle={{ maxWidth: '100rem' }}\n            />\n          </button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default CustomTimeSelect;\n"],"mappings":"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"}

package/dist/LoadingSpinner.css

@@ -1,13 +1,7 @@
 /* stylelint-disable alpha-value-notation */
 .loading-spinner {
-  --primary-color: var(
-    --dh-loading-spinner-primary-color,
-    var(--dh-color-accent, #4c7dee)
-  );
-  --secondary-color: var(
-    --dh-loading-spinner-secondary-color,
-    rgba(240, 240, 240, 0.5)
-  );
+  --primary-color: var(--dh-color-loading-spinner-primary);
+  --secondary-color: var(--dh-color-loading-spinner-secondary);
   --border-width: 1px;
   --size: 14px;
   box-sizing: border-box;

package/dist/LoadingSpinner.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/LoadingSpinner.scss"],"names":[],"mappings":"AAAA;AACA;EACE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAKE;;;AAKF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE","file":"LoadingSpinner.css","sourcesContent":["/* stylelint-disable alpha-value-notation */\n.loading-spinner {\n  --primary-color: var(\n    --dh-loading-spinner-primary-color,\n    var(--dh-color-accent, #4c7dee)\n  );\n  --secondary-color: var(\n    --dh-loading-spinner-secondary-color,\n    rgba(240, 240, 240, 0.5)\n  );\n  --border-width: 1px;\n  --size: 14px;\n\n  box-sizing: border-box;\n  display: inline-block;\n  margin: 0 auto;\n  width: var(--size);\n  height: var(--size);\n}\n\n.loading-spinner-large {\n  --border-width: 4px;\n  --size: 56px;\n}\n\n.loading-spinner-vertical-align {\n  // The original LoadingSpinner used `.fa-layers` to create the spinner icon.\n  // This includes a vertical aligment adjustment to center the spinner along\n  // side of other inline content. Copying this value from the `.fa-layers`\n  // class to avoid breaking alignment of the new spinner.\n  vertical-align: -0.125em;\n}\n\n// Spinning circle with colored border and transparent center. Half of the\n// circle is the primary color. The other half is the secondary color.\n.loading-spinner::after {\n  animation: loading-spinner-rotate 2s linear infinite;\n  border: var(--border-width) solid;\n  border-color: var(--primary-color) var(--primary-color) var(--secondary-color)\n    var(--secondary-color);\n  border-radius: 50%;\n  box-sizing: border-box;\n  content: '';\n  display: inline-block;\n  width: var(--size);\n  height: var(--size);\n}\n\n@keyframes loading-spinner-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(359deg);\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../src/LoadingSpinner.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAKE;;;AAKF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE","file":"LoadingSpinner.css","sourcesContent":["/* stylelint-disable alpha-value-notation */\n.loading-spinner {\n  --primary-color: var(--dh-color-loading-spinner-primary);\n  --secondary-color: var(--dh-color-loading-spinner-secondary);\n  --border-width: 1px;\n  --size: 14px;\n\n  box-sizing: border-box;\n  display: inline-block;\n  margin: 0 auto;\n  width: var(--size);\n  height: var(--size);\n}\n\n.loading-spinner-large {\n  --border-width: 4px;\n  --size: 56px;\n}\n\n.loading-spinner-vertical-align {\n  // The original LoadingSpinner used `.fa-layers` to create the spinner icon.\n  // This includes a vertical aligment adjustment to center the spinner along\n  // side of other inline content. Copying this value from the `.fa-layers`\n  // class to avoid breaking alignment of the new spinner.\n  vertical-align: -0.125em;\n}\n\n// Spinning circle with colored border and transparent center. Half of the\n// circle is the primary color. The other half is the secondary color.\n.loading-spinner::after {\n  animation: loading-spinner-rotate 2s linear infinite;\n  border: var(--border-width) solid;\n  border-color: var(--primary-color) var(--primary-color) var(--secondary-color)\n    var(--secondary-color);\n  border-radius: 50%;\n  box-sizing: border-box;\n  content: '';\n  display: inline-block;\n  width: var(--size);\n  height: var(--size);\n}\n\n@keyframes loading-spinner-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(359deg);\n  }\n}\n"]}

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,15 +17,20 @@
   align-items: center;
 }
 .search-group ::-webkit-search-cancel-button {
+  background-size: 16px;
+  background-color: var(--dh-color-foreground);
+  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-change-selection {
   position: absolute;

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,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"]}
+{"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,OCXO;EDYP;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,OCrCO;EDsCP;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: 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","// 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-foreground);\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}"]}

package/dist/theme/ThemeModel.d.ts

@@ -1,16 +1,22 @@
 export type BaseThemeType = 'dark' | 'light';
 export type BaseThemeKey = `default-${BaseThemeType}`;
-export type ThemePreloadStyleContent = `:root{${string}`;
+export type CssVariableStyleContent = `:root{${string}`;
+export type ThemeCssVariableName = `--dh-${string}`;
+export type ThemePreloadColorVariable = '--dh-color-loading-spinner-primary' | '--dh-color-loading-spinner-secondary' | '--dh-color-background' | '--dh-color-foreground';
+export type ThemeIconsRequiringManualColorChanges = '--dh-svg-icon-select-indicator' | '--dh-svg-icon-select-indicator-hover' | '--dh-svg-icon-select-indicator-disabled' | '--dh-svg-icon-error';
 export declare const DEFAULT_DARK_THEME_KEY = "default-dark";
 export declare const DEFAULT_LIGHT_THEME_KEY = "default-light";
-export declare const DEFAULT_PRELOAD_DATA_VARIABLES: {
-    '--dh-color-accent': string;
-    '--dh-color-background': string;
-};
+export declare const DEFAULT_PRELOAD_DATA_VARIABLES: Record<ThemePreloadColorVariable, string>;
+/**
+ * Some inline SVGs require manually updating their fill color via
+ * `updateSVGFillColors`. This object maps these variables to their respective
+ * fill color variables.
+ */
+export declare const SVG_ICON_MANUAL_COLOR_MAP: Record<ThemeIconsRequiringManualColorChanges, string>;
 export declare const THEME_CACHE_LOCAL_STORAGE_KEY = "deephaven.themeCache";
 export interface ThemePreloadData {
     themeKey: string;
-    preloadStyleContent?: ThemePreloadStyleContent;
+    preloadStyleContent?: CssVariableStyleContent;
 }
 export interface ThemeData {
     baseThemeKey?: BaseThemeKey;

package/dist/theme/ThemeModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeModel.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModel.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,WAAW,aAAa,EAAE,CAAC;AACtD,MAAM,MAAM,wBAAwB,GAAG,SAAS,MAAM,EAAE,CAAC;AAEzD,eAAO,MAAM,sBAAsB,iBAAwC,CAAC;AAC5E,eAAO,MAAM,uBAAuB,kBAAyC,CAAC;AAG9E,eAAO,MAAM,8BAA8B;;;CAGC,CAAC;AAE7C,eAAO,MAAM,6BAA6B,yBAAyB,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;CAChD;AAED,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB"}
+{"version":3,"file":"ThemeModel.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModel.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,WAAW,aAAa,EAAE,CAAC;AACtD,MAAM,MAAM,uBAAuB,GAAG,SAAS,MAAM,EAAE,CAAC;AACxD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,MAAM,EAAE,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GACjC,oCAAoC,GACpC,sCAAsC,GACtC,uBAAuB,GACvB,uBAAuB,CAAC;AAE5B,MAAM,MAAM,qCAAqC,GAC7C,gCAAgC,GAChC,sCAAsC,GACtC,yCAAyC,GACzC,qBAAqB,CAAC;AAE1B,eAAO,MAAM,sBAAsB,iBAAwC,CAAC;AAC5E,eAAO,MAAM,uBAAuB,kBAAyC,CAAC;AAG9E,eAAO,MAAM,8BAA8B,EAAE,MAAM,CACjD,yBAAyB,EACzB,MAAM,CAMP,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,qCAAqC,EACrC,MAAM,CAMP,CAAC;AAEF,eAAO,MAAM,6BAA6B,yBAAyB,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;CAC/C;AAED,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB"}

package/dist/theme/ThemeModel.js

@@ -3,10 +3,25 @@ export var DEFAULT_LIGHT_THEME_KEY = 'default-light';
 
 // Css properties that are used in preload data with default values.
 export var DEFAULT_PRELOAD_DATA_VARIABLES = {
-  '--dh-color-accent': '#4c7dee',
-  // dark theme --dh-color-blue-700
-  '--dh-color-background': '#1a171a' // dark theme --dh-color-gray-50
+  '--dh-color-loading-spinner-primary': '#3b6bda',
+  // dark theme --dh-color-blue-600
+  '--dh-color-loading-spinner-secondary': '#f0f0ee80',
+  // dark theme --dh-color-gray-800 + 50% opacity
+  '--dh-color-background': '#1a171a',
+  // dark theme --dh-color-gray-50
+  '--dh-color-foreground': '#f0f0ee' // dark theme --dh-color-gray-800
 };
 
+/**
+ * Some inline SVGs require manually updating their fill color via
+ * `updateSVGFillColors`. This object maps these variables to their respective
+ * fill color variables.
+ */
+export var SVG_ICON_MANUAL_COLOR_MAP = {
+  '--dh-svg-icon-select-indicator': '--dh-color-selector-fg',
+  '--dh-svg-icon-select-indicator-hover': '--dh-color-selector-hover-fg',
+  '--dh-svg-icon-select-indicator-disabled': '--dh-color-selector-disabled-fg',
+  '--dh-svg-icon-error': '--dh-color-form-control-error'
+};
 export var THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';
 //# sourceMappingURL=ThemeModel.js.map

package/dist/theme/ThemeModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeModel.js","names":["DEFAULT_DARK_THEME_KEY","DEFAULT_LIGHT_THEME_KEY","DEFAULT_PRELOAD_DATA_VARIABLES","THEME_CACHE_LOCAL_STORAGE_KEY"],"sources":["../../src/theme/ThemeModel.ts"],"sourcesContent":["export type BaseThemeType = 'dark' | 'light';\nexport type BaseThemeKey = `default-${BaseThemeType}`;\nexport type ThemePreloadStyleContent = `:root{${string}`;\n\nexport const DEFAULT_DARK_THEME_KEY = 'default-dark' satisfies BaseThemeKey;\nexport const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;\n\n// Css properties that are used in preload data with default values.\nexport const DEFAULT_PRELOAD_DATA_VARIABLES = {\n  '--dh-color-accent': '#4c7dee', // dark theme --dh-color-blue-700\n  '--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50\n} satisfies Record<`--dh-${string}`, string>;\n\nexport const THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';\n\nexport interface ThemePreloadData {\n  themeKey: string;\n  preloadStyleContent?: ThemePreloadStyleContent;\n}\n\nexport interface ThemeData {\n  baseThemeKey?: BaseThemeKey;\n  themeKey: string;\n  name: string;\n  styleContent: string;\n}\n\nexport interface ThemeRegistrationData {\n  base: ThemeData[];\n  custom: ThemeData[];\n}\n"],"mappings":"AAIA,OAAO,IAAMA,sBAAsB,GAAG,cAAqC;AAC3E,OAAO,IAAMC,uBAAuB,GAAG,eAAsC;;AAE7E;AACA,OAAO,IAAMC,8BAA8B,GAAG;EAC5C,mBAAmB,EAAE,SAAS;EAAE;EAChC,uBAAuB,EAAE,SAAS,CAAE;AACtC,CAA4C;;AAE5C,OAAO,IAAMC,6BAA6B,GAAG,sBAAsB"}
+{"version":3,"file":"ThemeModel.js","names":["DEFAULT_DARK_THEME_KEY","DEFAULT_LIGHT_THEME_KEY","DEFAULT_PRELOAD_DATA_VARIABLES","SVG_ICON_MANUAL_COLOR_MAP","THEME_CACHE_LOCAL_STORAGE_KEY"],"sources":["../../src/theme/ThemeModel.ts"],"sourcesContent":["export type BaseThemeType = 'dark' | 'light';\nexport type BaseThemeKey = `default-${BaseThemeType}`;\nexport type CssVariableStyleContent = `:root{${string}`;\nexport type ThemeCssVariableName = `--dh-${string}`;\n\nexport type ThemePreloadColorVariable =\n  | '--dh-color-loading-spinner-primary'\n  | '--dh-color-loading-spinner-secondary'\n  | '--dh-color-background'\n  | '--dh-color-foreground';\n\nexport type ThemeIconsRequiringManualColorChanges =\n  | '--dh-svg-icon-select-indicator'\n  | '--dh-svg-icon-select-indicator-hover'\n  | '--dh-svg-icon-select-indicator-disabled'\n  | '--dh-svg-icon-error';\n\nexport const DEFAULT_DARK_THEME_KEY = 'default-dark' satisfies BaseThemeKey;\nexport const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;\n\n// Css properties that are used in preload data with default values.\nexport const DEFAULT_PRELOAD_DATA_VARIABLES: Record<\n  ThemePreloadColorVariable,\n  string\n> = {\n  '--dh-color-loading-spinner-primary': '#3b6bda', // dark theme --dh-color-blue-600\n  '--dh-color-loading-spinner-secondary': '#f0f0ee80', // dark theme --dh-color-gray-800 + 50% opacity\n  '--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50\n  '--dh-color-foreground': '#f0f0ee', // dark theme --dh-color-gray-800\n};\n\n/**\n * Some inline SVGs require manually updating their fill color via\n * `updateSVGFillColors`. This object maps these variables to their respective\n * fill color variables.\n */\nexport const SVG_ICON_MANUAL_COLOR_MAP: Record<\n  ThemeIconsRequiringManualColorChanges,\n  string\n> = {\n  '--dh-svg-icon-select-indicator': '--dh-color-selector-fg',\n  '--dh-svg-icon-select-indicator-hover': '--dh-color-selector-hover-fg',\n  '--dh-svg-icon-select-indicator-disabled': '--dh-color-selector-disabled-fg',\n  '--dh-svg-icon-error': '--dh-color-form-control-error',\n};\n\nexport const THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';\n\nexport interface ThemePreloadData {\n  themeKey: string;\n  preloadStyleContent?: CssVariableStyleContent;\n}\n\nexport interface ThemeData {\n  baseThemeKey?: BaseThemeKey;\n  themeKey: string;\n  name: string;\n  styleContent: string;\n}\n\nexport interface ThemeRegistrationData {\n  base: ThemeData[];\n  custom: ThemeData[];\n}\n"],"mappings":"AAiBA,OAAO,IAAMA,sBAAsB,GAAG,cAAqC;AAC3E,OAAO,IAAMC,uBAAuB,GAAG,eAAsC;;AAE7E;AACA,OAAO,IAAMC,8BAGZ,GAAG;EACF,oCAAoC,EAAE,SAAS;EAAE;EACjD,sCAAsC,EAAE,WAAW;EAAE;EACrD,uBAAuB,EAAE,SAAS;EAAE;EACpC,uBAAuB,EAAE,SAAS,CAAE;AACtC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,yBAGZ,GAAG;EACF,gCAAgC,EAAE,wBAAwB;EAC1D,sCAAsC,EAAE,8BAA8B;EACtE,yCAAyC,EAAE,iCAAiC;EAC5E,qBAAqB,EAAE;AACzB,CAAC;AAED,OAAO,IAAMC,6BAA6B,GAAG,sBAAsB"}

package/dist/theme/ThemeProvider.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ThemeData } from './ThemeModel';
+import './theme-svg.scss';
 export interface ThemeContextValue {
     activeThemes: ThemeData[] | null;
     selectedThemeKey: string;

package/dist/theme/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,MAAM,OAAO,CAAC;AAE/E,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAUjE,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAID,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,MAAM,WAAW,kBAAkB;IAMjC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkElC;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,MAAM,OAAO,CAAC;AAE/E,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAUjE,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAID,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,MAAM,WAAW,kBAAkB;IAMjC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAsElC;AAED,eAAe,aAAa,CAAC"}

package/dist/theme/ThemeProvider.js

@@ -1,8 +1,9 @@
 import { createContext, useEffect, useMemo, useState } from 'react';
 import Log from '@deephaven/log';
 import { DEFAULT_DARK_THEME_KEY } from "./ThemeModel.js";
-import { calculatePreloadStyleContent, getActiveThemes, getDefaultBaseThemes, getThemePreloadData, setThemePreloadData } from "./ThemeUtils.js";
+import { calculatePreloadStyleContent, getActiveThemes, getDefaultBaseThemes, getThemePreloadData, setThemePreloadData, overrideSVGFillColors } from "./ThemeUtils.js";
 import { SpectrumThemeProvider } from "./SpectrumThemeProvider.js";
+import "./theme-svg.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,6 +30,10 @@ export function ThemeProvider(_ref) {
     if (activeThemes == null || themes == null) {
       return;
     }
+
+    // Override fill color for certain inline SVGs (the originals are provided
+    // by theme-svg.scss)
+    overrideSVGFillColors();
     var preloadStyleContent = calculatePreloadStyleContent();
     log.debug2('updateThemePreloadData:', {
       active: activeThemes.map(theme => theme.themeKey),

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":["createContext","useEffect","useMemo","useState","Log","DEFAULT_DARK_THEME_KEY","calculatePreloadStyleContent","getActiveThemes","getDefaultBaseThemes","getThemePreloadData","setThemePreloadData","SpectrumThemeProvider","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","log","module","ThemeContext","ThemeProvider","_ref","themes","children","baseThemes","selectedThemeKey","setSelectedThemeKey","_getThemePreloadData$","_getThemePreloadData","themeKey","activeThemes","base","custom","updateThemePreloadData","preloadStyleContent","debug2","active","map","theme","all","value","Provider","styleContent"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useEffect, useMemo, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { DEFAULT_DARK_THEME_KEY, ThemeData } from './ThemeModel';\nimport {\n  calculatePreloadStyleContent,\n  getActiveThemes,\n  getDefaultBaseThemes,\n  getThemePreloadData,\n  setThemePreloadData,\n} from './ThemeUtils';\nimport { SpectrumThemeProvider } from './SpectrumThemeProvider';\n\nexport interface ThemeContextValue {\n  activeThemes: ThemeData[] | null;\n  selectedThemeKey: string;\n  setSelectedThemeKey: (themeKey: string) => void;\n}\n\nconst log = Log.module('ThemeProvider');\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport interface ThemeProviderProps {\n  /*\n   * Additional themes to load in addition to the base themes. If no additional\n   * themes are to be loaded, this must be set to an empty array in order to\n   * tell the provider to activate the base themes.\n   */\n  themes: ThemeData[] | null;\n  children: ReactNode;\n}\n\nexport function ThemeProvider({\n  themes,\n  children,\n}: ThemeProviderProps): JSX.Element {\n  const baseThemes = useMemo(() => getDefaultBaseThemes(), []);\n\n  const [selectedThemeKey, setSelectedThemeKey] = useState<string>(\n    () => getThemePreloadData()?.themeKey ?? DEFAULT_DARK_THEME_KEY\n  );\n\n  // Calculate active themes once a non-null themes array is provided.\n  const activeThemes = useMemo(\n    () =>\n      themes == null\n        ? null\n        : getActiveThemes(selectedThemeKey, {\n            base: baseThemes,\n            custom: themes ?? [],\n          }),\n    [baseThemes, selectedThemeKey, themes]\n  );\n\n  useEffect(\n    function updateThemePreloadData() {\n      // Don't update preload data until themes have been loaded and activated\n      if (activeThemes == null || themes == null) {\n        return;\n      }\n\n      const preloadStyleContent = calculatePreloadStyleContent();\n\n      log.debug2('updateThemePreloadData:', {\n        active: activeThemes.map(theme => theme.themeKey),\n        all: themes.map(theme => theme.themeKey),\n        preloadStyleContent,\n        selectedThemeKey,\n      });\n\n      setThemePreloadData({\n        themeKey: selectedThemeKey,\n        preloadStyleContent,\n      });\n    },\n    [activeThemes, selectedThemeKey, themes]\n  );\n\n  const value = useMemo(\n    () => ({\n      activeThemes,\n      selectedThemeKey,\n      setSelectedThemeKey,\n    }),\n    [activeThemes, selectedThemeKey]\n  );\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {activeThemes == null ? null : (\n        <>\n          {activeThemes.map(theme => (\n            <style data-theme-key={theme.themeKey} key={theme.themeKey}>\n              {theme.styleContent}\n            </style>\n          ))}\n        </>\n      )}\n      <SpectrumThemeProvider>{children}</SpectrumThemeProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n"],"mappings":"AAAA,SAASA,aAAa,EAAaC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC9E,OAAOC,GAAG,MAAM,gBAAgB;AAAC,SACxBC,sBAAsB;AAAA,SAE7BC,4BAA4B,EAC5BC,eAAe,EACfC,oBAAoB,EACpBC,mBAAmB,EACnBC,mBAAmB;AAAA,SAEZC,qBAAqB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAQ9B,IAAMC,GAAG,GAAGd,GAAG,CAACe,MAAM,CAAC,eAAe,CAAC;AAEvC,OAAO,IAAMC,YAAY,gBAAGpB,aAAa,CAA2B,IAAI,CAAC;AAYzE,OAAO,SAASqB,aAAaA,CAAAC,IAAA,EAGO;EAAA,IAHN;IAC5BC,MAAM;IACNC;EACkB,CAAC,GAAAF,IAAA;EACnB,IAAMG,UAAU,GAAGvB,OAAO,CAAC,MAAMM,oBAAoB,CAAC,CAAC,EAAE,EAAE,CAAC;EAE5D,IAAM,CAACkB,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGxB,QAAQ,CACtD;IAAA,IAAAyB,qBAAA,EAAAC,oBAAA;IAAA,QAAAD,qBAAA,IAAAC,oBAAA,GAAMpB,mBAAmB,CAAC,CAAC,cAAAoB,oBAAA,uBAArBA,oBAAA,CAAuBC,QAAQ,cAAAF,qBAAA,cAAAA,qBAAA,GAAIvB,sBAAsB;EAAA,CACjE,CAAC;;EAED;EACA,IAAM0B,YAAY,GAAG7B,OAAO,CAC1B,MACEqB,MAAM,IAAI,IAAI,GACV,IAAI,GACJhB,eAAe,CAACmB,gBAAgB,EAAE;IAChCM,IAAI,EAAEP,UAAU;IAChBQ,MAAM,EAAEV,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI;EACpB,CAAC,CAAC,EACR,CAACE,UAAU,EAAEC,gBAAgB,EAAEH,MAAM,CACvC,CAAC;EAEDtB,SAAS,CACP,SAASiC,sBAAsBA,CAAA,EAAG;IAChC;IACA,IAAIH,YAAY,IAAI,IAAI,IAAIR,MAAM,IAAI,IAAI,EAAE;MAC1C;IACF;IAEA,IAAMY,mBAAmB,GAAG7B,4BAA4B,CAAC,CAAC;IAE1DY,GAAG,CAACkB,MAAM,CAAC,yBAAyB,EAAE;MACpCC,MAAM,EAAEN,YAAY,CAACO,GAAG,CAACC,KAAK,IAAIA,KAAK,CAACT,QAAQ,CAAC;MACjDU,GAAG,EAAEjB,MAAM,CAACe,GAAG,CAACC,KAAK,IAAIA,KAAK,CAACT,QAAQ,CAAC;MACxCK,mBAAmB;MACnBT;IACF,CAAC,CAAC;IAEFhB,mBAAmB,CAAC;MAClBoB,QAAQ,EAAEJ,gBAAgB;MAC1BS;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAACJ,YAAY,EAAEL,gBAAgB,EAAEH,MAAM,CACzC,CAAC;EAED,IAAMkB,KAAK,GAAGvC,OAAO,CACnB,OAAO;IACL6B,YAAY;IACZL,gBAAgB;IAChBC;EACF,CAAC,CAAC,EACF,CAACI,YAAY,EAAEL,gBAAgB,CACjC,CAAC;EAED,oBACET,KAAA,CAACG,YAAY,CAACsB,QAAQ;IAACD,KAAK,EAAEA,KAAM;IAAAjB,QAAA,GACjCO,YAAY,IAAI,IAAI,GAAG,IAAI,gBAC1BlB,IAAA,CAAAE,SAAA;MAAAS,QAAA,EACGO,YAAY,CAACO,GAAG,CAACC,KAAK,iBACrB1B,IAAA;QAAO,kBAAgB0B,KAAK,CAACT,QAAS;QAAAN,QAAA,EACnCe,KAAK,CAACI;MAAY,GADuBJ,KAAK,CAACT,QAE3C,CACR;IAAC,CACF,CACH,eACDjB,IAAA,CAACF,qBAAqB;MAAAa,QAAA,EAAEA;IAAQ,CAAwB,CAAC;EAAA,CACpC,CAAC;AAE5B;AAEA,eAAeH,aAAa"}
+{"version":3,"file":"ThemeProvider.js","names":["createContext","useEffect","useMemo","useState","Log","DEFAULT_DARK_THEME_KEY","calculatePreloadStyleContent","getActiveThemes","getDefaultBaseThemes","getThemePreloadData","setThemePreloadData","overrideSVGFillColors","SpectrumThemeProvider","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","log","module","ThemeContext","ThemeProvider","_ref","themes","children","baseThemes","selectedThemeKey","setSelectedThemeKey","_getThemePreloadData$","_getThemePreloadData","themeKey","activeThemes","base","custom","updateThemePreloadData","preloadStyleContent","debug2","active","map","theme","all","value","Provider","styleContent"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useEffect, useMemo, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { DEFAULT_DARK_THEME_KEY, ThemeData } from './ThemeModel';\nimport {\n  calculatePreloadStyleContent,\n  getActiveThemes,\n  getDefaultBaseThemes,\n  getThemePreloadData,\n  setThemePreloadData,\n  overrideSVGFillColors,\n} from './ThemeUtils';\nimport { SpectrumThemeProvider } from './SpectrumThemeProvider';\nimport './theme-svg.scss';\n\nexport interface ThemeContextValue {\n  activeThemes: ThemeData[] | null;\n  selectedThemeKey: string;\n  setSelectedThemeKey: (themeKey: string) => void;\n}\n\nconst log = Log.module('ThemeProvider');\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport interface ThemeProviderProps {\n  /*\n   * Additional themes to load in addition to the base themes. If no additional\n   * themes are to be loaded, this must be set to an empty array in order to\n   * tell the provider to activate the base themes.\n   */\n  themes: ThemeData[] | null;\n  children: ReactNode;\n}\n\nexport function ThemeProvider({\n  themes,\n  children,\n}: ThemeProviderProps): JSX.Element {\n  const baseThemes = useMemo(() => getDefaultBaseThemes(), []);\n\n  const [selectedThemeKey, setSelectedThemeKey] = useState<string>(\n    () => getThemePreloadData()?.themeKey ?? DEFAULT_DARK_THEME_KEY\n  );\n\n  // Calculate active themes once a non-null themes array is provided.\n  const activeThemes = useMemo(\n    () =>\n      themes == null\n        ? null\n        : getActiveThemes(selectedThemeKey, {\n            base: baseThemes,\n            custom: themes ?? [],\n          }),\n    [baseThemes, selectedThemeKey, themes]\n  );\n\n  useEffect(\n    function updateThemePreloadData() {\n      // Don't update preload data until themes have been loaded and activated\n      if (activeThemes == null || themes == null) {\n        return;\n      }\n\n      // Override fill color for certain inline SVGs (the originals are provided\n      // by theme-svg.scss)\n      overrideSVGFillColors();\n\n      const preloadStyleContent = calculatePreloadStyleContent();\n\n      log.debug2('updateThemePreloadData:', {\n        active: activeThemes.map(theme => theme.themeKey),\n        all: themes.map(theme => theme.themeKey),\n        preloadStyleContent,\n        selectedThemeKey,\n      });\n\n      setThemePreloadData({\n        themeKey: selectedThemeKey,\n        preloadStyleContent,\n      });\n    },\n    [activeThemes, selectedThemeKey, themes]\n  );\n\n  const value = useMemo(\n    () => ({\n      activeThemes,\n      selectedThemeKey,\n      setSelectedThemeKey,\n    }),\n    [activeThemes, selectedThemeKey]\n  );\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {activeThemes == null ? null : (\n        <>\n          {activeThemes.map(theme => (\n            <style data-theme-key={theme.themeKey} key={theme.themeKey}>\n              {theme.styleContent}\n            </style>\n          ))}\n        </>\n      )}\n      <SpectrumThemeProvider>{children}</SpectrumThemeProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n"],"mappings":"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"}

package/dist/theme/ThemeUtils.d.ts

@@ -1,15 +1,24 @@
-import { ThemeData, ThemePreloadData, ThemePreloadStyleContent, ThemeRegistrationData } from './ThemeModel';
+import { ThemeData, ThemePreloadData, CssVariableStyleContent, ThemeRegistrationData, ThemeCssVariableName } from './ThemeModel';
 export declare const CSS_VAR_EXPRESSION_PREFIX = "var(--";
 export declare const TMP_CSS_PROP_PREFIX = "dh-tmp";
 export declare const NON_WHITESPACE_REGEX: RegExp;
 export declare const WHITESPACE_REGEX: RegExp;
 export type VarExpressionResolver = (varExpression: string) => string;
 /**
- * Creates a string containing preload style content for the current theme.
- * This resolves the current values of a few CSS variables that can be used
- * to style the page before the theme is loaded on next page load.
+ * Resolves the current values of CSS variables we want to preload. Preloading
+ * happens before themes are fully loaded so that we can style things like the
+ * loading spinner and background color which are shown to the user early on in
+ * the app lifecycle.
  */
-export declare function calculatePreloadStyleContent(): ThemePreloadStyleContent;
+export declare function calculatePreloadStyleContent(): CssVariableStyleContent;
+/**
+ * Create a resolver function for calculating the value of a css variable based
+ * on a given element's computed style. If the variable resolves to '', we check
+ * DEFAULT_PRELOAD_DATA_VARIABLES for a default value, and if one does not exist,
+ * return ''.
+ * @param el Element to resolve css variables against
+ */
+export declare function createCssVariableResolver(el: Element): (varName: ThemeCssVariableName) => string;
 /**
  * Extracts all css variable expressions from the given record and returns
  * a set of unique expressions.
@@ -57,6 +66,13 @@ export declare function getThemePreloadData(): ThemePreloadData | null;
  * @returns An array of [start, end] index pairs for each expression
  */
 export declare function getExpressionRanges(value: string): [number, number][];
+/**
+ * Replace the `fill='...'` attribute in the given SVG content with the given
+ * color string.
+ * @param svgContent Inline SVG content to replace the fill color in
+ * @param fillColor The color to replace the fill color with
+ */
+export declare function replaceSVGFillColor(svgContent: string, fillColor: string): string;
 /**
  * Make a copy of the given object replacing any css variable expressions
  * contained in its prop values with values resolved from the given HTML element.
@@ -99,4 +115,20 @@ export declare function getThemeKey(pluginName: string, themeName: string): stri
  * Preload minimal theme variables from the cache.
  */
 export declare function preloadTheme(): void;
+/**
+ * Inline SVGs cannot depend on dynamic CSS variables, so we have to statically
+ * update them if we want to change their color.
+ *
+ * This function:
+ * 1. Clears any previous overrides
+ * 2. Resolves CSS variables containing inline SVG urls
+ * 3. Resolves mapped color variables and replaces the `fill='...'` attribute with the result
+ * 4. Sets the original CSS variable to the new replaced value
+ *
+ * Note that it is preferable to use inline SVGs as background-mask values and
+ * just change the background color instead of relying on this util, but this
+ * is not always possible. e.g. <select> elements don't support pseudo elements,
+ * so there's not a good way to set icons via masks.
+ */
+export declare function overrideSVGFillColors(): void;
 //# sourceMappingURL=ThemeUtils.d.ts.map

package/dist/theme/ThemeUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeUtils.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeUtils.ts"],"names":[],"mappings":"AAgBA,OAAO,EAIL,SAAS,EACT,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAItB,eAAO,MAAM,yBAAyB,WAAW,CAAC;AAClD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAC5C,eAAO,MAAM,oBAAoB,QAAO,CAAC;AACzC,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,MAAM,MAAM,qBAAqB,GAAG,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,CAAC;AAEtE;;;;GAIG;AACH,wBAAgB,4BAA4B,IAAI,wBAAwB,CAWvE;AAED;;;;GAIG;AACH,wBAAgB,qCAAqC,CACnD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,GAAG,CAAC,MAAM,CAAC,CAcb;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,iBAAiB,EAAE,qBAAqB,GACvC,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CA+BtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,EAAE,CAalD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAU7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAiCrE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1E,MAAM,EAAE,CAAC,EACT,aAAa,GAAE,WAA2B,GACzC,CAAC,CA2CH;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,MAAM,GACZ,MAAM,CAyBR;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAKvE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAEzE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAUnC"}
+{"version":3,"file":"ThemeUtils.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeUtils.ts"],"names":[],"mappings":"AAgBA,OAAO,EAIL,SAAS,EACT,gBAAgB,EAChB,uBAAuB,EAEvB,qBAAqB,EAGrB,oBAAoB,EAErB,MAAM,cAAc,CAAC;AAItB,eAAO,MAAM,yBAAyB,WAAW,CAAC;AAClD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAC5C,eAAO,MAAM,oBAAoB,QAAO,CAAC;AACzC,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,MAAM,MAAM,qBAAqB,GAAG,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,CAAC;AAEtE;;;;;GAKG;AACH,wBAAgB,4BAA4B,IAAI,uBAAuB,CAUtE;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,EAAE,EAAE,OAAO,GACV,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,CAkB3C;AAED;;;;GAIG;AACH,wBAAgB,qCAAqC,CACnD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,GAAG,CAAC,MAAM,CAAC,CAcb;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,iBAAiB,EAAE,qBAAqB,GACvC,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CA+BtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,EAAE,CAalD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAU7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAiCrE;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,MAAM,CAKR;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1E,MAAM,EAAE,CAAC,EACT,aAAa,GAAE,WAA2B,GACzC,CAAC,CA2CH;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,MAAM,GACZ,MAAM,CAyBR;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAKvE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAEzE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAUnC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CAkB5C"}