@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 +1 @@
|
|
|
1
|
-
{"mappings":"AA4DA
|
|
1
|
+
{"mappings":"AA4DA;;;;EAKE;;;;EAKA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAQA;;;;EAIA;;;;;AAMF;;;;;;;EAUE;;;;;;;;;;;;;EAsBE;;;;;;;;AAQF;;;;;EAKE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwRF;;;;;;;;;;EAUA;;;;;;MAMI;;;;;;;;;;;;;;;;;;;;;IA2BF;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BF;;;;;;;;;;;;;;;;;AAuBE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmDE;;;;;;;;;;;;;;;;;;MAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0CF;;;;;;QAKe;;;;QAGf;;;;;MAIE;;;;;;;;;;;;;EAYA;IACE;;;MAEE;;;;UAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuBN;;;;;MAIE;;;;;;;;;;;;;;;;;;;;MAkBA","sources":["packages/@adobe/spectrum-css-temp/components/inputgroup/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":"inputgroup_vars.css.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAsCM,MAAM,0DAAQ,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,MAC7C,KAAyB,EACzB,GAA6B;IAE7B,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,IAAI,YACF,QAAQ,iBACR,gBAAgB,mBAChB,aAAa,kBAAkB,SAAS,UAAU,kBAClD,UAAU,sBACV,qBAAqB,cAAc,OAAO,SAAS,oDACnD,+CAA+C,gBAC/C,OAAO,EACP,KAAK,QAAQ,EACb,aAAa,cAAc,OAAO,WAClC,OAAO,EACP,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,iBAAiB,aACjB,gBAAgB,MAAM,CAAC,gBACvB,gBAAgB,MAAM,CAAC;IAC3B,IAAI,qBACF,0DAAC,CAAA,GAAA,wDAAO;QACN,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACrC,cACE,+CACI,gBAAgB,MAAM,CAAC,gBACvB;;IAKV,IAAI,kBAAkB,CAAA,GAAA,oCAAS,EAC7B,CAAA,GAAA,mDAAK,GACL,uBACA;QACE,qCAAqC,kBAAkB;QACvD,iCAAiC,eAAe;IAClD,GACA,WAAW,SAAS;IAGtB,qBACE,0DAAC;QACE,GAAG,CAAA,GAAA,6CAAa,EAAE,WAAW;QAC7B,GAAG,UAAU;QACd,SAAS;QACT,KAAK;QACL,WAAW;QACX,SAAS,gBAAgB,UAAU,YAAY,UAAU;OACxD,UACA,AAAC,CAAA,uBAAuB,WAAY,uBAAuB,UAAU,UAAU,KAC9E,WAID,uBAAuB,yBACtB,0DAAC;QAAK,eAAa,CAAC,+CAA+C,aAAa;OAC7E,iBAGJ,uBAAuB,UAAU,cAAc;AAGtD","sources":["packages/@adobe/react-spectrum/src/label/Label.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Alignment,\n DOMProps,\n DOMRef,\n LabelPosition,\n NecessityIndicator,\n StyleProps\n} from '@react-types/shared';\nimport Asterisk from '@spectrum-icons/ui/Asterisk';\nimport {classNames} from '../utils/classNames';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport intlMessages from '../../intl/label/*.json';\nimport React, {ElementType, HTMLAttributes, ReactNode} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface LabelProps {\n children?: ReactNode;\n htmlFor?: string; // for compatibility with React\n for?: string;\n elementType?: ElementType;\n}\n\nexport interface SpectrumLabelPropsBase extends LabelProps, DOMProps, StyleProps {\n labelPosition?: LabelPosition; // default top\n labelAlign?: Alignment; // default start\n isRequired?: boolean;\n necessityIndicator?: NecessityIndicator; // default icon\n includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\nexport interface SpectrumLabelProps extends SpectrumLabelPropsBase, HTMLAttributes<HTMLElement> {}\n\nexport const Label = React.forwardRef(function Label(\n props: SpectrumLabelProps,\n ref: DOMRef<HTMLLabelElement>\n) {\n props = useProviderProps(props);\n let {\n children,\n labelPosition = 'top',\n labelAlign = labelPosition === 'side' ? 'start' : null,\n isRequired,\n necessityIndicator = isRequired != null ? 'icon' : null,\n includeNecessityIndicatorInAccessibilityName = false,\n htmlFor,\n for: labelFor,\n elementType: ElementType = 'label',\n onClick,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let {styleProps} = useStyleProps(otherProps);\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/label');\n let necessityLabel = isRequired\n ? stringFormatter.format('(required)')\n : stringFormatter.format('(optional)');\n let icon = (\n <Asterisk\n UNSAFE_className={classNames(styles, 'spectrum-FieldLabel-requiredIcon')}\n aria-label={\n includeNecessityIndicatorInAccessibilityName\n ? stringFormatter.format('(required)')\n : undefined\n }\n />\n );\n\n let labelClassNames = classNames(\n styles,\n 'spectrum-FieldLabel',\n {\n 'spectrum-FieldLabel--positionSide': labelPosition === 'side',\n 'spectrum-FieldLabel--alignEnd': labelAlign === 'end'\n },\n styleProps.className\n );\n\n return (\n <ElementType\n {...filterDOMProps(otherProps)}\n {...styleProps}\n onClick={onClick}\n ref={domRef}\n className={labelClassNames}\n htmlFor={ElementType === 'label' ? labelFor || htmlFor : undefined}>\n {children}\n {(necessityIndicator === 'label' || (necessityIndicator === 'icon' && isRequired)) &&\n ' \\u200b'}\n {/* necessityLabel is hidden to screen readers if the field is required because\n * aria-required is set on the field in that case. That will already be announced,\n * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n {necessityIndicator === 'label' && (\n <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n {necessityLabel}\n </span>\n )}\n {necessityIndicator === 'icon' && isRequired && icon}\n </ElementType>\n );\n});\n"],"names":[],"version":3,"file":"Label.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAsCM,MAAM,0DAAQ,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,MAC7C,KAAyB,EACzB,GAA6B;IAE7B,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,IAAI,YACF,QAAQ,iBACR,gBAAgB,mBAChB,aAAa,kBAAkB,SAAS,UAAU,kBAClD,UAAU,sBACV,qBAAqB,cAAc,OAAO,SAAS,oDACnD,+CAA+C,gBAC/C,OAAO,EACP,KAAK,QAAQ,EACb,aAAa,cAAc,OAAO,WAClC,OAAO,EACP,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,8CAAW,GAAG;IAChE,IAAI,iBAAiB,aACjB,gBAAgB,MAAM,CAAC,gBACvB,gBAAgB,MAAM,CAAC;IAC3B,IAAI,qBACF,gCAAC,CAAA,GAAA,8BAAO;QACN,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QACrC,cACE,+CACI,gBAAgB,MAAM,CAAC,gBACvB;;IAKV,IAAI,kBAAkB,CAAA,GAAA,yCAAS,EAC7B,CAAA,GAAA,uDAAK,GACL,uBACA;QACE,qCAAqC,kBAAkB;QACvD,iCAAiC,eAAe;IAClD,GACA,WAAW,SAAS;IAGtB,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC7B,GAAG,UAAU;QACd,SAAS;QACT,KAAK;QACL,WAAW;QACX,SAAS,gBAAgB,UAAU,YAAY,UAAU;OACxD,UACA,AAAC,CAAA,uBAAuB,WAAY,uBAAuB,UAAU,UAAU,KAC9E,WAID,uBAAuB,yBACtB,gCAAC;QAAK,eAAa,CAAC,+CAA+C,aAAa;OAC7E,iBAGJ,uBAAuB,UAAU,cAAc;AAGtD","sources":["packages/@adobe/react-spectrum/src/label/Label.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Alignment,\n DOMProps,\n DOMRef,\n LabelPosition,\n NecessityIndicator,\n StyleProps\n} from '@react-types/shared';\nimport Asterisk from '@spectrum-icons/ui/Asterisk';\nimport {classNames} from '../utils/classNames';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport intlMessages from '../../intl/label/*.json';\nimport React, {ElementType, HTMLAttributes, ReactNode} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface LabelProps {\n children?: ReactNode;\n htmlFor?: string; // for compatibility with React\n for?: string;\n elementType?: ElementType;\n}\n\nexport interface SpectrumLabelPropsBase extends LabelProps, DOMProps, StyleProps {\n labelPosition?: LabelPosition; // default top\n labelAlign?: Alignment; // default start\n isRequired?: boolean;\n necessityIndicator?: NecessityIndicator; // default icon\n includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\nexport interface SpectrumLabelProps extends SpectrumLabelPropsBase, HTMLAttributes<HTMLElement> {}\n\nexport const Label = React.forwardRef(function Label(\n props: SpectrumLabelProps,\n ref: DOMRef<HTMLLabelElement>\n) {\n props = useProviderProps(props);\n let {\n children,\n labelPosition = 'top',\n labelAlign = labelPosition === 'side' ? 'start' : null,\n isRequired,\n necessityIndicator = isRequired != null ? 'icon' : null,\n includeNecessityIndicatorInAccessibilityName = false,\n htmlFor,\n for: labelFor,\n elementType: ElementType = 'label',\n onClick,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let {styleProps} = useStyleProps(otherProps);\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/label');\n let necessityLabel = isRequired\n ? stringFormatter.format('(required)')\n : stringFormatter.format('(optional)');\n let icon = (\n <Asterisk\n UNSAFE_className={classNames(styles, 'spectrum-FieldLabel-requiredIcon')}\n aria-label={\n includeNecessityIndicatorInAccessibilityName\n ? stringFormatter.format('(required)')\n : undefined\n }\n />\n );\n\n let labelClassNames = classNames(\n styles,\n 'spectrum-FieldLabel',\n {\n 'spectrum-FieldLabel--positionSide': labelPosition === 'side',\n 'spectrum-FieldLabel--alignEnd': labelAlign === 'end'\n },\n styleProps.className\n );\n\n return (\n <ElementType\n {...filterDOMProps(otherProps)}\n {...styleProps}\n onClick={onClick}\n ref={domRef}\n className={labelClassNames}\n htmlFor={ElementType === 'label' ? labelFor || htmlFor : undefined}>\n {children}\n {(necessityIndicator === 'label' || (necessityIndicator === 'icon' && isRequired)) &&\n ' \\u200b'}\n {/* necessityLabel is hidden to screen readers if the field is required because\n * aria-required is set on the field in that case. That will already be announced,\n * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n {necessityIndicator === 'label' && (\n <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n {necessityLabel}\n </span>\n )}\n {necessityIndicator === 'icon' && isRequired && icon}\n </ElementType>\n );\n});\n"],"names":[],"version":3,"file":"Label.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAsCM,MAAM,0DAAQ,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,MAC7C,KAAyB,EACzB,GAA6B;IAE7B,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,IAAI,YACF,QAAQ,iBACR,gBAAgB,mBAChB,aAAa,kBAAkB,SAAS,UAAU,kBAClD,UAAU,sBACV,qBAAqB,cAAc,OAAO,SAAS,oDACnD,+CAA+C,gBAC/C,OAAO,EACP,KAAK,QAAQ,EACb,aAAa,cAAc,OAAO,WAClC,OAAO,EACP,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,iBAAiB,aACjB,gBAAgB,MAAM,CAAC,gBACvB,gBAAgB,MAAM,CAAC;IAC3B,IAAI,qBACF,gCAAC,CAAA,GAAA,8BAAO;QACN,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QACrC,cACE,+CACI,gBAAgB,MAAM,CAAC,gBACvB;;IAKV,IAAI,kBAAkB,CAAA,GAAA,yCAAS,EAC7B,CAAA,GAAA,uDAAK,GACL,uBACA;QACE,qCAAqC,kBAAkB;QACvD,iCAAiC,eAAe;IAClD,GACA,WAAW,SAAS;IAGtB,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC7B,GAAG,UAAU;QACd,SAAS;QACT,KAAK;QACL,WAAW;QACX,SAAS,gBAAgB,UAAU,YAAY,UAAU;OACxD,UACA,AAAC,CAAA,uBAAuB,WAAY,uBAAuB,UAAU,UAAU,KAC9E,WAID,uBAAuB,yBACtB,gCAAC;QAAK,eAAa,CAAC,+CAA+C,aAAa;OAC7E,iBAGJ,uBAAuB,UAAU,cAAc;AAGtD","sources":["packages/@adobe/react-spectrum/src/label/Label.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Alignment,\n DOMProps,\n DOMRef,\n LabelPosition,\n NecessityIndicator,\n StyleProps\n} from '@react-types/shared';\nimport Asterisk from '@spectrum-icons/ui/Asterisk';\nimport {classNames} from '../utils/classNames';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport intlMessages from '../../intl/label/*.json';\nimport React, {ElementType, HTMLAttributes, ReactNode} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface LabelProps {\n children?: ReactNode;\n htmlFor?: string; // for compatibility with React\n for?: string;\n elementType?: ElementType;\n}\n\nexport interface SpectrumLabelPropsBase extends LabelProps, DOMProps, StyleProps {\n labelPosition?: LabelPosition; // default top\n labelAlign?: Alignment; // default start\n isRequired?: boolean;\n necessityIndicator?: NecessityIndicator; // default icon\n includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\nexport interface SpectrumLabelProps extends SpectrumLabelPropsBase, HTMLAttributes<HTMLElement> {}\n\nexport const Label = React.forwardRef(function Label(\n props: SpectrumLabelProps,\n ref: DOMRef<HTMLLabelElement>\n) {\n props = useProviderProps(props);\n let {\n children,\n labelPosition = 'top',\n labelAlign = labelPosition === 'side' ? 'start' : null,\n isRequired,\n necessityIndicator = isRequired != null ? 'icon' : null,\n includeNecessityIndicatorInAccessibilityName = false,\n htmlFor,\n for: labelFor,\n elementType: ElementType = 'label',\n onClick,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let {styleProps} = useStyleProps(otherProps);\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/label');\n let necessityLabel = isRequired\n ? stringFormatter.format('(required)')\n : stringFormatter.format('(optional)');\n let icon = (\n <Asterisk\n UNSAFE_className={classNames(styles, 'spectrum-FieldLabel-requiredIcon')}\n aria-label={\n includeNecessityIndicatorInAccessibilityName\n ? stringFormatter.format('(required)')\n : undefined\n }\n />\n );\n\n let labelClassNames = classNames(\n styles,\n 'spectrum-FieldLabel',\n {\n 'spectrum-FieldLabel--positionSide': labelPosition === 'side',\n 'spectrum-FieldLabel--alignEnd': labelAlign === 'end'\n },\n styleProps.className\n );\n\n return (\n <ElementType\n {...filterDOMProps(otherProps)}\n {...styleProps}\n onClick={onClick}\n ref={domRef}\n className={labelClassNames}\n htmlFor={ElementType === 'label' ? labelFor || htmlFor : undefined}>\n {children}\n {(necessityIndicator === 'label' || (necessityIndicator === 'icon' && isRequired)) &&\n ' \\u200b'}\n {/* necessityLabel is hidden to screen readers if the field is required because\n * aria-required is set on the field in that case. That will already be announced,\n * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n {necessityIndicator === 'label' && (\n <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n {necessityLabel}\n </span>\n )}\n {necessityIndicator === 'icon' && isRequired && icon}\n </ElementType>\n );\n});\n"],"names":[],"version":3,"file":"Label.mjs.map"}
|
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
.dA8iBG_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
|
.dA8iBG_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
|
-
.dA8iBG_spectrum-FocusRing
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
.dA8iBG_spectrum-FocusRing {
|
|
59
|
+
&.dA8iBG_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
|
-
.dA8iBG_spectrum-FocusRing--quiet
|
|
64
|
-
|
|
65
|
-
|
|
67
|
+
.dA8iBG_spectrum-FocusRing--quiet {
|
|
68
|
+
&:after {
|
|
69
|
+
border-radius: 0;
|
|
70
|
+
}
|
|
66
71
|
|
|
67
|
-
|
|
68
|
-
|
|
72
|
+
&.dA8iBG_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
|
.dA8iBG_spectrum-FocusRing, .dA8iBG_spectrum-FocusRing-ring, .dA8iBG_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
|
|
|
@@ -87,23 +95,23 @@
|
|
|
87
95
|
background-color: #0000;
|
|
88
96
|
outline: none;
|
|
89
97
|
text-decoration: underline;
|
|
90
|
-
}
|
|
91
98
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
99
|
+
&.dA8iBG_is-hovered, &.dA8iBG_focus-ring {
|
|
100
|
+
text-decoration: underline;
|
|
101
|
+
}
|
|
95
102
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
103
|
+
&.dA8iBG_focus-ring {
|
|
104
|
+
text-decoration: underline double;
|
|
105
|
+
}
|
|
99
106
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
107
|
+
&.dA8iBG_is-disabled {
|
|
108
|
+
cursor: default;
|
|
109
|
+
pointer-events: none;
|
|
104
110
|
|
|
105
|
-
|
|
106
|
-
|
|
111
|
+
&.dA8iBG_is-hovered, &:focus {
|
|
112
|
+
text-decoration: none;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
107
115
|
}
|
|
108
116
|
|
|
109
117
|
.dA8iBG_spectrum-Link--secondary, .dA8iBG_spectrum-Link--overBackground {
|
|
@@ -120,51 +128,59 @@
|
|
|
120
128
|
--spectrum-link-text-color-down: var(--spectrum-accent-color-1100);
|
|
121
129
|
--spectrum-link-text-color-key-focus: var(--spectrum-accent-color-1000);
|
|
122
130
|
color: var(--spectrum-link-text-color, var(--spectrum-global-color-blue-600));
|
|
123
|
-
}
|
|
124
131
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
132
|
+
&.dA8iBG_is-hovered {
|
|
133
|
+
color: var(--spectrum-link-text-color-hover, var(--spectrum-global-color-blue-600));
|
|
134
|
+
}
|
|
128
135
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}
|
|
136
|
+
&:active {
|
|
137
|
+
color: var(--spectrum-link-text-color-down, var(--spectrum-global-color-blue-700));
|
|
138
|
+
}
|
|
132
139
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}
|
|
140
|
+
&.dA8iBG_focus-ring {
|
|
141
|
+
color: var(--spectrum-link-text-color-key-focus, var(--spectrum-alias-text-color-key-focus));
|
|
142
|
+
}
|
|
136
143
|
|
|
137
|
-
|
|
138
|
-
|
|
144
|
+
&.dA8iBG_is-disabled {
|
|
145
|
+
color: var(--spectrum-link-text-color-disabled, var(--spectrum-alias-text-color-disabled));
|
|
146
|
+
}
|
|
139
147
|
}
|
|
140
148
|
|
|
141
|
-
.dA8iBG_spectrum-Link--secondary
|
|
149
|
+
.dA8iBG_spectrum-Link--secondary {
|
|
142
150
|
color: inherit;
|
|
151
|
+
|
|
152
|
+
&.dA8iBG_is-hovered, &:active, &:focus {
|
|
153
|
+
color: inherit;
|
|
154
|
+
}
|
|
143
155
|
}
|
|
144
156
|
|
|
145
157
|
.dA8iBG_spectrum-Link--overBackground {
|
|
146
158
|
color: var(--spectrum-link-over-background-text-color, var(--spectrum-global-color-static-white));
|
|
147
|
-
}
|
|
148
159
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}
|
|
160
|
+
&.dA8iBG_is-hovered {
|
|
161
|
+
color: var(--spectrum-link-over-background-text-color-hover, var(--spectrum-global-color-static-white));
|
|
162
|
+
}
|
|
152
163
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}
|
|
164
|
+
&:active {
|
|
165
|
+
color: var(--spectrum-link-over-background-text-color-down, var(--spectrum-global-color-static-white));
|
|
166
|
+
}
|
|
156
167
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
}
|
|
168
|
+
&:focus {
|
|
169
|
+
color: var(--spectrum-link-over-background-text-color-key-focus, var(--spectrum-global-color-static-white));
|
|
170
|
+
}
|
|
160
171
|
|
|
161
|
-
|
|
162
|
-
|
|
172
|
+
&.dA8iBG_is-disabled {
|
|
173
|
+
color: var(--spectrum-link-over-background-text-color-disabled, #ffffff80);
|
|
174
|
+
}
|
|
163
175
|
}
|
|
164
176
|
|
|
165
177
|
@media (forced-colors: active) {
|
|
166
|
-
.dA8iBG_spectrum-Link
|
|
178
|
+
.dA8iBG_spectrum-Link {
|
|
167
179
|
color: linktext;
|
|
180
|
+
|
|
181
|
+
&.dA8iBG_is-hovered, &:active, &:focus {
|
|
182
|
+
color: linktext;
|
|
183
|
+
}
|
|
168
184
|
}
|
|
169
185
|
}
|
|
170
186
|
/*# sourceMappingURL=link_vars.css.map */
|
|
@@ -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/link/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":"link_vars.css.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/list/ListView.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {AriaGridListProps, useGridList} from 'react-aria/useGridList';\n\nimport {\n AsyncLoadable,\n DOMRef,\n Key,\n LoadingState,\n Node,\n SpectrumSelectionProps,\n StyleProps\n} from '@react-types/shared';\nimport {classNames} from '../utils/classNames';\nimport type {DragAndDropHooks} from '../dnd/useDragAndDrop';\nimport type {DraggableCollectionState} from 'react-stately/useDraggableCollectionState';\nimport type {DroppableCollectionResult} from 'react-aria/useDroppableCollection';\nimport type {DroppableCollectionState} from 'react-stately/useDroppableCollectionState';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport InsertionIndicator from './InsertionIndicator';\nimport intlMessages from '../../intl/list/*.json';\nimport {ListKeyboardDelegate} from 'react-aria/ListKeyboardDelegate';\nimport {ListState, useListState} from 'react-stately/useListState';\nimport listStyles from './styles.css';\n// @ts-ignore\nimport {ListViewItem} from './ListViewItem';\nimport {ListViewLayout} from './ListViewLayout';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n JSX,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport RootDropIndicator from './RootDropIndicator';\nimport {DragPreview as SpectrumDragPreview} from './DragPreview';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\n\nexport interface SpectrumListViewProps<T>\n extends\n Omit<AriaGridListProps<T>, 'keyboardNavigationBehavior'>,\n StyleProps,\n SpectrumSelectionProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * Sets the amount of vertical padding within each cell.\n *\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious';\n /** Whether the ListView should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * The current loading state of the ListView. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Sets the text behavior for the row contents.\n *\n * @default 'truncate'\n */\n overflowMode?: 'truncate' | 'wrap';\n /** Sets what the ListView should render when there is no content to display. */\n renderEmptyState?: () => JSX.Element;\n /**\n * Handler that is called when a user performs an action on an item. The exact user event depends\n * on the collection's `selectionStyle` prop and the interaction modality.\n */\n onAction?: (key: Key) => void;\n /**\n * The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for\n * the ListView.\n */\n dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>['dragAndDropHooks'];\n}\n\ninterface ListViewContextValue<T> {\n state: ListState<T>;\n dragState: DraggableCollectionState | null;\n dropState: DroppableCollectionState | null;\n dragAndDropHooks?: DragAndDropHooks<T>['dragAndDropHooks'];\n onAction?: (key: Key) => void;\n isListDraggable: boolean;\n isListDroppable: boolean;\n layout: ListViewLayout<T>;\n loadingState?: LoadingState;\n renderEmptyState?: () => JSX.Element;\n}\n\nexport const ListViewContext = React.createContext<ListViewContextValue<unknown> | null>(null);\n\nconst ROW_HEIGHTS = {\n compact: {\n medium: 32,\n large: 40\n },\n regular: {\n medium: 40,\n large: 50\n },\n spacious: {\n medium: 48,\n large: 60\n }\n};\n\nfunction useListLayout<T>(\n state: ListState<T>,\n density: SpectrumListViewProps<T>['density'],\n overflowMode: SpectrumListViewProps<T>['overflowMode']\n) {\n let {scale} = useProvider();\n let layout = useMemo(\n () =>\n new ListViewLayout<T>({\n estimatedRowHeight: ROW_HEIGHTS[density || 'regular'][scale]\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [scale, density, overflowMode]\n );\n\n return layout;\n}\n\n/**\n * A ListView displays a list of interactive items, and allows a user to navigate, select, or\n * perform an action.\n */\nexport const ListView = React.forwardRef(function ListView<T extends object>(\n props: SpectrumListViewProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n let {\n density = 'regular',\n loadingState,\n onLoadMore,\n isQuiet,\n overflowMode = 'truncate',\n onAction,\n dragAndDropHooks,\n renderEmptyState,\n ...otherProps\n } = props;\n let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;\n let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;\n let dragHooksProvided = useRef(isListDraggable);\n let dropHooksProvided = useRef(isListDroppable);\n useEffect(() => {\n if (dragHooksProvided.current !== isListDraggable && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.'\n );\n }\n if (dropHooksProvided.current !== isListDroppable && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.'\n );\n }\n }, [isListDraggable, isListDroppable]);\n\n let domRef = useDOMRef(ref);\n let state = useListState({\n ...props,\n selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'\n });\n let {collection, selectionManager} = state;\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n\n let {styleProps} = useStyleProps(props);\n let dragState: DraggableCollectionState | null = null;\n let preview = useRef(null);\n if (isListDraggable && dragAndDropHooks) {\n dragState = dragAndDropHooks.useDraggableCollectionState!({\n collection,\n selectionManager,\n preview\n });\n dragAndDropHooks.useDraggableCollection!({}, dragState, domRef);\n }\n let layout = useListLayout(state, props.density || 'regular', overflowMode);\n\n let DragPreview = dragAndDropHooks?.DragPreview;\n let dropState: DroppableCollectionState | null = null;\n let droppableCollection: DroppableCollectionResult | null = null;\n let isRootDropTarget = false;\n if (isListDroppable && dragAndDropHooks) {\n dropState = dragAndDropHooks.useDroppableCollectionState!({\n collection,\n selectionManager\n });\n droppableCollection = dragAndDropHooks.useDroppableCollection!(\n {\n keyboardDelegate: new ListKeyboardDelegate({\n collection,\n disabledKeys: dragState?.draggingKeys.size ? undefined : selectionManager.disabledKeys,\n ref: domRef,\n layoutDelegate: layout\n }),\n dropTargetDelegate: layout\n },\n dropState,\n domRef\n );\n\n isRootDropTarget = dropState.isDropTarget({type: 'root'});\n }\n\n let {gridProps} = useGridList(\n {\n ...props,\n isVirtualized: true,\n layoutDelegate: layout,\n onAction\n },\n state,\n domRef\n );\n\n let focusedKey = selectionManager.focusedKey;\n let dropTargetKey: Key | null = null;\n if (dropState?.target?.type === 'item') {\n dropTargetKey = dropState.target.key;\n if (dropState.target.dropPosition === 'after') {\n // Normalize to the \"before\" drop position since we only render those in the DOM.\n dropTargetKey = state.collection.getKeyAfter(dropTargetKey) ?? dropTargetKey;\n }\n }\n\n let persistedKeys = useMemo(() => {\n return new Set([focusedKey, dropTargetKey].filter(k => k !== null));\n }, [focusedKey, dropTargetKey]);\n\n // wait for layout to get accurate measurements\n let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = useState(false);\n let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = useState(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (domRef.current) {\n // 2 is the width of the border which is not part of the box size\n setVerticalScollbarVisible(domRef.current.clientWidth + 2 < domRef.current.offsetWidth);\n setHorizontalScollbarVisible(domRef.current.clientHeight + 2 < domRef.current.offsetHeight);\n }\n });\n\n let hasAnyChildren = useMemo(\n () => [...collection].some(item => item.hasChildNodes),\n [collection]\n );\n\n return (\n <ListViewContext.Provider\n value={{\n state,\n dragState,\n dropState,\n dragAndDropHooks,\n onAction,\n isListDraggable,\n isListDroppable,\n layout,\n loadingState,\n renderEmptyState\n }}>\n <FocusScope>\n <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n <Virtualizer\n {...mergeProps(\n isListDroppable ? droppableCollection?.collectionProps : null,\n gridProps\n )}\n {...filterDOMProps(otherProps)}\n {...gridProps}\n {...styleProps}\n onScroll={undefined}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n className={classNames(\n listStyles,\n 'react-spectrum-ListView',\n `react-spectrum-ListView--${density}`,\n 'react-spectrum-ListView--emphasized',\n {\n 'react-spectrum-ListView--quiet': isQuiet,\n 'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',\n 'react-spectrum-ListView--draggable': !!isListDraggable,\n 'react-spectrum-ListView--dropTarget': !!isRootDropTarget,\n 'react-spectrum-ListView--isVerticalScrollbarVisible': isVerticalScrollbarVisible,\n 'react-spectrum-ListView--isHorizontalScrollbarVisible':\n isHorizontalScrollbarVisible,\n 'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,\n 'react-spectrum-ListView--wrap': overflowMode === 'wrap'\n },\n styleProps.className\n )}\n layout={layout}\n layoutOptions={useMemo(() => ({isLoading}), [isLoading])}\n collection={collection}>\n {useCallback((type, item: Node<T>) => {\n if (type === 'item') {\n return <Item item={item} />;\n } else if (type === 'loader') {\n return <LoadingView />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </FocusRing>\n </FocusScope>\n {DragPreview && isListDraggable && dragAndDropHooks && dragState && (\n <DragPreview ref={preview}>\n {() => {\n if (dragState.draggedKey == null) {\n return null;\n }\n if (dragAndDropHooks.renderPreview) {\n return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);\n }\n let item = state.collection.getItem(dragState.draggedKey);\n if (!item) {\n return null;\n }\n let itemCount = dragState.draggingKeys.size;\n let itemHeight = layout.getLayoutInfo(dragState.draggedKey)?.rect.height ?? 0;\n return (\n <SpectrumDragPreview\n item={item}\n itemCount={itemCount}\n itemHeight={itemHeight}\n density={density}\n />\n );\n }}\n </DragPreview>\n )}\n </ListViewContext.Provider>\n );\n}) as <T>(props: SpectrumListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nfunction Item({item}: {item: Node<unknown>}) {\n let {isListDroppable, state, onAction} = useContext(ListViewContext)!;\n return (\n <>\n {isListDroppable && state.collection.getKeyBefore(item.key) == null && (\n <RootDropIndicator key=\"root\" />\n )}\n {isListDroppable && (\n <InsertionIndicator\n key={`${item.key}-before`}\n target={{key: item.key, type: 'item', dropPosition: 'before'}}\n />\n )}\n <ListViewItem item={item} isEmphasized hasActions={!!onAction} />\n {isListDroppable && (\n <InsertionIndicator\n key={`${item.key}-after`}\n target={{key: item.key, type: 'item', dropPosition: 'after'}}\n isPresentationOnly={state.collection.getKeyAfter(item.key) != null}\n />\n )}\n </>\n );\n}\n\nfunction LoadingView() {\n let {state} = useContext(ListViewContext)!;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/list');\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={\n state.collection.size > 0\n ? stringFormatter.format('loadingMore')\n : stringFormatter.format('loading')\n }\n />\n </CenteredWrapper>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useContext(ListViewContext)!;\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return <CenteredWrapper>{emptyState}</CenteredWrapper>;\n}\n\nfunction CenteredWrapper({children}) {\n let {state} = useContext(ListViewContext)!;\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(listStyles, 'react-spectrum-ListView-centeredWrapper', {\n 'react-spectrum-ListView-centeredWrapper--loadingMore': state.collection.size > 0\n })}>\n <div role=\"gridcell\">{children}</div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"ListView.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/list/ListView.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {AriaGridListProps, useGridList} from 'react-aria/useGridList';\nimport {\n AsyncLoadable,\n DOMRef,\n Key,\n LoadingState,\n Node,\n SpectrumSelectionProps,\n StyleProps\n} from '@react-types/shared';\nimport {classNames} from '../utils/classNames';\nimport type {DragAndDropHooks} from '../dnd/useDragAndDrop';\nimport type {DraggableCollectionState} from 'react-stately/useDraggableCollectionState';\nimport type {DroppableCollectionResult} from 'react-aria/useDroppableCollection';\nimport type {DroppableCollectionState} from 'react-stately/useDroppableCollectionState';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport InsertionIndicator from './InsertionIndicator';\nimport intlMessages from '../../intl/list/*.json';\nimport {ListKeyboardDelegate} from 'react-aria/ListKeyboardDelegate';\nimport {ListState, useListState} from 'react-stately/useListState';\nimport listStyles from './styles.css';\nimport {ListViewItem} from './ListViewItem';\nimport {ListViewLayout} from './ListViewLayout';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n JSX,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport RootDropIndicator from './RootDropIndicator';\nimport {DragPreview as SpectrumDragPreview} from './DragPreview';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\n\nexport interface SpectrumListViewProps<T>\n extends\n Omit<AriaGridListProps<T>, 'keyboardNavigationBehavior'>,\n StyleProps,\n SpectrumSelectionProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * Sets the amount of vertical padding within each cell.\n *\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious';\n /** Whether the ListView should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * The current loading state of the ListView. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Sets the text behavior for the row contents.\n *\n * @default 'truncate'\n */\n overflowMode?: 'truncate' | 'wrap';\n /** Sets what the ListView should render when there is no content to display. */\n renderEmptyState?: () => JSX.Element;\n /**\n * Handler that is called when a user performs an action on an item. The exact user event depends\n * on the collection's `selectionStyle` prop and the interaction modality.\n */\n onAction?: (key: Key) => void;\n /**\n * The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for\n * the ListView.\n */\n dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>['dragAndDropHooks'];\n}\n\ninterface ListViewContextValue<T> {\n state: ListState<T>;\n dragState: DraggableCollectionState | null;\n dropState: DroppableCollectionState | null;\n dragAndDropHooks?: DragAndDropHooks<T>['dragAndDropHooks'];\n onAction?: (key: Key) => void;\n isListDraggable: boolean;\n isListDroppable: boolean;\n layout: ListViewLayout<T>;\n loadingState?: LoadingState;\n renderEmptyState?: () => JSX.Element;\n}\n\nexport const ListViewContext = React.createContext<ListViewContextValue<unknown> | null>(null);\n\nconst ROW_HEIGHTS = {\n compact: {\n medium: 32,\n large: 40\n },\n regular: {\n medium: 40,\n large: 50\n },\n spacious: {\n medium: 48,\n large: 60\n }\n};\n\nfunction useListLayout<T>(\n state: ListState<T>,\n density: SpectrumListViewProps<T>['density'],\n overflowMode: SpectrumListViewProps<T>['overflowMode']\n) {\n let {scale} = useProvider();\n let layout = useMemo(\n () =>\n new ListViewLayout<T>({\n estimatedRowHeight: ROW_HEIGHTS[density || 'regular'][scale]\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [scale, density, overflowMode]\n );\n\n return layout;\n}\n\n/**\n * A ListView displays a list of interactive items, and allows a user to navigate, select, or\n * perform an action.\n */\nexport const ListView = React.forwardRef(function ListView<T extends object>(\n props: SpectrumListViewProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n let {\n density = 'regular',\n loadingState,\n onLoadMore,\n isQuiet,\n overflowMode = 'truncate',\n onAction,\n dragAndDropHooks,\n renderEmptyState,\n ...otherProps\n } = props;\n let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;\n let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;\n let dragHooksProvided = useRef(isListDraggable);\n let dropHooksProvided = useRef(isListDroppable);\n useEffect(() => {\n if (dragHooksProvided.current !== isListDraggable && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.'\n );\n }\n if (dropHooksProvided.current !== isListDroppable && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.'\n );\n }\n }, [isListDraggable, isListDroppable]);\n\n let domRef = useDOMRef(ref);\n let state = useListState({\n ...props,\n selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'\n });\n let {collection, selectionManager} = state;\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n\n let {styleProps} = useStyleProps(props);\n let dragState: DraggableCollectionState | null = null;\n let preview = useRef(null);\n if (isListDraggable && dragAndDropHooks) {\n dragState = dragAndDropHooks.useDraggableCollectionState!({\n collection,\n selectionManager,\n preview\n });\n dragAndDropHooks.useDraggableCollection!({}, dragState, domRef);\n }\n let layout = useListLayout(state, props.density || 'regular', overflowMode);\n\n let DragPreview = dragAndDropHooks?.DragPreview;\n let dropState: DroppableCollectionState | null = null;\n let droppableCollection: DroppableCollectionResult | null = null;\n let isRootDropTarget = false;\n if (isListDroppable && dragAndDropHooks) {\n dropState = dragAndDropHooks.useDroppableCollectionState!({\n collection,\n selectionManager\n });\n droppableCollection = dragAndDropHooks.useDroppableCollection!(\n {\n keyboardDelegate: new ListKeyboardDelegate({\n collection,\n disabledKeys: dragState?.draggingKeys.size ? undefined : selectionManager.disabledKeys,\n ref: domRef,\n layoutDelegate: layout\n }),\n dropTargetDelegate: layout\n },\n dropState,\n domRef\n );\n\n isRootDropTarget = dropState.isDropTarget({type: 'root'});\n }\n\n let {gridProps} = useGridList(\n {\n ...props,\n isVirtualized: true,\n layoutDelegate: layout,\n onAction\n },\n state,\n domRef\n );\n\n let focusedKey = selectionManager.focusedKey;\n let dropTargetKey: Key | null = null;\n if (dropState?.target?.type === 'item') {\n dropTargetKey = dropState.target.key;\n if (dropState.target.dropPosition === 'after') {\n // Normalize to the \"before\" drop position since we only render those in the DOM.\n dropTargetKey = state.collection.getKeyAfter(dropTargetKey) ?? dropTargetKey;\n }\n }\n\n let persistedKeys = useMemo(() => {\n return new Set([focusedKey, dropTargetKey].filter(k => k !== null));\n }, [focusedKey, dropTargetKey]);\n\n // wait for layout to get accurate measurements\n let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = useState(false);\n let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = useState(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (domRef.current) {\n // 2 is the width of the border which is not part of the box size\n setVerticalScollbarVisible(domRef.current.clientWidth + 2 < domRef.current.offsetWidth);\n setHorizontalScollbarVisible(domRef.current.clientHeight + 2 < domRef.current.offsetHeight);\n }\n });\n\n let hasAnyChildren = useMemo(\n () => [...collection].some(item => item.hasChildNodes),\n [collection]\n );\n\n return (\n <ListViewContext.Provider\n value={{\n state,\n dragState,\n dropState,\n dragAndDropHooks,\n onAction,\n isListDraggable,\n isListDroppable,\n layout,\n loadingState,\n renderEmptyState\n }}>\n <FocusScope>\n <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n <Virtualizer\n {...mergeProps(\n isListDroppable ? droppableCollection?.collectionProps : null,\n gridProps\n )}\n {...filterDOMProps(otherProps)}\n {...gridProps}\n {...styleProps}\n onScroll={undefined}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n className={classNames(\n listStyles,\n 'react-spectrum-ListView',\n `react-spectrum-ListView--${density}`,\n 'react-spectrum-ListView--emphasized',\n {\n 'react-spectrum-ListView--quiet': isQuiet,\n 'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',\n 'react-spectrum-ListView--draggable': !!isListDraggable,\n 'react-spectrum-ListView--dropTarget': !!isRootDropTarget,\n 'react-spectrum-ListView--isVerticalScrollbarVisible': isVerticalScrollbarVisible,\n 'react-spectrum-ListView--isHorizontalScrollbarVisible':\n isHorizontalScrollbarVisible,\n 'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,\n 'react-spectrum-ListView--wrap': overflowMode === 'wrap'\n },\n styleProps.className\n )}\n layout={layout}\n layoutOptions={useMemo(() => ({isLoading}), [isLoading])}\n collection={collection}>\n {useCallback((type, item: Node<T>) => {\n if (type === 'item') {\n return <Item item={item} />;\n } else if (type === 'loader') {\n return <LoadingView />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </FocusRing>\n </FocusScope>\n {DragPreview && isListDraggable && dragAndDropHooks && dragState && (\n <DragPreview ref={preview}>\n {() => {\n if (dragState.draggedKey == null) {\n return null;\n }\n if (dragAndDropHooks.renderPreview) {\n return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);\n }\n let item = state.collection.getItem(dragState.draggedKey);\n if (!item) {\n return null;\n }\n let itemCount = dragState.draggingKeys.size;\n let itemHeight = layout.getLayoutInfo(dragState.draggedKey)?.rect.height ?? 0;\n return (\n <SpectrumDragPreview\n item={item}\n itemCount={itemCount}\n itemHeight={itemHeight}\n density={density}\n />\n );\n }}\n </DragPreview>\n )}\n </ListViewContext.Provider>\n );\n}) as <T>(props: SpectrumListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nfunction Item({item}: {item: Node<unknown>}) {\n let {isListDroppable, state, onAction} = useContext(ListViewContext)!;\n return (\n <>\n {isListDroppable && state.collection.getKeyBefore(item.key) == null && (\n <RootDropIndicator key=\"root\" />\n )}\n {isListDroppable && (\n <InsertionIndicator\n key={`${item.key}-before`}\n target={{key: item.key, type: 'item', dropPosition: 'before'}}\n />\n )}\n <ListViewItem item={item} isEmphasized hasActions={!!onAction} />\n {isListDroppable && (\n <InsertionIndicator\n key={`${item.key}-after`}\n target={{key: item.key, type: 'item', dropPosition: 'after'}}\n isPresentationOnly={state.collection.getKeyAfter(item.key) != null}\n />\n )}\n </>\n );\n}\n\nfunction LoadingView() {\n let {state} = useContext(ListViewContext)!;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/list');\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={\n state.collection.size > 0\n ? stringFormatter.format('loadingMore')\n : stringFormatter.format('loading')\n }\n />\n </CenteredWrapper>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useContext(ListViewContext)!;\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return <CenteredWrapper>{emptyState}</CenteredWrapper>;\n}\n\nfunction CenteredWrapper({children}) {\n let {state} = useContext(ListViewContext)!;\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(listStyles, 'react-spectrum-ListView-centeredWrapper', {\n 'react-spectrum-ListView-centeredWrapper--loadingMore': state.collection.size > 0\n })}>\n <div role=\"gridcell\">{children}</div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"ListView.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/list/ListView.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {AriaGridListProps, useGridList} from 'react-aria/useGridList';\n\nimport {\n AsyncLoadable,\n DOMRef,\n Key,\n LoadingState,\n Node,\n SpectrumSelectionProps,\n StyleProps\n} from '@react-types/shared';\nimport {classNames} from '../utils/classNames';\nimport type {DragAndDropHooks} from '../dnd/useDragAndDrop';\nimport type {DraggableCollectionState} from 'react-stately/useDraggableCollectionState';\nimport type {DroppableCollectionResult} from 'react-aria/useDroppableCollection';\nimport type {DroppableCollectionState} from 'react-stately/useDroppableCollectionState';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport InsertionIndicator from './InsertionIndicator';\nimport intlMessages from '../../intl/list/*.json';\nimport {ListKeyboardDelegate} from 'react-aria/ListKeyboardDelegate';\nimport {ListState, useListState} from 'react-stately/useListState';\nimport listStyles from './styles.css';\n// @ts-ignore\nimport {ListViewItem} from './ListViewItem';\nimport {ListViewLayout} from './ListViewLayout';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n JSX,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport RootDropIndicator from './RootDropIndicator';\nimport {DragPreview as SpectrumDragPreview} from './DragPreview';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\n\nexport interface SpectrumListViewProps<T>\n extends\n Omit<AriaGridListProps<T>, 'keyboardNavigationBehavior'>,\n StyleProps,\n SpectrumSelectionProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * Sets the amount of vertical padding within each cell.\n *\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious';\n /** Whether the ListView should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * The current loading state of the ListView. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Sets the text behavior for the row contents.\n *\n * @default 'truncate'\n */\n overflowMode?: 'truncate' | 'wrap';\n /** Sets what the ListView should render when there is no content to display. */\n renderEmptyState?: () => JSX.Element;\n /**\n * Handler that is called when a user performs an action on an item. The exact user event depends\n * on the collection's `selectionStyle` prop and the interaction modality.\n */\n onAction?: (key: Key) => void;\n /**\n * The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for\n * the ListView.\n */\n dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>['dragAndDropHooks'];\n}\n\ninterface ListViewContextValue<T> {\n state: ListState<T>;\n dragState: DraggableCollectionState | null;\n dropState: DroppableCollectionState | null;\n dragAndDropHooks?: DragAndDropHooks<T>['dragAndDropHooks'];\n onAction?: (key: Key) => void;\n isListDraggable: boolean;\n isListDroppable: boolean;\n layout: ListViewLayout<T>;\n loadingState?: LoadingState;\n renderEmptyState?: () => JSX.Element;\n}\n\nexport const ListViewContext = React.createContext<ListViewContextValue<unknown> | null>(null);\n\nconst ROW_HEIGHTS = {\n compact: {\n medium: 32,\n large: 40\n },\n regular: {\n medium: 40,\n large: 50\n },\n spacious: {\n medium: 48,\n large: 60\n }\n};\n\nfunction useListLayout<T>(\n state: ListState<T>,\n density: SpectrumListViewProps<T>['density'],\n overflowMode: SpectrumListViewProps<T>['overflowMode']\n) {\n let {scale} = useProvider();\n let layout = useMemo(\n () =>\n new ListViewLayout<T>({\n estimatedRowHeight: ROW_HEIGHTS[density || 'regular'][scale]\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [scale, density, overflowMode]\n );\n\n return layout;\n}\n\n/**\n * A ListView displays a list of interactive items, and allows a user to navigate, select, or\n * perform an action.\n */\nexport const ListView = React.forwardRef(function ListView<T extends object>(\n props: SpectrumListViewProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n let {\n density = 'regular',\n loadingState,\n onLoadMore,\n isQuiet,\n overflowMode = 'truncate',\n onAction,\n dragAndDropHooks,\n renderEmptyState,\n ...otherProps\n } = props;\n let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;\n let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;\n let dragHooksProvided = useRef(isListDraggable);\n let dropHooksProvided = useRef(isListDroppable);\n useEffect(() => {\n if (dragHooksProvided.current !== isListDraggable && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.'\n );\n }\n if (dropHooksProvided.current !== isListDroppable && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.'\n );\n }\n }, [isListDraggable, isListDroppable]);\n\n let domRef = useDOMRef(ref);\n let state = useListState({\n ...props,\n selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'\n });\n let {collection, selectionManager} = state;\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n\n let {styleProps} = useStyleProps(props);\n let dragState: DraggableCollectionState | null = null;\n let preview = useRef(null);\n if (isListDraggable && dragAndDropHooks) {\n dragState = dragAndDropHooks.useDraggableCollectionState!({\n collection,\n selectionManager,\n preview\n });\n dragAndDropHooks.useDraggableCollection!({}, dragState, domRef);\n }\n let layout = useListLayout(state, props.density || 'regular', overflowMode);\n\n let DragPreview = dragAndDropHooks?.DragPreview;\n let dropState: DroppableCollectionState | null = null;\n let droppableCollection: DroppableCollectionResult | null = null;\n let isRootDropTarget = false;\n if (isListDroppable && dragAndDropHooks) {\n dropState = dragAndDropHooks.useDroppableCollectionState!({\n collection,\n selectionManager\n });\n droppableCollection = dragAndDropHooks.useDroppableCollection!(\n {\n keyboardDelegate: new ListKeyboardDelegate({\n collection,\n disabledKeys: dragState?.draggingKeys.size ? undefined : selectionManager.disabledKeys,\n ref: domRef,\n layoutDelegate: layout\n }),\n dropTargetDelegate: layout\n },\n dropState,\n domRef\n );\n\n isRootDropTarget = dropState.isDropTarget({type: 'root'});\n }\n\n let {gridProps} = useGridList(\n {\n ...props,\n isVirtualized: true,\n layoutDelegate: layout,\n onAction\n },\n state,\n domRef\n );\n\n let focusedKey = selectionManager.focusedKey;\n let dropTargetKey: Key | null = null;\n if (dropState?.target?.type === 'item') {\n dropTargetKey = dropState.target.key;\n if (dropState.target.dropPosition === 'after') {\n // Normalize to the \"before\" drop position since we only render those in the DOM.\n dropTargetKey = state.collection.getKeyAfter(dropTargetKey) ?? dropTargetKey;\n }\n }\n\n let persistedKeys = useMemo(() => {\n return new Set([focusedKey, dropTargetKey].filter(k => k !== null));\n }, [focusedKey, dropTargetKey]);\n\n // wait for layout to get accurate measurements\n let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = useState(false);\n let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = useState(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (domRef.current) {\n // 2 is the width of the border which is not part of the box size\n setVerticalScollbarVisible(domRef.current.clientWidth + 2 < domRef.current.offsetWidth);\n setHorizontalScollbarVisible(domRef.current.clientHeight + 2 < domRef.current.offsetHeight);\n }\n });\n\n let hasAnyChildren = useMemo(\n () => [...collection].some(item => item.hasChildNodes),\n [collection]\n );\n\n return (\n <ListViewContext.Provider\n value={{\n state,\n dragState,\n dropState,\n dragAndDropHooks,\n onAction,\n isListDraggable,\n isListDroppable,\n layout,\n loadingState,\n renderEmptyState\n }}>\n <FocusScope>\n <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n <Virtualizer\n {...mergeProps(\n isListDroppable ? droppableCollection?.collectionProps : null,\n gridProps\n )}\n {...filterDOMProps(otherProps)}\n {...gridProps}\n {...styleProps}\n onScroll={undefined}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n className={classNames(\n listStyles,\n 'react-spectrum-ListView',\n `react-spectrum-ListView--${density}`,\n 'react-spectrum-ListView--emphasized',\n {\n 'react-spectrum-ListView--quiet': isQuiet,\n 'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',\n 'react-spectrum-ListView--draggable': !!isListDraggable,\n 'react-spectrum-ListView--dropTarget': !!isRootDropTarget,\n 'react-spectrum-ListView--isVerticalScrollbarVisible': isVerticalScrollbarVisible,\n 'react-spectrum-ListView--isHorizontalScrollbarVisible':\n isHorizontalScrollbarVisible,\n 'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,\n 'react-spectrum-ListView--wrap': overflowMode === 'wrap'\n },\n styleProps.className\n )}\n layout={layout}\n layoutOptions={useMemo(() => ({isLoading}), [isLoading])}\n collection={collection}>\n {useCallback((type, item: Node<T>) => {\n if (type === 'item') {\n return <Item item={item} />;\n } else if (type === 'loader') {\n return <LoadingView />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </FocusRing>\n </FocusScope>\n {DragPreview && isListDraggable && dragAndDropHooks && dragState && (\n <DragPreview ref={preview}>\n {() => {\n if (dragState.draggedKey == null) {\n return null;\n }\n if (dragAndDropHooks.renderPreview) {\n return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);\n }\n let item = state.collection.getItem(dragState.draggedKey);\n if (!item) {\n return null;\n }\n let itemCount = dragState.draggingKeys.size;\n let itemHeight = layout.getLayoutInfo(dragState.draggedKey)?.rect.height ?? 0;\n return (\n <SpectrumDragPreview\n item={item}\n itemCount={itemCount}\n itemHeight={itemHeight}\n density={density}\n />\n );\n }}\n </DragPreview>\n )}\n </ListViewContext.Provider>\n );\n}) as <T>(props: SpectrumListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nfunction Item({item}: {item: Node<unknown>}) {\n let {isListDroppable, state, onAction} = useContext(ListViewContext)!;\n return (\n <>\n {isListDroppable && state.collection.getKeyBefore(item.key) == null && (\n <RootDropIndicator key=\"root\" />\n )}\n {isListDroppable && (\n <InsertionIndicator\n key={`${item.key}-before`}\n target={{key: item.key, type: 'item', dropPosition: 'before'}}\n />\n )}\n <ListViewItem item={item} isEmphasized hasActions={!!onAction} />\n {isListDroppable && (\n <InsertionIndicator\n key={`${item.key}-after`}\n target={{key: item.key, type: 'item', dropPosition: 'after'}}\n isPresentationOnly={state.collection.getKeyAfter(item.key) != null}\n />\n )}\n </>\n );\n}\n\nfunction LoadingView() {\n let {state} = useContext(ListViewContext)!;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/list');\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={\n state.collection.size > 0\n ? stringFormatter.format('loadingMore')\n : stringFormatter.format('loading')\n }\n />\n </CenteredWrapper>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useContext(ListViewContext)!;\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return <CenteredWrapper>{emptyState}</CenteredWrapper>;\n}\n\nfunction CenteredWrapper({children}) {\n let {state} = useContext(ListViewContext)!;\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(listStyles, 'react-spectrum-ListView-centeredWrapper', {\n 'react-spectrum-ListView-centeredWrapper--loadingMore': state.collection.size > 0\n })}>\n <div role=\"gridcell\">{children}</div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"ListView.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/list/ListView.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {AriaGridListProps, useGridList} from 'react-aria/useGridList';\nimport {\n AsyncLoadable,\n DOMRef,\n Key,\n LoadingState,\n Node,\n SpectrumSelectionProps,\n StyleProps\n} from '@react-types/shared';\nimport {classNames} from '../utils/classNames';\nimport type {DragAndDropHooks} from '../dnd/useDragAndDrop';\nimport type {DraggableCollectionState} from 'react-stately/useDraggableCollectionState';\nimport type {DroppableCollectionResult} from 'react-aria/useDroppableCollection';\nimport type {DroppableCollectionState} from 'react-stately/useDroppableCollectionState';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport InsertionIndicator from './InsertionIndicator';\nimport intlMessages from '../../intl/list/*.json';\nimport {ListKeyboardDelegate} from 'react-aria/ListKeyboardDelegate';\nimport {ListState, useListState} from 'react-stately/useListState';\nimport listStyles from './styles.css';\nimport {ListViewItem} from './ListViewItem';\nimport {ListViewLayout} from './ListViewLayout';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n JSX,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport RootDropIndicator from './RootDropIndicator';\nimport {DragPreview as SpectrumDragPreview} from './DragPreview';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\n\nexport interface SpectrumListViewProps<T>\n extends\n Omit<AriaGridListProps<T>, 'keyboardNavigationBehavior'>,\n StyleProps,\n SpectrumSelectionProps,\n Omit<AsyncLoadable, 'isLoading'> {\n /**\n * Sets the amount of vertical padding within each cell.\n *\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious';\n /** Whether the ListView should be displayed with a quiet style. */\n isQuiet?: boolean;\n /**\n * The current loading state of the ListView. Determines whether or not the progress circle should\n * be shown.\n */\n loadingState?: LoadingState;\n /**\n * Sets the text behavior for the row contents.\n *\n * @default 'truncate'\n */\n overflowMode?: 'truncate' | 'wrap';\n /** Sets what the ListView should render when there is no content to display. */\n renderEmptyState?: () => JSX.Element;\n /**\n * Handler that is called when a user performs an action on an item. The exact user event depends\n * on the collection's `selectionStyle` prop and the interaction modality.\n */\n onAction?: (key: Key) => void;\n /**\n * The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for\n * the ListView.\n */\n dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>['dragAndDropHooks'];\n}\n\ninterface ListViewContextValue<T> {\n state: ListState<T>;\n dragState: DraggableCollectionState | null;\n dropState: DroppableCollectionState | null;\n dragAndDropHooks?: DragAndDropHooks<T>['dragAndDropHooks'];\n onAction?: (key: Key) => void;\n isListDraggable: boolean;\n isListDroppable: boolean;\n layout: ListViewLayout<T>;\n loadingState?: LoadingState;\n renderEmptyState?: () => JSX.Element;\n}\n\nexport const ListViewContext = React.createContext<ListViewContextValue<unknown> | null>(null);\n\nconst ROW_HEIGHTS = {\n compact: {\n medium: 32,\n large: 40\n },\n regular: {\n medium: 40,\n large: 50\n },\n spacious: {\n medium: 48,\n large: 60\n }\n};\n\nfunction useListLayout<T>(\n state: ListState<T>,\n density: SpectrumListViewProps<T>['density'],\n overflowMode: SpectrumListViewProps<T>['overflowMode']\n) {\n let {scale} = useProvider();\n let layout = useMemo(\n () =>\n new ListViewLayout<T>({\n estimatedRowHeight: ROW_HEIGHTS[density || 'regular'][scale]\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [scale, density, overflowMode]\n );\n\n return layout;\n}\n\n/**\n * A ListView displays a list of interactive items, and allows a user to navigate, select, or\n * perform an action.\n */\nexport const ListView = React.forwardRef(function ListView<T extends object>(\n props: SpectrumListViewProps<T>,\n ref: DOMRef<HTMLDivElement>\n) {\n let {\n density = 'regular',\n loadingState,\n onLoadMore,\n isQuiet,\n overflowMode = 'truncate',\n onAction,\n dragAndDropHooks,\n renderEmptyState,\n ...otherProps\n } = props;\n let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;\n let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;\n let dragHooksProvided = useRef(isListDraggable);\n let dropHooksProvided = useRef(isListDroppable);\n useEffect(() => {\n if (dragHooksProvided.current !== isListDraggable && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.'\n );\n }\n if (dropHooksProvided.current !== isListDroppable && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.'\n );\n }\n }, [isListDraggable, isListDroppable]);\n\n let domRef = useDOMRef(ref);\n let state = useListState({\n ...props,\n selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'\n });\n let {collection, selectionManager} = state;\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n\n let {styleProps} = useStyleProps(props);\n let dragState: DraggableCollectionState | null = null;\n let preview = useRef(null);\n if (isListDraggable && dragAndDropHooks) {\n dragState = dragAndDropHooks.useDraggableCollectionState!({\n collection,\n selectionManager,\n preview\n });\n dragAndDropHooks.useDraggableCollection!({}, dragState, domRef);\n }\n let layout = useListLayout(state, props.density || 'regular', overflowMode);\n\n let DragPreview = dragAndDropHooks?.DragPreview;\n let dropState: DroppableCollectionState | null = null;\n let droppableCollection: DroppableCollectionResult | null = null;\n let isRootDropTarget = false;\n if (isListDroppable && dragAndDropHooks) {\n dropState = dragAndDropHooks.useDroppableCollectionState!({\n collection,\n selectionManager\n });\n droppableCollection = dragAndDropHooks.useDroppableCollection!(\n {\n keyboardDelegate: new ListKeyboardDelegate({\n collection,\n disabledKeys: dragState?.draggingKeys.size ? undefined : selectionManager.disabledKeys,\n ref: domRef,\n layoutDelegate: layout\n }),\n dropTargetDelegate: layout\n },\n dropState,\n domRef\n );\n\n isRootDropTarget = dropState.isDropTarget({type: 'root'});\n }\n\n let {gridProps} = useGridList(\n {\n ...props,\n isVirtualized: true,\n layoutDelegate: layout,\n onAction\n },\n state,\n domRef\n );\n\n let focusedKey = selectionManager.focusedKey;\n let dropTargetKey: Key | null = null;\n if (dropState?.target?.type === 'item') {\n dropTargetKey = dropState.target.key;\n if (dropState.target.dropPosition === 'after') {\n // Normalize to the \"before\" drop position since we only render those in the DOM.\n dropTargetKey = state.collection.getKeyAfter(dropTargetKey) ?? dropTargetKey;\n }\n }\n\n let persistedKeys = useMemo(() => {\n return new Set([focusedKey, dropTargetKey].filter(k => k !== null));\n }, [focusedKey, dropTargetKey]);\n\n // wait for layout to get accurate measurements\n let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = useState(false);\n let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = useState(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (domRef.current) {\n // 2 is the width of the border which is not part of the box size\n setVerticalScollbarVisible(domRef.current.clientWidth + 2 < domRef.current.offsetWidth);\n setHorizontalScollbarVisible(domRef.current.clientHeight + 2 < domRef.current.offsetHeight);\n }\n });\n\n let hasAnyChildren = useMemo(\n () => [...collection].some(item => item.hasChildNodes),\n [collection]\n );\n\n return (\n <ListViewContext.Provider\n value={{\n state,\n dragState,\n dropState,\n dragAndDropHooks,\n onAction,\n isListDraggable,\n isListDroppable,\n layout,\n loadingState,\n renderEmptyState\n }}>\n <FocusScope>\n <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n <Virtualizer\n {...mergeProps(\n isListDroppable ? droppableCollection?.collectionProps : null,\n gridProps\n )}\n {...filterDOMProps(otherProps)}\n {...gridProps}\n {...styleProps}\n onScroll={undefined}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n className={classNames(\n listStyles,\n 'react-spectrum-ListView',\n `react-spectrum-ListView--${density}`,\n 'react-spectrum-ListView--emphasized',\n {\n 'react-spectrum-ListView--quiet': isQuiet,\n 'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',\n 'react-spectrum-ListView--draggable': !!isListDraggable,\n 'react-spectrum-ListView--dropTarget': !!isRootDropTarget,\n 'react-spectrum-ListView--isVerticalScrollbarVisible': isVerticalScrollbarVisible,\n 'react-spectrum-ListView--isHorizontalScrollbarVisible':\n isHorizontalScrollbarVisible,\n 'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,\n 'react-spectrum-ListView--wrap': overflowMode === 'wrap'\n },\n styleProps.className\n )}\n layout={layout}\n layoutOptions={useMemo(() => ({isLoading}), [isLoading])}\n collection={collection}>\n {useCallback((type, item: Node<T>) => {\n if (type === 'item') {\n return <Item item={item} />;\n } else if (type === 'loader') {\n return <LoadingView />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </FocusRing>\n </FocusScope>\n {DragPreview && isListDraggable && dragAndDropHooks && dragState && (\n <DragPreview ref={preview}>\n {() => {\n if (dragState.draggedKey == null) {\n return null;\n }\n if (dragAndDropHooks.renderPreview) {\n return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);\n }\n let item = state.collection.getItem(dragState.draggedKey);\n if (!item) {\n return null;\n }\n let itemCount = dragState.draggingKeys.size;\n let itemHeight = layout.getLayoutInfo(dragState.draggedKey)?.rect.height ?? 0;\n return (\n <SpectrumDragPreview\n item={item}\n itemCount={itemCount}\n itemHeight={itemHeight}\n density={density}\n />\n );\n }}\n </DragPreview>\n )}\n </ListViewContext.Provider>\n );\n}) as <T>(props: SpectrumListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nfunction Item({item}: {item: Node<unknown>}) {\n let {isListDroppable, state, onAction} = useContext(ListViewContext)!;\n return (\n <>\n {isListDroppable && state.collection.getKeyBefore(item.key) == null && (\n <RootDropIndicator key=\"root\" />\n )}\n {isListDroppable && (\n <InsertionIndicator\n key={`${item.key}-before`}\n target={{key: item.key, type: 'item', dropPosition: 'before'}}\n />\n )}\n <ListViewItem item={item} isEmphasized hasActions={!!onAction} />\n {isListDroppable && (\n <InsertionIndicator\n key={`${item.key}-after`}\n target={{key: item.key, type: 'item', dropPosition: 'after'}}\n isPresentationOnly={state.collection.getKeyAfter(item.key) != null}\n />\n )}\n </>\n );\n}\n\nfunction LoadingView() {\n let {state} = useContext(ListViewContext)!;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/list');\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={\n state.collection.size > 0\n ? stringFormatter.format('loadingMore')\n : stringFormatter.format('loading')\n }\n />\n </CenteredWrapper>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useContext(ListViewContext)!;\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return <CenteredWrapper>{emptyState}</CenteredWrapper>;\n}\n\nfunction CenteredWrapper({children}) {\n let {state} = useContext(ListViewContext)!;\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(listStyles, 'react-spectrum-ListView-centeredWrapper', {\n 'react-spectrum-ListView-centeredWrapper--loadingMore': state.collection.size > 0\n })}>\n <div role=\"gridcell\">{children}</div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"ListView.js.map"}
|