@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/src/overlays/createInteractOutside.ts

@@ -1,10 +1,26 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useInteractOutside.ts
+
 /**
  * Detects interactions outside a given element.
  * Based on @react-aria/interactions useInteractOutside.
  */
 
-import { createEffect, onCleanup } from "solid-js";
+import { createEffect } from "solid-js";
 import { getOwnerDocument } from "../utils";
+import { followRef } from "../utils/refs";
+import { access, type MaybeAccessor } from "../utils/reactivity";
 
 export interface InteractOutsideProps {
   /** Reference to the element to detect interactions outside of. */
@@ -14,7 +30,7 @@ export interface InteractOutsideProps {
   /** Handler called when an interaction outside the element starts. */
   onInteractOutsideStart?: (e: PointerEvent) => void;
   /** Whether the interact outside events should be disabled. */
-  isDisabled?: boolean;
+  isDisabled?: MaybeAccessor<boolean>;
 }
 
 /**
@@ -24,56 +40,67 @@ export interface InteractOutsideProps {
 export function createInteractOutside(props: InteractOutsideProps): void {
   let isPointerDown = false;
   let ignoreEmulatedMouseEvents = false;
+  const overlayEl = followRef(props.ref);
+
+  createEffect(
+    () => {
+      const disabled = access(props.isDisabled);
+      // Track the followed ref so we re-bind after a let-ref resolves. Do not
+      // skip document listeners while it is still null — event-time `ref()`
+      // (and followRef after commit) is what `isValidEvent` needs.
+      const element = overlayEl() ?? null;
+      return { disabled, element };
+    },
+    ({ disabled, element }) => {
+      const { onInteractOutside, onInteractOutsideStart } = props;
+
+      if (disabled) {
+        return;
+      }
 
-  createEffect(() => {
-    const { ref, onInteractOutside, onInteractOutsideStart, isDisabled } = props;
-
-    if (isDisabled) {
-      return;
-    }
-
-    const element = ref();
-    const documentObject = getOwnerDocument(element);
+      const documentObject = getOwnerDocument(element);
+      const currentRef = () => overlayEl() ?? props.ref() ?? null;
 
-    const onPointerDown = (e: PointerEvent) => {
-      if (onInteractOutside && isValidEvent(e, ref)) {
-        if (onInteractOutsideStart) {
-          onInteractOutsideStart(e);
+      const onPointerDown = (e: PointerEvent) => {
+        if (onInteractOutside && isValidEvent(e, currentRef)) {
+          if (onInteractOutsideStart) {
+            onInteractOutsideStart(e);
+          }
+          isPointerDown = true;
         }
-        isPointerDown = true;
-      }
-    };
-
-    const triggerInteractOutside = (e: PointerEvent) => {
-      if (onInteractOutside) {
-        onInteractOutside(e);
-      }
-    };
+      };
 
-    // Use pointer events if available. Otherwise, fall back to mouse and touch events.
-    if (typeof PointerEvent !== "undefined") {
-      const onClick = (e: PointerEvent) => {
-        if (isPointerDown && isValidEvent(e, ref)) {
-          triggerInteractOutside(e);
+      const triggerInteractOutside = (e: PointerEvent) => {
+        if (onInteractOutside) {
+          onInteractOutside(e);
         }
-        isPointerDown = false;
       };
 
-      // Use click instead of pointerup to avoid Android Chrome issue
-      // https://issues.chromium.org/issues/40732224
-      documentObject.addEventListener("pointerdown", onPointerDown as EventListener, true);
-      documentObject.addEventListener("click", onClick as EventListener, true);
+      // Use pointer events if available. Otherwise, fall back to mouse and touch events.
+      if (typeof PointerEvent !== "undefined") {
+        const onClick = (e: PointerEvent) => {
+          if (isPointerDown && isValidEvent(e, currentRef)) {
+            triggerInteractOutside(e);
+          }
+          isPointerDown = false;
+        };
+
+        // Use click instead of pointerup to avoid Android Chrome issue
+        // https://issues.chromium.org/issues/40732224
+        documentObject.addEventListener("pointerdown", onPointerDown as EventListener, true);
+        documentObject.addEventListener("click", onClick as EventListener, true);
+
+        return () => {
+          documentObject.removeEventListener("pointerdown", onPointerDown as EventListener, true);
+          documentObject.removeEventListener("click", onClick as EventListener, true);
+        };
+      }
 
-      onCleanup(() => {
-        documentObject.removeEventListener("pointerdown", onPointerDown as EventListener, true);
-        documentObject.removeEventListener("click", onClick as EventListener, true);
-      });
-    } else {
       // Fallback for environments without PointerEvent (mainly tests)
       const onMouseUp = (e: MouseEvent) => {
         if (ignoreEmulatedMouseEvents) {
           ignoreEmulatedMouseEvents = false;
-        } else if (isPointerDown && isValidEvent(e as unknown as PointerEvent, ref)) {
+        } else if (isPointerDown && isValidEvent(e as unknown as PointerEvent, currentRef)) {
           triggerInteractOutside(e as unknown as PointerEvent);
         }
         isPointerDown = false;
@@ -81,14 +108,14 @@ export function createInteractOutside(props: InteractOutsideProps): void {
 
       const onTouchEnd = (e: TouchEvent) => {
         ignoreEmulatedMouseEvents = true;
-        if (isPointerDown && isValidEvent(e as unknown as PointerEvent, ref)) {
+        if (isPointerDown && isValidEvent(e as unknown as PointerEvent, currentRef)) {
           triggerInteractOutside(e as unknown as PointerEvent);
         }
         isPointerDown = false;
       };
 
       const onMouseDown = (e: MouseEvent) => {
-        if (onInteractOutside && isValidEvent(e as unknown as PointerEvent, ref)) {
+        if (onInteractOutside && isValidEvent(e as unknown as PointerEvent, currentRef)) {
           if (onInteractOutsideStart) {
             onInteractOutsideStart(e as unknown as PointerEvent);
           }
@@ -97,7 +124,7 @@ export function createInteractOutside(props: InteractOutsideProps): void {
       };
 
       const onTouchStart = (e: TouchEvent) => {
-        if (onInteractOutside && isValidEvent(e as unknown as PointerEvent, ref)) {
+        if (onInteractOutside && isValidEvent(e as unknown as PointerEvent, currentRef)) {
           if (onInteractOutsideStart) {
             onInteractOutsideStart(e as unknown as PointerEvent);
           }
@@ -110,14 +137,14 @@ export function createInteractOutside(props: InteractOutsideProps): void {
       documentObject.addEventListener("touchstart", onTouchStart as EventListener, true);
       documentObject.addEventListener("touchend", onTouchEnd as EventListener, true);
 
-      onCleanup(() => {
+      return () => {
         documentObject.removeEventListener("mousedown", onMouseDown as EventListener, true);
         documentObject.removeEventListener("mouseup", onMouseUp as EventListener, true);
         documentObject.removeEventListener("touchstart", onTouchStart as EventListener, true);
         documentObject.removeEventListener("touchend", onTouchEnd as EventListener, true);
-      });
-    }
-  });
+      };
+    },
+  );
 }
 
 function isValidEvent(

package/src/overlays/createModal.tsx

@@ -1,20 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/overlays/useModal.tsx
+
 /**
  * Modal context and hooks for managing modal accessibility.
  * Based on @react-aria/overlays useModal.
  */
 
-import {
-  createContext,
-  createSignal,
-  useContext,
-  createEffect,
-  onCleanup,
-  type JSX,
-  type Accessor,
-  type ParentComponent,
-} from "solid-js";
-import { Portal } from "solid-js/web";
-import { isServer } from "solid-js/web";
+import { useContextOptional } from "../utils/owner";
+import { createContext, createSignal, createEffect, createTrackedEffect } from "solid-js";
+import type { Accessor, ParentComponent } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { Portal } from "@solidjs/web";
+import { isServer } from "@solidjs/web";
 
 export interface ModalProviderProps {
   children: JSX.Element;
@@ -49,11 +57,11 @@ const PortalContext = createContext<PortalProviderContextValue>({});
  * like portals, which can cause the component tree and the DOM tree to differ significantly in structure.
  */
 export const ModalProvider: ParentComponent<ModalProviderProps> = (props) => {
-  const parent = useContext(ModalContext);
+  const parent = useContextOptional(ModalContext);
   const [modalCount, setModalCount] = createSignal(0);
 
   const context: ModalContext = {
-    parent,
+    parent: parent ?? null,
     modalCount,
     addModal() {
       setModalCount((count) => count + 1);
@@ -69,7 +77,7 @@ export const ModalProvider: ParentComponent<ModalProviderProps> = (props) => {
     },
   };
 
-  return <ModalContext.Provider value={context}>{props.children}</ModalContext.Provider>;
+  return <ModalContext value={context}>{props.children}</ModalContext>;
 };
 
 /**
@@ -79,14 +87,14 @@ export const UNSAFE_PortalProvider: ParentComponent<PortalProviderProps> = (prop
   const parent = useUNSAFE_PortalContext();
 
   return (
-    <PortalContext.Provider
+    <PortalContext
       value={{
         getContainer:
           props.getContainer === null ? undefined : (props.getContainer ?? parent.getContainer),
       }}
     >
       {props.children}
-    </PortalContext.Provider>
+    </PortalContext>
   );
 };
 
@@ -94,13 +102,13 @@ export const UNSAFE_PortalProvider: ParentComponent<PortalProviderProps> = (prop
  * Returns the portal container configuration inherited from the nearest provider.
  */
 export function useUNSAFE_PortalContext(): PortalProviderContextValue {
-  return useContext(PortalContext) ?? {};
+  return useContextOptional(PortalContext) ?? {};
 }
 
 export interface ModalProviderAria {
   /** Props to be spread on the container element. */
   modalProviderProps: {
-    "aria-hidden"?: true;
+    "aria-hidden"?: "true";
   };
 }
 
@@ -109,11 +117,11 @@ export interface ModalProviderAria {
  * modals are open.
  */
 export function useModalProvider(): ModalProviderAria {
-  const context = useContext(ModalContext);
+  const context = useContextOptional(ModalContext);
   return {
     modalProviderProps: {
       get "aria-hidden"() {
-        return context && context.modalCount() > 0 ? true : undefined;
+        return context && context.modalCount() > 0 ? "true" : undefined;
       },
     },
   };
@@ -125,7 +133,7 @@ export function useModalProvider(): ModalProviderAria {
 const OverlayContainerDOM: ParentComponent<ModalProviderProps> = (props) => {
   const { modalProviderProps } = useModalProvider();
   return (
-    <div data-overlay-container {...modalProviderProps}>
+    <div data-overlay-container="true" {...modalProviderProps}>
       {props.children}
     </div>
   );
@@ -172,8 +180,9 @@ export const OverlayContainer: ParentComponent<OverlayContainerProps> = (props)
   const portalContainer = () =>
     props.portalContainer ?? portalContext.getContainer?.() ?? document.body;
 
-  createEffect(() => {
-    const container = portalContainer();
+  // Compiler-generated prop getters may allocate a memo on first read.
+  // Read in the owned compute phase, not a child-forbidden tracked callback.
+  createEffect(portalContainer, (container) => {
     if (container?.closest("[data-overlay-container]")) {
       throw new Error(
         "An OverlayContainer must not be inside another container. Please change the portalContainer prop.",
@@ -208,13 +217,15 @@ export interface ModalAria {
  */
 export function createModal(options?: AriaModalOptions): ModalAria {
   // Add aria-hidden to all parent providers on mount, and restore on unmount.
-  const context = useContext(ModalContext);
+  const context = useContextOptional(ModalContext);
 
   if (!context) {
     throw new Error("Modal is not contained within a provider");
   }
 
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     if (options?.isDisabled || !context.parent) {
       return;
     }
@@ -223,11 +234,15 @@ export function createModal(options?: AriaModalOptions): ModalAria {
     // want to trigger aria-hidden on its parents not on the modal provider itself.
     context.parent.addModal();
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       if (context.parent) {
         context.parent.removeModal();
       }
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   return {

package/src/overlays/createOverlay.ts

@@ -1,12 +1,30 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/overlays/useOverlay.ts
+
 /**
  * Provides the behavior for overlays such as dialogs, popovers, and menus.
  * Based on @react-aria/overlays useOverlay.
  */
 
-import { createEffect, onCleanup, type JSX } from "solid-js";
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createInteractOutside } from "./createInteractOutside";
 import { createFocusWithin } from "../interactions/createFocusWithin";
-import { getOwnerDocument, nodeContains } from "../utils";
+// Direct import, like upstream: `isElementInChildOfActiveScope` is private to
+// the focus module and not part of the package barrel.
+import { isElementInChildOfActiveScope } from "../focus/FocusScope";
+import { getOwnerDocument, nodeContains, followRef } from "../utils";
 
 export interface AriaOverlayProps {
   /** Whether the overlay is currently open. */
@@ -50,6 +68,7 @@ const visibleOverlays: Array<() => Element | null> = [];
  * or optionally, on blur. Only the top-most overlay will close at once.
  */
 export function createOverlay(props: AriaOverlayProps, ref: () => Element | null): OverlayAria {
+  const overlayEl = followRef(ref);
   const onClose = () => props.onClose;
   const shouldCloseOnBlur = () => props.shouldCloseOnBlur;
   const isOpen = () => props.isOpen ?? false;
@@ -57,19 +76,27 @@ export function createOverlay(props: AriaOverlayProps, ref: () => Element | null
   const isKeyboardDismissDisabled = () => props.isKeyboardDismissDisabled ?? false;
   const shouldCloseOnInteractOutside = () => props.shouldCloseOnInteractOutside;
 
-  // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
-  createEffect(() => {
-    if (isOpen() && !visibleOverlays.includes(ref)) {
-      visibleOverlays.push(ref);
-    }
+  // The overlay that was topmost when the current outside interaction started.
+  // Upstream keeps it in a ref so one click that closes a menu does not also
+  // close the dialog the menu was opened from.
+  let lastVisibleOverlay: (() => Element | null) | undefined;
 
-    onCleanup(() => {
-      const index = visibleOverlays.indexOf(ref);
-      if (index >= 0) {
-        visibleOverlays.splice(index, 1);
+  // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
+  createEffect(
+    () => isOpen(),
+    (open) => {
+      if (!open) return;
+      if (!visibleOverlays.includes(ref)) {
+        visibleOverlays.push(ref);
       }
-    });
-  });
+      return () => {
+        const index = visibleOverlays.indexOf(ref);
+        if (index >= 0) {
+          visibleOverlays.splice(index, 1);
+        }
+      };
+    },
+  );
 
   // Only hide the overlay when it is the topmost visible overlay in the stack
   const onHide = () => {
@@ -79,72 +106,83 @@ export function createOverlay(props: AriaOverlayProps, ref: () => Element | null
     }
   };
 
+  const allowsCloseOnOutside = (target: EventTarget | null): boolean => {
+    const filter = shouldCloseOnInteractOutside();
+    if (typeof filter === "function") {
+      return !target || !(target instanceof Element) ? true : filter(target);
+    }
+    return true;
+  };
+
   const onInteractOutsideStart = (e: PointerEvent) => {
-    const shouldClose = shouldCloseOnInteractOutside();
-    if (!shouldClose || shouldClose(e.target as Element)) {
-      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+    const topMostOverlay = visibleOverlays[visibleOverlays.length - 1];
+    lastVisibleOverlay = topMostOverlay;
+    if (allowsCloseOnOutside(e.target)) {
+      if (topMostOverlay === ref) {
+        // Only propagation. Preventing the default too would stop the click
+        // from focusing or activating whatever it landed on.
         e.stopPropagation();
-        e.preventDefault();
       }
     }
   };
 
   const onInteractOutside = (e: PointerEvent) => {
-    const shouldClose = shouldCloseOnInteractOutside();
-    if (!shouldClose || shouldClose(e.target as Element)) {
+    if (allowsCloseOnOutside(e.target)) {
       if (visibleOverlays[visibleOverlays.length - 1] === ref) {
         e.stopPropagation();
-        e.preventDefault();
       }
-      onHide();
+      if (lastVisibleOverlay === ref) {
+        onHide();
+      }
     }
+    lastVisibleOverlay = undefined;
   };
 
   // Handle clicking outside the overlay to close it.
-  createEffect(() => {
-    if (!isDismissable() || !isOpen()) {
-      return;
-    }
-
-    createInteractOutside({
-      ref,
-      onInteractOutside,
-      onInteractOutsideStart,
-      isDisabled: false,
-    });
+  createInteractOutside({
+    ref: () => overlayEl() ?? null,
+    onInteractOutside,
+    onInteractOutsideStart,
+    get isDisabled() {
+      return !isDismissable() || !isOpen();
+    },
   });
 
-  createEffect(() => {
-    if (!isOpen() || !shouldCloseOnBlur()) {
-      return;
-    }
-
-    const overlay = ref();
-    if (!overlay) {
-      return;
-    }
-
-    const ownerDocument = getOwnerDocument(overlay);
-    const onFocusIn = (event: FocusEvent) => {
-      if (!isOpen()) {
-        return;
-      }
-
-      const currentOverlay = ref();
-      const target = event.target as Element | null;
-      if (!currentOverlay || !target || nodeContains(currentOverlay, target)) {
-        return;
-      }
-
-      const shouldClose = shouldCloseOnInteractOutside();
-      if (!shouldClose || shouldClose(target)) {
-        onHide();
-      }
-    };
-
-    ownerDocument.addEventListener("focusin", onFocusIn, true);
-    onCleanup(() => ownerDocument.removeEventListener("focusin", onFocusIn, true));
-  });
+  // Not upstream: `useOverlay` closes on blur from `onBlurWithin` alone. Our
+  // `createFocusWithin` returns `onFocus`/`onBlur`, which in Solid bind the
+  // non-bubbling native events, so focus in a descendant never reaches it and
+  // an overlay whose focus lives in a child never blurs. #557 fixes that and
+  // removes this listener; until then it is the only thing closing a popover
+  // when focus leaves it.
+  createEffect(
+    () => {
+      if (!isOpen() || !shouldCloseOnBlur()) return null;
+      return overlayEl() ?? null;
+    },
+    (overlay) => {
+      if (!overlay) return;
+
+      const ownerDocument = getOwnerDocument(overlay);
+      const onFocusIn = (event: FocusEvent) => {
+        if (!isOpen()) {
+          return;
+        }
+
+        const currentOverlay = overlayEl();
+        const target = event.target as Element | null;
+        if (!currentOverlay || !target || nodeContains(currentOverlay, target)) {
+          return;
+        }
+
+        if (allowsCloseOnOutside(target)) {
+          onHide();
+        }
+      };
+
+      ownerDocument.addEventListener("focusin", onFocusIn, true);
+      return () => ownerDocument.removeEventListener("focusin", onFocusIn, true);
+    },
+  );
 
   // Handle focus within for blur detection
   const { focusWithinProps } = createFocusWithin({
@@ -155,12 +193,15 @@ export function createOverlay(props: AriaOverlayProps, ref: () => Element | null
       // Do not close if relatedTarget is null, which means focus is lost to the body.
       // That can happen when switching tabs, or due to a browser bug.
       // Clicking on the body to close the overlay should already be handled by createInteractOutside.
-      if (!e.relatedTarget) {
+      //
+      // If focus is moving into a child focus scope (e.g. a menu inside a
+      // dialog), do not close the outer overlay. Blur runs before focus, so the
+      // active scope is still the outer overlay's.
+      if (!e.relatedTarget || isElementInChildOfActiveScope(e.relatedTarget as Element)) {
         return;
       }
 
-      const shouldClose = shouldCloseOnInteractOutside();
-      if (!shouldClose || shouldClose(e.relatedTarget as Element)) {
+      if (allowsCloseOnOutside(e.relatedTarget)) {
         onClose()?.();
       }
     },

package/src/overlays/createOverlayTrigger.ts

@@ -1,9 +1,23 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/overlays/useOverlayTrigger.ts
+
 /**
  * Handles the behavior and accessibility for an overlay trigger.
  * Based on @react-aria/overlays useOverlayTrigger.
  */
 
-import { createEffect } from "solid-js";
+import { createTrackedEffect } from "solid-js";
 import type { OverlayTriggerState } from "@proyecto-viviana/solid-stately";
 import { createId } from "../ssr";
 import { access, type MaybeAccessor } from "../utils";
@@ -16,8 +30,8 @@ export interface OverlayTriggerProps {
 export interface OverlayTriggerAria {
   /** Props for the trigger element. */
   triggerProps: {
-    "aria-haspopup"?: boolean | "listbox";
-    "aria-expanded": boolean;
+    "aria-haspopup"?: boolean | "true" | "listbox";
+    "aria-expanded": boolean | "true" | "false";
     "aria-controls"?: string;
     onPress: () => void;
   };
@@ -44,7 +58,7 @@ export function createOverlayTrigger(
 
   // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll
   // without forcing users to pass onClose.
-  createEffect(() => {
+  createTrackedEffect(() => {
     const element = ref?.();
     if (element) {
       onCloseMap.set(element, state.close);
@@ -68,10 +82,11 @@ export function createOverlayTrigger(
   return {
     triggerProps: {
       get "aria-haspopup"() {
-        return getAriaHasPopup();
+        const value = getAriaHasPopup();
+        return value === true ? "true" : value;
       },
       get "aria-expanded"() {
-        return state.isOpen();
+        return state.isOpen() ? "true" : "false";
       },
       get "aria-controls"() {
         return state.isOpen() ? overlayId : undefined;