@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/menu/ActionMenu.tsx

@@ -1,36 +1,45 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionMenu.tsx
+
+// Port of packages/@react-spectrum/s2/src/ActionMenu.tsx.
 import {
-  type JSX,
   createContext,
   createEffect,
   createSignal,
-  mergeProps,
-  onCleanup,
-  splitProps,
   useContext,
+  createTrackedEffect,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   MenuTrigger as HeadlessMenuTrigger,
-  MenuButton as HeadlessMenuButton,
+  Button as HeadlessButton,
   Menu as HeadlessMenu,
-  Popover as HeadlessPopover,
-  MenuTriggerContext,
   type MenuProps as HeadlessMenuProps,
-  type MenuTriggerRenderProps,
   type MenuTriggerProps as HeadlessMenuTriggerProps,
   type MenuRenderProps,
-  type PopoverRenderProps,
+  type ButtonRenderProps,
 } from "@proyecto-viviana/solidaria-components";
-import { createStringFormatter } from "@proyecto-viviana/solidaria";
+import { mergeProps, createStringFormatter } from "@proyecto-viviana/solidaria";
 import type { Key } from "@proyecto-viviana/solid-stately";
 import { centerBaseline } from "../icon/center-baseline";
 import MoreIcon from "../icon/s2wf-icons/MoreIcon";
 import { IconContext } from "../icon/spectrum-icon";
 import type { StyleString } from "../style";
-import { fontRelative, style } from "../style" with { type: "macro" };
+import { style } from "../style" with { type: "macro" };
 import { mergeStyles } from "../style/runtime";
 import { s2IntlStrings } from "../intl";
 import { HeaderContext, HeadingContext, Keyboard, Text, TextContext } from "../text";
-import { useTheme } from "../provider";
 import { pressScale } from "../pressScale";
 import {
   getSlottedContextProps,
@@ -47,12 +56,13 @@ import {
   menuFrame,
   menuItemDescription,
   menuItemLabel,
-  menuPopover,
   menuSectionHeader,
   menuSectionHeading,
 } from "./s2-menu-styles";
 import { MenuLinkOutIconContext, MenuSizeContext } from "./menu-context";
 import { MenuItem } from "./index";
+import { Popover } from "../popover";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type ActionMenuMenuSize = "S" | "M" | "L" | "XL";
 export type ActionMenuAlign = "start" | "end";
@@ -152,21 +162,9 @@ function actionMenuPlacement(
   }
 }
 
