@adobe/react-spectrum 3.47.1 → 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/accordion_vars.css +66 -48
- package/dist/private/accordion_vars.css.map +1 -1
- 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/actionbar/actionbar.css +59 -57
- package/dist/private/actionbar/actionbar.css.map +1 -1
- package/dist/private/actiongroup/ActionGroup.cjs +6 -2
- package/dist/private/actiongroup/ActionGroup.cjs.map +1 -1
- package/dist/private/actiongroup/ActionGroup.js +6 -2
- package/dist/private/actiongroup/ActionGroup.js.map +1 -1
- package/dist/private/actiongroup/ActionGroup.mjs +6 -2
- package/dist/private/actiongroup/ActionGroup.mjs.map +1 -1
- package/dist/private/actiongroup_vars.css +124 -114
- package/dist/private/actiongroup_vars.css.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/autocomplete/searchautocomplete.css +6 -6
- package/dist/private/autocomplete/searchautocomplete.css.map +1 -1
- package/dist/private/avatar_vars.css +12 -7
- package/dist/private/avatar_vars.css.map +1 -1
- package/dist/private/badge_vars.css +76 -68
- package/dist/private/badge_vars.css.map +1 -1
- package/dist/private/barloader_vars.css +132 -112
- package/dist/private/barloader_vars.css.map +1 -1
- package/dist/private/breadcrumb_vars.css +182 -148
- package/dist/private/breadcrumb_vars.css.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/button_vars.css +822 -785
- package/dist/private/button_vars.css.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/buttongroup_vars.css +25 -24
- package/dist/private/buttongroup_vars.css.map +1 -1
- package/dist/private/buttongroup_vars_css.cjs +5 -5
- package/dist/private/buttongroup_vars_css.mjs +5 -5
- package/dist/private/calendar/CalendarBase.cjs.map +1 -1
- package/dist/private/calendar/CalendarBase.js.map +1 -1
- package/dist/private/calendar/CalendarBase.mjs.map +1 -1
- package/dist/private/calendar_vars.css +280 -256
- package/dist/private/calendar_vars.css.map +1 -1
- package/dist/private/card/BaseLayout.cjs +2 -2
- package/dist/private/card/BaseLayout.cjs.map +1 -1
- package/dist/private/card/BaseLayout.js +2 -2
- package/dist/private/card/BaseLayout.js.map +1 -1
- package/dist/private/card/BaseLayout.mjs +2 -2
- package/dist/private/card/BaseLayout.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/card_vars.css +995 -907
- package/dist/private/card_vars.css.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/checkbox_vars.css +318 -219
- package/dist/private/checkbox_vars.css.map +1 -1
- package/dist/private/circleloader_vars.css +99 -85
- package/dist/private/circleloader_vars.css.map +1 -1
- package/dist/private/color/ColorEditor.cjs.map +1 -1
- package/dist/private/color/ColorEditor.js.map +1 -1
- package/dist/private/color/ColorEditor.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.css +28 -14
- package/dist/private/color/ColorPicker.css.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/color/colorfield.css +3 -3
- package/dist/private/color/colorfield.css.map +1 -1
- package/dist/private/colorarea_vars.css +36 -29
- package/dist/private/colorarea_vars.css.map +1 -1
- package/dist/private/colorhandle_vars.css +23 -23
- package/dist/private/colorloupe_vars.css +5 -5
- package/dist/private/colorloupe_vars.css.map +1 -1
- package/dist/private/colorslider_vars.css +34 -34
- package/dist/private/colorslider_vars.css.map +1 -1
- package/dist/private/colorwheel_vars.css +44 -38
- package/dist/private/colorwheel_vars.css.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/combobox/combobox.css +6 -6
- package/dist/private/combobox/combobox.css.map +1 -1
- package/dist/private/contextualhelp/ContextualHelp.cjs.map +1 -1
- package/dist/private/contextualhelp/ContextualHelp.js.map +1 -1
- package/dist/private/contextualhelp/ContextualHelp.mjs.map +1 -1
- package/dist/private/contextualhelp_vars.css +13 -13
- package/dist/private/contextualhelp_vars.css.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/datepicker/styles.css +33 -31
- package/dist/private/datepicker/styles.css.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/dialog_vars.css +216 -180
- package/dist/private/dialog_vars.css.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/dropdown_vars.css +150 -114
- package/dist/private/dropdown_vars.css.map +1 -1
- package/dist/private/dropzone/DropZone.cjs.map +1 -1
- package/dist/private/dropzone/DropZone.js.map +1 -1
- package/dist/private/dropzone/DropZone.mjs.map +1 -1
- package/dist/private/dropzone_vars.css +114 -85
- package/dist/private/dropzone_vars.css.map +1 -1
- package/dist/private/fieldgroup_vars.css +54 -46
- package/dist/private/fieldgroup_vars.css.map +1 -1
- package/dist/private/fieldlabel_vars.css +183 -169
- package/dist/private/fieldlabel_vars.css.map +1 -1
- package/dist/private/helptext_vars.css +83 -69
- package/dist/private/helptext_vars.css.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/icon_vars.css +52 -36
- package/dist/private/icon_vars.css.map +1 -1
- package/dist/private/illustratedmessage_vars.css +33 -31
- package/dist/private/illustratedmessage_vars.css.map +1 -1
- package/dist/private/inlinealert/InlineAlert.cjs.map +1 -1
- package/dist/private/inlinealert/InlineAlert.js.map +1 -1
- package/dist/private/inlinealert/InlineAlert.mjs.map +1 -1
- package/dist/private/inlinealert_vars.css +54 -46
- package/dist/private/inlinealert_vars.css.map +1 -1
- package/dist/private/inputgroup_vars.css +499 -319
- package/dist/private/inputgroup_vars.css.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/label/Label.cjs.map +1 -1
- package/dist/private/label/Label.js.map +1 -1
- package/dist/private/label/Label.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/link_vars.css +101 -85
- package/dist/private/link_vars.css.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/list/styles.css +425 -333
- package/dist/private/list/styles.css.map +1 -1
- package/dist/private/listbox/ListBoxBase.cjs.map +1 -1
- package/dist/private/listbox/ListBoxBase.js.map +1 -1
- package/dist/private/listbox/ListBoxBase.mjs.map +1 -1
- package/dist/private/menu/ActionMenu.cjs.map +1 -1
- package/dist/private/menu/ActionMenu.js.map +1 -1
- package/dist/private/menu/ActionMenu.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/Menu.cjs.map +1 -1
- package/dist/private/menu/Menu.js.map +1 -1
- package/dist/private/menu/Menu.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/menu_vars.css +178 -160
- package/dist/private/menu_vars.css.map +1 -1
- package/dist/private/modal_vars.css +64 -54
- package/dist/private/modal_vars.css.map +1 -1
- package/dist/private/overlays/overlays.css +7 -5
- package/dist/private/overlays/overlays.css.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/page_vars.css +54 -46
- package/dist/private/page_vars.css.map +1 -1
- package/dist/private/picker/Picker.cjs.map +1 -1
- package/dist/private/picker/Picker.js.map +1 -1
- package/dist/private/picker/Picker.mjs.map +1 -1
- package/dist/private/popover_vars.css +105 -83
- package/dist/private/popover_vars.css.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/radio_vars.css +257 -163
- package/dist/private/radio_vars.css.map +1 -1
- package/dist/private/rule_vars.css +73 -63
- package/dist/private/rule_vars.css.map +1 -1
- package/dist/private/search_vars.css +95 -87
- package/dist/private/search_vars.css.map +1 -1
- package/dist/private/slider/RangeSlider.cjs.map +1 -1
- package/dist/private/slider/RangeSlider.js.map +1 -1
- package/dist/private/slider/RangeSlider.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/slider_vars.css +516 -402
- package/dist/private/slider_vars.css.map +1 -1
- package/dist/private/statuslight_vars.css +76 -68
- package/dist/private/statuslight_vars.css.map +1 -1
- package/dist/private/steplist/StepListItem.cjs.map +1 -1
- package/dist/private/steplist/StepListItem.js.map +1 -1
- package/dist/private/steplist/StepListItem.mjs.map +1 -1
- package/dist/private/steplist_vars.css +371 -297
- package/dist/private/steplist_vars.css.map +1 -1
- package/dist/private/stepper_vars.css +557 -438
- package/dist/private/stepper_vars.css.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/table/table.css +103 -95
- package/dist/private/table/table.css.map +1 -1
- package/dist/private/table_vars.css +458 -350
- package/dist/private/table_vars.css.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/tabs_vars.css +319 -281
- package/dist/private/tabs_vars.css.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/tags_vars.css +167 -149
- package/dist/private/tags_vars.css.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/textfield_vars.css +278 -250
- package/dist/private/textfield_vars.css.map +1 -1
- package/dist/private/toast/Toast.cjs.map +1 -1
- package/dist/private/toast/Toast.js.map +1 -1
- package/dist/private/toast/Toast.mjs.map +1 -1
- package/dist/private/toast/toastContainer.css +64 -56
- package/dist/private/toast/toastContainer.css.map +1 -1
- package/dist/private/toast_vars.css +5 -3
- package/dist/private/toast_vars.css.map +1 -1
- package/dist/private/toggle_vars.css +287 -211
- package/dist/private/toggle_vars.css.map +1 -1
- package/dist/private/tooltip_vars.css +150 -127
- package/dist/private/tooltip_vars.css.map +1 -1
- package/dist/private/tray_vars.css +54 -46
- package/dist/private/tray_vars.css.map +1 -1
- package/dist/private/typography_index.css +54 -46
- package/dist/private/typography_index.css.map +1 -1
- package/dist/private/underlay_vars.css +58 -50
- package/dist/private/underlay_vars.css.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/private/well_vars.css +54 -46
- package/dist/private/well_vars.css.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":"AA4DA
|
|
1
|
+
{"mappings":"AA4DA;;;;EAKE;;;;EAKA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAQA;;;;EAIA;;;;;AAMF;;;;;;;EAUE;;;;;;;;;;;;;EAsBE;;;;;;;;AAQF;;;;;EAKE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuMF;;;;;;;EAQE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+GE;;;;;;;;;;;AAWA;;;;;;;;;;EASE;;;;;;;;;;;;;;;;EAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmEA;;;;;;;;IASA;;;;;;;;IAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEJ;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgHF;;;;;;;;;;;;;;;;;;;EAmBM;;;;;;;;;;;;;;;IAoBF;;;;IAIA;;;;;;;;;MASE;;;;;;;;;;;;;;EAgBN;IACE;;;;;;;;;;;;EAcA;;;;;;;AAOE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CE","sources":["packages/@adobe/spectrum-css-temp/components/table/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"table_vars.css.map"}
|
|
@@ -278,7 +278,8 @@ function $29c175e2cd645f35$export$e51a686c67fdaa2d(props) {
|
|
|
278
278
|
let stylePropsFinal = orientation === 'vertical' ? styleProps : {
|
|
279
279
|
style: collapseStyle
|
|
280
280
|
};
|
|
281
|
-
if (collapsed && orientation !== 'vertical')
|
|
281
|
+
if (collapsed && orientation !== 'vertical') // oxlint-disable-next-line react/react-compiler
|
|
282
|
+
tabListProps['aria-hidden'] = true;
|
|
282
283
|
let tabListclassName = (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($d196b45f15f7fd5c$exports))), 'spectrum-TabsPanel-tabs');
|
|
283
284
|
const tabContent = /*#__PURE__*/ (0, ($parcel$interopDefault($lo7c6$react))).createElement("div", {
|
|
284
285
|
...stylePropsFinal,
|
|
@@ -337,7 +338,8 @@ function $29c175e2cd645f35$var$TabPanel(props) {
|
|
|
337
338
|
let ref = (0, $lo7c6$react.useRef)(null);
|
|
338
339
|
const { tabPanelProps: tabPanelProps } = (0, $lo7c6$reactariauseTabList.useTabPanel)(props, tabListState, ref);
|
|
339
340
|
let { styleProps: styleProps } = (0, $b8f90d51c4908137$exports.useStyleProps)(props);
|
|
340
|
-
if (ctxTabPanelProps['aria-labelledby'])
|
|
341
|
+
if (ctxTabPanelProps['aria-labelledby']) // oxlint-disable-next-line react/react-compiler
|
|
342
|
+
tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
|
|
341
343
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($lo7c6$react))).createElement((0, $lo7c6$reactariaFocusRing.FocusRing), {
|
|
342
344
|
focusRingClass: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($d196b45f15f7fd5c$exports))), 'focus-ring')
|
|
343
345
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($lo7c6$react))).createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tabs/Tabs.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 {\n AriaLabelingProps,\n CollectionChildren,\n DOMProps,\n DOMRef,\n DOMRefValue,\n Key,\n Node,\n Orientation,\n RefObject,\n SingleSelection,\n StyleProps\n} from '@react-types/shared';\nimport {AriaTabPanelProps, useTab, useTabList, useTabPanel} from 'react-aria/useTabList';\nimport {classNames} from '../utils/classNames';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {Item} from 'react-stately/Item';\nimport {ListCollection} from 'react-stately/private/list/ListCollection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Picker, SpectrumPickerProps} from '../picker/Picker';\nimport React, {\n CSSProperties,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from 'react-stately/useTabListState';\nimport {Text} from '../text/Text';\nimport {unwrapDOMRef, useDOMRef} from '../utils/useDOMRef';\nimport {useCollection} from 'react-stately/private/collections/useCollection';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTabsProps<T>\n extends\n Omit<\n SingleSelection,\n | 'onSelectionChange'\n | 'disallowEmptySelection'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n >,\n AriaLabelingProps,\n DOMProps,\n StyleProps {\n /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */\n children: ReactNode;\n /** The item objects for each tab, for dynamic collections. */\n items?: Iterable<T>;\n /**\n * The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise\n * interacted with.\n */\n disabledKeys?: Iterable<Key>;\n /** Whether the Tabs are disabled. */\n isDisabled?: boolean;\n /** Whether the tabs are displayed in a quiet style. */\n isQuiet?: boolean;\n /** Whether the tabs are displayed in an emphasized style. */\n isEmphasized?: boolean;\n /** The amount of space between the tabs. */\n density?: 'compact' | 'regular';\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key) => void;\n /**\n * Whether tabs are activated automatically on focus or manually.\n *\n * @default 'automatic'\n */\n keyboardActivation?: 'automatic' | 'manual';\n /**\n * The orientation of the tabs.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation;\n}\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>;\n tabState: {\n tabListState: TabListState<T> | null;\n setTabListState: (state: TabListState<T>) => void;\n selectedTab: HTMLElement | null;\n collapsed: boolean;\n };\n refs: {\n wrapperRef: RefObject<HTMLDivElement | null>;\n tablistRef: RefObject<HTMLDivElement | null>;\n };\n tabPanelProps: HTMLAttributes<HTMLElement>;\n tabLineState: Array<DOMRect>;\n}\n\nconst TabContext = React.createContext<TabsContext<any> | null>(null);\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The\n * content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Tabs = React.forwardRef(function Tabs<T extends object>(\n props: SpectrumTabsProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(null);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);\n const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);\n let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);\n let prevTabPositions = useRef<DOMRect[]>(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement | null = tablistRef.current.querySelector(\n `[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}\"]`\n );\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs: NodeListOf<Element> =\n tablistRef.current?.querySelectorAll('[role=\"tab\"]') ??\n (new NodeList() as NodeListOf<Element>);\n let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse =\n direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (\n tabDimensions.length !== prevTabPositions.current.length ||\n tabDimensions.some(\n (box, index) =>\n box?.left !== prevTabPositions.current[index]?.left ||\n box?.right !== prevTabPositions.current[index]?.right\n )\n ) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [\n tablistRef,\n wrapperRef,\n direction,\n orientation,\n setCollapsed,\n prevTabPositions,\n setTabPositions\n ]);\n\n useLayoutEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps: HTMLAttributes<HTMLElement> = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>;\n state: TabListState<T>;\n isDisabled?: boolean;\n orientation?: Orientation;\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(styles, 'spectrum-Tabs-item', {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string' ? <Text>{rendered}</Text> : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation;\n selectedTab?: HTMLElement | null;\n selectedKey?: Key | null;\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext)!;\n\n let [style, setStyle] = useState<CSSProperties>({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset =\n direction === 'rtl'\n ? -1 *\n ((selectedTab.offsetParent as HTMLElement)?.offsetWidth -\n selectedTab.offsetWidth -\n selectedTab.offsetLeft)\n : selectedTab.offsetLeft;\n styleObj.transform =\n orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return (\n <div\n className={classNames(styles, 'spectrum-Tabs-selectionIndicator')}\n role=\"presentation\"\n style={style}\n />\n );\n}\n\nexport interface SpectrumTabListProps<T> extends DOMProps, StyleProps {\n /**\n * The tab items to display. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabPanels>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between. The keys of the items\n * within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>): ReactElement {\n const tabContext = useContext(TabContext)!;\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle: React.CSSProperties =\n collapsed && orientation !== 'vertical'\n ? {\n maxWidth: 'calc(100% + 1px)',\n overflow: 'hidden',\n visibility: 'hidden',\n position: 'absolute'\n }\n : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )}>\n {[...state.collection].map(item => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(styles, 'spectrum-TabsPanel-collapseWrapper', styleProps.className)}>\n <TabPicker\n {...props}\n {...tabProps}\n visible={collapsed}\n id={tabPanelProps['aria-labelledby']}\n state={state}\n className={tabListclassName}\n />\n {tabContent}\n </div>\n );\n }\n}\n\nexport interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {\n /**\n * The contents of each tab. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabList>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab. The keys of the items\n * within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>): ReactElement {\n const {tabState, tabProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n\n const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {\n suppressTextValueWarning: true\n });\n const selectedItem =\n tabListState && tabListState.selectedKey != null\n ? collection.getItem(tabListState.selectedKey)\n : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode;\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n let ref = useRef<HTMLDivElement | null>(null);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\n {...styleProps}\n {...tabPanelProps}\n ref={ref}\n className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children' | 'onSelectionChange'> {\n density?: 'compact' | 'regular';\n isEmphasized?: boolean;\n state: TabListState<T>;\n className?: string;\n visible: boolean;\n onSelectionChange?: (key: Key) => void;\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef<DOMRefValue<HTMLDivElement>>(null);\n let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style: React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={key => {\n if (key != null) {\n state.setSelectedKey(key);\n }\n }}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && (\n <TabLine\n orientation=\"horizontal\"\n selectedTab={pickerNode}\n selectedKey={state.selectedKey}\n />\n )}\n </SlotProvider>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"Tabs.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tabs/Tabs.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 {\n AriaLabelingProps,\n CollectionChildren,\n DOMProps,\n DOMRef,\n DOMRefValue,\n Key,\n Node,\n Orientation,\n RefObject,\n SingleSelection,\n StyleProps\n} from '@react-types/shared';\nimport {AriaTabPanelProps, useTab, useTabList, useTabPanel} from 'react-aria/useTabList';\nimport {classNames} from '../utils/classNames';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {Item} from 'react-stately/Item';\nimport {ListCollection} from 'react-stately/private/list/ListCollection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Picker, SpectrumPickerProps} from '../picker/Picker';\nimport React, {\n CSSProperties,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from 'react-stately/useTabListState';\nimport {Text} from '../text/Text';\nimport {unwrapDOMRef, useDOMRef} from '../utils/useDOMRef';\nimport {useCollection} from 'react-stately/private/collections/useCollection';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTabsProps<T>\n extends\n Omit<\n SingleSelection,\n | 'onSelectionChange'\n | 'disallowEmptySelection'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n >,\n AriaLabelingProps,\n DOMProps,\n StyleProps {\n /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */\n children: ReactNode;\n /** The item objects for each tab, for dynamic collections. */\n items?: Iterable<T>;\n /**\n * The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise\n * interacted with.\n */\n disabledKeys?: Iterable<Key>;\n /** Whether the Tabs are disabled. */\n isDisabled?: boolean;\n /** Whether the tabs are displayed in a quiet style. */\n isQuiet?: boolean;\n /** Whether the tabs are displayed in an emphasized style. */\n isEmphasized?: boolean;\n /** The amount of space between the tabs. */\n density?: 'compact' | 'regular';\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key) => void;\n /**\n * Whether tabs are activated automatically on focus or manually.\n *\n * @default 'automatic'\n */\n keyboardActivation?: 'automatic' | 'manual';\n /**\n * The orientation of the tabs.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation;\n}\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>;\n tabState: {\n tabListState: TabListState<T> | null;\n setTabListState: (state: TabListState<T>) => void;\n selectedTab: HTMLElement | null;\n collapsed: boolean;\n };\n refs: {\n wrapperRef: RefObject<HTMLDivElement | null>;\n tablistRef: RefObject<HTMLDivElement | null>;\n };\n tabPanelProps: HTMLAttributes<HTMLElement>;\n tabLineState: Array<DOMRect>;\n}\n\nconst TabContext = React.createContext<TabsContext<any> | null>(null);\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The\n * content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Tabs = React.forwardRef(function Tabs<T extends object>(\n props: SpectrumTabsProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(null);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);\n const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);\n let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);\n let prevTabPositions = useRef<DOMRect[]>(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement | null = tablistRef.current.querySelector(\n `[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}\"]`\n );\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs: NodeListOf<Element> =\n tablistRef.current?.querySelectorAll('[role=\"tab\"]') ??\n (new NodeList() as NodeListOf<Element>);\n let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse =\n direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (\n tabDimensions.length !== prevTabPositions.current.length ||\n tabDimensions.some(\n (box, index) =>\n box?.left !== prevTabPositions.current[index]?.left ||\n box?.right !== prevTabPositions.current[index]?.right\n )\n ) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [\n tablistRef,\n wrapperRef,\n direction,\n orientation,\n setCollapsed,\n prevTabPositions,\n setTabPositions\n ]);\n\n useLayoutEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps: HTMLAttributes<HTMLElement> = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>;\n state: TabListState<T>;\n isDisabled?: boolean;\n orientation?: Orientation;\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(styles, 'spectrum-Tabs-item', {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string' ? <Text>{rendered}</Text> : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation;\n selectedTab?: HTMLElement | null;\n selectedKey?: Key | null;\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext)!;\n\n let [style, setStyle] = useState<CSSProperties>({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset =\n direction === 'rtl'\n ? -1 *\n ((selectedTab.offsetParent as HTMLElement)?.offsetWidth -\n selectedTab.offsetWidth -\n selectedTab.offsetLeft)\n : selectedTab.offsetLeft;\n styleObj.transform =\n orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return (\n <div\n className={classNames(styles, 'spectrum-Tabs-selectionIndicator')}\n role=\"presentation\"\n style={style}\n />\n );\n}\n\nexport interface SpectrumTabListProps<T> extends DOMProps, StyleProps {\n /**\n * The tab items to display. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabPanels>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between. The keys of the items\n * within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>): ReactElement {\n const tabContext = useContext(TabContext)!;\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle: React.CSSProperties =\n collapsed && orientation !== 'vertical'\n ? {\n maxWidth: 'calc(100% + 1px)',\n overflow: 'hidden',\n visibility: 'hidden',\n position: 'absolute'\n }\n : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n // oxlint-disable-next-line react/react-compiler\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )}>\n {[...state.collection].map(item => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(styles, 'spectrum-TabsPanel-collapseWrapper', styleProps.className)}>\n <TabPicker\n {...props}\n {...tabProps}\n visible={collapsed}\n id={tabPanelProps['aria-labelledby']}\n state={state}\n className={tabListclassName}\n />\n {tabContent}\n </div>\n );\n }\n}\n\nexport interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {\n /**\n * The contents of each tab. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabList>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab. The keys of the items\n * within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>): ReactElement {\n const {tabState, tabProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n\n const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {\n suppressTextValueWarning: true\n });\n const selectedItem =\n tabListState && tabListState.selectedKey != null\n ? collection.getItem(tabListState.selectedKey)\n : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode;\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n let ref = useRef<HTMLDivElement | null>(null);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n // oxlint-disable-next-line react/react-compiler\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\n {...styleProps}\n {...tabPanelProps}\n ref={ref}\n className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children' | 'onSelectionChange'> {\n density?: 'compact' | 'regular';\n isEmphasized?: boolean;\n state: TabListState<T>;\n className?: string;\n visible: boolean;\n onSelectionChange?: (key: Key) => void;\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef<DOMRefValue<HTMLDivElement>>(null);\n let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style: React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={key => {\n if (key != null) {\n state.setSelectedKey(key);\n }\n }}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && (\n <TabLine\n orientation=\"horizontal\"\n selectedTab={pickerNode}\n selectedKey={state.selectedKey}\n />\n )}\n </SlotProvider>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"Tabs.cjs.map"}
|
|
@@ -278,7 +278,8 @@ function $89b03460ad791d07$export$e51a686c67fdaa2d(props) {
|
|
|
278
278
|
let stylePropsFinal = orientation === 'vertical' ? styleProps : {
|
|
279
279
|
style: collapseStyle
|
|
280
280
|
};
|
|
281
|
-
if (collapsed && orientation !== 'vertical')
|
|
281
|
+
if (collapsed && orientation !== 'vertical') // oxlint-disable-next-line react/react-compiler
|
|
282
|
+
tabListProps['aria-hidden'] = true;
|
|
282
283
|
let tabListclassName = (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($b4Lwj$tabs_vars_cssmjs))), 'spectrum-TabsPanel-tabs');
|
|
283
284
|
const tabContent = /*#__PURE__*/ (0, $b4Lwj$react).createElement("div", {
|
|
284
285
|
...stylePropsFinal,
|
|
@@ -337,7 +338,8 @@ function $89b03460ad791d07$var$TabPanel(props) {
|
|
|
337
338
|
let ref = (0, $b4Lwj$useRef)(null);
|
|
338
339
|
const { tabPanelProps: tabPanelProps } = (0, $b4Lwj$useTabPanel)(props, tabListState, ref);
|
|
339
340
|
let { styleProps: styleProps } = (0, $120fbea2d95e11ed$export$b8e6fb9d2dff3f41)(props);
|
|
340
|
-
if (ctxTabPanelProps['aria-labelledby'])
|
|
341
|
+
if (ctxTabPanelProps['aria-labelledby']) // oxlint-disable-next-line react/react-compiler
|
|
342
|
+
tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
|
|
341
343
|
return /*#__PURE__*/ (0, $b4Lwj$react).createElement((0, $b4Lwj$FocusRing), {
|
|
342
344
|
focusRingClass: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($b4Lwj$tabs_vars_cssmjs))), 'focus-ring')
|
|
343
345
|
}, /*#__PURE__*/ (0, $b4Lwj$react).createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tabs/Tabs.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 {\n AriaLabelingProps,\n CollectionChildren,\n DOMProps,\n DOMRef,\n DOMRefValue,\n Key,\n Node,\n Orientation,\n RefObject,\n SingleSelection,\n StyleProps\n} from '@react-types/shared';\nimport {AriaTabPanelProps, useTab, useTabList, useTabPanel} from 'react-aria/useTabList';\nimport {classNames} from '../utils/classNames';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {Item} from 'react-stately/Item';\nimport {ListCollection} from 'react-stately/private/list/ListCollection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Picker, SpectrumPickerProps} from '../picker/Picker';\nimport React, {\n CSSProperties,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from 'react-stately/useTabListState';\nimport {Text} from '../text/Text';\nimport {unwrapDOMRef, useDOMRef} from '../utils/useDOMRef';\nimport {useCollection} from 'react-stately/private/collections/useCollection';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTabsProps<T>\n extends\n Omit<\n SingleSelection,\n | 'onSelectionChange'\n | 'disallowEmptySelection'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n >,\n AriaLabelingProps,\n DOMProps,\n StyleProps {\n /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */\n children: ReactNode;\n /** The item objects for each tab, for dynamic collections. */\n items?: Iterable<T>;\n /**\n * The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise\n * interacted with.\n */\n disabledKeys?: Iterable<Key>;\n /** Whether the Tabs are disabled. */\n isDisabled?: boolean;\n /** Whether the tabs are displayed in a quiet style. */\n isQuiet?: boolean;\n /** Whether the tabs are displayed in an emphasized style. */\n isEmphasized?: boolean;\n /** The amount of space between the tabs. */\n density?: 'compact' | 'regular';\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key) => void;\n /**\n * Whether tabs are activated automatically on focus or manually.\n *\n * @default 'automatic'\n */\n keyboardActivation?: 'automatic' | 'manual';\n /**\n * The orientation of the tabs.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation;\n}\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>;\n tabState: {\n tabListState: TabListState<T> | null;\n setTabListState: (state: TabListState<T>) => void;\n selectedTab: HTMLElement | null;\n collapsed: boolean;\n };\n refs: {\n wrapperRef: RefObject<HTMLDivElement | null>;\n tablistRef: RefObject<HTMLDivElement | null>;\n };\n tabPanelProps: HTMLAttributes<HTMLElement>;\n tabLineState: Array<DOMRect>;\n}\n\nconst TabContext = React.createContext<TabsContext<any> | null>(null);\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The\n * content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Tabs = React.forwardRef(function Tabs<T extends object>(\n props: SpectrumTabsProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(null);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);\n const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);\n let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);\n let prevTabPositions = useRef<DOMRect[]>(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement | null = tablistRef.current.querySelector(\n `[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}\"]`\n );\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs: NodeListOf<Element> =\n tablistRef.current?.querySelectorAll('[role=\"tab\"]') ??\n (new NodeList() as NodeListOf<Element>);\n let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse =\n direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (\n tabDimensions.length !== prevTabPositions.current.length ||\n tabDimensions.some(\n (box, index) =>\n box?.left !== prevTabPositions.current[index]?.left ||\n box?.right !== prevTabPositions.current[index]?.right\n )\n ) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [\n tablistRef,\n wrapperRef,\n direction,\n orientation,\n setCollapsed,\n prevTabPositions,\n setTabPositions\n ]);\n\n useLayoutEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps: HTMLAttributes<HTMLElement> = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>;\n state: TabListState<T>;\n isDisabled?: boolean;\n orientation?: Orientation;\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(styles, 'spectrum-Tabs-item', {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string' ? <Text>{rendered}</Text> : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation;\n selectedTab?: HTMLElement | null;\n selectedKey?: Key | null;\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext)!;\n\n let [style, setStyle] = useState<CSSProperties>({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset =\n direction === 'rtl'\n ? -1 *\n ((selectedTab.offsetParent as HTMLElement)?.offsetWidth -\n selectedTab.offsetWidth -\n selectedTab.offsetLeft)\n : selectedTab.offsetLeft;\n styleObj.transform =\n orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return (\n <div\n className={classNames(styles, 'spectrum-Tabs-selectionIndicator')}\n role=\"presentation\"\n style={style}\n />\n );\n}\n\nexport interface SpectrumTabListProps<T> extends DOMProps, StyleProps {\n /**\n * The tab items to display. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabPanels>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between. The keys of the items\n * within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>): ReactElement {\n const tabContext = useContext(TabContext)!;\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle: React.CSSProperties =\n collapsed && orientation !== 'vertical'\n ? {\n maxWidth: 'calc(100% + 1px)',\n overflow: 'hidden',\n visibility: 'hidden',\n position: 'absolute'\n }\n : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )}>\n {[...state.collection].map(item => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(styles, 'spectrum-TabsPanel-collapseWrapper', styleProps.className)}>\n <TabPicker\n {...props}\n {...tabProps}\n visible={collapsed}\n id={tabPanelProps['aria-labelledby']}\n state={state}\n className={tabListclassName}\n />\n {tabContent}\n </div>\n );\n }\n}\n\nexport interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {\n /**\n * The contents of each tab. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabList>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab. The keys of the items\n * within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>): ReactElement {\n const {tabState, tabProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n\n const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {\n suppressTextValueWarning: true\n });\n const selectedItem =\n tabListState && tabListState.selectedKey != null\n ? collection.getItem(tabListState.selectedKey)\n : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode;\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n let ref = useRef<HTMLDivElement | null>(null);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\n {...styleProps}\n {...tabPanelProps}\n ref={ref}\n className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children' | 'onSelectionChange'> {\n density?: 'compact' | 'regular';\n isEmphasized?: boolean;\n state: TabListState<T>;\n className?: string;\n visible: boolean;\n onSelectionChange?: (key: Key) => void;\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef<DOMRefValue<HTMLDivElement>>(null);\n let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style: React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={key => {\n if (key != null) {\n state.setSelectedKey(key);\n }\n }}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && (\n <TabLine\n orientation=\"horizontal\"\n selectedTab={pickerNode}\n selectedKey={state.selectedKey}\n />\n )}\n </SlotProvider>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"Tabs.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tabs/Tabs.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 {\n AriaLabelingProps,\n CollectionChildren,\n DOMProps,\n DOMRef,\n DOMRefValue,\n Key,\n Node,\n Orientation,\n RefObject,\n SingleSelection,\n StyleProps\n} from '@react-types/shared';\nimport {AriaTabPanelProps, useTab, useTabList, useTabPanel} from 'react-aria/useTabList';\nimport {classNames} from '../utils/classNames';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {Item} from 'react-stately/Item';\nimport {ListCollection} from 'react-stately/private/list/ListCollection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Picker, SpectrumPickerProps} from '../picker/Picker';\nimport React, {\n CSSProperties,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from 'react-stately/useTabListState';\nimport {Text} from '../text/Text';\nimport {unwrapDOMRef, useDOMRef} from '../utils/useDOMRef';\nimport {useCollection} from 'react-stately/private/collections/useCollection';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTabsProps<T>\n extends\n Omit<\n SingleSelection,\n | 'onSelectionChange'\n | 'disallowEmptySelection'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n >,\n AriaLabelingProps,\n DOMProps,\n StyleProps {\n /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */\n children: ReactNode;\n /** The item objects for each tab, for dynamic collections. */\n items?: Iterable<T>;\n /**\n * The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise\n * interacted with.\n */\n disabledKeys?: Iterable<Key>;\n /** Whether the Tabs are disabled. */\n isDisabled?: boolean;\n /** Whether the tabs are displayed in a quiet style. */\n isQuiet?: boolean;\n /** Whether the tabs are displayed in an emphasized style. */\n isEmphasized?: boolean;\n /** The amount of space between the tabs. */\n density?: 'compact' | 'regular';\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key) => void;\n /**\n * Whether tabs are activated automatically on focus or manually.\n *\n * @default 'automatic'\n */\n keyboardActivation?: 'automatic' | 'manual';\n /**\n * The orientation of the tabs.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation;\n}\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>;\n tabState: {\n tabListState: TabListState<T> | null;\n setTabListState: (state: TabListState<T>) => void;\n selectedTab: HTMLElement | null;\n collapsed: boolean;\n };\n refs: {\n wrapperRef: RefObject<HTMLDivElement | null>;\n tablistRef: RefObject<HTMLDivElement | null>;\n };\n tabPanelProps: HTMLAttributes<HTMLElement>;\n tabLineState: Array<DOMRect>;\n}\n\nconst TabContext = React.createContext<TabsContext<any> | null>(null);\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The\n * content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Tabs = React.forwardRef(function Tabs<T extends object>(\n props: SpectrumTabsProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(null);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);\n const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);\n let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);\n let prevTabPositions = useRef<DOMRect[]>(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement | null = tablistRef.current.querySelector(\n `[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}\"]`\n );\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs: NodeListOf<Element> =\n tablistRef.current?.querySelectorAll('[role=\"tab\"]') ??\n (new NodeList() as NodeListOf<Element>);\n let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse =\n direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (\n tabDimensions.length !== prevTabPositions.current.length ||\n tabDimensions.some(\n (box, index) =>\n box?.left !== prevTabPositions.current[index]?.left ||\n box?.right !== prevTabPositions.current[index]?.right\n )\n ) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [\n tablistRef,\n wrapperRef,\n direction,\n orientation,\n setCollapsed,\n prevTabPositions,\n setTabPositions\n ]);\n\n useLayoutEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps: HTMLAttributes<HTMLElement> = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>;\n state: TabListState<T>;\n isDisabled?: boolean;\n orientation?: Orientation;\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(styles, 'spectrum-Tabs-item', {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string' ? <Text>{rendered}</Text> : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation;\n selectedTab?: HTMLElement | null;\n selectedKey?: Key | null;\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext)!;\n\n let [style, setStyle] = useState<CSSProperties>({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset =\n direction === 'rtl'\n ? -1 *\n ((selectedTab.offsetParent as HTMLElement)?.offsetWidth -\n selectedTab.offsetWidth -\n selectedTab.offsetLeft)\n : selectedTab.offsetLeft;\n styleObj.transform =\n orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return (\n <div\n className={classNames(styles, 'spectrum-Tabs-selectionIndicator')}\n role=\"presentation\"\n style={style}\n />\n );\n}\n\nexport interface SpectrumTabListProps<T> extends DOMProps, StyleProps {\n /**\n * The tab items to display. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabPanels>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between. The keys of the items\n * within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>): ReactElement {\n const tabContext = useContext(TabContext)!;\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle: React.CSSProperties =\n collapsed && orientation !== 'vertical'\n ? {\n maxWidth: 'calc(100% + 1px)',\n overflow: 'hidden',\n visibility: 'hidden',\n position: 'absolute'\n }\n : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n // oxlint-disable-next-line react/react-compiler\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )}>\n {[...state.collection].map(item => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(styles, 'spectrum-TabsPanel-collapseWrapper', styleProps.className)}>\n <TabPicker\n {...props}\n {...tabProps}\n visible={collapsed}\n id={tabPanelProps['aria-labelledby']}\n state={state}\n className={tabListclassName}\n />\n {tabContent}\n </div>\n );\n }\n}\n\nexport interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {\n /**\n * The contents of each tab. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabList>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab. The keys of the items\n * within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>): ReactElement {\n const {tabState, tabProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n\n const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {\n suppressTextValueWarning: true\n });\n const selectedItem =\n tabListState && tabListState.selectedKey != null\n ? collection.getItem(tabListState.selectedKey)\n : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode;\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n let ref = useRef<HTMLDivElement | null>(null);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n // oxlint-disable-next-line react/react-compiler\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\n {...styleProps}\n {...tabPanelProps}\n ref={ref}\n className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children' | 'onSelectionChange'> {\n density?: 'compact' | 'regular';\n isEmphasized?: boolean;\n state: TabListState<T>;\n className?: string;\n visible: boolean;\n onSelectionChange?: (key: Key) => void;\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef<DOMRefValue<HTMLDivElement>>(null);\n let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style: React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={key => {\n if (key != null) {\n state.setSelectedKey(key);\n }\n }}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && (\n <TabLine\n orientation=\"horizontal\"\n selectedTab={pickerNode}\n selectedKey={state.selectedKey}\n />\n )}\n </SlotProvider>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"Tabs.js.map"}
|
|
@@ -270,7 +270,8 @@ function $c2743f8acf871c83$export$e51a686c67fdaa2d(props) {
|
|
|
270
270
|
let stylePropsFinal = orientation === 'vertical' ? styleProps : {
|
|
271
271
|
style: collapseStyle
|
|
272
272
|
};
|
|
273
|
-
if (collapsed && orientation !== 'vertical')
|
|
273
|
+
if (collapsed && orientation !== 'vertical') // oxlint-disable-next-line react/react-compiler
|
|
274
|
+
tabListProps['aria-hidden'] = true;
|
|
274
275
|
let tabListclassName = (0, $6e6392558d48dfec$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($hUymF$tabs_vars_cssmjs))), 'spectrum-TabsPanel-tabs');
|
|
275
276
|
const tabContent = /*#__PURE__*/ (0, $hUymF$react).createElement("div", {
|
|
276
277
|
...stylePropsFinal,
|
|
@@ -329,7 +330,8 @@ function $c2743f8acf871c83$var$TabPanel(props) {
|
|
|
329
330
|
let ref = (0, $hUymF$useRef)(null);
|
|
330
331
|
const { tabPanelProps: tabPanelProps } = (0, $hUymF$useTabPanel)(props, tabListState, ref);
|
|
331
332
|
let { styleProps: styleProps } = (0, $63d03c54ca5e4b88$export$b8e6fb9d2dff3f41)(props);
|
|
332
|
-
if (ctxTabPanelProps['aria-labelledby'])
|
|
333
|
+
if (ctxTabPanelProps['aria-labelledby']) // oxlint-disable-next-line react/react-compiler
|
|
334
|
+
tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
|
|
333
335
|
return /*#__PURE__*/ (0, $hUymF$react).createElement((0, $hUymF$FocusRing), {
|
|
334
336
|
focusRingClass: (0, $6e6392558d48dfec$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($hUymF$tabs_vars_cssmjs))), 'focus-ring')
|
|
335
337
|
}, /*#__PURE__*/ (0, $hUymF$react).createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tabs/Tabs.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 {\n AriaLabelingProps,\n CollectionChildren,\n DOMProps,\n DOMRef,\n DOMRefValue,\n Key,\n Node,\n Orientation,\n RefObject,\n SingleSelection,\n StyleProps\n} from '@react-types/shared';\nimport {AriaTabPanelProps, useTab, useTabList, useTabPanel} from 'react-aria/useTabList';\nimport {classNames} from '../utils/classNames';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {Item} from 'react-stately/Item';\nimport {ListCollection} from 'react-stately/private/list/ListCollection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Picker, SpectrumPickerProps} from '../picker/Picker';\nimport React, {\n CSSProperties,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from 'react-stately/useTabListState';\nimport {Text} from '../text/Text';\nimport {unwrapDOMRef, useDOMRef} from '../utils/useDOMRef';\nimport {useCollection} from 'react-stately/private/collections/useCollection';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTabsProps<T>\n extends\n Omit<\n SingleSelection,\n | 'onSelectionChange'\n | 'disallowEmptySelection'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n >,\n AriaLabelingProps,\n DOMProps,\n StyleProps {\n /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */\n children: ReactNode;\n /** The item objects for each tab, for dynamic collections. */\n items?: Iterable<T>;\n /**\n * The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise\n * interacted with.\n */\n disabledKeys?: Iterable<Key>;\n /** Whether the Tabs are disabled. */\n isDisabled?: boolean;\n /** Whether the tabs are displayed in a quiet style. */\n isQuiet?: boolean;\n /** Whether the tabs are displayed in an emphasized style. */\n isEmphasized?: boolean;\n /** The amount of space between the tabs. */\n density?: 'compact' | 'regular';\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key) => void;\n /**\n * Whether tabs are activated automatically on focus or manually.\n *\n * @default 'automatic'\n */\n keyboardActivation?: 'automatic' | 'manual';\n /**\n * The orientation of the tabs.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation;\n}\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>;\n tabState: {\n tabListState: TabListState<T> | null;\n setTabListState: (state: TabListState<T>) => void;\n selectedTab: HTMLElement | null;\n collapsed: boolean;\n };\n refs: {\n wrapperRef: RefObject<HTMLDivElement | null>;\n tablistRef: RefObject<HTMLDivElement | null>;\n };\n tabPanelProps: HTMLAttributes<HTMLElement>;\n tabLineState: Array<DOMRect>;\n}\n\nconst TabContext = React.createContext<TabsContext<any> | null>(null);\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The\n * content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Tabs = React.forwardRef(function Tabs<T extends object>(\n props: SpectrumTabsProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(null);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);\n const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);\n let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);\n let prevTabPositions = useRef<DOMRect[]>(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement | null = tablistRef.current.querySelector(\n `[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}\"]`\n );\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs: NodeListOf<Element> =\n tablistRef.current?.querySelectorAll('[role=\"tab\"]') ??\n (new NodeList() as NodeListOf<Element>);\n let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse =\n direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (\n tabDimensions.length !== prevTabPositions.current.length ||\n tabDimensions.some(\n (box, index) =>\n box?.left !== prevTabPositions.current[index]?.left ||\n box?.right !== prevTabPositions.current[index]?.right\n )\n ) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [\n tablistRef,\n wrapperRef,\n direction,\n orientation,\n setCollapsed,\n prevTabPositions,\n setTabPositions\n ]);\n\n useLayoutEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps: HTMLAttributes<HTMLElement> = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>;\n state: TabListState<T>;\n isDisabled?: boolean;\n orientation?: Orientation;\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(styles, 'spectrum-Tabs-item', {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string' ? <Text>{rendered}</Text> : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation;\n selectedTab?: HTMLElement | null;\n selectedKey?: Key | null;\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext)!;\n\n let [style, setStyle] = useState<CSSProperties>({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset =\n direction === 'rtl'\n ? -1 *\n ((selectedTab.offsetParent as HTMLElement)?.offsetWidth -\n selectedTab.offsetWidth -\n selectedTab.offsetLeft)\n : selectedTab.offsetLeft;\n styleObj.transform =\n orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return (\n <div\n className={classNames(styles, 'spectrum-Tabs-selectionIndicator')}\n role=\"presentation\"\n style={style}\n />\n );\n}\n\nexport interface SpectrumTabListProps<T> extends DOMProps, StyleProps {\n /**\n * The tab items to display. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabPanels>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between. The keys of the items\n * within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>): ReactElement {\n const tabContext = useContext(TabContext)!;\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle: React.CSSProperties =\n collapsed && orientation !== 'vertical'\n ? {\n maxWidth: 'calc(100% + 1px)',\n overflow: 'hidden',\n visibility: 'hidden',\n position: 'absolute'\n }\n : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )}>\n {[...state.collection].map(item => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(styles, 'spectrum-TabsPanel-collapseWrapper', styleProps.className)}>\n <TabPicker\n {...props}\n {...tabProps}\n visible={collapsed}\n id={tabPanelProps['aria-labelledby']}\n state={state}\n className={tabListclassName}\n />\n {tabContent}\n </div>\n );\n }\n}\n\nexport interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {\n /**\n * The contents of each tab. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabList>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab. The keys of the items\n * within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>): ReactElement {\n const {tabState, tabProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n\n const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {\n suppressTextValueWarning: true\n });\n const selectedItem =\n tabListState && tabListState.selectedKey != null\n ? collection.getItem(tabListState.selectedKey)\n : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode;\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n let ref = useRef<HTMLDivElement | null>(null);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\n {...styleProps}\n {...tabPanelProps}\n ref={ref}\n className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children' | 'onSelectionChange'> {\n density?: 'compact' | 'regular';\n isEmphasized?: boolean;\n state: TabListState<T>;\n className?: string;\n visible: boolean;\n onSelectionChange?: (key: Key) => void;\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef<DOMRefValue<HTMLDivElement>>(null);\n let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style: React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={key => {\n if (key != null) {\n state.setSelectedKey(key);\n }\n }}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && (\n <TabLine\n orientation=\"horizontal\"\n selectedTab={pickerNode}\n selectedKey={state.selectedKey}\n />\n )}\n </SlotProvider>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"Tabs.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tabs/Tabs.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 {\n AriaLabelingProps,\n CollectionChildren,\n DOMProps,\n DOMRef,\n DOMRefValue,\n Key,\n Node,\n Orientation,\n RefObject,\n SingleSelection,\n StyleProps\n} from '@react-types/shared';\nimport {AriaTabPanelProps, useTab, useTabList, useTabPanel} from 'react-aria/useTabList';\nimport {classNames} from '../utils/classNames';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {Item} from 'react-stately/Item';\nimport {ListCollection} from 'react-stately/private/list/ListCollection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Picker, SpectrumPickerProps} from '../picker/Picker';\nimport React, {\n CSSProperties,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from 'react-stately/useTabListState';\nimport {Text} from '../text/Text';\nimport {unwrapDOMRef, useDOMRef} from '../utils/useDOMRef';\nimport {useCollection} from 'react-stately/private/collections/useCollection';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTabsProps<T>\n extends\n Omit<\n SingleSelection,\n | 'onSelectionChange'\n | 'disallowEmptySelection'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n >,\n AriaLabelingProps,\n DOMProps,\n StyleProps {\n /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */\n children: ReactNode;\n /** The item objects for each tab, for dynamic collections. */\n items?: Iterable<T>;\n /**\n * The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise\n * interacted with.\n */\n disabledKeys?: Iterable<Key>;\n /** Whether the Tabs are disabled. */\n isDisabled?: boolean;\n /** Whether the tabs are displayed in a quiet style. */\n isQuiet?: boolean;\n /** Whether the tabs are displayed in an emphasized style. */\n isEmphasized?: boolean;\n /** The amount of space between the tabs. */\n density?: 'compact' | 'regular';\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key) => void;\n /**\n * Whether tabs are activated automatically on focus or manually.\n *\n * @default 'automatic'\n */\n keyboardActivation?: 'automatic' | 'manual';\n /**\n * The orientation of the tabs.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation;\n}\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>;\n tabState: {\n tabListState: TabListState<T> | null;\n setTabListState: (state: TabListState<T>) => void;\n selectedTab: HTMLElement | null;\n collapsed: boolean;\n };\n refs: {\n wrapperRef: RefObject<HTMLDivElement | null>;\n tablistRef: RefObject<HTMLDivElement | null>;\n };\n tabPanelProps: HTMLAttributes<HTMLElement>;\n tabLineState: Array<DOMRect>;\n}\n\nconst TabContext = React.createContext<TabsContext<any> | null>(null);\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The\n * content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Tabs = React.forwardRef(function Tabs<T extends object>(\n props: SpectrumTabsProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(null);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);\n const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);\n let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);\n let prevTabPositions = useRef<DOMRect[]>(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement | null = tablistRef.current.querySelector(\n `[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}\"]`\n );\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs: NodeListOf<Element> =\n tablistRef.current?.querySelectorAll('[role=\"tab\"]') ??\n (new NodeList() as NodeListOf<Element>);\n let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse =\n direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (\n tabDimensions.length !== prevTabPositions.current.length ||\n tabDimensions.some(\n (box, index) =>\n box?.left !== prevTabPositions.current[index]?.left ||\n box?.right !== prevTabPositions.current[index]?.right\n )\n ) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [\n tablistRef,\n wrapperRef,\n direction,\n orientation,\n setCollapsed,\n prevTabPositions,\n setTabPositions\n ]);\n\n useLayoutEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps: HTMLAttributes<HTMLElement> = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>;\n state: TabListState<T>;\n isDisabled?: boolean;\n orientation?: Orientation;\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(styles, 'spectrum-Tabs-item', {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string' ? <Text>{rendered}</Text> : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation;\n selectedTab?: HTMLElement | null;\n selectedKey?: Key | null;\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext)!;\n\n let [style, setStyle] = useState<CSSProperties>({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset =\n direction === 'rtl'\n ? -1 *\n ((selectedTab.offsetParent as HTMLElement)?.offsetWidth -\n selectedTab.offsetWidth -\n selectedTab.offsetLeft)\n : selectedTab.offsetLeft;\n styleObj.transform =\n orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return (\n <div\n className={classNames(styles, 'spectrum-Tabs-selectionIndicator')}\n role=\"presentation\"\n style={style}\n />\n );\n}\n\nexport interface SpectrumTabListProps<T> extends DOMProps, StyleProps {\n /**\n * The tab items to display. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabPanels>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between. The keys of the items\n * within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>): ReactElement {\n const tabContext = useContext(TabContext)!;\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle: React.CSSProperties =\n collapsed && orientation !== 'vertical'\n ? {\n maxWidth: 'calc(100% + 1px)',\n overflow: 'hidden',\n visibility: 'hidden',\n position: 'absolute'\n }\n : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n // oxlint-disable-next-line react/react-compiler\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )}>\n {[...state.collection].map(item => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(styles, 'spectrum-TabsPanel-collapseWrapper', styleProps.className)}>\n <TabPicker\n {...props}\n {...tabProps}\n visible={collapsed}\n id={tabPanelProps['aria-labelledby']}\n state={state}\n className={tabListclassName}\n />\n {tabContent}\n </div>\n );\n }\n}\n\nexport interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {\n /**\n * The contents of each tab. Item keys should match the key of the corresponding `<Item>` within\n * the `<TabList>` element.\n */\n children: CollectionChildren<T>;\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab. The keys of the items\n * within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>): ReactElement {\n const {tabState, tabProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n\n const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {\n suppressTextValueWarning: true\n });\n const selectedItem =\n tabListState && tabListState.selectedKey != null\n ? collection.getItem(tabListState.selectedKey)\n : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode;\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n let ref = useRef<HTMLDivElement | null>(null);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n // oxlint-disable-next-line react/react-compiler\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\n {...styleProps}\n {...tabPanelProps}\n ref={ref}\n className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children' | 'onSelectionChange'> {\n density?: 'compact' | 'regular';\n isEmphasized?: boolean;\n state: TabListState<T>;\n className?: string;\n visible: boolean;\n onSelectionChange?: (key: Key) => void;\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef<DOMRefValue<HTMLDivElement>>(null);\n let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style: React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={key => {\n if (key != null) {\n state.setSelectedKey(key);\n }\n }}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && (\n <TabLine\n orientation=\"horizontal\"\n selectedTab={pickerNode}\n selectedKey={state.selectedKey}\n />\n )}\n </SlotProvider>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"Tabs.mjs.map"}
|