react-aria-components 1.5.0 → 1.7.0

package/dist/Popover.main.js

@@ -3,6 +3,7 @@ var $ee5958cbdc6becc1$exports = require("./OverlayArrow.main.js");
 var $2979ab89b336194b$exports = require("./Dialog.main.js");
 var $4DQW2$reactaria = require("react-aria");
 var $4DQW2$reactariautils = require("@react-aria/utils");
+var $4DQW2$reactariainteractions = require("@react-aria/interactions");
 var $4DQW2$reactstately = require("react-stately");
 var $4DQW2$react = require("react");
 var $4DQW2$reactariacollections = require("@react-aria/collections");
@@ -36,14 +37,18 @@ $parcel$export(module.exports, "Popover", () => $61e2b7078adb18bc$export$5b6b194
 
 
 
+
 const $61e2b7078adb18bc$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $4DQW2$react.createContext)(null);
-function $61e2b7078adb18bc$var$Popover(props, ref) {
+// Stores a ref for the portal container for a group of popovers (e.g. submenus).
+const $61e2b7078adb18bc$var$PopoverGroupContext = /*#__PURE__*/ (0, $4DQW2$react.createContext)(null);
+const $61e2b7078adb18bc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4DQW2$react.forwardRef)(function Popover(props, ref) {
     [props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $61e2b7078adb18bc$export$9b9a0cd73afb7ca4);
     let contextState = (0, $4DQW2$react.useContext)((0, $2979ab89b336194b$exports.OverlayTriggerStateContext));
     let localState = (0, $4DQW2$reactstately.useOverlayTriggerState)(props);
     let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-    let isExiting = (0, $c5ccf687772c0422$exports.useExitAnimation)(ref, state.isOpen) || props.isExiting || false;
+    let isExiting = (0, $4DQW2$reactariautils.useExitAnimation)(ref, state.isOpen) || props.isExiting || false;
     let isHidden = (0, $4DQW2$reactariacollections.useIsHidden)();
+    let { direction: direction } = (0, $4DQW2$reactaria.useLocale)();
     // If we are in a hidden tree, we still need to preserve our children.
     if (isHidden) {
         let children = props.children;
@@ -62,17 +67,18 @@ function $61e2b7078adb18bc$var$Popover(props, ref) {
         triggerRef: props.triggerRef,
         state: state,
         popoverRef: ref,
-        isExiting: isExiting
+        isExiting: isExiting,
+        dir: direction
     });
-}
-/**
- * A popover is an overlay element positioned relative to a trigger.
- */ const $61e2b7078adb18bc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4DQW2$react.forwardRef)($61e2b7078adb18bc$var$Popover);
+});
 function $61e2b7078adb18bc$var$PopoverInner({ state: state, isExiting: isExiting, UNSTABLE_portalContainer: UNSTABLE_portalContainer, ...props }) {
     // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)
     // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
     let arrowRef = (0, $4DQW2$react.useRef)(null);
     let [arrowWidth, setArrowWidth] = (0, $4DQW2$react.useState)(0);
+    let containerRef = (0, $4DQW2$react.useRef)(null);
+    let groupCtx = (0, $4DQW2$react.useContext)($61e2b7078adb18bc$var$PopoverGroupContext);
+    let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';
     (0, $4DQW2$reactariautils.useLayoutEffect)(()=>{
         if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
     }, [
@@ -83,10 +89,13 @@ function $61e2b7078adb18bc$var$PopoverInner({ state: state, isExiting: isExiting
     let { popoverProps: popoverProps, underlayProps: underlayProps, arrowProps: arrowProps, placement: placement } = (0, $4DQW2$reactaria.usePopover)({
         ...props,
         offset: (_props_offset = props.offset) !== null && _props_offset !== void 0 ? _props_offset : 8,
-        arrowSize: arrowWidth
+        arrowSize: arrowWidth,
+        // If this is a submenu/subdialog, use the root popover's container 
+        // to detect outside interaction and add aria-hidden.
+        groupRef: isSubPopover ? groupCtx : containerRef
     }, state);
     let ref = props.popoverRef;
-    let isEntering = (0, $c5ccf687772c0422$exports.useEnterAnimation)(ref, !!placement) || props.isEntering || false;
+    let isEntering = (0, $4DQW2$reactariautils.useEnterAnimation)(ref, !!placement) || props.isEntering || false;
     let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
         ...props,
         defaultClassName: 'react-aria-Popover',
@@ -97,27 +106,38 @@ function $61e2b7078adb18bc$var$PopoverInner({ state: state, isExiting: isExiting
             isExiting: isExiting
         }
     });
+    // Automatically render Popover with role=dialog except when isNonModal is true,
+    // or a dialog is already nested inside the popover.
+    let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
+    let [isDialog, setDialog] = (0, $4DQW2$react.useState)(false);
+    (0, $4DQW2$reactariautils.useLayoutEffect)(()=>{
+        if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
+    }, [
+        ref,
+        shouldBeDialog
+    ]);
+    // Focus the popover itself on mount, unless a child element is already focused.
+    (0, $4DQW2$react.useEffect)(()=>{
+        if (isDialog && ref.current && !ref.current.contains(document.activeElement)) (0, $4DQW2$reactariainteractions.focusSafely)(ref.current);
+    }, [
+        isDialog,
+        ref
+    ]);
     let style = {
         ...popoverProps.style,
         ...renderProps.style
     };
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement((0, $4DQW2$reactaria.Overlay), {
-        ...props,
-        isExiting: isExiting,
-        portalContainer: UNSTABLE_portalContainer
-    }, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement("div", {
-        "data-testid": "underlay",
-        ...underlayProps,
-        style: {
-            position: 'fixed',
-            inset: 0
-        }
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement("div", {
+    let overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement("div", {
         ...(0, $4DQW2$reactariautils.mergeProps)((0, $4DQW2$reactariautils.filterDOMProps)(props), popoverProps),
         ...renderProps,
+        role: isDialog ? 'dialog' : undefined,
+        tabIndex: isDialog ? -1 : undefined,
+        "aria-label": props['aria-label'],
+        "aria-labelledby": props['aria-labelledby'],
         ref: ref,
         slot: props.slot || undefined,
         style: style,
+        dir: props.dir,
         "data-trigger": props.trigger,
         "data-placement": placement,
         "data-entering": isEntering || undefined,
@@ -132,7 +152,36 @@ function $61e2b7078adb18bc$var$PopoverInner({ state: state, isExiting: isExiting
         }
     }, renderProps.children), /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement((0, $4DQW2$reactaria.DismissButton), {
         onDismiss: state.close
-    })));
+    }));
+    // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
+    if (!isSubPopover) return /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement((0, $4DQW2$reactaria.Overlay), {
+        ...props,
+        shouldContainFocus: isDialog,
+        isExiting: isExiting,
+        portalContainer: UNSTABLE_portalContainer
+    }, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement("div", {
+        "data-testid": "underlay",
+        ...underlayProps,
+        style: {
+            position: 'fixed',
+            inset: 0
+        }
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement("div", {
+        ref: containerRef,
+        style: {
+            display: 'contents'
+        }
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement($61e2b7078adb18bc$var$PopoverGroupContext.Provider, {
+        value: containerRef
+    }, overlay)));
+    var _ref;
+    // Submenus/subdialogs are mounted into the root popover's container.
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($4DQW2$react))).createElement((0, $4DQW2$reactaria.Overlay), {
+        ...props,
+        shouldContainFocus: isDialog,
+        isExiting: isExiting,
+        portalContainer: (_ref = UNSTABLE_portalContainer !== null && UNSTABLE_portalContainer !== void 0 ? UNSTABLE_portalContainer : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.current) !== null && _ref !== void 0 ? _ref : undefined
+    }, overlay);
 }
 
 

package/dist/Popover.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-aria-components/src/Popover.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 {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, usePopover} from 'react-aria';\nimport {ContextValue, RenderProps, SlotProps, useContextProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';\nimport {filterDOMProps, mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {forwardRefType, RefObject} from '@react-types/shared';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport React, {createContext, ForwardedRef, forwardRef, useContext, useRef, useState} from 'react';\nimport {useIsHidden} from '@react-aria/collections';\n\nexport interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps {\n  /**\n   * The name of the component that triggered the popover. This is reflected on the element\n   * as the `data-trigger` attribute, and can be used to provide specific\n   * styles for the popover depending on which element triggered it.\n   */\n  trigger?: string,\n  /**\n   * The ref for the element which the popover positions itself with respect to.\n   *\n   * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n   * this is set automatically. It is only required when used standalone.\n   */\n  triggerRef?: RefObject<Element | null>,\n  /**\n   * Whether the popover is currently performing an entry animation.\n   */\n  isEntering?: boolean,\n  /**\n   * Whether the popover 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   */\n  UNSTABLE_portalContainer?: Element,\n  /**\n   * The additional offset applied along the main axis between the element and its\n   * anchor element.\n   * @default 8\n   */\n  offset?: number\n}\n\nexport interface PopoverRenderProps {\n  /**\n   * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n   * @selector [data-trigger=\"...\"]\n   */\n  trigger: string | null,\n  /**\n   * The placement of the popover relative to the trigger.\n   * @selector [data-placement=\"left | right | top | bottom\"]\n   */\n  placement: PlacementAxis | null,\n  /**\n   * Whether the popover is currently entering. Use this to apply animations.\n   * @selector [data-entering]\n   */\n  isEntering: boolean,\n  /**\n   * Whether the popover is currently exiting. Use this to apply animations.\n   * @selector [data-exiting]\n   */\n  isExiting: boolean\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);\n\nfunction Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {\n  [props, ref] = useContextProps(props, ref, PopoverContext);\n  let contextState = useContext(OverlayTriggerStateContext);\n  let localState = useOverlayTriggerState(props);\n  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n  let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n  let isHidden = useIsHidden();\n\n  // If we are in a hidden tree, we still need to preserve our children.\n  if (isHidden) {\n    let children = props.children;\n    if (typeof children === 'function') {\n      children = children({\n        trigger: props.trigger || null,\n        placement: 'bottom',\n        isEntering: false,\n        isExiting: false,\n        defaultChildren: null\n      });\n    }\n\n    return <>{children}</>;\n  }\n\n  if (state && !state.isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <PopoverInner\n      {...props}\n      triggerRef={props.triggerRef!}\n      state={state}\n      popoverRef={ref}\n      isExiting={isExiting} />\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nconst _Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(Popover);\nexport {_Popover as Popover};\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n  state: OverlayTriggerState,\n  isEntering?: boolean,\n  isExiting: boolean,\n  UNSTABLE_portalContainer?: Element,\n  trigger?: string\n}\n\nfunction PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: PopoverInnerProps) {\n  // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\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 {popoverProps, underlayProps, arrowProps, placement} = usePopover({\n    ...props,\n    offset: props.offset ?? 8,\n    arrowSize: arrowWidth\n  }, state);\n\n  let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n  let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-Popover',\n    values: {\n      trigger: props.trigger || null,\n      placement,\n      isEntering,\n      isExiting\n    }\n  });\n\n  let style = {...popoverProps.style, ...renderProps.style};\n\n  return (\n    <Overlay {...props} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>\n      {!props.isNonModal && state.isOpen && <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />}\n      <div\n        {...mergeProps(filterDOMProps(props as any), popoverProps)}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        style={style}\n        data-trigger={props.trigger}\n        data-placement={placement}\n        data-entering={isEntering || undefined}\n        data-exiting={isExiting || undefined}>\n        {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n        <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n          {renderProps.children}\n        </OverlayArrowContext.Provider>\n        <DismissButton onDismiss={state.close} />\n      </div>\n    </Overlay>\n  );\n}\n"],"names":[],"version":3,"file":"Popover.main.js.map"}
+{"mappings":"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","sources":["packages/react-aria-components/src/Popover.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, forwardRefType, RefObject} from '@react-types/shared';\nimport {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, useLocale, usePopover} from 'react-aria';\nimport {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';\nimport {focusSafely} from '@react-aria/interactions';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport React, {createContext, ForwardedRef, forwardRef, useContext, useEffect, useRef, useState} from 'react';\nimport {useIsHidden} from '@react-aria/collections';\n\nexport interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps {\n  /**\n   * The name of the component that triggered the popover. This is reflected on the element\n   * as the `data-trigger` attribute, and can be used to provide specific\n   * styles for the popover depending on which element triggered it.\n   */\n  trigger?: string,\n  /**\n   * The ref for the element which the popover positions itself with respect to.\n   *\n   * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n   * this is set automatically. It is only required when used standalone.\n   */\n  triggerRef?: RefObject<Element | null>,\n  /**\n   * Whether the popover is currently performing an entry animation.\n   */\n  isEntering?: boolean,\n  /**\n   * Whether the popover 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   */\n  UNSTABLE_portalContainer?: Element,\n  /**\n   * The additional offset applied along the main axis between the element and its\n   * anchor element.\n   * @default 8\n   */\n  offset?: number\n}\n\nexport interface PopoverRenderProps {\n  /**\n   * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n   * @selector [data-trigger=\"...\"]\n   */\n  trigger: string | null,\n  /**\n   * The placement of the popover relative to the trigger.\n   * @selector [data-placement=\"left | right | top | bottom\"]\n   */\n  placement: PlacementAxis | null,\n  /**\n   * Whether the popover is currently entering. Use this to apply animations.\n   * @selector [data-entering]\n   */\n  isEntering: boolean,\n  /**\n   * Whether the popover is currently exiting. Use this to apply animations.\n   * @selector [data-exiting]\n   */\n  isExiting: boolean\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {\n  [props, ref] = useContextProps(props, ref, PopoverContext);\n  let contextState = useContext(OverlayTriggerStateContext);\n  let localState = useOverlayTriggerState(props);\n  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n  let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n  let isHidden = useIsHidden();\n  let {direction} = useLocale();\n\n  // If we are in a hidden tree, we still need to preserve our children.\n  if (isHidden) {\n    let children = props.children;\n    if (typeof children === 'function') {\n      children = children({\n        trigger: props.trigger || null,\n        placement: 'bottom',\n        isEntering: false,\n        isExiting: false,\n        defaultChildren: null\n      });\n    }\n\n    return <>{children}</>;\n  }\n\n  if (state && !state.isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <PopoverInner\n      {...props}\n      triggerRef={props.triggerRef!}\n      state={state}\n      popoverRef={ref}\n      isExiting={isExiting}\n      dir={direction} />\n  );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n  state: OverlayTriggerState,\n  isEntering?: boolean,\n  isExiting: boolean,\n  UNSTABLE_portalContainer?: Element,\n  trigger?: string,\n  dir?: 'ltr' | 'rtl'\n}\n\nfunction PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: PopoverInnerProps) {\n  // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n  // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n  let arrowRef = useRef<HTMLDivElement>(null);\n  let [arrowWidth, setArrowWidth] = useState(0);\n  let containerRef = useRef<HTMLDivElement | null>(null);\n  let groupCtx = useContext(PopoverGroupContext);\n  let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n  useLayoutEffect(() => {\n    if (arrowRef.current && state.isOpen) {\n      setArrowWidth(arrowRef.current.getBoundingClientRect().width);\n    }\n  }, [state.isOpen, arrowRef]);\n\n  let {popoverProps, underlayProps, arrowProps, placement} = usePopover({\n    ...props,\n    offset: props.offset ?? 8,\n    arrowSize: arrowWidth,\n    // If this is a submenu/subdialog, use the root popover's container \n    // to detect outside interaction and add aria-hidden.\n    groupRef: isSubPopover ? groupCtx! : containerRef\n  }, state);\n\n  let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n  let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-Popover',\n    values: {\n      trigger: props.trigger || null,\n      placement,\n      isEntering,\n      isExiting\n    }\n  });\n\n  // Automatically render Popover with role=dialog except when isNonModal is true,\n  // or a dialog is already nested inside the popover.\n  let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n  let [isDialog, setDialog] = useState(false);\n  useLayoutEffect(() => {\n    if (ref.current) {\n      setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n    }\n  }, [ref, shouldBeDialog]);\n\n  // Focus the popover itself on mount, unless a child element is already focused.\n  useEffect(() => {\n    if (isDialog && ref.current && !ref.current.contains(document.activeElement)) {\n      focusSafely(ref.current);\n    }\n  }, [isDialog, ref]);\n\n  let style = {...popoverProps.style, ...renderProps.style};\n  let overlay = (\n    <div\n      {...mergeProps(filterDOMProps(props as any), popoverProps)}\n      {...renderProps}\n      role={isDialog ? 'dialog' : undefined}\n      tabIndex={isDialog ? -1 : undefined}\n      aria-label={props['aria-label']}\n      aria-labelledby={props['aria-labelledby']}\n      ref={ref}\n      slot={props.slot || undefined}\n      style={style}\n      dir={props.dir}\n      data-trigger={props.trigger}\n      data-placement={placement}\n      data-entering={isEntering || undefined}\n      data-exiting={isExiting || undefined}>\n      {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n      <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n        {renderProps.children}\n      </OverlayArrowContext.Provider>\n      <DismissButton onDismiss={state.close} />\n    </div>\n  );\n\n  // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n  if (!isSubPopover) {\n    return (\n      <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>\n        {!props.isNonModal && state.isOpen && <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />}\n        <div ref={containerRef} style={{display: 'contents'}}>\n          <PopoverGroupContext.Provider value={containerRef}>\n            {overlay}\n          </PopoverGroupContext.Provider>\n        </div>\n      </Overlay>\n    );\n  }\n\n  // Submenus/subdialogs are mounted into the root popover's container.\n  return (\n    <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n      {overlay}\n    </Overlay>\n  );\n}\n"],"names":[],"version":3,"file":"Popover.main.js.map"}

package/dist/Popover.mjs

@@ -1,10 +1,11 @@
-import {useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useEnterAnimation as $64fa3d84918910a7$export$6d3443f2c48bfc20, useExitAnimation as $64fa3d84918910a7$export$45fda7c47f93fd48, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
+import {useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
 import {OverlayArrowContext as $44f671af83e7d9e0$export$2de4954e8ae13b9f} from "./OverlayArrow.mjs";
 import {OverlayTriggerStateContext as $de32f1b87079253c$export$d2f961adcb0afbe} from "./Dialog.mjs";
-import {usePopover as $ehFet$usePopover, Overlay as $ehFet$Overlay, DismissButton as $ehFet$DismissButton} from "react-aria";
-import {useLayoutEffect as $ehFet$useLayoutEffect, mergeProps as $ehFet$mergeProps, filterDOMProps as $ehFet$filterDOMProps} from "@react-aria/utils";
+import {useLocale as $ehFet$useLocale, usePopover as $ehFet$usePopover, DismissButton as $ehFet$DismissButton, Overlay as $ehFet$Overlay} from "react-aria";
+import {useExitAnimation as $ehFet$useExitAnimation, useLayoutEffect as $ehFet$useLayoutEffect, useEnterAnimation as $ehFet$useEnterAnimation, mergeProps as $ehFet$mergeProps, filterDOMProps as $ehFet$filterDOMProps} from "@react-aria/utils";
+import {focusSafely as $ehFet$focusSafely} from "@react-aria/interactions";
 import {useOverlayTriggerState as $ehFet$useOverlayTriggerState} from "react-stately";
-import $ehFet$react, {createContext as $ehFet$createContext, useContext as $ehFet$useContext, forwardRef as $ehFet$forwardRef, useRef as $ehFet$useRef, useState as $ehFet$useState} from "react";
+import $ehFet$react, {createContext as $ehFet$createContext, forwardRef as $ehFet$forwardRef, useContext as $ehFet$useContext, useRef as $ehFet$useRef, useState as $ehFet$useState, useEffect as $ehFet$useEffect} from "react";
 import {useIsHidden as $ehFet$useIsHidden} from "@react-aria/collections";
 
 /*
@@ -25,14 +26,18 @@ import {useIsHidden as $ehFet$useIsHidden} from "@react-aria/collections";
 
 
 
+
 const $07b14b47974efb58$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $ehFet$createContext)(null);
-function $07b14b47974efb58$var$Popover(props, ref) {
+// Stores a ref for the portal container for a group of popovers (e.g. submenus).
+const $07b14b47974efb58$var$PopoverGroupContext = /*#__PURE__*/ (0, $ehFet$createContext)(null);
+const $07b14b47974efb58$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ehFet$forwardRef)(function Popover(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $07b14b47974efb58$export$9b9a0cd73afb7ca4);
     let contextState = (0, $ehFet$useContext)((0, $de32f1b87079253c$export$d2f961adcb0afbe));
     let localState = (0, $ehFet$useOverlayTriggerState)(props);
     let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-    let isExiting = (0, $64fa3d84918910a7$export$45fda7c47f93fd48)(ref, state.isOpen) || props.isExiting || false;
+    let isExiting = (0, $ehFet$useExitAnimation)(ref, state.isOpen) || props.isExiting || false;
     let isHidden = (0, $ehFet$useIsHidden)();
+    let { direction: direction } = (0, $ehFet$useLocale)();
     // If we are in a hidden tree, we still need to preserve our children.
     if (isHidden) {
         let children = props.children;
@@ -51,17 +56,18 @@ function $07b14b47974efb58$var$Popover(props, ref) {
         triggerRef: props.triggerRef,
         state: state,
         popoverRef: ref,
-        isExiting: isExiting
+        isExiting: isExiting,
+        dir: direction
     });
-}
-/**
- * A popover is an overlay element positioned relative to a trigger.
- */ const $07b14b47974efb58$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ehFet$forwardRef)($07b14b47974efb58$var$Popover);
+});
 function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting, UNSTABLE_portalContainer: UNSTABLE_portalContainer, ...props }) {
     // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)
     // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
     let arrowRef = (0, $ehFet$useRef)(null);
     let [arrowWidth, setArrowWidth] = (0, $ehFet$useState)(0);
+    let containerRef = (0, $ehFet$useRef)(null);
+    let groupCtx = (0, $ehFet$useContext)($07b14b47974efb58$var$PopoverGroupContext);
+    let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';
     (0, $ehFet$useLayoutEffect)(()=>{
         if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
     }, [
@@ -72,10 +78,13 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
     let { popoverProps: popoverProps, underlayProps: underlayProps, arrowProps: arrowProps, placement: placement } = (0, $ehFet$usePopover)({
         ...props,
         offset: (_props_offset = props.offset) !== null && _props_offset !== void 0 ? _props_offset : 8,
-        arrowSize: arrowWidth
+        arrowSize: arrowWidth,
+        // If this is a submenu/subdialog, use the root popover's container 
+        // to detect outside interaction and add aria-hidden.
+        groupRef: isSubPopover ? groupCtx : containerRef
     }, state);
     let ref = props.popoverRef;
-    let isEntering = (0, $64fa3d84918910a7$export$6d3443f2c48bfc20)(ref, !!placement) || props.isEntering || false;
+    let isEntering = (0, $ehFet$useEnterAnimation)(ref, !!placement) || props.isEntering || false;
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...props,
         defaultClassName: 'react-aria-Popover',
@@ -86,27 +95,38 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
             isExiting: isExiting
         }
     });
