react-aria-components 1.10.1 → 1.12.0

package/dist/Tooltip.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-aria-components/src/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaLabelingProps, FocusableElement, forwardRefType, RefObject} from '@react-types/shared';\nimport {AriaPositionProps, mergeProps, OverlayContainer, Placement, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';\nimport {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} from './utils';\nimport {FocusableProvider} from '@react-aria/focus';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';\nimport React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';\n\nexport interface TooltipTriggerComponentProps extends TooltipTriggerProps {\n  children: ReactNode\n}\n\nexport interface TooltipProps extends PositionProps, Pick<AriaPositionProps, 'arrowBoundaryOffset'>, OverlayTriggerProps, AriaLabelingProps, RenderProps<TooltipRenderProps> {\n  /**\n   * The ref for the element which the tooltip positions itself with respect to.\n   *\n   * When used within a TooltipTrigger this is set automatically. It is only required when used standalone.\n   */\n  triggerRef?: RefObject<Element | null>,\n  /**\n   * Whether the tooltip is currently performing an entry animation.\n   */\n  isEntering?: boolean,\n  /**\n   * Whether the tooltip is currently performing an exit animation.\n   */\n  isExiting?: boolean,\n  /**\n   * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.\n   * @default document.body\n   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n   */\n  UNSTABLE_portalContainer?: Element,\n  /**\n   * The placement of the tooltip with respect to the trigger.\n   * @default 'top'\n   */\n  placement?: Placement\n}\n\nexport interface TooltipRenderProps {\n  /**\n   * The placement of the tooltip relative to the trigger.\n   * @selector [data-placement=\"left | right | top | bottom\"]\n   */\n  placement: PlacementAxis | null,\n  /**\n   * Whether the tooltip is currently entering. Use this to apply animations.\n   * @selector [data-entering]\n   */\n  isEntering: boolean,\n  /**\n   * Whether the tooltip is currently exiting. Use this to apply animations.\n   * @selector [data-exiting]\n   */\n  isExiting: boolean,\n  /**\n   * State of the tooltip.\n   */\n  state: TooltipTriggerState\n}\n\nexport const TooltipTriggerStateContext = createContext<TooltipTriggerState | null>(null);\nexport const TooltipContext = createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: TooltipTriggerComponentProps): JSX.Element {\n  let state = useTooltipTriggerState(props);\n  let ref = useRef<FocusableElement>(null);\n  let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);\n\n  return (\n    <Provider\n      values={[\n        [TooltipTriggerStateContext, state],\n        [TooltipContext, {...tooltipProps, triggerRef: ref}]\n      ]}>\n      <FocusableProvider {...triggerProps} ref={ref}>\n        {props.children}\n      </FocusableProvider>\n    </Provider>\n  );\n}\n\n/**\n * A tooltip displays a description of an element on hover or focus.\n */\nexport const Tooltip = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, TooltipContext);\n  let contextState = useContext(TooltipTriggerStateContext);\n  let localState = useTooltipTriggerState(props);\n  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n  let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n  if (!state.isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <OverlayContainer portalContainer={UNSTABLE_portalContainer}>\n      <TooltipInner {...props} tooltipRef={ref} isExiting={isExiting} />\n    </OverlayContainer>\n  );\n});\n\nfunction TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: RefObject<HTMLDivElement | null>}) {\n  let state = useContext(TooltipTriggerStateContext)!;\n\n  // Calculate the arrow size internally\n  // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n  let arrowRef = useRef<HTMLDivElement>(null);\n  let [arrowWidth, setArrowWidth] = useState(0);\n  useLayoutEffect(() => {\n    if (arrowRef.current && state.isOpen) {\n      setArrowWidth(arrowRef.current.getBoundingClientRect().width);\n    }\n  }, [state.isOpen, arrowRef]);\n\n  let {overlayProps, arrowProps, placement} = useOverlayPosition({\n    placement: props.placement || 'top',\n    targetRef: props.triggerRef!,\n    overlayRef: props.tooltipRef,\n    offset: props.offset,\n    crossOffset: props.crossOffset,\n    isOpen: state.isOpen,\n    arrowSize: arrowWidth,\n    arrowBoundaryOffset: props.arrowBoundaryOffset,\n    shouldFlip: props.shouldFlip,\n    onClose: () => state.close(true)\n  });\n\n  let isEntering = useEnterAnimation(props.tooltipRef, !!placement) || props.isEntering || false;\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-Tooltip',\n    values: {\n      placement,\n      isEntering,\n      isExiting: props.isExiting,\n      state\n    }\n  });\n\n  props = mergeProps(props, overlayProps);\n  let {tooltipProps} = useTooltip(props, state);\n\n  return (\n    <div\n      {...tooltipProps}\n      ref={props.tooltipRef}\n      {...renderProps}\n      style={{...overlayProps.style, ...renderProps.style}}\n      data-placement={placement ?? undefined}\n      data-entering={isEntering || undefined}\n      data-exiting={props.isExiting || undefined}>\n      <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n        {renderProps.children}\n      </OverlayArrowContext.Provider>\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"Tooltip.main.js.map"}
+{"mappings":"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","sources":["packages/react-aria-components/src/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaLabelingProps, FocusableElement, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {AriaPositionProps, mergeProps, OverlayContainer, Placement, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';\nimport {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps, useEnterAnimation, useExitAnimation} from '@react-aria/utils';\nimport {FocusableProvider} from '@react-aria/focus';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef} from 'react';\n\nexport interface TooltipTriggerComponentProps extends TooltipTriggerProps {\n  children: ReactNode\n}\n\nexport interface TooltipProps extends PositionProps, Pick<AriaPositionProps, 'arrowBoundaryOffset'>, OverlayTriggerProps, AriaLabelingProps, RenderProps<TooltipRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The ref for the element which the tooltip positions itself with respect to.\n   *\n   * When used within a TooltipTrigger this is set automatically. It is only required when used standalone.\n   */\n  triggerRef?: RefObject<Element | null>,\n  /**\n   * Whether the tooltip is currently performing an entry animation.\n   */\n  isEntering?: boolean,\n  /**\n   * Whether the tooltip is currently performing an exit animation.\n   */\n  isExiting?: boolean,\n  /**\n   * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.\n   * @default document.body\n   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n   */\n  UNSTABLE_portalContainer?: Element,\n  /**\n   * The placement of the tooltip with respect to the trigger.\n   * @default 'top'\n   */\n  placement?: Placement\n}\n\nexport interface TooltipRenderProps {\n  /**\n   * The placement of the tooltip relative to the trigger.\n   * @selector [data-placement=\"left | right | top | bottom\"]\n   */\n  placement: PlacementAxis | null,\n  /**\n   * Whether the tooltip is currently entering. Use this to apply animations.\n   * @selector [data-entering]\n   */\n  isEntering: boolean,\n  /**\n   * Whether the tooltip is currently exiting. Use this to apply animations.\n   * @selector [data-exiting]\n   */\n  isExiting: boolean,\n  /**\n   * State of the tooltip.\n   */\n  state: TooltipTriggerState\n}\n\nexport const TooltipTriggerStateContext = createContext<TooltipTriggerState | null>(null);\nexport const TooltipContext = createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: TooltipTriggerComponentProps): JSX.Element {\n  let state = useTooltipTriggerState(props);\n  let ref = useRef<FocusableElement>(null);\n  let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);\n\n  return (\n    <Provider\n      values={[\n        [TooltipTriggerStateContext, state],\n        [TooltipContext, {...tooltipProps, triggerRef: ref}]\n      ]}>\n      <FocusableProvider {...triggerProps} ref={ref}>\n        {props.children}\n      </FocusableProvider>\n    </Provider>\n  );\n}\n\n/**\n * A tooltip displays a description of an element on hover or focus.\n */\nexport const Tooltip = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, TooltipContext);\n  let contextState = useContext(TooltipTriggerStateContext);\n  let localState = useTooltipTriggerState(props);\n  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n  let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n  if (!state.isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <OverlayContainer portalContainer={UNSTABLE_portalContainer}>\n      <TooltipInner {...props} tooltipRef={ref} isExiting={isExiting} />\n    </OverlayContainer>\n  );\n});\n\nfunction TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: RefObject<HTMLDivElement | null>}) {\n  let state = useContext(TooltipTriggerStateContext)!;\n  let arrowRef = useRef<HTMLDivElement>(null);\n\n  let {overlayProps, arrowProps, placement, triggerAnchorPoint} = useOverlayPosition({\n    placement: props.placement || 'top',\n    targetRef: props.triggerRef!,\n    overlayRef: props.tooltipRef,\n    arrowRef,\n    offset: props.offset,\n    crossOffset: props.crossOffset,\n    isOpen: state.isOpen,\n    arrowBoundaryOffset: props.arrowBoundaryOffset,\n    shouldFlip: props.shouldFlip,\n    containerPadding: props.containerPadding,\n    onClose: () => state.close(true)\n  });\n\n  let isEntering = useEnterAnimation(props.tooltipRef, !!placement) || props.isEntering || false;\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-Tooltip',\n    values: {\n      placement,\n      isEntering,\n      isExiting: props.isExiting,\n      state\n    }\n  });\n\n  props = mergeProps(props, overlayProps);\n  let {tooltipProps} = useTooltip(props, state);\n\n  let DOMProps = filterDOMProps(props, {global: true});\n\n  return (\n    <div\n      {...mergeProps(DOMProps, renderProps, tooltipProps)}\n      ref={props.tooltipRef}\n      style={{\n        ...overlayProps.style,\n        '--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,\n        ...renderProps.style\n      } as CSSProperties}\n      data-placement={placement ?? undefined}\n      data-entering={isEntering || undefined}\n      data-exiting={props.isExiting || undefined}>\n      <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n        {renderProps.children}\n      </OverlayArrowContext.Provider>\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"Tooltip.main.js.map"}

package/dist/Tooltip.mjs

@@ -1,10 +1,10 @@
 import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
 import {OverlayArrowContext as $44f671af83e7d9e0$export$2de4954e8ae13b9f} from "./OverlayArrow.mjs";
 import {useTooltipTrigger as $cCslV$useTooltipTrigger, OverlayContainer as $cCslV$OverlayContainer, useOverlayPosition as $cCslV$useOverlayPosition, mergeProps as $cCslV$mergeProps, useTooltip as $cCslV$useTooltip} from "react-aria";
+import {useExitAnimation as $cCslV$useExitAnimation, useEnterAnimation as $cCslV$useEnterAnimation, filterDOMProps as $cCslV$filterDOMProps} from "@react-aria/utils";
 import {FocusableProvider as $cCslV$FocusableProvider} from "@react-aria/focus";
 import {useTooltipTriggerState as $cCslV$useTooltipTriggerState} from "react-stately";
-import $cCslV$react, {createContext as $cCslV$createContext, useRef as $cCslV$useRef, forwardRef as $cCslV$forwardRef, useContext as $cCslV$useContext, useState as $cCslV$useState} from "react";
-import {useExitAnimation as $cCslV$useExitAnimation, useLayoutEffect as $cCslV$useLayoutEffect, useEnterAnimation as $cCslV$useEnterAnimation} from "@react-aria/utils";
+import $cCslV$react, {createContext as $cCslV$createContext, useRef as $cCslV$useRef, forwardRef as $cCslV$forwardRef, useContext as $cCslV$useContext} from "react";
 
 /*
  * Copyright 2022 Adobe. All rights reserved.
@@ -65,26 +65,18 @@ const $4e3b923658d69c60$export$28c660c63b792dea = /*#__PURE__*/ (0, $cCslV$forwa
 });
 function $4e3b923658d69c60$var$TooltipInner(props) {
     let state = (0, $cCslV$useContext)($4e3b923658d69c60$export$7a7623236eec67fa);
-    // Calculate the arrow size internally
-    // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
     let arrowRef = (0, $cCslV$useRef)(null);
-    let [arrowWidth, setArrowWidth] = (0, $cCslV$useState)(0);
-    (0, $cCslV$useLayoutEffect)(()=>{
-        if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
-    }, [
-        state.isOpen,
-        arrowRef
-    ]);
-    let { overlayProps: overlayProps, arrowProps: arrowProps, placement: placement } = (0, $cCslV$useOverlayPosition)({
+    let { overlayProps: overlayProps, arrowProps: arrowProps, placement: placement, triggerAnchorPoint: triggerAnchorPoint } = (0, $cCslV$useOverlayPosition)({
         placement: props.placement || 'top',
         targetRef: props.triggerRef,
         overlayRef: props.tooltipRef,
+        arrowRef: arrowRef,
         offset: props.offset,
         crossOffset: props.crossOffset,
         isOpen: state.isOpen,
-        arrowSize: arrowWidth,
         arrowBoundaryOffset: props.arrowBoundaryOffset,
         shouldFlip: props.shouldFlip,
+        containerPadding: props.containerPadding,
         onClose: ()=>state.close(true)
     });
     let isEntering = (0, $cCslV$useEnterAnimation)(props.tooltipRef, !!placement) || props.isEntering || false;
@@ -100,12 +92,15 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
     });
     props = (0, $cCslV$mergeProps)(props, overlayProps);
     let { tooltipProps: tooltipProps } = (0, $cCslV$useTooltip)(props, state);
+    let DOMProps = (0, $cCslV$filterDOMProps)(props, {
+        global: true
+    });
     return /*#__PURE__*/ (0, $cCslV$react).createElement("div", {
-        ...tooltipProps,
+        ...(0, $cCslV$mergeProps)(DOMProps, renderProps, tooltipProps),
         ref: props.tooltipRef,
-        ...renderProps,
         style: {
             ...overlayProps.style,
+            '--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,
             ...renderProps.style
         },
         "data-placement": placement !== null && placement !== void 0 ? placement : undefined,

package/dist/Tooltip.module.js

@@ -1,10 +1,10 @@
 import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.module.js";
 import {OverlayArrowContext as $44f671af83e7d9e0$export$2de4954e8ae13b9f} from "./OverlayArrow.module.js";
 import {useTooltipTrigger as $cCslV$useTooltipTrigger, OverlayContainer as $cCslV$OverlayContainer, useOverlayPosition as $cCslV$useOverlayPosition, mergeProps as $cCslV$mergeProps, useTooltip as $cCslV$useTooltip} from "react-aria";
+import {useExitAnimation as $cCslV$useExitAnimation, useEnterAnimation as $cCslV$useEnterAnimation, filterDOMProps as $cCslV$filterDOMProps} from "@react-aria/utils";
 import {FocusableProvider as $cCslV$FocusableProvider} from "@react-aria/focus";
 import {useTooltipTriggerState as $cCslV$useTooltipTriggerState} from "react-stately";
-import $cCslV$react, {createContext as $cCslV$createContext, useRef as $cCslV$useRef, forwardRef as $cCslV$forwardRef, useContext as $cCslV$useContext, useState as $cCslV$useState} from "react";
-import {useExitAnimation as $cCslV$useExitAnimation, useLayoutEffect as $cCslV$useLayoutEffect, useEnterAnimation as $cCslV$useEnterAnimation} from "@react-aria/utils";
+import $cCslV$react, {createContext as $cCslV$createContext, useRef as $cCslV$useRef, forwardRef as $cCslV$forwardRef, useContext as $cCslV$useContext} from "react";
 
 /*
  * Copyright 2022 Adobe. All rights reserved.
@@ -65,26 +65,18 @@ const $4e3b923658d69c60$export$28c660c63b792dea = /*#__PURE__*/ (0, $cCslV$forwa
 });
 function $4e3b923658d69c60$var$TooltipInner(props) {
     let state = (0, $cCslV$useContext)($4e3b923658d69c60$export$7a7623236eec67fa);
-    // Calculate the arrow size internally
-    // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
     let arrowRef = (0, $cCslV$useRef)(null);
-    let [arrowWidth, setArrowWidth] = (0, $cCslV$useState)(0);
-    (0, $cCslV$useLayoutEffect)(()=>{
-        if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
-    }, [
-        state.isOpen,
-        arrowRef
-    ]);
-    let { overlayProps: overlayProps, arrowProps: arrowProps, placement: placement } = (0, $cCslV$useOverlayPosition)({
+    let { overlayProps: overlayProps, arrowProps: arrowProps, placement: placement, triggerAnchorPoint: triggerAnchorPoint } = (0, $cCslV$useOverlayPosition)({
         placement: props.placement || 'top',
         targetRef: props.triggerRef,
         overlayRef: props.tooltipRef,
+        arrowRef: arrowRef,
         offset: props.offset,
         crossOffset: props.crossOffset,
         isOpen: state.isOpen,
-        arrowSize: arrowWidth,
         arrowBoundaryOffset: props.arrowBoundaryOffset,
         shouldFlip: props.shouldFlip,
+        containerPadding: props.containerPadding,
         onClose: ()=>state.close(true)
     });
     let isEntering = (0, $cCslV$useEnterAnimation)(props.tooltipRef, !!placement) || props.isEntering || false;
@@ -100,12 +92,15 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
     });
     props = (0, $cCslV$mergeProps)(props, overlayProps);
     let { tooltipProps: tooltipProps } = (0, $cCslV$useTooltip)(props, state);
+    let DOMProps = (0, $cCslV$filterDOMProps)(props, {
+        global: true
+    });
     return /*#__PURE__*/ (0, $cCslV$react).createElement("div", {
-        ...tooltipProps,
+        ...(0, $cCslV$mergeProps)(DOMProps, renderProps, tooltipProps),
         ref: props.tooltipRef,
-        ...renderProps,
         style: {
             ...overlayProps.style,
+            '--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,
             ...renderProps.style
         },
         "data-placement": placement !== null && placement !== void 0 ? placement : undefined,

package/dist/Tooltip.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-aria-components/src/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaLabelingProps, FocusableElement, forwardRefType, RefObject} from '@react-types/shared';\nimport {AriaPositionProps, mergeProps, OverlayContainer, Placement, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';\nimport {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} from './utils';\nimport {FocusableProvider} from '@react-aria/focus';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';\nimport React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';\n\nexport interface TooltipTriggerComponentProps extends TooltipTriggerProps {\n  children: ReactNode\n}\n\nexport interface TooltipProps extends PositionProps, Pick<AriaPositionProps, 'arrowBoundaryOffset'>, OverlayTriggerProps, AriaLabelingProps, RenderProps<TooltipRenderProps> {\n  /**\n   * The ref for the element which the tooltip positions itself with respect to.\n   *\n   * When used within a TooltipTrigger this is set automatically. It is only required when used standalone.\n   */\n  triggerRef?: RefObject<Element | null>,\n  /**\n   * Whether the tooltip is currently performing an entry animation.\n   */\n  isEntering?: boolean,\n  /**\n   * Whether the tooltip is currently performing an exit animation.\n   */\n  isExiting?: boolean,\n  /**\n   * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.\n   * @default document.body\n   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n   */\n  UNSTABLE_portalContainer?: Element,\n  /**\n   * The placement of the tooltip with respect to the trigger.\n   * @default 'top'\n   */\n  placement?: Placement\n}\n\nexport interface TooltipRenderProps {\n  /**\n   * The placement of the tooltip relative to the trigger.\n   * @selector [data-placement=\"left | right | top | bottom\"]\n   */\n  placement: PlacementAxis | null,\n  /**\n   * Whether the tooltip is currently entering. Use this to apply animations.\n   * @selector [data-entering]\n   */\n  isEntering: boolean,\n  /**\n   * Whether the tooltip is currently exiting. Use this to apply animations.\n   * @selector [data-exiting]\n   */\n  isExiting: boolean,\n  /**\n   * State of the tooltip.\n   */\n  state: TooltipTriggerState\n}\n\nexport const TooltipTriggerStateContext = createContext<TooltipTriggerState | null>(null);\nexport const TooltipContext = createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: TooltipTriggerComponentProps): JSX.Element {\n  let state = useTooltipTriggerState(props);\n  let ref = useRef<FocusableElement>(null);\n  let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);\n\n  return (\n    <Provider\n      values={[\n        [TooltipTriggerStateContext, state],\n        [TooltipContext, {...tooltipProps, triggerRef: ref}]\n      ]}>\n      <FocusableProvider {...triggerProps} ref={ref}>\n        {props.children}\n      </FocusableProvider>\n    </Provider>\n  );\n}\n\n/**\n * A tooltip displays a description of an element on hover or focus.\n */\nexport const Tooltip = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, TooltipContext);\n  let contextState = useContext(TooltipTriggerStateContext);\n  let localState = useTooltipTriggerState(props);\n  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n  let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n  if (!state.isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <OverlayContainer portalContainer={UNSTABLE_portalContainer}>\n      <TooltipInner {...props} tooltipRef={ref} isExiting={isExiting} />\n    </OverlayContainer>\n  );\n});\n\nfunction TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: RefObject<HTMLDivElement | null>}) {\n  let state = useContext(TooltipTriggerStateContext)!;\n\n  // Calculate the arrow size internally\n  // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n  let arrowRef = useRef<HTMLDivElement>(null);\n  let [arrowWidth, setArrowWidth] = useState(0);\n  useLayoutEffect(() => {\n    if (arrowRef.current && state.isOpen) {\n      setArrowWidth(arrowRef.current.getBoundingClientRect().width);\n    }\n  }, [state.isOpen, arrowRef]);\n\n  let {overlayProps, arrowProps, placement} = useOverlayPosition({\n    placement: props.placement || 'top',\n    targetRef: props.triggerRef!,\n    overlayRef: props.tooltipRef,\n    offset: props.offset,\n    crossOffset: props.crossOffset,\n    isOpen: state.isOpen,\n    arrowSize: arrowWidth,\n    arrowBoundaryOffset: props.arrowBoundaryOffset,\n    shouldFlip: props.shouldFlip,\n    onClose: () => state.close(true)\n  });\n\n  let isEntering = useEnterAnimation(props.tooltipRef, !!placement) || props.isEntering || false;\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-Tooltip',\n    values: {\n      placement,\n      isEntering,\n      isExiting: props.isExiting,\n      state\n    }\n  });\n\n  props = mergeProps(props, overlayProps);\n  let {tooltipProps} = useTooltip(props, state);\n\n  return (\n    <div\n      {...tooltipProps}\n      ref={props.tooltipRef}\n      {...renderProps}\n      style={{...overlayProps.style, ...renderProps.style}}\n      data-placement={placement ?? undefined}\n      data-entering={isEntering || undefined}\n      data-exiting={props.isExiting || undefined}>\n      <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n        {renderProps.children}\n      </OverlayArrowContext.Provider>\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"Tooltip.module.js.map"}
+{"mappings":"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","sources":["packages/react-aria-components/src/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaLabelingProps, FocusableElement, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {AriaPositionProps, mergeProps, OverlayContainer, Placement, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';\nimport {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps, useEnterAnimation, useExitAnimation} from '@react-aria/utils';\nimport {FocusableProvider} from '@react-aria/focus';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef} from 'react';\n\nexport interface TooltipTriggerComponentProps extends TooltipTriggerProps {\n  children: ReactNode\n}\n\nexport interface TooltipProps extends PositionProps, Pick<AriaPositionProps, 'arrowBoundaryOffset'>, OverlayTriggerProps, AriaLabelingProps, RenderProps<TooltipRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The ref for the element which the tooltip positions itself with respect to.\n   *\n   * When used within a TooltipTrigger this is set automatically. It is only required when used standalone.\n   */\n  triggerRef?: RefObject<Element | null>,\n  /**\n   * Whether the tooltip is currently performing an entry animation.\n   */\n  isEntering?: boolean,\n  /**\n   * Whether the tooltip is currently performing an exit animation.\n   */\n  isExiting?: boolean,\n  /**\n   * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.\n   * @default document.body\n   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n   */\n  UNSTABLE_portalContainer?: Element,\n  /**\n   * The placement of the tooltip with respect to the trigger.\n   * @default 'top'\n   */\n  placement?: Placement\n}\n\nexport interface TooltipRenderProps {\n  /**\n   * The placement of the tooltip relative to the trigger.\n   * @selector [data-placement=\"left | right | top | bottom\"]\n   */\n  placement: PlacementAxis | null,\n  /**\n   * Whether the tooltip is currently entering. Use this to apply animations.\n   * @selector [data-entering]\n   */\n  isEntering: boolean,\n  /**\n   * Whether the tooltip is currently exiting. Use this to apply animations.\n   * @selector [data-exiting]\n   */\n  isExiting: boolean,\n  /**\n   * State of the tooltip.\n   */\n  state: TooltipTriggerState\n}\n\nexport const TooltipTriggerStateContext = createContext<TooltipTriggerState | null>(null);\nexport const TooltipContext = createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: TooltipTriggerComponentProps): JSX.Element {\n  let state = useTooltipTriggerState(props);\n  let ref = useRef<FocusableElement>(null);\n  let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);\n\n  return (\n    <Provider\n      values={[\n        [TooltipTriggerStateContext, state],\n        [TooltipContext, {...tooltipProps, triggerRef: ref}]\n      ]}>\n      <FocusableProvider {...triggerProps} ref={ref}>\n        {props.children}\n      </FocusableProvider>\n    </Provider>\n  );\n}\n\n/**\n * A tooltip displays a description of an element on hover or focus.\n */\nexport const Tooltip = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, TooltipContext);\n  let contextState = useContext(TooltipTriggerStateContext);\n  let localState = useTooltipTriggerState(props);\n  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n  let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n  if (!state.isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <OverlayContainer portalContainer={UNSTABLE_portalContainer}>\n      <TooltipInner {...props} tooltipRef={ref} isExiting={isExiting} />\n    </OverlayContainer>\n  );\n});\n\nfunction TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: RefObject<HTMLDivElement | null>}) {\n  let state = useContext(TooltipTriggerStateContext)!;\n  let arrowRef = useRef<HTMLDivElement>(null);\n\n  let {overlayProps, arrowProps, placement, triggerAnchorPoint} = useOverlayPosition({\n    placement: props.placement || 'top',\n    targetRef: props.triggerRef!,\n    overlayRef: props.tooltipRef,\n    arrowRef,\n    offset: props.offset,\n    crossOffset: props.crossOffset,\n    isOpen: state.isOpen,\n    arrowBoundaryOffset: props.arrowBoundaryOffset,\n    shouldFlip: props.shouldFlip,\n    containerPadding: props.containerPadding,\n    onClose: () => state.close(true)\n  });\n\n  let isEntering = useEnterAnimation(props.tooltipRef, !!placement) || props.isEntering || false;\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-Tooltip',\n    values: {\n      placement,\n      isEntering,\n      isExiting: props.isExiting,\n      state\n    }\n  });\n\n  props = mergeProps(props, overlayProps);\n  let {tooltipProps} = useTooltip(props, state);\n\n  let DOMProps = filterDOMProps(props, {global: true});\n\n  return (\n    <div\n      {...mergeProps(DOMProps, renderProps, tooltipProps)}\n      ref={props.tooltipRef}\n      style={{\n        ...overlayProps.style,\n        '--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,\n        ...renderProps.style\n      } as CSSProperties}\n      data-placement={placement ?? undefined}\n      data-entering={isEntering || undefined}\n      data-exiting={props.isExiting || undefined}>\n      <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n        {renderProps.children}\n      </OverlayArrowContext.Provider>\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"Tooltip.module.js.map"}

package/dist/Tree.main.js

@@ -25,7 +25,7 @@ $parcel$export(module.exports, "TreeStateContext", () => $c6576bb58bfa084b$expor
 $parcel$export(module.exports, "Tree", () => $c6576bb58bfa084b$export$7fbedc92909ed28e);
 $parcel$export(module.exports, "TreeItemContent", () => $c6576bb58bfa084b$export$4b687e3f663d618c);
 $parcel$export(module.exports, "TreeItem", () => $c6576bb58bfa084b$export$53d36ab85dc89436);
-$parcel$export(module.exports, "UNSTABLE_TreeLoadingIndicator", () => $c6576bb58bfa084b$export$9d1a587784d97b41);
+$parcel$export(module.exports, "TreeLoadMoreItem", () => $c6576bb58bfa084b$export$533df5f8efd48cc9);
 /*
  * Copyright 2024 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -55,7 +55,7 @@ class $c6576bb58bfa084b$var$TreeCollection {
         yield* this.flattenedRows;
     }
     get size() {
-        return this.flattenedRows.length;
+        return this.itemCount;
     }
     getKeys() {
         return this.keyMap.keys();
@@ -72,7 +72,7 @@ class $c6576bb58bfa084b$var$TreeCollection {
     }
     getLastKey() {
         var _this_flattenedRows_;
-        return (_this_flattenedRows_ = this.flattenedRows[this.size - 1]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
+        return (_this_flattenedRows_ = this.flattenedRows[this.flattenedRows.length - 1]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
     }
     getKeyAfter(key) {
         var _this_flattenedRows_;
@@ -104,13 +104,15 @@ class $c6576bb58bfa084b$var$TreeCollection {
     }
     constructor(opts){
         this.keyMap = new Map();
+        this.itemCount = 0;
         let { collection: collection, expandedKeys: expandedKeys } = opts;
-        let { flattenedRows: flattenedRows, keyMap: keyMap } = $c6576bb58bfa084b$var$flattenTree(collection, {
+        let { flattenedRows: flattenedRows, keyMap: keyMap, itemCount: itemCount } = $c6576bb58bfa084b$var$flattenTree(collection, {
             expandedKeys: expandedKeys
         });
         this.flattenedRows = flattenedRows;
         // Use generated keyMap because it contains the modified collection nodes (aka it adjusts the indexes so that they ignore the existence of the Content items)
         this.keyMap = keyMap;
+        this.itemCount = itemCount;
     }
 }
 const $c6576bb58bfa084b$export$dfae7d399eea2568 = /*#__PURE__*/ (0, $5SMu3$react.createContext)(null);
@@ -288,9 +290,7 @@ function $c6576bb58bfa084b$var$TreeInner({ props: props, collection: collection,
             ...values
         });
         let treeGridRowProps = {
-            'aria-level': 1,
-            'aria-posinset': 1,
-            'aria-setsize': 1
+            'aria-level': 1
         };
         emptyState = /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
             role: "row",
@@ -305,13 +305,13 @@ function $c6576bb58bfa084b$var$TreeInner({ props: props, collection: collection,
             }
         }, content));
     }
+    let DOMProps = (0, $5SMu3$reactariautils.filterDOMProps)(props, {
+        global: true
+    });
     return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, ($parcel$interopDefault($5SMu3$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $5SMu3$reactaria.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
-        ...(0, $5SMu3$reactariautils.filterDOMProps)(props),
-        ...renderProps,
-        ...(0, $5SMu3$reactaria.mergeProps)(gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps),
+        ...(0, $5SMu3$reactaria.mergeProps)(DOMProps, renderProps, gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps),
         ref: ref,
         slot: props.slot || undefined,
-        onScroll: props.onScroll,
         "data-empty": state.collection.size === 0 || undefined,
         "data-focused": isFocused || undefined,
         "data-drop-target": isRootDropTarget || undefined,
@@ -346,7 +346,10 @@ function $c6576bb58bfa084b$var$TreeInner({ props: props, collection: collection,
         renderDropIndicator: (0, $0c2289d253cb4544$exports.useRenderDropIndicator)(dragAndDropHooks, dropState)
     })), emptyState)), dragPreview);
 }
-const $c6576bb58bfa084b$export$4b687e3f663d618c = /*#__PURE__*/ (0, $5SMu3$reactariacollections.createLeafComponent)('content', function TreeItemContent(props) {
+class $c6576bb58bfa084b$var$TreeContentNode extends (0, $5SMu3$reactariacollections.CollectionNode) {
+}
+$c6576bb58bfa084b$var$TreeContentNode.type = 'content';
+const $c6576bb58bfa084b$export$4b687e3f663d618c = /*#__PURE__*/ (0, $5SMu3$reactariacollections.createLeafComponent)($c6576bb58bfa084b$var$TreeContentNode, function TreeItemContent(props) {
     let values = (0, $5SMu3$react.useContext)($c6576bb58bfa084b$export$36b5dda0d9bc8f78);
     let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
         children: props.children,
@@ -357,7 +360,10 @@ const $c6576bb58bfa084b$export$4b687e3f663d618c = /*#__PURE__*/ (0, $5SMu3$react
     }, renderProps.children);
 });
 const $c6576bb58bfa084b$export$36b5dda0d9bc8f78 = /*#__PURE__*/ (0, $5SMu3$react.createContext)(null);
-const $c6576bb58bfa084b$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $5SMu3$reactariacollections.createBranchComponent)('item', (props, ref, item)=>{
+class $c6576bb58bfa084b$var$TreeItemNode extends (0, $5SMu3$reactariacollections.CollectionNode) {
+}
+$c6576bb58bfa084b$var$TreeItemNode.type = 'item';
+const $c6576bb58bfa084b$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $5SMu3$reactariacollections.createBranchComponent)($c6576bb58bfa084b$var$TreeItemNode, (props, ref, item)=>{
     var _this;
     let state = (0, $5SMu3$react.useContext)($c6576bb58bfa084b$export$8953bccafd7bce87);
     ref = (0, $5SMu3$reactariautils.useObjectRef)(ref);
@@ -481,6 +487,11 @@ const $c6576bb58bfa084b$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $5SMu3$react
         }
     });
     let activateButtonId = (0, $5SMu3$reactaria.useId)();
+    let DOMProps = (0, $5SMu3$reactariautils.filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    delete DOMProps.onClick;
     return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, ($parcel$interopDefault($5SMu3$react))).Fragment, null, dropIndicator && !dropIndicator.isHidden && /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
         role: "row",
         "aria-level": rowProps['aria-level'],
@@ -507,7 +518,7 @@ const $c6576bb58bfa084b$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $5SMu3$react
         tabIndex: -1,
         ref: activateButtonRef
     }) : null)), /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
