From 739fcf8b359727d958d6befe46014fe8b3dfe11c Mon Sep 17 00:00:00 2001 From: Carl Gieringer <78054+carlgieringer@users.noreply.github.com> Date: Thu, 20 Apr 2023 08:34:30 -0700 Subject: [PATCH] Use TextArea in AutoComplete instead of TextInput --- .gitignore | 9 + packages/autocomplete/es/AutoComplete.js | 427 ++++++++++++++ packages/autocomplete/es/AutoComplete.js.map | 1 + packages/autocomplete/es/HighlightedResult.js | 75 +++ .../autocomplete/es/HighlightedResult.js.map | 1 + packages/autocomplete/es/index.js | 14 + packages/autocomplete/es/index.js.map | 1 + packages/autocomplete/es/types.js | 2 + packages/autocomplete/es/types.js.map | 1 + packages/autocomplete/es/useAutoComplete.js | 443 +++++++++++++++ .../autocomplete/es/useAutoComplete.js.map | 1 + packages/autocomplete/es/utils.js | 116 ++++ packages/autocomplete/es/utils.js.map | 1 + packages/autocomplete/lib/AutoComplete.d.ts | 7 + packages/autocomplete/lib/AutoComplete.js | 470 ++++++++++++++++ packages/autocomplete/lib/AutoComplete.js.map | 1 + .../autocomplete/lib/HighlightedResult.d.ts | 57 ++ .../autocomplete/lib/HighlightedResult.js | 92 +++ .../autocomplete/lib/HighlightedResult.js.map | 1 + packages/autocomplete/lib/index.d.ts | 8 + packages/autocomplete/lib/index.js | 63 +++ packages/autocomplete/lib/index.js.map | 1 + packages/autocomplete/lib/types.d.ts | 257 +++++++++ packages/autocomplete/lib/types.js | 3 + packages/autocomplete/lib/types.js.map | 1 + .../autocomplete/lib/useAutoComplete.d.ts | 41 ++ packages/autocomplete/lib/useAutoComplete.js | 439 +++++++++++++++ .../autocomplete/lib/useAutoComplete.js.map | 1 + packages/autocomplete/lib/utils.d.ts | 70 +++ packages/autocomplete/lib/utils.js | 131 +++++ packages/autocomplete/lib/utils.js.map | 1 + packages/autocomplete/src/AutoComplete.tsx | 10 +- packages/autocomplete/src/types.ts | 4 +- packages/autocomplete/src/useAutoComplete.ts | 34 +- packages/autocomplete/types/AutoComplete.d.ts | 7 + .../autocomplete/types/HighlightedResult.d.ts | 57 ++ packages/autocomplete/types/index.d.ts | 8 + packages/autocomplete/types/types.d.ts | 257 +++++++++ .../autocomplete/types/useAutoComplete.d.ts | 41 ++ packages/autocomplete/types/utils.d.ts | 70 +++ packages/form/dist/_functions.scss | 74 +++ packages/form/dist/_mixins.scss | 118 ++++ packages/form/dist/_variables.scss | 94 ++++ packages/form/dist/file-input/_mixins.scss | 35 ++ packages/form/dist/label/_mixins.scss | 102 ++++ packages/form/dist/label/_variables.scss | 30 + packages/form/dist/scss/_functions.scss | 74 +++ packages/form/dist/scss/_mixins.scss | 118 ++++ packages/form/dist/scss/_variables.scss | 94 ++++ .../form/dist/scss/file-input/_mixins.scss | 35 ++ packages/form/dist/scss/label/_mixins.scss | 102 ++++ packages/form/dist/scss/label/_variables.scss | 30 + packages/form/dist/scss/select/_mixins.scss | 177 ++++++ .../form/dist/scss/select/_variables.scss | 108 ++++ .../form/dist/scss/slider/_functions.scss | 44 ++ packages/form/dist/scss/slider/_mixins.scss | 532 ++++++++++++++++++ .../form/dist/scss/slider/_variables.scss | 179 ++++++ packages/form/dist/scss/styles.scss | 3 + .../form/dist/scss/text-field/_mixins.scss | 493 ++++++++++++++++ .../form/dist/scss/text-field/_variables.scss | 202 +++++++ packages/form/dist/scss/toggle/_mixins.scss | 426 ++++++++++++++ .../form/dist/scss/toggle/_variables.scss | 160 ++++++ packages/form/dist/scssVariables.d.ts | 153 +++++ packages/form/dist/scssVariables.js | 162 ++++++ packages/form/dist/scssVariables.js.map | 1 + packages/form/dist/select/_mixins.scss | 177 ++++++ packages/form/dist/select/_variables.scss | 108 ++++ packages/form/dist/slider/_functions.scss | 44 ++ packages/form/dist/slider/_mixins.scss | 532 ++++++++++++++++++ packages/form/dist/slider/_variables.scss | 179 ++++++ packages/form/dist/styles.scss | 3 + packages/form/dist/text-field/_mixins.scss | 493 ++++++++++++++++ packages/form/dist/text-field/_variables.scss | 202 +++++++ packages/form/dist/toggle/_mixins.scss | 426 ++++++++++++++ packages/form/dist/toggle/_variables.scss | 160 ++++++ packages/form/es/Fieldset.js | 96 ++++ packages/form/es/Fieldset.js.map | 1 + packages/form/es/Form.js | 73 +++ packages/form/es/Form.js.map | 1 + packages/form/es/FormMessage.js | 168 ++++++ packages/form/es/FormMessage.js.map | 1 + packages/form/es/FormMessageContainer.js | 63 +++ packages/form/es/FormMessageContainer.js.map | 1 + packages/form/es/FormMessageCounter.js | 75 +++ packages/form/es/FormMessageCounter.js.map | 1 + packages/form/es/FormThemeProvider.js | 58 ++ packages/form/es/FormThemeProvider.js.map | 1 + packages/form/es/file-input/FileInput.js | 212 +++++++ packages/form/es/file-input/FileInput.js.map | 1 + packages/form/es/file-input/index.js | 4 + packages/form/es/file-input/index.js.map | 1 + packages/form/es/file-input/useFileUpload.js | 395 +++++++++++++ .../form/es/file-input/useFileUpload.js.map | 1 + packages/form/es/file-input/utils.js | 403 +++++++++++++ packages/form/es/file-input/utils.js.map | 1 + packages/form/es/index.js | 20 + packages/form/es/index.js.map | 1 + packages/form/es/label/FloatingLabel.js | 95 ++++ packages/form/es/label/FloatingLabel.js.map | 1 + packages/form/es/label/Label.js | 112 ++++ packages/form/es/label/Label.js.map | 1 + packages/form/es/label/index.js | 2 + packages/form/es/label/index.js.map | 1 + packages/form/es/menu/MenuItemCheckbox.js | 79 +++ packages/form/es/menu/MenuItemCheckbox.js.map | 1 + packages/form/es/menu/MenuItemInputToggle.js | 168 ++++++ .../form/es/menu/MenuItemInputToggle.js.map | 1 + packages/form/es/menu/MenuItemRadio.js | 156 +++++ packages/form/es/menu/MenuItemRadio.js.map | 1 + packages/form/es/menu/MenuItemSwitch.js | 59 ++ packages/form/es/menu/MenuItemSwitch.js.map | 1 + packages/form/es/menu/index.js | 5 + packages/form/es/menu/index.js.map | 1 + packages/form/es/select/Listbox.js | 422 ++++++++++++++ packages/form/es/select/Listbox.js.map | 1 + packages/form/es/select/NativeSelect.js | 231 ++++++++ packages/form/es/select/NativeSelect.js.map | 1 + packages/form/es/select/Option.js | 89 +++ packages/form/es/select/Option.js.map | 1 + packages/form/es/select/Select.js | 463 +++++++++++++++ packages/form/es/select/Select.js.map | 1 + packages/form/es/select/index.js | 11 + packages/form/es/select/index.js.map | 1 + packages/form/es/select/utils.js | 97 ++++ packages/form/es/select/utils.js.map | 1 + packages/form/es/slider/RangeSlider.js | 296 ++++++++++ packages/form/es/slider/RangeSlider.js.map | 1 + packages/form/es/slider/Slider.js | 268 +++++++++ packages/form/es/slider/Slider.js.map | 1 + packages/form/es/slider/SliderContainer.js | 133 +++++ .../form/es/slider/SliderContainer.js.map | 1 + packages/form/es/slider/SliderThumb.js | 226 ++++++++ packages/form/es/slider/SliderThumb.js.map | 1 + packages/form/es/slider/SliderTrack.js | 112 ++++ packages/form/es/slider/SliderTrack.js.map | 1 + packages/form/es/slider/SliderValue.js | 103 ++++ packages/form/es/slider/SliderValue.js.map | 1 + packages/form/es/slider/constants.js | 31 + packages/form/es/slider/constants.js.map | 1 + packages/form/es/slider/index.js | 10 + packages/form/es/slider/index.js.map | 1 + packages/form/es/slider/types.js | 2 + packages/form/es/slider/types.js.map | 1 + .../es/slider/useDiscreteValueVisibility.js | 127 +++++ .../slider/useDiscreteValueVisibility.js.map | 1 + packages/form/es/slider/useRangeSlider.js | 196 +++++++ packages/form/es/slider/useRangeSlider.js.map | 1 + packages/form/es/slider/useSlider.js | 146 +++++ packages/form/es/slider/useSlider.js.map | 1 + packages/form/es/slider/useSliderControls.js | 469 +++++++++++++++ .../form/es/slider/useSliderControls.js.map | 1 + packages/form/es/slider/utils.js | 132 +++++ packages/form/es/slider/utils.js.map | 1 + packages/form/es/text-field/Password.js | 160 ++++++ packages/form/es/text-field/Password.js.map | 1 + .../form/es/text-field/PasswordWithMessage.js | 100 ++++ .../es/text-field/PasswordWithMessage.js.map | 1 + packages/form/es/text-field/TextArea.js | 370 ++++++++++++ packages/form/es/text-field/TextArea.js.map | 1 + .../form/es/text-field/TextAreaWithMessage.js | 97 ++++ .../es/text-field/TextAreaWithMessage.js.map | 1 + packages/form/es/text-field/TextField.js | 234 ++++++++ packages/form/es/text-field/TextField.js.map | 1 + packages/form/es/text-field/TextFieldAddon.js | 70 +++ .../form/es/text-field/TextFieldAddon.js.map | 1 + .../form/es/text-field/TextFieldContainer.js | 159 ++++++ .../es/text-field/TextFieldContainer.js.map | 1 + .../es/text-field/TextFieldWithMessage.js | 94 ++++ .../es/text-field/TextFieldWithMessage.js.map | 1 + packages/form/es/text-field/getErrorIcon.js | 10 + .../form/es/text-field/getErrorIcon.js.map | 1 + .../form/es/text-field/getErrorMessage.js | 93 +++ .../form/es/text-field/getErrorMessage.js.map | 1 + packages/form/es/text-field/index.js | 14 + packages/form/es/text-field/index.js.map | 1 + packages/form/es/text-field/isErrored.js | 21 + packages/form/es/text-field/isErrored.js.map | 1 + packages/form/es/text-field/useNumberField.js | 233 ++++++++ .../form/es/text-field/useNumberField.js.map | 1 + packages/form/es/text-field/useTextField.js | 223 ++++++++ .../form/es/text-field/useTextField.js.map | 1 + packages/form/es/toggle/AsyncSwitch.js | 99 ++++ packages/form/es/toggle/AsyncSwitch.js.map | 1 + packages/form/es/toggle/Checkbox.js | 66 +++ packages/form/es/toggle/Checkbox.js.map | 1 + packages/form/es/toggle/InputToggle.js | 237 ++++++++ packages/form/es/toggle/InputToggle.js.map | 1 + packages/form/es/toggle/InputToggleIcon.js | 81 +++ .../form/es/toggle/InputToggleIcon.js.map | 1 + packages/form/es/toggle/Radio.js | 65 +++ packages/form/es/toggle/Radio.js.map | 1 + packages/form/es/toggle/Switch.js | 147 +++++ packages/form/es/toggle/Switch.js.map | 1 + packages/form/es/toggle/SwitchTrack.js | 106 ++++ packages/form/es/toggle/SwitchTrack.js.map | 1 + packages/form/es/toggle/ToggleContainer.js | 72 +++ .../form/es/toggle/ToggleContainer.js.map | 1 + packages/form/es/toggle/index.js | 10 + packages/form/es/toggle/index.js.map | 1 + packages/form/es/toggle/useChecked.js | 28 + packages/form/es/toggle/useChecked.js.map | 1 + packages/form/es/useChoice.js | 28 + packages/form/es/useChoice.js.map | 1 + packages/form/es/useFieldStates.js | 88 +++ packages/form/es/useFieldStates.js.map | 1 + packages/form/es/useFocusState.js | 33 ++ packages/form/es/useFocusState.js.map | 1 + packages/form/es/useIndeterminateChecked.js | 205 +++++++ .../form/es/useIndeterminateChecked.js.map | 1 + packages/form/es/useSelectState.js | 19 + packages/form/es/useSelectState.js.map | 1 + packages/form/lib/Fieldset.d.ts | 32 ++ packages/form/lib/Fieldset.js | 141 +++++ packages/form/lib/Fieldset.js.map | 1 + packages/form/lib/Form.d.ts | 15 + packages/form/lib/Form.js | 113 ++++ packages/form/lib/Form.js.map | 1 + packages/form/lib/FormMessage.d.ts | 104 ++++ packages/form/lib/FormMessage.js | 213 +++++++ packages/form/lib/FormMessage.js.map | 1 + packages/form/lib/FormMessageContainer.d.ts | 50 ++ packages/form/lib/FormMessageContainer.js | 115 ++++ packages/form/lib/FormMessageContainer.js.map | 1 + packages/form/lib/FormMessageCounter.d.ts | 43 ++ packages/form/lib/FormMessageCounter.js | 86 +++ packages/form/lib/FormMessageCounter.js.map | 1 + packages/form/lib/FormThemeProvider.d.ts | 57 ++ packages/form/lib/FormThemeProvider.js | 100 ++++ packages/form/lib/FormThemeProvider.js.map | 1 + packages/form/lib/file-input/FileInput.d.ts | 53 ++ packages/form/lib/file-input/FileInput.js | 261 +++++++++ packages/form/lib/file-input/FileInput.js.map | 1 + packages/form/lib/file-input/index.d.ts | 3 + packages/form/lib/file-input/index.js | 29 + packages/form/lib/file-input/index.js.map | 1 + .../form/lib/file-input/useFileUpload.d.ts | 149 +++++ packages/form/lib/file-input/useFileUpload.js | 395 +++++++++++++ .../form/lib/file-input/useFileUpload.js.map | 1 + packages/form/lib/file-input/utils.d.ts | 433 ++++++++++++++ packages/form/lib/file-input/utils.js | 437 ++++++++++++++ packages/form/lib/file-input/utils.js.map | 1 + packages/form/lib/index.d.ts | 19 + packages/form/lib/index.js | 45 ++ packages/form/lib/index.js.map | 1 + packages/form/lib/label/FloatingLabel.d.ts | 21 + packages/form/lib/label/FloatingLabel.js | 140 +++++ packages/form/lib/label/FloatingLabel.js.map | 1 + packages/form/lib/label/Label.d.ts | 49 ++ packages/form/lib/label/Label.js | 162 ++++++ packages/form/lib/label/Label.js.map | 1 + packages/form/lib/label/index.d.ts | 1 + packages/form/lib/label/index.js | 27 + packages/form/lib/label/index.js.map | 1 + packages/form/lib/menu/MenuItemCheckbox.d.ts | 41 ++ packages/form/lib/menu/MenuItemCheckbox.js | 122 ++++ .../form/lib/menu/MenuItemCheckbox.js.map | 1 + .../form/lib/menu/MenuItemInputToggle.d.ts | 93 +++ packages/form/lib/menu/MenuItemInputToggle.js | 218 +++++++ .../form/lib/menu/MenuItemInputToggle.js.map | 1 + packages/form/lib/menu/MenuItemRadio.d.ts | 116 ++++ packages/form/lib/menu/MenuItemRadio.js | 196 +++++++ packages/form/lib/menu/MenuItemRadio.js.map | 1 + packages/form/lib/menu/MenuItemSwitch.d.ts | 40 ++ packages/form/lib/menu/MenuItemSwitch.js | 102 ++++ packages/form/lib/menu/MenuItemSwitch.js.map | 1 + packages/form/lib/menu/index.d.ts | 4 + packages/form/lib/menu/index.js | 30 + packages/form/lib/menu/index.js.map | 1 + packages/form/lib/select/Listbox.d.ts | 127 +++++ packages/form/lib/select/Listbox.js | 458 +++++++++++++++ packages/form/lib/select/Listbox.js.map | 1 + packages/form/lib/select/NativeSelect.d.ts | 71 +++ packages/form/lib/select/NativeSelect.js | 276 +++++++++ packages/form/lib/select/NativeSelect.js.map | 1 + packages/form/lib/select/Option.d.ts | 19 + packages/form/lib/select/Option.js | 134 +++++ packages/form/lib/select/Option.js.map | 1 + packages/form/lib/select/Select.d.ts | 122 ++++ packages/form/lib/select/Select.js | 498 ++++++++++++++++ packages/form/lib/select/Select.js.map | 1 + packages/form/lib/select/index.d.ts | 5 + packages/form/lib/select/index.js | 60 ++ packages/form/lib/select/index.js.map | 1 + packages/form/lib/select/utils.d.ts | 73 +++ packages/form/lib/select/utils.js | 114 ++++ packages/form/lib/select/utils.js.map | 1 + packages/form/lib/slider/RangeSlider.d.ts | 62 ++ packages/form/lib/slider/RangeSlider.js | 335 +++++++++++ packages/form/lib/slider/RangeSlider.js.map | 1 + packages/form/lib/slider/Slider.d.ts | 43 ++ packages/form/lib/slider/Slider.js | 307 ++++++++++ packages/form/lib/slider/Slider.js.map | 1 + packages/form/lib/slider/SliderContainer.d.ts | 27 + packages/form/lib/slider/SliderContainer.js | 178 ++++++ .../form/lib/slider/SliderContainer.js.map | 1 + packages/form/lib/slider/SliderThumb.d.ts | 52 ++ packages/form/lib/slider/SliderThumb.js | 268 +++++++++ packages/form/lib/slider/SliderThumb.js.map | 1 + packages/form/lib/slider/SliderTrack.d.ts | 31 + packages/form/lib/slider/SliderTrack.js | 157 ++++++ packages/form/lib/slider/SliderTrack.js.map | 1 + packages/form/lib/slider/SliderValue.d.ts | 21 + packages/form/lib/slider/SliderValue.js | 112 ++++ packages/form/lib/slider/SliderValue.js.map | 1 + packages/form/lib/slider/constants.d.ts | 28 + packages/form/lib/slider/constants.js | 42 ++ packages/form/lib/slider/constants.js.map | 1 + packages/form/lib/slider/index.d.ts | 9 + packages/form/lib/slider/index.js | 35 ++ packages/form/lib/slider/index.js.map | 1 + packages/form/lib/slider/types.d.ts | 222 ++++++++ packages/form/lib/slider/types.js | 3 + packages/form/lib/slider/types.js.map | 1 + .../slider/useDiscreteValueVisibility.d.ts | 40 ++ .../lib/slider/useDiscreteValueVisibility.js | 131 +++++ .../slider/useDiscreteValueVisibility.js.map | 1 + packages/form/lib/slider/useRangeSlider.d.ts | 45 ++ packages/form/lib/slider/useRangeSlider.js | 196 +++++++ .../form/lib/slider/useRangeSlider.js.map | 1 + packages/form/lib/slider/useSlider.d.ts | 42 ++ packages/form/lib/slider/useSlider.js | 151 +++++ packages/form/lib/slider/useSlider.js.map | 1 + .../form/lib/slider/useSliderControls.d.ts | 40 ++ packages/form/lib/slider/useSliderControls.js | 468 +++++++++++++++ .../form/lib/slider/useSliderControls.js.map | 1 + packages/form/lib/slider/utils.d.ts | 151 +++++ packages/form/lib/slider/utils.js | 149 +++++ packages/form/lib/slider/utils.js.map | 1 + packages/form/lib/text-field/Password.d.ts | 65 +++ packages/form/lib/text-field/Password.js | 203 +++++++ packages/form/lib/text-field/Password.js.map | 1 + .../lib/text-field/PasswordWithMessage.d.ts | 46 ++ .../lib/text-field/PasswordWithMessage.js | 143 +++++ .../lib/text-field/PasswordWithMessage.js.map | 1 + packages/form/lib/text-field/TextArea.d.ts | 83 +++ packages/form/lib/text-field/TextArea.js | 415 ++++++++++++++ packages/form/lib/text-field/TextArea.js.map | 1 + .../lib/text-field/TextAreaWithMessage.d.ts | 40 ++ .../lib/text-field/TextAreaWithMessage.js | 137 +++++ .../lib/text-field/TextAreaWithMessage.js.map | 1 + packages/form/lib/text-field/TextField.d.ts | 79 +++ packages/form/lib/text-field/TextField.js | 279 +++++++++ packages/form/lib/text-field/TextField.js.map | 1 + .../form/lib/text-field/TextFieldAddon.d.ts | 13 + .../form/lib/text-field/TextFieldAddon.js | 118 ++++ .../form/lib/text-field/TextFieldAddon.js.map | 1 + .../lib/text-field/TextFieldContainer.d.ts | 63 +++ .../form/lib/text-field/TextFieldContainer.js | 212 +++++++ .../lib/text-field/TextFieldContainer.js.map | 1 + .../lib/text-field/TextFieldWithMessage.d.ts | 40 ++ .../lib/text-field/TextFieldWithMessage.js | 137 +++++ .../text-field/TextFieldWithMessage.js.map | 1 + .../form/lib/text-field/getErrorIcon.d.ts | 21 + packages/form/lib/text-field/getErrorIcon.js | 14 + .../form/lib/text-field/getErrorIcon.js.map | 1 + .../form/lib/text-field/getErrorMessage.d.ts | 80 +++ .../form/lib/text-field/getErrorMessage.js | 100 ++++ .../lib/text-field/getErrorMessage.js.map | 1 + packages/form/lib/text-field/index.d.ts | 13 + packages/form/lib/text-field/index.js | 39 ++ packages/form/lib/text-field/index.js.map | 1 + packages/form/lib/text-field/isErrored.d.ts | 29 + packages/form/lib/text-field/isErrored.js | 25 + packages/form/lib/text-field/isErrored.js.map | 1 + .../form/lib/text-field/useNumberField.d.ts | 120 ++++ .../form/lib/text-field/useNumberField.js | 241 ++++++++ .../form/lib/text-field/useNumberField.js.map | 1 + .../form/lib/text-field/useTextField.d.ts | 191 +++++++ packages/form/lib/text-field/useTextField.js | 228 ++++++++ .../form/lib/text-field/useTextField.js.map | 1 + packages/form/lib/toggle/AsyncSwitch.d.ts | 25 + packages/form/lib/toggle/AsyncSwitch.js | 147 +++++ packages/form/lib/toggle/AsyncSwitch.js.map | 1 + packages/form/lib/toggle/Checkbox.d.ts | 24 + packages/form/lib/toggle/Checkbox.js | 106 ++++ packages/form/lib/toggle/Checkbox.js.map | 1 + packages/form/lib/toggle/InputToggle.d.ts | 127 +++++ packages/form/lib/toggle/InputToggle.js | 282 ++++++++++ packages/form/lib/toggle/InputToggle.js.map | 1 + packages/form/lib/toggle/InputToggleIcon.d.ts | 31 + packages/form/lib/toggle/InputToggleIcon.js | 126 +++++ .../form/lib/toggle/InputToggleIcon.js.map | 1 + packages/form/lib/toggle/Radio.d.ts | 13 + packages/form/lib/toggle/Radio.js | 105 ++++ packages/form/lib/toggle/Radio.js.map | 1 + packages/form/lib/toggle/Switch.d.ts | 73 +++ packages/form/lib/toggle/Switch.js | 192 +++++++ packages/form/lib/toggle/Switch.js.map | 1 + packages/form/lib/toggle/SwitchTrack.d.ts | 34 ++ packages/form/lib/toggle/SwitchTrack.js | 154 +++++ packages/form/lib/toggle/SwitchTrack.js.map | 1 + packages/form/lib/toggle/ToggleContainer.d.ts | 20 + packages/form/lib/toggle/ToggleContainer.js | 120 ++++ .../form/lib/toggle/ToggleContainer.js.map | 1 + packages/form/lib/toggle/index.d.ts | 9 + packages/form/lib/toggle/index.js | 35 ++ packages/form/lib/toggle/index.js.map | 1 + packages/form/lib/toggle/useChecked.d.ts | 16 + packages/form/lib/toggle/useChecked.js | 32 ++ packages/form/lib/toggle/useChecked.js.map | 1 + packages/form/lib/useChoice.d.ts | 18 + packages/form/lib/useChoice.js | 32 ++ packages/form/lib/useChoice.js.map | 1 + packages/form/lib/useFieldStates.d.ts | 49 ++ packages/form/lib/useFieldStates.js | 92 +++ packages/form/lib/useFieldStates.js.map | 1 + packages/form/lib/useFocusState.d.ts | 10 + packages/form/lib/useFocusState.js | 37 ++ packages/form/lib/useFocusState.js.map | 1 + .../form/lib/useIndeterminateChecked.d.ts | 171 ++++++ packages/form/lib/useIndeterminateChecked.js | 205 +++++++ .../form/lib/useIndeterminateChecked.js.map | 1 + packages/form/lib/useSelectState.d.ts | 12 + packages/form/lib/useSelectState.js | 23 + packages/form/lib/useSelectState.js.map | 1 + packages/form/src/FormMessage.tsx | 4 +- packages/form/src/FormMessageContainer.tsx | 6 +- .../src/text-field/PasswordWithMessage.tsx | 6 +- .../src/text-field/TextAreaWithMessage.tsx | 8 +- .../src/text-field/TextFieldWithMessage.tsx | 6 +- packages/form/types/Fieldset.d.ts | 32 ++ packages/form/types/Form.d.ts | 15 + packages/form/types/FormMessage.d.ts | 104 ++++ packages/form/types/FormMessageContainer.d.ts | 50 ++ packages/form/types/FormMessageCounter.d.ts | 43 ++ packages/form/types/FormThemeProvider.d.ts | 57 ++ packages/form/types/file-input/FileInput.d.ts | 53 ++ packages/form/types/file-input/index.d.ts | 3 + .../form/types/file-input/useFileUpload.d.ts | 149 +++++ packages/form/types/file-input/utils.d.ts | 433 ++++++++++++++ packages/form/types/index.d.ts | 19 + packages/form/types/label/FloatingLabel.d.ts | 21 + packages/form/types/label/Label.d.ts | 49 ++ packages/form/types/label/index.d.ts | 1 + .../form/types/menu/MenuItemCheckbox.d.ts | 41 ++ .../form/types/menu/MenuItemInputToggle.d.ts | 93 +++ packages/form/types/menu/MenuItemRadio.d.ts | 116 ++++ packages/form/types/menu/MenuItemSwitch.d.ts | 40 ++ packages/form/types/menu/index.d.ts | 4 + packages/form/types/select/Listbox.d.ts | 127 +++++ packages/form/types/select/NativeSelect.d.ts | 71 +++ packages/form/types/select/Option.d.ts | 19 + packages/form/types/select/Select.d.ts | 122 ++++ packages/form/types/select/index.d.ts | 5 + packages/form/types/select/utils.d.ts | 73 +++ packages/form/types/slider/RangeSlider.d.ts | 62 ++ packages/form/types/slider/Slider.d.ts | 43 ++ .../form/types/slider/SliderContainer.d.ts | 27 + packages/form/types/slider/SliderThumb.d.ts | 52 ++ packages/form/types/slider/SliderTrack.d.ts | 31 + packages/form/types/slider/SliderValue.d.ts | 21 + packages/form/types/slider/constants.d.ts | 28 + packages/form/types/slider/index.d.ts | 9 + packages/form/types/slider/types.d.ts | 222 ++++++++ .../slider/useDiscreteValueVisibility.d.ts | 40 ++ .../form/types/slider/useRangeSlider.d.ts | 45 ++ packages/form/types/slider/useSlider.d.ts | 42 ++ .../form/types/slider/useSliderControls.d.ts | 40 ++ packages/form/types/slider/utils.d.ts | 151 +++++ packages/form/types/text-field/Password.d.ts | 65 +++ .../types/text-field/PasswordWithMessage.d.ts | 46 ++ packages/form/types/text-field/TextArea.d.ts | 83 +++ .../types/text-field/TextAreaWithMessage.d.ts | 40 ++ packages/form/types/text-field/TextField.d.ts | 79 +++ .../form/types/text-field/TextFieldAddon.d.ts | 13 + .../types/text-field/TextFieldContainer.d.ts | 63 +++ .../text-field/TextFieldWithMessage.d.ts | 40 ++ .../form/types/text-field/getErrorIcon.d.ts | 21 + .../types/text-field/getErrorMessage.d.ts | 80 +++ packages/form/types/text-field/index.d.ts | 13 + packages/form/types/text-field/isErrored.d.ts | 29 + .../form/types/text-field/useNumberField.d.ts | 120 ++++ .../form/types/text-field/useTextField.d.ts | 191 +++++++ packages/form/types/toggle/AsyncSwitch.d.ts | 25 + packages/form/types/toggle/Checkbox.d.ts | 24 + packages/form/types/toggle/InputToggle.d.ts | 127 +++++ .../form/types/toggle/InputToggleIcon.d.ts | 31 + packages/form/types/toggle/Radio.d.ts | 13 + packages/form/types/toggle/Switch.d.ts | 73 +++ packages/form/types/toggle/SwitchTrack.d.ts | 34 ++ .../form/types/toggle/ToggleContainer.d.ts | 20 + packages/form/types/toggle/index.d.ts | 9 + packages/form/types/toggle/useChecked.d.ts | 16 + packages/form/types/useChoice.d.ts | 18 + packages/form/types/useFieldStates.d.ts | 49 ++ packages/form/types/useFocusState.d.ts | 10 + .../form/types/useIndeterminateChecked.d.ts | 171 ++++++ packages/form/types/useSelectState.d.ts | 12 + 488 files changed, 37312 insertions(+), 36 deletions(-) create mode 100644 packages/autocomplete/es/AutoComplete.js create mode 100644 packages/autocomplete/es/AutoComplete.js.map create mode 100644 packages/autocomplete/es/HighlightedResult.js create mode 100644 packages/autocomplete/es/HighlightedResult.js.map create mode 100644 packages/autocomplete/es/index.js create mode 100644 packages/autocomplete/es/index.js.map create mode 100644 packages/autocomplete/es/types.js create mode 100644 packages/autocomplete/es/types.js.map create mode 100644 packages/autocomplete/es/useAutoComplete.js create mode 100644 packages/autocomplete/es/useAutoComplete.js.map create mode 100644 packages/autocomplete/es/utils.js create mode 100644 packages/autocomplete/es/utils.js.map create mode 100644 packages/autocomplete/lib/AutoComplete.d.ts create mode 100644 packages/autocomplete/lib/AutoComplete.js create mode 100644 packages/autocomplete/lib/AutoComplete.js.map create mode 100644 packages/autocomplete/lib/HighlightedResult.d.ts create mode 100644 packages/autocomplete/lib/HighlightedResult.js create mode 100644 packages/autocomplete/lib/HighlightedResult.js.map create mode 100644 packages/autocomplete/lib/index.d.ts create mode 100644 packages/autocomplete/lib/index.js create mode 100644 packages/autocomplete/lib/index.js.map create mode 100644 packages/autocomplete/lib/types.d.ts create mode 100644 packages/autocomplete/lib/types.js create mode 100644 packages/autocomplete/lib/types.js.map create mode 100644 packages/autocomplete/lib/useAutoComplete.d.ts create mode 100644 packages/autocomplete/lib/useAutoComplete.js create mode 100644 packages/autocomplete/lib/useAutoComplete.js.map create mode 100644 packages/autocomplete/lib/utils.d.ts create mode 100644 packages/autocomplete/lib/utils.js create mode 100644 packages/autocomplete/lib/utils.js.map create mode 100644 packages/autocomplete/types/AutoComplete.d.ts create mode 100644 packages/autocomplete/types/HighlightedResult.d.ts create mode 100644 packages/autocomplete/types/index.d.ts create mode 100644 packages/autocomplete/types/types.d.ts create mode 100644 packages/autocomplete/types/useAutoComplete.d.ts create mode 100644 packages/autocomplete/types/utils.d.ts create mode 100644 packages/form/dist/_functions.scss create mode 100644 packages/form/dist/_mixins.scss create mode 100644 packages/form/dist/_variables.scss create mode 100644 packages/form/dist/file-input/_mixins.scss create mode 100644 packages/form/dist/label/_mixins.scss create mode 100644 packages/form/dist/label/_variables.scss create mode 100644 packages/form/dist/scss/_functions.scss create mode 100644 packages/form/dist/scss/_mixins.scss create mode 100644 packages/form/dist/scss/_variables.scss create mode 100644 packages/form/dist/scss/file-input/_mixins.scss create mode 100644 packages/form/dist/scss/label/_mixins.scss create mode 100644 packages/form/dist/scss/label/_variables.scss create mode 100644 packages/form/dist/scss/select/_mixins.scss create mode 100644 packages/form/dist/scss/select/_variables.scss create mode 100644 packages/form/dist/scss/slider/_functions.scss create mode 100644 packages/form/dist/scss/slider/_mixins.scss create mode 100644 packages/form/dist/scss/slider/_variables.scss create mode 100644 packages/form/dist/scss/styles.scss create mode 100644 packages/form/dist/scss/text-field/_mixins.scss create mode 100644 packages/form/dist/scss/text-field/_variables.scss create mode 100644 packages/form/dist/scss/toggle/_mixins.scss create mode 100644 packages/form/dist/scss/toggle/_variables.scss create mode 100644 packages/form/dist/scssVariables.d.ts create mode 100644 packages/form/dist/scssVariables.js create mode 100644 packages/form/dist/scssVariables.js.map create mode 100644 packages/form/dist/select/_mixins.scss create mode 100644 packages/form/dist/select/_variables.scss create mode 100644 packages/form/dist/slider/_functions.scss create mode 100644 packages/form/dist/slider/_mixins.scss create mode 100644 packages/form/dist/slider/_variables.scss create mode 100644 packages/form/dist/styles.scss create mode 100644 packages/form/dist/text-field/_mixins.scss create mode 100644 packages/form/dist/text-field/_variables.scss create mode 100644 packages/form/dist/toggle/_mixins.scss create mode 100644 packages/form/dist/toggle/_variables.scss create mode 100644 packages/form/es/Fieldset.js create mode 100644 packages/form/es/Fieldset.js.map create mode 100644 packages/form/es/Form.js create mode 100644 packages/form/es/Form.js.map create mode 100644 packages/form/es/FormMessage.js create mode 100644 packages/form/es/FormMessage.js.map create mode 100644 packages/form/es/FormMessageContainer.js create mode 100644 packages/form/es/FormMessageContainer.js.map create mode 100644 packages/form/es/FormMessageCounter.js create mode 100644 packages/form/es/FormMessageCounter.js.map create mode 100644 packages/form/es/FormThemeProvider.js create mode 100644 packages/form/es/FormThemeProvider.js.map create mode 100644 packages/form/es/file-input/FileInput.js create mode 100644 packages/form/es/file-input/FileInput.js.map create mode 100644 packages/form/es/file-input/index.js create mode 100644 packages/form/es/file-input/index.js.map create mode 100644 packages/form/es/file-input/useFileUpload.js create mode 100644 packages/form/es/file-input/useFileUpload.js.map create mode 100644 packages/form/es/file-input/utils.js create mode 100644 packages/form/es/file-input/utils.js.map create mode 100644 packages/form/es/index.js create mode 100644 packages/form/es/index.js.map create mode 100644 packages/form/es/label/FloatingLabel.js create mode 100644 packages/form/es/label/FloatingLabel.js.map create mode 100644 packages/form/es/label/Label.js create mode 100644 packages/form/es/label/Label.js.map create mode 100644 packages/form/es/label/index.js create mode 100644 packages/form/es/label/index.js.map create mode 100644 packages/form/es/menu/MenuItemCheckbox.js create mode 100644 packages/form/es/menu/MenuItemCheckbox.js.map create mode 100644 packages/form/es/menu/MenuItemInputToggle.js create mode 100644 packages/form/es/menu/MenuItemInputToggle.js.map create mode 100644 packages/form/es/menu/MenuItemRadio.js create mode 100644 packages/form/es/menu/MenuItemRadio.js.map create mode 100644 packages/form/es/menu/MenuItemSwitch.js create mode 100644 packages/form/es/menu/MenuItemSwitch.js.map create mode 100644 packages/form/es/menu/index.js create mode 100644 packages/form/es/menu/index.js.map create mode 100644 packages/form/es/select/Listbox.js create mode 100644 packages/form/es/select/Listbox.js.map create mode 100644 packages/form/es/select/NativeSelect.js create mode 100644 packages/form/es/select/NativeSelect.js.map create mode 100644 packages/form/es/select/Option.js create mode 100644 packages/form/es/select/Option.js.map create mode 100644 packages/form/es/select/Select.js create mode 100644 packages/form/es/select/Select.js.map create mode 100644 packages/form/es/select/index.js create mode 100644 packages/form/es/select/index.js.map create mode 100644 packages/form/es/select/utils.js create mode 100644 packages/form/es/select/utils.js.map create mode 100644 packages/form/es/slider/RangeSlider.js create mode 100644 packages/form/es/slider/RangeSlider.js.map create mode 100644 packages/form/es/slider/Slider.js create mode 100644 packages/form/es/slider/Slider.js.map create mode 100644 packages/form/es/slider/SliderContainer.js create mode 100644 packages/form/es/slider/SliderContainer.js.map create mode 100644 packages/form/es/slider/SliderThumb.js create mode 100644 packages/form/es/slider/SliderThumb.js.map create mode 100644 packages/form/es/slider/SliderTrack.js create mode 100644 packages/form/es/slider/SliderTrack.js.map create mode 100644 packages/form/es/slider/SliderValue.js create mode 100644 packages/form/es/slider/SliderValue.js.map create mode 100644 packages/form/es/slider/constants.js create mode 100644 packages/form/es/slider/constants.js.map create mode 100644 packages/form/es/slider/index.js create mode 100644 packages/form/es/slider/index.js.map create mode 100644 packages/form/es/slider/types.js create mode 100644 packages/form/es/slider/types.js.map create mode 100644 packages/form/es/slider/useDiscreteValueVisibility.js create mode 100644 packages/form/es/slider/useDiscreteValueVisibility.js.map create mode 100644 packages/form/es/slider/useRangeSlider.js create mode 100644 packages/form/es/slider/useRangeSlider.js.map create mode 100644 packages/form/es/slider/useSlider.js create mode 100644 packages/form/es/slider/useSlider.js.map create mode 100644 packages/form/es/slider/useSliderControls.js create mode 100644 packages/form/es/slider/useSliderControls.js.map create mode 100644 packages/form/es/slider/utils.js create mode 100644 packages/form/es/slider/utils.js.map create mode 100644 packages/form/es/text-field/Password.js create mode 100644 packages/form/es/text-field/Password.js.map create mode 100644 packages/form/es/text-field/PasswordWithMessage.js create mode 100644 packages/form/es/text-field/PasswordWithMessage.js.map create mode 100644 packages/form/es/text-field/TextArea.js create mode 100644 packages/form/es/text-field/TextArea.js.map create mode 100644 packages/form/es/text-field/TextAreaWithMessage.js create mode 100644 packages/form/es/text-field/TextAreaWithMessage.js.map create mode 100644 packages/form/es/text-field/TextField.js create mode 100644 packages/form/es/text-field/TextField.js.map create mode 100644 packages/form/es/text-field/TextFieldAddon.js create mode 100644 packages/form/es/text-field/TextFieldAddon.js.map create mode 100644 packages/form/es/text-field/TextFieldContainer.js create mode 100644 packages/form/es/text-field/TextFieldContainer.js.map create mode 100644 packages/form/es/text-field/TextFieldWithMessage.js create mode 100644 packages/form/es/text-field/TextFieldWithMessage.js.map create mode 100644 packages/form/es/text-field/getErrorIcon.js create mode 100644 packages/form/es/text-field/getErrorIcon.js.map create mode 100644 packages/form/es/text-field/getErrorMessage.js create mode 100644 packages/form/es/text-field/getErrorMessage.js.map create mode 100644 packages/form/es/text-field/index.js create mode 100644 packages/form/es/text-field/index.js.map create mode 100644 packages/form/es/text-field/isErrored.js create mode 100644 packages/form/es/text-field/isErrored.js.map create mode 100644 packages/form/es/text-field/useNumberField.js create mode 100644 packages/form/es/text-field/useNumberField.js.map create mode 100644 packages/form/es/text-field/useTextField.js create mode 100644 packages/form/es/text-field/useTextField.js.map create mode 100644 packages/form/es/toggle/AsyncSwitch.js create mode 100644 packages/form/es/toggle/AsyncSwitch.js.map create mode 100644 packages/form/es/toggle/Checkbox.js create mode 100644 packages/form/es/toggle/Checkbox.js.map create mode 100644 packages/form/es/toggle/InputToggle.js create mode 100644 packages/form/es/toggle/InputToggle.js.map create mode 100644 packages/form/es/toggle/InputToggleIcon.js create mode 100644 packages/form/es/toggle/InputToggleIcon.js.map create mode 100644 packages/form/es/toggle/Radio.js create mode 100644 packages/form/es/toggle/Radio.js.map create mode 100644 packages/form/es/toggle/Switch.js create mode 100644 packages/form/es/toggle/Switch.js.map create mode 100644 packages/form/es/toggle/SwitchTrack.js create mode 100644 packages/form/es/toggle/SwitchTrack.js.map create mode 100644 packages/form/es/toggle/ToggleContainer.js create mode 100644 packages/form/es/toggle/ToggleContainer.js.map create mode 100644 packages/form/es/toggle/index.js create mode 100644 packages/form/es/toggle/index.js.map create mode 100644 packages/form/es/toggle/useChecked.js create mode 100644 packages/form/es/toggle/useChecked.js.map create mode 100644 packages/form/es/useChoice.js create mode 100644 packages/form/es/useChoice.js.map create mode 100644 packages/form/es/useFieldStates.js create mode 100644 packages/form/es/useFieldStates.js.map create mode 100644 packages/form/es/useFocusState.js create mode 100644 packages/form/es/useFocusState.js.map create mode 100644 packages/form/es/useIndeterminateChecked.js create mode 100644 packages/form/es/useIndeterminateChecked.js.map create mode 100644 packages/form/es/useSelectState.js create mode 100644 packages/form/es/useSelectState.js.map create mode 100644 packages/form/lib/Fieldset.d.ts create mode 100644 packages/form/lib/Fieldset.js create mode 100644 packages/form/lib/Fieldset.js.map create mode 100644 packages/form/lib/Form.d.ts create mode 100644 packages/form/lib/Form.js create mode 100644 packages/form/lib/Form.js.map create mode 100644 packages/form/lib/FormMessage.d.ts create mode 100644 packages/form/lib/FormMessage.js create mode 100644 packages/form/lib/FormMessage.js.map create mode 100644 packages/form/lib/FormMessageContainer.d.ts create mode 100644 packages/form/lib/FormMessageContainer.js create mode 100644 packages/form/lib/FormMessageContainer.js.map create mode 100644 packages/form/lib/FormMessageCounter.d.ts create mode 100644 packages/form/lib/FormMessageCounter.js create mode 100644 packages/form/lib/FormMessageCounter.js.map create mode 100644 packages/form/lib/FormThemeProvider.d.ts create mode 100644 packages/form/lib/FormThemeProvider.js create mode 100644 packages/form/lib/FormThemeProvider.js.map create mode 100644 packages/form/lib/file-input/FileInput.d.ts create mode 100644 packages/form/lib/file-input/FileInput.js create mode 100644 packages/form/lib/file-input/FileInput.js.map create mode 100644 packages/form/lib/file-input/index.d.ts create mode 100644 packages/form/lib/file-input/index.js create mode 100644 packages/form/lib/file-input/index.js.map create mode 100644 packages/form/lib/file-input/useFileUpload.d.ts create mode 100644 packages/form/lib/file-input/useFileUpload.js create mode 100644 packages/form/lib/file-input/useFileUpload.js.map create mode 100644 packages/form/lib/file-input/utils.d.ts create mode 100644 packages/form/lib/file-input/utils.js create mode 100644 packages/form/lib/file-input/utils.js.map create mode 100644 packages/form/lib/index.d.ts create mode 100644 packages/form/lib/index.js create mode 100644 packages/form/lib/index.js.map create mode 100644 packages/form/lib/label/FloatingLabel.d.ts create mode 100644 packages/form/lib/label/FloatingLabel.js create mode 100644 packages/form/lib/label/FloatingLabel.js.map create mode 100644 packages/form/lib/label/Label.d.ts create mode 100644 packages/form/lib/label/Label.js create mode 100644 packages/form/lib/label/Label.js.map create mode 100644 packages/form/lib/label/index.d.ts create mode 100644 packages/form/lib/label/index.js create mode 100644 packages/form/lib/label/index.js.map create mode 100644 packages/form/lib/menu/MenuItemCheckbox.d.ts create mode 100644 packages/form/lib/menu/MenuItemCheckbox.js create mode 100644 packages/form/lib/menu/MenuItemCheckbox.js.map create mode 100644 packages/form/lib/menu/MenuItemInputToggle.d.ts create mode 100644 packages/form/lib/menu/MenuItemInputToggle.js create mode 100644 packages/form/lib/menu/MenuItemInputToggle.js.map create mode 100644 packages/form/lib/menu/MenuItemRadio.d.ts create mode 100644 packages/form/lib/menu/MenuItemRadio.js create mode 100644 packages/form/lib/menu/MenuItemRadio.js.map create mode 100644 packages/form/lib/menu/MenuItemSwitch.d.ts create mode 100644 packages/form/lib/menu/MenuItemSwitch.js create mode 100644 packages/form/lib/menu/MenuItemSwitch.js.map create mode 100644 packages/form/lib/menu/index.d.ts create mode 100644 packages/form/lib/menu/index.js create mode 100644 packages/form/lib/menu/index.js.map create mode 100644 packages/form/lib/select/Listbox.d.ts create mode 100644 packages/form/lib/select/Listbox.js create mode 100644 packages/form/lib/select/Listbox.js.map create mode 100644 packages/form/lib/select/NativeSelect.d.ts create mode 100644 packages/form/lib/select/NativeSelect.js create mode 100644 packages/form/lib/select/NativeSelect.js.map create mode 100644 packages/form/lib/select/Option.d.ts create mode 100644 packages/form/lib/select/Option.js create mode 100644 packages/form/lib/select/Option.js.map create mode 100644 packages/form/lib/select/Select.d.ts create mode 100644 packages/form/lib/select/Select.js create mode 100644 packages/form/lib/select/Select.js.map create mode 100644 packages/form/lib/select/index.d.ts create mode 100644 packages/form/lib/select/index.js create mode 100644 packages/form/lib/select/index.js.map create mode 100644 packages/form/lib/select/utils.d.ts create mode 100644 packages/form/lib/select/utils.js create mode 100644 packages/form/lib/select/utils.js.map create mode 100644 packages/form/lib/slider/RangeSlider.d.ts create mode 100644 packages/form/lib/slider/RangeSlider.js create mode 100644 packages/form/lib/slider/RangeSlider.js.map create mode 100644 packages/form/lib/slider/Slider.d.ts create mode 100644 packages/form/lib/slider/Slider.js create mode 100644 packages/form/lib/slider/Slider.js.map create mode 100644 packages/form/lib/slider/SliderContainer.d.ts create mode 100644 packages/form/lib/slider/SliderContainer.js create mode 100644 packages/form/lib/slider/SliderContainer.js.map create mode 100644 packages/form/lib/slider/SliderThumb.d.ts create mode 100644 packages/form/lib/slider/SliderThumb.js create mode 100644 packages/form/lib/slider/SliderThumb.js.map create mode 100644 packages/form/lib/slider/SliderTrack.d.ts create mode 100644 packages/form/lib/slider/SliderTrack.js create mode 100644 packages/form/lib/slider/SliderTrack.js.map create mode 100644 packages/form/lib/slider/SliderValue.d.ts create mode 100644 packages/form/lib/slider/SliderValue.js create mode 100644 packages/form/lib/slider/SliderValue.js.map create mode 100644 packages/form/lib/slider/constants.d.ts create mode 100644 packages/form/lib/slider/constants.js create mode 100644 packages/form/lib/slider/constants.js.map create mode 100644 packages/form/lib/slider/index.d.ts create mode 100644 packages/form/lib/slider/index.js create mode 100644 packages/form/lib/slider/index.js.map create mode 100644 packages/form/lib/slider/types.d.ts create mode 100644 packages/form/lib/slider/types.js create mode 100644 packages/form/lib/slider/types.js.map create mode 100644 packages/form/lib/slider/useDiscreteValueVisibility.d.ts create mode 100644 packages/form/lib/slider/useDiscreteValueVisibility.js create mode 100644 packages/form/lib/slider/useDiscreteValueVisibility.js.map create mode 100644 packages/form/lib/slider/useRangeSlider.d.ts create mode 100644 packages/form/lib/slider/useRangeSlider.js create mode 100644 packages/form/lib/slider/useRangeSlider.js.map create mode 100644 packages/form/lib/slider/useSlider.d.ts create mode 100644 packages/form/lib/slider/useSlider.js create mode 100644 packages/form/lib/slider/useSlider.js.map create mode 100644 packages/form/lib/slider/useSliderControls.d.ts create mode 100644 packages/form/lib/slider/useSliderControls.js create mode 100644 packages/form/lib/slider/useSliderControls.js.map create mode 100644 packages/form/lib/slider/utils.d.ts create mode 100644 packages/form/lib/slider/utils.js create mode 100644 packages/form/lib/slider/utils.js.map create mode 100644 packages/form/lib/text-field/Password.d.ts create mode 100644 packages/form/lib/text-field/Password.js create mode 100644 packages/form/lib/text-field/Password.js.map create mode 100644 packages/form/lib/text-field/PasswordWithMessage.d.ts create mode 100644 packages/form/lib/text-field/PasswordWithMessage.js create mode 100644 packages/form/lib/text-field/PasswordWithMessage.js.map create mode 100644 packages/form/lib/text-field/TextArea.d.ts create mode 100644 packages/form/lib/text-field/TextArea.js create mode 100644 packages/form/lib/text-field/TextArea.js.map create mode 100644 packages/form/lib/text-field/TextAreaWithMessage.d.ts create mode 100644 packages/form/lib/text-field/TextAreaWithMessage.js create mode 100644 packages/form/lib/text-field/TextAreaWithMessage.js.map create mode 100644 packages/form/lib/text-field/TextField.d.ts create mode 100644 packages/form/lib/text-field/TextField.js create mode 100644 packages/form/lib/text-field/TextField.js.map create mode 100644 packages/form/lib/text-field/TextFieldAddon.d.ts create mode 100644 packages/form/lib/text-field/TextFieldAddon.js create mode 100644 packages/form/lib/text-field/TextFieldAddon.js.map create mode 100644 packages/form/lib/text-field/TextFieldContainer.d.ts create mode 100644 packages/form/lib/text-field/TextFieldContainer.js create mode 100644 packages/form/lib/text-field/TextFieldContainer.js.map create mode 100644 packages/form/lib/text-field/TextFieldWithMessage.d.ts create mode 100644 packages/form/lib/text-field/TextFieldWithMessage.js create mode 100644 packages/form/lib/text-field/TextFieldWithMessage.js.map create mode 100644 packages/form/lib/text-field/getErrorIcon.d.ts create mode 100644 packages/form/lib/text-field/getErrorIcon.js create mode 100644 packages/form/lib/text-field/getErrorIcon.js.map create mode 100644 packages/form/lib/text-field/getErrorMessage.d.ts create mode 100644 packages/form/lib/text-field/getErrorMessage.js create mode 100644 packages/form/lib/text-field/getErrorMessage.js.map create mode 100644 packages/form/lib/text-field/index.d.ts create mode 100644 packages/form/lib/text-field/index.js create mode 100644 packages/form/lib/text-field/index.js.map create mode 100644 packages/form/lib/text-field/isErrored.d.ts create mode 100644 packages/form/lib/text-field/isErrored.js create mode 100644 packages/form/lib/text-field/isErrored.js.map create mode 100644 packages/form/lib/text-field/useNumberField.d.ts create mode 100644 packages/form/lib/text-field/useNumberField.js create mode 100644 packages/form/lib/text-field/useNumberField.js.map create mode 100644 packages/form/lib/text-field/useTextField.d.ts create mode 100644 packages/form/lib/text-field/useTextField.js create mode 100644 packages/form/lib/text-field/useTextField.js.map create mode 100644 packages/form/lib/toggle/AsyncSwitch.d.ts create mode 100644 packages/form/lib/toggle/AsyncSwitch.js create mode 100644 packages/form/lib/toggle/AsyncSwitch.js.map create mode 100644 packages/form/lib/toggle/Checkbox.d.ts create mode 100644 packages/form/lib/toggle/Checkbox.js create mode 100644 packages/form/lib/toggle/Checkbox.js.map create mode 100644 packages/form/lib/toggle/InputToggle.d.ts create mode 100644 packages/form/lib/toggle/InputToggle.js create mode 100644 packages/form/lib/toggle/InputToggle.js.map create mode 100644 packages/form/lib/toggle/InputToggleIcon.d.ts create mode 100644 packages/form/lib/toggle/InputToggleIcon.js create mode 100644 packages/form/lib/toggle/InputToggleIcon.js.map create mode 100644 packages/form/lib/toggle/Radio.d.ts create mode 100644 packages/form/lib/toggle/Radio.js create mode 100644 packages/form/lib/toggle/Radio.js.map create mode 100644 packages/form/lib/toggle/Switch.d.ts create mode 100644 packages/form/lib/toggle/Switch.js create mode 100644 packages/form/lib/toggle/Switch.js.map create mode 100644 packages/form/lib/toggle/SwitchTrack.d.ts create mode 100644 packages/form/lib/toggle/SwitchTrack.js create mode 100644 packages/form/lib/toggle/SwitchTrack.js.map create mode 100644 packages/form/lib/toggle/ToggleContainer.d.ts create mode 100644 packages/form/lib/toggle/ToggleContainer.js create mode 100644 packages/form/lib/toggle/ToggleContainer.js.map create mode 100644 packages/form/lib/toggle/index.d.ts create mode 100644 packages/form/lib/toggle/index.js create mode 100644 packages/form/lib/toggle/index.js.map create mode 100644 packages/form/lib/toggle/useChecked.d.ts create mode 100644 packages/form/lib/toggle/useChecked.js create mode 100644 packages/form/lib/toggle/useChecked.js.map create mode 100644 packages/form/lib/useChoice.d.ts create mode 100644 packages/form/lib/useChoice.js create mode 100644 packages/form/lib/useChoice.js.map create mode 100644 packages/form/lib/useFieldStates.d.ts create mode 100644 packages/form/lib/useFieldStates.js create mode 100644 packages/form/lib/useFieldStates.js.map create mode 100644 packages/form/lib/useFocusState.d.ts create mode 100644 packages/form/lib/useFocusState.js create mode 100644 packages/form/lib/useFocusState.js.map create mode 100644 packages/form/lib/useIndeterminateChecked.d.ts create mode 100644 packages/form/lib/useIndeterminateChecked.js create mode 100644 packages/form/lib/useIndeterminateChecked.js.map create mode 100644 packages/form/lib/useSelectState.d.ts create mode 100644 packages/form/lib/useSelectState.js create mode 100644 packages/form/lib/useSelectState.js.map create mode 100644 packages/form/types/Fieldset.d.ts create mode 100644 packages/form/types/Form.d.ts create mode 100644 packages/form/types/FormMessage.d.ts create mode 100644 packages/form/types/FormMessageContainer.d.ts create mode 100644 packages/form/types/FormMessageCounter.d.ts create mode 100644 packages/form/types/FormThemeProvider.d.ts create mode 100644 packages/form/types/file-input/FileInput.d.ts create mode 100644 packages/form/types/file-input/index.d.ts create mode 100644 packages/form/types/file-input/useFileUpload.d.ts create mode 100644 packages/form/types/file-input/utils.d.ts create mode 100644 packages/form/types/index.d.ts create mode 100644 packages/form/types/label/FloatingLabel.d.ts create mode 100644 packages/form/types/label/Label.d.ts create mode 100644 packages/form/types/label/index.d.ts create mode 100644 packages/form/types/menu/MenuItemCheckbox.d.ts create mode 100644 packages/form/types/menu/MenuItemInputToggle.d.ts create mode 100644 packages/form/types/menu/MenuItemRadio.d.ts create mode 100644 packages/form/types/menu/MenuItemSwitch.d.ts create mode 100644 packages/form/types/menu/index.d.ts create mode 100644 packages/form/types/select/Listbox.d.ts create mode 100644 packages/form/types/select/NativeSelect.d.ts create mode 100644 packages/form/types/select/Option.d.ts create mode 100644 packages/form/types/select/Select.d.ts create mode 100644 packages/form/types/select/index.d.ts create mode 100644 packages/form/types/select/utils.d.ts create mode 100644 packages/form/types/slider/RangeSlider.d.ts create mode 100644 packages/form/types/slider/Slider.d.ts create mode 100644 packages/form/types/slider/SliderContainer.d.ts create mode 100644 packages/form/types/slider/SliderThumb.d.ts create mode 100644 packages/form/types/slider/SliderTrack.d.ts create mode 100644 packages/form/types/slider/SliderValue.d.ts create mode 100644 packages/form/types/slider/constants.d.ts create mode 100644 packages/form/types/slider/index.d.ts create mode 100644 packages/form/types/slider/types.d.ts create mode 100644 packages/form/types/slider/useDiscreteValueVisibility.d.ts create mode 100644 packages/form/types/slider/useRangeSlider.d.ts create mode 100644 packages/form/types/slider/useSlider.d.ts create mode 100644 packages/form/types/slider/useSliderControls.d.ts create mode 100644 packages/form/types/slider/utils.d.ts create mode 100644 packages/form/types/text-field/Password.d.ts create mode 100644 packages/form/types/text-field/PasswordWithMessage.d.ts create mode 100644 packages/form/types/text-field/TextArea.d.ts create mode 100644 packages/form/types/text-field/TextAreaWithMessage.d.ts create mode 100644 packages/form/types/text-field/TextField.d.ts create mode 100644 packages/form/types/text-field/TextFieldAddon.d.ts create mode 100644 packages/form/types/text-field/TextFieldContainer.d.ts create mode 100644 packages/form/types/text-field/TextFieldWithMessage.d.ts create mode 100644 packages/form/types/text-field/getErrorIcon.d.ts create mode 100644 packages/form/types/text-field/getErrorMessage.d.ts create mode 100644 packages/form/types/text-field/index.d.ts create mode 100644 packages/form/types/text-field/isErrored.d.ts create mode 100644 packages/form/types/text-field/useNumberField.d.ts create mode 100644 packages/form/types/text-field/useTextField.d.ts create mode 100644 packages/form/types/toggle/AsyncSwitch.d.ts create mode 100644 packages/form/types/toggle/Checkbox.d.ts create mode 100644 packages/form/types/toggle/InputToggle.d.ts create mode 100644 packages/form/types/toggle/InputToggleIcon.d.ts create mode 100644 packages/form/types/toggle/Radio.d.ts create mode 100644 packages/form/types/toggle/Switch.d.ts create mode 100644 packages/form/types/toggle/SwitchTrack.d.ts create mode 100644 packages/form/types/toggle/ToggleContainer.d.ts create mode 100644 packages/form/types/toggle/index.d.ts create mode 100644 packages/form/types/toggle/useChecked.d.ts create mode 100644 packages/form/types/useChoice.d.ts create mode 100644 packages/form/types/useFieldStates.d.ts create mode 100644 packages/form/types/useFocusState.d.ts create mode 100644 packages/form/types/useIndeterminateChecked.d.ts create mode 100644 packages/form/types/useSelectState.d.ts diff --git a/.gitignore b/.gitignore index 82df813991..963f226ab0 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,15 @@ packages/*/*.tsbuildinfo /packages/material-icons/temp !/packages/documentation/types +# Include the built files that we want to customize so that we can install from Github +!/packages/autocomplete/es +!/packages/autocomplete/lib +!/packages/autocomplete/types +!/packages/form/es +!/packages/form/lib +!/packages/form/types +!/packages/form/dist + # Documentation ignores since .gitignore in child directories isn't picked up by # ag /packages/documentation/.next diff --git a/packages/autocomplete/es/AutoComplete.js b/packages/autocomplete/es/AutoComplete.js new file mode 100644 index 0000000000..e4b9876dd9 --- /dev/null +++ b/packages/autocomplete/es/AutoComplete.js @@ -0,0 +1,427 @@ +var __assign = + (this && this.__assign) || + function () { + __assign = + Object.assign || + function (t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) + if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); + }; +var __rest = + (this && this.__rest) || + function (s, e) { + var t = {}; + for (var p in s) + if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === 'function') + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if ( + e.indexOf(p[i]) < 0 && + Object.prototype.propertyIsEnumerable.call(s, p[i]) + ) + t[p[i]] = s[p[i]]; + } + return t; + }; +var __spreadArray = + (this && this.__spreadArray) || + function (to, from) { + for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) + to[j] = from[i]; + return to; + }; +import React, { forwardRef } from 'react'; +import cn from 'classnames'; +import { + isListboxOptionProps, + Option, + TextAreaWithMessage, +} from '@react-md/form'; +import { List } from '@react-md/list'; +import { ScaleTransition } from '@react-md/transition'; +import { BELOW_CENTER_ANCHOR, bem, omit } from '@react-md/utils'; +import { HighlightedResult } from './HighlightedResult'; +import { useAutoComplete } from './useAutoComplete'; +import { + getResultId as DEFAULT_GET_RESULT_ID, + getResultLabel as DEFAULT_GET_RESULT_LABEL, + getResultValue as DEFAULT_GET_RESULT_VALUE, +} from './utils'; +var block = bem('rmd-autocomplate'); +var listbox = bem('rmd-listbox'); +var DEFAULT_FILTER_OPTIONS = { + trim: true, + ignoreWhitespace: true, +}; +var EMPTY_LIST = []; +/** + * An AutoComplete is an accessible combobox widget that allows for real-time + * suggestions as the user types. + */ +export var AutoComplete = forwardRef(function AutoComplete(_a, forwardedRef) { + var _b = _a.autoComplete, + autoComplete = _b === void 0 ? 'list' : _b, + data = _a.data, + _c = _a.filter, + filter = _c === void 0 ? 'case-insensitive' : _c, + _d = _a.filterOptions, + filterOptions = _d === void 0 ? DEFAULT_FILTER_OPTIONS : _d, + _e = _a.filterOnNoValue, + filterOnNoValue = _e === void 0 ? false : _e, + className = _a.className, + onBlur = _a.onBlur, + onFocus = _a.onFocus, + onClick = _a.onClick, + onKeyDown = _a.onKeyDown, + onChange = _a.onChange, + containerProps = _a.containerProps, + _f = _a.portal, + portal = _f === void 0 ? false : _f, + portalInto = _a.portalInto, + portalIntoId = _a.portalIntoId, + listboxStyle = _a.listboxStyle, + listboxClassName = _a.listboxClassName, + onAutoComplete = _a.onAutoComplete, + _g = _a.clearOnAutoComplete, + clearOnAutoComplete = _g === void 0 ? false : _g, + _h = _a.labelKey, + labelKey = _h === void 0 ? 'label' : _h, + _j = _a.valueKey, + valueKey = _j === void 0 ? 'value' : _j, + _k = _a.getResultId, + getResultId = _k === void 0 ? DEFAULT_GET_RESULT_ID : _k, + _l = _a.getResultLabel, + getResultLabel = _l === void 0 ? DEFAULT_GET_RESULT_LABEL : _l, + _m = _a.getResultValue, + getResultValue = _m === void 0 ? DEFAULT_GET_RESULT_VALUE : _m, + _o = _a.highlight, + highlight = _o === void 0 ? false : _o, + _p = _a.highlightReapeating, + highlightReapeating = _p === void 0 ? false : _p, + highlightStyle = _a.highlightStyle, + highlightClassName = _a.highlightClassName, + _q = _a.anchor, + anchor = _q === void 0 ? BELOW_CENTER_ANCHOR : _q, + _r = _a.listboxWidth, + listboxWidth = _r === void 0 ? 'equal' : _r, + _s = _a.xMargin, + xMargin = _s === void 0 ? 0 : _s, + _t = _a.yMargin, + yMargin = _t === void 0 ? 0 : _t, + _u = _a.vwMargin, + vwMargin = _u === void 0 ? 16 : _u, + _v = _a.vhMargin, + vhMargin = _v === void 0 ? 16 : _v, + _w = _a.transformOrigin, + transformOrigin = _w === void 0 ? true : _w, + _x = _a.preventOverlap, + preventOverlap = _x === void 0 ? true : _x, + _y = _a.disableVHBounds, + disableVHBounds = _y === void 0 ? false : _y, + _z = _a.disableSwapping, + disableSwapping = _z === void 0 ? true : _z, + disableShowOnFocus = _a.disableShowOnFocus, + _0 = _a.closeOnResize, + closeOnResize = _0 === void 0 ? false : _0, + _1 = _a.closeOnScroll, + closeOnScroll = _1 === void 0 ? false : _1, + _2 = _a.omitKeys, + omitKeys = _2 === void 0 ? EMPTY_LIST : _2, + propValue = _a.value, + defaultValue = _a.defaultValue, + beforeResultsChildren = _a.beforeResultsChildren, + afterResultsChildren = _a.afterResultsChildren, + props = __rest(_a, [ + 'autoComplete', + 'data', + 'filter', + 'filterOptions', + 'filterOnNoValue', + 'className', + 'onBlur', + 'onFocus', + 'onClick', + 'onKeyDown', + 'onChange', + 'containerProps', + 'portal', + 'portalInto', + 'portalIntoId', + 'listboxStyle', + 'listboxClassName', + 'onAutoComplete', + 'clearOnAutoComplete', + 'labelKey', + 'valueKey', + 'getResultId', + 'getResultLabel', + 'getResultValue', + 'highlight', + 'highlightReapeating', + 'highlightStyle', + 'highlightClassName', + 'anchor', + 'listboxWidth', + 'xMargin', + 'yMargin', + 'vwMargin', + 'vhMargin', + 'transformOrigin', + 'preventOverlap', + 'disableVHBounds', + 'disableSwapping', + 'disableShowOnFocus', + 'closeOnResize', + 'closeOnScroll', + 'omitKeys', + 'value', + 'defaultValue', + 'beforeResultsChildren', + 'afterResultsChildren', + ]); + var id = props.id; + var comboboxId = id + '-combobox'; + var suggestionsId = id + '-listbox'; + var isListAutocomplete = autoComplete === 'list' || autoComplete === 'both'; + var isInlineAutocomplete = + autoComplete === 'inline' || autoComplete === 'both'; + var _3 = useAutoComplete({ + suggestionsId: suggestionsId, + defaultValue: defaultValue, + data: data, + filter: filter, + filterOptions: filterOptions, + filterOnNoValue: filterOnNoValue, + valueKey: valueKey, + getResultId: getResultId, + getResultValue: getResultValue, + onBlur: onBlur, + onFocus: onFocus, + onClick: onClick, + onChange: onChange, + onKeyDown: onKeyDown, + forwardedRef: forwardedRef, + onAutoComplete: onAutoComplete, + clearOnAutoComplete: clearOnAutoComplete, + isListAutocomplete: isListAutocomplete, + isInlineAutocomplete: isInlineAutocomplete, + anchor: anchor, + xMargin: xMargin, + yMargin: yMargin, + vwMargin: vwMargin, + vhMargin: vhMargin, + transformOrigin: transformOrigin, + listboxWidth: listboxWidth, + listboxStyle: listboxStyle, + preventOverlap: preventOverlap, + disableSwapping: disableSwapping, + disableVHBounds: disableVHBounds, + closeOnResize: closeOnResize, + closeOnScroll: closeOnScroll, + disableShowOnFocus: disableShowOnFocus, + }), + ref = _3.ref, + match = _3.match, + value = _3.value, + visible = _3.visible, + activeId = _3.activeId, + itemRefs = _3.itemRefs, + filteredData = _3.filteredData, + listboxRef = _3.listboxRef, + fixedStyle = _3.fixedStyle, + transitionHooks = _3.transitionHooks, + handleBlur = _3.handleBlur, + handleFocus = _3.handleFocus, + handleClick = _3.handleClick, + handleChange = _3.handleChange, + handleKeyDown = _3.handleKeyDown, + handleAutoComplete = _3.handleAutoComplete; + return React.createElement( + React.Fragment, + null, + React.createElement( + TextAreaWithMessage, + __assign({}, props, { + 'aria-autocomplete': autoComplete, + 'aria-controls': comboboxId, + 'aria-activedescendant': activeId, + autoComplete: 'off', + value: propValue !== null && propValue !== void 0 ? propValue : match, + onBlur: handleBlur, + onFocus: handleFocus, + onClick: handleClick, + onKeyDown: handleKeyDown, + onChange: handleChange, + ref: ref, + className: cn(block(), className), + containerProps: __assign(__assign({}, containerProps), { + 'aria-haspopup': 'listbox', + 'aria-owns': suggestionsId, + 'aria-expanded': visible, + id: comboboxId, + role: 'combobox', + }), + }) + ), + React.createElement( + ScaleTransition, + __assign( + { + portal: portal, + portalInto: portalInto, + portalIntoId: portalIntoId, + vertical: true, + visible: visible, + }, + transitionHooks + ), + React.createElement( + List, + { + id: suggestionsId, + role: 'listbox', + ref: listboxRef, + style: fixedStyle, + className: cn(listbox({ temporary: true }), listboxClassName), + }, + beforeResultsChildren, + filteredData.map(function (datum, i) { + var resultId = getResultId(suggestionsId, i); + var optionProps; + if (isListboxOptionProps(datum)) { + optionProps = omit( + datum, + __spreadArray([labelKey, valueKey], omitKeys) + ); + } + return React.createElement( + Option, + __assign({ key: resultId }, optionProps, { + id: resultId, + selected: false, + focused: resultId === activeId, + ref: itemRefs[i], + onClick: function () { + return handleAutoComplete(i); + }, + }), + React.createElement( + HighlightedResult, + { + id: resultId + '-match', + style: highlightStyle, + className: highlightClassName, + value: + propValue !== null && propValue !== void 0 + ? propValue + : value, + enabled: highlight, + repeatable: highlightReapeating, + }, + getResultLabel(datum, labelKey, value) + ) + ); + }), + afterResultsChildren + ) + ) + ); +}); +/* istanbul ignore next */ +if (process.env.NODE_ENV !== 'production') { + try { + var PropTypes = require('prop-types'); + AutoComplete.propTypes = { + id: PropTypes.string.isRequired, + data: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.object]) + ).isRequired, + filter: PropTypes.oneOfType([ + PropTypes.oneOf(['none', 'fuzzy', 'case-insensitive']), + PropTypes.func, + ]), + filterOptions: PropTypes.object, + filterOnNoValue: PropTypes.bool, + labelKey: PropTypes.string, + valueKey: PropTypes.string, + getResultId: PropTypes.func, + getResultLabel: PropTypes.func, + getResultValue: PropTypes.func, + highlight: PropTypes.bool, + autoComplete: PropTypes.oneOf(['none', 'inline', 'list', 'both']), + onAutoComplete: PropTypes.func, + clearOnAutoComplete: PropTypes.bool, + portal: PropTypes.bool, + portalInto: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string, + PropTypes.object, + ]), + portalIntoId: PropTypes.string, + anchor: PropTypes.shape({ + x: PropTypes.oneOf([ + 'inner-left', + 'inner-right', + 'center', + 'left', + 'right', + ]), + y: PropTypes.oneOf(['above', 'below', 'center', 'top', 'bottom']), + }), + listboxWidth: PropTypes.oneOf(['auto', 'equal', 'min']), + vwMargin: PropTypes.number, + vhMargin: PropTypes.number, + xMargin: PropTypes.number, + yMargin: PropTypes.number, + transformOrigin: PropTypes.bool, + preventOverlap: PropTypes.bool, + disableSwapping: PropTypes.bool, + disableVHBounds: PropTypes.bool, + closeOnResize: PropTypes.bool, + closeOnScroll: PropTypes.bool, + style: PropTypes.object, + className: PropTypes.string, + areaStyle: PropTypes.object, + areaClassName: PropTypes.string, + labelStyle: PropTypes.object, + labelClassName: PropTypes.string, + label: PropTypes.node, + theme: PropTypes.oneOf(['none', 'underline', 'filled', 'outline']), + dense: PropTypes.bool, + error: PropTypes.bool, + inline: PropTypes.bool, + disabled: PropTypes.bool, + placeholder: PropTypes.string, + underlineDirection: PropTypes.oneOf(['left', 'center', 'right']), + leftChildren: PropTypes.node, + rightChildren: PropTypes.node, + isLeftAddon: PropTypes.bool, + isRightAddon: PropTypes.bool, + onBlur: PropTypes.func, + onFocus: PropTypes.func, + onClick: PropTypes.func, + onKeyDown: PropTypes.func, + onChange: PropTypes.func, + containerProps: PropTypes.object, + listboxStyle: PropTypes.object, + listboxClassName: PropTypes.string, + highlightReapeating: PropTypes.bool, + highlightStyle: PropTypes.object, + highlightClassName: PropTypes.string, + disableShowOnFocus: PropTypes.bool, + omitKeys: PropTypes.arrayOf(PropTypes.string), + value: PropTypes.string, + defaultValue: PropTypes.string, + beforeResultsChildren: PropTypes.node, + afterResultsChildren: PropTypes.node, + }; + } catch (e) {} +} +//# sourceMappingURL=AutoComplete.js.map diff --git a/packages/autocomplete/es/AutoComplete.js.map b/packages/autocomplete/es/AutoComplete.js.map new file mode 100644 index 0000000000..63e717fe1b --- /dev/null +++ b/packages/autocomplete/es/AutoComplete.js.map @@ -0,0 +1 @@ +{"version":3,"file":"AutoComplete.js","sourceRoot":"","sources":["../src/AutoComplete.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/packages/autocomplete/es/HighlightedResult.js b/packages/autocomplete/es/HighlightedResult.js new file mode 100644 index 0000000000..1607c8a821 --- /dev/null +++ b/packages/autocomplete/es/HighlightedResult.js @@ -0,0 +1,75 @@ +import React from 'react'; +import cn from 'classnames'; +/** + * The `HighlightedResult` component can be used to bold specific letters + * within the `children` if the `children` is a string. + */ +export function HighlightedResult(_a) { + var propId = _a.id, + style = _a.style, + className = _a.className, + _b = _a.enabled, + enabled = _b === void 0 ? true : _b, + value = _a.value, + children = _a.children, + _c = _a.repeatable, + repeatable = _c === void 0 ? false : _c, + _d = _a.index, + index = _d === void 0 ? 0 : _d; + if (!enabled || !value || typeof children !== 'string') { + return React.createElement(React.Fragment, null, children); + } + var i = children.toLowerCase().indexOf(value.toLowerCase()); + if (i === -1) { + return React.createElement(React.Fragment, null, children); + } + var end = i + value.length; + var id = propId; + if (id && index > 0) { + id = id + '-' + index; + } + return React.createElement( + React.Fragment, + null, + i > 0 && children.substring(0, i), + React.createElement( + 'span', + { + id: id, + style: style, + className: cn('rmd-typography--bold', className), + }, + children.substring(i, end) + ), + end < children.length && + React.createElement( + HighlightedResult, + { + style: style, + className: className, + value: value, + enabled: enabled && repeatable, + repeatable: repeatable, + index: index + 1, + }, + children.substring(end) + ) + ); +} +/* istanbul ignore next */ +if (process.env.NODE_ENV !== 'production') { + try { + var PropTypes = require('prop-types'); + HighlightedResult.propTypes = { + id: PropTypes.string, + index: PropTypes.number, + value: PropTypes.string.isRequired, + style: PropTypes.object, + className: PropTypes.string, + children: PropTypes.node, + enabled: PropTypes.bool, + repeatable: PropTypes.bool, + }; + } catch (e) {} +} +//# sourceMappingURL=HighlightedResult.js.map diff --git a/packages/autocomplete/es/HighlightedResult.js.map b/packages/autocomplete/es/HighlightedResult.js.map new file mode 100644 index 0000000000..f743d6627b --- /dev/null +++ b/packages/autocomplete/es/HighlightedResult.js.map @@ -0,0 +1 @@ +{"version":3,"file":"HighlightedResult.js","sourceRoot":"","sources":["../src/HighlightedResult.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,MAAM,YAAY,CAAC;AAiD5B;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAST;QARnB,MAAM,QAAA,EACV,KAAK,WAAA,EACL,SAAS,eAAA,EACT,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA;IAET,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QACtD,OAAO,0CAAG,QAAQ,CAAI,CAAC;KACxB;IAED,IAAM,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9D,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;QACZ,OAAO,0CAAG,QAAQ,CAAI,CAAC;KACxB;IAED,IAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAC7B,IAAI,EAAE,GAAG,MAAM,CAAC;IAChB,IAAI,EAAE,IAAI,KAAK,GAAG,CAAC,EAAE;QACnB,EAAE,GAAM,EAAE,SAAI,KAAO,CAAC;KACvB;IAED,OAAO,CACL;QACG,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;QAClC,8BACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAE/C,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,CACtB;QACN,GAAG,GAAG,QAAQ,CAAC,MAAM,IAAI,CACxB,oBAAC,iBAAiB,IAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,IAAI,UAAU,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,GAAG,CAAC,IAEf,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CACN,CACrB,CACA,CACJ,CAAC;AACJ,CAAC;AAED,0BAA0B;AAC1B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAI;QACF,IAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;QAExC,iBAAiB,CAAC,SAAS,GAAG;YAC5B,EAAE,EAAE,SAAS,CAAC,MAAM;YACpB,KAAK,EAAE,SAAS,CAAC,MAAM;YACvB,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;YAClC,KAAK,EAAE,SAAS,CAAC,MAAM;YACvB,SAAS,EAAE,SAAS,CAAC,MAAM;YAC3B,QAAQ,EAAE,SAAS,CAAC,IAAI;YACxB,OAAO,EAAE,SAAS,CAAC,IAAI;YACvB,UAAU,EAAE,SAAS,CAAC,IAAI;SAC3B,CAAC;KACH;IAAC,OAAO,CAAC,EAAE,GAAE;CACf"} \ No newline at end of file diff --git a/packages/autocomplete/es/index.js b/packages/autocomplete/es/index.js new file mode 100644 index 0000000000..e8fb765d52 --- /dev/null +++ b/packages/autocomplete/es/index.js @@ -0,0 +1,14 @@ +/** + * @module @react-md/autocomplete + */ +export * from './AutoComplete'; +export * from './HighlightedResult'; +export * from './useAutoComplete'; +export { + isResultOf, + getResultId as DEFAULT_GET_RESULT_ID, + getResultLabel as DEFAULT_GET_RESULT_LABEL, + getResultValue as DEFAULT_GET_RESULT_VALUE, +} from './utils'; +export * from './types'; +//# sourceMappingURL=index.js.map diff --git a/packages/autocomplete/es/index.js.map b/packages/autocomplete/es/index.js.map new file mode 100644 index 0000000000..5b20307b7d --- /dev/null +++ b/packages/autocomplete/es/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAElC,OAAO,EACL,UAAU,EACV,WAAW,IAAI,qBAAqB,EACpC,cAAc,IAAI,wBAAwB,EAC1C,cAAc,IAAI,wBAAwB,GAC3C,MAAM,SAAS,CAAC;AACjB,cAAc,SAAS,CAAC"} \ No newline at end of file diff --git a/packages/autocomplete/es/types.js b/packages/autocomplete/es/types.js new file mode 100644 index 0000000000..cd268e9bde --- /dev/null +++ b/packages/autocomplete/es/types.js @@ -0,0 +1,2 @@ +export {}; +//# sourceMappingURL=types.js.map diff --git a/packages/autocomplete/es/types.js.map b/packages/autocomplete/es/types.js.map new file mode 100644 index 0000000000..c768b79002 --- /dev/null +++ b/packages/autocomplete/es/types.js.map @@ -0,0 +1 @@ +{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/packages/autocomplete/es/useAutoComplete.js b/packages/autocomplete/es/useAutoComplete.js new file mode 100644 index 0000000000..c7e9a2c67a --- /dev/null +++ b/packages/autocomplete/es/useAutoComplete.js @@ -0,0 +1,443 @@ +var __assign = + (this && this.__assign) || + function () { + __assign = + Object.assign || + function (t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) + if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); + }; +import { useCallback, useEffect, useRef, useState } from 'react'; +import { useFixedPositioning } from '@react-md/transition'; +import { + MovementPresets, + scrollIntoView, + useActiveDescendantMovement, + useCloseOnOutsideClick, + useEnsuredRef, + useIsUserInteractionMode, + useToggle, +} from '@react-md/utils'; +import { getFilterFunction } from './utils'; +/** + * This hook handles all the autocomplete's "logic" and behavior. + * + * @internal + */ +export function useAutoComplete(_a) { + var _b; + var suggestionsId = _a.suggestionsId, + data = _a.data, + propValue = _a.propValue, + _c = _a.defaultValue, + defaultValue = _c === void 0 ? '' : _c, + filterFn = _a.filter, + filterOptions = _a.filterOptions, + filterOnNoValue = _a.filterOnNoValue, + valueKey = _a.valueKey, + getResultId = _a.getResultId, + getResultValue = _a.getResultValue, + onBlur = _a.onBlur, + onFocus = _a.onFocus, + onClick = _a.onClick, + onChange = _a.onChange, + onKeyDown = _a.onKeyDown, + forwardedRef = _a.forwardedRef, + onAutoComplete = _a.onAutoComplete, + clearOnAutoComplete = _a.clearOnAutoComplete, + anchor = _a.anchor, + xMargin = _a.xMargin, + yMargin = _a.yMargin, + vwMargin = _a.vwMargin, + vhMargin = _a.vhMargin, + transformOrigin = _a.transformOrigin, + listboxWidth = _a.listboxWidth, + listboxStyle = _a.listboxStyle, + preventOverlap = _a.preventOverlap, + disableSwapping = _a.disableSwapping, + disableVHBounds = _a.disableVHBounds, + closeOnResize = _a.closeOnResize, + closeOnScroll = _a.closeOnScroll, + propDisableShowOnFocus = _a.disableShowOnFocus, + isListAutocomplete = _a.isListAutocomplete, + isInlineAutocomplete = _a.isInlineAutocomplete; + var _d = useEnsuredRef(forwardedRef), + ref = _d[0], + refHandler = _d[1]; + var filter = getFilterFunction(filterFn); + var _e = useState(function () { + var _a; + var options = __assign(__assign({}, filterOptions), { + valueKey: valueKey, + getItemValue: getResultValue, + startsWith: + (_a = + filterOptions === null || filterOptions === void 0 + ? void 0 + : filterOptions.startsWith) !== null && _a !== void 0 + ? _a + : isInlineAutocomplete, + }); + var value = + propValue !== null && propValue !== void 0 ? propValue : defaultValue; + var filteredData = + filterOnNoValue || value ? filter(value, data, options) : data; + var match = value; + if (isInlineAutocomplete && filteredData.length) { + match = getResultValue(filteredData[0], valueKey); + } + return { + value: value, + match: match, + filteredData: filteredData, + }; + }), + _f = _e[0], + stateValue = _f.value, + match = _f.match, + stateFilteredData = _f.filteredData, + setState = _e[1]; + var filteredData = filterFn === 'none' ? data : stateFilteredData; + var startsWith = + (_b = + filterOptions === null || filterOptions === void 0 + ? void 0 + : filterOptions.startsWith) !== null && _b !== void 0 + ? _b + : isInlineAutocomplete; + var value = + propValue !== null && propValue !== void 0 ? propValue : stateValue; + var setValue = useCallback( + function (nextValue) { + var isBackspace = + value.length > nextValue.length || + (!!match && value.length === nextValue.length); + var filtered = data; + if (nextValue || filterOnNoValue) { + var options = __assign(__assign({}, filterOptions), { + valueKey: valueKey, + getItemValue: getResultValue, + startsWith: startsWith, + }); + filtered = filter(nextValue, data, options); + } + var nextMatch = nextValue; + if (isInlineAutocomplete && filtered.length && !isBackspace) { + nextMatch = getResultValue(filtered[0], valueKey); + var input = ref.current; + if (input && !isBackspace) { + input.value = nextMatch; + input.setSelectionRange(nextValue.length, nextMatch.length); + } + } + setState({ value: nextValue, match: nextMatch, filteredData: filtered }); + }, + [ + ref, + data, + filter, + filterOnNoValue, + filterOptions, + isInlineAutocomplete, + getResultValue, + value, + match, + startsWith, + valueKey, + ] + ); + // this is really just a hacky way to make sure that once a value has been + // autocompleted, the menu doesn't immediately re-appear due to the hook below + // for showing when the value/ filtered data list change + var autocompleted = useRef(false); + var handleChange = useCallback( + function (event) { + if (onChange) { + onChange(event); + } + autocompleted.current = false; + setValue(event.currentTarget.value); + }, + [setValue, onChange] + ); + var _g = useToggle(false), + visible = _g[0], + show = _g[1], + hide = _g[2]; + var isTouch = useIsUserInteractionMode('touch'); + var disableShowOnFocus = + propDisableShowOnFocus !== null && propDisableShowOnFocus !== void 0 + ? propDisableShowOnFocus + : isTouch; + var focused = useRef(false); + var handleBlur = useCallback( + function (event) { + if (onBlur) { + onBlur(event); + } + focused.current = false; + }, + [onBlur] + ); + var handleFocus = useCallback( + function (event) { + if (onFocus) { + onFocus(event); + } + if (disableShowOnFocus) { + return; + } + focused.current = true; + if (isListAutocomplete && filteredData.length) { + show(); + } + }, + [filteredData, isListAutocomplete, onFocus, show, disableShowOnFocus] + ); + var handleClick = useCallback( + function (event) { + if (onClick) { + onClick(event); + } + // since click events also trigger focus events right beforehand, want to + // skip the first click handler and require a second click to show it. + // this is why the focused.current isn't set onFocus for + // disableShowOnFocus + if (disableShowOnFocus && !focused.current) { + focused.current = true; + return; + } + if (isListAutocomplete && filteredData.length) { + show(); + } + }, + [disableShowOnFocus, filteredData.length, isListAutocomplete, onClick, show] + ); + var handleAutoComplete = useCallback( + function (index) { + var result = filteredData[index]; + var resultValue = getResultValue(result, valueKey); + if (onAutoComplete) { + onAutoComplete({ + value: resultValue, + index: index, + result: result, + dataIndex: data.findIndex(function (datum) { + return getResultValue(datum, valueKey) === resultValue; + }), + filteredData: filteredData, + }); + } + setValue(clearOnAutoComplete ? '' : resultValue); + autocompleted.current = true; + }, + [ + clearOnAutoComplete, + data, + filteredData, + getResultValue, + onAutoComplete, + valueKey, + setValue, + ] + ); + var listboxRef = useRef(null); + var _h = useActiveDescendantMovement( + __assign(__assign({}, MovementPresets.VERTICAL_COMBOBOX), { + getId: getResultId, + items: filteredData, + baseId: suggestionsId, + onChange: function (_a, itemRefs) { + var index = _a.index, + items = _a.items, + target = _a.target; + // the default scroll into view behavior for aria-activedescendant + // movement won't work here since the "target" element will actually be + // the input element instead of the listbox. So need to implement the + // scroll into view behavior manually from the listbox instead. + var item = itemRefs[index] && itemRefs[index].current; + var listbox = listboxRef.current; + if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) { + scrollIntoView(listbox, item); + } + if (!isInlineAutocomplete) { + return; + } + var nextMatch = getResultValue(items[index], valueKey); + target.value = nextMatch; + target.setSelectionRange(0, nextMatch.length); + setState(function (prevState) { + return __assign(__assign({}, prevState), { + value: nextMatch, + match: nextMatch, + }); + }); + }, + onKeyDown: function (event) { + var input = event.currentTarget; + switch (event.key) { + case 'ArrowDown': + if ( + isListAutocomplete && + event.altKey && + !visible && + filteredData.length + ) { + // don't want the cursor to move if there is text + event.preventDefault(); + event.stopPropagation(); + show(); + setFocusedIndex(-1); + } + break; + case 'ArrowUp': + if (isListAutocomplete && event.altKey && visible) { + // don't want the cursor to move if there is text + event.preventDefault(); + event.stopPropagation(); + hide(); + } + break; + case 'Tab': + event.stopPropagation(); + hide(); + break; + case 'ArrowRight': + if ( + isInlineAutocomplete && + input.selectionStart !== input.selectionEnd + ) { + var index = focusedIndex !== -1 ? focusedIndex : 0; + hide(); + handleAutoComplete(index); + } + break; + case 'Enter': + if (visible && focusedIndex >= 0) { + event.preventDefault(); + event.stopPropagation(); + handleAutoComplete(focusedIndex); + hide(); + } + break; + case 'Escape': + if (visible) { + event.stopPropagation(); + hide(); + } else if (value) { + event.stopPropagation(); + setValue(''); + } + break; + // no default + } + // Comes after handling so that handlers see prevented defaults. + if (onKeyDown) { + onKeyDown(event); + } + }, + }) + ), + activeId = _h.activeId, + itemRefs = _h.itemRefs, + handleKeyDown = _h.onKeyDown, + focusedIndex = _h.focusedIndex, + setFocusedIndex = _h.setFocusedIndex; + useCloseOnOutsideClick({ + enabled: visible, + element: ref.current, + onOutsideClick: hide, + }); + var _j = useFixedPositioning({ + fixedTo: function () { + return ref.current; + }, + anchor: anchor, + onScroll: function (_event, _a) { + var visible = _a.visible; + if (closeOnScroll || !visible) { + hide(); + } + }, + onResize: closeOnResize ? hide : undefined, + width: listboxWidth, + xMargin: xMargin, + yMargin: yMargin, + vwMargin: vwMargin, + vhMargin: vhMargin, + transformOrigin: transformOrigin, + preventOverlap: preventOverlap, + disableSwapping: disableSwapping, + disableVHBounds: disableVHBounds, + }), + style = _j.style, + onEnter = _j.onEnter, + onEntering = _j.onEntering, + onEntered = _j.onEntered, + onExited = _j.onExited, + updateStyle = _j.updateStyle; + useEffect( + function () { + if (!focused.current || autocompleted.current) { + return; + } + if ( + filteredData.length && + !visible && + value.length && + isListAutocomplete + ) { + show(); + } else if (!filteredData.length && visible) { + hide(); + } + // this effect is just for toggling the visibility states as needed if the + // value or filter data list changes + // eslint-disable-next-line react-hooks/exhaustive-deps + }, + [filteredData, value] + ); + useEffect( + function () { + if (!visible) { + setFocusedIndex(-1); + return; + } + updateStyle(); + // only want to trigger on data changes and setFocusedIndex shouldn't change + // anyways + // eslint-disable-next-line react-hooks/exhaustive-deps + }, + [visible, filteredData] + ); + return { + ref: refHandler, + value: value, + match: match, + visible: visible, + activeId: activeId, + itemRefs: itemRefs, + filteredData: filteredData, + fixedStyle: __assign(__assign({}, style), listboxStyle), + transitionHooks: { + onEnter: onEnter, + onEntering: onEntering, + onEntered: onEntered, + onExited: onExited, + }, + listboxRef: listboxRef, + handleBlur: handleBlur, + handleFocus: handleFocus, + handleClick: handleClick, + handleChange: handleChange, + handleKeyDown: handleKeyDown, + handleAutoComplete: handleAutoComplete, + }; +} +//# sourceMappingURL=useAutoComplete.js.map diff --git a/packages/autocomplete/es/useAutoComplete.js.map b/packages/autocomplete/es/useAutoComplete.js.map new file mode 100644 index 0000000000..2da83845c2 --- /dev/null +++ b/packages/autocomplete/es/useAutoComplete.js.map @@ -0,0 +1 @@ +{"version":3,"file":"useAutoComplete.js","sourceRoot":"","sources":["../src/useAutoComplete.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EASL,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAEL,eAAe,EACf,cAAc,EACd,2BAA2B,EAC3B,sBAAsB,EACtB,aAAa,EACb,wBAAwB,EACxB,SAAS,GACV,MAAM,iBAAiB,CAAC;AAOzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA0D5C;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAmCV;;QAlCpB,aAAa,mBAAA,EACb,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EACT,QAAQ,YAAA,EAChB,aAAa,mBAAA,EACb,eAAe,qBAAA,EACf,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,MAAM,YAAA,EACN,OAAO,aAAA,EACP,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,mBAAmB,yBAAA,EACnB,MAAM,YAAA,EACN,OAAO,aAAA,EACP,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,eAAe,qBAAA,EACf,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,eAAe,qBAAA,EACf,aAAa,mBAAA,EACb,aAAa,mBAAA,EACO,sBAAsB,wBAAA,EAC1C,kBAAkB,wBAAA,EAClB,oBAAoB,0BAAA;IAEd,IAAA,KAAoB,aAAa,CAAC,YAAY,CAAC,EAA9C,GAAG,QAAA,EAAE,UAAU,QAA+B,CAAC;IAEtD,IAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACrC,IAAA,KAGF,QAAQ,CAAC;;QACX,IAAM,OAAO,yBACR,aAAa,KAChB,QAAQ,UAAA,EACR,YAAY,EAAE,cAAc,EAC5B,UAAU,EAAE,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,UAAU,mCAAI,oBAAoB,GAC9D,CAAC;QACF,IAAM,KAAK,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,YAAY,CAAC;QACxC,IAAM,YAAY,GAChB,eAAe,IAAI,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEjE,IAAI,KAAK,GAAG,KAAK,CAAC;QAClB,IAAI,oBAAoB,IAAI,YAAY,CAAC,MAAM,EAAE;YAC/C,KAAK,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;SACnD;QAED,OAAO;YACL,KAAK,OAAA;YACL,KAAK,OAAA;YACL,YAAY,cAAA;SACb,CAAC;IACJ,CAAC,CAAC,EAvBA,UAA6D,EAApD,UAAU,WAAA,EAAE,KAAK,WAAA,EAAgB,iBAAiB,kBAAA,EAC3D,QAAQ,QAsBR,CAAC;IACH,IAAM,YAAY,GAAG,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC;IACpE,IAAM,UAAU,GAAG,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,UAAU,mCAAI,oBAAoB,CAAC;IACrE,IAAM,KAAK,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,UAAU,CAAC;IAEtC,IAAM,QAAQ,GAAG,WAAW,CAC1B,UAAC,SAAiB;QAChB,IAAM,WAAW,GACf,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM;YAC/B,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,CAAC,CAAC;QAEjD,IAAI,QAAQ,GAAG,IAAI,CAAC;QACpB,IAAI,SAAS,IAAI,eAAe,EAAE;YAChC,IAAM,OAAO,yBACR,aAAa,KAChB,QAAQ,UAAA,EACR,YAAY,EAAE,cAAc,EAC5B,UAAU,YAAA,GACX,CAAC;YAEF,QAAQ,GAAG,MAAM,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;SAC7C;QAED,IAAI,SAAS,GAAG,SAAS,CAAC;QAC1B,IAAI,oBAAoB,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE;YAC3D,SAAS,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;YAElD,IAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC;YAC1B,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE;gBACzB,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;gBACxB,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;aAC7D;SACF;QAED,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC3E,CAAC,EACD;QACE,GAAG;QACH,IAAI;QACJ,MAAM;QACN,eAAe;QACf,aAAa;QACb,oBAAoB;QACpB,cAAc;QACd,KAAK;QACL,KAAK;QACL,UAAU;QACV,QAAQ;KACT,CACF,CAAC;IAEF,0EAA0E;IAC1E,8EAA8E;IAC9E,wDAAwD;IACxD,IAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,KAA6C;QAC5C,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;QAED,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,CAAC;IAEI,IAAA,KAAwB,SAAS,CAAC,KAAK,CAAC,EAAvC,OAAO,QAAA,EAAE,IAAI,QAAA,EAAE,IAAI,QAAoB,CAAC;IAC/C,IAAM,OAAO,GAAG,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAClD,IAAM,kBAAkB,GAAG,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,OAAO,CAAC;IAE7D,IAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAM,UAAU,GAAG,WAAW,CAC5B,UAAC,KAA4C;QAC3C,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,CAAC,CAAC;SACf;QAED,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;IAC1B,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IACF,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,KAA4C;QAC3C,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;QAED,IAAI,kBAAkB,EAAE;YACtB,OAAO;SACR;QAED,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,IAAI,kBAAkB,IAAI,YAAY,CAAC,MAAM,EAAE;YAC7C,IAAI,EAAE,CAAC;SACR;IACH,CAAC,EACD,CAAC,YAAY,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAE,kBAAkB,CAAC,CACtE,CAAC;IACF,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,KAA4C;QAC3C,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;QAED,yEAAyE;QACzE,sEAAsE;QACtE,wDAAwD;QACxD,qBAAqB;QACrB,IAAI,kBAAkB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YAC1C,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;YACvB,OAAO;SACR;QAED,IAAI,kBAAkB,IAAI,YAAY,CAAC,MAAM,EAAE;YAC7C,IAAI,EAAE,CAAC;SACR;IACH,CAAC,EACD,CAAC,kBAAkB,EAAE,YAAY,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,CAAC,CAC7E,CAAC;IAEF,IAAM,kBAAkB,GAAG,WAAW,CACpC,UAAC,KAAa;QACZ,IAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;QACnC,IAAM,WAAW,GAAG,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACrD,IAAI,cAAc,EAAE;YAClB,cAAc,CAAC;gBACb,KAAK,EAAE,WAAW;gBAClB,KAAK,OAAA;gBACL,MAAM,QAAA;gBACN,SAAS,EAAE,IAAI,CAAC,SAAS,CACvB,UAAC,KAAK,IAAK,OAAA,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,WAAW,EAA/C,CAA+C,CAC3D;gBACD,YAAY,cAAA;aACb,CAAC,CAAC;SACJ;QAED,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;QACjD,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IAC/B,CAAC,EACD;QACE,mBAAmB;QACnB,IAAI;QACJ,YAAY;QACZ,cAAc;QACd,cAAc;QACd,QAAQ;QACR,QAAQ;KACT,CACF,CAAC;IAEF,IAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAC9C,IAAA,KAMF,2BAA2B,uBAK1B,eAAe,CAAC,iBAAiB,KACpC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,aAAa,EACrB,QAAQ,YAAC,EAAwB,EAAE,QAAQ;gBAAhC,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA;YAC7B,kEAAkE;YAClE,uEAAuE;YACvE,qEAAqE;YACrE,+DAA+D;YAC/D,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;YAChD,IAAS,OAAO,GAAK,UAAU,QAAf,CAAgB;YACxC,IAAI,IAAI,IAAI,OAAO,IAAI,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE;gBAClE,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;aAC/B;YAED,IAAI,CAAC,oBAAoB,EAAE;gBACzB,OAAO;aACR;YAED,IAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC;YACzD,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC;YACzB,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;YAC9C,QAAQ,CAAC,UAAC,SAAS,IAAK,OAAA,uBACnB,SAAS,KACZ,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,IAChB,EAJsB,CAItB,CAAC,CAAC;QACN,CAAC,EACD,SAAS,YAAC,KAAK;YACb,IAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC;YAClC,QAAQ,KAAK,CAAC,GAAG,EAAE;gBACjB,KAAK,WAAW;oBACd,IACE,kBAAkB;wBAClB,KAAK,CAAC,MAAM;wBACZ,CAAC,OAAO;wBACR,YAAY,CAAC,MAAM,EACnB;wBACA,iDAAiD;wBACjD,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;wBACxB,IAAI,EAAE,CAAC;wBACP,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;qBACrB;oBACD,MAAM;gBACR,KAAK,SAAS;oBACZ,IAAI,kBAAkB,IAAI,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE;wBACjD,iDAAiD;wBACjD,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;wBACxB,IAAI,EAAE,CAAC;qBACR;oBACD,MAAM;gBACR,KAAK,KAAK;oBACR,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,IAAI,EAAE,CAAC;oBACP,MAAM;gBACR,KAAK,YAAY;oBACf,IACE,oBAAoB;wBACpB,KAAK,CAAC,cAAc,KAAK,KAAK,CAAC,YAAY,EAC3C;wBACA,IAAM,KAAK,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;wBACrD,IAAI,EAAE,CAAC;wBACP,kBAAkB,CAAC,KAAK,CAAC,CAAC;qBAC3B;oBACD,MAAM;gBACR,KAAK,OAAO;oBACV,IAAI,OAAO,IAAI,YAAY,IAAI,CAAC,EAAE;wBAChC,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;wBACxB,kBAAkB,CAAC,YAAY,CAAC,CAAC;wBACjC,IAAI,EAAE,CAAC;qBACR;oBACD,MAAM;gBACR,KAAK,QAAQ;oBACX,IAAI,OAAO,EAAE;wBACX,KAAK,CAAC,eAAe,EAAE,CAAC;wBACxB,IAAI,EAAE,CAAC;qBACR;yBAAM,IAAI,KAAK,EAAE;wBAChB,KAAK,CAAC,eAAe,EAAE,CAAC;wBACxB,QAAQ,CAAC,EAAE,CAAC,CAAC;qBACd;oBACD,MAAM;gBACR,aAAa;aACd;YACD,gEAAgE;YAChE,IAAI,SAAS,EAAE;gBACb,SAAS,CAAC,KAAK,CAAC,CAAC;aAClB;QACH,CAAC,IACD,EArGA,QAAQ,cAAA,EACR,QAAQ,cAAA,EACG,aAAa,eAAA,EACxB,YAAY,kBAAA,EACZ,eAAe,qBAiGf,CAAC;IAEH,sBAAsB,CAAC;QACrB,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,GAAG,CAAC,OAAO;QACpB,cAAc,EAAE,IAAI;KACrB,CAAC,CAAC;IAEG,IAAA,KACJ,mBAAmB,CAAC;QAClB,OAAO,EAAE,cAAM,OAAA,GAAG,CAAC,OAAO,EAAX,CAAW;QAC1B,MAAM,QAAA;QACN,QAAQ,YAAC,MAAM,EAAE,EAAW;gBAAT,OAAO,aAAA;YACxB,IAAI,aAAa,IAAI,CAAC,OAAO,EAAE;gBAC7B,IAAI,EAAE,CAAC;aACR;QACH,CAAC;QACD,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAC1C,KAAK,EAAE,YAAY;QACnB,OAAO,SAAA;QACP,OAAO,SAAA;QACP,QAAQ,UAAA;QACR,QAAQ,UAAA;QACR,eAAe,iBAAA;QACf,cAAc,gBAAA;QACd,eAAe,iBAAA;QACf,eAAe,iBAAA;KAChB,CAAC,EAnBI,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,UAAU,gBAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAmBhE,CAAC;IAEL,SAAS,CAAC;QACR,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,aAAa,CAAC,OAAO,EAAE;YAC7C,OAAO;SACR;QAED,IAAI,YAAY,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,kBAAkB,EAAE;YACzE,IAAI,EAAE,CAAC;SACR;aAAM,IAAI,CAAC,YAAY,CAAC,MAAM,IAAI,OAAO,EAAE;YAC1C,IAAI,EAAE,CAAC;SACR;QAED,0EAA0E;QAC1E,oCAAoC;QACpC,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1B,SAAS,CAAC;QACR,IAAI,CAAC,OAAO,EAAE;YACZ,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;YACpB,OAAO;SACR;QAED,WAAW,EAAE,CAAC;QAEd,4EAA4E;QAC5E,UAAU;QACV,uDAAuD;IACzD,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAE5B,OAAO;QACL,GAAG,EAAE,UAAU;QACf,KAAK,OAAA;QACL,KAAK,OAAA;QACL,OAAO,SAAA;QACP,QAAQ,UAAA;QACR,QAAQ,UAAA;QACR,YAAY,cAAA;QACZ,UAAU,wBAAO,KAAK,GAAK,YAAY,CAAE;QACzC,eAAe,EAAE;YACf,OAAO,SAAA;YACP,UAAU,YAAA;YACV,SAAS,WAAA;YACT,QAAQ,UAAA;SACT;QACD,UAAU,YAAA;QACV,UAAU,YAAA;QACV,WAAW,aAAA;QACX,WAAW,aAAA;QACX,YAAY,cAAA;QACZ,aAAa,eAAA;QACb,kBAAkB,oBAAA;KACnB,CAAC;AACJ,CAAC"} \ No newline at end of file diff --git a/packages/autocomplete/es/utils.js b/packages/autocomplete/es/utils.js new file mode 100644 index 0000000000..7d2c21262a --- /dev/null +++ b/packages/autocomplete/es/utils.js @@ -0,0 +1,116 @@ +import { caseInsensitiveFilter, fuzzyFilter } from '@react-md/utils'; +/** + * Generates an id for each result in the autocomplete's listbox. + * + * @param id - The listbox's id + * @param index - The index of the result in the list + * @returns an id string + */ +export function getResultId(id, index) { + return id + '-result-' + (index + 1); +} +/** + * Gets a renderable label for each result in the autocomplete's listbox. This + * will be applied as the `children` for the `Option` element. + * + * @param datum - The current result datum to get a label for + * @param labelKey - The key to extract a label from if the datum is an object + * @param query - The current search query. This is useful if you want to + * implement text "highlighting" (bold) of all the letters that match in the + * item. + * @returns a renderable node to display + */ +export function getResultLabel(datum, labelKey, _query) { + if (typeof datum === 'string') { + return datum; + } + var label = datum[labelKey]; + return datum.children || (typeof label === 'undefined' ? null : label); +} +/** + * Gets a value string from each result that can be searched. + * + * @param datum - The current result datum that should have a string extracted + * @param valueKey - The key to use to extract a string value from if the datum + * is an object + * @returns a searchable string. + */ +export function getResultValue(datum, valueKey) { + if (typeof datum === 'string') { + return datum; + } + var value = datum[valueKey]; + if ( + process.env.NODE_ENV !== 'production' && + typeof value !== 'string' && + typeof value !== 'number' + ) { + throw new Error('Unable to extract a result value string'); + } + return '' + value; +} +/** + * This is used to disable filtering and just return the data list immediately. + * Useful when the filtering is done somewhere else like a server/API + * @internal + */ +export var noFilter = function (_, data) { + return data; +}; +/** + * Gets the filter function to use within the Autocomplete based on the provided + * filter prop + * + * @internal + */ +export function getFilterFunction(filter) { + if (typeof filter === 'function') { + return filter; + } + switch (filter) { + case 'fuzzy': + return fuzzyFilter; + case 'case-insensitive': + return caseInsensitiveFilter; + case 'none': + return noFilter; + default: + if (process.env.NODE_ENV !== 'production') { + throw new Error( + 'Invalid filter function: "' + + filter + + '". Supported values are: "fuzzy", "case-insenitive", "none", or a custom function.' + ); + } + return noFilter; + } +} +/** + * This is an extremely simple type guard that is useful when using the + * `onAutoComplete` handler since I'm terrible at typescript types. This will + * ensure that if the result is an object, it will match the provided data type + * of your data list. + * + * Example: + * + * ```ts + * interface Example { + * name: string; + * value: string; + * } + * + * + * const [example, setExample] = useState(null); + * const onAutoComplete = useCallback((_name, example) => { + * if (isResultOf(example)) { + * setExample(example); + * } + * }, []) + * ``` + * + * @param datum - The result data to type guard against. + */ +export function isResultOf(datum) { + return !!datum && typeof datum === 'object'; +} +//# sourceMappingURL=utils.js.map diff --git a/packages/autocomplete/es/utils.js.map b/packages/autocomplete/es/utils.js.map new file mode 100644 index 0000000000..719b813816 --- /dev/null +++ b/packages/autocomplete/es/utils.js.map @@ -0,0 +1 @@ +{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAQrE;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,EAAU,EAAE,KAAa;IACnD,OAAU,EAAE,iBAAW,KAAK,GAAG,CAAC,CAAE,CAAC;AACrC,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAiC,EACjC,QAAgB,EAChB,MAAc;IAEd,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC;KACd;IAED,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9B,OAAO,KAAK,CAAC,QAAQ,IAAI,CAAC,OAAO,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AACzE,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAiC,EACjC,QAAgB;IAEhB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC;KACd;IAED,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9B,IACE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;QACrC,OAAO,KAAK,KAAK,QAAQ;QACzB,OAAO,KAAK,KAAK,QAAQ,EACzB;QACA,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;KAC5D;IAED,OAAO,KAAG,KAAO,CAAC;AACpB,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAmB,UAAC,CAAC,EAAE,IAAI,IAAK,OAAA,IAAI,EAAJ,CAAI,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAC/B,MAAqC;IAErC,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE;QAChC,OAAO,MAAM,CAAC;KACf;IAED,QAAQ,MAAM,EAAE;QACd,KAAK,OAAO;YACV,OAAO,WAAW,CAAC;QACrB,KAAK,kBAAkB;YACrB,OAAO,qBAAqB,CAAC;QAC/B,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC;QAClB;YACE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;gBACzC,MAAM,IAAI,KAAK,CACb,gCAA6B,MAAM,8FAAoF,CACxH,CAAC;aACH;YAED,OAAO,QAAQ,CAAC;KACnB;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,UAAU,CACxB,KAAiC;IAEjC,OAAO,CAAC,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;AAC9C,CAAC"} \ No newline at end of file diff --git a/packages/autocomplete/lib/AutoComplete.d.ts b/packages/autocomplete/lib/AutoComplete.d.ts new file mode 100644 index 0000000000..4b46c3725a --- /dev/null +++ b/packages/autocomplete/lib/AutoComplete.d.ts @@ -0,0 +1,7 @@ +import React from "react"; +import { AutoCompleteProps } from "./types"; +/** + * An AutoComplete is an accessible combobox widget that allows for real-time + * suggestions as the user types. + */ +export declare const AutoComplete: React.ForwardRefExoticComponent>; diff --git a/packages/autocomplete/lib/AutoComplete.js b/packages/autocomplete/lib/AutoComplete.js new file mode 100644 index 0000000000..fb04395bd8 --- /dev/null +++ b/packages/autocomplete/lib/AutoComplete.js @@ -0,0 +1,470 @@ +'use strict'; +var __assign = + (this && this.__assign) || + function () { + __assign = + Object.assign || + function (t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) + if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); + }; +var __createBinding = + (this && this.__createBinding) || + (Object.create + ? function (o, m, k, k2) { + if (k2 === undefined) k2 = k; + Object.defineProperty(o, k2, { + enumerable: true, + get: function () { + return m[k]; + }, + }); + } + : function (o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; + }); +var __setModuleDefault = + (this && this.__setModuleDefault) || + (Object.create + ? function (o, v) { + Object.defineProperty(o, 'default', { enumerable: true, value: v }); + } + : function (o, v) { + o['default'] = v; + }); +var __importStar = + (this && this.__importStar) || + function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) + for (var k in mod) + if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k)) + __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; + }; +var __rest = + (this && this.__rest) || + function (s, e) { + var t = {}; + for (var p in s) + if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === 'function') + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if ( + e.indexOf(p[i]) < 0 && + Object.prototype.propertyIsEnumerable.call(s, p[i]) + ) + t[p[i]] = s[p[i]]; + } + return t; + }; +var __spreadArray = + (this && this.__spreadArray) || + function (to, from) { + for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) + to[j] = from[i]; + return to; + }; +var __importDefault = + (this && this.__importDefault) || + function (mod) { + return mod && mod.__esModule ? mod : { default: mod }; + }; +Object.defineProperty(exports, '__esModule', { value: true }); +exports.AutoComplete = void 0; +var react_1 = __importStar(require('react')); +var classnames_1 = __importDefault(require('classnames')); +var form_1 = require('@react-md/form'); +var list_1 = require('@react-md/list'); +var transition_1 = require('@react-md/transition'); +var utils_1 = require('@react-md/utils'); +var HighlightedResult_1 = require('./HighlightedResult'); +var useAutoComplete_1 = require('./useAutoComplete'); +var utils_2 = require('./utils'); +var block = utils_1.bem('rmd-autocomplate'); +var listbox = utils_1.bem('rmd-listbox'); +var DEFAULT_FILTER_OPTIONS = { + trim: true, + ignoreWhitespace: true, +}; +var EMPTY_LIST = []; +/** + * An AutoComplete is an accessible combobox widget that allows for real-time + * suggestions as the user types. + */ +exports.AutoComplete = react_1.forwardRef(function AutoComplete( + _a, + forwardedRef +) { + var _b = _a.autoComplete, + autoComplete = _b === void 0 ? 'list' : _b, + data = _a.data, + _c = _a.filter, + filter = _c === void 0 ? 'case-insensitive' : _c, + _d = _a.filterOptions, + filterOptions = _d === void 0 ? DEFAULT_FILTER_OPTIONS : _d, + _e = _a.filterOnNoValue, + filterOnNoValue = _e === void 0 ? false : _e, + className = _a.className, + onBlur = _a.onBlur, + onFocus = _a.onFocus, + onClick = _a.onClick, + onKeyDown = _a.onKeyDown, + onChange = _a.onChange, + containerProps = _a.containerProps, + _f = _a.portal, + portal = _f === void 0 ? false : _f, + portalInto = _a.portalInto, + portalIntoId = _a.portalIntoId, + listboxStyle = _a.listboxStyle, + listboxClassName = _a.listboxClassName, + onAutoComplete = _a.onAutoComplete, + _g = _a.clearOnAutoComplete, + clearOnAutoComplete = _g === void 0 ? false : _g, + _h = _a.labelKey, + labelKey = _h === void 0 ? 'label' : _h, + _j = _a.valueKey, + valueKey = _j === void 0 ? 'value' : _j, + _k = _a.getResultId, + getResultId = _k === void 0 ? utils_2.getResultId : _k, + _l = _a.getResultLabel, + getResultLabel = _l === void 0 ? utils_2.getResultLabel : _l, + _m = _a.getResultValue, + getResultValue = _m === void 0 ? utils_2.getResultValue : _m, + _o = _a.highlight, + highlight = _o === void 0 ? false : _o, + _p = _a.highlightReapeating, + highlightReapeating = _p === void 0 ? false : _p, + highlightStyle = _a.highlightStyle, + highlightClassName = _a.highlightClassName, + _q = _a.anchor, + anchor = _q === void 0 ? utils_1.BELOW_CENTER_ANCHOR : _q, + _r = _a.listboxWidth, + listboxWidth = _r === void 0 ? 'equal' : _r, + _s = _a.xMargin, + xMargin = _s === void 0 ? 0 : _s, + _t = _a.yMargin, + yMargin = _t === void 0 ? 0 : _t, + _u = _a.vwMargin, + vwMargin = _u === void 0 ? 16 : _u, + _v = _a.vhMargin, + vhMargin = _v === void 0 ? 16 : _v, + _w = _a.transformOrigin, + transformOrigin = _w === void 0 ? true : _w, + _x = _a.preventOverlap, + preventOverlap = _x === void 0 ? true : _x, + _y = _a.disableVHBounds, + disableVHBounds = _y === void 0 ? false : _y, + _z = _a.disableSwapping, + disableSwapping = _z === void 0 ? true : _z, + disableShowOnFocus = _a.disableShowOnFocus, + _0 = _a.closeOnResize, + closeOnResize = _0 === void 0 ? false : _0, + _1 = _a.closeOnScroll, + closeOnScroll = _1 === void 0 ? false : _1, + _2 = _a.omitKeys, + omitKeys = _2 === void 0 ? EMPTY_LIST : _2, + propValue = _a.value, + defaultValue = _a.defaultValue, + beforeResultsChildren = _a.beforeResultsChildren, + afterResultsChildren = _a.afterResultsChildren, + props = __rest(_a, [ + 'autoComplete', + 'data', + 'filter', + 'filterOptions', + 'filterOnNoValue', + 'className', + 'onBlur', + 'onFocus', + 'onClick', + 'onKeyDown', + 'onChange', + 'containerProps', + 'portal', + 'portalInto', + 'portalIntoId', + 'listboxStyle', + 'listboxClassName', + 'onAutoComplete', + 'clearOnAutoComplete', + 'labelKey', + 'valueKey', + 'getResultId', + 'getResultLabel', + 'getResultValue', + 'highlight', + 'highlightReapeating', + 'highlightStyle', + 'highlightClassName', + 'anchor', + 'listboxWidth', + 'xMargin', + 'yMargin', + 'vwMargin', + 'vhMargin', + 'transformOrigin', + 'preventOverlap', + 'disableVHBounds', + 'disableSwapping', + 'disableShowOnFocus', + 'closeOnResize', + 'closeOnScroll', + 'omitKeys', + 'value', + 'defaultValue', + 'beforeResultsChildren', + 'afterResultsChildren', + ]); + var id = props.id; + var comboboxId = id + '-combobox'; + var suggestionsId = id + '-listbox'; + var isListAutocomplete = autoComplete === 'list' || autoComplete === 'both'; + var isInlineAutocomplete = + autoComplete === 'inline' || autoComplete === 'both'; + var _3 = useAutoComplete_1.useAutoComplete({ + suggestionsId: suggestionsId, + defaultValue: defaultValue, + data: data, + filter: filter, + filterOptions: filterOptions, + filterOnNoValue: filterOnNoValue, + valueKey: valueKey, + getResultId: getResultId, + getResultValue: getResultValue, + onBlur: onBlur, + onFocus: onFocus, + onClick: onClick, + onChange: onChange, + onKeyDown: onKeyDown, + forwardedRef: forwardedRef, + onAutoComplete: onAutoComplete, + clearOnAutoComplete: clearOnAutoComplete, + isListAutocomplete: isListAutocomplete, + isInlineAutocomplete: isInlineAutocomplete, + anchor: anchor, + xMargin: xMargin, + yMargin: yMargin, + vwMargin: vwMargin, + vhMargin: vhMargin, + transformOrigin: transformOrigin, + listboxWidth: listboxWidth, + listboxStyle: listboxStyle, + preventOverlap: preventOverlap, + disableSwapping: disableSwapping, + disableVHBounds: disableVHBounds, + closeOnResize: closeOnResize, + closeOnScroll: closeOnScroll, + disableShowOnFocus: disableShowOnFocus, + }), + ref = _3.ref, + match = _3.match, + value = _3.value, + visible = _3.visible, + activeId = _3.activeId, + itemRefs = _3.itemRefs, + filteredData = _3.filteredData, + listboxRef = _3.listboxRef, + fixedStyle = _3.fixedStyle, + transitionHooks = _3.transitionHooks, + handleBlur = _3.handleBlur, + handleFocus = _3.handleFocus, + handleClick = _3.handleClick, + handleChange = _3.handleChange, + handleKeyDown = _3.handleKeyDown, + handleAutoComplete = _3.handleAutoComplete; + return react_1.default.createElement( + react_1.default.Fragment, + null, + react_1.default.createElement( + form_1.TextAreaWithMessage, + __assign({}, props, { + 'aria-autocomplete': autoComplete, + 'aria-controls': comboboxId, + 'aria-activedescendant': activeId, + autoComplete: 'off', + value: propValue !== null && propValue !== void 0 ? propValue : match, + onBlur: handleBlur, + onFocus: handleFocus, + onClick: handleClick, + onKeyDown: handleKeyDown, + onChange: handleChange, + ref: ref, + className: classnames_1.default(block(), className), + containerProps: __assign(__assign({}, containerProps), { + 'aria-haspopup': 'listbox', + 'aria-owns': suggestionsId, + 'aria-expanded': visible, + id: comboboxId, + role: 'combobox', + }), + }) + ), + react_1.default.createElement( + transition_1.ScaleTransition, + __assign( + { + portal: portal, + portalInto: portalInto, + portalIntoId: portalIntoId, + vertical: true, + visible: visible, + }, + transitionHooks + ), + react_1.default.createElement( + list_1.List, + { + id: suggestionsId, + role: 'listbox', + ref: listboxRef, + style: fixedStyle, + className: classnames_1.default( + listbox({ temporary: true }), + listboxClassName + ), + }, + beforeResultsChildren, + filteredData.map(function (datum, i) { + var resultId = getResultId(suggestionsId, i); + var optionProps; + if (form_1.isListboxOptionProps(datum)) { + optionProps = utils_1.omit( + datum, + __spreadArray([labelKey, valueKey], omitKeys) + ); + } + return react_1.default.createElement( + form_1.Option, + __assign({ key: resultId }, optionProps, { + id: resultId, + selected: false, + focused: resultId === activeId, + ref: itemRefs[i], + onClick: function () { + return handleAutoComplete(i); + }, + }), + react_1.default.createElement( + HighlightedResult_1.HighlightedResult, + { + id: resultId + '-match', + style: highlightStyle, + className: highlightClassName, + value: + propValue !== null && propValue !== void 0 + ? propValue + : value, + enabled: highlight, + repeatable: highlightReapeating, + }, + getResultLabel(datum, labelKey, value) + ) + ); + }), + afterResultsChildren + ) + ) + ); +}); +/* istanbul ignore next */ +if (process.env.NODE_ENV !== 'production') { + try { + var PropTypes = require('prop-types'); + exports.AutoComplete.propTypes = { + id: PropTypes.string.isRequired, + data: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.object]) + ).isRequired, + filter: PropTypes.oneOfType([ + PropTypes.oneOf(['none', 'fuzzy', 'case-insensitive']), + PropTypes.func, + ]), + filterOptions: PropTypes.object, + filterOnNoValue: PropTypes.bool, + labelKey: PropTypes.string, + valueKey: PropTypes.string, + getResultId: PropTypes.func, + getResultLabel: PropTypes.func, + getResultValue: PropTypes.func, + highlight: PropTypes.bool, + autoComplete: PropTypes.oneOf(['none', 'inline', 'list', 'both']), + onAutoComplete: PropTypes.func, + clearOnAutoComplete: PropTypes.bool, + portal: PropTypes.bool, + portalInto: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string, + PropTypes.object, + ]), + portalIntoId: PropTypes.string, + anchor: PropTypes.shape({ + x: PropTypes.oneOf([ + 'inner-left', + 'inner-right', + 'center', + 'left', + 'right', + ]), + y: PropTypes.oneOf(['above', 'below', 'center', 'top', 'bottom']), + }), + listboxWidth: PropTypes.oneOf(['auto', 'equal', 'min']), + vwMargin: PropTypes.number, + vhMargin: PropTypes.number, + xMargin: PropTypes.number, + yMargin: PropTypes.number, + transformOrigin: PropTypes.bool, + preventOverlap: PropTypes.bool, + disableSwapping: PropTypes.bool, + disableVHBounds: PropTypes.bool, + closeOnResize: PropTypes.bool, + closeOnScroll: PropTypes.bool, + style: PropTypes.object, + className: PropTypes.string, + areaStyle: PropTypes.object, + areaClassName: PropTypes.string, + labelStyle: PropTypes.object, + labelClassName: PropTypes.string, + label: PropTypes.node, + theme: PropTypes.oneOf(['none', 'underline', 'filled', 'outline']), + dense: PropTypes.bool, + error: PropTypes.bool, + inline: PropTypes.bool, + disabled: PropTypes.bool, + placeholder: PropTypes.string, + underlineDirection: PropTypes.oneOf(['left', 'center', 'right']), + leftChildren: PropTypes.node, + rightChildren: PropTypes.node, + isLeftAddon: PropTypes.bool, + isRightAddon: PropTypes.bool, + onBlur: PropTypes.func, + onFocus: PropTypes.func, + onClick: PropTypes.func, + onKeyDown: PropTypes.func, + onChange: PropTypes.func, + containerProps: PropTypes.object, + listboxStyle: PropTypes.object, + listboxClassName: PropTypes.string, + highlightReapeating: PropTypes.bool, + highlightStyle: PropTypes.object, + highlightClassName: PropTypes.string, + disableShowOnFocus: PropTypes.bool, + omitKeys: PropTypes.arrayOf(PropTypes.string), + value: PropTypes.string, + defaultValue: PropTypes.string, + beforeResultsChildren: PropTypes.node, + afterResultsChildren: PropTypes.node, + }; + } catch (e) {} +} +//# sourceMappingURL=AutoComplete.js.map diff --git a/packages/autocomplete/lib/AutoComplete.js.map b/packages/autocomplete/lib/AutoComplete.js.map new file mode 100644 index 0000000000..8e5c4fbb50 --- /dev/null +++ b/packages/autocomplete/lib/AutoComplete.js.map @@ -0,0 +1 @@ +{"version":3,"file":"AutoComplete.js","sourceRoot":"","sources":["../src/AutoComplete.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/packages/autocomplete/lib/HighlightedResult.d.ts b/packages/autocomplete/lib/HighlightedResult.d.ts new file mode 100644 index 0000000000..79a3309ed6 --- /dev/null +++ b/packages/autocomplete/lib/HighlightedResult.d.ts @@ -0,0 +1,57 @@ +import { CSSProperties, ReactElement, ReactNode } from "react"; +export interface HighlightedResultProps { + /** + * An optional id to use for the ``. This will be suffixed by the + * current `index` if it was provided + */ + id?: string; + /** + * An optional style to provide to the ``. + */ + style?: CSSProperties; + /** + * An optional className to provide to the ``. + */ + className?: string; + /** + * The match index which is automatically added when the `repeatable` prop is + * used for nested matches. + */ + index?: number; + /** + * The current value to match against. + */ + value: string; + /** + * Boolean if the highlighting functionality should be enabled. Setting this + * to false will just return the `children` instead. + */ + enabled?: boolean; + /** + * Boolean if the highlighting can be repeated multiple times within the + * children string. + */ + repeatable?: boolean; + /** + * The children to highlight. If this is not a string, the highlight will not + * work. + */ + children: ReactNode; +} +/** + * The `HighlightedResult` component can be used to bold specific letters + * within the `children` if the `children` is a string. + */ +export declare function HighlightedResult({ id: propId, style, className, enabled, value, children, repeatable, index, }: HighlightedResultProps): ReactElement; +export declare namespace HighlightedResult { + var propTypes: { + id: any; + index: any; + value: any; + style: any; + className: any; + children: any; + enabled: any; + repeatable: any; + }; +} diff --git a/packages/autocomplete/lib/HighlightedResult.js b/packages/autocomplete/lib/HighlightedResult.js new file mode 100644 index 0000000000..648921fac3 --- /dev/null +++ b/packages/autocomplete/lib/HighlightedResult.js @@ -0,0 +1,92 @@ +'use strict'; +var __importDefault = + (this && this.__importDefault) || + function (mod) { + return mod && mod.__esModule ? mod : { default: mod }; + }; +Object.defineProperty(exports, '__esModule', { value: true }); +exports.HighlightedResult = void 0; +var react_1 = __importDefault(require('react')); +var classnames_1 = __importDefault(require('classnames')); +/** + * The `HighlightedResult` component can be used to bold specific letters + * within the `children` if the `children` is a string. + */ +function HighlightedResult(_a) { + var propId = _a.id, + style = _a.style, + className = _a.className, + _b = _a.enabled, + enabled = _b === void 0 ? true : _b, + value = _a.value, + children = _a.children, + _c = _a.repeatable, + repeatable = _c === void 0 ? false : _c, + _d = _a.index, + index = _d === void 0 ? 0 : _d; + if (!enabled || !value || typeof children !== 'string') { + return react_1.default.createElement( + react_1.default.Fragment, + null, + children + ); + } + var i = children.toLowerCase().indexOf(value.toLowerCase()); + if (i === -1) { + return react_1.default.createElement( + react_1.default.Fragment, + null, + children + ); + } + var end = i + value.length; + var id = propId; + if (id && index > 0) { + id = id + '-' + index; + } + return react_1.default.createElement( + react_1.default.Fragment, + null, + i > 0 && children.substring(0, i), + react_1.default.createElement( + 'span', + { + id: id, + style: style, + className: classnames_1.default('rmd-typography--bold', className), + }, + children.substring(i, end) + ), + end < children.length && + react_1.default.createElement( + HighlightedResult, + { + style: style, + className: className, + value: value, + enabled: enabled && repeatable, + repeatable: repeatable, + index: index + 1, + }, + children.substring(end) + ) + ); +} +exports.HighlightedResult = HighlightedResult; +/* istanbul ignore next */ +if (process.env.NODE_ENV !== 'production') { + try { + var PropTypes = require('prop-types'); + HighlightedResult.propTypes = { + id: PropTypes.string, + index: PropTypes.number, + value: PropTypes.string.isRequired, + style: PropTypes.object, + className: PropTypes.string, + children: PropTypes.node, + enabled: PropTypes.bool, + repeatable: PropTypes.bool, + }; + } catch (e) {} +} +//# sourceMappingURL=HighlightedResult.js.map diff --git a/packages/autocomplete/lib/HighlightedResult.js.map b/packages/autocomplete/lib/HighlightedResult.js.map new file mode 100644 index 0000000000..6b992bb5b6 --- /dev/null +++ b/packages/autocomplete/lib/HighlightedResult.js.map @@ -0,0 +1 @@ +{"version":3,"file":"HighlightedResult.js","sourceRoot":"","sources":["../src/HighlightedResult.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAsE;AACtE,0DAA4B;AAiD5B;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAST;QARnB,MAAM,QAAA,EACV,KAAK,WAAA,EACL,SAAS,eAAA,EACT,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA;IAET,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QACtD,OAAO,8DAAG,QAAQ,CAAI,CAAC;KACxB;IAED,IAAM,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9D,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;QACZ,OAAO,8DAAG,QAAQ,CAAI,CAAC;KACxB;IAED,IAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAC7B,IAAI,EAAE,GAAG,MAAM,CAAC;IAChB,IAAI,EAAE,IAAI,KAAK,GAAG,CAAC,EAAE;QACnB,EAAE,GAAM,EAAE,SAAI,KAAO,CAAC;KACvB;IAED,OAAO,CACL;QACG,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;QAClC,wCACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,oBAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAE/C,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,CACtB;QACN,GAAG,GAAG,QAAQ,CAAC,MAAM,IAAI,CACxB,8BAAC,iBAAiB,IAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,IAAI,UAAU,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,GAAG,CAAC,IAEf,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CACN,CACrB,CACA,CACJ,CAAC;AACJ,CAAC;AAjDD,8CAiDC;AAED,0BAA0B;AAC1B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAI;QACF,IAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;QAExC,iBAAiB,CAAC,SAAS,GAAG;YAC5B,EAAE,EAAE,SAAS,CAAC,MAAM;YACpB,KAAK,EAAE,SAAS,CAAC,MAAM;YACvB,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;YAClC,KAAK,EAAE,SAAS,CAAC,MAAM;YACvB,SAAS,EAAE,SAAS,CAAC,MAAM;YAC3B,QAAQ,EAAE,SAAS,CAAC,IAAI;YACxB,OAAO,EAAE,SAAS,CAAC,IAAI;YACvB,UAAU,EAAE,SAAS,CAAC,IAAI;SAC3B,CAAC;KACH;IAAC,OAAO,CAAC,EAAE,GAAE;CACf"} \ No newline at end of file diff --git a/packages/autocomplete/lib/index.d.ts b/packages/autocomplete/lib/index.d.ts new file mode 100644 index 0000000000..c664ca3a5d --- /dev/null +++ b/packages/autocomplete/lib/index.d.ts @@ -0,0 +1,8 @@ +/** + * @module @react-md/autocomplete + */ +export * from "./AutoComplete"; +export * from "./HighlightedResult"; +export * from "./useAutoComplete"; +export { isResultOf, getResultId as DEFAULT_GET_RESULT_ID, getResultLabel as DEFAULT_GET_RESULT_LABEL, getResultValue as DEFAULT_GET_RESULT_VALUE, } from "./utils"; +export * from "./types"; diff --git a/packages/autocomplete/lib/index.js b/packages/autocomplete/lib/index.js new file mode 100644 index 0000000000..3fb11da32d --- /dev/null +++ b/packages/autocomplete/lib/index.js @@ -0,0 +1,63 @@ +'use strict'; +var __createBinding = + (this && this.__createBinding) || + (Object.create + ? function (o, m, k, k2) { + if (k2 === undefined) k2 = k; + Object.defineProperty(o, k2, { + enumerable: true, + get: function () { + return m[k]; + }, + }); + } + : function (o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; + }); +var __exportStar = + (this && this.__exportStar) || + function (m, exports) { + for (var p in m) + if (p !== 'default' && !Object.prototype.hasOwnProperty.call(exports, p)) + __createBinding(exports, m, p); + }; +Object.defineProperty(exports, '__esModule', { value: true }); +exports.DEFAULT_GET_RESULT_VALUE = + exports.DEFAULT_GET_RESULT_LABEL = + exports.DEFAULT_GET_RESULT_ID = + exports.isResultOf = + void 0; +/** + * @module @react-md/autocomplete + */ +__exportStar(require('./AutoComplete'), exports); +__exportStar(require('./HighlightedResult'), exports); +__exportStar(require('./useAutoComplete'), exports); +var utils_1 = require('./utils'); +Object.defineProperty(exports, 'isResultOf', { + enumerable: true, + get: function () { + return utils_1.isResultOf; + }, +}); +Object.defineProperty(exports, 'DEFAULT_GET_RESULT_ID', { + enumerable: true, + get: function () { + return utils_1.getResultId; + }, +}); +Object.defineProperty(exports, 'DEFAULT_GET_RESULT_LABEL', { + enumerable: true, + get: function () { + return utils_1.getResultLabel; + }, +}); +Object.defineProperty(exports, 'DEFAULT_GET_RESULT_VALUE', { + enumerable: true, + get: function () { + return utils_1.getResultValue; + }, +}); +__exportStar(require('./types'), exports); +//# sourceMappingURL=index.js.map diff --git a/packages/autocomplete/lib/index.js.map b/packages/autocomplete/lib/index.js.map new file mode 100644 index 0000000000..b037c2037d --- /dev/null +++ b/packages/autocomplete/lib/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;GAEG;AACH,iDAA+B;AAC/B,sDAAoC;AACpC,oDAAkC;AAElC,iCAKiB;AAJf,mGAAA,UAAU,OAAA;AACV,8GAAA,WAAW,OAAyB;AACpC,iHAAA,cAAc,OAA4B;AAC1C,iHAAA,cAAc,OAA4B;AAE5C,0CAAwB"} \ No newline at end of file diff --git a/packages/autocomplete/lib/types.d.ts b/packages/autocomplete/lib/types.d.ts new file mode 100644 index 0000000000..9324382a8c --- /dev/null +++ b/packages/autocomplete/lib/types.d.ts @@ -0,0 +1,257 @@ +import { CSSProperties, ReactNode } from "react"; +import { ListboxOptionProps, TextAreaWithMessageProps } from "@react-md/form"; +import { RenderConditionalPortalProps } from "@react-md/portal"; +import { OptionalFixedPositionOptions } from "@react-md/transition"; +import { CaseInsensitiveOptions, PositionWidth } from "@react-md/utils"; +/** + * The supported autocompletion types. + * + * - "none" - The autocomplete will not filter any results and will just show a + * dropdown list of suggestions instead. + * - "inline" - The first match will appear inline as the user types by using a + * selection range to highlight the remaining match characters. + * - "list" - The autocomplete will filter the results and show a dropdown list + * of matches based on the current text field's value. + * - "both" - A combination of both the `"inline"` and `"list"` autocomplete + * behaviors + * + * Note: "inline" versions still aren't actually supported... + */ +export declare type AutoCompletion = "none" | "inline" | "list" | "both"; +/** + * The supported data that can be filtered and autocompleted. When the data is + * an object, the searchable value and display label can be extracted with the + * provided getter functions and `labelKey`/`valueKey` props. + */ +export declare type AutoCompleteData = string | ListboxOptionProps; +/** + * The autocomplete supports a fuzzy filter and a case insensitive filter + * function out of the box. If you don't want any filtering to happen because + * the filtering is done through an API call or somewhere else, you can use the + * `"none"` value instead. + */ +export declare type PreconfiguredFilterFunction = "fuzzy" | "case-insensitive" | "none"; +/** + * The filter options provided to the filter function. + */ +export declare type FilterFunctionOptions = O & CaseInsensitiveOptions; +/** + * The autocomplete works with a filter function that takes in the current + * search query, the list of data, and search options to return a new filtered + * list. If the default fuzzy filter and case insensitive filters don't match + * your use cases, you can also provide your own function that matches this api + * instead. + */ +export declare type FilterFunction = (query: string, data: readonly AutoCompleteData[], options: FilterFunctionOptions) => readonly AutoCompleteData[]; +/** + * Either a preconfigured/provided filter function of the autocomplete or a + * custom function to use. + */ +export declare type AutoCompleteFilterFunction = PreconfiguredFilterFunction | FilterFunction; +/** + * The shape of the autocomplete result. + */ +export interface AutoCompleteResult { + /** + * The stringified value of the autocomplete data by using `getResultValue` on + * the `result`. This is really just used for the default behavior of + * autocompleting the text field's value to this value. + */ + readonly value: string; + /** + * The index of the result in the **filtered data list**. + */ + readonly index: number; + /** + * The current autocomplete result. + */ + readonly result: Readonly; + /** + * The index of the result in the **original data list**. + */ + readonly dataIndex: number; + /** + * The list of data that has been filtered based on the current value. + */ + readonly filteredData: readonly AutoCompleteData[]; +} +/** + * The function to call whenever the value is auto completed by: + * - clicking an item with the mouse or touch + * - keyboard focusing a result and pressing enter + */ +export declare type AutoCompleteHandler = (result: AutoCompleteResult) => void; +export interface AutoCompleteListboxPositionOptions extends Omit { + /** + * The sizing behavior for the listbox. It will default to have the same width + * as the select button, but it is also possible to either have the + * `min-width` be the width of the select button or just automatically + * determine the width. + * + * The sizing behavior will always ensure that the left and right bounds of + * the listbox appear within the viewport. + */ + listboxWidth?: PositionWidth; + /** + * An optional style to also apply to the listbox element showing all the + * matches. + */ + listboxStyle?: CSSProperties; + /** + * Boolean if the select's listbox should not hide if the user resizes the + * browser while it is visible. + */ + closeOnResize?: boolean; + /** + * Boolean if the select's listbox should not hide if the user scrolls the + * page while it is visible. + */ + closeOnScroll?: boolean; +} +export interface AutoCompleteProps extends Omit, RenderConditionalPortalProps, AutoCompleteListboxPositionOptions { + /** + * The id to use for the AutoComplete and is required for a11y to fulfill the + * `combobox` role. This id will be passed directly to the `` element + * and prefixed for all the other id-required elements. + */ + id: string; + /** + * @see AutoCompletion + */ + autoComplete?: AutoCompletion; + /** + * Boolean if the text field's value should be cleared when the value is + * autocompleted. This is useful when also adding custom `onAutoComplete` + * behavior. + */ + clearOnAutoComplete?: boolean; + /** + * Boolean if the list of suggestions should no longer appear immediately once + * the text field is focused and there is at least one item in the `data` + * list. If this is set to `false`, the menu will only be shown when: + * + * - a letter is added or removed from the text field + * - the user clicks it again + * - using the alt+arrow-down keyboard shortcut + * + * If this prop is omitted, the show on focus behavior will be disabled on + * touch devices since touch device's soft keyboards do a lot of funky things + * with the viewport and scroll behavior. This makes it so the native viewport + * and scroll behavior actions are normally finished before the suggestions + * appear. + */ + disableShowOnFocus?: boolean; + /** + * The list of data that should be autocompleted based on the provided filter. + */ + data: readonly AutoCompleteData[]; + /** + * @see AutoCompleteFilterFunction + */ + filter?: AutoCompleteFilterFunction; + /** + * An optional object of options to provide to the filter function. This will + * be defaulted to work with the fuzzy filter and case-insensitive filter + * functions to trim whitespace before doing the comparisons. + */ + filterOptions?: FilterFunctionOptions; + /** + * Boolean if the filter function should still be called when there is no + * value in the text field. This normally defaults to `false` so that the + * `data` is just returned, but it can be useful with a custom filter function + * that returns different data while there is no value. + */ + filterOnNoValue?: boolean; + /** + * An optional className to also apply to the listbox element showing all the + * matches. + */ + listboxClassName?: string; + /** + * Boolean if the result list labels should be updated so that each matching + * letter is bolded. This only works when the data list is a list of strings, + * or the `label` is a string and when the letters appear in order. This will + * always be `false` if the `filter` prop is set to `"fuzzy"`. + */ + highlight?: boolean; + /** + * Boolean if the highlight functionality should no longer stop after the + * first match and instead highlight all matches of the search string within + * the label for an item. + */ + highlightReapeating?: boolean; + /** + * An optional style to apply to the `` surrounding the matched text + * when the `highlight` prop is enabled. + */ + highlightStyle?: CSSProperties; + /** + * An optional className to apply to the `` surrounding the matched text + * when the `highlight` prop is enabled. + */ + highlightClassName?: string; + /** + * The key to use to extract a label from a result when the provided data list + * is a list of objects. + */ + labelKey?: string; + /** + * The key to use to extract a searchable value string from a result when the + * provided data list is a list of objects. + */ + valueKey?: string; + /** + * A function to call that will generate an id for each result in the + * autocomplete's listbox. These ids are required for a11y as it'll be used + * with the `aria-activedescendant` movement within the autocomplete. + */ + getResultId?(id: string, index: number): string; + /** + * A function to call that will get a renderable label or children to display + * for a result in the autocomplete's list of results. The default behavior + * will be to return the result itself if it is a string, otherwise try to + * return the `children` or `labelKey` attribute if it is an object. + */ + getResultLabel?(data: Readonly, labelKey: string, query: string): ReactNode; + /** + * A function to call that will extract a searchable value string from each + * result. This **must** return a string and will prevent the autocomplete + * from filtering data with the built in filter functions. + */ + getResultValue?(datum: Readonly, valueKey: string): string; + /** + * @see AutoCompleteHandler + */ + onAutoComplete?: AutoCompleteHandler; + /** + * An optional list of keys that should be omitted from your `data` item + * before passing it to the suggestion `Option`. This is useful if you have + * additional metadata in your data objects that should not be passed as DOM + * attributes. + * + * + * ```ts + * const item = { __id: 9432432, name: "Item", value: "guid" } + * + * // don't want to pass `__id` to the Option + * const omitKeys = ["__id"]; + *``` + */ + omitKeys?: readonly string[]; + /** + * Any optional children to display before the matched results in the + * autocomplete's menu. This should normally be for any presentational data or + * things that should not be searchable. + * + * @remarks \@since 2.1.0 + */ + beforeResultsChildren?: ReactNode; + /** + * Any optional children to display after the matched results in the + * autocomplete's menu. This should normally be for any presentational data or + * things that should not be searchable. + * + * @remarks \@since 2.1.0 + */ + afterResultsChildren?: ReactNode; +} diff --git a/packages/autocomplete/lib/types.js b/packages/autocomplete/lib/types.js new file mode 100644 index 0000000000..07d09d39da --- /dev/null +++ b/packages/autocomplete/lib/types.js @@ -0,0 +1,3 @@ +'use strict'; +Object.defineProperty(exports, '__esModule', { value: true }); +//# sourceMappingURL=types.js.map diff --git a/packages/autocomplete/lib/types.js.map b/packages/autocomplete/lib/types.js.map new file mode 100644 index 0000000000..c768b79002 --- /dev/null +++ b/packages/autocomplete/lib/types.js.map @@ -0,0 +1 @@ +{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/packages/autocomplete/lib/useAutoComplete.d.ts b/packages/autocomplete/lib/useAutoComplete.d.ts new file mode 100644 index 0000000000..f9f478add6 --- /dev/null +++ b/packages/autocomplete/lib/useAutoComplete.d.ts @@ -0,0 +1,41 @@ +import { ChangeEventHandler, CSSProperties, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, MutableRefObject, Ref } from "react"; +import { ListElement } from "@react-md/list"; +import { TransitionHooks } from "@react-md/transition"; +import { ItemRefList } from "@react-md/utils"; +import { AutoCompleteData, AutoCompleteListboxPositionOptions, AutoCompleteProps } from "./types"; +declare type EventHandlers = Pick, "onBlur" | "onFocus" | "onChange" | "onClick" | "onKeyDown">; +export declare type RequiredAutoCompleteProps = Required>; +export declare type OptionalAutoCompleteProps = Pick; +export interface AutoCompleteOptions extends EventHandlers, OptionalAutoCompleteProps, RequiredAutoCompleteProps, AutoCompleteListboxPositionOptions { + isListAutocomplete: boolean; + isInlineAutocomplete: boolean; + forwardedRef?: Ref; + suggestionsId: string; + propValue?: string; + defaultValue?: string; +} +export interface AutoCompleteReturnValue { + ref: (instance: HTMLTextAreaElement | null) => void; + match: string; + value: string; + visible: boolean; + activeId: string; + itemRefs: ItemRefList; + filteredData: readonly AutoCompleteData[]; + listboxRef: MutableRefObject; + handleBlur: FocusEventHandler; + handleFocus: FocusEventHandler; + handleClick: MouseEventHandler; + handleChange: ChangeEventHandler; + handleKeyDown: KeyboardEventHandler; + handleAutoComplete: (index: number) => void; + fixedStyle: CSSProperties | undefined; + transitionHooks: Required; +} +/** + * This hook handles all the autocomplete's "logic" and behavior. + * + * @internal + */ +export declare function useAutoComplete({ suggestionsId, data, propValue, defaultValue, filter: filterFn, filterOptions, filterOnNoValue, valueKey, getResultId, getResultValue, onBlur, onFocus, onClick, onChange, onKeyDown, forwardedRef, onAutoComplete, clearOnAutoComplete, anchor, xMargin, yMargin, vwMargin, vhMargin, transformOrigin, listboxWidth, listboxStyle, preventOverlap, disableSwapping, disableVHBounds, closeOnResize, closeOnScroll, disableShowOnFocus: propDisableShowOnFocus, isListAutocomplete, isInlineAutocomplete, }: AutoCompleteOptions): AutoCompleteReturnValue; +export {}; diff --git a/packages/autocomplete/lib/useAutoComplete.js b/packages/autocomplete/lib/useAutoComplete.js new file mode 100644 index 0000000000..d8807f518c --- /dev/null +++ b/packages/autocomplete/lib/useAutoComplete.js @@ -0,0 +1,439 @@ +'use strict'; +var __assign = + (this && this.__assign) || + function () { + __assign = + Object.assign || + function (t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) + if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); + }; +Object.defineProperty(exports, '__esModule', { value: true }); +exports.useAutoComplete = void 0; +var react_1 = require('react'); +var transition_1 = require('@react-md/transition'); +var utils_1 = require('@react-md/utils'); +var utils_2 = require('./utils'); +/** + * This hook handles all the autocomplete's "logic" and behavior. + * + * @internal + */ +function useAutoComplete(_a) { + var _b; + var suggestionsId = _a.suggestionsId, + data = _a.data, + propValue = _a.propValue, + _c = _a.defaultValue, + defaultValue = _c === void 0 ? '' : _c, + filterFn = _a.filter, + filterOptions = _a.filterOptions, + filterOnNoValue = _a.filterOnNoValue, + valueKey = _a.valueKey, + getResultId = _a.getResultId, + getResultValue = _a.getResultValue, + onBlur = _a.onBlur, + onFocus = _a.onFocus, + onClick = _a.onClick, + onChange = _a.onChange, + onKeyDown = _a.onKeyDown, + forwardedRef = _a.forwardedRef, + onAutoComplete = _a.onAutoComplete, + clearOnAutoComplete = _a.clearOnAutoComplete, + anchor = _a.anchor, + xMargin = _a.xMargin, + yMargin = _a.yMargin, + vwMargin = _a.vwMargin, + vhMargin = _a.vhMargin, + transformOrigin = _a.transformOrigin, + listboxWidth = _a.listboxWidth, + listboxStyle = _a.listboxStyle, + preventOverlap = _a.preventOverlap, + disableSwapping = _a.disableSwapping, + disableVHBounds = _a.disableVHBounds, + closeOnResize = _a.closeOnResize, + closeOnScroll = _a.closeOnScroll, + propDisableShowOnFocus = _a.disableShowOnFocus, + isListAutocomplete = _a.isListAutocomplete, + isInlineAutocomplete = _a.isInlineAutocomplete; + var _d = utils_1.useEnsuredRef(forwardedRef), + ref = _d[0], + refHandler = _d[1]; + var filter = utils_2.getFilterFunction(filterFn); + var _e = react_1.useState(function () { + var _a; + var options = __assign(__assign({}, filterOptions), { + valueKey: valueKey, + getItemValue: getResultValue, + startsWith: + (_a = + filterOptions === null || filterOptions === void 0 + ? void 0 + : filterOptions.startsWith) !== null && _a !== void 0 + ? _a + : isInlineAutocomplete, + }); + var value = + propValue !== null && propValue !== void 0 ? propValue : defaultValue; + var filteredData = + filterOnNoValue || value ? filter(value, data, options) : data; + var match = value; + if (isInlineAutocomplete && filteredData.length) { + match = getResultValue(filteredData[0], valueKey); + } + return { + value: value, + match: match, + filteredData: filteredData, + }; + }), + _f = _e[0], + stateValue = _f.value, + match = _f.match, + stateFilteredData = _f.filteredData, + setState = _e[1]; + var filteredData = filterFn === 'none' ? data : stateFilteredData; + var startsWith = + (_b = + filterOptions === null || filterOptions === void 0 + ? void 0 + : filterOptions.startsWith) !== null && _b !== void 0 + ? _b + : isInlineAutocomplete; + var value = + propValue !== null && propValue !== void 0 ? propValue : stateValue; + var setValue = react_1.useCallback( + function (nextValue) { + var isBackspace = + value.length > nextValue.length || + (!!match && value.length === nextValue.length); + var filtered = data; + if (nextValue || filterOnNoValue) { + var options = __assign(__assign({}, filterOptions), { + valueKey: valueKey, + getItemValue: getResultValue, + startsWith: startsWith, + }); + filtered = filter(nextValue, data, options); + } + var nextMatch = nextValue; + if (isInlineAutocomplete && filtered.length && !isBackspace) { + nextMatch = getResultValue(filtered[0], valueKey); + var input = ref.current; + if (input && !isBackspace) { + input.value = nextMatch; + input.setSelectionRange(nextValue.length, nextMatch.length); + } + } + setState({ value: nextValue, match: nextMatch, filteredData: filtered }); + }, + [ + ref, + data, + filter, + filterOnNoValue, + filterOptions, + isInlineAutocomplete, + getResultValue, + value, + match, + startsWith, + valueKey, + ] + ); + // this is really just a hacky way to make sure that once a value has been + // autocompleted, the menu doesn't immediately re-appear due to the hook below + // for showing when the value/ filtered data list change + var autocompleted = react_1.useRef(false); + var handleChange = react_1.useCallback( + function (event) { + if (onChange) { + onChange(event); + } + autocompleted.current = false; + setValue(event.currentTarget.value); + }, + [setValue, onChange] + ); + var _g = utils_1.useToggle(false), + visible = _g[0], + show = _g[1], + hide = _g[2]; + var isTouch = utils_1.useIsUserInteractionMode('touch'); + var disableShowOnFocus = + propDisableShowOnFocus !== null && propDisableShowOnFocus !== void 0 + ? propDisableShowOnFocus + : isTouch; + var focused = react_1.useRef(false); + var handleBlur = react_1.useCallback( + function (event) { + if (onBlur) { + onBlur(event); + } + focused.current = false; + }, + [onBlur] + ); + var handleFocus = react_1.useCallback( + function (event) { + if (onFocus) { + onFocus(event); + } + if (disableShowOnFocus) { + return; + } + focused.current = true; + if (isListAutocomplete && filteredData.length) { + show(); + } + }, + [filteredData, isListAutocomplete, onFocus, show, disableShowOnFocus] + ); + var handleClick = react_1.useCallback( + function (event) { + if (onClick) { + onClick(event); + } + // since click events also trigger focus events right beforehand, want to + // skip the first click handler and require a second click to show it. + // this is why the focused.current isn't set onFocus for + // disableShowOnFocus + if (disableShowOnFocus && !focused.current) { + focused.current = true; + return; + } + if (isListAutocomplete && filteredData.length) { + show(); + } + }, + [disableShowOnFocus, filteredData.length, isListAutocomplete, onClick, show] + ); + var handleAutoComplete = react_1.useCallback( + function (index) { + var result = filteredData[index]; + var resultValue = getResultValue(result, valueKey); + if (onAutoComplete) { + onAutoComplete({ + value: resultValue, + index: index, + result: result, + dataIndex: data.findIndex(function (datum) { + return getResultValue(datum, valueKey) === resultValue; + }), + filteredData: filteredData, + }); + } + setValue(clearOnAutoComplete ? '' : resultValue); + autocompleted.current = true; + }, + [ + clearOnAutoComplete, + data, + filteredData, + getResultValue, + onAutoComplete, + valueKey, + setValue, + ] + ); + var listboxRef = react_1.useRef(null); + var _h = utils_1.useActiveDescendantMovement( + __assign(__assign({}, utils_1.MovementPresets.VERTICAL_COMBOBOX), { + getId: getResultId, + items: filteredData, + baseId: suggestionsId, + onChange: function (_a, itemRefs) { + var index = _a.index, + items = _a.items, + target = _a.target; + // the default scroll into view behavior for aria-activedescendant + // movement won't work here since the "target" element will actually be + // the input element instead of the listbox. So need to implement the + // scroll into view behavior manually from the listbox instead. + var item = itemRefs[index] && itemRefs[index].current; + var listbox = listboxRef.current; + if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) { + utils_1.scrollIntoView(listbox, item); + } + if (!isInlineAutocomplete) { + return; + } + var nextMatch = getResultValue(items[index], valueKey); + target.value = nextMatch; + target.setSelectionRange(0, nextMatch.length); + setState(function (prevState) { + return __assign(__assign({}, prevState), { + value: nextMatch, + match: nextMatch, + }); + }); + }, + onKeyDown: function (event) { + var input = event.currentTarget; + switch (event.key) { + case 'ArrowDown': + if ( + isListAutocomplete && + event.altKey && + !visible && + filteredData.length + ) { + // don't want the cursor to move if there is text + event.preventDefault(); + event.stopPropagation(); + show(); + setFocusedIndex(-1); + } + break; + case 'ArrowUp': + if (isListAutocomplete && event.altKey && visible) { + // don't want the cursor to move if there is text + event.preventDefault(); + event.stopPropagation(); + hide(); + } + break; + case 'Tab': + event.stopPropagation(); + hide(); + break; + case 'ArrowRight': + if ( + isInlineAutocomplete && + input.selectionStart !== input.selectionEnd + ) { + var index = focusedIndex !== -1 ? focusedIndex : 0; + hide(); + handleAutoComplete(index); + } + break; + case 'Enter': + if (visible && focusedIndex >= 0) { + event.preventDefault(); + event.stopPropagation(); + handleAutoComplete(focusedIndex); + hide(); + } + break; + case 'Escape': + if (visible) { + event.stopPropagation(); + hide(); + } else if (value) { + event.stopPropagation(); + setValue(''); + } + break; + // no default + } + // Comes after handling so that handlers see prevented defaults. + if (onKeyDown) { + onKeyDown(event); + } + }, + }) + ), + activeId = _h.activeId, + itemRefs = _h.itemRefs, + handleKeyDown = _h.onKeyDown, + focusedIndex = _h.focusedIndex, + setFocusedIndex = _h.setFocusedIndex; + utils_1.useCloseOnOutsideClick({ + enabled: visible, + element: ref.current, + onOutsideClick: hide, + }); + var _j = transition_1.useFixedPositioning({ + fixedTo: function () { + return ref.current; + }, + anchor: anchor, + onScroll: function (_event, _a) { + var visible = _a.visible; + if (closeOnScroll || !visible) { + hide(); + } + }, + onResize: closeOnResize ? hide : undefined, + width: listboxWidth, + xMargin: xMargin, + yMargin: yMargin, + vwMargin: vwMargin, + vhMargin: vhMargin, + transformOrigin: transformOrigin, + preventOverlap: preventOverlap, + disableSwapping: disableSwapping, + disableVHBounds: disableVHBounds, + }), + style = _j.style, + onEnter = _j.onEnter, + onEntering = _j.onEntering, + onEntered = _j.onEntered, + onExited = _j.onExited, + updateStyle = _j.updateStyle; + react_1.useEffect( + function () { + if (!focused.current || autocompleted.current) { + return; + } + if ( + filteredData.length && + !visible && + value.length && + isListAutocomplete + ) { + show(); + } else if (!filteredData.length && visible) { + hide(); + } + // this effect is just for toggling the visibility states as needed if the + // value or filter data list changes + // eslint-disable-next-line react-hooks/exhaustive-deps + }, + [filteredData, value] + ); + react_1.useEffect( + function () { + if (!visible) { + setFocusedIndex(-1); + return; + } + updateStyle(); + // only want to trigger on data changes and setFocusedIndex shouldn't change + // anyways + // eslint-disable-next-line react-hooks/exhaustive-deps + }, + [visible, filteredData] + ); + return { + ref: refHandler, + value: value, + match: match, + visible: visible, + activeId: activeId, + itemRefs: itemRefs, + filteredData: filteredData, + fixedStyle: __assign(__assign({}, style), listboxStyle), + transitionHooks: { + onEnter: onEnter, + onEntering: onEntering, + onEntered: onEntered, + onExited: onExited, + }, + listboxRef: listboxRef, + handleBlur: handleBlur, + handleFocus: handleFocus, + handleClick: handleClick, + handleChange: handleChange, + handleKeyDown: handleKeyDown, + handleAutoComplete: handleAutoComplete, + }; +} +exports.useAutoComplete = useAutoComplete; +//# sourceMappingURL=useAutoComplete.js.map diff --git a/packages/autocomplete/lib/useAutoComplete.js.map b/packages/autocomplete/lib/useAutoComplete.js.map new file mode 100644 index 0000000000..01e7af4380 --- /dev/null +++ b/packages/autocomplete/lib/useAutoComplete.js.map @@ -0,0 +1 @@ +{"version":3,"file":"useAutoComplete.js","sourceRoot":"","sources":["../src/useAutoComplete.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/packages/autocomplete/lib/utils.d.ts b/packages/autocomplete/lib/utils.d.ts new file mode 100644 index 0000000000..201bf53750 --- /dev/null +++ b/packages/autocomplete/lib/utils.d.ts @@ -0,0 +1,70 @@ +import { ReactNode } from "react"; +import { AutoCompleteData, AutoCompleteFilterFunction, FilterFunction } from "./types"; +/** + * Generates an id for each result in the autocomplete's listbox. + * + * @param id - The listbox's id + * @param index - The index of the result in the list + * @returns an id string + */ +export declare function getResultId(id: string, index: number): string; +/** + * Gets a renderable label for each result in the autocomplete's listbox. This + * will be applied as the `children` for the `Option` element. + * + * @param datum - The current result datum to get a label for + * @param labelKey - The key to extract a label from if the datum is an object + * @param query - The current search query. This is useful if you want to + * implement text "highlighting" (bold) of all the letters that match in the + * item. + * @returns a renderable node to display + */ +export declare function getResultLabel(datum: Readonly, labelKey: string, _query: string): ReactNode; +/** + * Gets a value string from each result that can be searched. + * + * @param datum - The current result datum that should have a string extracted + * @param valueKey - The key to use to extract a string value from if the datum + * is an object + * @returns a searchable string. + */ +export declare function getResultValue(datum: Readonly, valueKey: string): string; +/** + * This is used to disable filtering and just return the data list immediately. + * Useful when the filtering is done somewhere else like a server/API + * @internal + */ +export declare const noFilter: FilterFunction; +/** + * Gets the filter function to use within the Autocomplete based on the provided + * filter prop + * + * @internal + */ +export declare function getFilterFunction(filter: AutoCompleteFilterFunction): FilterFunction; +/** + * This is an extremely simple type guard that is useful when using the + * `onAutoComplete` handler since I'm terrible at typescript types. This will + * ensure that if the result is an object, it will match the provided data type + * of your data list. + * + * Example: + * + * ```ts + * interface Example { + * name: string; + * value: string; + * } + * + * + * const [example, setExample] = useState(null); + * const onAutoComplete = useCallback((_name, example) => { + * if (isResultOf(example)) { + * setExample(example); + * } + * }, []) + * ``` + * + * @param datum - The result data to type guard against. + */ +export declare function isResultOf(datum: Readonly): datum is T; diff --git a/packages/autocomplete/lib/utils.js b/packages/autocomplete/lib/utils.js new file mode 100644 index 0000000000..fb3518cbff --- /dev/null +++ b/packages/autocomplete/lib/utils.js @@ -0,0 +1,131 @@ +'use strict'; +Object.defineProperty(exports, '__esModule', { value: true }); +exports.isResultOf = + exports.getFilterFunction = + exports.noFilter = + exports.getResultValue = + exports.getResultLabel = + exports.getResultId = + void 0; +var utils_1 = require('@react-md/utils'); +/** + * Generates an id for each result in the autocomplete's listbox. + * + * @param id - The listbox's id + * @param index - The index of the result in the list + * @returns an id string + */ +function getResultId(id, index) { + return id + '-result-' + (index + 1); +} +exports.getResultId = getResultId; +/** + * Gets a renderable label for each result in the autocomplete's listbox. This + * will be applied as the `children` for the `Option` element. + * + * @param datum - The current result datum to get a label for + * @param labelKey - The key to extract a label from if the datum is an object + * @param query - The current search query. This is useful if you want to + * implement text "highlighting" (bold) of all the letters that match in the + * item. + * @returns a renderable node to display + */ +function getResultLabel(datum, labelKey, _query) { + if (typeof datum === 'string') { + return datum; + } + var label = datum[labelKey]; + return datum.children || (typeof label === 'undefined' ? null : label); +} +exports.getResultLabel = getResultLabel; +/** + * Gets a value string from each result that can be searched. + * + * @param datum - The current result datum that should have a string extracted + * @param valueKey - The key to use to extract a string value from if the datum + * is an object + * @returns a searchable string. + */ +function getResultValue(datum, valueKey) { + if (typeof datum === 'string') { + return datum; + } + var value = datum[valueKey]; + if ( + process.env.NODE_ENV !== 'production' && + typeof value !== 'string' && + typeof value !== 'number' + ) { + throw new Error('Unable to extract a result value string'); + } + return '' + value; +} +exports.getResultValue = getResultValue; +/** + * This is used to disable filtering and just return the data list immediately. + * Useful when the filtering is done somewhere else like a server/API + * @internal + */ +var noFilter = function (_, data) { + return data; +}; +exports.noFilter = noFilter; +/** + * Gets the filter function to use within the Autocomplete based on the provided + * filter prop + * + * @internal + */ +function getFilterFunction(filter) { + if (typeof filter === 'function') { + return filter; + } + switch (filter) { + case 'fuzzy': + return utils_1.fuzzyFilter; + case 'case-insensitive': + return utils_1.caseInsensitiveFilter; + case 'none': + return exports.noFilter; + default: + if (process.env.NODE_ENV !== 'production') { + throw new Error( + 'Invalid filter function: "' + + filter + + '". Supported values are: "fuzzy", "case-insenitive", "none", or a custom function.' + ); + } + return exports.noFilter; + } +} +exports.getFilterFunction = getFilterFunction; +/** + * This is an extremely simple type guard that is useful when using the + * `onAutoComplete` handler since I'm terrible at typescript types. This will + * ensure that if the result is an object, it will match the provided data type + * of your data list. + * + * Example: + * + * ```ts + * interface Example { + * name: string; + * value: string; + * } + * + * + * const [example, setExample] = useState(null); + * const onAutoComplete = useCallback((_name, example) => { + * if (isResultOf(example)) { + * setExample(example); + * } + * }, []) + * ``` + * + * @param datum - The result data to type guard against. + */ +function isResultOf(datum) { + return !!datum && typeof datum === 'object'; +} +exports.isResultOf = isResultOf; +//# sourceMappingURL=utils.js.map diff --git a/packages/autocomplete/lib/utils.js.map b/packages/autocomplete/lib/utils.js.map new file mode 100644 index 0000000000..0ecb940ec2 --- /dev/null +++ b/packages/autocomplete/lib/utils.js.map @@ -0,0 +1 @@ +{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";;;AACA,yCAAqE;AAQrE;;;;;;GAMG;AACH,SAAgB,WAAW,CAAC,EAAU,EAAE,KAAa;IACnD,OAAU,EAAE,iBAAW,KAAK,GAAG,CAAC,CAAE,CAAC;AACrC,CAAC;AAFD,kCAEC;AAED;;;;;;;;;;GAUG;AACH,SAAgB,cAAc,CAC5B,KAAiC,EACjC,QAAgB,EAChB,MAAc;IAEd,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC;KACd;IAED,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9B,OAAO,KAAK,CAAC,QAAQ,IAAI,CAAC,OAAO,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AACzE,CAAC;AAXD,wCAWC;AAED;;;;;;;GAOG;AACH,SAAgB,cAAc,CAC5B,KAAiC,EACjC,QAAgB;IAEhB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC;KACd;IAED,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9B,IACE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;QACrC,OAAO,KAAK,KAAK,QAAQ;QACzB,OAAO,KAAK,KAAK,QAAQ,EACzB;QACA,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;KAC5D;IAED,OAAO,KAAG,KAAO,CAAC;AACpB,CAAC;AAlBD,wCAkBC;AAED;;;;GAIG;AACI,IAAM,QAAQ,GAAmB,UAAC,CAAC,EAAE,IAAI,IAAK,OAAA,IAAI,EAAJ,CAAI,CAAC;AAA7C,QAAA,QAAQ,YAAqC;AAE1D;;;;;GAKG;AACH,SAAgB,iBAAiB,CAC/B,MAAqC;IAErC,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE;QAChC,OAAO,MAAM,CAAC;KACf;IAED,QAAQ,MAAM,EAAE;QACd,KAAK,OAAO;YACV,OAAO,mBAAW,CAAC;QACrB,KAAK,kBAAkB;YACrB,OAAO,6BAAqB,CAAC;QAC/B,KAAK,MAAM;YACT,OAAO,gBAAQ,CAAC;QAClB;YACE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;gBACzC,MAAM,IAAI,KAAK,CACb,gCAA6B,MAAM,8FAAoF,CACxH,CAAC;aACH;YAED,OAAO,gBAAQ,CAAC;KACnB;AACH,CAAC;AAvBD,8CAuBC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAgB,UAAU,CACxB,KAAiC;IAEjC,OAAO,CAAC,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;AAC9C,CAAC;AAJD,gCAIC"} \ No newline at end of file diff --git a/packages/autocomplete/src/AutoComplete.tsx b/packages/autocomplete/src/AutoComplete.tsx index 7497261695..b5849970ed 100644 --- a/packages/autocomplete/src/AutoComplete.tsx +++ b/packages/autocomplete/src/AutoComplete.tsx @@ -4,7 +4,7 @@ import { isListboxOptionProps, ListboxOptionProps, Option, - TextField, + TextAreaWithMessage, } from "@react-md/form"; import { List } from "@react-md/list"; import { ScaleTransition } from "@react-md/transition"; @@ -33,7 +33,7 @@ const EMPTY_LIST: string[] = []; * An AutoComplete is an accessible combobox widget that allows for real-time * suggestions as the user types. */ -export const AutoComplete = forwardRef( +export const AutoComplete = forwardRef( function AutoComplete( { autoComplete = "list", @@ -149,7 +149,7 @@ export const AutoComplete = forwardRef( return ( <> - , + extends Omit, RenderConditionalPortalProps, AutoCompleteListboxPositionOptions { /** diff --git a/packages/autocomplete/src/useAutoComplete.ts b/packages/autocomplete/src/useAutoComplete.ts index 9951829c80..39b8315104 100644 --- a/packages/autocomplete/src/useAutoComplete.ts +++ b/packages/autocomplete/src/useAutoComplete.ts @@ -33,7 +33,7 @@ import { import { getFilterFunction } from "./utils"; type EventHandlers = Pick< - HTMLAttributes, + HTMLAttributes, "onBlur" | "onFocus" | "onChange" | "onClick" | "onKeyDown" >; @@ -63,14 +63,14 @@ export interface AutoCompleteOptions AutoCompleteListboxPositionOptions { isListAutocomplete: boolean; isInlineAutocomplete: boolean; - forwardedRef?: Ref; + forwardedRef?: Ref; suggestionsId: string; propValue?: string; defaultValue?: string; } export interface AutoCompleteReturnValue { - ref: (instance: HTMLInputElement | null) => void; + ref: (instance: HTMLTextAreaElement | null) => void; match: string; value: string; visible: boolean; @@ -78,11 +78,11 @@ export interface AutoCompleteReturnValue { itemRefs: ItemRefList; filteredData: readonly AutoCompleteData[]; listboxRef: MutableRefObject; - handleBlur: FocusEventHandler; - handleFocus: FocusEventHandler; - handleClick: MouseEventHandler; - handleChange: ChangeEventHandler; - handleKeyDown: KeyboardEventHandler; + handleBlur: FocusEventHandler; + handleFocus: FocusEventHandler; + handleClick: MouseEventHandler; + handleChange: ChangeEventHandler; + handleKeyDown: KeyboardEventHandler; handleAutoComplete: (index: number) => void; fixedStyle: CSSProperties | undefined; transitionHooks: Required; @@ -213,7 +213,7 @@ export function useAutoComplete({ const autocompleted = useRef(false); const handleChange = useCallback( - (event: React.ChangeEvent) => { + (event: React.ChangeEvent) => { if (onChange) { onChange(event); } @@ -230,7 +230,7 @@ export function useAutoComplete({ const focused = useRef(false); const handleBlur = useCallback( - (event: React.FocusEvent) => { + (event: React.FocusEvent) => { if (onBlur) { onBlur(event); } @@ -240,7 +240,7 @@ export function useAutoComplete({ [onBlur] ); const handleFocus = useCallback( - (event: React.FocusEvent) => { + (event: React.FocusEvent) => { if (onFocus) { onFocus(event); } @@ -257,7 +257,7 @@ export function useAutoComplete({ [filteredData, isListAutocomplete, onFocus, show, disableShowOnFocus] ); const handleClick = useCallback( - (event: React.MouseEvent) => { + (event: React.MouseEvent) => { if (onClick) { onClick(event); } @@ -317,7 +317,7 @@ export function useAutoComplete({ setFocusedIndex, } = useActiveDescendantMovement< AutoCompleteData, - HTMLInputElement, + HTMLTextAreaElement, HTMLLIElement >({ ...MovementPresets.VERTICAL_COMBOBOX, @@ -349,10 +349,6 @@ export function useAutoComplete({ })); }, onKeyDown(event) { - if (onKeyDown) { - onKeyDown(event); - } - const input = event.currentTarget; switch (event.key) { case "ArrowDown": @@ -410,6 +406,10 @@ export function useAutoComplete({ break; // no default } + // Comes after handling so that handlers see prevented defaults. + if (onKeyDown) { + onKeyDown(event); + } }, }); diff --git a/packages/autocomplete/types/AutoComplete.d.ts b/packages/autocomplete/types/AutoComplete.d.ts new file mode 100644 index 0000000000..4b46c3725a --- /dev/null +++ b/packages/autocomplete/types/AutoComplete.d.ts @@ -0,0 +1,7 @@ +import React from "react"; +import { AutoCompleteProps } from "./types"; +/** + * An AutoComplete is an accessible combobox widget that allows for real-time + * suggestions as the user types. + */ +export declare const AutoComplete: React.ForwardRefExoticComponent>; diff --git a/packages/autocomplete/types/HighlightedResult.d.ts b/packages/autocomplete/types/HighlightedResult.d.ts new file mode 100644 index 0000000000..79a3309ed6 --- /dev/null +++ b/packages/autocomplete/types/HighlightedResult.d.ts @@ -0,0 +1,57 @@ +import { CSSProperties, ReactElement, ReactNode } from "react"; +export interface HighlightedResultProps { + /** + * An optional id to use for the ``. This will be suffixed by the + * current `index` if it was provided + */ + id?: string; + /** + * An optional style to provide to the ``. + */ + style?: CSSProperties; + /** + * An optional className to provide to the ``. + */ + className?: string; + /** + * The match index which is automatically added when the `repeatable` prop is + * used for nested matches. + */ + index?: number; + /** + * The current value to match against. + */ + value: string; + /** + * Boolean if the highlighting functionality should be enabled. Setting this + * to false will just return the `children` instead. + */ + enabled?: boolean; + /** + * Boolean if the highlighting can be repeated multiple times within the + * children string. + */ + repeatable?: boolean; + /** + * The children to highlight. If this is not a string, the highlight will not + * work. + */ + children: ReactNode; +} +/** + * The `HighlightedResult` component can be used to bold specific letters + * within the `children` if the `children` is a string. + */ +export declare function HighlightedResult({ id: propId, style, className, enabled, value, children, repeatable, index, }: HighlightedResultProps): ReactElement; +export declare namespace HighlightedResult { + var propTypes: { + id: any; + index: any; + value: any; + style: any; + className: any; + children: any; + enabled: any; + repeatable: any; + }; +} diff --git a/packages/autocomplete/types/index.d.ts b/packages/autocomplete/types/index.d.ts new file mode 100644 index 0000000000..c664ca3a5d --- /dev/null +++ b/packages/autocomplete/types/index.d.ts @@ -0,0 +1,8 @@ +/** + * @module @react-md/autocomplete + */ +export * from "./AutoComplete"; +export * from "./HighlightedResult"; +export * from "./useAutoComplete"; +export { isResultOf, getResultId as DEFAULT_GET_RESULT_ID, getResultLabel as DEFAULT_GET_RESULT_LABEL, getResultValue as DEFAULT_GET_RESULT_VALUE, } from "./utils"; +export * from "./types"; diff --git a/packages/autocomplete/types/types.d.ts b/packages/autocomplete/types/types.d.ts new file mode 100644 index 0000000000..9324382a8c --- /dev/null +++ b/packages/autocomplete/types/types.d.ts @@ -0,0 +1,257 @@ +import { CSSProperties, ReactNode } from "react"; +import { ListboxOptionProps, TextAreaWithMessageProps } from "@react-md/form"; +import { RenderConditionalPortalProps } from "@react-md/portal"; +import { OptionalFixedPositionOptions } from "@react-md/transition"; +import { CaseInsensitiveOptions, PositionWidth } from "@react-md/utils"; +/** + * The supported autocompletion types. + * + * - "none" - The autocomplete will not filter any results and will just show a + * dropdown list of suggestions instead. + * - "inline" - The first match will appear inline as the user types by using a + * selection range to highlight the remaining match characters. + * - "list" - The autocomplete will filter the results and show a dropdown list + * of matches based on the current text field's value. + * - "both" - A combination of both the `"inline"` and `"list"` autocomplete + * behaviors + * + * Note: "inline" versions still aren't actually supported... + */ +export declare type AutoCompletion = "none" | "inline" | "list" | "both"; +/** + * The supported data that can be filtered and autocompleted. When the data is + * an object, the searchable value and display label can be extracted with the + * provided getter functions and `labelKey`/`valueKey` props. + */ +export declare type AutoCompleteData = string | ListboxOptionProps; +/** + * The autocomplete supports a fuzzy filter and a case insensitive filter + * function out of the box. If you don't want any filtering to happen because + * the filtering is done through an API call or somewhere else, you can use the + * `"none"` value instead. + */ +export declare type PreconfiguredFilterFunction = "fuzzy" | "case-insensitive" | "none"; +/** + * The filter options provided to the filter function. + */ +export declare type FilterFunctionOptions = O & CaseInsensitiveOptions; +/** + * The autocomplete works with a filter function that takes in the current + * search query, the list of data, and search options to return a new filtered + * list. If the default fuzzy filter and case insensitive filters don't match + * your use cases, you can also provide your own function that matches this api + * instead. + */ +export declare type FilterFunction = (query: string, data: readonly AutoCompleteData[], options: FilterFunctionOptions) => readonly AutoCompleteData[]; +/** + * Either a preconfigured/provided filter function of the autocomplete or a + * custom function to use. + */ +export declare type AutoCompleteFilterFunction = PreconfiguredFilterFunction | FilterFunction; +/** + * The shape of the autocomplete result. + */ +export interface AutoCompleteResult { + /** + * The stringified value of the autocomplete data by using `getResultValue` on + * the `result`. This is really just used for the default behavior of + * autocompleting the text field's value to this value. + */ + readonly value: string; + /** + * The index of the result in the **filtered data list**. + */ + readonly index: number; + /** + * The current autocomplete result. + */ + readonly result: Readonly; + /** + * The index of the result in the **original data list**. + */ + readonly dataIndex: number; + /** + * The list of data that has been filtered based on the current value. + */ + readonly filteredData: readonly AutoCompleteData[]; +} +/** + * The function to call whenever the value is auto completed by: + * - clicking an item with the mouse or touch + * - keyboard focusing a result and pressing enter + */ +export declare type AutoCompleteHandler = (result: AutoCompleteResult) => void; +export interface AutoCompleteListboxPositionOptions extends Omit { + /** + * The sizing behavior for the listbox. It will default to have the same width + * as the select button, but it is also possible to either have the + * `min-width` be the width of the select button or just automatically + * determine the width. + * + * The sizing behavior will always ensure that the left and right bounds of + * the listbox appear within the viewport. + */ + listboxWidth?: PositionWidth; + /** + * An optional style to also apply to the listbox element showing all the + * matches. + */ + listboxStyle?: CSSProperties; + /** + * Boolean if the select's listbox should not hide if the user resizes the + * browser while it is visible. + */ + closeOnResize?: boolean; + /** + * Boolean if the select's listbox should not hide if the user scrolls the + * page while it is visible. + */ + closeOnScroll?: boolean; +} +export interface AutoCompleteProps extends Omit, RenderConditionalPortalProps, AutoCompleteListboxPositionOptions { + /** + * The id to use for the AutoComplete and is required for a11y to fulfill the + * `combobox` role. This id will be passed directly to the `` element + * and prefixed for all the other id-required elements. + */ + id: string; + /** + * @see AutoCompletion + */ + autoComplete?: AutoCompletion; + /** + * Boolean if the text field's value should be cleared when the value is + * autocompleted. This is useful when also adding custom `onAutoComplete` + * behavior. + */ + clearOnAutoComplete?: boolean; + /** + * Boolean if the list of suggestions should no longer appear immediately once + * the text field is focused and there is at least one item in the `data` + * list. If this is set to `false`, the menu will only be shown when: + * + * - a letter is added or removed from the text field + * - the user clicks it again + * - using the alt+arrow-down keyboard shortcut + * + * If this prop is omitted, the show on focus behavior will be disabled on + * touch devices since touch device's soft keyboards do a lot of funky things + * with the viewport and scroll behavior. This makes it so the native viewport + * and scroll behavior actions are normally finished before the suggestions + * appear. + */ + disableShowOnFocus?: boolean; + /** + * The list of data that should be autocompleted based on the provided filter. + */ + data: readonly AutoCompleteData[]; + /** + * @see AutoCompleteFilterFunction + */ + filter?: AutoCompleteFilterFunction; + /** + * An optional object of options to provide to the filter function. This will + * be defaulted to work with the fuzzy filter and case-insensitive filter + * functions to trim whitespace before doing the comparisons. + */ + filterOptions?: FilterFunctionOptions; + /** + * Boolean if the filter function should still be called when there is no + * value in the text field. This normally defaults to `false` so that the + * `data` is just returned, but it can be useful with a custom filter function + * that returns different data while there is no value. + */ + filterOnNoValue?: boolean; + /** + * An optional className to also apply to the listbox element showing all the + * matches. + */ + listboxClassName?: string; + /** + * Boolean if the result list labels should be updated so that each matching + * letter is bolded. This only works when the data list is a list of strings, + * or the `label` is a string and when the letters appear in order. This will + * always be `false` if the `filter` prop is set to `"fuzzy"`. + */ + highlight?: boolean; + /** + * Boolean if the highlight functionality should no longer stop after the + * first match and instead highlight all matches of the search string within + * the label for an item. + */ + highlightReapeating?: boolean; + /** + * An optional style to apply to the `` surrounding the matched text + * when the `highlight` prop is enabled. + */ + highlightStyle?: CSSProperties; + /** + * An optional className to apply to the `` surrounding the matched text + * when the `highlight` prop is enabled. + */ + highlightClassName?: string; + /** + * The key to use to extract a label from a result when the provided data list + * is a list of objects. + */ + labelKey?: string; + /** + * The key to use to extract a searchable value string from a result when the + * provided data list is a list of objects. + */ + valueKey?: string; + /** + * A function to call that will generate an id for each result in the + * autocomplete's listbox. These ids are required for a11y as it'll be used + * with the `aria-activedescendant` movement within the autocomplete. + */ + getResultId?(id: string, index: number): string; + /** + * A function to call that will get a renderable label or children to display + * for a result in the autocomplete's list of results. The default behavior + * will be to return the result itself if it is a string, otherwise try to + * return the `children` or `labelKey` attribute if it is an object. + */ + getResultLabel?(data: Readonly, labelKey: string, query: string): ReactNode; + /** + * A function to call that will extract a searchable value string from each + * result. This **must** return a string and will prevent the autocomplete + * from filtering data with the built in filter functions. + */ + getResultValue?(datum: Readonly, valueKey: string): string; + /** + * @see AutoCompleteHandler + */ + onAutoComplete?: AutoCompleteHandler; + /** + * An optional list of keys that should be omitted from your `data` item + * before passing it to the suggestion `Option`. This is useful if you have + * additional metadata in your data objects that should not be passed as DOM + * attributes. + * + * + * ```ts + * const item = { __id: 9432432, name: "Item", value: "guid" } + * + * // don't want to pass `__id` to the Option + * const omitKeys = ["__id"]; + *``` + */ + omitKeys?: readonly string[]; + /** + * Any optional children to display before the matched results in the + * autocomplete's menu. This should normally be for any presentational data or + * things that should not be searchable. + * + * @remarks \@since 2.1.0 + */ + beforeResultsChildren?: ReactNode; + /** + * Any optional children to display after the matched results in the + * autocomplete's menu. This should normally be for any presentational data or + * things that should not be searchable. + * + * @remarks \@since 2.1.0 + */ + afterResultsChildren?: ReactNode; +} diff --git a/packages/autocomplete/types/useAutoComplete.d.ts b/packages/autocomplete/types/useAutoComplete.d.ts new file mode 100644 index 0000000000..f9f478add6 --- /dev/null +++ b/packages/autocomplete/types/useAutoComplete.d.ts @@ -0,0 +1,41 @@ +import { ChangeEventHandler, CSSProperties, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, MutableRefObject, Ref } from "react"; +import { ListElement } from "@react-md/list"; +import { TransitionHooks } from "@react-md/transition"; +import { ItemRefList } from "@react-md/utils"; +import { AutoCompleteData, AutoCompleteListboxPositionOptions, AutoCompleteProps } from "./types"; +declare type EventHandlers = Pick, "onBlur" | "onFocus" | "onChange" | "onClick" | "onKeyDown">; +export declare type RequiredAutoCompleteProps = Required>; +export declare type OptionalAutoCompleteProps = Pick; +export interface AutoCompleteOptions extends EventHandlers, OptionalAutoCompleteProps, RequiredAutoCompleteProps, AutoCompleteListboxPositionOptions { + isListAutocomplete: boolean; + isInlineAutocomplete: boolean; + forwardedRef?: Ref; + suggestionsId: string; + propValue?: string; + defaultValue?: string; +} +export interface AutoCompleteReturnValue { + ref: (instance: HTMLTextAreaElement | null) => void; + match: string; + value: string; + visible: boolean; + activeId: string; + itemRefs: ItemRefList; + filteredData: readonly AutoCompleteData[]; + listboxRef: MutableRefObject; + handleBlur: FocusEventHandler; + handleFocus: FocusEventHandler; + handleClick: MouseEventHandler; + handleChange: ChangeEventHandler; + handleKeyDown: KeyboardEventHandler; + handleAutoComplete: (index: number) => void; + fixedStyle: CSSProperties | undefined; + transitionHooks: Required; +} +/** + * This hook handles all the autocomplete's "logic" and behavior. + * + * @internal + */ +export declare function useAutoComplete({ suggestionsId, data, propValue, defaultValue, filter: filterFn, filterOptions, filterOnNoValue, valueKey, getResultId, getResultValue, onBlur, onFocus, onClick, onChange, onKeyDown, forwardedRef, onAutoComplete, clearOnAutoComplete, anchor, xMargin, yMargin, vwMargin, vhMargin, transformOrigin, listboxWidth, listboxStyle, preventOverlap, disableSwapping, disableVHBounds, closeOnResize, closeOnScroll, disableShowOnFocus: propDisableShowOnFocus, isListAutocomplete, isInlineAutocomplete, }: AutoCompleteOptions): AutoCompleteReturnValue; +export {}; diff --git a/packages/autocomplete/types/utils.d.ts b/packages/autocomplete/types/utils.d.ts new file mode 100644 index 0000000000..201bf53750 --- /dev/null +++ b/packages/autocomplete/types/utils.d.ts @@ -0,0 +1,70 @@ +import { ReactNode } from "react"; +import { AutoCompleteData, AutoCompleteFilterFunction, FilterFunction } from "./types"; +/** + * Generates an id for each result in the autocomplete's listbox. + * + * @param id - The listbox's id + * @param index - The index of the result in the list + * @returns an id string + */ +export declare function getResultId(id: string, index: number): string; +/** + * Gets a renderable label for each result in the autocomplete's listbox. This + * will be applied as the `children` for the `Option` element. + * + * @param datum - The current result datum to get a label for + * @param labelKey - The key to extract a label from if the datum is an object + * @param query - The current search query. This is useful if you want to + * implement text "highlighting" (bold) of all the letters that match in the + * item. + * @returns a renderable node to display + */ +export declare function getResultLabel(datum: Readonly, labelKey: string, _query: string): ReactNode; +/** + * Gets a value string from each result that can be searched. + * + * @param datum - The current result datum that should have a string extracted + * @param valueKey - The key to use to extract a string value from if the datum + * is an object + * @returns a searchable string. + */ +export declare function getResultValue(datum: Readonly, valueKey: string): string; +/** + * This is used to disable filtering and just return the data list immediately. + * Useful when the filtering is done somewhere else like a server/API + * @internal + */ +export declare const noFilter: FilterFunction; +/** + * Gets the filter function to use within the Autocomplete based on the provided + * filter prop + * + * @internal + */ +export declare function getFilterFunction(filter: AutoCompleteFilterFunction): FilterFunction; +/** + * This is an extremely simple type guard that is useful when using the + * `onAutoComplete` handler since I'm terrible at typescript types. This will + * ensure that if the result is an object, it will match the provided data type + * of your data list. + * + * Example: + * + * ```ts + * interface Example { + * name: string; + * value: string; + * } + * + * + * const [example, setExample] = useState(null); + * const onAutoComplete = useCallback((_name, example) => { + * if (isResultOf(example)) { + * setExample(example); + * } + * }, []) + * ``` + * + * @param datum - The result data to type guard against. + */ +export declare function isResultOf(datum: Readonly): datum is T; diff --git a/packages/form/dist/_functions.scss b/packages/form/dist/_functions.scss new file mode 100644 index 0000000000..a81710c9fd --- /dev/null +++ b/packages/form/dist/_functions.scss @@ -0,0 +1,74 @@ +//// +/// @group form +//// + +@import '~@react-md/theme/dist/helpers'; +@import './variables'; + +/// This function is used to quickly get one of the form's theme values. This is +/// really just for the `rmd-form-theme` mixin to provide some validation that a +/// correct style key is used, but might be useful in other cases. +/// +/// @param {String} theme-style - One of the `$rmd-form-theme-values` map keys +/// to get a value for. +/// @return {Color|String|Number} one of the form's theme values. +@function rmd-form-theme($theme-style) { + @return rmd-theme-get-var-value($theme-style, $rmd-form-theme-values, form); +} + +/// This function is used to get one of the form's theme variables as a CSS +/// Variable to be applied as a style attribute. By default, the CSS Variable +/// will have a fallback of the current `$rmd-form-theme-values` +/// +/// This function is used to create a CSS Variable declaration with an optional +/// fallback value if the CSS Variable has not been declared somehow. +/// +/// @param {String} theme-style - One of the `$rmd-form-theme-values` map keys +/// to set a value for. +/// @param {Color|String|Number} fallback [null] - An optional fallback color to +/// apply. This is set to `null` by default and not used since the link's theme +/// variables should always exist. +/// @return {Color|String|Number} one of the form's theme values. +@function rmd-form-theme-var($theme-style, $fallback: null) { + @return rmd-theme-get-var( + $theme-style, + $rmd-form-theme-values, + form, + $fallback + ); +} + +/// Creates the styles for one of the form's theme values. This is mostly going +/// to be an internal helper mixin util. +/// +/// @param {String} property - The property to set a `rmd-form-theme-values` +/// value to. +/// @param {String} theme-style - One of the keys of `rmd-form-theme-values` to +/// extract a value from. +/// @param {Color|String|Number} fallback [null] - A fallback value to use if +/// the css variable isn't set somehow. This will default to automatically +/// retrieving the default value from the `rmd-form-theme-values` map when +/// `null`. +@mixin rmd-form-theme($property, $theme-style: $property, $fallback: null) { + @include rmd-theme-apply-rmd-var( + $property, + $theme-style, + $rmd-form-theme-values, + form + ); +} + +/// Updates one of the form's theme variables with the new value for the section +/// of your app. +/// +/// @param {String} theme-style - The form theme style type to update. This +/// should be one of the `$rmd-form-theme-values` keys. +/// @param {Color|String|Number} value - The new value to use. +@mixin rmd-form-theme-update-var($theme-style, $value) { + @include rmd-theme-update-rmd-var( + $value, + $theme-style, + $rmd-form-theme-values, + form + ); +} diff --git a/packages/form/dist/_mixins.scss b/packages/form/dist/_mixins.scss new file mode 100644 index 0000000000..f0256188ea --- /dev/null +++ b/packages/form/dist/_mixins.scss @@ -0,0 +1,118 @@ +//// +/// @group form +//// + +@import '~@react-md/typography/dist/mixins'; +@import '~@react-md/utils/dist/mixins'; +@import './variables'; +@import './file-input/mixins'; +@import './label/mixins'; +@import './select/mixins'; +@import './slider/mixins'; +@import './toggle/mixins'; +@import './text-field/mixins'; + +/// @since 2.5.0 +/// @access private +@mixin rmd-form-message-container { + display: flex; + flex-direction: column; +} + +/// @access private +@mixin rmd-form-message { + @include rmd-typography(body-2, (font-size)); + @include rmd-theme(color, text-secondary-on-background); + + display: flex; + font-size: $rmd-form-message-font-size; + margin-bottom: $rmd-form-message-margin-bottom; + margin-top: $rmd-form-message-margin-top; + min-height: $rmd-form-message-min-height; + + &--underline { + padding-left: $rmd-text-field-underline-padding; + padding-right: $rmd-text-field-underline-padding; + } + + &--filled { + padding-left: $rmd-text-field-filled-padding; + padding-right: $rmd-text-field-filled-padding; + } + + &--outline { + padding-left: $rmd-text-field-outline-padding; + padding-right: $rmd-text-field-outline-padding; + } + + &--error { + @include rmd-form-theme(color, error-color); + } + + &__message { + margin: 0; + } + + &__counter { + @include rmd-utils-rtl-auto(margin-left, auto); + @include rmd-utils-rtl-auto( + padding-left, + $rmd-form-message-counter-spacing + ); + + flex-shrink: 0; + white-space: nowrap; + } +} + +/// Creates the base styles for a simple fieldset element. +/// @access private +@mixin rmd-fieldset { + &--unstyled { + border: 0; + margin: 0; + min-width: 0; // just so it can shrink correctly in flex or grid + padding: 0; + } + + &__legend { + @include rmd-typography(body-1); + + &--sr-only { + @include rmd-utils-sr-only; + } + } +} + +/// Creates the styles for forms within react-md. This requires either the +/// `rmd-form-use-font-forms` or `rmd-form-use-svg-forms` variables to be +/// enabled to generate any styles. +@mixin react-md-form { + $omit: ( + addon-top label-left-offset label-top-offset label-active-background-color + label-active-padding text-offset text-padding-left text-padding-right + text-padding-top + ); + @include rmd-theme-create-root-theme($rmd-form-theme-values, form, $omit); + + @include react-md-file-input; + @include react-md-label; + @include react-md-slider; + @include react-md-toggle; + @include react-md-text-field; + // has to come after text field since it overrides some of the + // text-field-container styles + @include react-md-select; + + .rmd-fieldset { + @include rmd-fieldset; + } + + .rmd-form-message-container { + @include rmd-form-message-container; + } + + .rmd-form-message { + @include rmd-form-message; + } +} diff --git a/packages/form/dist/_variables.scss b/packages/form/dist/_variables.scss new file mode 100644 index 0000000000..82e91b9c3f --- /dev/null +++ b/packages/form/dist/_variables.scss @@ -0,0 +1,94 @@ +//// +/// @group form +//// + +@import '~@react-md/theme/dist/color-palette'; +@import '~@react-md/theme/dist/helpers'; +@import '~@react-md/theme/dist/functions'; +@import '~@react-md/typography/dist/variables'; + +@import './label/variables'; +@import './select/variables'; +@import './text-field/variables'; +@import './toggle/variables'; + +/// The color to use when a form contains an error. +/// +/// @require $rmd-theme-error +/// @type Color +$rmd-form-error-color: $rmd-theme-error !default; + +/// This is the color that is used when a text field/textarea is errored +/// and the user hovers over it. +/// +/// @require rmd-theme-get-swatch +/// @type Color +$rmd-form-error-hover-color: rmd-theme-get-swatch( + $rmd-form-error-color, + 700, + true, + darken($rmd-form-error-color, 10%), + rmd-form-error-color +) !default; + +/// The color to use when a form element (text, checkbox, radio, etc) is +/// currently active by the user(normally focus). +/// +/// @require rmd-theme-var +/// @type Color +$rmd-form-active-color: rmd-theme-var(secondary) !default; + +/// The color to use when a form element is disabled. +/// +/// @require rmd-theme-var +/// @type Color +$rmd-form-disabled-color: rmd-theme-var(text-disabled-on-background) !default; + +/// The default color to use for placeholder text within text fields. +/// +/// @require rmd-theme-var +/// @type Color +$rmd-form-placeholder-color: rmd-theme-var( + text-secondary-on-background +) !default; + +// sass-lint:disable zero-unit + +/// A Map of all the "themeable" parts of the form package. Every key in this map will +/// be used to create a css variable to dynamically update the values of the icon as +/// needed. +/// @type Map +$rmd-form-theme-values: ( + error-color: $rmd-form-error-color, + error-hover-color: $rmd-form-error-hover-color, + active-color: $rmd-form-active-color, + disabled-color: $rmd-form-disabled-color, + toggle-inset: $rmd-toggle-inset, + toggle-dense-inset: $rmd-toggle-dense-inset, + indeterminate-height: $rmd-checkbox-indeterminate-height, + indeterminate-dense-height: $rmd-checkbox-indeterminate-dense-height, + track-background-color: $rmd-switch-track-background-color, + floating-top: $rmd-label-floating-top, + floating-dense-top: $rmd-label-floating-dense-top, + addon-top: auto, + addon-margin-top: 0px, + label-left-offset: 0px, + label-top-offset: 0px, + label-active-padding: 0px, + label-active-background-color: transparent, + listbox-background-color: $rmd-listbox-background-color, + text-padding-left: 0px, + text-padding-right: 0px, + text-padding-top: 0px, + text-offset: 0px, + text-active-color: $rmd-text-field-active-color, + text-border-color: $rmd-text-field-border-color, + text-border-hover-color: $rmd-text-field-border-hover-color, + text-filled-color: $rmd-text-field-filled-background-color, + text-height: $rmd-text-field-height, + text-label-height: $rmd-text-field-label-height, + text-label-dense-height: $rmd-text-field-label-dense-height, + text-placeholder-height: $rmd-text-field-height, + text-placeholder-dense-height: $rmd-text-field-dense-height, + textarea-padding: $rmd-textarea-vertical-padding, +) !default; diff --git a/packages/form/dist/file-input/_mixins.scss b/packages/form/dist/file-input/_mixins.scss new file mode 100644 index 0000000000..426d2eac22 --- /dev/null +++ b/packages/form/dist/file-input/_mixins.scss @@ -0,0 +1,35 @@ +//// +/// @group form-file-input +//// + +@import '~@react-md/states/dist/mixins'; +@import '~@react-md/utils/dist/mixins'; + +/// @access private +@mixin react-md-file-input { + .rmd-file-input { + @include rmd-states-focus-shadow('&:focus + .rmd-file-input-label'); + @include rmd-utils-keyboard-only { + &:focus + .rmd-file-input-label { + @include rmd-states-theme-update-var( + background-color, + rmd-states-theme-var(focus-color) + ); + } + + &:hover { + @include rmd-states-theme-update-var( + background-color, + rmd-states-theme-var(hover-color) + ); + } + } + + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + width: 0.1px; + z-index: -1; + } +} diff --git a/packages/form/dist/label/_mixins.scss b/packages/form/dist/label/_mixins.scss new file mode 100644 index 0000000000..d43d85c605 --- /dev/null +++ b/packages/form/dist/label/_mixins.scss @@ -0,0 +1,102 @@ +//// +/// @group form-label +//// + +@import '~@react-md/icon/dist/mixins'; +@import '~@react-md/typography/dist/mixins'; +@import '~@react-md/transition/dist/mixins'; +@import '~@react-md/utils/dist/mixins'; +@import '../variables'; +@import '../functions'; + +/// Creates the base styles for a `