+    // Automatically render Popover with role=dialog except when isNonModal is true,
+    // or a dialog is already nested inside the popover.
+    let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
+    let [isDialog, setDialog] = (0, $ehFet$useState)(false);
+    (0, $ehFet$useLayoutEffect)(()=>{
+        if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
+    }, [
+        ref,
+        shouldBeDialog
+    ]);
+    // Focus the popover itself on mount, unless a child element is already focused.
+    (0, $ehFet$useEffect)(()=>{
+        if (isDialog && ref.current && !ref.current.contains(document.activeElement)) (0, $ehFet$focusSafely)(ref.current);
+    }, [
+        isDialog,
+        ref
+    ]);
     let style = {
         ...popoverProps.style,
         ...renderProps.style
     };
-    return /*#__PURE__*/ (0, $ehFet$react).createElement((0, $ehFet$Overlay), {
-        ...props,
-        isExiting: isExiting,
-        portalContainer: UNSTABLE_portalContainer
-    }, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
-        "data-testid": "underlay",
-        ...underlayProps,
-        style: {
-            position: 'fixed',
-            inset: 0
-        }
-    }), /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
+    let overlay = /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
         ...(0, $ehFet$mergeProps)((0, $ehFet$filterDOMProps)(props), popoverProps),
         ...renderProps,
