@adobe/react-spectrum 3.47.2 → 3.47.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/private/actionbar/ActionBar.cjs +2 -3
- package/dist/private/actionbar/ActionBar.cjs.map +1 -1
- package/dist/private/actionbar/ActionBar.js +2 -3
- package/dist/private/actionbar/ActionBar.js.map +1 -1
- package/dist/private/actionbar/ActionBar.mjs +2 -3
- package/dist/private/actionbar/ActionBar.mjs.map +1 -1
- package/dist/private/actiongroup/ActionGroup.cjs +5 -1
- package/dist/private/actiongroup/ActionGroup.cjs.map +1 -1
- package/dist/private/actiongroup/ActionGroup.js +5 -1
- package/dist/private/actiongroup/ActionGroup.js.map +1 -1
- package/dist/private/actiongroup/ActionGroup.mjs +5 -1
- package/dist/private/actiongroup/ActionGroup.mjs.map +1 -1
- package/dist/private/autocomplete/MobileSearchAutocomplete.cjs +6 -0
- package/dist/private/autocomplete/MobileSearchAutocomplete.cjs.map +1 -1
- package/dist/private/autocomplete/MobileSearchAutocomplete.js +6 -0
- package/dist/private/autocomplete/MobileSearchAutocomplete.js.map +1 -1
- package/dist/private/autocomplete/MobileSearchAutocomplete.mjs +6 -0
- package/dist/private/autocomplete/MobileSearchAutocomplete.mjs.map +1 -1
- package/dist/private/autocomplete/SearchAutocomplete.cjs +1 -0
- package/dist/private/autocomplete/SearchAutocomplete.cjs.map +1 -1
- package/dist/private/autocomplete/SearchAutocomplete.js +1 -0
- package/dist/private/autocomplete/SearchAutocomplete.js.map +1 -1
- package/dist/private/autocomplete/SearchAutocomplete.mjs +1 -0
- package/dist/private/autocomplete/SearchAutocomplete.mjs.map +1 -1
- package/dist/private/button/Button.cjs +2 -1
- package/dist/private/button/Button.cjs.map +1 -1
- package/dist/private/button/Button.js +3 -2
- package/dist/private/button/Button.js.map +1 -1
- package/dist/private/button/Button.mjs +3 -2
- package/dist/private/button/Button.mjs.map +1 -1
- package/dist/private/button/ClearButton.cjs +2 -1
- package/dist/private/button/ClearButton.cjs.map +1 -1
- package/dist/private/button/ClearButton.js +2 -1
- package/dist/private/button/ClearButton.js.map +1 -1
- package/dist/private/button/ClearButton.mjs +2 -1
- package/dist/private/button/ClearButton.mjs.map +1 -1
- package/dist/private/buttongroup/ButtonGroup.cjs +4 -2
- package/dist/private/buttongroup/ButtonGroup.cjs.map +1 -1
- package/dist/private/buttongroup/ButtonGroup.js +4 -2
- package/dist/private/buttongroup/ButtonGroup.js.map +1 -1
- package/dist/private/buttongroup/ButtonGroup.mjs +4 -2
- package/dist/private/buttongroup/ButtonGroup.mjs.map +1 -1
- package/dist/private/card/CardBase.cjs +1 -0
- package/dist/private/card/CardBase.cjs.map +1 -1
- package/dist/private/card/CardBase.js +1 -0
- package/dist/private/card/CardBase.js.map +1 -1
- package/dist/private/card/CardBase.mjs +1 -0
- package/dist/private/card/CardBase.mjs.map +1 -1
- package/dist/private/card/CardView.cjs +3 -0
- package/dist/private/card/CardView.cjs.map +1 -1
- package/dist/private/card/CardView.js +3 -0
- package/dist/private/card/CardView.js.map +1 -1
- package/dist/private/card/CardView.mjs +3 -0
- package/dist/private/card/CardView.mjs.map +1 -1
- package/dist/private/checkbox/Checkbox.cjs.map +1 -1
- package/dist/private/checkbox/Checkbox.js.map +1 -1
- package/dist/private/checkbox/Checkbox.mjs.map +1 -1
- package/dist/private/color/ColorField.cjs +1 -0
- package/dist/private/color/ColorField.cjs.map +1 -1
- package/dist/private/color/ColorField.js +1 -0
- package/dist/private/color/ColorField.js.map +1 -1
- package/dist/private/color/ColorField.mjs +1 -0
- package/dist/private/color/ColorField.mjs.map +1 -1
- package/dist/private/color/ColorPicker.cjs.map +1 -1
- package/dist/private/color/ColorPicker.js.map +1 -1
- package/dist/private/color/ColorPicker.mjs.map +1 -1
- package/dist/private/color/ColorSwatch.cjs +2 -1
- package/dist/private/color/ColorSwatch.cjs.map +1 -1
- package/dist/private/color/ColorSwatch.js +2 -1
- package/dist/private/color/ColorSwatch.js.map +1 -1
- package/dist/private/color/ColorSwatch.mjs +2 -1
- package/dist/private/color/ColorSwatch.mjs.map +1 -1
- package/dist/private/color/ColorSwatchPicker.cjs.map +1 -1
- package/dist/private/color/ColorSwatchPicker.js.map +1 -1
- package/dist/private/color/ColorSwatchPicker.mjs.map +1 -1
- package/dist/private/color/ColorWheel.cjs +1 -0
- package/dist/private/color/ColorWheel.cjs.map +1 -1
- package/dist/private/color/ColorWheel.js +1 -0
- package/dist/private/color/ColorWheel.js.map +1 -1
- package/dist/private/color/ColorWheel.mjs +1 -0
- package/dist/private/color/ColorWheel.mjs.map +1 -1
- package/dist/private/combobox/ComboBox.cjs +1 -0
- package/dist/private/combobox/ComboBox.cjs.map +1 -1
- package/dist/private/combobox/ComboBox.js +1 -0
- package/dist/private/combobox/ComboBox.js.map +1 -1
- package/dist/private/combobox/ComboBox.mjs +1 -0
- package/dist/private/combobox/ComboBox.mjs.map +1 -1
- package/dist/private/combobox/MobileComboBox.cjs +8 -0
- package/dist/private/combobox/MobileComboBox.cjs.map +1 -1
- package/dist/private/combobox/MobileComboBox.js +8 -0
- package/dist/private/combobox/MobileComboBox.js.map +1 -1
- package/dist/private/combobox/MobileComboBox.mjs +8 -0
- package/dist/private/combobox/MobileComboBox.mjs.map +1 -1
- package/dist/private/datepicker/DateField.cjs +2 -1
- package/dist/private/datepicker/DateField.cjs.map +1 -1
- package/dist/private/datepicker/DateField.js +2 -1
- package/dist/private/datepicker/DateField.js.map +1 -1
- package/dist/private/datepicker/DateField.mjs +2 -1
- package/dist/private/datepicker/DateField.mjs.map +1 -1
- package/dist/private/datepicker/DatePicker.cjs +2 -1
- package/dist/private/datepicker/DatePicker.cjs.map +1 -1
- package/dist/private/datepicker/DatePicker.js +2 -1
- package/dist/private/datepicker/DatePicker.js.map +1 -1
- package/dist/private/datepicker/DatePicker.mjs +2 -1
- package/dist/private/datepicker/DatePicker.mjs.map +1 -1
- package/dist/private/datepicker/DateRangePicker.cjs +2 -1
- package/dist/private/datepicker/DateRangePicker.cjs.map +1 -1
- package/dist/private/datepicker/DateRangePicker.js +2 -1
- package/dist/private/datepicker/DateRangePicker.js.map +1 -1
- package/dist/private/datepicker/DateRangePicker.mjs +2 -1
- package/dist/private/datepicker/DateRangePicker.mjs.map +1 -1
- package/dist/private/dialog/AlertDialog.cjs +3 -1
- package/dist/private/dialog/AlertDialog.cjs.map +1 -1
- package/dist/private/dialog/AlertDialog.js +3 -1
- package/dist/private/dialog/AlertDialog.js.map +1 -1
- package/dist/private/dialog/AlertDialog.mjs +3 -1
- package/dist/private/dialog/AlertDialog.mjs.map +1 -1
- package/dist/private/dialog/Dialog.cjs +10 -3
- package/dist/private/dialog/Dialog.cjs.map +1 -1
- package/dist/private/dialog/Dialog.js +10 -3
- package/dist/private/dialog/Dialog.js.map +1 -1
- package/dist/private/dialog/Dialog.mjs +10 -3
- package/dist/private/dialog/Dialog.mjs.map +1 -1
- package/dist/private/dnd/useDragAndDrop.cjs +7 -0
- package/dist/private/dnd/useDragAndDrop.cjs.map +1 -1
- package/dist/private/dnd/useDragAndDrop.js +7 -0
- package/dist/private/dnd/useDragAndDrop.js.map +1 -1
- package/dist/private/dnd/useDragAndDrop.mjs +7 -0
- package/dist/private/dnd/useDragAndDrop.mjs.map +1 -1
- package/dist/private/icon/Icon.cjs +1 -1
- package/dist/private/icon/Icon.cjs.map +1 -1
- package/dist/private/icon/Icon.js +1 -1
- package/dist/private/icon/Icon.js.map +1 -1
- package/dist/private/icon/Icon.mjs +1 -1
- package/dist/private/icon/Icon.mjs.map +1 -1
- package/dist/private/icon/UIIcon.cjs +1 -1
- package/dist/private/icon/UIIcon.cjs.map +1 -1
- package/dist/private/icon/UIIcon.js +1 -1
- package/dist/private/icon/UIIcon.js.map +1 -1
- package/dist/private/icon/UIIcon.mjs +1 -1
- package/dist/private/icon/UIIcon.mjs.map +1 -1
- package/dist/private/intl/label/zh-CN.cjs +1 -1
- package/dist/private/intl/label/zh-CN.cjs.map +1 -1
- package/dist/private/intl/label/zh-CN.js +1 -1
- package/dist/private/intl/label/zh-CN.js.map +1 -1
- package/dist/private/intl/label/zh-CN.mjs +1 -1
- package/dist/private/intl/label/zh-CN.mjs.map +1 -1
- package/dist/private/intl/menu/es-ES.cjs +1 -1
- package/dist/private/intl/menu/es-ES.cjs.map +1 -1
- package/dist/private/intl/menu/es-ES.js +1 -1
- package/dist/private/intl/menu/es-ES.js.map +1 -1
- package/dist/private/intl/menu/es-ES.mjs +1 -1
- package/dist/private/intl/menu/es-ES.mjs.map +1 -1
- package/dist/private/intl/picker/zh-CN.cjs +1 -1
- package/dist/private/intl/picker/zh-CN.cjs.map +1 -1
- package/dist/private/intl/picker/zh-CN.js +1 -1
- package/dist/private/intl/picker/zh-CN.js.map +1 -1
- package/dist/private/intl/picker/zh-CN.mjs +1 -1
- package/dist/private/intl/picker/zh-CN.mjs.map +1 -1
- package/dist/private/intl/table/es-ES.cjs +1 -1
- package/dist/private/intl/table/es-ES.cjs.map +1 -1
- package/dist/private/intl/table/es-ES.js +1 -1
- package/dist/private/intl/table/es-ES.js.map +1 -1
- package/dist/private/intl/table/es-ES.mjs +1 -1
- package/dist/private/intl/table/es-ES.mjs.map +1 -1
- package/dist/private/intl/table/zh-TW.cjs +2 -2
- package/dist/private/intl/table/zh-TW.cjs.map +1 -1
- package/dist/private/intl/table/zh-TW.js +2 -2
- package/dist/private/intl/table/zh-TW.js.map +1 -1
- package/dist/private/intl/table/zh-TW.mjs +2 -2
- package/dist/private/intl/table/zh-TW.mjs.map +1 -1
- package/dist/private/label/Field.cjs +2 -1
- package/dist/private/label/Field.cjs.map +1 -1
- package/dist/private/label/Field.js +2 -1
- package/dist/private/label/Field.js.map +1 -1
- package/dist/private/label/Field.mjs +2 -1
- package/dist/private/label/Field.mjs.map +1 -1
- package/dist/private/layout/Grid.cjs +2 -1
- package/dist/private/layout/Grid.cjs.map +1 -1
- package/dist/private/layout/Grid.js +2 -1
- package/dist/private/layout/Grid.js.map +1 -1
- package/dist/private/layout/Grid.mjs +2 -1
- package/dist/private/layout/Grid.mjs.map +1 -1
- package/dist/private/link/Link.cjs +3 -0
- package/dist/private/link/Link.cjs.map +1 -1
- package/dist/private/link/Link.js +3 -0
- package/dist/private/link/Link.js.map +1 -1
- package/dist/private/link/Link.mjs +3 -0
- package/dist/private/link/Link.mjs.map +1 -1
- package/dist/private/list/InsertionIndicator.cjs +1 -0
- package/dist/private/list/InsertionIndicator.cjs.map +1 -1
- package/dist/private/list/InsertionIndicator.js +1 -0
- package/dist/private/list/InsertionIndicator.js.map +1 -1
- package/dist/private/list/InsertionIndicator.mjs +1 -0
- package/dist/private/list/InsertionIndicator.mjs.map +1 -1
- package/dist/private/list/ListView.cjs +5 -0
- package/dist/private/list/ListView.cjs.map +1 -1
- package/dist/private/list/ListView.js +5 -0
- package/dist/private/list/ListView.js.map +1 -1
- package/dist/private/list/ListView.mjs +5 -0
- package/dist/private/list/ListView.mjs.map +1 -1
- package/dist/private/list/ListViewItem.cjs +2 -0
- package/dist/private/list/ListViewItem.cjs.map +1 -1
- package/dist/private/list/ListViewItem.js +2 -0
- package/dist/private/list/ListViewItem.js.map +1 -1
- package/dist/private/list/ListViewItem.mjs +2 -0
- package/dist/private/list/ListViewItem.mjs.map +1 -1
- package/dist/private/list/RootDropIndicator.cjs +1 -0
- package/dist/private/list/RootDropIndicator.cjs.map +1 -1
- package/dist/private/list/RootDropIndicator.js +1 -0
- package/dist/private/list/RootDropIndicator.js.map +1 -1
- package/dist/private/list/RootDropIndicator.mjs +1 -0
- package/dist/private/list/RootDropIndicator.mjs.map +1 -1
- package/dist/private/menu/ContextualHelpTrigger.cjs +7 -1
- package/dist/private/menu/ContextualHelpTrigger.cjs.map +1 -1
- package/dist/private/menu/ContextualHelpTrigger.js +7 -1
- package/dist/private/menu/ContextualHelpTrigger.js.map +1 -1
- package/dist/private/menu/ContextualHelpTrigger.mjs +7 -1
- package/dist/private/menu/ContextualHelpTrigger.mjs.map +1 -1
- package/dist/private/menu/MenuItem.cjs +2 -0
- package/dist/private/menu/MenuItem.cjs.map +1 -1
- package/dist/private/menu/MenuItem.js +2 -0
- package/dist/private/menu/MenuItem.js.map +1 -1
- package/dist/private/menu/MenuItem.mjs +2 -0
- package/dist/private/menu/MenuItem.mjs.map +1 -1
- package/dist/private/menu/MenuTrigger.cjs +1 -0
- package/dist/private/menu/MenuTrigger.cjs.map +1 -1
- package/dist/private/menu/MenuTrigger.js +1 -0
- package/dist/private/menu/MenuTrigger.js.map +1 -1
- package/dist/private/menu/MenuTrigger.mjs +1 -0
- package/dist/private/menu/MenuTrigger.mjs.map +1 -1
- package/dist/private/menu/SubmenuTrigger.cjs +6 -1
- package/dist/private/menu/SubmenuTrigger.cjs.map +1 -1
- package/dist/private/menu/SubmenuTrigger.js +6 -1
- package/dist/private/menu/SubmenuTrigger.js.map +1 -1
- package/dist/private/menu/SubmenuTrigger.mjs +6 -1
- package/dist/private/menu/SubmenuTrigger.mjs.map +1 -1
- package/dist/private/package.cjs +1 -1
- package/dist/private/package.cjs.map +1 -1
- package/dist/private/package.js +1 -1
- package/dist/private/package.js.map +1 -1
- package/dist/private/package.mjs +1 -1
- package/dist/private/package.mjs.map +1 -1
- package/dist/private/progress/ProgressBarBase.cjs +2 -1
- package/dist/private/progress/ProgressBarBase.cjs.map +1 -1
- package/dist/private/progress/ProgressBarBase.js +2 -1
- package/dist/private/progress/ProgressBarBase.js.map +1 -1
- package/dist/private/progress/ProgressBarBase.mjs +2 -1
- package/dist/private/progress/ProgressBarBase.mjs.map +1 -1
- package/dist/private/progress/ProgressCircle.cjs +2 -1
- package/dist/private/progress/ProgressCircle.cjs.map +1 -1
- package/dist/private/progress/ProgressCircle.js +2 -1
- package/dist/private/progress/ProgressCircle.js.map +1 -1
- package/dist/private/progress/ProgressCircle.mjs +2 -1
- package/dist/private/progress/ProgressCircle.mjs.map +1 -1
- package/dist/private/slider/Slider.cjs +1 -0
- package/dist/private/slider/Slider.cjs.map +1 -1
- package/dist/private/slider/Slider.js +1 -0
- package/dist/private/slider/Slider.js.map +1 -1
- package/dist/private/slider/Slider.mjs +1 -0
- package/dist/private/slider/Slider.mjs.map +1 -1
- package/dist/private/table/InsertionIndicator.cjs +1 -0
- package/dist/private/table/InsertionIndicator.cjs.map +1 -1
- package/dist/private/table/InsertionIndicator.js +1 -0
- package/dist/private/table/InsertionIndicator.js.map +1 -1
- package/dist/private/table/InsertionIndicator.mjs +1 -0
- package/dist/private/table/InsertionIndicator.mjs.map +1 -1
- package/dist/private/table/Resizer.cjs +2 -25
- package/dist/private/table/Resizer.cjs.map +1 -1
- package/dist/private/table/Resizer.js +3 -26
- package/dist/private/table/Resizer.js.map +1 -1
- package/dist/private/table/Resizer.mjs +3 -26
- package/dist/private/table/Resizer.mjs.map +1 -1
- package/dist/private/table/RootDropIndicator.cjs +1 -0
- package/dist/private/table/RootDropIndicator.cjs.map +1 -1
- package/dist/private/table/RootDropIndicator.js +1 -0
- package/dist/private/table/RootDropIndicator.js.map +1 -1
- package/dist/private/table/RootDropIndicator.mjs +1 -0
- package/dist/private/table/RootDropIndicator.mjs.map +1 -1
- package/dist/private/table/TableViewBase.cjs +8 -0
- package/dist/private/table/TableViewBase.cjs.map +1 -1
- package/dist/private/table/TableViewBase.js +8 -0
- package/dist/private/table/TableViewBase.js.map +1 -1
- package/dist/private/table/TableViewBase.mjs +8 -0
- package/dist/private/table/TableViewBase.mjs.map +1 -1
- package/dist/private/table/TreeGridTableView.cjs +1 -0
- package/dist/private/table/TreeGridTableView.cjs.map +1 -1
- package/dist/private/table/TreeGridTableView.js +1 -0
- package/dist/private/table/TreeGridTableView.js.map +1 -1
- package/dist/private/table/TreeGridTableView.mjs +1 -0
- package/dist/private/table/TreeGridTableView.mjs.map +1 -1
- package/dist/private/tabs/Tabs.cjs +4 -2
- package/dist/private/tabs/Tabs.cjs.map +1 -1
- package/dist/private/tabs/Tabs.js +4 -2
- package/dist/private/tabs/Tabs.js.map +1 -1
- package/dist/private/tabs/Tabs.mjs +4 -2
- package/dist/private/tabs/Tabs.mjs.map +1 -1
- package/dist/private/tag/TagGroup.cjs +2 -0
- package/dist/private/tag/TagGroup.cjs.map +1 -1
- package/dist/private/tag/TagGroup.js +2 -0
- package/dist/private/tag/TagGroup.js.map +1 -1
- package/dist/private/tag/TagGroup.mjs +2 -0
- package/dist/private/tag/TagGroup.mjs.map +1 -1
- package/dist/private/textfield/TextArea.cjs +2 -0
- package/dist/private/textfield/TextArea.cjs.map +1 -1
- package/dist/private/textfield/TextArea.js +2 -0
- package/dist/private/textfield/TextArea.js.map +1 -1
- package/dist/private/textfield/TextArea.mjs +2 -0
- package/dist/private/textfield/TextArea.mjs.map +1 -1
- package/dist/private/textfield/TextField.cjs +1 -0
- package/dist/private/textfield/TextField.cjs.map +1 -1
- package/dist/private/textfield/TextField.js +1 -0
- package/dist/private/textfield/TextField.js.map +1 -1
- package/dist/private/textfield/TextField.mjs +1 -0
- package/dist/private/textfield/TextField.mjs.map +1 -1
- package/dist/private/textfield/TextFieldBase.cjs +2 -1
- package/dist/private/textfield/TextFieldBase.cjs.map +1 -1
- package/dist/private/textfield/TextFieldBase.js +2 -1
- package/dist/private/textfield/TextFieldBase.js.map +1 -1
- package/dist/private/textfield/TextFieldBase.mjs +2 -1
- package/dist/private/textfield/TextFieldBase.mjs.map +1 -1
- package/dist/private/utils/Slots.cjs +1 -0
- package/dist/private/utils/Slots.cjs.map +1 -1
- package/dist/private/utils/Slots.js +1 -0
- package/dist/private/utils/Slots.js.map +1 -1
- package/dist/private/utils/Slots.mjs +1 -0
- package/dist/private/utils/Slots.mjs.map +1 -1
- package/dist/types/src/dialog/AlertDialog.d.ts +2 -2
- package/i18n/ar-AE.js +1 -1
- package/i18n/ar-AE.mjs +1 -1
- package/i18n/bg-BG.js +1 -1
- package/i18n/bg-BG.mjs +1 -1
- package/i18n/cs-CZ.js +1 -1
- package/i18n/cs-CZ.mjs +1 -1
- package/i18n/da-DK.js +1 -1
- package/i18n/da-DK.mjs +1 -1
- package/i18n/de-DE.js +1 -1
- package/i18n/de-DE.mjs +1 -1
- package/i18n/el-GR.js +1 -1
- package/i18n/el-GR.mjs +1 -1
- package/i18n/en-US.js +1 -1
- package/i18n/en-US.mjs +1 -1
- package/i18n/es-ES.js +1 -1
- package/i18n/es-ES.mjs +1 -1
- package/i18n/et-EE.js +1 -1
- package/i18n/et-EE.mjs +1 -1
- package/i18n/fi-FI.js +1 -1
- package/i18n/fi-FI.mjs +1 -1
- package/i18n/fr-FR.js +1 -1
- package/i18n/fr-FR.mjs +1 -1
- package/i18n/he-IL.js +1 -1
- package/i18n/he-IL.mjs +1 -1
- package/i18n/hr-HR.js +1 -1
- package/i18n/hr-HR.mjs +1 -1
- package/i18n/hu-HU.js +1 -1
- package/i18n/hu-HU.mjs +1 -1
- package/i18n/index.js +1 -1
- package/i18n/index.mjs +1 -1
- package/i18n/it-IT.js +1 -1
- package/i18n/it-IT.mjs +1 -1
- package/i18n/ja-JP.js +1 -1
- package/i18n/ja-JP.mjs +1 -1
- package/i18n/ko-KR.js +1 -1
- package/i18n/ko-KR.mjs +1 -1
- package/i18n/lt-LT.js +1 -1
- package/i18n/lt-LT.mjs +1 -1
- package/i18n/lv-LV.js +1 -1
- package/i18n/lv-LV.mjs +1 -1
- package/i18n/nb-NO.js +1 -1
- package/i18n/nb-NO.mjs +1 -1
- package/i18n/nl-NL.js +1 -1
- package/i18n/nl-NL.mjs +1 -1
- package/i18n/pl-PL.js +1 -1
- package/i18n/pl-PL.mjs +1 -1
- package/i18n/pt-BR.js +1 -1
- package/i18n/pt-BR.mjs +1 -1
- package/i18n/pt-PT.js +1 -1
- package/i18n/pt-PT.mjs +1 -1
- package/i18n/ro-RO.js +1 -1
- package/i18n/ro-RO.mjs +1 -1
- package/i18n/ru-RU.js +1 -1
- package/i18n/ru-RU.mjs +1 -1
- package/i18n/sk-SK.js +1 -1
- package/i18n/sk-SK.mjs +1 -1
- package/i18n/sl-SI.js +1 -1
- package/i18n/sl-SI.mjs +1 -1
- package/i18n/sr-SP.js +1 -1
- package/i18n/sr-SP.mjs +1 -1
- package/i18n/sv-SE.js +1 -1
- package/i18n/sv-SE.mjs +1 -1
- package/i18n/tr-TR.js +1 -1
- package/i18n/tr-TR.mjs +1 -1
- package/i18n/uk-UA.js +1 -1
- package/i18n/uk-UA.mjs +1 -1
- package/i18n/zh-CN.js +1 -1
- package/i18n/zh-CN.mjs +1 -1
- package/i18n/zh-TW.js +1 -1
- package/i18n/zh-TW.mjs +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAyBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAiC;IAEjC,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,+CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,sDAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OACb,gBAAgB,CAAC,aAAa,OAAO,EACrC,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,2DAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,+DAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,wDAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,2CAAY,EACrD;QACE,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GACA,OACA;IAGF,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,yCAAW;IAE9C,qBACE,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAEtB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,0DAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;QACd,KAAK;;AAKf","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps\n extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n /** The outer diameter of the ColorWheel. */\n size?: DimensionValue;\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(\n props: SpectrumColorWheelProps,\n ref: FocusableRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window\n .getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useLayoutEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel(\n {\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n },\n state,\n inputRef\n );\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )}\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input\n {...focusProps}\n className={classNames(styles, 'spectrum-ColorWheel-slider')}\n {...inputProps}\n ref={inputRef}\n />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.cjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAyBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAiC;IAEjC,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,+CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,sDAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEnD,gDAAgD;IAChD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OACb,gBAAgB,CAAC,aAAa,OAAO,EACrC,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,2DAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,+DAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,wDAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,2CAAY,EACrD;QACE,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GACA,OACA;IAGF,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,yCAAW;IAE9C,qBACE,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAEtB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,0DAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;QACd,KAAK;;AAKf","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps\n extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n /** The outer diameter of the ColorWheel. */\n size?: DimensionValue;\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(\n props: SpectrumColorWheelProps,\n ref: FocusableRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n // oxlint-disable-next-line react/react-compiler\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window\n .getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useLayoutEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel(\n {\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n },\n state,\n inputRef\n );\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )}\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input\n {...focusProps}\n className={classNames(styles, 'spectrum-ColorWheel-slider')}\n {...inputProps}\n ref={inputRef}\n />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.cjs.map"}
|
|
@@ -53,6 +53,7 @@ const $4f4444fad9e6c791$export$f80663f808113381 = /*#__PURE__*/ (0, $3WWXI$react
|
|
|
53
53
|
let { styleProps: styleProps } = (0, $120fbea2d95e11ed$export$b8e6fb9d2dff3f41)(props);
|
|
54
54
|
let [wheelRadius, setWheelRadius] = (0, $3WWXI$useState)(0);
|
|
55
55
|
let [wheelThickness, setWheelThickness] = (0, $3WWXI$useState)($4f4444fad9e6c791$var$WHEEL_THICKNESS);
|
|
56
|
+
// oxlint-disable-next-line react/react-compiler
|
|
56
57
|
let resizeHandler = (0, $3WWXI$useCallback)(()=>{
|
|
57
58
|
if (containerRef.current) {
|
|
58
59
|
setWheelRadius(containerRef.current.offsetWidth / 2);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAyBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAiC;IAEjC,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,wBAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,yCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OACb,gBAAgB,CAAC,aAAa,OAAO,EACrC,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EACrD;QACE,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GACA,OACA;IAGF,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,uDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAEtB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,gCAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;sBACnD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;QACd,KAAK;;AAKf","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps\n extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n /** The outer diameter of the ColorWheel. */\n size?: DimensionValue;\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(\n props: SpectrumColorWheelProps,\n ref: FocusableRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window\n .getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useLayoutEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel(\n {\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n },\n state,\n inputRef\n );\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )}\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input\n {...focusProps}\n className={classNames(styles, 'spectrum-ColorWheel-slider')}\n {...inputProps}\n ref={inputRef}\n />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.js.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAyBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAiC;IAEjC,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,wBAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,yCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEnD,gDAAgD;IAChD,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OACb,gBAAgB,CAAC,aAAa,OAAO,EACrC,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EACrD;QACE,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GACA,OACA;IAGF,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,uDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAEtB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,gCAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;sBACnD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;QACd,KAAK;;AAKf","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps\n extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n /** The outer diameter of the ColorWheel. */\n size?: DimensionValue;\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(\n props: SpectrumColorWheelProps,\n ref: FocusableRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n // oxlint-disable-next-line react/react-compiler\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window\n .getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useLayoutEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel(\n {\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n },\n state,\n inputRef\n );\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )}\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input\n {...focusProps}\n className={classNames(styles, 'spectrum-ColorWheel-slider')}\n {...inputProps}\n ref={inputRef}\n />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.js.map"}
|
|
@@ -53,6 +53,7 @@ const $37ba4dcb2e5337d9$export$f80663f808113381 = /*#__PURE__*/ (0, $jYwsr$react
|
|
|
53
53
|
let { styleProps: styleProps } = (0, $63d03c54ca5e4b88$export$b8e6fb9d2dff3f41)(props);
|
|
54
54
|
let [wheelRadius, setWheelRadius] = (0, $jYwsr$useState)(0);
|
|
55
55
|
let [wheelThickness, setWheelThickness] = (0, $jYwsr$useState)($37ba4dcb2e5337d9$var$WHEEL_THICKNESS);
|
|
56
|
+
// oxlint-disable-next-line react/react-compiler
|
|
56
57
|
let resizeHandler = (0, $jYwsr$useCallback)(()=>{
|
|
57
58
|
if (containerRef.current) {
|
|
58
59
|
setWheelRadius(containerRef.current.offsetWidth / 2);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAyBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAiC;IAEjC,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,wBAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,yCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OACb,gBAAgB,CAAC,aAAa,OAAO,EACrC,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EACrD;QACE,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GACA,OACA;IAGF,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,uDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAEtB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,gCAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;sBACnD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;QACd,KAAK;;AAKf","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps\n extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n /** The outer diameter of the ColorWheel. */\n size?: DimensionValue;\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(\n props: SpectrumColorWheelProps,\n ref: FocusableRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window\n .getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useLayoutEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel(\n {\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n },\n state,\n inputRef\n );\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )}\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input\n {...focusProps}\n className={classNames(styles, 'spectrum-ColorWheel-slider')}\n {...inputProps}\n ref={inputRef}\n />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.mjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAyBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAiC;IAEjC,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,wBAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,yCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEnD,gDAAgD;IAChD,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OACb,gBAAgB,CAAC,aAAa,OAAO,EACrC,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EACrD;QACE,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GACA,OACA;IAGF,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,uDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAEtB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,gCAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;sBACnD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;QACd,KAAK;;AAKf","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps\n extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n /** The outer diameter of the ColorWheel. */\n size?: DimensionValue;\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(\n props: SpectrumColorWheelProps,\n ref: FocusableRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n // oxlint-disable-next-line react/react-compiler\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window\n .getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useLayoutEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel(\n {\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n },\n state,\n inputRef\n );\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )}\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input\n {...focusProps}\n className={classNames(styles, 'spectrum-ColorWheel-slider')}\n {...inputProps}\n ref={inputRef}\n />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.mjs.map"}
|
|
@@ -79,6 +79,7 @@ $parcel$export(module.exports, "ComboBox", function () { return $79361449ae3dc5a
|
|
|
79
79
|
|
|
80
80
|
|
|
81
81
|
const $79361449ae3dc5a0$export$72b9695b8216309a = /*#__PURE__*/ (0, ($parcel$interopDefault($h6nAh$react))).forwardRef(function ComboBox(props, ref) {
|
|
82
|
+
// oxlint-disable-next-line react/react-compiler
|
|
82
83
|
props = (0, $544fc82701fc93e9$exports.useProviderProps)(props);
|
|
83
84
|
props = (0, $1af2ca8553741739$exports.useFormProps)(props);
|
|
84
85
|
let hasWarned = (0, $h6nAh$react.useRef)(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from 'react-aria/useButton';\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n AsyncLoadable,\n DimensionValue,\n DOMRefValue,\n FocusableRef,\n FocusableRefValue,\n LoadingState,\n SingleSelection,\n SpectrumFieldValidation,\n SpectrumLabelableProps,\n SpectrumTextInputBase,\n StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n ComboBoxValidationValue,\n MenuTriggerAction,\n useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n extends\n SpectrumTextInputBase,\n Omit<\n AriaComboBoxProps<T>,\n | 'menuTrigger'\n | 'isInvalid'\n | 'validationState'\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n SpectrumFieldValidation<ComboBoxValidationValue>,\n SpectrumLabelableProps,\n StyleProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n * mobile ComboBox experience.\n *\n * @default 'input'\n */\n menuTrigger?: MenuTriggerAction;\n /** Whether the ComboBox should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end';\n /**\n * Direction the menu will render relative to the ComboBox.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * The current loading state of the ComboBox. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n * the dropdown is always equal to the combobox's width.\n */\n menuWidth?: DimensionValue;\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form. When\n * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n *\n * @default 'text'\n */\n formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n props: SpectrumComboBoxProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text'\n );\n hasWarned.current = true;\n }\n }, [props.placeholder]);\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n props: SpectrumComboBoxProps<any>,\n ref: FocusableRef<HTMLElement>\n) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n });\n let layout = useListBoxLayout();\n\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet\n ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef}\n />\n </Field>\n {name && formValue === 'key' && (\n <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n )}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n 'spectrum-InputGroup-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() =>\n isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading'\n ? stringFormatter.format('loading')\n : stringFormatter.format('noResults')}\n </span>\n )\n }\n />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n triggerProps: AriaButtonProps;\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>;\n style?: React.CSSProperties;\n className?: string;\n isOpen?: boolean;\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(\n props: ComboBoxInputProps,\n ref: ForwardedRef<HTMLElement | null>\n) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(styles, 'spectrum-InputGroup-input-circleLoader')\n )}\n />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n if (prevIsLoading !== isLoading && !isLoading) {\n setShowLoading(false);\n setPrevIsLoading(isLoading);\n }\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n <FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )}>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={\n showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n }\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing\n />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"ComboBox.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from 'react-aria/useButton';\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n AsyncLoadable,\n DimensionValue,\n DOMRefValue,\n FocusableRef,\n FocusableRefValue,\n LoadingState,\n SingleSelection,\n SpectrumFieldValidation,\n SpectrumLabelableProps,\n SpectrumTextInputBase,\n StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n ComboBoxValidationValue,\n MenuTriggerAction,\n useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n extends\n SpectrumTextInputBase,\n Omit<\n AriaComboBoxProps<T>,\n | 'menuTrigger'\n | 'isInvalid'\n | 'validationState'\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n SpectrumFieldValidation<ComboBoxValidationValue>,\n SpectrumLabelableProps,\n StyleProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n * mobile ComboBox experience.\n *\n * @default 'input'\n */\n menuTrigger?: MenuTriggerAction;\n /** Whether the ComboBox should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end';\n /**\n * Direction the menu will render relative to the ComboBox.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * The current loading state of the ComboBox. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n * the dropdown is always equal to the combobox's width.\n */\n menuWidth?: DimensionValue;\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form. When\n * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n *\n * @default 'text'\n */\n formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n props: SpectrumComboBoxProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n // oxlint-disable-next-line react/react-compiler\n props = useProviderProps(props);\n props = useFormProps(props);\n\n let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text'\n );\n hasWarned.current = true;\n }\n }, [props.placeholder]);\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n props: SpectrumComboBoxProps<any>,\n ref: FocusableRef<HTMLElement>\n) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n });\n let layout = useListBoxLayout();\n\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet\n ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef}\n />\n </Field>\n {name && formValue === 'key' && (\n <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n )}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n 'spectrum-InputGroup-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() =>\n isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading'\n ? stringFormatter.format('loading')\n : stringFormatter.format('noResults')}\n </span>\n )\n }\n />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n triggerProps: AriaButtonProps;\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>;\n style?: React.CSSProperties;\n className?: string;\n isOpen?: boolean;\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(\n props: ComboBoxInputProps,\n ref: ForwardedRef<HTMLElement | null>\n) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(styles, 'spectrum-InputGroup-input-circleLoader')\n )}\n />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n if (prevIsLoading !== isLoading && !isLoading) {\n setShowLoading(false);\n setPrevIsLoading(isLoading);\n }\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n <FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )}>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={\n showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n }\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing\n />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"ComboBox.cjs.map"}
|
|
@@ -73,6 +73,7 @@ function $parcel$interopDefault(a) {
|
|
|
73
73
|
|
|
74
74
|
|
|
75
75
|
const $74a97b68e98f70c1$export$72b9695b8216309a = /*#__PURE__*/ (0, $lKiYO$react).forwardRef(function ComboBox(props, ref) {
|
|
76
|
+
// oxlint-disable-next-line react/react-compiler
|
|
76
77
|
props = (0, $089943c7a219141c$export$521c373ccc32c300)(props);
|
|
77
78
|
props = (0, $d23ca6800ac02cf1$export$a6b5be5c6b451665)(props);
|
|
78
79
|
let hasWarned = (0, $lKiYO$useRef)(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from 'react-aria/useButton';\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n AsyncLoadable,\n DimensionValue,\n DOMRefValue,\n FocusableRef,\n FocusableRefValue,\n LoadingState,\n SingleSelection,\n SpectrumFieldValidation,\n SpectrumLabelableProps,\n SpectrumTextInputBase,\n StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n ComboBoxValidationValue,\n MenuTriggerAction,\n useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n extends\n SpectrumTextInputBase,\n Omit<\n AriaComboBoxProps<T>,\n | 'menuTrigger'\n | 'isInvalid'\n | 'validationState'\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n SpectrumFieldValidation<ComboBoxValidationValue>,\n SpectrumLabelableProps,\n StyleProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n * mobile ComboBox experience.\n *\n * @default 'input'\n */\n menuTrigger?: MenuTriggerAction;\n /** Whether the ComboBox should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end';\n /**\n * Direction the menu will render relative to the ComboBox.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * The current loading state of the ComboBox. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n * the dropdown is always equal to the combobox's width.\n */\n menuWidth?: DimensionValue;\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form. When\n * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n *\n * @default 'text'\n */\n formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n props: SpectrumComboBoxProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text'\n );\n hasWarned.current = true;\n }\n }, [props.placeholder]);\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n props: SpectrumComboBoxProps<any>,\n ref: FocusableRef<HTMLElement>\n) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n });\n let layout = useListBoxLayout();\n\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet\n ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef}\n />\n </Field>\n {name && formValue === 'key' && (\n <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n )}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n 'spectrum-InputGroup-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() =>\n isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading'\n ? stringFormatter.format('loading')\n : stringFormatter.format('noResults')}\n </span>\n )\n }\n />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n triggerProps: AriaButtonProps;\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>;\n style?: React.CSSProperties;\n className?: string;\n isOpen?: boolean;\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(\n props: ComboBoxInputProps,\n ref: ForwardedRef<HTMLElement | null>\n) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(styles, 'spectrum-InputGroup-input-circleLoader')\n )}\n />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n if (prevIsLoading !== isLoading && !isLoading) {\n setShowLoading(false);\n setPrevIsLoading(isLoading);\n }\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n <FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )}>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={\n showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n }\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing\n />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"ComboBox.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from 'react-aria/useButton';\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n AsyncLoadable,\n DimensionValue,\n DOMRefValue,\n FocusableRef,\n FocusableRefValue,\n LoadingState,\n SingleSelection,\n SpectrumFieldValidation,\n SpectrumLabelableProps,\n SpectrumTextInputBase,\n StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n ComboBoxValidationValue,\n MenuTriggerAction,\n useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n extends\n SpectrumTextInputBase,\n Omit<\n AriaComboBoxProps<T>,\n | 'menuTrigger'\n | 'isInvalid'\n | 'validationState'\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n SpectrumFieldValidation<ComboBoxValidationValue>,\n SpectrumLabelableProps,\n StyleProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n * mobile ComboBox experience.\n *\n * @default 'input'\n */\n menuTrigger?: MenuTriggerAction;\n /** Whether the ComboBox should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end';\n /**\n * Direction the menu will render relative to the ComboBox.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * The current loading state of the ComboBox. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n * the dropdown is always equal to the combobox's width.\n */\n menuWidth?: DimensionValue;\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form. When\n * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n *\n * @default 'text'\n */\n formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n props: SpectrumComboBoxProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n // oxlint-disable-next-line react/react-compiler\n props = useProviderProps(props);\n props = useFormProps(props);\n\n let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text'\n );\n hasWarned.current = true;\n }\n }, [props.placeholder]);\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n props: SpectrumComboBoxProps<any>,\n ref: FocusableRef<HTMLElement>\n) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n });\n let layout = useListBoxLayout();\n\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet\n ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef}\n />\n </Field>\n {name && formValue === 'key' && (\n <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n )}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n 'spectrum-InputGroup-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() =>\n isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading'\n ? stringFormatter.format('loading')\n : stringFormatter.format('noResults')}\n </span>\n )\n }\n />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n triggerProps: AriaButtonProps;\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>;\n style?: React.CSSProperties;\n className?: string;\n isOpen?: boolean;\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(\n props: ComboBoxInputProps,\n ref: ForwardedRef<HTMLElement | null>\n) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(styles, 'spectrum-InputGroup-input-circleLoader')\n )}\n />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n if (prevIsLoading !== isLoading && !isLoading) {\n setShowLoading(false);\n setPrevIsLoading(isLoading);\n }\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n <FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )}>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={\n showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n }\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing\n />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"ComboBox.js.map"}
|
|
@@ -73,6 +73,7 @@ function $parcel$interopDefault(a) {
|
|
|
73
73
|
|
|
74
74
|
|
|
75
75
|
const $7615e9b07e5d1703$export$72b9695b8216309a = /*#__PURE__*/ (0, $hKTE3$react).forwardRef(function ComboBox(props, ref) {
|
|
76
|
+
// oxlint-disable-next-line react/react-compiler
|
|
76
77
|
props = (0, $71dfb0e0358a12de$export$521c373ccc32c300)(props);
|
|
77
78
|
props = (0, $c29c48d4ef19ffc4$export$a6b5be5c6b451665)(props);
|
|
78
79
|
let hasWarned = (0, $hKTE3$useRef)(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from 'react-aria/useButton';\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n AsyncLoadable,\n DimensionValue,\n DOMRefValue,\n FocusableRef,\n FocusableRefValue,\n LoadingState,\n SingleSelection,\n SpectrumFieldValidation,\n SpectrumLabelableProps,\n SpectrumTextInputBase,\n StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n ComboBoxValidationValue,\n MenuTriggerAction,\n useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n extends\n SpectrumTextInputBase,\n Omit<\n AriaComboBoxProps<T>,\n | 'menuTrigger'\n | 'isInvalid'\n | 'validationState'\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n SpectrumFieldValidation<ComboBoxValidationValue>,\n SpectrumLabelableProps,\n StyleProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n * mobile ComboBox experience.\n *\n * @default 'input'\n */\n menuTrigger?: MenuTriggerAction;\n /** Whether the ComboBox should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end';\n /**\n * Direction the menu will render relative to the ComboBox.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * The current loading state of the ComboBox. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n * the dropdown is always equal to the combobox's width.\n */\n menuWidth?: DimensionValue;\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form. When\n * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n *\n * @default 'text'\n */\n formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n props: SpectrumComboBoxProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text'\n );\n hasWarned.current = true;\n }\n }, [props.placeholder]);\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n props: SpectrumComboBoxProps<any>,\n ref: FocusableRef<HTMLElement>\n) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n });\n let layout = useListBoxLayout();\n\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet\n ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef}\n />\n </Field>\n {name && formValue === 'key' && (\n <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n )}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n 'spectrum-InputGroup-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() =>\n isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading'\n ? stringFormatter.format('loading')\n : stringFormatter.format('noResults')}\n </span>\n )\n }\n />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n triggerProps: AriaButtonProps;\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>;\n style?: React.CSSProperties;\n className?: string;\n isOpen?: boolean;\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(\n props: ComboBoxInputProps,\n ref: ForwardedRef<HTMLElement | null>\n) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(styles, 'spectrum-InputGroup-input-circleLoader')\n )}\n />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n if (prevIsLoading !== isLoading && !isLoading) {\n setShowLoading(false);\n setPrevIsLoading(isLoading);\n }\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n <FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )}>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={\n showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n }\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing\n />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from 'react-aria/useButton';\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n AsyncLoadable,\n DimensionValue,\n DOMRefValue,\n FocusableRef,\n FocusableRefValue,\n LoadingState,\n SingleSelection,\n SpectrumFieldValidation,\n SpectrumLabelableProps,\n SpectrumTextInputBase,\n StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n ComboBoxValidationValue,\n MenuTriggerAction,\n useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n extends\n SpectrumTextInputBase,\n Omit<\n AriaComboBoxProps<T>,\n | 'menuTrigger'\n | 'isInvalid'\n | 'validationState'\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n SpectrumFieldValidation<ComboBoxValidationValue>,\n SpectrumLabelableProps,\n StyleProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n * mobile ComboBox experience.\n *\n * @default 'input'\n */\n menuTrigger?: MenuTriggerAction;\n /** Whether the ComboBox should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end';\n /**\n * Direction the menu will render relative to the ComboBox.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * The current loading state of the ComboBox. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n * the dropdown is always equal to the combobox's width.\n */\n menuWidth?: DimensionValue;\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form. When\n * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n *\n * @default 'text'\n */\n formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n props: SpectrumComboBoxProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n // oxlint-disable-next-line react/react-compiler\n props = useProviderProps(props);\n props = useFormProps(props);\n\n let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text'\n );\n hasWarned.current = true;\n }\n }, [props.placeholder]);\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n props: SpectrumComboBoxProps<any>,\n ref: FocusableRef<HTMLElement>\n) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n });\n let layout = useListBoxLayout();\n\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet\n ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef}\n />\n </Field>\n {name && formValue === 'key' && (\n <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n )}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n 'spectrum-InputGroup-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() =>\n isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading'\n ? stringFormatter.format('loading')\n : stringFormatter.format('noResults')}\n </span>\n )\n }\n />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n triggerProps: AriaButtonProps;\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>;\n style?: React.CSSProperties;\n className?: string;\n isOpen?: boolean;\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(\n props: ComboBoxInputProps,\n ref: ForwardedRef<HTMLElement | null>\n) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(styles, 'spectrum-InputGroup-input-circleLoader')\n )}\n />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n if (prevIsLoading !== isLoading && !isLoading) {\n setShowLoading(false);\n setPrevIsLoading(isLoading);\n }\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n <FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )}>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={\n showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n }\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing\n />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}
|
|
@@ -106,6 +106,7 @@ $parcel$export(module.exports, "MobileComboBox", function () { return $72900fdae
|
|
|
106
106
|
|
|
107
107
|
|
|
108
108
|
const $72900fdaeb95a933$export$7637df911c069b4d = /*#__PURE__*/ (0, ($parcel$interopDefault($9dfug$react))).forwardRef(function MobileComboBox(props, ref) {
|
|
109
|
+
// oxlint-disable-next-line react/react-compiler
|
|
109
110
|
props = (0, $544fc82701fc93e9$exports.useProviderProps)(props);
|
|
110
111
|
let { isQuiet: isQuiet, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationBehavior: validationBehavior, name: name, formValue: formValue = 'text', allowsCustomValue: allowsCustomValue } = props;
|
|
111
112
|
if (allowsCustomValue) formValue = 'text';
|
|
@@ -141,6 +142,7 @@ const $72900fdaeb95a933$export$7637df911c069b4d = /*#__PURE__*/ (0, ($parcel$int
|
|
|
141
142
|
errorMessage: errorMessage
|
|
142
143
|
});
|
|
143
144
|
// Focus the button and show focus ring when clicking on the label
|
|
145
|
+
// oxlint-disable-next-line react/react-compiler
|
|
144
146
|
labelProps.onClick = ()=>{
|
|
145
147
|
if (!props.isDisabled) {
|
|
146
148
|
buttonRef.current?.focus();
|
|
@@ -287,6 +289,7 @@ function $72900fdaeb95a933$var$ComboBoxTray(props) {
|
|
|
287
289
|
...props,
|
|
288
290
|
// completionMode,
|
|
289
291
|
layoutDelegate: layout,
|
|
292
|
+
// oxlint-disable-next-line react/react-compiler
|
|
290
293
|
buttonRef: (0, $65aea7b37663976b$exports.unwrapDOMRef)(buttonRef),
|
|
291
294
|
popoverRef: popoverRef,
|
|
292
295
|
listBoxRef: listBoxRef,
|
|
@@ -313,9 +316,13 @@ function $72900fdaeb95a933$var$ComboBoxTray(props) {
|
|
|
313
316
|
// "double tap to edit text", as with a textbox or searchbox. We'd like double tapping to
|
|
314
317
|
// open the virtual keyboard rather than closing the tray.
|
|
315
318
|
// Unlike "combobox", "aria-expanded" is not a valid attribute on "searchbox".
|
|
319
|
+
// oxlint-disable-next-line react/react-compiler
|
|
316
320
|
inputProps.role = 'searchbox';
|
|
321
|
+
// oxlint-disable-next-line react/react-compiler
|
|
317
322
|
inputProps['aria-haspopup'] = 'listbox';
|
|
323
|
+
// oxlint-disable-next-line react/react-compiler
|
|
318
324
|
delete inputProps['aria-expanded'];
|
|
325
|
+
// oxlint-disable-next-line react/react-compiler
|
|
319
326
|
delete inputProps.onTouchEnd;
|
|
320
327
|
let clearButton = /*#__PURE__*/ (0, ($parcel$interopDefault($9dfug$react))).createElement((0, $0fc8553a4214494f$exports.ClearButton), {
|
|
321
328
|
preventFocus: true,
|
|
@@ -368,6 +375,7 @@ function $72900fdaeb95a933$var$ComboBoxTray(props) {
|
|
|
368
375
|
}
|
|
369
376
|
} else if (loadingState !== 'filtering') {
|
|
370
377
|
// If loading is no longer happening, clear any timers and hide the loading circle
|
|
378
|
+
// oxlint-disable-next-line react/react-compiler
|
|
371
379
|
setShowLoading(false);
|
|
372
380
|
if (timeout.current) clearTimeout(timeout.current);
|
|
373
381
|
timeout.current = null;
|