@react-spectrum/list 3.8.3 → 3.9.1

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.
Files changed (34) hide show
  1. package/dist/DragPreview.main.js.map +1 -1
  2. package/dist/DragPreview.module.js.map +1 -1
  3. package/dist/InsertionIndicator.main.js +1 -1
  4. package/dist/InsertionIndicator.main.js.map +1 -1
  5. package/dist/InsertionIndicator.mjs +1 -1
  6. package/dist/InsertionIndicator.module.js +1 -1
  7. package/dist/InsertionIndicator.module.js.map +1 -1
  8. package/dist/ListView.main.js +17 -16
  9. package/dist/ListView.main.js.map +1 -1
  10. package/dist/ListView.mjs +17 -16
  11. package/dist/ListView.module.js +17 -16
  12. package/dist/ListView.module.js.map +1 -1
  13. package/dist/ListViewItem.main.js +20 -27
  14. package/dist/ListViewItem.main.js.map +1 -1
  15. package/dist/ListViewItem.mjs +20 -27
  16. package/dist/ListViewItem.module.js +20 -27
  17. package/dist/ListViewItem.module.js.map +1 -1
  18. package/dist/ListViewLayout.main.js +3 -3
  19. package/dist/ListViewLayout.main.js.map +1 -1
  20. package/dist/ListViewLayout.mjs +3 -3
  21. package/dist/ListViewLayout.module.js +3 -3
  22. package/dist/ListViewLayout.module.js.map +1 -1
  23. package/dist/RootDropIndicator.main.js +1 -1
  24. package/dist/RootDropIndicator.main.js.map +1 -1
  25. package/dist/RootDropIndicator.mjs +1 -1
  26. package/dist/RootDropIndicator.module.js +1 -1
  27. package/dist/RootDropIndicator.module.js.map +1 -1
  28. package/dist/types.d.ts.map +1 -1
  29. package/package.json +26 -26
  30. package/src/InsertionIndicator.tsx +4 -4
  31. package/src/ListView.tsx +37 -34
  32. package/src/ListViewItem.tsx +28 -29
  33. package/src/ListViewLayout.ts +2 -2
  34. package/src/RootDropIndicator.tsx +5 -5