+        role: isDialog ? 'dialog' : undefined,
+        tabIndex: isDialog ? -1 : undefined,
+        "aria-label": props['aria-label'],
+        "aria-labelledby": props['aria-labelledby'],
         ref: ref,
         slot: props.slot || undefined,
         style: style,
+        dir: props.dir,
         "data-trigger": props.trigger,
         "data-placement": placement,
         "data-entering": isEntering || undefined,
@@ -121,7 +141,36 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
         }
     }, renderProps.children), /*#__PURE__*/ (0, $ehFet$react).createElement((0, $ehFet$DismissButton), {
         onDismiss: state.close
-    })));
+    }));
+    // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
+    if (!isSubPopover) return /*#__PURE__*/ (0, $ehFet$react).createElement((0, $ehFet$Overlay), {
+        ...props,
+        shouldContainFocus: isDialog,
+        isExiting: isExiting,
+        portalContainer: UNSTABLE_portalContainer
+    }, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
+        "data-testid": "underlay",
+        ...underlayProps,
+        style: {
+            position: 'fixed',
+            inset: 0
+        }
+    }), /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
+        ref: containerRef,
+        style: {
+            display: 'contents'
+        }
+    }, /*#__PURE__*/ (0, $ehFet$react).createElement($07b14b47974efb58$var$PopoverGroupContext.Provider, {
+        value: containerRef
+    }, overlay)));
+    var _ref;
+    // Submenus/subdialogs are mounted into the root popover's container.
+    return /*#__PURE__*/ (0, $ehFet$react).createElement((0, $ehFet$Overlay), {
+        ...props,
+        shouldContainFocus: isDialog,
+        isExiting: isExiting,
+        portalContainer: (_ref = UNSTABLE_portalContainer !== null && UNSTABLE_portalContainer !== void 0 ? UNSTABLE_portalContainer : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.current) !== null && _ref !== void 0 ? _ref : undefined
+    }, overlay);
 }
 
 

