@react-spectrum/list 3.0.0-beta.0 → 3.0.0-nightly-641446f65-240905

package/dist/ListViewItem.mjs

@@ -0,0 +1,247 @@
+import "./styles.d09a6cc6.css";
+import $asbps$styles_cssmodulejs from "./styles_css.mjs";
+import {ListViewContext as $f85fb77f9d4cbc6c$export$870039b0abfe3de0} from "./ListView.mjs";
+import {Checkbox as $asbps$Checkbox} from "@react-spectrum/checkbox";
+import $asbps$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
+import $asbps$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
+import {useHasChild as $asbps$useHasChild, classNames as $asbps$classNames, SlotProvider as $asbps$SlotProvider, ClearSlots as $asbps$ClearSlots} from "@react-spectrum/utils";
+import {CSSTransition as $asbps$CSSTransition} from "react-transition-group";
+import {useFocusRing as $asbps$useFocusRing, FocusRing as $asbps$FocusRing} from "@react-aria/focus";
+import {Grid as $asbps$Grid} from "@react-spectrum/layout";
+import {useHover as $asbps$useHover, isFocusVisible as $asbps$isFocusVisible} from "@react-aria/interactions";
+import $asbps$spectrumiconsuiListGripper from "@spectrum-icons/ui/ListGripper";
+import {mergeProps as $asbps$mergeProps} from "@react-aria/utils";
+import {Provider as $asbps$Provider} from "@react-spectrum/provider";
+import $asbps$react, {useContext as $asbps$useContext, useRef as $asbps$useRef} from "react";
+import {Text as $asbps$Text} from "@react-spectrum/text";
+import {useButton as $asbps$useButton} from "@react-aria/button";
+import {useGridListItem as $asbps$useGridListItem, useGridListSelectionCheckbox as $asbps$useGridListSelectionCheckbox} from "@react-aria/gridlist";
+import {useLocale as $asbps$useLocale} from "@react-aria/i18n";
+import {useVisuallyHidden as $asbps$useVisuallyHidden} from "@react-aria/visually-hidden";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $d7c07ca2efc5ba02$export$c6bde0c04b033c0e(props) {
+    var _layout_getContentSize, _layout_virtualizer;
+    let { item: item, isEmphasized: isEmphasized } = props;
+    let { state: state, dragState: dragState, dropState: dropState, isListDraggable: isListDraggable, isListDroppable: isListDroppable, layout: layout, dragAndDropHooks: dragAndDropHooks, loadingState: loadingState } = (0, $asbps$useContext)((0, $f85fb77f9d4cbc6c$export$870039b0abfe3de0));
+    let { direction: direction } = (0, $asbps$useLocale)();
+    let rowRef = (0, $asbps$useRef)(undefined);
+    let checkboxWrapperRef = (0, $asbps$useRef)(undefined);
+    let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = (0, $asbps$useFocusRing)({
+        within: true
+    });
+    let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $asbps$useFocusRing)();
+    let { rowProps: rowProps, gridCellProps: gridCellProps, isPressed: isPressed, descriptionProps: descriptionProps, isSelected: isSelected, isDisabled: isDisabled, allowsSelection: allowsSelection, hasAction: hasAction } = (0, $asbps$useGridListItem)({
+        node: item,
+        isVirtualized: true,
+        shouldSelectOnPressUp: isListDraggable
+    }, state, rowRef);
+    let isDroppable = isListDroppable && !isDisabled;
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $asbps$useHover)({
+        isDisabled: !allowsSelection && !hasAction
+    });
+    let { checkboxProps: checkboxProps } = (0, $asbps$useGridListSelectionCheckbox)({
+        key: item.key
+    }, state);
+    let hasDescription = (0, $asbps$useHasChild)(`.${(0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-description']}`, rowRef);
+    let draggableItem;
+    if (isListDraggable) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        draggableItem = dragAndDropHooks.useDraggableItem({
+            key: item.key,
+            hasDragButton: true
+        }, dragState);
+        if (isDisabled) draggableItem = null;
+    }
+    let droppableItem;
+    let isDropTarget;
+    let dropIndicator;
+    let dropIndicatorRef = (0, $asbps$useRef)(undefined);
+    if (isListDroppable) {
+        let target = {
+            type: 'item',
+            key: item.key,
+            dropPosition: 'on'
+        };
+        isDropTarget = dropState.isDropTarget(target);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        dropIndicator = dragAndDropHooks.useDropIndicator({
+            target: target
+        }, dropState, dropIndicatorRef);
+    }
+    let dragButtonRef = (0, $asbps$react).useRef(undefined);
+    let { buttonProps: buttonProps } = (0, $asbps$useButton)({
+        ...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
+        elementType: 'div'
+    }, dragButtonRef);
+    let chevron = direction === 'ltr' ? /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiChevronRightMedium), {
+        "aria-hidden": "true",
+        UNSAFE_className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-parentIndicator', {
+            'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
+            'is-disabled': !hasAction
+        })
+    }) : /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiChevronLeftMedium), {
+        "aria-hidden": "true",
+        UNSAFE_className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-parentIndicator', {
+            'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
+            'is-disabled': !hasAction
+        })
+    });
+    let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $asbps$useVisuallyHidden)();
+    let dropProps = isDroppable ? droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps : {
+        'aria-hidden': droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps['aria-hidden']
+    };
+    const mergedProps = (0, $asbps$mergeProps)(rowProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, dropProps, hoverProps, focusWithinProps, focusProps, // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
+    // allowing for single swipe navigation between row drop indicator
+    (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.isVirtualDragging()) && {
+        tabIndex: null
+    });
+    let isFirstRow = item.prevKey == null;
+    let isLastRow = item.nextKey == null;
+    // Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom
+    // border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap
+    // with bottom border
+    let isFlushWithContainerBottom = false;
+    if (isLastRow && loadingState !== 'loadingMore') {
+        if (((_layout_getContentSize = layout.getContentSize()) === null || _layout_getContentSize === void 0 ? void 0 : _layout_getContentSize.height) >= ((_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.visibleRect.height)) isFlushWithContainerBottom = true;
+    }
+    // previous item isn't selected
+    // and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview
+    let roundTops = !state.selectionManager.isSelected(item.prevKey) && (state.selectionManager.focusedKey !== item.prevKey || !((0, $asbps$isFocusVisible)() && state.selectionManager.isFocused));
+    let roundBottoms = !state.selectionManager.isSelected(item.nextKey) && (state.selectionManager.focusedKey !== item.nextKey || !((0, $asbps$isFocusVisible)() && state.selectionManager.isFocused));
+    let content = typeof item.rendered === 'string' ? /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Text), null, item.rendered) : item.rendered;
+    if (isDisabled) content = /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Provider), {
+        isDisabled: true
+    }, content);
+    return /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        ...mergedProps,
+        className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListView-row', {
+            'focus-ring': isFocusVisible,
+            'round-tops': roundTops || isHovered && !isSelected && state.selectionManager.focusedKey !== item.key,
+            'round-bottoms': roundBottoms || isHovered && !isSelected && state.selectionManager.focusedKey !== item.key
+        }),
+        ref: rowRef
+    }, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        // TODO: refactor the css here now that we are focusing the row?
+        className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem', {
+            'is-active': isPressed,
+            'is-focused': isFocusVisibleWithin,
+            'focus-ring': isFocusVisible,
+            'is-hovered': isHovered,
+            'is-selected': isSelected,
+            'is-disabled': isDisabled,
+            'is-prev-selected': state.selectionManager.isSelected(item.prevKey),
+            'is-next-selected': state.selectionManager.isSelected(item.nextKey),
+            'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey)),
+            'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,
+            'react-spectrum-ListViewItem--firstRow': isFirstRow,
+            'react-spectrum-ListViewItem--lastRow': isLastRow,
+            'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom,
+            'react-spectrum-ListViewItem--hasDescription': hasDescription
+        }),
+        ...gridCellProps
+    }, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Grid), {
+        UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-grid']
+    }, isListDraggable && /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-draghandle-container']
+    }, !isDisabled && /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$FocusRing), {
+        focusRingClass: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'focus-ring')
+    }, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        ...buttonProps,
+        className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-draghandle-button'),
+        style: !isFocusVisibleWithin ? {
+            ...visuallyHiddenProps.style
+        } : {},
+        ref: dragButtonRef,
+        draggable: "true"
+    }, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiListGripper), null)))), isListDroppable && !(dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.isHidden) && /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        role: "button",
+        ...visuallyHiddenProps,
+        ...dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.dropIndicatorProps,
+        ref: dropIndicatorRef
+    }), /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$CSSTransition), {
+        in: showCheckbox,
+        unmountOnExit: true,
+        classNames: {
+            enter: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--enter'],
+            enterActive: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--enterActive'],
+            exit: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--exit'],
+            exitActive: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--exitActive']
+        },
+        timeout: 160,
+        nodeRef: checkboxWrapperRef
+    }, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        ref: checkboxWrapperRef,
+        className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkboxWrapper']
+    }, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Checkbox), {
+        ...checkboxProps,
+        UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox'],
+        isEmphasized: isEmphasized
+    }))), /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$SlotProvider), {
+        slots: {
+            text: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-content']
+            },
+            description: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-description'],
+                ...descriptionProps
+            },
+            illustration: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-thumbnail']
+            },
+            image: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-thumbnail']
+            },
+            actionButton: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actions'],
+                isQuiet: true
+            },
+            actionGroup: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actions'],
+                isQuiet: true,
+                density: 'compact'
+            },
+            actionMenu: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actionmenu'],
+                isQuiet: true
+            }
+        }
+    }, content, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$ClearSlots), null, chevron)))));
+}
+
+
+export {$d7c07ca2efc5ba02$export$c6bde0c04b033c0e as ListViewItem};
+//# sourceMappingURL=ListViewItem.module.js.map