-function actionMenuPlacementAxis(
-  direction: ActionMenuDirection | undefined,
-): NonNullable<PopoverRenderProps["placement"]> {
-  if (direction === "start") {
-    return "left";
-  }
-  if (direction === "end") {
-    return "right";
-  }
-  return direction ?? "bottom";
-}
-
 function getDataAttributes(
   ...sources: Array<Record<string, unknown> | null | undefined>
-): JSX.HTMLAttributes<HTMLButtonElement> {
+): Record<string, unknown> {
   const attributes: Record<string, unknown> = {};
 
   for (const source of sources) {
@@ -181,7 +179,7 @@ function getDataAttributes(
     }
   }
 
-  return attributes as JSX.HTMLAttributes<HTMLButtonElement>;
+  return attributes;
 }
 
 function omitDataAttributes<T extends Record<string, unknown>>(source: T): T {
@@ -201,7 +199,7 @@ function omitDataAttributes<T extends Record<string, unknown>>(source: T): T {
  */
 export function ActionMenu<T extends object = object>(props: ActionMenuProps<T>): JSX.Element {
   const contextProps = getSlottedContextProps(useContext(ActionMenuContext), props.slot);
-  const merged = mergeProps(contextProps ?? {}, props);
+  const merged = mergeProps<ActionMenuProps<T>>(contextProps ?? {}, props);
   const [local, menuProps] = splitProps(merged, [
     "label",
     "isQuiet",
@@ -247,14 +245,47 @@ export function ActionMenu<T extends object = object>(props: ActionMenuProps<T>)
       "children" | "items"
     >;
   const [triggerElement, setTriggerElement] = createSignal<HTMLButtonElement | null>(null);
+  const [isMenuOpen, setMenuOpen] = createSignal(Boolean(local.defaultOpen ?? local.isOpen));
+  createTrackedEffect(() => {
+    if (local.isOpen !== undefined) {
+      setMenuOpen(Boolean(local.isOpen));
+    }
+  });
   let didAutoFocus = false;
-  createEffect(() => {
+  createTrackedEffect(() => {
     const trigger = triggerElement();
     if (!didAutoFocus && local.autoFocus && trigger) {
       didAutoFocus = true;
       trigger.focus();
     }
   });
+  createTrackedEffect(() => {
+    const trigger = triggerElement();
+    if (!trigger) {
+      return;
+    }
+
+    trigger.setAttribute("data-size", size());
+    if (local.isQuiet) {
+      trigger.setAttribute("data-quiet", "true");
+    } else {
+      trigger.removeAttribute("data-quiet");
+    }
+    trigger.setAttribute("data-action-menu-align", local.align ?? "start");
+    trigger.setAttribute("data-action-menu-direction", local.direction ?? "bottom");
+    if (local.shouldFlip === false) {
+      trigger.setAttribute("data-action-menu-should-flip", "false");
+    } else {
+      trigger.removeAttribute("data-action-menu-should-flip");
+    }
+    for (const [key, value] of Object.entries(triggerDataAttributes())) {
+      if (value == null || value === false) {
+        trigger.removeAttribute(key);
+      } else {
+        trigger.setAttribute(key, String(value));
+      }
+    }
+  });
   const iconContextValue = {
     slot: "icon",
     render: centerBaseline({
@@ -265,19 +296,19 @@ export function ActionMenu<T extends object = object>(props: ActionMenuProps<T>)
         }),
     }),
     styles: style({
-      size: fontRelative(20),
+      size: "1lh",
       marginStart: "--iconMargin",
       flexShrink: 0,
     }),
   };
-  const getButtonState = (renderProps: MenuTriggerRenderProps): S2ActionButtonRenderState => ({
-    isHovered: renderProps.isHovered || renderProps.isOpen,
+  const getButtonState = (renderProps: ButtonRenderProps): S2ActionButtonRenderState => ({
+    isHovered: renderProps.isHovered || isMenuOpen(),
     isPressed: renderProps.isPressed,
     isFocused: renderProps.isFocused,
     isFocusVisible: renderProps.isFocusVisible,
     isDisabled: renderProps.isDisabled,
   });
-  const getButtonClassName = (renderProps: MenuTriggerRenderProps) =>
+  const getButtonClassName = (renderProps: ButtonRenderProps) =>
     [
       local.UNSAFE_className,
       mergeStyles(
@@ -295,7 +326,7 @@ export function ActionMenu<T extends object = object>(props: ActionMenuProps<T>)
     ]
       .filter(Boolean)
       .join(" ");
-  const getButtonStyle = (renderProps: MenuTriggerRenderProps) =>
+  const getButtonStyle = (renderProps: ButtonRenderProps) =>
     pressScale(triggerElement, () => {
       return mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style) ?? {};
     })(renderProps);
@@ -364,8 +395,9 @@ export function ActionMenu<T extends object = object>(props: ActionMenuProps<T>)
     get defaultOpen() {
       return local.defaultOpen;
     },
-    get onOpenChange() {
-      return local.onOpenChange;
+    onOpenChange(isOpen: boolean) {
+      setMenuOpen(isOpen);
+      local.onOpenChange?.(isOpen);
     },
     get isDisabled() {
       return local.isDisabled;
@@ -374,14 +406,14 @@ export function ActionMenu<T extends object = object>(props: ActionMenuProps<T>)
 
   return (
     <HeadlessMenuTrigger {...triggerProps}>
-      <HeadlessMenuButton
+      <HeadlessButton
         {...triggerDataAttributes()}
         id={local.id}
         aria-label={triggerLabel()}
         aria-labelledby={local["aria-labelledby"]}
         aria-describedby={local["aria-describedby"]}
         aria-details={local["aria-details"]}
-        autofocus={local.autoFocus}
+        autoFocus={local.autoFocus}
         isDisabled={local.isDisabled}
         ref={(element) => {
           setTriggerElement(element);
@@ -395,10 +427,10 @@ export function ActionMenu<T extends object = object>(props: ActionMenuProps<T>)
         data-action-menu-direction={local.direction ?? "bottom"}
         data-action-menu-should-flip={local.shouldFlip === false ? "false" : undefined}
       >
-        <IconContext.Provider value={iconContextValue}>
+        <IconContext value={iconContextValue}>
           <MoreIcon />
-        </IconContext.Provider>
-      </HeadlessMenuButton>
+        </IconContext>
+      </HeadlessButton>
       <ActionMenuPopover
         menuProps={menuOnlyProps}
         items={items}
@@ -432,159 +464,33 @@ interface ActionMenuPopoverProps<T extends object> {
   shouldFlip: () => boolean | undefined;
 }
 
-const ACTION_MENU_POPOVER_TRANSITION_DURATION = 200;
-
 function ActionMenuPopover<T extends object>(props: ActionMenuPopoverProps<T>): JSX.Element {
-  const theme = useTheme();
-  const triggerContext = useContext(MenuTriggerContext);
-  const isOpen = () => triggerContext?.state.isOpen() ?? false;
-  const close = () => triggerContext?.state.close();
-  const open = () => triggerContext?.state.open();
-  const [isEntering, setIsEntering] = createSignal(false);
-  const [isExiting, setIsExiting] = createSignal(false);
-  let exitTimeout: ReturnType<typeof setTimeout> | undefined;
-  let enterFrame: number | undefined;
-  let wasOpen = isOpen();
-  let renderedOpen = wasOpen;
-  let shouldRestoreFocusAfterExit = false;
-  const shouldRender = () => {
-    const open = isOpen();
-    if (open) {
-      renderedOpen = true;
-    }
-    return open || renderedOpen || isExiting();
-  };
-  const isEnteringForRender = () => (isOpen() && !wasOpen ? true : isEntering());
   const usesStaticChildren = () => props.items() == null;
   const menuClass = (renderProps: MenuRenderProps) =>
     [s2Menu({ ...renderProps, size: props.menuSize() }), props.class].filter(Boolean).join(" ");
-  const restoreTriggerFocusAfterExit = () => {
-    const trigger = props.triggerRef();
-    if (!trigger) {
-      return;
-    }
-
-    const restore = () => trigger.focus();
-    if (typeof queueMicrotask === "function") {
-      queueMicrotask(restore);
-    } else {
-      Promise.resolve().then(restore);
-    }
-  };
-
-  createEffect(() => {
-    if (exitTimeout) {
-      clearTimeout(exitTimeout);
-      exitTimeout = undefined;
-    }
-
-    if (isOpen()) {
-      wasOpen = true;
-      renderedOpen = true;
-      shouldRestoreFocusAfterExit = false;
-      setIsExiting(false);
-      setIsEntering(true);
-
-      if (typeof document !== "undefined") {
-        const markKeyboardFocusRestore = (event: KeyboardEvent) => {
-          if (event.key === "Escape") {
-            shouldRestoreFocusAfterExit = true;
-          }
-        };
-        document.addEventListener("keydown", markKeyboardFocusRestore, true);
-        onCleanup(() => {
-          document.removeEventListener("keydown", markKeyboardFocusRestore, true);
-        });
-      }
-
-      if (typeof requestAnimationFrame !== "undefined") {
-        if (enterFrame != null) {
-          cancelAnimationFrame(enterFrame);
-        }
-        enterFrame = requestAnimationFrame(() => {
-          enterFrame = undefined;
-          setIsEntering(false);
-        });
-      } else {
-        setTimeout(() => setIsEntering(false), 0);
-      }
-      return;
-    }
-
-    setIsEntering(false);
-    if (!wasOpen && !renderedOpen) {
-      setIsExiting(false);
-      return;
-    }
-
-    wasOpen = false;
-    renderedOpen = false;
-    const activeElement = typeof document !== "undefined" ? document.activeElement : null;
-    shouldRestoreFocusAfterExit =
-      shouldRestoreFocusAfterExit ||
-      (typeof Element !== "undefined" &&
-        activeElement instanceof Element &&
-        activeElement.closest('[role="menu"]') != null);
-    setIsExiting(true);
-    exitTimeout = setTimeout(() => {
-      const shouldRestoreFocus = shouldRestoreFocusAfterExit;
-      shouldRestoreFocusAfterExit = false;
-      exitTimeout = undefined;
-      setIsExiting(false);
-      if (shouldRestoreFocus) {
-        restoreTriggerFocusAfterExit();
-      }
-    }, ACTION_MENU_POPOVER_TRANSITION_DURATION);
-  });
-
-  onCleanup(() => {
-    if (exitTimeout) {
-      clearTimeout(exitTimeout);
-    }
-    if (enterFrame != null && typeof cancelAnimationFrame !== "undefined") {
-      cancelAnimationFrame(enterFrame);
-    }
-  });
 
   return (
-    <HeadlessPopover
+    <Popover
+      hideArrow
+      padding="none"
       trigger="MenuTrigger"
       triggerRef={props.triggerRef}
-      isOpen={shouldRender()}
-      onOpenChange={(openState) => {
-        if (openState) {
-          open();
-        } else {
-          close();
-        }
-      }}
       placement={actionMenuPlacement(props.direction(), props.align()) as never}
       offset={8}
       shouldFlip={props.shouldFlip()}
       autoFocus={false}
-      isEntering={isEnteringForRender()}
-      isExiting={isExiting()}
-      class={(renderProps: PopoverRenderProps) =>
-        menuPopover({
-          ...renderProps,
-          placement: renderProps.placement ?? actionMenuPlacementAxis(props.direction()),
-          colorScheme: theme.colorScheme,
-        })
-      }
     >
       <div class={menuFrame}>
-        <MenuSizeContext.Provider value={props.menuSize()}>
-          <MenuLinkOutIconContext.Provider value={props.hideLinkOutIcon()}>
-            <HeaderContext.Provider
-              value={{ styles: () => menuSectionHeader({ size: props.menuSize() }) }}
-            >
-              <HeadingContext.Provider
+        <MenuSizeContext value={props.menuSize()}>
+          <MenuLinkOutIconContext value={props.hideLinkOutIcon()}>
+            <HeaderContext value={{ styles: () => menuSectionHeader({ size: props.menuSize() }) }}>
+              <HeadingContext
                 value={{
                   role: "presentation",
                   styles: menuSectionHeading,
                 }}
               >
-                <TextContext.Provider
+                <TextContext
                   value={{
                     slots: {
                       default: {
@@ -616,12 +522,12 @@ function ActionMenuPopover<T extends object>(props: ActionMenuPopoverProps<T>):
                   >
                     {usesStaticChildren() ? undefined : props.renderMenuItem}
                   </HeadlessMenu>
-                </TextContext.Provider>
-              </HeadingContext.Provider>
-            </HeaderContext.Provider>
-          </MenuLinkOutIconContext.Provider>
-        </MenuSizeContext.Provider>
+                </TextContext>
+              </HeadingContext>
+            </HeaderContext>
+          </MenuLinkOutIconContext>
+        </MenuSizeContext>
       </div>
-    </HeadlessPopover>
+    </Popover>
   );
 }

package/src/menu/ContextualHelpTrigger.tsx

@@ -1,9 +1,25 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * Copyright 2023 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/@adobe/react-spectrum/src/menu/ContextualHelpTrigger.tsx
+
+// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/menu/ContextualHelpTrigger.tsx.
+import type { JSX } from "@solidjs/web";
 import {
   ContextualHelpTrigger as HeadlessContextualHelpTrigger,
   type ContextualHelpTriggerProps as HeadlessContextualHelpTriggerProps,
 } from "@proyecto-viviana/solidaria-components";
 import { css } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 // The headless trigger hardcodes the class names on its internal button and
 // popover (`-trigger`/`-content`) and exposes no per-part class hook, so styling
@@ -11,30 +27,40 @@ import { css } from "../style" with { type: "macro" };
 // :focus-visible states the single-element style() macro can't express. Styling
 // therefore flows through the css() macro escape hatch, which ships real CSS in
 // the package bundle (same asset pipeline as style()) and supports this nesting.
-// Values mirror the S2 neutral palette (fixed light-dark pairs, scheme-aware via
-// the Provider's color-scheme).
+//
+// Every value is a register token from viviana-tokens.css. It used to be sixteen
+// `light-dark()` hex literals mirroring the S2 neutral palette — an entire second
+// palette living in one component, which is precisely how a register drifts: nothing
+// here moved when the tokens were re-cut, so this popover kept painting the old grey
+// chrome next to Popover's glass. The tokens are already scheme-aware (the file
+// redeclares them under the dark selector), so the `light-dark()` wrappers go too.
+//
+// Ink is named as `--slate-900` rather than as the `--text-primary` role it backs:
+// `guard:invented-utilities` matches `text-primary` as one of the pre-S2 Tailwind
+// utilities it exists to keep out, and cannot tell the register's real token from that
+// dead vocabulary. Same value, both schemes.
 const triggerStyles = css(`
   & .solidaria-ContextualHelpTrigger-trigger {
     display: flex;
     align-items: center;
-    padding-block: 8px;
-    padding-inline: 16px;
+    padding-block: 6px;
+    padding-inline: 10px;
     cursor: pointer;
     background: transparent;
     border: 0;
-    color: light-dark(#222, #e6e6e6);
-    border-radius: 8px;
+    color: var(--slate-900);
+    border-radius: 6px;
     outline: none;
   }
   & .solidaria-ContextualHelpTrigger-trigger:hover {
-    background: light-dark(#0000000d, #ffffff12);
+    background: var(--row-hover);
   }
   & .solidaria-ContextualHelpTrigger-trigger:focus-visible {
-    outline: 2px solid light-dark(#4b75ff, #4069fd);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
   & .solidaria-ContextualHelpTrigger-trigger[data-unavailable] {
-    color: light-dark(#8f8f8f, #7c7c7c);
+    color: var(--text-tertiary);
   }
   & .solidaria-ContextualHelpTrigger-trigger[data-disabled] {
     opacity: 0.5;
@@ -44,11 +70,12 @@ const triggerStyles = css(`
     margin-top: 4px;
     padding: 16px;
     min-width: 200px;
-    background: light-dark(#fff, #222);
-    border: 1px solid light-dark(#d5d5d5, #3d3d3d);
+    background: var(--surface-float);
+    backdrop-filter: var(--blur-clear);
+    border: 1px solid var(--track);
     border-radius: 8px;
-    box-shadow: 0 4px 12px light-dark(#00000014, #0000003d), 0 2px 6px light-dark(#0000000f, #00000030);
-    color: light-dark(#222, #e6e6e6);
+    box-shadow: var(--shadow-float), var(--edge-glass);
+    color: var(--slate-900);
     outline: none;
   }
 `);
@@ -69,23 +96,41 @@ export interface ContextualHelpTriggerProps extends Omit<
   children?: [JSX.Element, JSX.Element];
 }
 
-const helpIcon = (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-    <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
-    <text x="8" y="12" text-anchor="middle" fill="currentColor" font-size="10" font-weight="bold">
-      ?
-    </text>
-  </svg>
-);
+// Each icon is a component, never a module-scope `const helpIcon = <svg…>`.
+// JSX at module scope is evaluated when the module is evaluated: compiled for
+// the server that runs `ssrHydrationKey()` with no owner, which throws
+// "getNextContextId cannot be used under non-hydrating context" on any server
+// that has already rendered once, taking the whole menu module — and every page
+// importing anything from it — down with it (#545). Compiled for the browser it
+// is one DOM node shared by every trigger on the page, so a second trigger
+// steals the first one's icon. Upstream has the same shape: S2's `Menu.tsx`
+// renders `<InfoCircleIcon …/>` inside `UnavailableIconWrapper`, not at module
+// scope. `guard:idiomatic-solid` keeps it that way.
+function HelpIcon(): JSX.Element {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
+      <path
+        d="M6.2 6.15c0-1.25 1.05-2.15 1.95-2.15.95 0 1.95.85 1.95 2.05 0 1.15-1.05 1.55-1.55 2.05-.4.4-.55.85-.55 1.45"
+        stroke="currentColor"
+        stroke-width="1.4"
+        stroke-linecap="round"
+        fill="none"
+      />
+      <circle cx="8" cy="12.15" r="0.85" fill="currentColor" />
+    </svg>
+  );
+}
 
-const infoIcon = (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-    <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
-    <text x="8" y="12" text-anchor="middle" fill="currentColor" font-size="10" font-weight="bold">
-      i
-    </text>
-  </svg>
-);
+function InfoIcon(): JSX.Element {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
+      <circle cx="8" cy="5.15" r="1" fill="currentColor" />
+      <rect x="7.25" y="7.15" width="1.5" height="5" rx="0.6" fill="currentColor" />
+    </svg>
+  );
+}
 
 /**
  * A button that opens contextual help in a popover.
@@ -113,7 +158,7 @@ export function ContextualHelpTrigger(props: ContextualHelpTriggerProps): JSX.El
 
   const children = (): [JSX.Element, JSX.Element] => {
     if (local.children) return local.children;
-    const icon = local.variant === "info" ? infoIcon : helpIcon;
+    const icon = local.variant === "info" ? <InfoIcon /> : <HelpIcon />;
     const trigger = (
       <span style={{ display: "inline-flex", "align-items": "center", gap: "4px" }}>
         {icon}
@@ -134,7 +179,9 @@ export function ContextualHelpTrigger(props: ContextualHelpTriggerProps): JSX.El
   return (
     <HeadlessContextualHelpTrigger
       {...headlessProps}
-      aria-label={local["aria-label"] ?? local.title ?? "Contextual help"}
+      aria-label={
+        local["aria-label"] ?? (local.children || local.title ? undefined : "Contextual help")
+      }
       class={[triggerStyles, local.class].filter(Boolean).join(" ")}
     >
       {children()}

package/src/menu/SubmenuTrigger.tsx

@@ -1,4 +1,19 @@
-import { type JSX } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Menu.tsx
+
+// Port of packages/@react-spectrum/s2/src/Menu.tsx.
+import type { JSX } from "@solidjs/web";
 import {
   SubmenuTrigger as HeadlessSubmenuTrigger,
   type SubmenuTriggerProps as HeadlessSubmenuTriggerProps,