package/dist/Popover.module.js

@@ -1,10 +1,11 @@
-import {useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useEnterAnimation as $64fa3d84918910a7$export$6d3443f2c48bfc20, useExitAnimation as $64fa3d84918910a7$export$45fda7c47f93fd48, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.module.js";
+import {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 {OverlayTriggerStateContext as $de32f1b87079253c$export$d2f961adcb0afbe} from "./Dialog.module.js";
-import {usePopover as $ehFet$usePopover, Overlay as $ehFet$Overlay, DismissButton as $ehFet$DismissButton} from "react-aria";
-import {useLayoutEffect as $ehFet$useLayoutEffect, mergeProps as $ehFet$mergeProps, filterDOMProps as $ehFet$filterDOMProps} from "@react-aria/utils";
+import {useLocale as $ehFet$useLocale, usePopover as $ehFet$usePopover, DismissButton as $ehFet$DismissButton, Overlay as $ehFet$Overlay} from "react-aria";
+import {useExitAnimation as $ehFet$useExitAnimation, useLayoutEffect as $ehFet$useLayoutEffect, useEnterAnimation as $ehFet$useEnterAnimation, mergeProps as $ehFet$mergeProps, filterDOMProps as $ehFet$filterDOMProps} from "@react-aria/utils";
+import {focusSafely as $ehFet$focusSafely} from "@react-aria/interactions";
 import {useOverlayTriggerState as $ehFet$useOverlayTriggerState} from "react-stately";
-import $ehFet$react, {createContext as $ehFet$createContext, useContext as $ehFet$useContext, forwardRef as $ehFet$forwardRef, useRef as $ehFet$useRef, useState as $ehFet$useState} from "react";
+import $ehFet$react, {createContext as $ehFet$createContext, forwardRef as $ehFet$forwardRef, useContext as $ehFet$useContext, useRef as $ehFet$useRef, useState as $ehFet$useState, useEffect as $ehFet$useEffect} from "react";
 import {useIsHidden as $ehFet$useIsHidden} from "@react-aria/collections";
 
 /*
@@ -25,14 +26,18 @@ import {useIsHidden as $ehFet$useIsHidden} from "@react-aria/collections";
 
 
 
+
 const $07b14b47974efb58$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $ehFet$createContext)(null);
-function $07b14b47974efb58$var$Popover(props, ref) {
+// Stores a ref for the portal container for a group of popovers (e.g. submenus).
+const $07b14b47974efb58$var$PopoverGroupContext = /*#__PURE__*/ (0, $ehFet$createContext)(null);
+const $07b14b47974efb58$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ehFet$forwardRef)(function Popover(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $07b14b47974efb58$export$9b9a0cd73afb7ca4);
     let contextState = (0, $ehFet$useContext)((0, $de32f1b87079253c$export$d2f961adcb0afbe));
     let localState = (0, $ehFet$useOverlayTriggerState)(props);
     let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-    let isExiting = (0, $64fa3d84918910a7$export$45fda7c47f93fd48)(ref, state.isOpen) || props.isExiting || false;
+    let isExiting = (0, $ehFet$useExitAnimation)(ref, state.isOpen) || props.isExiting || false;
     let isHidden = (0, $ehFet$useIsHidden)();
+    let { direction: direction } = (0, $ehFet$useLocale)();
     // If we are in a hidden tree, we still need to preserve our children.
     if (isHidden) {
         let children = props.children;
@@ -51,17 +56,18 @@ function $07b14b47974efb58$var$Popover(props, ref) {
         triggerRef: props.triggerRef,
         state: state,
         popoverRef: ref,
-        isExiting: isExiting
+        isExiting: isExiting,
+        dir: direction
     });
-}
-/**
- * A popover is an overlay element positioned relative to a trigger.
- */ const $07b14b47974efb58$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ehFet$forwardRef)($07b14b47974efb58$var$Popover);
+});
 function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting, UNSTABLE_portalContainer: UNSTABLE_portalContainer, ...props }) {
     // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)
     // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
     let arrowRef = (0, $ehFet$useRef)(null);
     let [arrowWidth, setArrowWidth] = (0, $ehFet$useState)(0);
+    let containerRef = (0, $ehFet$useRef)(null);
+    let groupCtx = (0, $ehFet$useContext)($07b14b47974efb58$var$PopoverGroupContext);
+    let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';
     (0, $ehFet$useLayoutEffect)(()=>{
         if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
     }, [
@@ -72,10 +78,13 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
     let { popoverProps: popoverProps, underlayProps: underlayProps, arrowProps: arrowProps, placement: placement } = (0, $ehFet$usePopover)({
         ...props,
         offset: (_props_offset = props.offset) !== null && _props_offset !== void 0 ? _props_offset : 8,
-        arrowSize: arrowWidth
+        arrowSize: arrowWidth,
+        // If this is a submenu/subdialog, use the root popover's container 
+        // to detect outside interaction and add aria-hidden.
+        groupRef: isSubPopover ? groupCtx : containerRef
     }, state);
     let ref = props.popoverRef;
-    let isEntering = (0, $64fa3d84918910a7$export$6d3443f2c48bfc20)(ref, !!placement) || props.isEntering || false;
+    let isEntering = (0, $ehFet$useEnterAnimation)(ref, !!placement) || props.isEntering || false;
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...props,
         defaultClassName: 'react-aria-Popover',
@@ -86,27 +95,38 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
             isExiting: isExiting
         }
     });
