@adobe/react-spectrum 3.47.1 → 3.47.2
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.map +1 -1
- package/dist/private/actionbar/ActionBar.js.map +1 -1
- 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 +1 -1
- package/dist/private/actiongroup/ActionGroup.cjs.map +1 -1
- package/dist/private/actiongroup/ActionGroup.js +1 -1
- package/dist/private/actiongroup/ActionGroup.js.map +1 -1
- package/dist/private/actiongroup/ActionGroup.mjs +1 -1
- 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.map +1 -1
- package/dist/private/autocomplete/MobileSearchAutocomplete.js.map +1 -1
- package/dist/private/autocomplete/MobileSearchAutocomplete.mjs.map +1 -1
- package/dist/private/autocomplete/SearchAutocomplete.cjs.map +1 -1
- package/dist/private/autocomplete/SearchAutocomplete.js.map +1 -1
- 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.map +1 -1
- package/dist/private/button/Button.js.map +1 -1
- package/dist/private/button/Button.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_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/CardView.cjs.map +1 -1
- package/dist/private/card/CardView.js.map +1 -1
- 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_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/ColorPicker.css +28 -14
- package/dist/private/color/ColorPicker.css.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.map +1 -1
- package/dist/private/combobox/ComboBox.js.map +1 -1
- package/dist/private/combobox/ComboBox.mjs.map +1 -1
- package/dist/private/combobox/MobileComboBox.cjs.map +1 -1
- package/dist/private/combobox/MobileComboBox.js.map +1 -1
- 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/DatePicker.cjs.map +1 -1
- package/dist/private/datepicker/DatePicker.js.map +1 -1
- package/dist/private/datepicker/DatePicker.mjs.map +1 -1
- package/dist/private/datepicker/DateRangePicker.cjs.map +1 -1
- package/dist/private/datepicker/DateRangePicker.js.map +1 -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.map +1 -1
- package/dist/private/dialog/AlertDialog.js.map +1 -1
- package/dist/private/dialog/AlertDialog.mjs.map +1 -1
- package/dist/private/dialog/Dialog.cjs.map +1 -1
- package/dist/private/dialog/Dialog.js.map +1 -1
- 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/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_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/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/link_vars.css +101 -85
- package/dist/private/link_vars.css.map +1 -1
- package/dist/private/list/ListView.cjs.map +1 -1
- package/dist/private/list/ListView.js.map +1 -1
- package/dist/private/list/ListView.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/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.map +1 -1
- package/dist/private/menu/MenuItem.js.map +1 -1
- package/dist/private/menu/MenuItem.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/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_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/Resizer.cjs.map +1 -1
- package/dist/private/table/Resizer.js.map +1 -1
- package/dist/private/table/Resizer.mjs.map +1 -1
- package/dist/private/table/TableViewBase.cjs.map +1 -1
- package/dist/private/table/TableViewBase.js.map +1 -1
- package/dist/private/table/TableViewBase.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_vars.css +319 -281
- package/dist/private/tabs_vars.css.map +1 -1
- package/dist/private/tag/TagGroup.cjs.map +1 -1
- package/dist/private/tag/TagGroup.js.map +1 -1
- 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/TextFieldBase.cjs.map +1 -1
- package/dist/private/textfield/TextFieldBase.js.map +1 -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/well_vars.css +54 -46
- package/dist/private/well_vars.css.map +1 -1
- package/package.json +6 -6
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
.PDo2aW_spectrum-Popover
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
.PDo2aW_spectrum-Popover {
|
|
2
|
+
&.PDo2aW_react-spectrum-Popover {
|
|
3
|
+
visibility: visible;
|
|
4
|
+
}
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
& .PDo2aW_spectrum-Dialog-content {
|
|
7
|
+
max-height: initial;
|
|
8
|
+
}
|
|
7
9
|
}
|
|
8
10
|
|
|
9
11
|
.PDo2aW_spectrum-Modal-wrapper.PDo2aW_react-spectrum-Modal-wrapper, .PDo2aW_spectrum-Modal.PDo2aW_react-spectrum-Modal, .PDo2aW_spectrum-Tray.PDo2aW_react-spectrum-Tray {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"AAYA;EAGE;;;;EAIA;;;;;AAKF","sources":["packages/@adobe/react-spectrum/src/overlays/overlays.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.spectrum-Popover {\n /* This makes the contents of popovers focusable immediately, without waiting\n a frame for animations to start. */\n &.react-spectrum-Popover {\n visibility: visible;\n }\n\n .spectrum-Dialog-content {\n max-height: initial;\n }\n}\n\n.spectrum-Modal-wrapper.react-spectrum-Modal-wrapper,\n.spectrum-Modal.react-spectrum-Modal {\n visibility: visible;\n}\n\n.spectrum-Tray.react-spectrum-Tray {\n visibility: visible;\n}\n"],"names":[],"version":3,"file":"overlays.css.map"}
|
package/dist/private/package.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
module.exports = JSON.parse("{\"name\":\"@adobe/react-spectrum\",\"version\":\"3.47.
|
|
1
|
+
module.exports = JSON.parse("{\"name\":\"@adobe/react-spectrum\",\"version\":\"3.47.2\",\"description\":\"Spectrum UI components in React\",\"license\":\"Apache-2.0\",\"main\":\"./dist/exports/index.cjs\",\"module\":\"./dist/exports/index.js\",\"exports\":{\".\":{\"source\":\"./exports/index.ts\",\"types\":\"./dist/types/exports/index.d.ts\",\"import\":\"./dist/exports/index.mjs\",\"require\":\"./dist/exports/index.cjs\"},\"./i18n\":{\"types\":\"./i18n/index.d.ts\",\"import\":\"./i18n/index.mjs\",\"require\":\"./i18n/index.js\"},\"./i18n/*\":{\"types\":\"./i18n/lang.d.ts\",\"import\":\"./i18n/*.mjs\",\"require\":\"./i18n/*.js\"},\"./package.json\":\"./package.json\",\"./*\":{\"source\":\"./exports/*.ts\",\"types\":\"./dist/types/exports/*.d.ts\",\"import\":\"./dist/exports/*.mjs\",\"require\":\"./dist/exports/*.cjs\"}},\"types\":\"./dist/types/exports/index.d.ts\",\"source\":\"exports/index.ts\",\"files\":[\"*\",\"!chromatic/**\",\"!chromatic-fc/**\",\"!docs/**\",\"!exports/**\",\"!intl/**\",\"!scripts/**\",\"!src/**\",\"!stories/**\",\"!test/**\"],\"sideEffects\":[\"*.css\"],\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/adobe/react-spectrum\"},\"dependencies\":{\"@internationalized/date\":\"^3.12.2\",\"@react-types/shared\":\"^3.36.0\",\"@spectrum-icons/ui\":\"^3.7.1\",\"@spectrum-icons/workflow\":\"^4.3.1\",\"@swc/helpers\":\"^0.5.0\",\"client-only\":\"^0.0.1\",\"clsx\":\"^2.0.0\",\"react-aria\":\"3.50.0\",\"react-aria-components\":\"1.19.0\",\"react-stately\":\"3.48.0\",\"react-transition-group\":\"^4.4.5\",\"use-sync-external-store\":\"^1.6.0\"},\"publishConfig\":{\"access\":\"public\"},\"peerDependencies\":{\"react\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\"react-dom\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"},\"devDependencies\":{\"@adobe/spectrum-css-temp\":\"3.0.0-alpha.1\",\"@babel/cli\":\"^7.12.10\",\"@babel/core\":\"^7.24.3\",\"@react-spectrum/style-macro-s1\":\"3.0.0-alpha.6\",\"react\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\"react-dom\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"},\"targets\":{\"main\":false,\"module\":false,\"types\":false,\"exports-module\":{\"source\":[\"exports/**/*.ts\"],\"distDir\":\"dist\",\"isLibrary\":true,\"outputFormat\":\"esmodule\",\"includeNodeModules\":[\"@adobe/spectrum-css-temp\"]},\"exports-main\":{\"source\":[\"exports/**/*.ts\"],\"distDir\":\"dist\",\"isLibrary\":true,\"outputFormat\":\"commonjs\",\"includeNodeModules\":[\"@adobe/spectrum-css-temp\"]},\"legacy-module\":{\"source\":[\"exports/**/*.ts\"],\"distDir\":\"dist\",\"isLibrary\":true,\"outputFormat\":\"esmodule\",\"includeNodeModules\":[\"@adobe/spectrum-css-temp\"],\"engines\":{\"browsers\":[\"chrome >= 79\",\"firefox >= 85\",\"safari >= 13\"]}}}}");
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
//# sourceMappingURL=package.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB,KAAK,KAAK,CAAC","sources":["packages/@adobe/react-spectrum/package.json"],"sourcesContent":["{\n \"name\": \"@adobe/react-spectrum\",\n \"version\": \"3.47.
|
|
1
|
+
{"mappings":"AAAA,iBAAiB,KAAK,KAAK,CAAC","sources":["packages/@adobe/react-spectrum/package.json"],"sourcesContent":["{\n \"name\": \"@adobe/react-spectrum\",\n \"version\": \"3.47.2\",\n \"description\": \"Spectrum UI components in React\",\n \"license\": \"Apache-2.0\",\n \"main\": \"./dist/exports/index.cjs\",\n \"module\": \"./dist/exports/index.js\",\n \"exports\": {\n \".\": {\n \"source\": \"./exports/index.ts\",\n \"types\": \"./dist/types/exports/index.d.ts\",\n \"import\": \"./dist/exports/index.mjs\",\n \"require\": \"./dist/exports/index.cjs\"\n },\n \"./i18n\": {\n \"types\": \"./i18n/index.d.ts\",\n \"import\": \"./i18n/index.mjs\",\n \"require\": \"./i18n/index.js\"\n },\n \"./i18n/*\": {\n \"types\": \"./i18n/lang.d.ts\",\n \"import\": \"./i18n/*.mjs\",\n \"require\": \"./i18n/*.js\"\n },\n \"./package.json\": \"./package.json\",\n \"./*\": {\n \"source\": \"./exports/*.ts\",\n \"types\": \"./dist/types/exports/*.d.ts\",\n \"import\": \"./dist/exports/*.mjs\",\n \"require\": \"./dist/exports/*.cjs\"\n }\n },\n \"types\": \"./dist/types/exports/index.d.ts\",\n \"source\": \"exports/index.ts\",\n \"files\": [\n \"*\",\n \"!chromatic/**\",\n \"!chromatic-fc/**\",\n \"!docs/**\",\n \"!exports/**\",\n \"!intl/**\",\n \"!scripts/**\",\n \"!src/**\",\n \"!stories/**\",\n \"!test/**\"\n ],\n \"sideEffects\": [\n \"*.css\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/adobe/react-spectrum\"\n },\n \"dependencies\": {\n \"@internationalized/date\": \"^3.12.2\",\n \"@react-types/shared\": \"^3.36.0\",\n \"@spectrum-icons/ui\": \"^3.7.1\",\n \"@spectrum-icons/workflow\": \"^4.3.1\",\n \"@swc/helpers\": \"^0.5.0\",\n \"client-only\": \"^0.0.1\",\n \"clsx\": \"^2.0.0\",\n \"react-aria\": \"3.50.0\",\n \"react-aria-components\": \"1.19.0\",\n \"react-stately\": \"3.48.0\",\n \"react-transition-group\": \"^4.4.5\",\n \"use-sync-external-store\": \"^1.6.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\n \"react-dom\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"\n },\n \"devDependencies\": {\n \"@adobe/spectrum-css-temp\": \"3.0.0-alpha.1\",\n \"@babel/cli\": \"^7.12.10\",\n \"@babel/core\": \"^7.24.3\",\n \"@react-spectrum/style-macro-s1\": \"3.0.0-alpha.6\",\n \"react\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\n \"react-dom\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"\n },\n \"targets\": {\n \"main\": false,\n \"module\": false,\n \"types\": false,\n \"exports-module\": {\n \"source\": [\n \"exports/**/*.ts\"\n ],\n \"distDir\": \"dist\",\n \"isLibrary\": true,\n \"outputFormat\": \"esmodule\",\n \"includeNodeModules\": [\n \"@adobe/spectrum-css-temp\"\n ]\n },\n \"exports-main\": {\n \"source\": [\n \"exports/**/*.ts\"\n ],\n \"distDir\": \"dist\",\n \"isLibrary\": true,\n \"outputFormat\": \"commonjs\",\n \"includeNodeModules\": [\n \"@adobe/spectrum-css-temp\"\n ]\n },\n \"legacy-module\": {\n \"source\": [\n \"exports/**/*.ts\"\n ],\n \"distDir\": \"dist\",\n \"isLibrary\": true,\n \"outputFormat\": \"esmodule\",\n \"includeNodeModules\": [\n \"@adobe/spectrum-css-temp\"\n ],\n \"engines\": {\n \"browsers\": [\n \"chrome >= 79\",\n \"firefox >= 85\",\n \"safari >= 13\"\n ]\n }\n }\n }\n}\n"],"names":[],"version":3,"file":"package.cjs.map"}
|
package/dist/private/package.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var $89b86e88ddc6b597$exports = {};
|
|
2
|
-
$89b86e88ddc6b597$exports = JSON.parse("{\"name\":\"@adobe/react-spectrum\",\"version\":\"3.47.
|
|
2
|
+
$89b86e88ddc6b597$exports = JSON.parse("{\"name\":\"@adobe/react-spectrum\",\"version\":\"3.47.2\",\"description\":\"Spectrum UI components in React\",\"license\":\"Apache-2.0\",\"main\":\"./dist/exports/index.cjs\",\"module\":\"./dist/exports/index.js\",\"exports\":{\".\":{\"source\":\"./exports/index.ts\",\"types\":\"./dist/types/exports/index.d.ts\",\"import\":\"./dist/exports/index.mjs\",\"require\":\"./dist/exports/index.cjs\"},\"./i18n\":{\"types\":\"./i18n/index.d.ts\",\"import\":\"./i18n/index.mjs\",\"require\":\"./i18n/index.js\"},\"./i18n/*\":{\"types\":\"./i18n/lang.d.ts\",\"import\":\"./i18n/*.mjs\",\"require\":\"./i18n/*.js\"},\"./package.json\":\"./package.json\",\"./*\":{\"source\":\"./exports/*.ts\",\"types\":\"./dist/types/exports/*.d.ts\",\"import\":\"./dist/exports/*.mjs\",\"require\":\"./dist/exports/*.cjs\"}},\"types\":\"./dist/types/exports/index.d.ts\",\"source\":\"exports/index.ts\",\"files\":[\"*\",\"!chromatic/**\",\"!chromatic-fc/**\",\"!docs/**\",\"!exports/**\",\"!intl/**\",\"!scripts/**\",\"!src/**\",\"!stories/**\",\"!test/**\"],\"sideEffects\":[\"*.css\"],\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/adobe/react-spectrum\"},\"dependencies\":{\"@internationalized/date\":\"^3.12.2\",\"@react-types/shared\":\"^3.36.0\",\"@spectrum-icons/ui\":\"^3.7.1\",\"@spectrum-icons/workflow\":\"^4.3.1\",\"@swc/helpers\":\"^0.5.0\",\"client-only\":\"^0.0.1\",\"clsx\":\"^2.0.0\",\"react-aria\":\"3.50.0\",\"react-aria-components\":\"1.19.0\",\"react-stately\":\"3.48.0\",\"react-transition-group\":\"^4.4.5\",\"use-sync-external-store\":\"^1.6.0\"},\"publishConfig\":{\"access\":\"public\"},\"peerDependencies\":{\"react\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\"react-dom\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"},\"devDependencies\":{\"@adobe/spectrum-css-temp\":\"3.0.0-alpha.1\",\"@babel/cli\":\"^7.12.10\",\"@babel/core\":\"^7.24.3\",\"@react-spectrum/style-macro-s1\":\"3.0.0-alpha.6\",\"react\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\"react-dom\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"},\"targets\":{\"main\":false,\"module\":false,\"types\":false,\"exports-module\":{\"source\":[\"exports/**/*.ts\"],\"distDir\":\"dist\",\"isLibrary\":true,\"outputFormat\":\"esmodule\",\"includeNodeModules\":[\"@adobe/spectrum-css-temp\"]},\"exports-main\":{\"source\":[\"exports/**/*.ts\"],\"distDir\":\"dist\",\"isLibrary\":true,\"outputFormat\":\"commonjs\",\"includeNodeModules\":[\"@adobe/spectrum-css-temp\"]},\"legacy-module\":{\"source\":[\"exports/**/*.ts\"],\"distDir\":\"dist\",\"isLibrary\":true,\"outputFormat\":\"esmodule\",\"includeNodeModules\":[\"@adobe/spectrum-css-temp\"],\"engines\":{\"browsers\":[\"chrome >= 79\",\"firefox >= 85\",\"safari >= 13\"]}}}}");
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
export {$89b86e88ddc6b597$exports as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB,KAAK,KAAK,CAAC","sources":["packages/@adobe/react-spectrum/package.json"],"sourcesContent":["{\n \"name\": \"@adobe/react-spectrum\",\n \"version\": \"3.47.
|
|
1
|
+
{"mappings":";AAAA,4BAAiB,KAAK,KAAK,CAAC","sources":["packages/@adobe/react-spectrum/package.json"],"sourcesContent":["{\n \"name\": \"@adobe/react-spectrum\",\n \"version\": \"3.47.2\",\n \"description\": \"Spectrum UI components in React\",\n \"license\": \"Apache-2.0\",\n \"main\": \"./dist/exports/index.cjs\",\n \"module\": \"./dist/exports/index.js\",\n \"exports\": {\n \".\": {\n \"source\": \"./exports/index.ts\",\n \"types\": \"./dist/types/exports/index.d.ts\",\n \"import\": \"./dist/exports/index.mjs\",\n \"require\": \"./dist/exports/index.cjs\"\n },\n \"./i18n\": {\n \"types\": \"./i18n/index.d.ts\",\n \"import\": \"./i18n/index.mjs\",\n \"require\": \"./i18n/index.js\"\n },\n \"./i18n/*\": {\n \"types\": \"./i18n/lang.d.ts\",\n \"import\": \"./i18n/*.mjs\",\n \"require\": \"./i18n/*.js\"\n },\n \"./package.json\": \"./package.json\",\n \"./*\": {\n \"source\": \"./exports/*.ts\",\n \"types\": \"./dist/types/exports/*.d.ts\",\n \"import\": \"./dist/exports/*.mjs\",\n \"require\": \"./dist/exports/*.cjs\"\n }\n },\n \"types\": \"./dist/types/exports/index.d.ts\",\n \"source\": \"exports/index.ts\",\n \"files\": [\n \"*\",\n \"!chromatic/**\",\n \"!chromatic-fc/**\",\n \"!docs/**\",\n \"!exports/**\",\n \"!intl/**\",\n \"!scripts/**\",\n \"!src/**\",\n \"!stories/**\",\n \"!test/**\"\n ],\n \"sideEffects\": [\n \"*.css\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/adobe/react-spectrum\"\n },\n \"dependencies\": {\n \"@internationalized/date\": \"^3.12.2\",\n \"@react-types/shared\": \"^3.36.0\",\n \"@spectrum-icons/ui\": \"^3.7.1\",\n \"@spectrum-icons/workflow\": \"^4.3.1\",\n \"@swc/helpers\": \"^0.5.0\",\n \"client-only\": \"^0.0.1\",\n \"clsx\": \"^2.0.0\",\n \"react-aria\": \"3.50.0\",\n \"react-aria-components\": \"1.19.0\",\n \"react-stately\": \"3.48.0\",\n \"react-transition-group\": \"^4.4.5\",\n \"use-sync-external-store\": \"^1.6.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\n \"react-dom\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"\n },\n \"devDependencies\": {\n \"@adobe/spectrum-css-temp\": \"3.0.0-alpha.1\",\n \"@babel/cli\": \"^7.12.10\",\n \"@babel/core\": \"^7.24.3\",\n \"@react-spectrum/style-macro-s1\": \"3.0.0-alpha.6\",\n \"react\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\n \"react-dom\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"\n },\n \"targets\": {\n \"main\": false,\n \"module\": false,\n \"types\": false,\n \"exports-module\": {\n \"source\": [\n \"exports/**/*.ts\"\n ],\n \"distDir\": \"dist\",\n \"isLibrary\": true,\n \"outputFormat\": \"esmodule\",\n \"includeNodeModules\": [\n \"@adobe/spectrum-css-temp\"\n ]\n },\n \"exports-main\": {\n \"source\": [\n \"exports/**/*.ts\"\n ],\n \"distDir\": \"dist\",\n \"isLibrary\": true,\n \"outputFormat\": \"commonjs\",\n \"includeNodeModules\": [\n \"@adobe/spectrum-css-temp\"\n ]\n },\n \"legacy-module\": {\n \"source\": [\n \"exports/**/*.ts\"\n ],\n \"distDir\": \"dist\",\n \"isLibrary\": true,\n \"outputFormat\": \"esmodule\",\n \"includeNodeModules\": [\n \"@adobe/spectrum-css-temp\"\n ],\n \"engines\": {\n \"browsers\": [\n \"chrome >= 79\",\n \"firefox >= 85\",\n \"safari >= 13\"\n ]\n }\n }\n }\n}\n"],"names":[],"version":3,"file":"package.js.map"}
|
package/dist/private/package.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var $227a2d5562a2a453$exports = {};
|
|
2
|
-
$227a2d5562a2a453$exports = JSON.parse("{\"name\":\"@adobe/react-spectrum\",\"version\":\"3.47.
|
|
2
|
+
$227a2d5562a2a453$exports = JSON.parse("{\"name\":\"@adobe/react-spectrum\",\"version\":\"3.47.2\",\"description\":\"Spectrum UI components in React\",\"license\":\"Apache-2.0\",\"main\":\"./dist/exports/index.cjs\",\"module\":\"./dist/exports/index.js\",\"exports\":{\".\":{\"source\":\"./exports/index.ts\",\"types\":\"./dist/types/exports/index.d.ts\",\"import\":\"./dist/exports/index.mjs\",\"require\":\"./dist/exports/index.cjs\"},\"./i18n\":{\"types\":\"./i18n/index.d.ts\",\"import\":\"./i18n/index.mjs\",\"require\":\"./i18n/index.js\"},\"./i18n/*\":{\"types\":\"./i18n/lang.d.ts\",\"import\":\"./i18n/*.mjs\",\"require\":\"./i18n/*.js\"},\"./package.json\":\"./package.json\",\"./*\":{\"source\":\"./exports/*.ts\",\"types\":\"./dist/types/exports/*.d.ts\",\"import\":\"./dist/exports/*.mjs\",\"require\":\"./dist/exports/*.cjs\"}},\"types\":\"./dist/types/exports/index.d.ts\",\"source\":\"exports/index.ts\",\"files\":[\"*\",\"!chromatic/**\",\"!chromatic-fc/**\",\"!docs/**\",\"!exports/**\",\"!intl/**\",\"!scripts/**\",\"!src/**\",\"!stories/**\",\"!test/**\"],\"sideEffects\":[\"*.css\"],\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/adobe/react-spectrum\"},\"dependencies\":{\"@internationalized/date\":\"^3.12.2\",\"@react-types/shared\":\"^3.36.0\",\"@spectrum-icons/ui\":\"^3.7.1\",\"@spectrum-icons/workflow\":\"^4.3.1\",\"@swc/helpers\":\"^0.5.0\",\"client-only\":\"^0.0.1\",\"clsx\":\"^2.0.0\",\"react-aria\":\"3.50.0\",\"react-aria-components\":\"1.19.0\",\"react-stately\":\"3.48.0\",\"react-transition-group\":\"^4.4.5\",\"use-sync-external-store\":\"^1.6.0\"},\"publishConfig\":{\"access\":\"public\"},\"peerDependencies\":{\"react\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\"react-dom\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"},\"devDependencies\":{\"@adobe/spectrum-css-temp\":\"3.0.0-alpha.1\",\"@babel/cli\":\"^7.12.10\",\"@babel/core\":\"^7.24.3\",\"@react-spectrum/style-macro-s1\":\"3.0.0-alpha.6\",\"react\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\"react-dom\":\"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"},\"targets\":{\"main\":false,\"module\":false,\"types\":false,\"exports-module\":{\"source\":[\"exports/**/*.ts\"],\"distDir\":\"dist\",\"isLibrary\":true,\"outputFormat\":\"esmodule\",\"includeNodeModules\":[\"@adobe/spectrum-css-temp\"]},\"exports-main\":{\"source\":[\"exports/**/*.ts\"],\"distDir\":\"dist\",\"isLibrary\":true,\"outputFormat\":\"commonjs\",\"includeNodeModules\":[\"@adobe/spectrum-css-temp\"]},\"legacy-module\":{\"source\":[\"exports/**/*.ts\"],\"distDir\":\"dist\",\"isLibrary\":true,\"outputFormat\":\"esmodule\",\"includeNodeModules\":[\"@adobe/spectrum-css-temp\"],\"engines\":{\"browsers\":[\"chrome >= 79\",\"firefox >= 85\",\"safari >= 13\"]}}}}");
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
export {$227a2d5562a2a453$exports as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB,KAAK,KAAK,CAAC","sources":["packages/@adobe/react-spectrum/package.json"],"sourcesContent":["{\n \"name\": \"@adobe/react-spectrum\",\n \"version\": \"3.47.
|
|
1
|
+
{"mappings":";AAAA,4BAAiB,KAAK,KAAK,CAAC","sources":["packages/@adobe/react-spectrum/package.json"],"sourcesContent":["{\n \"name\": \"@adobe/react-spectrum\",\n \"version\": \"3.47.2\",\n \"description\": \"Spectrum UI components in React\",\n \"license\": \"Apache-2.0\",\n \"main\": \"./dist/exports/index.cjs\",\n \"module\": \"./dist/exports/index.js\",\n \"exports\": {\n \".\": {\n \"source\": \"./exports/index.ts\",\n \"types\": \"./dist/types/exports/index.d.ts\",\n \"import\": \"./dist/exports/index.mjs\",\n \"require\": \"./dist/exports/index.cjs\"\n },\n \"./i18n\": {\n \"types\": \"./i18n/index.d.ts\",\n \"import\": \"./i18n/index.mjs\",\n \"require\": \"./i18n/index.js\"\n },\n \"./i18n/*\": {\n \"types\": \"./i18n/lang.d.ts\",\n \"import\": \"./i18n/*.mjs\",\n \"require\": \"./i18n/*.js\"\n },\n \"./package.json\": \"./package.json\",\n \"./*\": {\n \"source\": \"./exports/*.ts\",\n \"types\": \"./dist/types/exports/*.d.ts\",\n \"import\": \"./dist/exports/*.mjs\",\n \"require\": \"./dist/exports/*.cjs\"\n }\n },\n \"types\": \"./dist/types/exports/index.d.ts\",\n \"source\": \"exports/index.ts\",\n \"files\": [\n \"*\",\n \"!chromatic/**\",\n \"!chromatic-fc/**\",\n \"!docs/**\",\n \"!exports/**\",\n \"!intl/**\",\n \"!scripts/**\",\n \"!src/**\",\n \"!stories/**\",\n \"!test/**\"\n ],\n \"sideEffects\": [\n \"*.css\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/adobe/react-spectrum\"\n },\n \"dependencies\": {\n \"@internationalized/date\": \"^3.12.2\",\n \"@react-types/shared\": \"^3.36.0\",\n \"@spectrum-icons/ui\": \"^3.7.1\",\n \"@spectrum-icons/workflow\": \"^4.3.1\",\n \"@swc/helpers\": \"^0.5.0\",\n \"client-only\": \"^0.0.1\",\n \"clsx\": \"^2.0.0\",\n \"react-aria\": \"3.50.0\",\n \"react-aria-components\": \"1.19.0\",\n \"react-stately\": \"3.48.0\",\n \"react-transition-group\": \"^4.4.5\",\n \"use-sync-external-store\": \"^1.6.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\n \"react-dom\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"\n },\n \"devDependencies\": {\n \"@adobe/spectrum-css-temp\": \"3.0.0-alpha.1\",\n \"@babel/cli\": \"^7.12.10\",\n \"@babel/core\": \"^7.24.3\",\n \"@react-spectrum/style-macro-s1\": \"3.0.0-alpha.6\",\n \"react\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\",\n \"react-dom\": \"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1\"\n },\n \"targets\": {\n \"main\": false,\n \"module\": false,\n \"types\": false,\n \"exports-module\": {\n \"source\": [\n \"exports/**/*.ts\"\n ],\n \"distDir\": \"dist\",\n \"isLibrary\": true,\n \"outputFormat\": \"esmodule\",\n \"includeNodeModules\": [\n \"@adobe/spectrum-css-temp\"\n ]\n },\n \"exports-main\": {\n \"source\": [\n \"exports/**/*.ts\"\n ],\n \"distDir\": \"dist\",\n \"isLibrary\": true,\n \"outputFormat\": \"commonjs\",\n \"includeNodeModules\": [\n \"@adobe/spectrum-css-temp\"\n ]\n },\n \"legacy-module\": {\n \"source\": [\n \"exports/**/*.ts\"\n ],\n \"distDir\": \"dist\",\n \"isLibrary\": true,\n \"outputFormat\": \"esmodule\",\n \"includeNodeModules\": [\n \"@adobe/spectrum-css-temp\"\n ],\n \"engines\": {\n \"browsers\": [\n \"chrome >= 79\",\n \"firefox >= 85\",\n \"safari >= 13\"\n ]\n }\n }\n }\n}\n"],"names":[],"version":3,"file":"package.mjs.map"}
|
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
.XjpDJq_i18nFontFamily {
|
|
2
2
|
font-synthesis: weight;
|
|
3
3
|
font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
4
|
-
}
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
5
|
+
&:lang(ar) {
|
|
6
|
+
font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
7
|
+
}
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
9
|
+
&:lang(he) {
|
|
10
|
+
font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
11
|
+
}
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
13
|
+
&:lang(zh) {
|
|
14
|
+
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
|
|
15
|
+
}
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
17
|
+
&:lang(zh-Hans) {
|
|
18
|
+
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
19
|
+
}
|
|
21
20
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
21
|
+
&:lang(zh-Hant) {
|
|
22
|
+
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
|
|
23
|
+
}
|
|
25
24
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
25
|
+
&:lang(zh-SG), &:lang(zh-CN) {
|
|
26
|
+
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
27
|
+
}
|
|
29
28
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
29
|
+
&:lang(ko) {
|
|
30
|
+
font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
|
|
31
|
+
}
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
&:lang(ja) {
|
|
34
|
+
font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
|
|
35
|
+
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.XjpDJq_spectrum-FocusRing-ring {
|
|
@@ -41,42 +41,50 @@
|
|
|
41
41
|
--spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
|
|
42
42
|
--spectrum-focus-ring-border-size: 0px;
|
|
43
43
|
--spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
|
|
44
|
-
}
|
|
45
44
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
&:after {
|
|
46
|
+
border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
|
|
47
|
+
content: "";
|
|
48
|
+
margin: calc(-1 * var(--spectrum-focus-ring-border-size));
|
|
49
|
+
pointer-events: none;
|
|
50
|
+
transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
|
|
52
51
|
margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
display: block;
|
|
53
|
+
position: absolute;
|
|
54
|
+
inset: 0;
|
|
55
|
+
}
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
.XjpDJq_spectrum-FocusRing
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
.XjpDJq_spectrum-FocusRing {
|
|
59
|
+
&.XjpDJq_focus-ring {
|
|
60
|
+
&:after {
|
|
61
|
+
margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
|
|
62
|
+
box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
61
65
|
}
|
|
62
66
|
|
|
63
|
-
.XjpDJq_spectrum-FocusRing--quiet
|
|
64
|
-
|
|
65
|
-
|
|
67
|
+
.XjpDJq_spectrum-FocusRing--quiet {
|
|
68
|
+
&:after {
|
|
69
|
+
border-radius: 0;
|
|
70
|
+
}
|
|
66
71
|
|
|
67
|
-
|
|
68
|
-
|
|
72
|
+
&.XjpDJq_focus-ring {
|
|
73
|
+
&:after {
|
|
74
|
+
margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
|
|
69
75
|
0;
|
|
70
|
-
|
|
76
|
+
box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
71
79
|
}
|
|
72
80
|
|
|
73
81
|
@media (forced-colors: active) {
|
|
74
82
|
.XjpDJq_spectrum-FocusRing, .XjpDJq_spectrum-FocusRing-ring, .XjpDJq_spectrum-FocusRing--quiet {
|
|
75
83
|
--spectrum-high-contrast-focus-ring-color: Highlight;
|
|
76
|
-
}
|
|
77
84
|
|
|
78
|
-
|
|
79
|
-
|
|
85
|
+
&:after {
|
|
86
|
+
forced-color-adjust: none;
|
|
87
|
+
}
|
|
80
88
|
}
|
|
81
89
|
}
|
|
82
90
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA4DA
|
|
1
|
+
{"mappings":"AA4DA;;;;EAKE;;;;EAKA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAQA;;;;EAIA;;;;;AAMF;;;;;;;EAUE;;;;;;;;;;;;;EAsBE;;;;;;;;AAQF;;;;;EAKE","sources":["packages/@adobe/spectrum-css-temp/components/page/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":"page_vars.css.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/picker/Picker.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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {\n Alignment,\n AsyncLoadable,\n DimensionValue,\n DOMRef,\n DOMRefValue,\n FocusableRefValue,\n LabelPosition,\n SingleSelection,\n SpectrumLabelableProps,\n StyleProps\n} from '@react-types/shared';\nimport {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria/useSelect';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport intlMessages from '../../intl/picker/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {mergeProps} from 'react-aria/mergeProps';\n// @ts-ignore\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ReactElement, useCallback, useRef, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';\nimport {Text} from '../text/Text';\nimport {Tray} from '../overlays/Tray';\nimport {useDOMRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSelectState} from 'react-stately/useSelectState';\n\nexport interface SpectrumPickerProps<T>\n extends\n Omit<\n AriaSelectProps<T>,\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'allowsEmptyCollection'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n AsyncLoadable,\n SpectrumLabelableProps,\n StyleProps {\n /** Whether the textfield should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: Alignment;\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n * dropdown is always equal to the trigger's width.\n */\n menuWidth?: DimensionValue;\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\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 Picker = React.forwardRef(function Picker<T extends object>(\n props: SpectrumPickerProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useSlotProps(props, 'picker');\n props = useProviderProps(props);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/picker');\n let {\n autoComplete,\n isDisabled,\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n placeholder = stringFormatter.format('placeholder'),\n isQuiet,\n labelPosition = 'top' as LabelPosition,\n menuWidth,\n autoFocus\n } = props;\n\n let state = useSelectState(props);\n let domRef = useDOMRef(ref);\n\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\n\n let isLoadingInitial = props.isLoading && state.collection.size === 0;\n let isLoadingMore = props.isLoading && state.collection.size > 0;\n let progressCircleId = useId();\n\n // We create the listbox layout in Picker and pass it to ListBoxBase below\n // so that the layout information can be cached even while the listbox is not mounted.\n // We also use the layout as the keyboard delegate for type to select.\n let layout = useListBoxLayout();\n let {\n labelProps,\n triggerProps,\n valueProps,\n menuProps,\n hiddenSelectProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useSelect(\n {\n ...props,\n 'aria-describedby': isLoadingInitial ? progressCircleId : undefined\n },\n state,\n unwrappedTriggerRef\n );\n\n let isMobile = useIsMobileDevice();\n let {hoverProps, isHovered} = useHover({isDisabled});\n\n // On small screen devices, the listbox is rendered in a tray, otherwise a popover.\n let listbox = (\n <ListBoxBase\n {...menuProps}\n ref={listboxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy || true}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n width={isMobile ? '100%' : undefined}\n // Set max height: inherit so Tray scrolling works\n UNSAFE_style={{maxHeight: 'inherit'}}\n isLoading={props.isLoading}\n showLoadingSpinner={isLoadingMore}\n onLoadMore={props.onLoadMore}\n />\n );\n\n // Measure the width of the button to inform the width of the menu (below).\n let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (!isMobile && unwrappedTriggerRef.current) {\n let width = unwrappedTriggerRef.current.offsetWidth;\n setButtonWidth(width);\n }\n }, [unwrappedTriggerRef, setButtonWidth, isMobile]);\n\n useResizeObserver({\n ref: unwrappedTriggerRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, state.selectedKey, onResize]);\n\n let overlay;\n if (isMobile) {\n overlay = <Tray state={state}>{listbox}</Tray>;\n } else {\n // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.\n // Always have a minimum width of the button width. When quiet, there is an extra offset to add.\n // Not using style props for this because they don't support `calc`.\n let width = isQuiet ? undefined : buttonWidth;\n let style = {\n width: menuWidth ? dimensionValue(menuWidth) : width,\n minWidth: isQuiet\n ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : buttonWidth\n };\n\n overlay = (\n <Popover\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-popover', {\n 'spectrum-Dropdown-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n placement={`${direction} ${align}`}\n shouldFlip={shouldFlip}\n hideArrow\n state={state}\n triggerRef={unwrappedTriggerRef}\n scrollRef={listboxRef}\n shouldContainFocus>\n {listbox}\n </Popover>\n );\n }\n\n let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;\n if (typeof contents === 'string') {\n contents = <Text>{contents}</Text>;\n }\n\n let picker = (\n <div\n className={classNames(styles, 'spectrum-Dropdown', {\n 'is-invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'spectrum-Dropdown--quiet': isQuiet\n })}>\n <HiddenSelect autoComplete={autoComplete} {...hiddenSelectProps} />\n <PressResponder {...mergeProps(hoverProps, triggerProps)}>\n <FieldButton\n ref={triggerRef}\n isActive={state.isOpen}\n isQuiet={isQuiet}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n autoFocus={autoFocus}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Icon'), size: 'S'},\n avatar: {\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-avatar'),\n size: 'avatar-size-100'\n },\n text: {\n ...valueProps,\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-label', {\n 'is-placeholder': !state.selectedItem\n })\n },\n description: {\n isHidden: true\n }\n }}>\n {contents}\n </SlotProvider>\n {isLoadingInitial && (\n <ProgressCircle\n id={progressCircleId}\n isIndeterminate\n size=\"S\"\n aria-label={stringFormatter.format('loading')}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n />\n )}\n {isInvalid && !isLoadingInitial && !isDisabled && (\n <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-invalidIcon')} />\n )}\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n {state.collection.size === 0 ? null : overlay}\n </div>\n );\n\n let wrapperClassName = classNames(styles, 'spectrum-Field', {\n 'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,\n 'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'\n });\n\n return (\n <Field\n {...props}\n ref={domRef}\n wrapperClassName={wrapperClassName}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n showErrorIcon={false}\n includeNecessityIndicatorInAccessibilityName\n elementType=\"span\">\n {picker}\n </Field>\n );\n}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/picker/Picker.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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {\n Alignment,\n AsyncLoadable,\n DimensionValue,\n DOMRef,\n DOMRefValue,\n FocusableRefValue,\n LabelPosition,\n SingleSelection,\n SpectrumLabelableProps,\n StyleProps\n} from '@react-types/shared';\nimport {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria/useSelect';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport intlMessages from '../../intl/picker/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ReactElement, useCallback, useRef, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';\nimport {Text} from '../text/Text';\nimport {Tray} from '../overlays/Tray';\nimport {useDOMRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSelectState} from 'react-stately/useSelectState';\n\nexport interface SpectrumPickerProps<T>\n extends\n Omit<\n AriaSelectProps<T>,\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'allowsEmptyCollection'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n AsyncLoadable,\n SpectrumLabelableProps,\n StyleProps {\n /** Whether the textfield should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: Alignment;\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n * dropdown is always equal to the trigger's width.\n */\n menuWidth?: DimensionValue;\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\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 Picker = React.forwardRef(function Picker<T extends object>(\n props: SpectrumPickerProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useSlotProps(props, 'picker');\n props = useProviderProps(props);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/picker');\n let {\n autoComplete,\n isDisabled,\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n placeholder = stringFormatter.format('placeholder'),\n isQuiet,\n labelPosition = 'top' as LabelPosition,\n menuWidth,\n autoFocus\n } = props;\n\n let state = useSelectState(props);\n let domRef = useDOMRef(ref);\n\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\n\n let isLoadingInitial = props.isLoading && state.collection.size === 0;\n let isLoadingMore = props.isLoading && state.collection.size > 0;\n let progressCircleId = useId();\n\n // We create the listbox layout in Picker and pass it to ListBoxBase below\n // so that the layout information can be cached even while the listbox is not mounted.\n // We also use the layout as the keyboard delegate for type to select.\n let layout = useListBoxLayout();\n let {\n labelProps,\n triggerProps,\n valueProps,\n menuProps,\n hiddenSelectProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useSelect(\n {\n ...props,\n 'aria-describedby': isLoadingInitial ? progressCircleId : undefined\n },\n state,\n unwrappedTriggerRef\n );\n\n let isMobile = useIsMobileDevice();\n let {hoverProps, isHovered} = useHover({isDisabled});\n\n // On small screen devices, the listbox is rendered in a tray, otherwise a popover.\n let listbox = (\n <ListBoxBase\n {...menuProps}\n ref={listboxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy || true}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n width={isMobile ? '100%' : undefined}\n // Set max height: inherit so Tray scrolling works\n UNSAFE_style={{maxHeight: 'inherit'}}\n isLoading={props.isLoading}\n showLoadingSpinner={isLoadingMore}\n onLoadMore={props.onLoadMore}\n />\n );\n\n // Measure the width of the button to inform the width of the menu (below).\n let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (!isMobile && unwrappedTriggerRef.current) {\n let width = unwrappedTriggerRef.current.offsetWidth;\n setButtonWidth(width);\n }\n }, [unwrappedTriggerRef, setButtonWidth, isMobile]);\n\n useResizeObserver({\n ref: unwrappedTriggerRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, state.selectedKey, onResize]);\n\n let overlay;\n if (isMobile) {\n overlay = <Tray state={state}>{listbox}</Tray>;\n } else {\n // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.\n // Always have a minimum width of the button width. When quiet, there is an extra offset to add.\n // Not using style props for this because they don't support `calc`.\n let width = isQuiet ? undefined : buttonWidth;\n let style = {\n width: menuWidth ? dimensionValue(menuWidth) : width,\n minWidth: isQuiet\n ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : buttonWidth\n };\n\n overlay = (\n <Popover\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-popover', {\n 'spectrum-Dropdown-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n placement={`${direction} ${align}`}\n shouldFlip={shouldFlip}\n hideArrow\n state={state}\n triggerRef={unwrappedTriggerRef}\n scrollRef={listboxRef}\n shouldContainFocus>\n {listbox}\n </Popover>\n );\n }\n\n let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;\n if (typeof contents === 'string') {\n contents = <Text>{contents}</Text>;\n }\n\n let picker = (\n <div\n className={classNames(styles, 'spectrum-Dropdown', {\n 'is-invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'spectrum-Dropdown--quiet': isQuiet\n })}>\n <HiddenSelect autoComplete={autoComplete} {...hiddenSelectProps} />\n <PressResponder {...mergeProps(hoverProps, triggerProps)}>\n <FieldButton\n ref={triggerRef}\n isActive={state.isOpen}\n isQuiet={isQuiet}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n autoFocus={autoFocus}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Icon'), size: 'S'},\n avatar: {\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-avatar'),\n size: 'avatar-size-100'\n },\n text: {\n ...valueProps,\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-label', {\n 'is-placeholder': !state.selectedItem\n })\n },\n description: {\n isHidden: true\n }\n }}>\n {contents}\n </SlotProvider>\n {isLoadingInitial && (\n <ProgressCircle\n id={progressCircleId}\n isIndeterminate\n size=\"S\"\n aria-label={stringFormatter.format('loading')}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n />\n )}\n {isInvalid && !isLoadingInitial && !isDisabled && (\n <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-invalidIcon')} />\n )}\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n {state.collection.size === 0 ? null : overlay}\n </div>\n );\n\n let wrapperClassName = classNames(styles, 'spectrum-Field', {\n 'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,\n 'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'\n });\n\n return (\n <Field\n {...props}\n ref={domRef}\n wrapperClassName={wrapperClassName}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n showErrorIcon={false}\n includeNecessityIndicatorInAccessibilityName\n elementType=\"span\">\n {picker}\n </Field>\n );\n}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/picker/Picker.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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {\n Alignment,\n AsyncLoadable,\n DimensionValue,\n DOMRef,\n DOMRefValue,\n FocusableRefValue,\n LabelPosition,\n SingleSelection,\n SpectrumLabelableProps,\n StyleProps\n} from '@react-types/shared';\nimport {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria/useSelect';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport intlMessages from '../../intl/picker/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {mergeProps} from 'react-aria/mergeProps';\n// @ts-ignore\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ReactElement, useCallback, useRef, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';\nimport {Text} from '../text/Text';\nimport {Tray} from '../overlays/Tray';\nimport {useDOMRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSelectState} from 'react-stately/useSelectState';\n\nexport interface SpectrumPickerProps<T>\n extends\n Omit<\n AriaSelectProps<T>,\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'allowsEmptyCollection'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n AsyncLoadable,\n SpectrumLabelableProps,\n StyleProps {\n /** Whether the textfield should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: Alignment;\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n * dropdown is always equal to the trigger's width.\n */\n menuWidth?: DimensionValue;\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\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 Picker = React.forwardRef(function Picker<T extends object>(\n props: SpectrumPickerProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useSlotProps(props, 'picker');\n props = useProviderProps(props);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/picker');\n let {\n autoComplete,\n isDisabled,\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n placeholder = stringFormatter.format('placeholder'),\n isQuiet,\n labelPosition = 'top' as LabelPosition,\n menuWidth,\n autoFocus\n } = props;\n\n let state = useSelectState(props);\n let domRef = useDOMRef(ref);\n\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\n\n let isLoadingInitial = props.isLoading && state.collection.size === 0;\n let isLoadingMore = props.isLoading && state.collection.size > 0;\n let progressCircleId = useId();\n\n // We create the listbox layout in Picker and pass it to ListBoxBase below\n // so that the layout information can be cached even while the listbox is not mounted.\n // We also use the layout as the keyboard delegate for type to select.\n let layout = useListBoxLayout();\n let {\n labelProps,\n triggerProps,\n valueProps,\n menuProps,\n hiddenSelectProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useSelect(\n {\n ...props,\n 'aria-describedby': isLoadingInitial ? progressCircleId : undefined\n },\n state,\n unwrappedTriggerRef\n );\n\n let isMobile = useIsMobileDevice();\n let {hoverProps, isHovered} = useHover({isDisabled});\n\n // On small screen devices, the listbox is rendered in a tray, otherwise a popover.\n let listbox = (\n <ListBoxBase\n {...menuProps}\n ref={listboxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy || true}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n width={isMobile ? '100%' : undefined}\n // Set max height: inherit so Tray scrolling works\n UNSAFE_style={{maxHeight: 'inherit'}}\n isLoading={props.isLoading}\n showLoadingSpinner={isLoadingMore}\n onLoadMore={props.onLoadMore}\n />\n );\n\n // Measure the width of the button to inform the width of the menu (below).\n let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (!isMobile && unwrappedTriggerRef.current) {\n let width = unwrappedTriggerRef.current.offsetWidth;\n setButtonWidth(width);\n }\n }, [unwrappedTriggerRef, setButtonWidth, isMobile]);\n\n useResizeObserver({\n ref: unwrappedTriggerRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, state.selectedKey, onResize]);\n\n let overlay;\n if (isMobile) {\n overlay = <Tray state={state}>{listbox}</Tray>;\n } else {\n // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.\n // Always have a minimum width of the button width. When quiet, there is an extra offset to add.\n // Not using style props for this because they don't support `calc`.\n let width = isQuiet ? undefined : buttonWidth;\n let style = {\n width: menuWidth ? dimensionValue(menuWidth) : width,\n minWidth: isQuiet\n ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : buttonWidth\n };\n\n overlay = (\n <Popover\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-popover', {\n 'spectrum-Dropdown-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n placement={`${direction} ${align}`}\n shouldFlip={shouldFlip}\n hideArrow\n state={state}\n triggerRef={unwrappedTriggerRef}\n scrollRef={listboxRef}\n shouldContainFocus>\n {listbox}\n </Popover>\n );\n }\n\n let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;\n if (typeof contents === 'string') {\n contents = <Text>{contents}</Text>;\n }\n\n let picker = (\n <div\n className={classNames(styles, 'spectrum-Dropdown', {\n 'is-invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'spectrum-Dropdown--quiet': isQuiet\n })}>\n <HiddenSelect autoComplete={autoComplete} {...hiddenSelectProps} />\n <PressResponder {...mergeProps(hoverProps, triggerProps)}>\n <FieldButton\n ref={triggerRef}\n isActive={state.isOpen}\n isQuiet={isQuiet}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n autoFocus={autoFocus}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Icon'), size: 'S'},\n avatar: {\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-avatar'),\n size: 'avatar-size-100'\n },\n text: {\n ...valueProps,\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-label', {\n 'is-placeholder': !state.selectedItem\n })\n },\n description: {\n isHidden: true\n }\n }}>\n {contents}\n </SlotProvider>\n {isLoadingInitial && (\n <ProgressCircle\n id={progressCircleId}\n isIndeterminate\n size=\"S\"\n aria-label={stringFormatter.format('loading')}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n />\n )}\n {isInvalid && !isLoadingInitial && !isDisabled && (\n <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-invalidIcon')} />\n )}\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n {state.collection.size === 0 ? null : overlay}\n </div>\n );\n\n let wrapperClassName = classNames(styles, 'spectrum-Field', {\n 'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,\n 'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'\n });\n\n return (\n <Field\n {...props}\n ref={domRef}\n wrapperClassName={wrapperClassName}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n showErrorIcon={false}\n includeNecessityIndicatorInAccessibilityName\n elementType=\"span\">\n {picker}\n </Field>\n );\n}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/picker/Picker.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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {\n Alignment,\n AsyncLoadable,\n DimensionValue,\n DOMRef,\n DOMRefValue,\n FocusableRefValue,\n LabelPosition,\n SingleSelection,\n SpectrumLabelableProps,\n StyleProps\n} from '@react-types/shared';\nimport {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria/useSelect';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport intlMessages from '../../intl/picker/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ReactElement, useCallback, useRef, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';\nimport {Text} from '../text/Text';\nimport {Tray} from '../overlays/Tray';\nimport {useDOMRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSelectState} from 'react-stately/useSelectState';\n\nexport interface SpectrumPickerProps<T>\n extends\n Omit<\n AriaSelectProps<T>,\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'allowsEmptyCollection'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n AsyncLoadable,\n SpectrumLabelableProps,\n StyleProps {\n /** Whether the textfield should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: Alignment;\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n * dropdown is always equal to the trigger's width.\n */\n menuWidth?: DimensionValue;\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\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 Picker = React.forwardRef(function Picker<T extends object>(\n props: SpectrumPickerProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useSlotProps(props, 'picker');\n props = useProviderProps(props);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/picker');\n let {\n autoComplete,\n isDisabled,\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n placeholder = stringFormatter.format('placeholder'),\n isQuiet,\n labelPosition = 'top' as LabelPosition,\n menuWidth,\n autoFocus\n } = props;\n\n let state = useSelectState(props);\n let domRef = useDOMRef(ref);\n\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\n\n let isLoadingInitial = props.isLoading && state.collection.size === 0;\n let isLoadingMore = props.isLoading && state.collection.size > 0;\n let progressCircleId = useId();\n\n // We create the listbox layout in Picker and pass it to ListBoxBase below\n // so that the layout information can be cached even while the listbox is not mounted.\n // We also use the layout as the keyboard delegate for type to select.\n let layout = useListBoxLayout();\n let {\n labelProps,\n triggerProps,\n valueProps,\n menuProps,\n hiddenSelectProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useSelect(\n {\n ...props,\n 'aria-describedby': isLoadingInitial ? progressCircleId : undefined\n },\n state,\n unwrappedTriggerRef\n );\n\n let isMobile = useIsMobileDevice();\n let {hoverProps, isHovered} = useHover({isDisabled});\n\n // On small screen devices, the listbox is rendered in a tray, otherwise a popover.\n let listbox = (\n <ListBoxBase\n {...menuProps}\n ref={listboxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy || true}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n width={isMobile ? '100%' : undefined}\n // Set max height: inherit so Tray scrolling works\n UNSAFE_style={{maxHeight: 'inherit'}}\n isLoading={props.isLoading}\n showLoadingSpinner={isLoadingMore}\n onLoadMore={props.onLoadMore}\n />\n );\n\n // Measure the width of the button to inform the width of the menu (below).\n let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (!isMobile && unwrappedTriggerRef.current) {\n let width = unwrappedTriggerRef.current.offsetWidth;\n setButtonWidth(width);\n }\n }, [unwrappedTriggerRef, setButtonWidth, isMobile]);\n\n useResizeObserver({\n ref: unwrappedTriggerRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, state.selectedKey, onResize]);\n\n let overlay;\n if (isMobile) {\n overlay = <Tray state={state}>{listbox}</Tray>;\n } else {\n // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.\n // Always have a minimum width of the button width. When quiet, there is an extra offset to add.\n // Not using style props for this because they don't support `calc`.\n let width = isQuiet ? undefined : buttonWidth;\n let style = {\n width: menuWidth ? dimensionValue(menuWidth) : width,\n minWidth: isQuiet\n ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : buttonWidth\n };\n\n overlay = (\n <Popover\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-popover', {\n 'spectrum-Dropdown-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n placement={`${direction} ${align}`}\n shouldFlip={shouldFlip}\n hideArrow\n state={state}\n triggerRef={unwrappedTriggerRef}\n scrollRef={listboxRef}\n shouldContainFocus>\n {listbox}\n </Popover>\n );\n }\n\n let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;\n if (typeof contents === 'string') {\n contents = <Text>{contents}</Text>;\n }\n\n let picker = (\n <div\n className={classNames(styles, 'spectrum-Dropdown', {\n 'is-invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'spectrum-Dropdown--quiet': isQuiet\n })}>\n <HiddenSelect autoComplete={autoComplete} {...hiddenSelectProps} />\n <PressResponder {...mergeProps(hoverProps, triggerProps)}>\n <FieldButton\n ref={triggerRef}\n isActive={state.isOpen}\n isQuiet={isQuiet}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n autoFocus={autoFocus}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Icon'), size: 'S'},\n avatar: {\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-avatar'),\n size: 'avatar-size-100'\n },\n text: {\n ...valueProps,\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-label', {\n 'is-placeholder': !state.selectedItem\n })\n },\n description: {\n isHidden: true\n }\n }}>\n {contents}\n </SlotProvider>\n {isLoadingInitial && (\n <ProgressCircle\n id={progressCircleId}\n isIndeterminate\n size=\"S\"\n aria-label={stringFormatter.format('loading')}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n />\n )}\n {isInvalid && !isLoadingInitial && !isDisabled && (\n <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-invalidIcon')} />\n )}\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n {state.collection.size === 0 ? null : overlay}\n </div>\n );\n\n let wrapperClassName = classNames(styles, 'spectrum-Field', {\n 'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,\n 'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'\n });\n\n return (\n <Field\n {...props}\n ref={domRef}\n wrapperClassName={wrapperClassName}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n showErrorIcon={false}\n includeNecessityIndicatorInAccessibilityName\n elementType=\"span\">\n {picker}\n </Field>\n );\n}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/picker/Picker.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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {\n Alignment,\n AsyncLoadable,\n DimensionValue,\n DOMRef,\n DOMRefValue,\n FocusableRefValue,\n LabelPosition,\n SingleSelection,\n SpectrumLabelableProps,\n StyleProps\n} from '@react-types/shared';\nimport {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria/useSelect';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport intlMessages from '../../intl/picker/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {mergeProps} from 'react-aria/mergeProps';\n// @ts-ignore\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ReactElement, useCallback, useRef, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';\nimport {Text} from '../text/Text';\nimport {Tray} from '../overlays/Tray';\nimport {useDOMRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSelectState} from 'react-stately/useSelectState';\n\nexport interface SpectrumPickerProps<T>\n extends\n Omit<\n AriaSelectProps<T>,\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'allowsEmptyCollection'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n AsyncLoadable,\n SpectrumLabelableProps,\n StyleProps {\n /** Whether the textfield should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: Alignment;\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n * dropdown is always equal to the trigger's width.\n */\n menuWidth?: DimensionValue;\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\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 Picker = React.forwardRef(function Picker<T extends object>(\n props: SpectrumPickerProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useSlotProps(props, 'picker');\n props = useProviderProps(props);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/picker');\n let {\n autoComplete,\n isDisabled,\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n placeholder = stringFormatter.format('placeholder'),\n isQuiet,\n labelPosition = 'top' as LabelPosition,\n menuWidth,\n autoFocus\n } = props;\n\n let state = useSelectState(props);\n let domRef = useDOMRef(ref);\n\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\n\n let isLoadingInitial = props.isLoading && state.collection.size === 0;\n let isLoadingMore = props.isLoading && state.collection.size > 0;\n let progressCircleId = useId();\n\n // We create the listbox layout in Picker and pass it to ListBoxBase below\n // so that the layout information can be cached even while the listbox is not mounted.\n // We also use the layout as the keyboard delegate for type to select.\n let layout = useListBoxLayout();\n let {\n labelProps,\n triggerProps,\n valueProps,\n menuProps,\n hiddenSelectProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useSelect(\n {\n ...props,\n 'aria-describedby': isLoadingInitial ? progressCircleId : undefined\n },\n state,\n unwrappedTriggerRef\n );\n\n let isMobile = useIsMobileDevice();\n let {hoverProps, isHovered} = useHover({isDisabled});\n\n // On small screen devices, the listbox is rendered in a tray, otherwise a popover.\n let listbox = (\n <ListBoxBase\n {...menuProps}\n ref={listboxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy || true}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n width={isMobile ? '100%' : undefined}\n // Set max height: inherit so Tray scrolling works\n UNSAFE_style={{maxHeight: 'inherit'}}\n isLoading={props.isLoading}\n showLoadingSpinner={isLoadingMore}\n onLoadMore={props.onLoadMore}\n />\n );\n\n // Measure the width of the button to inform the width of the menu (below).\n let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (!isMobile && unwrappedTriggerRef.current) {\n let width = unwrappedTriggerRef.current.offsetWidth;\n setButtonWidth(width);\n }\n }, [unwrappedTriggerRef, setButtonWidth, isMobile]);\n\n useResizeObserver({\n ref: unwrappedTriggerRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, state.selectedKey, onResize]);\n\n let overlay;\n if (isMobile) {\n overlay = <Tray state={state}>{listbox}</Tray>;\n } else {\n // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.\n // Always have a minimum width of the button width. When quiet, there is an extra offset to add.\n // Not using style props for this because they don't support `calc`.\n let width = isQuiet ? undefined : buttonWidth;\n let style = {\n width: menuWidth ? dimensionValue(menuWidth) : width,\n minWidth: isQuiet\n ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : buttonWidth\n };\n\n overlay = (\n <Popover\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-popover', {\n 'spectrum-Dropdown-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n placement={`${direction} ${align}`}\n shouldFlip={shouldFlip}\n hideArrow\n state={state}\n triggerRef={unwrappedTriggerRef}\n scrollRef={listboxRef}\n shouldContainFocus>\n {listbox}\n </Popover>\n );\n }\n\n let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;\n if (typeof contents === 'string') {\n contents = <Text>{contents}</Text>;\n }\n\n let picker = (\n <div\n className={classNames(styles, 'spectrum-Dropdown', {\n 'is-invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'spectrum-Dropdown--quiet': isQuiet\n })}>\n <HiddenSelect autoComplete={autoComplete} {...hiddenSelectProps} />\n <PressResponder {...mergeProps(hoverProps, triggerProps)}>\n <FieldButton\n ref={triggerRef}\n isActive={state.isOpen}\n isQuiet={isQuiet}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n autoFocus={autoFocus}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Icon'), size: 'S'},\n avatar: {\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-avatar'),\n size: 'avatar-size-100'\n },\n text: {\n ...valueProps,\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-label', {\n 'is-placeholder': !state.selectedItem\n })\n },\n description: {\n isHidden: true\n }\n }}>\n {contents}\n </SlotProvider>\n {isLoadingInitial && (\n <ProgressCircle\n id={progressCircleId}\n isIndeterminate\n size=\"S\"\n aria-label={stringFormatter.format('loading')}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n />\n )}\n {isInvalid && !isLoadingInitial && !isDisabled && (\n <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-invalidIcon')} />\n )}\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n {state.collection.size === 0 ? null : overlay}\n </div>\n );\n\n let wrapperClassName = classNames(styles, 'spectrum-Field', {\n 'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,\n 'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'\n });\n\n return (\n <Field\n {...props}\n ref={domRef}\n wrapperClassName={wrapperClassName}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n showErrorIcon={false}\n includeNecessityIndicatorInAccessibilityName\n elementType=\"span\">\n {picker}\n </Field>\n );\n}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/picker/Picker.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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {\n Alignment,\n AsyncLoadable,\n DimensionValue,\n DOMRef,\n DOMRefValue,\n FocusableRefValue,\n LabelPosition,\n SingleSelection,\n SpectrumLabelableProps,\n StyleProps\n} from '@react-types/shared';\nimport {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria/useSelect';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport intlMessages from '../../intl/picker/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ReactElement, useCallback, useRef, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';\nimport {Text} from '../text/Text';\nimport {Tray} from '../overlays/Tray';\nimport {useDOMRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSelectState} from 'react-stately/useSelectState';\n\nexport interface SpectrumPickerProps<T>\n extends\n Omit<\n AriaSelectProps<T>,\n | 'selectionMode'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'onSelectionChange'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'allowsEmptyCollection'\n >,\n Omit<SingleSelection, 'disallowEmptySelection'>,\n AsyncLoadable,\n SpectrumLabelableProps,\n StyleProps {\n /** Whether the textfield should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: Alignment;\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean;\n /**\n * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n * dropdown is always equal to the trigger's width.\n */\n menuWidth?: DimensionValue;\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\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 Picker = React.forwardRef(function Picker<T extends object>(\n props: SpectrumPickerProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n props = useSlotProps(props, 'picker');\n props = useProviderProps(props);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/picker');\n let {\n autoComplete,\n isDisabled,\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n placeholder = stringFormatter.format('placeholder'),\n isQuiet,\n labelPosition = 'top' as LabelPosition,\n menuWidth,\n autoFocus\n } = props;\n\n let state = useSelectState(props);\n let domRef = useDOMRef(ref);\n\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\n\n let isLoadingInitial = props.isLoading && state.collection.size === 0;\n let isLoadingMore = props.isLoading && state.collection.size > 0;\n let progressCircleId = useId();\n\n // We create the listbox layout in Picker and pass it to ListBoxBase below\n // so that the layout information can be cached even while the listbox is not mounted.\n // We also use the layout as the keyboard delegate for type to select.\n let layout = useListBoxLayout();\n let {\n labelProps,\n triggerProps,\n valueProps,\n menuProps,\n hiddenSelectProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useSelect(\n {\n ...props,\n 'aria-describedby': isLoadingInitial ? progressCircleId : undefined\n },\n state,\n unwrappedTriggerRef\n );\n\n let isMobile = useIsMobileDevice();\n let {hoverProps, isHovered} = useHover({isDisabled});\n\n // On small screen devices, the listbox is rendered in a tray, otherwise a popover.\n let listbox = (\n <ListBoxBase\n {...menuProps}\n ref={listboxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy || true}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n width={isMobile ? '100%' : undefined}\n // Set max height: inherit so Tray scrolling works\n UNSAFE_style={{maxHeight: 'inherit'}}\n isLoading={props.isLoading}\n showLoadingSpinner={isLoadingMore}\n onLoadMore={props.onLoadMore}\n />\n );\n\n // Measure the width of the button to inform the width of the menu (below).\n let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (!isMobile && unwrappedTriggerRef.current) {\n let width = unwrappedTriggerRef.current.offsetWidth;\n setButtonWidth(width);\n }\n }, [unwrappedTriggerRef, setButtonWidth, isMobile]);\n\n useResizeObserver({\n ref: unwrappedTriggerRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, state.selectedKey, onResize]);\n\n let overlay;\n if (isMobile) {\n overlay = <Tray state={state}>{listbox}</Tray>;\n } else {\n // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.\n // Always have a minimum width of the button width. When quiet, there is an extra offset to add.\n // Not using style props for this because they don't support `calc`.\n let width = isQuiet ? undefined : buttonWidth;\n let style = {\n width: menuWidth ? dimensionValue(menuWidth) : width,\n minWidth: isQuiet\n ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n : buttonWidth\n };\n\n overlay = (\n <Popover\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-popover', {\n 'spectrum-Dropdown-popover--quiet': isQuiet\n })}\n ref={popoverRef}\n placement={`${direction} ${align}`}\n shouldFlip={shouldFlip}\n hideArrow\n state={state}\n triggerRef={unwrappedTriggerRef}\n scrollRef={listboxRef}\n shouldContainFocus>\n {listbox}\n </Popover>\n );\n }\n\n let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;\n if (typeof contents === 'string') {\n contents = <Text>{contents}</Text>;\n }\n\n let picker = (\n <div\n className={classNames(styles, 'spectrum-Dropdown', {\n 'is-invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'spectrum-Dropdown--quiet': isQuiet\n })}>\n <HiddenSelect autoComplete={autoComplete} {...hiddenSelectProps} />\n <PressResponder {...mergeProps(hoverProps, triggerProps)}>\n <FieldButton\n ref={triggerRef}\n isActive={state.isOpen}\n isQuiet={isQuiet}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n autoFocus={autoFocus}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {\n 'is-hovered': isHovered\n })}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Icon'), size: 'S'},\n avatar: {\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-avatar'),\n size: 'avatar-size-100'\n },\n text: {\n ...valueProps,\n UNSAFE_className: classNames(styles, 'spectrum-Dropdown-label', {\n 'is-placeholder': !state.selectedItem\n })\n },\n description: {\n isHidden: true\n }\n }}>\n {contents}\n </SlotProvider>\n {isLoadingInitial && (\n <ProgressCircle\n id={progressCircleId}\n isIndeterminate\n size=\"S\"\n aria-label={stringFormatter.format('loading')}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n />\n )}\n {isInvalid && !isLoadingInitial && !isDisabled && (\n <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-invalidIcon')} />\n )}\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n {state.collection.size === 0 ? null : overlay}\n </div>\n );\n\n let wrapperClassName = classNames(styles, 'spectrum-Field', {\n 'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,\n 'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'\n });\n\n return (\n <Field\n {...props}\n ref={domRef}\n wrapperClassName={wrapperClassName}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n showErrorIcon={false}\n includeNecessityIndicatorInAccessibilityName\n elementType=\"span\">\n {picker}\n </Field>\n );\n}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
|