package/dist/DragPreview.main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgBM,SAAS,0CAAY,KAAgC;IAC1D,IAAI,QACF,IAAI,aACJ,SAAS,cACT,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,qBAAqB,YAAY;IAErC,qBACE,0DAAC;QACC,OAAO;YAAC,QAAQ;QAAU;QAC1B,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAS,GACT,+BACA,2CACA;YAAC,qDAAqD;QAAkB,GACxE,CAAC,yCAAyC,EAAE,QAAQ,CAAC;qBAGzD,0DAAC,CAAA,GAAA,+BAAG;QAAE,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,mCAAmC;qBACpE,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;YAAA;YAC1E,aAAa;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,0CAA0C;YAAA;YACrF,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YACpF,OAAO;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YAC7E,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBAAE,SAAS;YAAI;YACjG,aAAa;gBACX,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBACnE,SAAS;gBACT,SAAS;YACX;YACA,YAAY;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,yCAAyC;gBAAE,SAAS;YAAI;QACpG;OACC,OAAO,KAAK,QAAQ,KAAK,yBAAW,0DAAC,CAAA,GAAA,6BAAG,SAAG,KAAK,QAAQ,IAAW,KAAK,QAAQ,EAChF,oCACC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAS,GAAG;OAAuC;AAM1F","sources":["packages/@react-spectrum/list/src/DragPreview.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 */\nimport {classNames, SlotProvider} from '@react-spectrum/utils';\nimport {Grid} from '@react-spectrum/layout';\nimport {GridNode} from '@react-types/grid';\nimport listStyles from './styles.css';\nimport React from 'react';\nimport type {SpectrumListViewProps} from './ListView';\nimport {Text} from '@react-spectrum/text';\n\ninterface DragPreviewProps<T> {\n item: GridNode<any>,\n itemCount: number,\n itemHeight: number,\n density: SpectrumListViewProps<T>['density']\n}\n\nexport function DragPreview(props: DragPreviewProps<unknown>) {\n let {\n item,\n itemCount,\n itemHeight,\n density\n } = props;\n\n let isDraggingMultiple = itemCount > 1;\n\n return (\n <div\n style={{height: itemHeight}}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem',\n 'react-spectrum-ListViewItem-dragPreview',\n {'react-spectrum-ListViewItem-dragPreview--multiple': isDraggingMultiple},\n `react-spectrum-ListViewItem-dragPreview--${density}`\n )\n }>\n <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description']},\n illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},\n actionGroup: {\n UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],\n isQuiet: true,\n density: 'compact'\n },\n actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}\n }}>\n {typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered}\n {isDraggingMultiple &&\n <div className={classNames(listStyles, 'react-spectrum-ListViewItem-badge')}>{itemCount}</div>\n }\n </SlotProvider>\n </Grid>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"DragPreview.main.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgBM,SAAS,0CAAY,KAAgC;IAC1D,IAAI,QACF,IAAI,aACJ,SAAS,cACT,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,qBAAqB,YAAY;IAErC,qBACE,0DAAC;QACC,OAAO;YAAC,QAAQ;QAAU;QAC1B,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAS,GACT,+BACA,2CACA;YAAC,qDAAqD;QAAkB,GACxE,CAAC,yCAAyC,EAAE,SAAS;qBAGzD,0DAAC,CAAA,GAAA,+BAAG;QAAE,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,mCAAmC;qBACpE,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;YAAA;YAC1E,aAAa;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,0CAA0C;YAAA;YACrF,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YACpF,OAAO;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YAC7E,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBAAE,SAAS;YAAI;YACjG,aAAa;gBACX,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBACnE,SAAS;gBACT,SAAS;YACX;YACA,YAAY;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,yCAAyC;gBAAE,SAAS;YAAI;QACpG;OACC,OAAO,KAAK,QAAQ,KAAK,yBAAW,0DAAC,CAAA,GAAA,6BAAG,SAAG,KAAK,QAAQ,IAAW,KAAK,QAAQ,EAChF,oCACC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAS,GAAG;OAAuC;AAM1F","sources":["packages/@react-spectrum/list/src/DragPreview.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 */\nimport {classNames, SlotProvider} from '@react-spectrum/utils';\nimport {Grid} from '@react-spectrum/layout';\nimport {GridNode} from '@react-types/grid';\nimport listStyles from './styles.css';\nimport React from 'react';\nimport type {SpectrumListViewProps} from './ListView';\nimport {Text} from '@react-spectrum/text';\n\ninterface DragPreviewProps<T> {\n item: GridNode<any>,\n itemCount: number,\n itemHeight: number,\n density: SpectrumListViewProps<T>['density']\n}\n\nexport function DragPreview(props: DragPreviewProps<unknown>) {\n let {\n item,\n itemCount,\n itemHeight,\n density\n } = props;\n\n let isDraggingMultiple = itemCount > 1;\n\n return (\n <div\n style={{height: itemHeight}}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem',\n 'react-spectrum-ListViewItem-dragPreview',\n {'react-spectrum-ListViewItem-dragPreview--multiple': isDraggingMultiple},\n `react-spectrum-ListViewItem-dragPreview--${density}`\n )\n }>\n <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description']},\n illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},\n actionGroup: {\n UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],\n isQuiet: true,\n density: 'compact'\n },\n actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}\n }}>\n {typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered}\n {isDraggingMultiple &&\n <div className={classNames(listStyles, 'react-spectrum-ListViewItem-badge')}>{itemCount}</div>\n }\n </SlotProvider>\n </Grid>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"DragPreview.main.js.map"}
package/dist/DragPreview.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgBM,SAAS,0CAAY,KAAgC;IAC1D,IAAI,QACF,IAAI,aACJ,SAAS,cACT,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,qBAAqB,YAAY;IAErC,qBACE,gCAAC;QACC,OAAO;YAAC,QAAQ;QAAU;QAC1B,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,mDAAS,GACT,+BACA,2CACA;YAAC,qDAAqD;QAAkB,GACxE,CAAC,yCAAyC,EAAE,QAAQ,CAAC;qBAGzD,gCAAC,CAAA,GAAA,WAAG;QAAE,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,mCAAmC;qBACpE,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;YAAA;YAC1E,aAAa;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,0CAA0C;YAAA;YACrF,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YACpF,OAAO;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YAC7E,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBAAE,SAAS;YAAI;YACjG,aAAa;gBACX,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBACnE,SAAS;gBACT,SAAS;YACX;YACA,YAAY;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,yCAAyC;gBAAE,SAAS;YAAI;QACpG;OACC,OAAO,KAAK,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,WAAG,SAAG,KAAK,QAAQ,IAAW,KAAK,QAAQ,EAChF,oCACC,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAS,GAAG;OAAuC;AAM1F","sources":["packages/@react-spectrum/list/src/DragPreview.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 */\nimport {classNames, SlotProvider} from '@react-spectrum/utils';\nimport {Grid} from '@react-spectrum/layout';\nimport {GridNode} from '@react-types/grid';\nimport listStyles from './styles.css';\nimport React from 'react';\nimport type {SpectrumListViewProps} from './ListView';\nimport {Text} from '@react-spectrum/text';\n\ninterface DragPreviewProps<T> {\n item: GridNode<any>,\n itemCount: number,\n itemHeight: number,\n density: SpectrumListViewProps<T>['density']\n}\n\nexport function DragPreview(props: DragPreviewProps<unknown>) {\n let {\n item,\n itemCount,\n itemHeight,\n density\n } = props;\n\n let isDraggingMultiple = itemCount > 1;\n\n return (\n <div\n style={{height: itemHeight}}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem',\n 'react-spectrum-ListViewItem-dragPreview',\n {'react-spectrum-ListViewItem-dragPreview--multiple': isDraggingMultiple},\n `react-spectrum-ListViewItem-dragPreview--${density}`\n )\n }>\n <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description']},\n illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},\n actionGroup: {\n UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],\n isQuiet: true,\n density: 'compact'\n },\n actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}\n }}>\n {typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered}\n {isDraggingMultiple &&\n <div className={classNames(listStyles, 'react-spectrum-ListViewItem-badge')}>{itemCount}</div>\n }\n </SlotProvider>\n </Grid>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"DragPreview.module.js.map"}
1
+ {"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgBM,SAAS,0CAAY,KAAgC;IAC1D,IAAI,QACF,IAAI,aACJ,SAAS,cACT,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,qBAAqB,YAAY;IAErC,qBACE,gCAAC;QACC,OAAO;YAAC,QAAQ;QAAU;QAC1B,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,mDAAS,GACT,+BACA,2CACA;YAAC,qDAAqD;QAAkB,GACxE,CAAC,yCAAyC,EAAE,SAAS;qBAGzD,gCAAC,CAAA,GAAA,WAAG;QAAE,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,mCAAmC;qBACpE,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;YAAA;YAC1E,aAAa;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,0CAA0C;YAAA;YACrF,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YACpF,OAAO;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YAC7E,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBAAE,SAAS;YAAI;YACjG,aAAa;gBACX,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBACnE,SAAS;gBACT,SAAS;YACX;YACA,YAAY;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,yCAAyC;gBAAE,SAAS;YAAI;QACpG;OACC,OAAO,KAAK,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,WAAG,SAAG,KAAK,QAAQ,IAAW,KAAK,QAAQ,EAChF,oCACC,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAS,GAAG;OAAuC;AAM1F","sources":["packages/@react-spectrum/list/src/DragPreview.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 */\nimport {classNames, SlotProvider} from '@react-spectrum/utils';\nimport {Grid} from '@react-spectrum/layout';\nimport {GridNode} from '@react-types/grid';\nimport listStyles from './styles.css';\nimport React from 'react';\nimport type {SpectrumListViewProps} from './ListView';\nimport {Text} from '@react-spectrum/text';\n\ninterface DragPreviewProps<T> {\n item: GridNode<any>,\n itemCount: number,\n itemHeight: number,\n density: SpectrumListViewProps<T>['density']\n}\n\nexport function DragPreview(props: DragPreviewProps<unknown>) {\n let {\n item,\n itemCount,\n itemHeight,\n density\n } = props;\n\n let isDraggingMultiple = itemCount > 1;\n\n return (\n <div\n style={{height: itemHeight}}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem',\n 'react-spectrum-ListViewItem-dragPreview',\n {'react-spectrum-ListViewItem-dragPreview--multiple': isDraggingMultiple},\n `react-spectrum-ListViewItem-dragPreview--${density}`\n )\n }>\n <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description']},\n illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},\n actionGroup: {\n UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],\n isQuiet: true,\n density: 'compact'\n },\n actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}\n }}>\n {typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered}\n {isDraggingMultiple &&\n <div className={classNames(listStyles, 'react-spectrum-ListViewItem-badge')}>{itemCount}</div>\n }\n </SlotProvider>\n </Grid>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"DragPreview.module.js.map"}
package/dist/InsertionIndicator.main.js CHANGED
@@ -23,7 +23,7 @@ $parcel$export(module.exports, "default", () => $fc02fd49ab58c72e$export$2e2bcd8
23
23
  function $fc02fd49ab58c72e$export$2e2bcd8739ae039(props) {
24
24
  let { dropState: dropState, dragAndDropHooks: dragAndDropHooks } = (0, $9hpsb$react.useContext)((0, $60684b441be8e84c$exports.ListViewContext));
25
25
  const { target: target, isPresentationOnly: isPresentationOnly } = props;
26
- let ref = (0, $9hpsb$react.useRef)(undefined);
26
+ let ref = (0, $9hpsb$react.useRef)(null);
27
27
  let { dropIndicatorProps: dropIndicatorProps } = dragAndDropHooks.useDropIndicator(props, dropState, ref);
28
28
  let { visuallyHiddenProps: visuallyHiddenProps } = (0, $9hpsb$reactariavisuallyhidden.useVisuallyHidden)();
29
29
  let isDropTarget = dropState.isDropTarget(target);
package/dist/InsertionIndicator.main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYe,kDAA4B,KAA8B;IACvE,IAAI,aAAC,SAAS,oBAAE,gBAAgB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAc;IAC7D,MAAM,UAAC,MAAM,sBAAE,kBAAkB,EAAC,GAAG;IAErC,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAE;IACjB,IAAI,sBAAC,kBAAkB,EAAC,GAAG,iBAAiB,gBAAgB,CAAC,OAAO,WAAW;IAC/E,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,gDAAgB;IAE5C,IAAI,eAAe,UAAU,YAAY,CAAC;IAE1C,IAAI,CAAC,gBAAgB,kBAAkB,CAAC,cAAc,EACpD,OAAO;IAGT,qBACE,0DAAC;QAAI,MAAK;QAAM,eAAa,kBAAkB,CAAC,cAAc;qBAC5D,0DAAC;QACC,MAAK;QACL,iBAAc;QACd,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAS,GACT,6CACA;YACE,yDAAyD;QAC3D;OAEH,CAAC,oCACA,0DAAC;QAAK,GAAG,mBAAmB;QAAE,MAAK;QAAU,GAAG,kBAAkB;QAAE,KAAK;;AAKnF","sources":["packages/@react-spectrum/list/src/InsertionIndicator.tsx"],"sourcesContent":["import {classNames} from '@react-spectrum/utils';\nimport {ItemDropTarget} from '@react-types/shared';\nimport listStyles from './styles.css';\nimport {ListViewContext} from './ListView';\nimport React, {useContext, useRef} from 'react';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface InsertionIndicatorProps {\n target: ItemDropTarget,\n isPresentationOnly?: boolean\n}\n\nexport default function InsertionIndicator(props: InsertionIndicatorProps) {\n let {dropState, dragAndDropHooks} = useContext(ListViewContext);\n const {target, isPresentationOnly} = props;\n\n let ref = useRef(undefined);\n let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator(props, dropState, ref);\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n let isDropTarget = dropState.isDropTarget(target);\n\n if (!isDropTarget && dropIndicatorProps['aria-hidden']) {\n return null;\n }\n\n return (\n <div role=\"row\" aria-hidden={dropIndicatorProps['aria-hidden']}>\n <div\n role=\"gridcell\"\n aria-selected=\"false\"\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewInsertionIndicator',\n {\n 'react-spectrum-ListViewInsertionIndicator--dropTarget': isDropTarget\n }\n )}>\n {!isPresentationOnly &&\n <div {...visuallyHiddenProps} role=\"button\" {...dropIndicatorProps} ref={ref} />\n }\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"InsertionIndicator.main.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYe,kDAA4B,KAA8B;IACvE,IAAI,aAAC,SAAS,oBAAE,gBAAgB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAc;IAC7D,MAAM,UAAC,MAAM,sBAAE,kBAAkB,EAAC,GAAG;IAErC,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAyB;IACxC,IAAI,sBAAC,kBAAkB,EAAC,GAAG,iBAAkB,gBAAgB,CAAE,OAAO,WAAY;IAClF,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,gDAAgB;IAE5C,IAAI,eAAe,UAAW,YAAY,CAAC;IAE3C,IAAI,CAAC,gBAAgB,kBAAkB,CAAC,cAAc,EACpD,OAAO;IAGT,qBACE,0DAAC;QAAI,MAAK;QAAM,eAAa,kBAAkB,CAAC,cAAc;qBAC5D,0DAAC;QACC,MAAK;QACL,iBAAc;QACd,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAS,GACT,6CACA;YACE,yDAAyD;QAC3D;OAEH,CAAC,oCACA,0DAAC;QAAK,GAAG,mBAAmB;QAAE,MAAK;QAAU,GAAG,kBAAkB;QAAE,KAAK;;AAKnF","sources":["packages/@react-spectrum/list/src/InsertionIndicator.tsx"],"sourcesContent":["import {classNames} from '@react-spectrum/utils';\nimport {ItemDropTarget} from '@react-types/shared';\nimport listStyles from './styles.css';\nimport {ListViewContext} from './ListView';\nimport React, {useContext, useRef} from 'react';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface InsertionIndicatorProps {\n target: ItemDropTarget,\n isPresentationOnly?: boolean\n}\n\nexport default function InsertionIndicator(props: InsertionIndicatorProps) {\n let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;\n const {target, isPresentationOnly} = props;\n\n let ref = useRef<HTMLDivElement | null>(null);\n let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!(props, dropState!, ref);\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n let isDropTarget = dropState!.isDropTarget(target);\n\n if (!isDropTarget && dropIndicatorProps['aria-hidden']) {\n return null;\n }\n\n return (\n <div role=\"row\" aria-hidden={dropIndicatorProps['aria-hidden']}>\n <div\n role=\"gridcell\"\n aria-selected=\"false\"\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewInsertionIndicator',\n {\n 'react-spectrum-ListViewInsertionIndicator--dropTarget': isDropTarget\n }\n )}>\n {!isPresentationOnly &&\n <div {...visuallyHiddenProps} role=\"button\" {...dropIndicatorProps} ref={ref} />\n }\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"InsertionIndicator.main.js.map"}
package/dist/InsertionIndicator.mjs CHANGED
@@ -17,7 +17,7 @@ function $parcel$interopDefault(a) {
17
17
  function $0a834ddbc989a3e3$export$2e2bcd8739ae039(props) {
18
18
  let { dropState: dropState, dragAndDropHooks: dragAndDropHooks } = (0, $8djIL$useContext)((0, $f85fb77f9d4cbc6c$export$870039b0abfe3de0));
19
19
  const { target: target, isPresentationOnly: isPresentationOnly } = props;
20
- let ref = (0, $8djIL$useRef)(undefined);
20
+ let ref = (0, $8djIL$useRef)(null);
21
21
  let { dropIndicatorProps: dropIndicatorProps } = dragAndDropHooks.useDropIndicator(props, dropState, ref);
22
22
  let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8djIL$useVisuallyHidden)();
23
23
  let isDropTarget = dropState.isDropTarget(target);
package/dist/InsertionIndicator.module.js CHANGED
@@ -17,7 +17,7 @@ function $parcel$interopDefault(a) {
17
17
  function $0a834ddbc989a3e3$export$2e2bcd8739ae039(props) {
18
18
  let { dropState: dropState, dragAndDropHooks: dragAndDropHooks } = (0, $8djIL$useContext)((0, $f85fb77f9d4cbc6c$export$870039b0abfe3de0));
19
19
  const { target: target, isPresentationOnly: isPresentationOnly } = props;
20
- let ref = (0, $8djIL$useRef)(undefined);
20
+ let ref = (0, $8djIL$useRef)(null);
21
21
  let { dropIndicatorProps: dropIndicatorProps } = dragAndDropHooks.useDropIndicator(props, dropState, ref);
22
22
  let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8djIL$useVisuallyHidden)();
23
23
  let isDropTarget = dropState.isDropTarget(target);
package/dist/InsertionIndicator.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;AAYe,kDAA4B,KAA8B;IACvE,IAAI,aAAC,SAAS,oBAAE,gBAAgB,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAc;IAC7D,MAAM,UAAC,MAAM,sBAAE,kBAAkB,EAAC,GAAG;IAErC,IAAI,MAAM,CAAA,GAAA,aAAK,EAAE;IACjB,IAAI,sBAAC,kBAAkB,EAAC,GAAG,iBAAiB,gBAAgB,CAAC,OAAO,WAAW;IAC/E,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,wBAAgB;IAE5C,IAAI,eAAe,UAAU,YAAY,CAAC;IAE1C,IAAI,CAAC,gBAAgB,kBAAkB,CAAC,cAAc,EACpD,OAAO;IAGT,qBACE,gCAAC;QAAI,MAAK;QAAM,eAAa,kBAAkB,CAAC,cAAc;qBAC5D,gCAAC;QACC,MAAK;QACL,iBAAc;QACd,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,mDAAS,GACT,6CACA;YACE,yDAAyD;QAC3D;OAEH,CAAC,oCACA,gCAAC;QAAK,GAAG,mBAAmB;QAAE,MAAK;QAAU,GAAG,kBAAkB;QAAE,KAAK;;AAKnF","sources":["packages/@react-spectrum/list/src/InsertionIndicator.tsx"],"sourcesContent":["import {classNames} from '@react-spectrum/utils';\nimport {ItemDropTarget} from '@react-types/shared';\nimport listStyles from './styles.css';\nimport {ListViewContext} from './ListView';\nimport React, {useContext, useRef} from 'react';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface InsertionIndicatorProps {\n target: ItemDropTarget,\n isPresentationOnly?: boolean\n}\n\nexport default function InsertionIndicator(props: InsertionIndicatorProps) {\n let {dropState, dragAndDropHooks} = useContext(ListViewContext);\n const {target, isPresentationOnly} = props;\n\n let ref = useRef(undefined);\n let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator(props, dropState, ref);\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n let isDropTarget = dropState.isDropTarget(target);\n\n if (!isDropTarget && dropIndicatorProps['aria-hidden']) {\n return null;\n }\n\n return (\n <div role=\"row\" aria-hidden={dropIndicatorProps['aria-hidden']}>\n <div\n role=\"gridcell\"\n aria-selected=\"false\"\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewInsertionIndicator',\n {\n 'react-spectrum-ListViewInsertionIndicator--dropTarget': isDropTarget\n }\n )}>\n {!isPresentationOnly &&\n <div {...visuallyHiddenProps} role=\"button\" {...dropIndicatorProps} ref={ref} />\n }\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"InsertionIndicator.module.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;AAYe,kDAA4B,KAA8B;IACvE,IAAI,aAAC,SAAS,oBAAE,gBAAgB,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAc;IAC7D,MAAM,UAAC,MAAM,sBAAE,kBAAkB,EAAC,GAAG;IAErC,IAAI,MAAM,CAAA,GAAA,aAAK,EAAyB;IACxC,IAAI,sBAAC,kBAAkB,EAAC,GAAG,iBAAkB,gBAAgB,CAAE,OAAO,WAAY;IAClF,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,wBAAgB;IAE5C,IAAI,eAAe,UAAW,YAAY,CAAC;IAE3C,IAAI,CAAC,gBAAgB,kBAAkB,CAAC,cAAc,EACpD,OAAO;IAGT,qBACE,gCAAC;QAAI,MAAK;QAAM,eAAa,kBAAkB,CAAC,cAAc;qBAC5D,gCAAC;QACC,MAAK;QACL,iBAAc;QACd,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,mDAAS,GACT,6CACA;YACE,yDAAyD;QAC3D;OAEH,CAAC,oCACA,gCAAC;QAAK,GAAG,mBAAmB;QAAE,MAAK;QAAU,GAAG,kBAAkB;QAAE,KAAK;;AAKnF","sources":["packages/@react-spectrum/list/src/InsertionIndicator.tsx"],"sourcesContent":["import {classNames} from '@react-spectrum/utils';\nimport {ItemDropTarget} from '@react-types/shared';\nimport listStyles from './styles.css';\nimport {ListViewContext} from './ListView';\nimport React, {useContext, useRef} from 'react';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface InsertionIndicatorProps {\n target: ItemDropTarget,\n isPresentationOnly?: boolean\n}\n\nexport default function InsertionIndicator(props: InsertionIndicatorProps) {\n let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;\n const {target, isPresentationOnly} = props;\n\n let ref = useRef<HTMLDivElement | null>(null);\n let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!(props, dropState!, ref);\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n let isDropTarget = dropState!.isDropTarget(target);\n\n if (!isDropTarget && dropIndicatorProps['aria-hidden']) {\n return null;\n }\n\n return (\n <div role=\"row\" aria-hidden={dropIndicatorProps['aria-hidden']}>\n <div\n role=\"gridcell\"\n aria-selected=\"false\"\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewInsertionIndicator',\n {\n 'react-spectrum-ListViewInsertionIndicator--dropTarget': isDropTarget\n }\n )}>\n {!isPresentationOnly &&\n <div {...visuallyHiddenProps} role=\"button\" {...dropIndicatorProps} ref={ref} />\n }\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"InsertionIndicator.module.js.map"}
package/dist/ListView.main.js CHANGED
@@ -75,7 +75,7 @@ const $60684b441be8e84c$var$ROW_HEIGHTS = {
75
75
  function $60684b441be8e84c$var$useListLayout(state, density, overflowMode) {
76
76
  let { scale: scale } = (0, $8lawJ$reactspectrumprovider.useProvider)();
77
77
  let layout = (0, $8lawJ$react.useMemo)(()=>new (0, $a0cb8c9f009bf274$exports.ListViewLayout)({
78
- estimatedRowHeight: $60684b441be8e84c$var$ROW_HEIGHTS[density][scale]
78
+ estimatedRowHeight: $60684b441be8e84c$var$ROW_HEIGHTS[density || 'regular'][scale]
79
79
  }), [
80
80
  scale,
81
81
  density,
@@ -83,7 +83,7 @@ function $60684b441be8e84c$var$useListLayout(state, density, overflowMode) {
83
83
  ]);
84
84
  return layout;
85
85
  }
86
- function $60684b441be8e84c$var$ListView(props, ref) {
86
+ const $60684b441be8e84c$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).forwardRef(function ListView(props, ref) {
87
87
  var _dropState_target;
88
88
  let { density: density = 'regular', loadingState: loadingState, onLoadMore: onLoadMore, isQuiet: isQuiet, overflowMode: overflowMode = 'truncate', onAction: onAction, dragAndDropHooks: dragAndDropHooks, renderEmptyState: renderEmptyState, ...otherProps } = props;
89
89
  let isListDraggable = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDraggableCollectionState);
@@ -105,9 +105,9 @@ function $60684b441be8e84c$var$ListView(props, ref) {
105
105
  let { collection: collection, selectionManager: selectionManager } = state;
106
106
  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
107
107
  let { styleProps: styleProps } = (0, $8lawJ$reactspectrumutils.useStyleProps)(props);
108
- let dragState;
108
+ let dragState = null;
109
109
  let preview = (0, $8lawJ$react.useRef)(null);
110
- if (isListDraggable) {
110
+ if (isListDraggable && dragAndDropHooks) {
111
111
  dragState = dragAndDropHooks.useDraggableCollectionState({
112
112
  collection: collection,
113
113
  selectionManager: selectionManager,
@@ -117,10 +117,10 @@ function $60684b441be8e84c$var$ListView(props, ref) {
117
117
  }
118
118
  let layout = $60684b441be8e84c$var$useListLayout(state, props.density || 'regular', overflowMode);
119
119
  let DragPreview = dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.DragPreview;
120
- let dropState;
121
- let droppableCollection;
122
- let isRootDropTarget;
123
- if (isListDroppable) {
120
+ let dropState = null;
121
+ let droppableCollection = null;
122
+ let isRootDropTarget = false;
123
+ if (isListDroppable && dragAndDropHooks) {
124
124
  dropState = dragAndDropHooks.useDroppableCollectionState({
125
125
  collection: collection,
126
126
  selectionManager: selectionManager
@@ -128,7 +128,7 @@ function $60684b441be8e84c$var$ListView(props, ref) {
128
128
  droppableCollection = dragAndDropHooks.useDroppableCollection({
129
129
  keyboardDelegate: new (0, $8lawJ$reactariaselection.ListKeyboardDelegate)({
130
130
  collection: collection,
131
- disabledKeys: (dragState === null || dragState === void 0 ? void 0 : dragState.draggingKeys.size) ? null : selectionManager.disabledKeys,
131
+ disabledKeys: (dragState === null || dragState === void 0 ? void 0 : dragState.draggingKeys.size) ? undefined : selectionManager.disabledKeys,
132
132
  ref: domRef,
133
133
  layoutDelegate: layout
134
134
  }),
@@ -193,7 +193,7 @@ function $60684b441be8e84c$var$ListView(props, ref) {
193
193
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement((0, $8lawJ$reactariafocus.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement((0, $8lawJ$reactariafocus.FocusRing), {
194
194
  focusRingClass: (0, $8lawJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($279507a6f189e509$exports))), 'focus-ring')
195
195
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement((0, $8lawJ$reactariavirtualizer.Virtualizer), {
196
- ...(0, $8lawJ$reactariautils.mergeProps)(isListDroppable && (droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps), gridProps),
196
+ ...(0, $8lawJ$reactariautils.mergeProps)(isListDroppable ? droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps : null, gridProps),
197
197
  ...(0, $8lawJ$reactariautils.filterDOMProps)(otherProps),
198
198
  ...gridProps,
199
199
  ...styleProps,
@@ -225,13 +225,17 @@ function $60684b441be8e84c$var$ListView(props, ref) {
225
225
  });
226
226
  else if (type === 'loader') return /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement($60684b441be8e84c$var$LoadingView, null);
227
227
  else if (type === 'placeholder') return /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement($60684b441be8e84c$var$EmptyState, null);
228
- }, [])))), DragPreview && isListDraggable && /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement(DragPreview, {
228
+ }, [])))), DragPreview && isListDraggable && dragAndDropHooks && dragState && /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement(DragPreview, {
229
229
  ref: preview
230
230
  }, ()=>{
231
+ var _layout_getLayoutInfo;
232
+ if (dragState.draggedKey == null) return null;
231
233
  if (dragAndDropHooks.renderPreview) return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);
232
234
  let item = state.collection.getItem(dragState.draggedKey);
235
+ if (!item) return null;
233
236
  let itemCount = dragState.draggingKeys.size;
234
- let itemHeight = layout.getLayoutInfo(dragState.draggedKey).rect.height;
237
+ var _layout_getLayoutInfo_rect_height;
238
+ let itemHeight = (_layout_getLayoutInfo_rect_height = (_layout_getLayoutInfo = layout.getLayoutInfo(dragState.draggedKey)) === null || _layout_getLayoutInfo === void 0 ? void 0 : _layout_getLayoutInfo.rect.height) !== null && _layout_getLayoutInfo_rect_height !== void 0 ? _layout_getLayoutInfo_rect_height : 0;
235
239
  return /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement((0, $3d665b19f7865ff9$exports.DragPreview), {
236
240
  item: item,
237
241
  itemCount: itemCount,
@@ -239,7 +243,7 @@ function $60684b441be8e84c$var$ListView(props, ref) {
239
243
  density: density
240
244
  });
241
245
  }));
242
- }
246
+ });
243
247
  function $60684b441be8e84c$var$Item({ item: item }) {
244
248
  let { isListDroppable: isListDroppable, state: state, onAction: onAction } = (0, $8lawJ$react.useContext)($60684b441be8e84c$export$870039b0abfe3de0);
245
249
  return /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement((0, ($parcel$interopDefault($8lawJ$react))).Fragment, null, isListDroppable && state.collection.getKeyBefore(item.key) == null && /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).createElement((0, $c59d3898f402f50b$exports.default), {
@@ -291,9 +295,6 @@ function $60684b441be8e84c$var$CenteredWrapper({ children: children }) {
291
295
  role: "gridcell"
292
296
  }, children));
293
297
  }
294
- /**
295
- * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
296
- */ const $60684b441be8e84c$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, ($parcel$interopDefault($8lawJ$react))).forwardRef($60684b441be8e84c$var$ListView);
297
298
 
298
299
 
299
300
  //# sourceMappingURL=ListView.main.js.map
package/dist/ListView.main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/list/src/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/gridlist';\nimport {AsyncLoadable, DOMRef, Key, LoadingState, Node, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport type {DragAndDropHooks} from '@react-spectrum/dnd';\nimport type {DraggableCollectionState, DroppableCollectionState} from '@react-stately/dnd';\nimport type {DroppableCollectionResult} from '@react-aria/dnd';\nimport {filterDOMProps, mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {FocusRing, FocusScope} from '@react-aria/focus';\nimport InsertionIndicator from './InsertionIndicator';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListKeyboardDelegate} from '@react-aria/selection';\nimport {ListState, useListState} from '@react-stately/list';\nimport listStyles from './styles.css';\nimport {ListViewItem} from './ListViewItem';\nimport {ListViewLayout} from './ListViewLayout';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {JSX, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport RootDropIndicator from './RootDropIndicator';\nimport {DragPreview as SpectrumDragPreview} from './DragPreview';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer} from '@react-aria/virtualizer';\n\nexport interface SpectrumListViewProps<T> extends Omit<AriaGridListProps<T>, 'keyboardNavigationBehavior'>, StyleProps, SpectrumSelectionProps, Omit<AsyncLoadable, 'isLoading'> {\n /**\n * Sets the amount of vertical padding within each cell.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /** Whether the ListView should be displayed with a quiet style. */\n isQuiet?: boolean,\n /** The current loading state of the ListView. Determines whether or not the progress circle should be shown. */\n loadingState?: LoadingState,\n /**\n * Sets the text behavior for the row contents.\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 on\n * 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 the ListView.\n */\n dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']\n}\n\ninterface ListViewContextValue<T> {\n state: ListState<T>,\n dragState: DraggableCollectionState,\n dropState: DroppableCollectionState,\n dragAndDropHooks: DragAndDropHooks['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);\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>(state: ListState<T>, density: SpectrumListViewProps<T>['density'], overflowMode: SpectrumListViewProps<T>['overflowMode']) {\n let {scale} = useProvider();\n let layout = useMemo(() =>\n new ListViewLayout<T>({\n estimatedRowHeight: ROW_HEIGHTS[density][scale]\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n , [scale, density, overflowMode]);\n\n return layout;\n}\n\nfunction ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef<HTMLDivElement>) {\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) {\n console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');\n }\n if (dropHooksProvided.current !== isListDroppable) {\n console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');\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;\n let preview = useRef(null);\n if (isListDraggable) {\n dragState = dragAndDropHooks.useDraggableCollectionState({\n collection,\n selectionManager,\n preview\n });\n dragAndDropHooks.useDraggableCollection({}, dragState, domRef);\n }\n let layout = useListLayout(\n state,\n props.density || 'regular',\n overflowMode\n );\n\n let DragPreview = dragAndDropHooks?.DragPreview;\n let dropState: DroppableCollectionState;\n let droppableCollection: DroppableCollectionResult;\n let isRootDropTarget: boolean;\n if (isListDroppable) {\n dropState = dragAndDropHooks.useDroppableCollectionState({\n collection,\n selectionManager\n });\n droppableCollection = dragAndDropHooks.useDroppableCollection({\n keyboardDelegate: new ListKeyboardDelegate({\n collection,\n disabledKeys: dragState?.draggingKeys.size ? null : selectionManager.disabledKeys,\n ref: domRef,\n layoutDelegate: layout\n }),\n dropTargetDelegate: layout\n }, dropState, domRef);\n\n isRootDropTarget = dropState.isDropTarget({type: 'root'});\n }\n\n let {gridProps} = useGridList({\n ...props,\n isVirtualized: true,\n layoutDelegate: layout,\n onAction\n }, state, domRef);\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(() => [...collection].some(item => item.hasChildNodes), [collection]);\n\n return (\n <ListViewContext.Provider value={{state, dragState, dropState, dragAndDropHooks, onAction, isListDraggable, isListDroppable, layout, loadingState, renderEmptyState}}>\n <FocusScope>\n <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n <Virtualizer\n {...mergeProps(isListDroppable && droppableCollection?.collectionProps, gridProps)}\n {...filterDOMProps(otherProps)}\n {...gridProps}\n {...styleProps}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n className={\n 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': isHorizontalScrollbarVisible,\n 'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,\n 'react-spectrum-ListView--wrap': overflowMode === 'wrap'\n },\n styleProps.className\n )\n }\n layout={layout}\n layoutOptions={useMemo(() => ({isLoading}), [isLoading])}\n collection={collection}>\n {useCallback((type, item) => {\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 &&\n <DragPreview ref={preview}>\n {() => {\n if (dragAndDropHooks.renderPreview) {\n return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);\n }\n let item = state.collection.getItem(dragState.draggedKey);\n let itemCount = dragState.draggingKeys.size;\n let itemHeight = layout.getLayoutInfo(dragState.draggedKey).rect.height;\n return <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight} density={density} />;\n }}\n </DragPreview>\n }\n </ListViewContext.Provider>\n );\n}\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 <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\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={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />\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 (\n <CenteredWrapper>\n {emptyState}\n </CenteredWrapper>\n );\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={\n classNames(\n listStyles,\n 'react-spectrum-ListView-centeredWrapper',\n {\n 'react-spectrum-ListView-centeredWrapper--loadingMore': state.collection.size > 0\n }\n )}>\n <div role=\"gridcell\">\n {children}\n </div>\n </div>\n );\n}\n\n/**\n * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.\n */\nconst _ListView = React.forwardRef(ListView) as <T>(props: SpectrumListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_ListView as ListView};\n"],"names":[],"version":3,"file":"ListView.main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/list/src/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/gridlist';\nimport {AsyncLoadable, DOMRef, Key, LoadingState, Node, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport type {DragAndDropHooks} from '@react-spectrum/dnd';\nimport type {DraggableCollectionState, DroppableCollectionState} from '@react-stately/dnd';\nimport type {DroppableCollectionResult} from '@react-aria/dnd';\nimport {filterDOMProps, mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {FocusRing, FocusScope} from '@react-aria/focus';\nimport InsertionIndicator from './InsertionIndicator';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListKeyboardDelegate} from '@react-aria/selection';\nimport {ListState, useListState} from '@react-stately/list';\nimport listStyles from './styles.css';\nimport {ListViewItem} from './ListViewItem';\nimport {ListViewLayout} from './ListViewLayout';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {JSX, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport RootDropIndicator from './RootDropIndicator';\nimport {DragPreview as SpectrumDragPreview} from './DragPreview';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer} from '@react-aria/virtualizer';\n\nexport interface SpectrumListViewProps<T> extends Omit<AriaGridListProps<T>, 'keyboardNavigationBehavior'>, StyleProps, SpectrumSelectionProps, Omit<AsyncLoadable, 'isLoading'> {\n /**\n * Sets the amount of vertical padding within each cell.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /** Whether the ListView should be displayed with a quiet style. */\n isQuiet?: boolean,\n /** The current loading state of the ListView. Determines whether or not the progress circle should be shown. */\n loadingState?: LoadingState,\n /**\n * Sets the text behavior for the row contents.\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 on\n * 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 the ListView.\n */\n dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']\n}\n\ninterface ListViewContextValue<T> {\n state: ListState<T>,\n dragState: DraggableCollectionState | null,\n dropState: DroppableCollectionState | null,\n dragAndDropHooks?: DragAndDropHooks['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>(state: ListState<T>, density: SpectrumListViewProps<T>['density'], overflowMode: SpectrumListViewProps<T>['overflowMode']) {\n let {scale} = useProvider();\n let layout = useMemo(() =>\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 return layout;\n}\n\n/**\n * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.\n */\nexport const ListView = React.forwardRef(function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef<HTMLDivElement>) {\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) {\n console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');\n }\n if (dropHooksProvided.current !== isListDroppable) {\n console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');\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(\n state,\n props.density || 'regular',\n overflowMode\n );\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 keyboardDelegate: new ListKeyboardDelegate({\n collection,\n disabledKeys: dragState?.draggingKeys.size ? undefined : selectionManager.disabledKeys,\n ref: domRef,\n layoutDelegate: layout\n }),\n dropTargetDelegate: layout\n }, dropState, domRef);\n\n isRootDropTarget = dropState.isDropTarget({type: 'root'});\n }\n\n let {gridProps} = useGridList({\n ...props,\n isVirtualized: true,\n layoutDelegate: layout,\n onAction\n }, state, domRef);\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(() => [...collection].some(item => item.hasChildNodes), [collection]);\n\n return (\n <ListViewContext.Provider value={{state, dragState, dropState, dragAndDropHooks, onAction, isListDraggable, isListDroppable, layout, loadingState, renderEmptyState}}>\n <FocusScope>\n <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n <Virtualizer\n {...mergeProps(isListDroppable ? droppableCollection?.collectionProps : null, gridProps)}\n {...filterDOMProps(otherProps)}\n {...gridProps}\n {...styleProps}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n className={\n 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': isHorizontalScrollbarVisible,\n 'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,\n 'react-spectrum-ListView--wrap': overflowMode === 'wrap'\n },\n styleProps.className\n )\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 <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight} density={density} />;\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 <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\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={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />\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 (\n <CenteredWrapper>\n {emptyState}\n </CenteredWrapper>\n );\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={\n classNames(\n listStyles,\n 'react-spectrum-ListView-centeredWrapper',\n {\n 'react-spectrum-ListView-centeredWrapper--loadingMore': state.collection.size > 0\n }\n )}>\n <div role=\"gridcell\">\n {children}\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"ListView.main.js.map"}
package/dist/ListView.mjs CHANGED
@@ -68,7 +68,7 @@ const $f85fb77f9d4cbc6c$var$ROW_HEIGHTS = {
68
68
  function $f85fb77f9d4cbc6c$var$useListLayout(state, density, overflowMode) {
69
69
  let { scale: scale } = (0, $6w3ZV$useProvider)();
70
70
  let layout = (0, $6w3ZV$useMemo)(()=>new (0, $bc6cc67dd6240ebd$export$dab781655dfbb7d3)({
71
- estimatedRowHeight: $f85fb77f9d4cbc6c$var$ROW_HEIGHTS[density][scale]
71
+ estimatedRowHeight: $f85fb77f9d4cbc6c$var$ROW_HEIGHTS[density || 'regular'][scale]
72
72
  }), [
73
73
  scale,
74
74
  density,
@@ -76,7 +76,7 @@ function $f85fb77f9d4cbc6c$var$useListLayout(state, density, overflowMode) {
76
76
  ]);
77
77
  return layout;
78
78
  }
79
- function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
79
+ const $f85fb77f9d4cbc6c$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $6w3ZV$react).forwardRef(function ListView(props, ref) {
80
80
  var _dropState_target;
81
81
  let { density: density = 'regular', loadingState: loadingState, onLoadMore: onLoadMore, isQuiet: isQuiet, overflowMode: overflowMode = 'truncate', onAction: onAction, dragAndDropHooks: dragAndDropHooks, renderEmptyState: renderEmptyState, ...otherProps } = props;
82
82
  let isListDraggable = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDraggableCollectionState);
@@ -98,9 +98,9 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
98
98
  let { collection: collection, selectionManager: selectionManager } = state;
99
99
  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
100
100
  let { styleProps: styleProps } = (0, $6w3ZV$useStyleProps)(props);
101
- let dragState;
101
+ let dragState = null;
102
102
  let preview = (0, $6w3ZV$useRef)(null);
103
- if (isListDraggable) {
103
+ if (isListDraggable && dragAndDropHooks) {
104
104
  dragState = dragAndDropHooks.useDraggableCollectionState({
105
105
  collection: collection,
106
106
  selectionManager: selectionManager,
@@ -110,10 +110,10 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
110
110
  }
111
111
  let layout = $f85fb77f9d4cbc6c$var$useListLayout(state, props.density || 'regular', overflowMode);
112
112
  let DragPreview = dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.DragPreview;
113
- let dropState;
114
- let droppableCollection;
115
- let isRootDropTarget;
116
- if (isListDroppable) {
113
+ let dropState = null;
114
+ let droppableCollection = null;
115
+ let isRootDropTarget = false;
116
+ if (isListDroppable && dragAndDropHooks) {
117
117
  dropState = dragAndDropHooks.useDroppableCollectionState({
118
118
  collection: collection,
119
119
  selectionManager: selectionManager
@@ -121,7 +121,7 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
121
121
  droppableCollection = dragAndDropHooks.useDroppableCollection({
122
122
  keyboardDelegate: new (0, $6w3ZV$ListKeyboardDelegate)({
123
123
  collection: collection,
124
- disabledKeys: (dragState === null || dragState === void 0 ? void 0 : dragState.draggingKeys.size) ? null : selectionManager.disabledKeys,
124
+ disabledKeys: (dragState === null || dragState === void 0 ? void 0 : dragState.draggingKeys.size) ? undefined : selectionManager.disabledKeys,
125
125
  ref: domRef,
126
126
  layoutDelegate: layout
127
127
  }),
@@ -186,7 +186,7 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
186
186
  }, /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $6w3ZV$FocusScope), null, /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $6w3ZV$FocusRing), {
187
187
  focusRingClass: (0, $6w3ZV$classNames)((0, ($parcel$interopDefault($6w3ZV$styles_cssmodulejs))), 'focus-ring')
188
188
  }, /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $6w3ZV$Virtualizer), {
189
- ...(0, $6w3ZV$mergeProps)(isListDroppable && (droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps), gridProps),
189
+ ...(0, $6w3ZV$mergeProps)(isListDroppable ? droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps : null, gridProps),
190
190
  ...(0, $6w3ZV$filterDOMProps)(otherProps),
191
191
  ...gridProps,
192
192
  ...styleProps,
@@ -218,13 +218,17 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
218
218
  });
219
219
  else if (type === 'loader') return /*#__PURE__*/ (0, $6w3ZV$react).createElement($f85fb77f9d4cbc6c$var$LoadingView, null);
220
220
  else if (type === 'placeholder') return /*#__PURE__*/ (0, $6w3ZV$react).createElement($f85fb77f9d4cbc6c$var$EmptyState, null);
221
- }, [])))), DragPreview && isListDraggable && /*#__PURE__*/ (0, $6w3ZV$react).createElement(DragPreview, {
221
+ }, [])))), DragPreview && isListDraggable && dragAndDropHooks && dragState && /*#__PURE__*/ (0, $6w3ZV$react).createElement(DragPreview, {
222
222
  ref: preview
223
223
  }, ()=>{
224
+ var _layout_getLayoutInfo;
225
+ if (dragState.draggedKey == null) return null;
224
226
  if (dragAndDropHooks.renderPreview) return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);
225
227
  let item = state.collection.getItem(dragState.draggedKey);
228
+ if (!item) return null;
226
229
  let itemCount = dragState.draggingKeys.size;
227
- let itemHeight = layout.getLayoutInfo(dragState.draggedKey).rect.height;
230
+ var _layout_getLayoutInfo_rect_height;
231
+ let itemHeight = (_layout_getLayoutInfo_rect_height = (_layout_getLayoutInfo = layout.getLayoutInfo(dragState.draggedKey)) === null || _layout_getLayoutInfo === void 0 ? void 0 : _layout_getLayoutInfo.rect.height) !== null && _layout_getLayoutInfo_rect_height !== void 0 ? _layout_getLayoutInfo_rect_height : 0;
228
232
  return /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $cd61e55c47e3c0f5$export$905ab40ac2179daa), {
229
233
  item: item,
230
234
  itemCount: itemCount,
@@ -232,7 +236,7 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
232
236
  density: density
233
237
  });
234
238
  }));
235
- }
239
+ });
236
240
  function $f85fb77f9d4cbc6c$var$Item({ item: item }) {
237
241
  let { isListDroppable: isListDroppable, state: state, onAction: onAction } = (0, $6w3ZV$useContext)($f85fb77f9d4cbc6c$export$870039b0abfe3de0);
238
242
  return /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $6w3ZV$react).Fragment, null, isListDroppable && state.collection.getKeyBefore(item.key) == null && /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $41a60729487a82d7$export$2e2bcd8739ae039), {
@@ -284,9 +288,6 @@ function $f85fb77f9d4cbc6c$var$CenteredWrapper({ children: children }) {
284
288
  role: "gridcell"
285
289
  }, children));
286
290
  }
287
- /**
288
- * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
289
- */ const $f85fb77f9d4cbc6c$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $6w3ZV$react).forwardRef($f85fb77f9d4cbc6c$var$ListView);
290
291
 
291
292
 
292
293
  export {$f85fb77f9d4cbc6c$export$870039b0abfe3de0 as ListViewContext, $f85fb77f9d4cbc6c$export$84d0dd190d551cd1 as ListView};
package/dist/ListView.module.js CHANGED
@@ -68,7 +68,7 @@ const $f85fb77f9d4cbc6c$var$ROW_HEIGHTS = {
68
68
  function $f85fb77f9d4cbc6c$var$useListLayout(state, density, overflowMode) {
69
69
  let { scale: scale } = (0, $6w3ZV$useProvider)();
70
70
  let layout = (0, $6w3ZV$useMemo)(()=>new (0, $bc6cc67dd6240ebd$export$dab781655dfbb7d3)({
71
- estimatedRowHeight: $f85fb77f9d4cbc6c$var$ROW_HEIGHTS[density][scale]
71
+ estimatedRowHeight: $f85fb77f9d4cbc6c$var$ROW_HEIGHTS[density || 'regular'][scale]
72
72
  }), [
73
73
  scale,
74
74
  density,
@@ -76,7 +76,7 @@ function $f85fb77f9d4cbc6c$var$useListLayout(state, density, overflowMode) {
76
76
  ]);
77
77
  return layout;
78
78
  }
79
- function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
79
+ const $f85fb77f9d4cbc6c$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $6w3ZV$react).forwardRef(function ListView(props, ref) {
80
80
  var _dropState_target;
81
81
  let { density: density = 'regular', loadingState: loadingState, onLoadMore: onLoadMore, isQuiet: isQuiet, overflowMode: overflowMode = 'truncate', onAction: onAction, dragAndDropHooks: dragAndDropHooks, renderEmptyState: renderEmptyState, ...otherProps } = props;
82
82
  let isListDraggable = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDraggableCollectionState);
@@ -98,9 +98,9 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
98
98
  let { collection: collection, selectionManager: selectionManager } = state;
99
99
  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
100
100
  let { styleProps: styleProps } = (0, $6w3ZV$useStyleProps)(props);
101
- let dragState;
101
+ let dragState = null;
102
102
  let preview = (0, $6w3ZV$useRef)(null);
103
- if (isListDraggable) {
103
+ if (isListDraggable && dragAndDropHooks) {
104
104
  dragState = dragAndDropHooks.useDraggableCollectionState({
105
105
  collection: collection,
106
106
  selectionManager: selectionManager,
@@ -110,10 +110,10 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
110
110
  }
111
111
  let layout = $f85fb77f9d4cbc6c$var$useListLayout(state, props.density || 'regular', overflowMode);
112
112
  let DragPreview = dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.DragPreview;
113
- let dropState;
114
- let droppableCollection;
115
- let isRootDropTarget;
116
- if (isListDroppable) {
113
+ let dropState = null;
114
+ let droppableCollection = null;
115
+ let isRootDropTarget = false;
116
+ if (isListDroppable && dragAndDropHooks) {
117
117
  dropState = dragAndDropHooks.useDroppableCollectionState({
118
118
  collection: collection,
119
119
  selectionManager: selectionManager
@@ -121,7 +121,7 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
121
121
  droppableCollection = dragAndDropHooks.useDroppableCollection({
122
122
  keyboardDelegate: new (0, $6w3ZV$ListKeyboardDelegate)({
123
123
  collection: collection,
124
- disabledKeys: (dragState === null || dragState === void 0 ? void 0 : dragState.draggingKeys.size) ? null : selectionManager.disabledKeys,
124
+ disabledKeys: (dragState === null || dragState === void 0 ? void 0 : dragState.draggingKeys.size) ? undefined : selectionManager.disabledKeys,
125
125
  ref: domRef,
126
126
  layoutDelegate: layout
127
127
  }),
@@ -186,7 +186,7 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
186
186
  }, /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $6w3ZV$FocusScope), null, /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $6w3ZV$FocusRing), {
187
187
  focusRingClass: (0, $6w3ZV$classNames)((0, ($parcel$interopDefault($6w3ZV$styles_cssmodulejs))), 'focus-ring')
188
188
  }, /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $6w3ZV$Virtualizer), {
189
- ...(0, $6w3ZV$mergeProps)(isListDroppable && (droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps), gridProps),
189
+ ...(0, $6w3ZV$mergeProps)(isListDroppable ? droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps : null, gridProps),
190
190
  ...(0, $6w3ZV$filterDOMProps)(otherProps),
191
191
  ...gridProps,
192
192
  ...styleProps,
@@ -218,13 +218,17 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
218
218
  });
219
219
  else if (type === 'loader') return /*#__PURE__*/ (0, $6w3ZV$react).createElement($f85fb77f9d4cbc6c$var$LoadingView, null);
220
220
  else if (type === 'placeholder') return /*#__PURE__*/ (0, $6w3ZV$react).createElement($f85fb77f9d4cbc6c$var$EmptyState, null);
221
- }, [])))), DragPreview && isListDraggable && /*#__PURE__*/ (0, $6w3ZV$react).createElement(DragPreview, {
221
+ }, [])))), DragPreview && isListDraggable && dragAndDropHooks && dragState && /*#__PURE__*/ (0, $6w3ZV$react).createElement(DragPreview, {
222
222
  ref: preview
223
223
  }, ()=>{
224
+ var _layout_getLayoutInfo;
225
+ if (dragState.draggedKey == null) return null;
224
226
  if (dragAndDropHooks.renderPreview) return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);
225
227
  let item = state.collection.getItem(dragState.draggedKey);
228
+ if (!item) return null;
226
229
  let itemCount = dragState.draggingKeys.size;
227
- let itemHeight = layout.getLayoutInfo(dragState.draggedKey).rect.height;
230
+ var _layout_getLayoutInfo_rect_height;
231
+ let itemHeight = (_layout_getLayoutInfo_rect_height = (_layout_getLayoutInfo = layout.getLayoutInfo(dragState.draggedKey)) === null || _layout_getLayoutInfo === void 0 ? void 0 : _layout_getLayoutInfo.rect.height) !== null && _layout_getLayoutInfo_rect_height !== void 0 ? _layout_getLayoutInfo_rect_height : 0;
228
232
  return /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $cd61e55c47e3c0f5$export$905ab40ac2179daa), {
229
233
  item: item,
230
234
  itemCount: itemCount,
@@ -232,7 +236,7 @@ function $f85fb77f9d4cbc6c$var$ListView(props, ref) {
232
236
  density: density
233
237
  });
234
238
  }));
235
- }
239
+ });
236
240
  function $f85fb77f9d4cbc6c$var$Item({ item: item }) {
237
241
  let { isListDroppable: isListDroppable, state: state, onAction: onAction } = (0, $6w3ZV$useContext)($f85fb77f9d4cbc6c$export$870039b0abfe3de0);
238
242
  return /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $6w3ZV$react).Fragment, null, isListDroppable && state.collection.getKeyBefore(item.key) == null && /*#__PURE__*/ (0, $6w3ZV$react).createElement((0, $41a60729487a82d7$export$2e2bcd8739ae039), {
@@ -284,9 +288,6 @@ function $f85fb77f9d4cbc6c$var$CenteredWrapper({ children: children }) {
284
288
  role: "gridcell"
285
289
  }, children));
286
290
  }
287
- /**
288
- * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
289
- */ const $f85fb77f9d4cbc6c$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $6w3ZV$react).forwardRef($f85fb77f9d4cbc6c$var$ListView);
290
291
 
291
292
 
292
293
  export {$f85fb77f9d4cbc6c$export$870039b0abfe3de0 as ListViewContext, $f85fb77f9d4cbc6c$export$84d0dd190d551cd1 as ListView};