+    // Automatically render Popover with role=dialog except when isNonModal is true,
+    // or a dialog is already nested inside the popover.
+    let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
+    let [isDialog, setDialog] = (0, $ehFet$useState)(false);
+    (0, $ehFet$useLayoutEffect)(()=>{
+        if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
+    }, [
+        ref,
+        shouldBeDialog
+    ]);
+    // Focus the popover itself on mount, unless a child element is already focused.
+    (0, $ehFet$useEffect)(()=>{
+        if (isDialog && ref.current && !ref.current.contains(document.activeElement)) (0, $ehFet$focusSafely)(ref.current);
+    }, [
+        isDialog,
+        ref
+    ]);
     let style = {
         ...popoverProps.style,
         ...renderProps.style
     };
-    return /*#__PURE__*/ (0, $ehFet$react).createElement((0, $ehFet$Overlay), {
-        ...props,
-        isExiting: isExiting,
-        portalContainer: UNSTABLE_portalContainer
-    }, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
-        "data-testid": "underlay",
-        ...underlayProps,
-        style: {
-            position: 'fixed',
-            inset: 0
-        }
-    }), /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
+    let overlay = /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
         ...(0, $ehFet$mergeProps)((0, $ehFet$filterDOMProps)(props), popoverProps),
         ...renderProps,
