@deephaven/components 0.43.0 → 0.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AutoCompleteInput.css +35 -0
- package/dist/AutoCompleteInput.css.map +1 -0
- package/dist/AutoCompleteInput.js +496 -0
- package/dist/AutoCompleteInput.js.map +1 -0
- package/dist/AutoResizeTextarea.css +11 -0
- package/dist/AutoResizeTextarea.css.map +1 -0
- package/dist/AutoResizeTextarea.js +128 -0
- package/dist/AutoResizeTextarea.js.map +1 -0
- package/dist/BasicModal.js +112 -0
- package/dist/BasicModal.js.map +1 -0
- package/dist/Button.d.ts +1 -1
- package/dist/Button.js +193 -0
- package/dist/Button.js.map +1 -0
- package/dist/ButtonGroup.js +31 -0
- package/dist/ButtonGroup.js.map +1 -0
- package/dist/ButtonOld.js +41 -0
- package/dist/ButtonOld.js.map +1 -0
- package/dist/CardFlip.css +36 -0
- package/dist/CardFlip.css.map +1 -0
- package/dist/CardFlip.js +61 -0
- package/dist/CardFlip.js.map +1 -0
- package/dist/Checkbox.js +104 -0
- package/dist/Checkbox.js.map +1 -0
- package/dist/Collapse.js +89 -0
- package/dist/Collapse.js.map +1 -0
- package/dist/ComboBox.css +50 -0
- package/dist/ComboBox.css.map +1 -0
- package/dist/ComboBox.js +487 -0
- package/dist/ComboBox.js.map +1 -0
- package/dist/CopyButton.js +30 -0
- package/dist/CopyButton.js.map +1 -0
- package/dist/CustomTimeSelect.css +65 -0
- package/dist/CustomTimeSelect.css.map +1 -0
- package/dist/CustomTimeSelect.js +516 -0
- package/dist/CustomTimeSelect.js.map +1 -0
- package/dist/DateInput.js +54 -0
- package/dist/DateInput.js.map +1 -0
- package/dist/DateInputUtils.js +33 -0
- package/dist/DateInputUtils.js.map +1 -0
- package/dist/DateTimeInput.js +84 -0
- package/dist/DateTimeInput.js.map +1 -0
- package/dist/DateTimeInputUtils.js +8 -0
- package/dist/DateTimeInputUtils.js.map +1 -0
- package/dist/DebouncedSearchInput.js +79 -0
- package/dist/DebouncedSearchInput.js.map +1 -0
- package/dist/DragUtils.js +68 -0
- package/dist/DragUtils.js.map +1 -0
- package/dist/DraggableItemList.css +118 -0
- package/dist/DraggableItemList.css.map +1 -0
- package/dist/DraggableItemList.js +268 -0
- package/dist/DraggableItemList.js.map +1 -0
- package/dist/EditableItemList.js +105 -0
- package/dist/EditableItemList.js.map +1 -0
- package/dist/HierarchicalCheckboxMenu.css +30 -0
- package/dist/HierarchicalCheckboxMenu.css.map +1 -0
- package/dist/HierarchicalCheckboxMenu.js +218 -0
- package/dist/HierarchicalCheckboxMenu.js.map +1 -0
- package/dist/ItemList.css +13 -0
- package/dist/ItemList.css.map +1 -0
- package/dist/ItemList.js +686 -0
- package/dist/ItemList.js.map +1 -0
- package/dist/ItemListItem.css +48 -0
- package/dist/ItemListItem.css.map +1 -0
- package/dist/ItemListItem.js +214 -0
- package/dist/ItemListItem.js.map +1 -0
- package/dist/LoadingOverlay.css +24 -0
- package/dist/LoadingOverlay.css.map +1 -0
- package/dist/LoadingOverlay.js +48 -0
- package/dist/LoadingOverlay.js.map +1 -0
- package/dist/LoadingSpinner.css +8 -0
- package/dist/LoadingSpinner.css.map +1 -0
- package/dist/LoadingSpinner.js +24 -0
- package/dist/LoadingSpinner.js.map +1 -0
- package/dist/MaskedInput.css +7 -0
- package/dist/MaskedInput.css.map +1 -0
- package/dist/MaskedInput.js +394 -0
- package/dist/MaskedInput.js.map +1 -0
- package/dist/MaskedInputUtils.js +36 -0
- package/dist/MaskedInputUtils.js.map +1 -0
- package/dist/Option.js +16 -0
- package/dist/Option.js.map +1 -0
- package/dist/RadioGroup.js +34 -0
- package/dist/RadioGroup.js.map +1 -0
- package/dist/RadioItem.js +55 -0
- package/dist/RadioItem.js.map +1 -0
- package/dist/RandomAreaPlotAnimation.css +18 -0
- package/dist/RandomAreaPlotAnimation.css.map +1 -0
- package/dist/RandomAreaPlotAnimation.js +290 -0
- package/dist/RandomAreaPlotAnimation.js.map +1 -0
- package/dist/SearchInput.css +43 -0
- package/dist/SearchInput.css.map +1 -0
- package/dist/SearchInput.js +66 -0
- package/dist/SearchInput.js.map +1 -0
- package/dist/Select.js +30 -0
- package/dist/Select.js.map +1 -0
- package/dist/SelectValueList.css +38 -0
- package/dist/SelectValueList.css.map +1 -0
- package/dist/SelectValueList.js +175 -0
- package/dist/SelectValueList.js.map +1 -0
- package/dist/SocketedButton.css +123 -0
- package/dist/SocketedButton.css.map +1 -0
- package/dist/SocketedButton.js +63 -0
- package/dist/SocketedButton.js.map +1 -0
- package/dist/SpectrumThemeDark.module.css +9 -0
- package/dist/SpectrumThemeDark.module.css.map +1 -0
- package/dist/SpectrumThemeLight.module.css +9 -0
- package/dist/SpectrumThemeLight.module.css.map +1 -0
- package/dist/SpectrumUtils.js +59 -0
- package/dist/SpectrumUtils.js.map +1 -0
- package/dist/ThemeExport.js +15 -0
- package/dist/ThemeExport.js.map +1 -0
- package/dist/ThemeExport.module.css +40 -0
- package/dist/ThemeExport.module.css.map +1 -0
- package/dist/TimeInput.js +101 -0
- package/dist/TimeInput.js.map +1 -0
- package/dist/TimeSlider.css +178 -0
- package/dist/TimeSlider.css.map +1 -0
- package/dist/TimeSlider.js +314 -0
- package/dist/TimeSlider.js.map +1 -0
- package/dist/TimeSlider.module.css +185 -0
- package/dist/TimeSlider.module.css.map +1 -0
- package/dist/ToastNotification.css +62 -0
- package/dist/ToastNotification.css.map +1 -0
- package/dist/ToastNotification.js +56 -0
- package/dist/ToastNotification.js.map +1 -0
- package/dist/UISwitch.css +94 -0
- package/dist/UISwitch.css.map +1 -0
- package/dist/UISwitch.js +30 -0
- package/dist/UISwitch.js.map +1 -0
- package/dist/ValidateLabelInput.css +9 -0
- package/dist/ValidateLabelInput.css.map +1 -0
- package/dist/ValidateLabelInput.js +50 -0
- package/dist/ValidateLabelInput.js.map +1 -0
- package/dist/context-actions/ContextActionUtils.js +142 -0
- package/dist/context-actions/ContextActionUtils.js.map +1 -0
- package/dist/context-actions/ContextActions.css +157 -0
- package/dist/context-actions/ContextActions.css.map +1 -0
- package/dist/context-actions/ContextActions.js +182 -0
- package/dist/context-actions/ContextActions.js.map +1 -0
- package/dist/context-actions/ContextMenu.js +559 -0
- package/dist/context-actions/ContextMenu.js.map +1 -0
- package/dist/context-actions/ContextMenuItem.js +139 -0
- package/dist/context-actions/ContextMenuItem.js.map +1 -0
- package/dist/context-actions/ContextMenuRoot.js +135 -0
- package/dist/context-actions/ContextMenuRoot.js.map +1 -0
- package/dist/context-actions/GlobalContextAction.js +53 -0
- package/dist/context-actions/GlobalContextAction.js.map +1 -0
- package/dist/context-actions/GlobalContextActions.js +28 -0
- package/dist/context-actions/GlobalContextActions.js.map +1 -0
- package/dist/context-actions/index.js +5 -0
- package/dist/context-actions/index.js.map +1 -0
- package/dist/declaration.d.js +2 -0
- package/dist/declaration.d.js.map +1 -0
- package/dist/index.js +52 -0
- package/dist/index.js.map +1 -0
- package/dist/menu-actions/DropdownMenu.css +39 -0
- package/dist/menu-actions/DropdownMenu.css.map +1 -0
- package/dist/menu-actions/DropdownMenu.js +174 -0
- package/dist/menu-actions/DropdownMenu.js.map +1 -0
- package/dist/menu-actions/Menu.js +244 -0
- package/dist/menu-actions/Menu.js.map +1 -0
- package/dist/menu-actions/index.js +4 -0
- package/dist/menu-actions/index.js.map +1 -0
- package/dist/modal/DebouncedModal.js +26 -0
- package/dist/modal/DebouncedModal.js.map +1 -0
- package/dist/modal/InfoModal.css +24 -0
- package/dist/modal/InfoModal.css.map +1 -0
- package/dist/modal/InfoModal.js +34 -0
- package/dist/modal/InfoModal.js.map +1 -0
- package/dist/modal/Modal.js +122 -0
- package/dist/modal/Modal.js.map +1 -0
- package/dist/modal/ModalBody.js +16 -0
- package/dist/modal/ModalBody.js.map +1 -0
- package/dist/modal/ModalFooter.js +14 -0
- package/dist/modal/ModalFooter.js.map +1 -0
- package/dist/modal/ModalHeader.js +27 -0
- package/dist/modal/ModalHeader.js.map +1 -0
- package/dist/modal/index.js +7 -0
- package/dist/modal/index.js.map +1 -0
- package/dist/navigation/Menu.css +13 -0
- package/dist/navigation/Menu.css.map +1 -0
- package/dist/navigation/Menu.js +25 -0
- package/dist/navigation/Menu.js.map +1 -0
- package/dist/navigation/MenuItem.css +46 -0
- package/dist/navigation/MenuItem.css.map +1 -0
- package/dist/navigation/MenuItem.js +65 -0
- package/dist/navigation/MenuItem.js.map +1 -0
- package/dist/navigation/Page.css +34 -0
- package/dist/navigation/Page.css.map +1 -0
- package/dist/navigation/Page.js +46 -0
- package/dist/navigation/Page.js.map +1 -0
- package/dist/navigation/Stack.css +24 -0
- package/dist/navigation/Stack.css.map +1 -0
- package/dist/navigation/Stack.js +82 -0
- package/dist/navigation/Stack.js.map +1 -0
- package/dist/navigation/index.js +5 -0
- package/dist/navigation/index.js.map +1 -0
- package/dist/popper/Popper.css +127 -0
- package/dist/popper/Popper.css.map +1 -0
- package/dist/popper/Popper.js +283 -0
- package/dist/popper/Popper.js.map +1 -0
- package/dist/popper/Tooltip.js +283 -0
- package/dist/popper/Tooltip.js.map +1 -0
- package/dist/popper/index.js +3 -0
- package/dist/popper/index.js.map +1 -0
- package/dist/shortcuts/GlobalShortcuts.js +47 -0
- package/dist/shortcuts/GlobalShortcuts.js.map +1 -0
- package/dist/shortcuts/Shortcut.js +393 -0
- package/dist/shortcuts/Shortcut.js.map +1 -0
- package/dist/shortcuts/ShortcutRegistry.js +78 -0
- package/dist/shortcuts/ShortcutRegistry.js.map +1 -0
- package/dist/shortcuts/index.js +5 -0
- package/dist/shortcuts/index.js.map +1 -0
- package/package.json +7 -7
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* stylelint-disable scss/at-import-no-partial-leading-underscore */
|
|
2
|
+
.aci-container {
|
|
3
|
+
flex-grow: 1;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.aci-options {
|
|
7
|
+
max-height: 200px;
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
overflow: auto;
|
|
10
|
+
user-select: none;
|
|
11
|
+
}
|
|
12
|
+
.aci-options .no-match {
|
|
13
|
+
padding: 0.375rem 0.75rem;
|
|
14
|
+
}
|
|
15
|
+
.aci-options .aci-option-btn {
|
|
16
|
+
border: none;
|
|
17
|
+
width: 100%;
|
|
18
|
+
color: #f0f0ee;
|
|
19
|
+
padding: 0.375rem 0.75rem;
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
background: none;
|
|
22
|
+
text-align: left;
|
|
23
|
+
}
|
|
24
|
+
.aci-options .aci-option-btn.keyboard-active {
|
|
25
|
+
background-color: rgba(72, 120, 234, 0.5);
|
|
26
|
+
}
|
|
27
|
+
.aci-options .aci-option-btn:hover {
|
|
28
|
+
color: #f0f0ee;
|
|
29
|
+
background-color: #4878ea;
|
|
30
|
+
}
|
|
31
|
+
.aci-options .aci-option-btn:focus {
|
|
32
|
+
outline: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/*# sourceMappingURL=AutoCompleteInput.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/AutoCompleteInput.scss","../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACOA;EACE;;;AAGF;EACE;EACA,eC4Gc;ED3Gd;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA,OCXa;EDYb;EACA;EACA;EACA;;AAEF;EACE,kBA5B8B;;AA+BhC;EACE,OCtBa;EDuBb,kBCxBY;;AD0Bd;EACE","file":"AutoCompleteInput.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$aci-option-btn-color: $foreground;\n$aci-option-keyboard-selected-bg: rgba($primary, 0.5);\n$aci-option-hover-bg: $dropdown-link-hover-bg;\n$aci-option-hover-color: $dropdown-link-hover-color;\n\n.aci-container {\n flex-grow: 1;\n}\n\n.aci-options {\n max-height: 200px;\n border-radius: $border-radius;\n overflow: auto;\n user-select: none;\n\n .no-match {\n padding: $input-btn-padding-y $input-btn-padding-x;\n }\n\n .aci-option-btn {\n border: none;\n width: 100%;\n color: $aci-option-btn-color;\n padding: $input-btn-padding-y $input-btn-padding-x;\n white-space: nowrap;\n background: none;\n text-align: left;\n }\n .aci-option-btn.keyboard-active {\n background-color: $aci-option-keyboard-selected-bg;\n }\n\n .aci-option-btn:hover {\n color: $aci-option-hover-color;\n background-color: $aci-option-hover-bg;\n }\n .aci-option-btn:focus {\n outline: none;\n }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n (\n 'red': $red,\n 'orange': $orange,\n 'yellow': $yellow,\n 'green': $green,\n 'blue': $blue,\n 'purple': $purple,\n 'white': $white,\n 'black': $black,\n ),\n $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n (\n 'primary': $primary,\n 'primary-hover': $primary-hover,\n 'primary-light': $primary-light,\n 'primary-dark': $primary-dark,\n 'secondary': $secondary,\n 'success': $success,\n 'info': $info,\n 'warning': $warning,\n 'danger': $danger,\n 'light': $light,\n 'dark': $dark,\n 'mid': $mid,\n 'content-bg': $interfacegray,\n 'background': $interfaceblack,\n 'foreground': $interfacewhite,\n ),\n $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n 'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n 'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n $gray-700,\n 15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n '#',\n '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n '#',\n '%23'\n);\n"]}
|
|
@@ -0,0 +1,496 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
5
|
+
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); }
|
|
6
|
+
/**
|
|
7
|
+
* An Input component that pops and filters auto complete options as you type.
|
|
8
|
+
*
|
|
9
|
+
* props:
|
|
10
|
+
* @param options :[{
|
|
11
|
+
* title: 'option title for display',
|
|
12
|
+
* value: 'option value' //option value
|
|
13
|
+
* }]
|
|
14
|
+
* @param popperOptions options for the Popper
|
|
15
|
+
* @param onChange called when the value is changed from the pulldown
|
|
16
|
+
* @param inputPlaceholder place holder for the input box
|
|
17
|
+
* @param disabled disable both input & drop down
|
|
18
|
+
* @param className an optional class name applied to the input element
|
|
19
|
+
* @param defaultTitle the default title to display
|
|
20
|
+
* @param spellCheck flag to disable spell checking, defaults to true
|
|
21
|
+
* @param onEnter called when the Enter key is typed in the input element
|
|
22
|
+
*
|
|
23
|
+
*/
|
|
24
|
+
import React, { Component } from 'react';
|
|
25
|
+
import PropTypes from 'prop-types';
|
|
26
|
+
import memoize from 'memoizee';
|
|
27
|
+
import classNames from 'classnames';
|
|
28
|
+
import debounce from 'lodash.debounce';
|
|
29
|
+
import { Popper } from "./popper/index.js";
|
|
30
|
+
import "./AutoCompleteInput.css";
|
|
31
|
+
var DEBOUNCE_DELAY = 100;
|
|
32
|
+
var MENU_NAVIGATION_DIRECTION;
|
|
33
|
+
(function (MENU_NAVIGATION_DIRECTION) {
|
|
34
|
+
MENU_NAVIGATION_DIRECTION["UP"] = "UP";
|
|
35
|
+
MENU_NAVIGATION_DIRECTION["DOWN"] = "DOWN";
|
|
36
|
+
})(MENU_NAVIGATION_DIRECTION || (MENU_NAVIGATION_DIRECTION = {}));
|
|
37
|
+
class AutoCompleteInput extends Component {
|
|
38
|
+
constructor(props) {
|
|
39
|
+
super(props);
|
|
40
|
+
_defineProperty(this, "popper", void 0);
|
|
41
|
+
_defineProperty(this, "cbContainer", void 0);
|
|
42
|
+
_defineProperty(this, "menuContainer", void 0);
|
|
43
|
+
_defineProperty(this, "input", void 0);
|
|
44
|
+
_defineProperty(this, "getCachedFilteredOptions", memoize((options, input) => options.filter(
|
|
45
|
+
// supports partial match
|
|
46
|
+
option => option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0)));
|
|
47
|
+
var {
|
|
48
|
+
popperOptions
|
|
49
|
+
} = this.props;
|
|
50
|
+
popperOptions = _objectSpread({
|
|
51
|
+
placement: 'bottom-end',
|
|
52
|
+
modifiers: {
|
|
53
|
+
preventOverflow: {
|
|
54
|
+
enabled: false
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}, popperOptions);
|
|
58
|
+
this.state = {
|
|
59
|
+
title: '',
|
|
60
|
+
filteredOptions: [],
|
|
61
|
+
keyboardOptionIndex: 0,
|
|
62
|
+
menuIsOpen: false,
|
|
63
|
+
inputWidth: 100,
|
|
64
|
+
invalid: false,
|
|
65
|
+
popperOptions
|
|
66
|
+
};
|
|
67
|
+
this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);
|
|
68
|
+
this.handleMenuBlur = this.handleMenuBlur.bind(this);
|
|
69
|
+
this.handleInputChange = this.handleInputChange.bind(this);
|
|
70
|
+
this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
|
|
71
|
+
this.handleInputBlur = this.handleInputBlur.bind(this);
|
|
72
|
+
this.handelInputFocus = this.handelInputFocus.bind(this);
|
|
73
|
+
this.handleInputClick = this.handleInputClick.bind(this);
|
|
74
|
+
this.updateInputValue = debounce(this.updateInputValue, DEBOUNCE_DELAY);
|
|
75
|
+
this.handleOptionClick = this.handleOptionClick.bind(this);
|
|
76
|
+
this.handleMenuOpened = this.handleMenuOpened.bind(this);
|
|
77
|
+
this.handleMenuExited = this.handleMenuExited.bind(this);
|
|
78
|
+
this.popper = /*#__PURE__*/React.createRef();
|
|
79
|
+
this.cbContainer = /*#__PURE__*/React.createRef();
|
|
80
|
+
this.menuContainer = /*#__PURE__*/React.createRef();
|
|
81
|
+
this.input = /*#__PURE__*/React.createRef();
|
|
82
|
+
}
|
|
83
|
+
setInputWidth() {
|
|
84
|
+
if (this.cbContainer.current) {
|
|
85
|
+
this.setState({
|
|
86
|
+
inputWidth: this.cbContainer.current.getBoundingClientRect().width
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
// validation needs to be an exact case-sensitve match on value
|
|
91
|
+
getValueAndValidate(title) {
|
|
92
|
+
if (!title) {
|
|
93
|
+
this.setState({
|
|
94
|
+
invalid: false
|
|
95
|
+
});
|
|
96
|
+
return {
|
|
97
|
+
value: title,
|
|
98
|
+
isValid: false
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// validate
|
|
103
|
+
var {
|
|
104
|
+
options
|
|
105
|
+
} = this.props;
|
|
106
|
+
var result = options.filter(option => option.title.toLowerCase() === title.toLowerCase());
|
|
107
|
+
if (result.length < 1) {
|
|
108
|
+
this.setState({
|
|
109
|
+
invalid: true
|
|
110
|
+
});
|
|
111
|
+
return {
|
|
112
|
+
value: title,
|
|
113
|
+
isValid: false
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
this.setState({
|
|
117
|
+
invalid: false
|
|
118
|
+
});
|
|
119
|
+
return {
|
|
120
|
+
value: result[0].value,
|
|
121
|
+
isValid: true
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// validate typed entries emit change event using value
|
|
126
|
+
updateInputValue(title) {
|
|
127
|
+
var {
|
|
128
|
+
menuIsOpen
|
|
129
|
+
} = this.state;
|
|
130
|
+
var {
|
|
131
|
+
value,
|
|
132
|
+
isValid
|
|
133
|
+
} = this.getValueAndValidate(title);
|
|
134
|
+
if (menuIsOpen) this.processFilterChange(title);
|
|
135
|
+
this.fireOnChange(value, isValid);
|
|
136
|
+
}
|
|
137
|
+
fireOnChange(value) {
|
|
138
|
+
var isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
139
|
+
var {
|
|
140
|
+
onChange
|
|
141
|
+
} = this.props;
|
|
142
|
+
onChange(value, isValid);
|
|
143
|
+
}
|
|
144
|
+
processFilterChange(filter) {
|
|
145
|
+
var _this$popper$current;
|
|
146
|
+
var {
|
|
147
|
+
options
|
|
148
|
+
} = this.props;
|
|
149
|
+
var {
|
|
150
|
+
menuIsOpen
|
|
151
|
+
} = this.state;
|
|
152
|
+
var filteredOptions = filter ? this.getCachedFilteredOptions(options, filter) : options;
|
|
153
|
+
var perfectMatch = filteredOptions.length === 1 && filteredOptions[0].title === filter;
|
|
154
|
+
this.setState({
|
|
155
|
+
filteredOptions,
|
|
156
|
+
keyboardOptionIndex: 0
|
|
157
|
+
});
|
|
158
|
+
if (perfectMatch && menuIsOpen) {
|
|
159
|
+
this.closeMenu();
|
|
160
|
+
return;
|
|
161
|
+
}
|
|
162
|
+
(_this$popper$current = this.popper.current) === null || _this$popper$current === void 0 ? void 0 : _this$popper$current.scheduleUpdate(); // filtered options list can change size, may need to be repositioned
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
resetValue() {
|
|
166
|
+
this.setState({
|
|
167
|
+
title: ''
|
|
168
|
+
});
|
|
169
|
+
this.fireOnChange('');
|
|
170
|
+
}
|
|
171
|
+
handleResize() {
|
|
172
|
+
this.setInputWidth();
|
|
173
|
+
}
|
|
174
|
+
handleMenuKeyDown(event) {
|
|
175
|
+
var _this$input$current;
|
|
176
|
+
var {
|
|
177
|
+
filteredOptions,
|
|
178
|
+
keyboardOptionIndex
|
|
179
|
+
} = this.state;
|
|
180
|
+
var option = filteredOptions[keyboardOptionIndex];
|
|
181
|
+
switch (event.key) {
|
|
182
|
+
case 'Enter':
|
|
183
|
+
case 'ArrowRight':
|
|
184
|
+
event.stopPropagation();
|
|
185
|
+
event.preventDefault();
|
|
186
|
+
if (option != null) {
|
|
187
|
+
this.setState({
|
|
188
|
+
title: option.title,
|
|
189
|
+
invalid: false
|
|
190
|
+
});
|
|
191
|
+
this.fireOnChange(option.value);
|
|
192
|
+
}
|
|
193
|
+
this.closeMenu();
|
|
194
|
+
(_this$input$current = this.input.current) === null || _this$input$current === void 0 ? void 0 : _this$input$current.focus();
|
|
195
|
+
break;
|
|
196
|
+
case 'ArrowUp':
|
|
197
|
+
event.stopPropagation();
|
|
198
|
+
event.preventDefault();
|
|
199
|
+
this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP);
|
|
200
|
+
break;
|
|
201
|
+
case 'ArrowDown':
|
|
202
|
+
event.stopPropagation();
|
|
203
|
+
event.preventDefault();
|
|
204
|
+
this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN);
|
|
205
|
+
break;
|
|
206
|
+
case 'Tab':
|
|
207
|
+
event.stopPropagation();
|
|
208
|
+
event.preventDefault();
|
|
209
|
+
if (event.shiftKey) {
|
|
210
|
+
this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP);
|
|
211
|
+
break;
|
|
212
|
+
}
|
|
213
|
+
this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN);
|
|
214
|
+
break;
|
|
215
|
+
case 'Escape':
|
|
216
|
+
event.preventDefault();
|
|
217
|
+
event.stopPropagation();
|
|
218
|
+
this.closeMenu();
|
|
219
|
+
break;
|
|
220
|
+
default:
|
|
221
|
+
break;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
navigateMenu(direction) {
|
|
225
|
+
var {
|
|
226
|
+
filteredOptions,
|
|
227
|
+
keyboardOptionIndex
|
|
228
|
+
} = this.state;
|
|
229
|
+
var newKeyboardOptionIndex = keyboardOptionIndex;
|
|
230
|
+
if (direction === AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP) {
|
|
231
|
+
if (keyboardOptionIndex > 0) {
|
|
232
|
+
newKeyboardOptionIndex = (newKeyboardOptionIndex - 1) % filteredOptions.length;
|
|
233
|
+
this.setState({
|
|
234
|
+
keyboardOptionIndex: newKeyboardOptionIndex
|
|
235
|
+
});
|
|
236
|
+
} else if (keyboardOptionIndex === 0) {
|
|
237
|
+
newKeyboardOptionIndex = filteredOptions.length - 1;
|
|
238
|
+
this.setState({
|
|
239
|
+
keyboardOptionIndex: newKeyboardOptionIndex
|
|
240
|
+
});
|
|
241
|
+
}
|
|
242
|
+
} else if (direction === AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN) {
|
|
243
|
+
if (keyboardOptionIndex < filteredOptions.length) {
|
|
244
|
+
newKeyboardOptionIndex = (newKeyboardOptionIndex + 1) % filteredOptions.length;
|
|
245
|
+
this.setState({
|
|
246
|
+
keyboardOptionIndex: newKeyboardOptionIndex
|
|
247
|
+
});
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
this.scrollOptionIntoView(newKeyboardOptionIndex);
|
|
251
|
+
}
|
|
252
|
+
handleInputKeyDown(event) {
|
|
253
|
+
var {
|
|
254
|
+
onEnter
|
|
255
|
+
} = this.props;
|
|
256
|
+
var {
|
|
257
|
+
menuIsOpen
|
|
258
|
+
} = this.state;
|
|
259
|
+
if (menuIsOpen) {
|
|
260
|
+
this.handleMenuKeyDown(event);
|
|
261
|
+
} else if (event.key === 'Enter') {
|
|
262
|
+
onEnter();
|
|
263
|
+
} else if (event.key === 'Escape') {
|
|
264
|
+
this.resetValue();
|
|
265
|
+
event.preventDefault();
|
|
266
|
+
event.stopPropagation();
|
|
267
|
+
} else if (!(event.key === 'ArrowRight' || event.key === 'ArrowLeft' || event.key === 'Tab' || event.key === 'Shift')) {
|
|
268
|
+
this.openMenu();
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
handleInputChange(event) {
|
|
272
|
+
this.setState({
|
|
273
|
+
title: event.target.value
|
|
274
|
+
});
|
|
275
|
+
this.updateInputValue(event.target.value);
|
|
276
|
+
}
|
|
277
|
+
handleOptionClick(option) {
|
|
278
|
+
var _this$input$current2;
|
|
279
|
+
this.setState({
|
|
280
|
+
title: option.title,
|
|
281
|
+
invalid: false
|
|
282
|
+
});
|
|
283
|
+
this.fireOnChange(option.value);
|
|
284
|
+
this.closeMenu();
|
|
285
|
+
(_this$input$current2 = this.input.current) === null || _this$input$current2 === void 0 ? void 0 : _this$input$current2.focus();
|
|
286
|
+
}
|
|
287
|
+
handelInputFocus() {
|
|
288
|
+
var {
|
|
289
|
+
menuIsOpen
|
|
290
|
+
} = this.state;
|
|
291
|
+
if (!menuIsOpen) {
|
|
292
|
+
this.openMenu();
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
handleInputClick() {
|
|
296
|
+
var {
|
|
297
|
+
menuIsOpen
|
|
298
|
+
} = this.state;
|
|
299
|
+
if (!menuIsOpen) {
|
|
300
|
+
this.openMenu();
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
handleInputBlur(event) {
|
|
304
|
+
var {
|
|
305
|
+
menuIsOpen
|
|
306
|
+
} = this.state;
|
|
307
|
+
if (menuIsOpen && event.relatedTarget instanceof Element && this.popper.current !== null && this.popper.current.element.contains(event.relatedTarget)) {
|
|
308
|
+
return;
|
|
309
|
+
}
|
|
310
|
+
this.closeMenu(false);
|
|
311
|
+
}
|
|
312
|
+
handleMenuBlur(event) {
|
|
313
|
+
// if blur event is caused by focusing on the input or focus on options don't close menu
|
|
314
|
+
if (event.relatedTarget === this.input.current || event.relatedTarget instanceof Element && this.popper.current !== null && this.popper.current.element.contains(event.relatedTarget)) {
|
|
315
|
+
return;
|
|
316
|
+
}
|
|
317
|
+
this.closeMenu(false);
|
|
318
|
+
}
|
|
319
|
+
handleMenuOpened() {
|
|
320
|
+
var _this$input$current3;
|
|
321
|
+
(_this$input$current3 = this.input.current) === null || _this$input$current3 === void 0 ? void 0 : _this$input$current3.focus();
|
|
322
|
+
}
|
|
323
|
+
handleMenuExited() {
|
|
324
|
+
var {
|
|
325
|
+
menuIsOpen
|
|
326
|
+
} = this.state;
|
|
327
|
+
if (menuIsOpen) {
|
|
328
|
+
this.setState({
|
|
329
|
+
menuIsOpen: false,
|
|
330
|
+
keyboardOptionIndex: 0
|
|
331
|
+
});
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
openMenu() {
|
|
335
|
+
var {
|
|
336
|
+
title
|
|
337
|
+
} = this.state;
|
|
338
|
+
this.processFilterChange(title);
|
|
339
|
+
this.setInputWidth();
|
|
340
|
+
this.setState({
|
|
341
|
+
menuIsOpen: true
|
|
342
|
+
});
|
|
343
|
+
|
|
344
|
+
// https://github.com/reactjs/react-transition-group/issues/382
|
|
345
|
+
window.requestAnimationFrame(() => {
|
|
346
|
+
var _this$popper$current2;
|
|
347
|
+
(_this$popper$current2 = this.popper.current) === null || _this$popper$current2 === void 0 ? void 0 : _this$popper$current2.show();
|
|
348
|
+
});
|
|
349
|
+
}
|
|
350
|
+
closeMenu() {
|
|
351
|
+
var _this$popper$current3;
|
|
352
|
+
var focusInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
353
|
+
this.setState({
|
|
354
|
+
menuIsOpen: false,
|
|
355
|
+
keyboardOptionIndex: 0
|
|
356
|
+
});
|
|
357
|
+
if (focusInput) {
|
|
358
|
+
var _this$input$current4;
|
|
359
|
+
(_this$input$current4 = this.input.current) === null || _this$input$current4 === void 0 ? void 0 : _this$input$current4.focus();
|
|
360
|
+
}
|
|
361
|
+
(_this$popper$current3 = this.popper.current) === null || _this$popper$current3 === void 0 ? void 0 : _this$popper$current3.hide();
|
|
362
|
+
}
|
|
363
|
+
scrollOptionIntoView(index) {
|
|
364
|
+
if (this.menuContainer.current) {
|
|
365
|
+
var _this$menuContainer$c;
|
|
366
|
+
(_this$menuContainer$c = this.menuContainer.current.children.item(index)) === null || _this$menuContainer$c === void 0 ? void 0 : _this$menuContainer$c.scrollIntoView({
|
|
367
|
+
behavior: 'smooth',
|
|
368
|
+
block: 'nearest'
|
|
369
|
+
});
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
renderMenuElement() {
|
|
373
|
+
var {
|
|
374
|
+
inputWidth
|
|
375
|
+
} = this.state;
|
|
376
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
377
|
+
className: classNames('aci-options'),
|
|
378
|
+
ref: this.menuContainer,
|
|
379
|
+
role: "presentation",
|
|
380
|
+
onKeyDown: this.handleMenuKeyDown,
|
|
381
|
+
style: {
|
|
382
|
+
width: inputWidth
|
|
383
|
+
},
|
|
384
|
+
onBlur: this.handleMenuBlur
|
|
385
|
+
}, this.renderOptions());
|
|
386
|
+
}
|
|
387
|
+
renderOptions() {
|
|
388
|
+
var {
|
|
389
|
+
noMatchText
|
|
390
|
+
} = this.props;
|
|
391
|
+
var {
|
|
392
|
+
title,
|
|
393
|
+
filteredOptions
|
|
394
|
+
} = this.state;
|
|
395
|
+
if (title && filteredOptions.length === 0) {
|
|
396
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
397
|
+
className: "no-match"
|
|
398
|
+
}, noMatchText);
|
|
399
|
+
}
|
|
400
|
+
return filteredOptions.map((option, index) => this.renderOption(option, index));
|
|
401
|
+
}
|
|
402
|
+
renderOption(option, index) {
|
|
403
|
+
var {
|
|
404
|
+
keyboardOptionIndex
|
|
405
|
+
} = this.state;
|
|
406
|
+
var key = "option-".concat(index, "-").concat(option.value);
|
|
407
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
408
|
+
key: key,
|
|
409
|
+
type: "button",
|
|
410
|
+
className: classNames('aci-option-btn', {
|
|
411
|
+
'keyboard-active': keyboardOptionIndex === index
|
|
412
|
+
}),
|
|
413
|
+
onClick: () => this.handleOptionClick(option),
|
|
414
|
+
onFocus: () => this.setState({
|
|
415
|
+
keyboardOptionIndex: index
|
|
416
|
+
})
|
|
417
|
+
}, option.title);
|
|
418
|
+
}
|
|
419
|
+
render() {
|
|
420
|
+
var {
|
|
421
|
+
options,
|
|
422
|
+
inputPlaceholder,
|
|
423
|
+
disabled,
|
|
424
|
+
className,
|
|
425
|
+
defaultTitle,
|
|
426
|
+
spellCheck,
|
|
427
|
+
'data-testid': dataTestId
|
|
428
|
+
} = this.props;
|
|
429
|
+
var {
|
|
430
|
+
title,
|
|
431
|
+
menuIsOpen,
|
|
432
|
+
popperOptions,
|
|
433
|
+
invalid
|
|
434
|
+
} = this.state;
|
|
435
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
436
|
+
className: "aci-container",
|
|
437
|
+
ref: this.cbContainer
|
|
438
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
439
|
+
value: title || defaultTitle,
|
|
440
|
+
className: classNames('form-control', className, 'aci-input', {
|
|
441
|
+
'is-invalid': invalid && !menuIsOpen
|
|
442
|
+
}),
|
|
443
|
+
ref: this.input,
|
|
444
|
+
onChange: this.handleInputChange,
|
|
445
|
+
placeholder: inputPlaceholder || options[0].title,
|
|
446
|
+
disabled: disabled,
|
|
447
|
+
onFocus: this.handelInputFocus,
|
|
448
|
+
onClick: this.handleInputClick,
|
|
449
|
+
onBlur: this.handleInputBlur,
|
|
450
|
+
onKeyDown: this.handleInputKeyDown,
|
|
451
|
+
spellCheck: spellCheck,
|
|
452
|
+
"data-testid": dataTestId
|
|
453
|
+
}), /*#__PURE__*/React.createElement(Popper, {
|
|
454
|
+
ref: this.popper,
|
|
455
|
+
options: popperOptions,
|
|
456
|
+
className: classNames('aci-options-popper interactive'),
|
|
457
|
+
onEntered: this.handleMenuOpened,
|
|
458
|
+
onExited: this.handleMenuExited
|
|
459
|
+
}, this.renderMenuElement()));
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
_defineProperty(AutoCompleteInput, "propTypes", {
|
|
463
|
+
options: PropTypes.arrayOf(PropTypes.shape({
|
|
464
|
+
title: PropTypes.string.isRequired,
|
|
465
|
+
value: PropTypes.string.isRequired
|
|
466
|
+
})).isRequired,
|
|
467
|
+
popperOptions: PropTypes.shape({}),
|
|
468
|
+
onChange: PropTypes.func,
|
|
469
|
+
inputPlaceholder: PropTypes.string,
|
|
470
|
+
disabled: PropTypes.bool,
|
|
471
|
+
className: PropTypes.string,
|
|
472
|
+
defaultTitle: PropTypes.string,
|
|
473
|
+
spellCheck: PropTypes.bool,
|
|
474
|
+
onEnter: PropTypes.func,
|
|
475
|
+
noMatchText: PropTypes.string,
|
|
476
|
+
'data-testid': PropTypes.string
|
|
477
|
+
});
|
|
478
|
+
_defineProperty(AutoCompleteInput, "defaultProps", {
|
|
479
|
+
onChange() {
|
|
480
|
+
// no-op
|
|
481
|
+
},
|
|
482
|
+
inputPlaceholder: '',
|
|
483
|
+
disabled: false,
|
|
484
|
+
className: '',
|
|
485
|
+
defaultTitle: '',
|
|
486
|
+
popperOptions: null,
|
|
487
|
+
spellCheck: true,
|
|
488
|
+
onEnter() {
|
|
489
|
+
// no-op
|
|
490
|
+
},
|
|
491
|
+
noMatchText: 'No matching items found',
|
|
492
|
+
'data-testid': undefined
|
|
493
|
+
});
|
|
494
|
+
_defineProperty(AutoCompleteInput, "MENU_NAVIGATION_DIRECTION", MENU_NAVIGATION_DIRECTION);
|
|
495
|
+
export default AutoCompleteInput;
|
|
496
|
+
//# sourceMappingURL=AutoCompleteInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AutoCompleteInput.js","names":["React","Component","PropTypes","memoize","classNames","debounce","Popper","DEBOUNCE_DELAY","MENU_NAVIGATION_DIRECTION","AutoCompleteInput","constructor","props","options","input","filter","option","title","toLowerCase","indexOf","popperOptions","placement","modifiers","preventOverflow","enabled","state","filteredOptions","keyboardOptionIndex","menuIsOpen","inputWidth","invalid","handleMenuKeyDown","bind","handleMenuBlur","handleInputChange","handleInputKeyDown","handleInputBlur","handelInputFocus","handleInputClick","updateInputValue","handleOptionClick","handleMenuOpened","handleMenuExited","popper","createRef","cbContainer","menuContainer","setInputWidth","current","setState","getBoundingClientRect","width","getValueAndValidate","value","isValid","result","length","processFilterChange","fireOnChange","onChange","getCachedFilteredOptions","perfectMatch","closeMenu","scheduleUpdate","resetValue","handleResize","event","key","stopPropagation","preventDefault","focus","navigateMenu","UP","DOWN","shiftKey","direction","newKeyboardOptionIndex","scrollOptionIntoView","onEnter","openMenu","target","relatedTarget","Element","element","contains","window","requestAnimationFrame","show","focusInput","hide","index","children","item","scrollIntoView","behavior","block","renderMenuElement","renderOptions","noMatchText","map","renderOption","render","inputPlaceholder","disabled","className","defaultTitle","spellCheck","dataTestId","arrayOf","shape","string","isRequired","func","bool","undefined"],"sources":["../src/AutoCompleteInput.tsx"],"sourcesContent":["/**\n * An Input component that pops and filters auto complete options as you type.\n *\n * props:\n * @param options :[{\n * title: 'option title for display',\n * value: 'option value' //option value\n * }]\n * @param popperOptions options for the Popper\n * @param onChange called when the value is changed from the pulldown\n * @param inputPlaceholder place holder for the input box\n * @param disabled disable both input & drop down\n * @param className an optional class name applied to the input element\n * @param defaultTitle the default title to display\n * @param spellCheck flag to disable spell checking, defaults to true\n * @param onEnter called when the Enter key is typed in the input element\n *\n */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport memoize from 'memoizee';\nimport classNames from 'classnames';\nimport debounce from 'lodash.debounce';\nimport { PopperOptions } from 'popper.js';\nimport { Popper } from './popper';\n\nimport './AutoCompleteInput.scss';\n\nconst DEBOUNCE_DELAY = 100;\n\nenum MENU_NAVIGATION_DIRECTION {\n UP = 'UP',\n DOWN = 'DOWN',\n}\n\ninterface AutoCompleteOption {\n title: string;\n value: string;\n}\n\ninterface AutoCompleteInputProps {\n options: AutoCompleteOption[];\n popperOptions: PopperOptions;\n onChange(value: string, isValid: boolean): void;\n inputPlaceholder: string;\n disabled: boolean;\n className: string;\n defaultTitle: string;\n spellCheck: boolean;\n onEnter(): void;\n noMatchText: string;\n 'data-testid'?: string;\n}\n\ninterface AutoCompleteInputState {\n title: string;\n filteredOptions: AutoCompleteOption[];\n keyboardOptionIndex: number;\n menuIsOpen: boolean;\n inputWidth: number;\n invalid: boolean;\n popperOptions: PopperOptions;\n}\n\nclass AutoCompleteInput extends Component<\n AutoCompleteInputProps,\n AutoCompleteInputState\n> {\n static propTypes = {\n options: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n })\n ).isRequired,\n popperOptions: PropTypes.shape({}),\n onChange: PropTypes.func,\n inputPlaceholder: PropTypes.string,\n disabled: PropTypes.bool,\n className: PropTypes.string,\n defaultTitle: PropTypes.string,\n spellCheck: PropTypes.bool,\n onEnter: PropTypes.func,\n noMatchText: PropTypes.string,\n 'data-testid': PropTypes.string,\n };\n\n static defaultProps = {\n onChange(): void {\n // no-op\n },\n inputPlaceholder: '',\n disabled: false,\n className: '',\n defaultTitle: '',\n popperOptions: null,\n spellCheck: true,\n onEnter(): void {\n // no-op\n },\n noMatchText: 'No matching items found',\n 'data-testid': undefined,\n };\n\n static MENU_NAVIGATION_DIRECTION = MENU_NAVIGATION_DIRECTION;\n\n constructor(props: AutoCompleteInputProps) {\n super(props);\n\n let { popperOptions } = this.props;\n popperOptions = {\n placement: 'bottom-end',\n modifiers: {\n preventOverflow: { enabled: false },\n },\n ...popperOptions,\n };\n\n this.state = {\n title: '',\n filteredOptions: [],\n keyboardOptionIndex: 0,\n menuIsOpen: false,\n inputWidth: 100,\n invalid: false,\n popperOptions,\n };\n\n this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);\n this.handleMenuBlur = this.handleMenuBlur.bind(this);\n\n this.handleInputChange = this.handleInputChange.bind(this);\n this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n this.handleInputBlur = this.handleInputBlur.bind(this);\n this.handelInputFocus = this.handelInputFocus.bind(this);\n this.handleInputClick = this.handleInputClick.bind(this);\n\n this.updateInputValue = debounce(this.updateInputValue, DEBOUNCE_DELAY);\n\n this.handleOptionClick = this.handleOptionClick.bind(this);\n\n this.handleMenuOpened = this.handleMenuOpened.bind(this);\n this.handleMenuExited = this.handleMenuExited.bind(this);\n\n this.popper = React.createRef();\n this.cbContainer = React.createRef();\n this.menuContainer = React.createRef();\n this.input = React.createRef();\n }\n\n popper: React.RefObject<Popper>;\n\n cbContainer: React.RefObject<HTMLDivElement>;\n\n menuContainer: React.RefObject<HTMLDivElement>;\n\n input: React.RefObject<HTMLInputElement>;\n\n setInputWidth(): void {\n if (this.cbContainer.current) {\n this.setState({\n inputWidth: this.cbContainer.current.getBoundingClientRect().width,\n });\n }\n }\n\n getCachedFilteredOptions = memoize(\n (options: AutoCompleteOption[], input: string) =>\n options.filter(\n // supports partial match\n option => option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0\n )\n );\n\n // validation needs to be an exact case-sensitve match on value\n getValueAndValidate(title: string): { value: string; isValid: boolean } {\n if (!title) {\n this.setState({ invalid: false });\n return { value: title, isValid: false };\n }\n\n // validate\n const { options } = this.props;\n const result = options.filter(\n option => option.title.toLowerCase() === title.toLowerCase()\n );\n if (result.length < 1) {\n this.setState({ invalid: true });\n return { value: title, isValid: false };\n }\n\n this.setState({ invalid: false });\n return { value: result[0].value, isValid: true };\n }\n\n // validate typed entries emit change event using value\n updateInputValue(title: string): void {\n const { menuIsOpen } = this.state;\n const { value, isValid } = this.getValueAndValidate(title);\n if (menuIsOpen) this.processFilterChange(title);\n this.fireOnChange(value, isValid);\n }\n\n fireOnChange(value: string, isValid = true): void {\n const { onChange } = this.props;\n onChange(value, isValid);\n }\n\n processFilterChange(filter: string): void {\n const { options } = this.props;\n const { menuIsOpen } = this.state;\n const filteredOptions = filter\n ? this.getCachedFilteredOptions(options, filter)\n : options;\n const perfectMatch =\n filteredOptions.length === 1 && filteredOptions[0].title === filter;\n this.setState({\n filteredOptions,\n keyboardOptionIndex: 0,\n });\n if (perfectMatch && menuIsOpen) {\n this.closeMenu();\n return;\n }\n this.popper.current?.scheduleUpdate(); // filtered options list can change size, may need to be repositioned\n }\n\n resetValue(): void {\n this.setState({ title: '' });\n this.fireOnChange('');\n }\n\n handleResize(): void {\n this.setInputWidth();\n }\n\n handleMenuKeyDown(event: React.KeyboardEvent): void {\n const { filteredOptions, keyboardOptionIndex } = this.state;\n const option = filteredOptions[keyboardOptionIndex];\n\n switch (event.key) {\n case 'Enter':\n case 'ArrowRight':\n event.stopPropagation();\n event.preventDefault();\n if (option != null) {\n this.setState({ title: option.title, invalid: false });\n this.fireOnChange(option.value);\n }\n this.closeMenu();\n this.input.current?.focus();\n break;\n case 'ArrowUp':\n event.stopPropagation();\n event.preventDefault();\n this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP);\n break;\n case 'ArrowDown':\n event.stopPropagation();\n event.preventDefault();\n this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN);\n break;\n case 'Tab':\n event.stopPropagation();\n event.preventDefault();\n if (event.shiftKey) {\n this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP);\n break;\n }\n this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN);\n break;\n case 'Escape':\n event.preventDefault();\n event.stopPropagation();\n this.closeMenu();\n break;\n default:\n break;\n }\n }\n\n navigateMenu(direction: MENU_NAVIGATION_DIRECTION): void {\n const { filteredOptions, keyboardOptionIndex } = this.state;\n let newKeyboardOptionIndex = keyboardOptionIndex;\n if (direction === AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP) {\n if (keyboardOptionIndex > 0) {\n newKeyboardOptionIndex =\n (newKeyboardOptionIndex - 1) % filteredOptions.length;\n this.setState({\n keyboardOptionIndex: newKeyboardOptionIndex,\n });\n } else if (keyboardOptionIndex === 0) {\n newKeyboardOptionIndex = filteredOptions.length - 1;\n this.setState({\n keyboardOptionIndex: newKeyboardOptionIndex,\n });\n }\n } else if (direction === AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN) {\n if (keyboardOptionIndex < filteredOptions.length) {\n newKeyboardOptionIndex =\n (newKeyboardOptionIndex + 1) % filteredOptions.length;\n this.setState({\n keyboardOptionIndex: newKeyboardOptionIndex,\n });\n }\n }\n this.scrollOptionIntoView(newKeyboardOptionIndex);\n }\n\n handleInputKeyDown(event: React.KeyboardEvent): void {\n const { onEnter } = this.props;\n const { menuIsOpen } = this.state;\n\n if (menuIsOpen) {\n this.handleMenuKeyDown(event);\n } else if (event.key === 'Enter') {\n onEnter();\n } else if (event.key === 'Escape') {\n this.resetValue();\n event.preventDefault();\n event.stopPropagation();\n } else if (\n !(\n event.key === 'ArrowRight' ||\n event.key === 'ArrowLeft' ||\n event.key === 'Tab' ||\n event.key === 'Shift'\n )\n ) {\n this.openMenu();\n }\n }\n\n handleInputChange(event: React.ChangeEvent<HTMLInputElement>): void {\n this.setState({ title: event.target.value });\n this.updateInputValue(event.target.value);\n }\n\n handleOptionClick(option: AutoCompleteOption): void {\n this.setState({ title: option.title, invalid: false });\n this.fireOnChange(option.value);\n this.closeMenu();\n this.input.current?.focus();\n }\n\n handelInputFocus(): void {\n const { menuIsOpen } = this.state;\n if (!menuIsOpen) {\n this.openMenu();\n }\n }\n\n handleInputClick(): void {\n const { menuIsOpen } = this.state;\n if (!menuIsOpen) {\n this.openMenu();\n }\n }\n\n handleInputBlur(event: React.FocusEvent<HTMLInputElement>): void {\n const { menuIsOpen } = this.state;\n if (\n menuIsOpen &&\n event.relatedTarget instanceof Element &&\n this.popper.current !== null &&\n this.popper.current.element.contains(event.relatedTarget)\n ) {\n return;\n }\n this.closeMenu(false);\n }\n\n handleMenuBlur(event: React.FocusEvent<HTMLDivElement>): void {\n // if blur event is caused by focusing on the input or focus on options don't close menu\n if (\n event.relatedTarget === this.input.current ||\n (event.relatedTarget instanceof Element &&\n this.popper.current !== null &&\n this.popper.current.element.contains(event.relatedTarget))\n ) {\n return;\n }\n this.closeMenu(false);\n }\n\n handleMenuOpened(): void {\n this.input.current?.focus();\n }\n\n handleMenuExited(): void {\n const { menuIsOpen } = this.state;\n if (menuIsOpen) {\n this.setState({ menuIsOpen: false, keyboardOptionIndex: 0 });\n }\n }\n\n openMenu(): void {\n const { title } = this.state;\n this.processFilterChange(title);\n this.setInputWidth();\n this.setState({ menuIsOpen: true });\n\n // https://github.com/reactjs/react-transition-group/issues/382\n window.requestAnimationFrame(() => {\n this.popper.current?.show();\n });\n }\n\n closeMenu(focusInput = true): void {\n this.setState({ menuIsOpen: false, keyboardOptionIndex: 0 });\n if (focusInput) {\n this.input.current?.focus();\n }\n this.popper.current?.hide();\n }\n\n scrollOptionIntoView(index: number): void {\n if (this.menuContainer.current) {\n this.menuContainer.current.children.item(index)?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }\n }\n\n renderMenuElement(): JSX.Element {\n const { inputWidth } = this.state;\n return (\n <div\n className={classNames('aci-options')}\n ref={this.menuContainer}\n role=\"presentation\"\n onKeyDown={this.handleMenuKeyDown}\n style={{ width: inputWidth }}\n onBlur={this.handleMenuBlur}\n >\n {this.renderOptions()}\n </div>\n );\n }\n\n renderOptions(): React.ReactNode {\n const { noMatchText } = this.props;\n const { title, filteredOptions } = this.state;\n\n if (title && filteredOptions.length === 0) {\n return <div className=\"no-match\">{noMatchText}</div>;\n }\n\n return filteredOptions.map((option, index) =>\n this.renderOption(option, index)\n );\n }\n\n renderOption(option: AutoCompleteOption, index: number): JSX.Element {\n const { keyboardOptionIndex } = this.state;\n const key = `option-${index}-${option.value}`;\n return (\n <button\n key={key}\n type=\"button\"\n className={classNames('aci-option-btn', {\n 'keyboard-active': keyboardOptionIndex === index,\n })}\n onClick={() => this.handleOptionClick(option)}\n onFocus={() => this.setState({ keyboardOptionIndex: index })}\n >\n {option.title}\n </button>\n );\n }\n\n render(): JSX.Element {\n const {\n options,\n inputPlaceholder,\n disabled,\n className,\n defaultTitle,\n spellCheck,\n 'data-testid': dataTestId,\n } = this.props;\n const { title, menuIsOpen, popperOptions, invalid } = this.state;\n\n return (\n <div className=\"aci-container\" ref={this.cbContainer}>\n <input\n value={title || defaultTitle}\n className={classNames('form-control', className, 'aci-input', {\n 'is-invalid': invalid && !menuIsOpen,\n })}\n ref={this.input}\n onChange={this.handleInputChange}\n placeholder={inputPlaceholder || options[0].title}\n disabled={disabled}\n onFocus={this.handelInputFocus}\n onClick={this.handleInputClick}\n onBlur={this.handleInputBlur}\n onKeyDown={this.handleInputKeyDown}\n spellCheck={spellCheck}\n data-testid={dataTestId}\n />\n <Popper\n ref={this.popper}\n options={popperOptions}\n className={classNames('aci-options-popper interactive')}\n onEntered={this.handleMenuOpened}\n onExited={this.handleMenuExited}\n >\n {this.renderMenuElement()}\n </Popper>\n </div>\n );\n }\n}\n\nexport default AutoCompleteInput;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* stylelint-disable scss/at-import-no-partial-leading-underscore */
|
|
2
|
+
textarea.auto-resize-textarea {
|
|
3
|
+
min-height: calc(1.5em + 0.75rem + 2px);
|
|
4
|
+
white-space: nowrap;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
textarea.auto-resize-textarea:focus {
|
|
8
|
+
white-space: pre;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/*# sourceMappingURL=AutoResizeTextarea.css.map */
|