package/dist/ListViewItem.module.js

@@ -0,0 +1,247 @@
+import "./styles.d09a6cc6.css";
+import $asbps$styles_cssmodulejs from "./styles_css.module.js";
+import {ListViewContext as $f85fb77f9d4cbc6c$export$870039b0abfe3de0} from "./ListView.module.js";
+import {Checkbox as $asbps$Checkbox} from "@react-spectrum/checkbox";
+import $asbps$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
+import $asbps$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
+import {useHasChild as $asbps$useHasChild, classNames as $asbps$classNames, SlotProvider as $asbps$SlotProvider, ClearSlots as $asbps$ClearSlots} from "@react-spectrum/utils";
+import {CSSTransition as $asbps$CSSTransition} from "react-transition-group";
+import {useFocusRing as $asbps$useFocusRing, FocusRing as $asbps$FocusRing} from "@react-aria/focus";
+import {Grid as $asbps$Grid} from "@react-spectrum/layout";
+import {useHover as $asbps$useHover, isFocusVisible as $asbps$isFocusVisible} from "@react-aria/interactions";
+import $asbps$spectrumiconsuiListGripper from "@spectrum-icons/ui/ListGripper";
+import {mergeProps as $asbps$mergeProps} from "@react-aria/utils";
+import {Provider as $asbps$Provider} from "@react-spectrum/provider";
+import $asbps$react, {useContext as $asbps$useContext, useRef as $asbps$useRef} from "react";
+import {Text as $asbps$Text} from "@react-spectrum/text";
+import {useButton as $asbps$useButton} from "@react-aria/button";
+import {useGridListItem as $asbps$useGridListItem, useGridListSelectionCheckbox as $asbps$useGridListSelectionCheckbox} from "@react-aria/gridlist";
+import {useLocale as $asbps$useLocale} from "@react-aria/i18n";
+import {useVisuallyHidden as $asbps$useVisuallyHidden} from "@react-aria/visually-hidden";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $d7c07ca2efc5ba02$export$c6bde0c04b033c0e(props) {
+    var _layout_getContentSize, _layout_virtualizer;
+    let { item: item, isEmphasized: isEmphasized } = props;
+    let { state: state, dragState: dragState, dropState: dropState, isListDraggable: isListDraggable, isListDroppable: isListDroppable, layout: layout, dragAndDropHooks: dragAndDropHooks, loadingState: loadingState } = (0, $asbps$useContext)((0, $f85fb77f9d4cbc6c$export$870039b0abfe3de0));
+    let { direction: direction } = (0, $asbps$useLocale)();
+    let rowRef = (0, $asbps$useRef)(undefined);
+    let checkboxWrapperRef = (0, $asbps$useRef)(undefined);
+    let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = (0, $asbps$useFocusRing)({
+        within: true
+    });
+    let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $asbps$useFocusRing)();
+    let { rowProps: rowProps, gridCellProps: gridCellProps, isPressed: isPressed, descriptionProps: descriptionProps, isSelected: isSelected, isDisabled: isDisabled, allowsSelection: allowsSelection, hasAction: hasAction } = (0, $asbps$useGridListItem)({
+        node: item,
+        isVirtualized: true,
+        shouldSelectOnPressUp: isListDraggable
+    }, state, rowRef);
+    let isDroppable = isListDroppable && !isDisabled;
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $asbps$useHover)({
+        isDisabled: !allowsSelection && !hasAction
+    });
+    let { checkboxProps: checkboxProps } = (0, $asbps$useGridListSelectionCheckbox)({
+        key: item.key
+    }, state);
+    let hasDescription = (0, $asbps$useHasChild)(`.${(0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-description']}`, rowRef);
+    let draggableItem;
+    if (isListDraggable) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        draggableItem = dragAndDropHooks.useDraggableItem({
+            key: item.key,
+            hasDragButton: true
+        }, dragState);
+        if (isDisabled) draggableItem = null;
+    }
+    let droppableItem;
+    let isDropTarget;
+    let dropIndicator;
+    let dropIndicatorRef = (0, $asbps$useRef)(undefined);
+    if (isListDroppable) {
+        let target = {
+            type: 'item',
+            key: item.key,
+            dropPosition: 'on'
+        };
+        isDropTarget = dropState.isDropTarget(target);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        dropIndicator = dragAndDropHooks.useDropIndicator({
+            target: target
+        }, dropState, dropIndicatorRef);
+    }
+    let dragButtonRef = (0, $asbps$react).useRef(undefined);
+    let { buttonProps: buttonProps } = (0, $asbps$useButton)({
+        ...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
+        elementType: 'div'
+    }, dragButtonRef);
+    let chevron = direction === 'ltr' ? /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiChevronRightMedium), {
+        "aria-hidden": "true",
+        UNSAFE_className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-parentIndicator', {
+            'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
+            'is-disabled': !hasAction
+        })
+    }) : /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiChevronLeftMedium), {
+        "aria-hidden": "true",
+        UNSAFE_className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-parentIndicator', {
+            'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
+            'is-disabled': !hasAction
+        })
+    });
+    let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $asbps$useVisuallyHidden)();
+    let dropProps = isDroppable ? droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps : {
+        'aria-hidden': droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps['aria-hidden']
+    };
+    const mergedProps = (0, $asbps$mergeProps)(rowProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, dropProps, hoverProps, focusWithinProps, focusProps, // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
+    // allowing for single swipe navigation between row drop indicator
+    (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.isVirtualDragging()) && {
+        tabIndex: null
+    });
+    let isFirstRow = item.prevKey == null;
+    let isLastRow = item.nextKey == null;
+    // Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom
+    // border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap
+    // with bottom border
+    let isFlushWithContainerBottom = false;
+    if (isLastRow && loadingState !== 'loadingMore') {
+        if (((_layout_getContentSize = layout.getContentSize()) === null || _layout_getContentSize === void 0 ? void 0 : _layout_getContentSize.height) >= ((_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.visibleRect.height)) isFlushWithContainerBottom = true;
+    }
+    // previous item isn't selected
+    // and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview
+    let roundTops = !state.selectionManager.isSelected(item.prevKey) && (state.selectionManager.focusedKey !== item.prevKey || !((0, $asbps$isFocusVisible)() && state.selectionManager.isFocused));
+    let roundBottoms = !state.selectionManager.isSelected(item.nextKey) && (state.selectionManager.focusedKey !== item.nextKey || !((0, $asbps$isFocusVisible)() && state.selectionManager.isFocused));
+    let content = typeof item.rendered === 'string' ? /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Text), null, item.rendered) : item.rendered;
+    if (isDisabled) content = /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Provider), {
+        isDisabled: true
+    }, content);
+    return /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        ...mergedProps,
+        className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListView-row', {
+            'focus-ring': isFocusVisible,
+            'round-tops': roundTops || isHovered && !isSelected && state.selectionManager.focusedKey !== item.key,
+            'round-bottoms': roundBottoms || isHovered && !isSelected && state.selectionManager.focusedKey !== item.key
+        }),
+        ref: rowRef
+    }, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        // TODO: refactor the css here now that we are focusing the row?
+        className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem', {
+            'is-active': isPressed,
+            'is-focused': isFocusVisibleWithin,
+            'focus-ring': isFocusVisible,
+            'is-hovered': isHovered,
+            'is-selected': isSelected,
+            'is-disabled': isDisabled,
+            'is-prev-selected': state.selectionManager.isSelected(item.prevKey),
+            'is-next-selected': state.selectionManager.isSelected(item.nextKey),
+            'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey)),
+            'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,
+            'react-spectrum-ListViewItem--firstRow': isFirstRow,
+            'react-spectrum-ListViewItem--lastRow': isLastRow,
+            'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom,
+            'react-spectrum-ListViewItem--hasDescription': hasDescription
+        }),
+        ...gridCellProps
+    }, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Grid), {
+        UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-grid']
+    }, isListDraggable && /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-draghandle-container']
+    }, !isDisabled && /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$FocusRing), {
+        focusRingClass: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'focus-ring')
+    }, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        ...buttonProps,
+        className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-draghandle-button'),
+        style: !isFocusVisibleWithin ? {
+            ...visuallyHiddenProps.style
+        } : {},
+        ref: dragButtonRef,
+        draggable: "true"
+    }, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiListGripper), null)))), isListDroppable && !(dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.isHidden) && /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        role: "button",
+        ...visuallyHiddenProps,
+        ...dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.dropIndicatorProps,
+        ref: dropIndicatorRef
+    }), /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$CSSTransition), {
+        in: showCheckbox,
+        unmountOnExit: true,
+        classNames: {
+            enter: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--enter'],
+            enterActive: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--enterActive'],
+            exit: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--exit'],
+            exitActive: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--exitActive']
+        },
+        timeout: 160,
+        nodeRef: checkboxWrapperRef
+    }, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
+        ref: checkboxWrapperRef,
+        className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkboxWrapper']
+    }, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Checkbox), {
+        ...checkboxProps,
+        UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox'],
+        isEmphasized: isEmphasized
+    }))), /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$SlotProvider), {
+        slots: {
+            text: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-content']
+            },
+            description: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-description'],
+                ...descriptionProps
+            },
+            illustration: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-thumbnail']
+            },
+            image: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-thumbnail']
+            },
+            actionButton: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actions'],
+                isQuiet: true
+            },
+            actionGroup: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actions'],
+                isQuiet: true,
+                density: 'compact'
+            },
+            actionMenu: {
+                UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actionmenu'],
+                isQuiet: true
+            }
+        }
+    }, content, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$ClearSlots), null, chevron)))));
+}
+
+
+export {$d7c07ca2efc5ba02$export$c6bde0c04b033c0e as ListViewItem};
+//# sourceMappingURL=ListViewItem.module.js.map