+        role: isDialog ? 'dialog' : undefined,
+        tabIndex: isDialog ? -1 : undefined,
+        "aria-label": props['aria-label'],
+        "aria-labelledby": props['aria-labelledby'],
         ref: ref,
         slot: props.slot || undefined,
         style: style,
+        dir: props.dir,
         "data-trigger": props.trigger,
         "data-placement": placement,
         "data-entering": isEntering || undefined,
@@ -121,7 +141,36 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
         }
     }, renderProps.children), /*#__PURE__*/ (0, $ehFet$react).createElement((0, $ehFet$DismissButton), {
         onDismiss: state.close
-    })));
+    }));
+    // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
+    if (!isSubPopover) return /*#__PURE__*/ (0, $ehFet$react).createElement((0, $ehFet$Overlay), {
+        ...props,
+        shouldContainFocus: isDialog,
+        isExiting: isExiting,
+        portalContainer: UNSTABLE_portalContainer
+    }, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
+        "data-testid": "underlay",
+        ...underlayProps,
+        style: {
+            position: 'fixed',
+            inset: 0
+        }
+    }), /*#__PURE__*/ (0, $ehFet$react).createElement("div", {
+        ref: containerRef,
+        style: {
+            display: 'contents'
+        }
+    }, /*#__PURE__*/ (0, $ehFet$react).createElement($07b14b47974efb58$var$PopoverGroupContext.Provider, {
+        value: containerRef
+    }, overlay)));
+    var _ref;
+    // Submenus/subdialogs are mounted into the root popover's container.
+    return /*#__PURE__*/ (0, $ehFet$react).createElement((0, $ehFet$Overlay), {
+        ...props,
+        shouldContainFocus: isDialog,
+        isExiting: isExiting,
+        portalContainer: (_ref = UNSTABLE_portalContainer !== null && UNSTABLE_portalContainer !== void 0 ? UNSTABLE_portalContainer : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.current) !== null && _ref !== void 0 ? _ref : undefined
+    }, overlay);
 }
 
 