-        ...(0, $5SMu3$reactaria.mergeProps)((0, $5SMu3$reactariautils.filterDOMProps)(props), rowProps, focusProps, hoverProps, focusWithinProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
+        ...(0, $5SMu3$reactaria.mergeProps)(DOMProps, rowProps, focusProps, hoverProps, focusWithinProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
         ...renderProps,
         ref: ref,
         // TODO: missing selectionBehavior, hasAction and allowsSelection data attribute equivalents (available in renderProps). Do we want those?
@@ -569,21 +580,38 @@ const $c6576bb58bfa084b$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $5SMu3$react
         ]
     }, children))));
 });
-const $c6576bb58bfa084b$export$9d1a587784d97b41 = (0, $5SMu3$reactariacollections.createLeafComponent)('loader', function TreeLoader(props, ref, item) {
+const $c6576bb58bfa084b$export$533df5f8efd48cc9 = (0, $5SMu3$reactariacollections.createLeafComponent)((0, $5SMu3$reactariacollections.LoaderNode), function TreeLoadingSentinel(props, ref, item) {
+    let { isVirtualized: isVirtualized } = (0, $5SMu3$react.useContext)((0, $3114c2382242bdc0$exports.CollectionRendererContext));
     let state = (0, $5SMu3$react.useContext)($c6576bb58bfa084b$export$8953bccafd7bce87);
-    // This loader row is is non-interactable, but we want the same aria props calculated as a typical row
-    // @ts-ignore
-    let { rowProps: rowProps } = (0, $5SMu3$reactaria.useTreeItem)({
+    let { isLoading: isLoading, onLoadMore: onLoadMore, scrollOffset: scrollOffset, ...otherProps } = props;
+    let sentinelRef = (0, $5SMu3$react.useRef)(null);
+    let memoedLoadMoreProps = (0, $5SMu3$react.useMemo)(()=>({
+            onLoadMore: onLoadMore,
+            // this collection will update anytime a row is expanded/collapsed becaused the flattenedRows will change.
+            // This means onLoadMore will trigger but that might be ok cause the user should have logic to handle multiple loadMore calls
+            collection: state === null || state === void 0 ? void 0 : state.collection,
+            sentinelRef: sentinelRef,
+            scrollOffset: scrollOffset
+        }), [
+        onLoadMore,
+        scrollOffset,
+        state === null || state === void 0 ? void 0 : state.collection
+    ]);
+    (0, $5SMu3$reactariautils.useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
+    ref = (0, $5SMu3$reactariautils.useObjectRef)(ref);
+    let { rowProps: rowProps, gridCellProps: gridCellProps } = (0, $5SMu3$reactaria.useTreeItem)({
         node: item
     }, state, ref);
     let level = rowProps['aria-level'] || 1;
+    // For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
+    // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
+    // item count
     let ariaProps = {
-        'aria-level': rowProps['aria-level'],
-        'aria-posinset': rowProps['aria-posinset'],
-        'aria-setsize': rowProps['aria-setsize']
+        role: 'row',
+        'aria-level': rowProps['aria-level']
     };
     let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
-        ...props,
+        ...otherProps,
         id: undefined,
         children: item.rendered,
         defaultClassName: 'react-aria-TreeLoader',
@@ -591,15 +619,33 @@ const $c6576bb58bfa084b$export$9d1a587784d97b41 = (0, $5SMu3$reactariacollection
             level: level
         }
     });
+    let style = {};
+    if (isVirtualized) style = {
+        display: 'contents'
+    };
     return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, ($parcel$interopDefault($5SMu3$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
-        role: "row",
+        style: {
+            position: 'relative',
+            width: 0,
+            height: 0
+        },
+        inert: (0, $5SMu3$reactariautils.inertValue)(true)
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
+        "data-testid": "loadMoreSentinel",
+        ref: sentinelRef,
+        style: {
+            position: 'absolute',
+            height: 1,
+            width: 1
+        }
+    })), isLoading && renderProps.children && /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
         ref: ref,
         ...(0, $5SMu3$reactaria.mergeProps)((0, $5SMu3$reactariautils.filterDOMProps)(props), ariaProps),
         ...renderProps,
         "data-level": level
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
-        role: "gridcell",
-        "aria-colindex": 1
+        ...gridCellProps,
+        style: style
     }, renderProps.children)));
 });
 function $c6576bb58bfa084b$var$convertExpanded(expanded) {
@@ -610,6 +656,8 @@ function $c6576bb58bfa084b$var$flattenTree(collection, opts) {
     let { expandedKeys: expandedKeys = new Set() } = opts;
     let keyMap = new Map();
     let flattenedRows = [];
+    // Need to count the items here because BaseCollection will return the full item count regardless if items are hidden via collapsed rows
+    let itemCount = 0;
     let visitNode = (node)=>{
         if (node.type === 'item' || node.type === 'loader') {
             let parentKey = node === null || node === void 0 ? void 0 : node.parentKey;
@@ -628,15 +676,20 @@ function $c6576bb58bfa084b$var$flattenTree(collection, opts) {
                 if (node.type === 'loader') clone.level = node.level + 1;
                 keyMap.set(clone.key, clone);
             } else keyMap.set(node.key, node);
-            if (node.level === 0 || parentKey != null && expandedKeys.has(parentKey) && flattenedRows.find((row)=>row.key === parentKey)) // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
-            flattenedRows.push(keyMap.get(node.key) || node);
+            // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
+            let modifiedNode = keyMap.get(node.key) || node;
+            if (modifiedNode.level === 0 || modifiedNode.parentKey != null && expandedKeys.has(modifiedNode.parentKey) && flattenedRows.find((row)=>row.key === modifiedNode.parentKey)) {
+                if (modifiedNode.type === 'item') itemCount++;
+                flattenedRows.push(modifiedNode);
+            }
         } else if (node.type !== null) keyMap.set(node.key, node);
         for (let child of collection.getChildren(node.key))visitNode(child);
     };
     for (let node of collection)visitNode(node);
     return {
         flattenedRows: flattenedRows,
-        keyMap: keyMap
+        keyMap: keyMap,
+        itemCount: itemCount
     };
 }
 function $c6576bb58bfa084b$var$TreeDropIndicatorWrapper(props, ref) {