package/dist/ListViewItem.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/list/src/ListViewItem.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 {Checkbox} from '@react-spectrum/checkbox';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {classNames, ClearSlots, SlotProvider, useHasChild} from '@react-spectrum/utils';\nimport {CSSTransition} from 'react-transition-group';\nimport type {DraggableItemResult, DropIndicatorAria, DroppableItemResult} from '@react-aria/dnd';\nimport {DropTarget, Node} from '@react-types/shared';\nimport {FocusRing, useFocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport {isFocusVisible as isGlobalFocusVisible, useHover} from '@react-aria/interactions';\nimport ListGripper from '@spectrum-icons/ui/ListGripper';\nimport listStyles from './styles.css';\nimport {ListViewContext} from './ListView';\nimport {mergeProps} from '@react-aria/utils';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {useContext, useRef} from 'react';\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';\nimport {useLocale} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface ListViewItemProps<T> {\n  item: Node<T>,\n  isEmphasized: boolean,\n  hasActions: boolean\n}\n\nexport function ListViewItem<T>(props: ListViewItemProps<T>) {\n  let {\n    item,\n    isEmphasized\n  } = props;\n  let {\n    state,\n    dragState,\n    dropState,\n    isListDraggable,\n    isListDroppable,\n    layout,\n    dragAndDropHooks,\n    loadingState\n  } = useContext(ListViewContext);\n  let {direction} = useLocale();\n  let rowRef = useRef<HTMLDivElement>(undefined);\n  let checkboxWrapperRef = useRef<HTMLDivElement>(undefined);\n  let {\n    isFocusVisible: isFocusVisibleWithin,\n    focusProps: focusWithinProps\n  } = useFocusRing({within: true});\n  let {isFocusVisible, focusProps} = useFocusRing();\n  let {\n    rowProps,\n    gridCellProps,\n    isPressed,\n    descriptionProps,\n    isSelected,\n    isDisabled,\n    allowsSelection,\n    hasAction\n  } = useGridListItem({\n    node: item,\n    isVirtualized: true,\n    shouldSelectOnPressUp: isListDraggable\n  }, state, rowRef);\n  let isDroppable = isListDroppable && !isDisabled;\n  let {hoverProps, isHovered} = useHover({isDisabled: !allowsSelection && !hasAction});\n\n  let {checkboxProps} = useGridListSelectionCheckbox({key: item.key}, state);\n  let hasDescription = useHasChild(`.${listStyles['react-spectrum-ListViewItem-description']}`, rowRef);\n\n  let draggableItem: DraggableItemResult;\n  if (isListDraggable) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    draggableItem = dragAndDropHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);\n    if (isDisabled) {\n      draggableItem = null;\n    }\n  }\n  let droppableItem: DroppableItemResult;\n  let isDropTarget: boolean;\n  let dropIndicator: DropIndicatorAria;\n  let dropIndicatorRef = useRef(undefined);\n  if (isListDroppable) {\n    let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;\n    isDropTarget = dropState.isDropTarget(target);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    dropIndicator = dragAndDropHooks.useDropIndicator({target}, dropState, dropIndicatorRef);\n  }\n\n  let dragButtonRef = React.useRef(undefined);\n  let {buttonProps} = useButton({\n    ...draggableItem?.dragButtonProps,\n    elementType: 'div'\n  }, dragButtonRef);\n\n  let chevron = direction === 'ltr'\n    ? (\n      <ChevronRightMedium\n        aria-hidden=\"true\"\n        UNSAFE_className={\n          classNames(\n            listStyles,\n            'react-spectrum-ListViewItem-parentIndicator',\n            {\n              'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,\n              'is-disabled': !hasAction\n            }\n          )\n        } />\n    )\n    : (\n      <ChevronLeftMedium\n        aria-hidden=\"true\"\n        UNSAFE_className={\n          classNames(\n            listStyles,\n            'react-spectrum-ListViewItem-parentIndicator',\n            {\n              'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,\n              'is-disabled': !hasAction\n            }\n          )\n        } />\n    );\n\n  let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  let dropProps = isDroppable ? droppableItem?.dropProps : {'aria-hidden': droppableItem?.dropProps['aria-hidden']};\n  const mergedProps = mergeProps(\n    rowProps,\n    draggableItem?.dragProps,\n    dropProps,\n    hoverProps,\n    focusWithinProps,\n    focusProps,\n    // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,\n    // allowing for single swipe navigation between row drop indicator\n    dragAndDropHooks?.isVirtualDragging() && {tabIndex: null}\n  );\n\n  let isFirstRow = item.prevKey == null;\n  let isLastRow = item.nextKey == null;\n  // Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom\n  // border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap\n  // with bottom border\n  let isFlushWithContainerBottom = false;\n  if (isLastRow && loadingState !== 'loadingMore') {\n    if (layout.getContentSize()?.height >= layout.virtualizer?.visibleRect.height) {\n      isFlushWithContainerBottom = true;\n    }\n  }\n  // previous item isn't selected\n  // and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview\n  let roundTops = (!state.selectionManager.isSelected(item.prevKey)\n    && (state.selectionManager.focusedKey !== item.prevKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));\n  let roundBottoms = (!state.selectionManager.isSelected(item.nextKey)\n    && (state.selectionManager.focusedKey !== item.nextKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));\n\n  let content = typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered;\n  if (isDisabled) {\n    content = <Provider isDisabled>{content}</Provider>;\n  }\n\n  return (\n    <div\n      {...mergedProps}\n      className={\n        classNames(\n          listStyles,\n          'react-spectrum-ListView-row',\n          {\n            'focus-ring': isFocusVisible,\n            'round-tops':\n              roundTops || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key),\n            'round-bottoms':\n              roundBottoms || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key)\n          }\n        )\n      }\n      ref={rowRef}>\n      <div\n        // TODO: refactor the css here now that we are focusing the row?\n        className={\n          classNames(\n            listStyles,\n            'react-spectrum-ListViewItem',\n            {\n              'is-active': isPressed,\n              'is-focused': isFocusVisibleWithin,\n              'focus-ring': isFocusVisible,\n              'is-hovered': isHovered,\n              'is-selected': isSelected,\n              'is-disabled': isDisabled,\n              'is-prev-selected': state.selectionManager.isSelected(item.prevKey),\n              'is-next-selected': state.selectionManager.isSelected(item.nextKey),\n              'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey)),\n              'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,\n              'react-spectrum-ListViewItem--firstRow': isFirstRow,\n              'react-spectrum-ListViewItem--lastRow': isLastRow,\n              'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom,\n              'react-spectrum-ListViewItem--hasDescription': hasDescription\n            }\n          )\n        }\n        {...gridCellProps}>\n        <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>\n          {isListDraggable &&\n            <div className={listStyles['react-spectrum-ListViewItem-draghandle-container']}>\n              {!isDisabled &&\n                <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n                  <div\n                    {...buttonProps as React.HTMLAttributes<HTMLElement>}\n                    className={\n                      classNames(\n                        listStyles,\n                        'react-spectrum-ListViewItem-draghandle-button'\n                      )\n                    }\n                    style={!isFocusVisibleWithin ? {...visuallyHiddenProps.style} : {}}\n                    ref={dragButtonRef}\n                    draggable=\"true\">\n                    <ListGripper />\n                  </div>\n                </FocusRing>\n              }\n            </div>\n          }\n          {isListDroppable && !dropIndicator?.isHidden &&\n            <div role=\"button\" {...visuallyHiddenProps} {...dropIndicator?.dropIndicatorProps} ref={dropIndicatorRef} />\n          }\n          <CSSTransition\n            in={showCheckbox}\n            unmountOnExit\n            classNames={{\n              enter: listStyles['react-spectrum-ListViewItem-checkbox--enter'],\n              enterActive: listStyles['react-spectrum-ListViewItem-checkbox--enterActive'],\n              exit: listStyles['react-spectrum-ListViewItem-checkbox--exit'],\n              exitActive: listStyles['react-spectrum-ListViewItem-checkbox--exitActive']\n            }}\n            timeout={160}\n            nodeRef={checkboxWrapperRef} >\n            <div ref={checkboxWrapperRef} className={listStyles['react-spectrum-ListViewItem-checkboxWrapper']}>\n              <Checkbox\n                {...checkboxProps}\n                UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}\n                isEmphasized={isEmphasized} />\n            </div>\n          </CSSTransition>\n          <SlotProvider\n            slots={{\n              text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n              description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description'], ...descriptionProps},\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            {content}\n            <ClearSlots>\n              {chevron}\n            </ClearSlots>\n          </SlotProvider>\n        </Grid>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"ListViewItem.module.js.map"}

package/dist/ListViewLayout.main.js

@@ -0,0 +1,69 @@
+var $gyQtY$reactstatelyvirtualizer = require("@react-stately/virtualizer");
+var $gyQtY$reactstatelylayout = require("@react-stately/layout");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ListViewLayout", () => $a0cb8c9f009bf274$export$dab781655dfbb7d3);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+class $a0cb8c9f009bf274$export$dab781655dfbb7d3 extends (0, $gyQtY$reactstatelylayout.ListLayout) {
+    update(invalidationContext) {
+        var _invalidationContext_layoutOptions;
+        this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
+        super.update(invalidationContext);
+    }
+    buildCollection() {
+        let nodes = super.buildCollection();
+        let y = this.contentSize.height;
+        if (this.isLoading) {
+            let rect = new (0, $gyQtY$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, nodes.length === 0 ? this.virtualizer.visibleRect.height : this.estimatedRowHeight);
+            let loader = new (0, $gyQtY$reactstatelyvirtualizer.LayoutInfo)('loader', 'loader', rect);
+            let node = {
+                layoutInfo: loader,
+                validRect: loader.rect
+            };
+            nodes.push(node);
+            this.layoutNodes.set(loader.key, node);
+            y = loader.rect.maxY;
+        }
+        if (nodes.length === 0) {
+            let rect = new (0, $gyQtY$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
+            let placeholder = new (0, $gyQtY$reactstatelyvirtualizer.LayoutInfo)('placeholder', 'placeholder', rect);
+            let node = {
+                layoutInfo: placeholder,
+                validRect: placeholder.rect
+            };
+            nodes.push(node);
+            this.layoutNodes.set(placeholder.key, node);
+            y = placeholder.rect.maxY;
+        }
+        this.contentSize.height = y;
+        return nodes;
+    }
+    buildItem(node, x, y) {
+        let res = super.buildItem(node, x, y);
+        // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders
+        res.layoutInfo.allowOverflow = true;
+        return res;
+    }
+    constructor(...args){
+        super(...args);
+        this.isLoading = false;
+    }
+}
+
+
+//# sourceMappingURL=ListViewLayout.main.js.map

package/dist/ListViewLayout.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;AASM,MAAM,kDAA0B,CAAA,GAAA,oCAAS;IAG9C,OAAO,mBAA6D,EAAQ;YACzD;QAAjB,IAAI,CAAC,SAAS,GAAG,EAAA,qCAAA,oBAAoB,aAAa,cAAjC,yDAAA,mCAAmC,SAAS,KAAI;QACjE,KAAK,CAAC,OAAO;IACf;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC;QAClB,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB;YAChJ,IAAI,SAAS,IAAI,CAAA,GAAA,yCAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;YACtB,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM;YACjG,IAAI,cAAc,IAAI,CAAA,GAAA,yCAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG;QAC1B,OAAO;IACT;IAEU,UAAU,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACnE,IAAI,MAAM,KAAK,CAAC,UAAU,MAAM,GAAG;QACnC,gHAAgH;QAChH,IAAI,UAAU,CAAC,aAAa,GAAG;QAC/B,OAAO;IACT;;;aA5CQ,YAAqB;;AA6C/B","sources":["packages/@react-spectrum/list/src/ListViewLayout.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';\nimport {LayoutNode, ListLayout} from '@react-stately/layout';\nimport {Node} from '@react-types/shared';\n\ninterface ListViewLayoutProps {\n  isLoading?: boolean\n}\n\nexport class ListViewLayout<T> extends ListLayout<T, ListViewLayoutProps> {\n  private isLoading: boolean = false;\n\n  update(invalidationContext: InvalidationContext<ListViewLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.update(invalidationContext);\n  }\n\n  protected buildCollection(): LayoutNode[] {\n    let nodes = super.buildCollection();\n    let y = this.contentSize.height;\n\n    if (this.isLoading) {\n      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, nodes.length === 0 ? this.virtualizer.visibleRect.height : this.estimatedRowHeight);\n      let loader = new LayoutInfo('loader', 'loader', rect);\n      let node = {\n        layoutInfo: loader,\n        validRect: loader.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(loader.key, node);\n      y = loader.rect.maxY;\n    }\n\n    if (nodes.length === 0) {\n      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);\n      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n      let node = {\n        layoutInfo: placeholder,\n        validRect: placeholder.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(placeholder.key, node);\n      y = placeholder.rect.maxY;\n    }\n\n    this.contentSize.height = y;\n    return nodes;\n  }\n\n  protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {\n    let res = super.buildItem(node, x, y);\n    // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders\n    res.layoutInfo.allowOverflow = true;\n    return res;\n  }\n}\n"],"names":[],"version":3,"file":"ListViewLayout.main.js.map"}