package/dist/Popover.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-aria-components/src/Popover.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 {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, usePopover} from 'react-aria';\nimport {ContextValue, RenderProps, SlotProps, useContextProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';\nimport {filterDOMProps, mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {forwardRefType, RefObject} from '@react-types/shared';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport React, {createContext, ForwardedRef, forwardRef, useContext, useRef, useState} from 'react';\nimport {useIsHidden} from '@react-aria/collections';\n\nexport interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps {\n  /**\n   * The name of the component that triggered the popover. This is reflected on the element\n   * as the `data-trigger` attribute, and can be used to provide specific\n   * styles for the popover depending on which element triggered it.\n   */\n  trigger?: string,\n  /**\n   * The ref for the element which the popover positions itself with respect to.\n   *\n   * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n   * this is set automatically. It is only required when used standalone.\n   */\n  triggerRef?: RefObject<Element | null>,\n  /**\n   * Whether the popover is currently performing an entry animation.\n   */\n  isEntering?: boolean,\n  /**\n   * Whether the popover 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   */\n  UNSTABLE_portalContainer?: Element,\n  /**\n   * The additional offset applied along the main axis between the element and its\n   * anchor element.\n   * @default 8\n   */\n  offset?: number\n}\n\nexport interface PopoverRenderProps {\n  /**\n   * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n   * @selector [data-trigger=\"...\"]\n   */\n  trigger: string | null,\n  /**\n   * The placement of the popover relative to the trigger.\n   * @selector [data-placement=\"left | right | top | bottom\"]\n   */\n  placement: PlacementAxis | null,\n  /**\n   * Whether the popover is currently entering. Use this to apply animations.\n   * @selector [data-entering]\n   */\n  isEntering: boolean,\n  /**\n   * Whether the popover is currently exiting. Use this to apply animations.\n   * @selector [data-exiting]\n   */\n  isExiting: boolean\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);\n\nfunction Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {\n  [props, ref] = useContextProps(props, ref, PopoverContext);\n  let contextState = useContext(OverlayTriggerStateContext);\n  let localState = useOverlayTriggerState(props);\n  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n  let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n  let isHidden = useIsHidden();\n\n  // If we are in a hidden tree, we still need to preserve our children.\n  if (isHidden) {\n    let children = props.children;\n    if (typeof children === 'function') {\n      children = children({\n        trigger: props.trigger || null,\n        placement: 'bottom',\n        isEntering: false,\n        isExiting: false,\n        defaultChildren: null\n      });\n    }\n\n    return <>{children}</>;\n  }\n\n  if (state && !state.isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <PopoverInner\n      {...props}\n      triggerRef={props.triggerRef!}\n      state={state}\n      popoverRef={ref}\n      isExiting={isExiting} />\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nconst _Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(Popover);\nexport {_Popover as Popover};\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n  state: OverlayTriggerState,\n  isEntering?: boolean,\n  isExiting: boolean,\n  UNSTABLE_portalContainer?: Element,\n  trigger?: string\n}\n\nfunction PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: PopoverInnerProps) {\n  // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\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 {popoverProps, underlayProps, arrowProps, placement} = usePopover({\n    ...props,\n    offset: props.offset ?? 8,\n    arrowSize: arrowWidth\n  }, state);\n\n  let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n  let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-Popover',\n    values: {\n      trigger: props.trigger || null,\n      placement,\n      isEntering,\n      isExiting\n    }\n  });\n\n  let style = {...popoverProps.style, ...renderProps.style};\n\n  return (\n    <Overlay {...props} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>\n      {!props.isNonModal && state.isOpen && <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />}\n      <div\n        {...mergeProps(filterDOMProps(props as any), popoverProps)}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        style={style}\n        data-trigger={props.trigger}\n        data-placement={placement}\n        data-entering={isEntering || undefined}\n        data-exiting={isExiting || undefined}>\n        {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n        <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n          {renderProps.children}\n        </OverlayArrowContext.Provider>\n        <DismissButton onDismiss={state.close} />\n      </div>\n    </Overlay>\n  );\n}\n"],"names":[],"version":3,"file":"Popover.module.js.map"}
+{"mappings":"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","sources":["packages/react-aria-components/src/Popover.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, forwardRefType, RefObject} from '@react-types/shared';\nimport {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, useLocale, usePopover} from 'react-aria';\nimport {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';\nimport {focusSafely} from '@react-aria/interactions';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport React, {createContext, ForwardedRef, forwardRef, useContext, useEffect, useRef, useState} from 'react';\nimport {useIsHidden} from '@react-aria/collections';\n\nexport interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps {\n  /**\n   * The name of the component that triggered the popover. This is reflected on the element\n   * as the `data-trigger` attribute, and can be used to provide specific\n   * styles for the popover depending on which element triggered it.\n   */\n  trigger?: string,\n  /**\n   * The ref for the element which the popover positions itself with respect to.\n   *\n   * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n   * this is set automatically. It is only required when used standalone.\n   */\n  triggerRef?: RefObject<Element | null>,\n  /**\n   * Whether the popover is currently performing an entry animation.\n   */\n  isEntering?: boolean,\n  /**\n   * Whether the popover 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   */\n  UNSTABLE_portalContainer?: Element,\n  /**\n   * The additional offset applied along the main axis between the element and its\n   * anchor element.\n   * @default 8\n   */\n  offset?: number\n}\n\nexport interface PopoverRenderProps {\n  /**\n   * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n   * @selector [data-trigger=\"...\"]\n   */\n  trigger: string | null,\n  /**\n   * The placement of the popover relative to the trigger.\n   * @selector [data-placement=\"left | right | top | bottom\"]\n   */\n  placement: PlacementAxis | null,\n  /**\n   * Whether the popover is currently entering. Use this to apply animations.\n   * @selector [data-entering]\n   */\n  isEntering: boolean,\n  /**\n   * Whether the popover is currently exiting. Use this to apply animations.\n   * @selector [data-exiting]\n   */\n  isExiting: boolean\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {\n  [props, ref] = useContextProps(props, ref, PopoverContext);\n  let contextState = useContext(OverlayTriggerStateContext);\n  let localState = useOverlayTriggerState(props);\n  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n  let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n  let isHidden = useIsHidden();\n  let {direction} = useLocale();\n\n  // If we are in a hidden tree, we still need to preserve our children.\n  if (isHidden) {\n    let children = props.children;\n    if (typeof children === 'function') {\n      children = children({\n        trigger: props.trigger || null,\n        placement: 'bottom',\n        isEntering: false,\n        isExiting: false,\n        defaultChildren: null\n      });\n    }\n\n    return <>{children}</>;\n  }\n\n  if (state && !state.isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <PopoverInner\n      {...props}\n      triggerRef={props.triggerRef!}\n      state={state}\n      popoverRef={ref}\n      isExiting={isExiting}\n      dir={direction} />\n  );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n  state: OverlayTriggerState,\n  isEntering?: boolean,\n  isExiting: boolean,\n  UNSTABLE_portalContainer?: Element,\n  trigger?: string,\n  dir?: 'ltr' | 'rtl'\n}\n\nfunction PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: PopoverInnerProps) {\n  // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n  // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n  let arrowRef = useRef<HTMLDivElement>(null);\n  let [arrowWidth, setArrowWidth] = useState(0);\n  let containerRef = useRef<HTMLDivElement | null>(null);\n  let groupCtx = useContext(PopoverGroupContext);\n  let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n  useLayoutEffect(() => {\n    if (arrowRef.current && state.isOpen) {\n      setArrowWidth(arrowRef.current.getBoundingClientRect().width);\n    }\n  }, [state.isOpen, arrowRef]);\n\n  let {popoverProps, underlayProps, arrowProps, placement} = usePopover({\n    ...props,\n    offset: props.offset ?? 8,\n    arrowSize: arrowWidth,\n    // If this is a submenu/subdialog, use the root popover's container \n    // to detect outside interaction and add aria-hidden.\n    groupRef: isSubPopover ? groupCtx! : containerRef\n  }, state);\n\n  let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n  let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-Popover',\n    values: {\n      trigger: props.trigger || null,\n      placement,\n      isEntering,\n      isExiting\n    }\n  });\n\n  // Automatically render Popover with role=dialog except when isNonModal is true,\n  // or a dialog is already nested inside the popover.\n  let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n  let [isDialog, setDialog] = useState(false);\n  useLayoutEffect(() => {\n    if (ref.current) {\n      setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n    }\n  }, [ref, shouldBeDialog]);\n\n  // Focus the popover itself on mount, unless a child element is already focused.\n  useEffect(() => {\n    if (isDialog && ref.current && !ref.current.contains(document.activeElement)) {\n      focusSafely(ref.current);\n    }\n  }, [isDialog, ref]);\n\n  let style = {...popoverProps.style, ...renderProps.style};\n  let overlay = (\n    <div\n      {...mergeProps(filterDOMProps(props as any), popoverProps)}\n      {...renderProps}\n      role={isDialog ? 'dialog' : undefined}\n      tabIndex={isDialog ? -1 : undefined}\n      aria-label={props['aria-label']}\n      aria-labelledby={props['aria-labelledby']}\n      ref={ref}\n      slot={props.slot || undefined}\n      style={style}\n      dir={props.dir}\n      data-trigger={props.trigger}\n      data-placement={placement}\n      data-entering={isEntering || undefined}\n      data-exiting={isExiting || undefined}>\n      {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n      <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n        {renderProps.children}\n      </OverlayArrowContext.Provider>\n      <DismissButton onDismiss={state.close} />\n    </div>\n  );\n\n  // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n  if (!isSubPopover) {\n    return (\n      <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>\n        {!props.isNonModal && state.isOpen && <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />}\n        <div ref={containerRef} style={{display: 'contents'}}>\n          <PopoverGroupContext.Provider value={containerRef}>\n            {overlay}\n          </PopoverGroupContext.Provider>\n        </div>\n      </Overlay>\n    );\n  }\n\n  // Submenus/subdialogs are mounted into the root popover's container.\n  return (\n    <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n      {overlay}\n    </Overlay>\n  );\n}\n"],"names":[],"version":3,"file":"Popover.module.js.map"}

package/dist/ProgressBar.main.js

@@ -31,11 +31,11 @@ $parcel$export(module.exports, "ProgressBar", () => $0d6436f6a1b0b001$export$c17
 
 
 const $0d6436f6a1b0b001$export$e9f3bf65a26ce129 = /*#__PURE__*/ (0, $av4IL$react.createContext)(null);
-function $0d6436f6a1b0b001$var$ProgressBar(props, ref) {
+const $0d6436f6a1b0b001$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $av4IL$react.forwardRef)(function ProgressBar(props, ref) {
     [props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $0d6436f6a1b0b001$export$e9f3bf65a26ce129);
     let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, isIndeterminate: isIndeterminate = false } = props;
     value = (0, $av4IL$reactstatelyutils.clamp)(value, minValue, maxValue);
-    let [labelRef, label] = (0, $c5ccf687772c0422$exports.useSlot)();
+    let [labelRef, label] = (0, $c5ccf687772c0422$exports.useSlot)(!props['aria-label'] && !props['aria-labelledby']);
     let { progressBarProps: progressBarProps, labelProps: labelProps } = (0, $av4IL$reactaria.useProgressBar)({
         ...props,
         label: label
@@ -63,11 +63,7 @@ function $0d6436f6a1b0b001$var$ProgressBar(props, ref) {
             elementType: 'span'
         }
     }, renderProps.children));
-}
-/**
- * Progress bars show either determinate or indeterminate progress of an operation
- * over time.
- */ const $0d6436f6a1b0b001$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $av4IL$react.forwardRef)($0d6436f6a1b0b001$var$ProgressBar);
+});
 
 
 //# sourceMappingURL=ProgressBar.main.js.map