@rotki/ui-library 3.1.6 → 3.2.0

package/dist/components/overlays/menu/RuiMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenu.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type FormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\n/**\n * What the activator slot binds onto its trigger. The ARIA keys belong on an\n * element that can carry them (a button, link or combobox), never on a plain\n * `div`; an activator that sets its own ARIA takes `activatorHandlers(attrs)`.\n */\ninterface MenuAttrs extends BaseMenuAttrs {\n  'onClick'?: () => void;\n  'aria-haspopup': RuiMenuRole | 'true';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n  /** Overrides applied to the hint and messages under the activator. */\n  details?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  classNames?: RuiMenuClassNames;\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  /** With `showDetails`: `reserve` keeps the line while empty (default), `auto` takes no space until there is a message. */\n  details?: Exclude<FormDetails, 'hidden'>;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n  /**\n   * Accessible name of the teleported popover. A `dialog` popover needs one;\n   * the other roles take it from their activator or options.\n   */\n  menuLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  classNames,\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  details = 'reserve',\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n  menuLabel,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    // An inline type literal, so callers can pass it on as `Record<string, unknown>`\n    attrs: {\n      'onMouseover'?: () => void;\n      'onMouseleave'?: () => void;\n      'onClick'?: () => void;\n      'aria-haspopup': RuiMenuRole | 'true';\n      'aria-expanded': boolean;\n      'aria-controls'?: string;\n    };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n  /** Rendered above the activator, outside the element the menu positions against. */\n  label?: () => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\nconst menuId = useId();\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n  () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-rui-menu',\n    // a hairline edge keeps the popup apart from a surface of nearly the same shade in dark mode\n    content: 'rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1',\n    details: '',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\n// `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\nconst ariaHasPopup = computed<RuiMenuRole | 'true'>(() => role === 'menu' ? 'true' : role);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  'onClick': disabled ? undefined : checkClick,\n  'aria-haspopup': get(ariaHasPopup),\n  'aria-expanded': get(open),\n  // Only while the popover is in the DOM, so the reference never points at a missing element\n  'aria-controls': get(visible) ? menuId : undefined,\n}));\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n *\n * Escape is swallowed only while the menu is open and not persistent\n * (`onLeave` stops the event itself); a closed or persistent menu must let it\n * through, or a consumer that closes its own editor on Escape never sees the\n * key. The root element listens for it.\n *\n * An Escape that arrives while an IME is composing belongs to the IME, which\n * cancels the candidate with it, so the menu leaves it alone the same way: a\n * search field inside the menu would otherwise lose the whole menu mid-word.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent || event.isComposing)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <slot name=\"label\" />\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) })\"\n      :data-menu-disabled=\"disabled\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"menuId\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) })\"\n        :role=\"role\"\n        :aria-label=\"menuLabel\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ width }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :details=\"details\"\n      :class=\"ui.details({ class: cn(classNames?.details) })\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiMenu.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Reactive, Ref, WatchHandle } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating, type UseFloatingReturn } from '@/composables/floating';\nimport { containsMessage, type FormDetails } from '@/utils/form-text-detail';\nimport { cn } from '@/utils/tv';\nimport { menuStyles } from './menu-styles';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\n/**\n * What the activator slot binds onto its trigger. The ARIA keys belong on an\n * element that can carry them (a button, link or combobox), never on a plain\n * `div`; an activator that sets its own ARIA takes `activatorHandlers(attrs)`.\n */\ninterface MenuAttrs extends BaseMenuAttrs {\n  'onClick'?: () => void;\n  'aria-haspopup': RuiMenuRole | 'true';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n  /** Overrides applied to the hint and messages under the activator. */\n  details?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  classNames?: RuiMenuClassNames;\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  /** With `showDetails`: `reserve` keeps the line while empty (default), `auto` takes no space until there is a message. */\n  details?: Exclude<FormDetails, 'hidden'>;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n  /**\n   * Accessible name of the teleported popover. A `dialog` popover needs one;\n   * the other roles take it from their activator or options.\n   */\n  menuLabel?: string;\n  /**\n   * Defers the popover's setup (its positioning, the activator's size\n   * observer and the click-outside listeners) to first use: a click or a\n   * context menu on the activator, a hover with `openOnHover`, or the model\n   * turning `true`. Until then the menu renders its root, the wrapper and the\n   * activator, the same elements it keeps afterwards, so a table with a menu\n   * on every row pays for the menus that are opened. Read at mount.\n   */\n  lazy?: boolean;\n}\n\n/** What the menu sets up at mount, or on first use when `lazy`, with its refs unwrapped. */\ntype MenuSetup = Reactive<{\n  floating: UseFloatingReturn;\n  width: Readonly<Ref<number>>;\n}>;\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  classNames,\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  details = 'reserve',\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n  menuLabel,\n  lazy = false,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    // An inline type literal, so callers can pass it on as `Record<string, unknown>`\n    attrs: {\n      'onMouseover'?: () => void;\n      'onMouseleave'?: () => void;\n      'onClick'?: () => void;\n      'aria-haspopup': RuiMenuRole | 'true';\n      'aria-expanded': boolean;\n      'aria-controls'?: string;\n    };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n  /** Rendered above the activator, outside the element the menu positions against. */\n  label?: () => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst activator = useTemplateRef<HTMLElement>('activator');\nconst menu = useTemplateRef<HTMLElement>('menu');\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\nconst menuId = useId();\nconst instance = getCurrentInstance();\n// Owned by this component, so whatever the setup starts stops on unmount even when it ran after mount\nconst setupScope = effectScope();\nconst menuSetup = shallowRef<MenuSetup>();\nlet stopSetUpOnModel: WatchHandle | undefined;\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n// Only the two flags, not the formatted lists useFormTextDetail builds, since a table may hold hundreds of menus\nconst hasError = computed<boolean>(() => containsMessage(errorMessages));\nconst hasSuccess = computed<boolean>(() => containsMessage(successMessages));\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\nconst open = computed<boolean>(() => get(menuSetup)?.floating.open ?? false);\nconst visible = computed<boolean>(() => get(menuSetup)?.floating.visible ?? false);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            setUp()?.onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            activeFloating()?.onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  'onClick': disabled ? undefined : checkClick,\n  // `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\n  'aria-haspopup': role === 'menu' ? 'true' : role,\n  'aria-expanded': get(open),\n  // Only while the popover is in the DOM, so the reference never points at a missing element\n  'aria-controls': get(visible) ? menuId : undefined,\n}));\n\n/**\n * Sets a lazy menu up on its first use, on the wrapper so that it covers an\n * activator that opens the menu through the model rather than through\n * `attrs`. Hover and focus are left out: a cursor resting over a scrolling\n * table or Tab moving down it would set up every row it passes. They stay\n * after setup, where `setUp` only hands back what it already made.\n */\nconst firstUseListeners = { click: setUp, contextmenu: setUp };\n\n/**\n * Sets the popover up once and hands back its floating state. It runs at\n * mount, or for a `lazy` menu on first use, which can be after mount and\n * inside another component's lifecycle hook, so what it starts must not\n * attach itself to the current instance.\n */\nfunction setUp(): MenuSetup['floating'] | undefined {\n  if (setupScope.active && !get(menuSetup)) {\n    set(menuSetup, setupScope.run(createSetup));\n    stopSetUpOnModel?.();\n  }\n  return activeFloating();\n}\n\n/**\n * The floating state while the menu is alive. An event can still reach the\n * activator after unmount, and must not start timers on a stopped menu.\n */\nfunction activeFloating(): MenuSetup['floating'] | undefined {\n  return setupScope.active ? get(menuSetup)?.floating : undefined;\n}\n\n/** An element's content-box width, the box its resize observer reports. */\nfunction contentWidth(element: HTMLElement | null): number {\n  if (!element)\n    return 0;\n\n  const style = getComputedStyle(element);\n  const edges = [style.paddingLeft, style.paddingRight, style.borderLeftWidth, style.borderRightWidth];\n  return edges.reduce((width, edge) => width - (Number.parseFloat(edge) || 0), element.offsetWidth);\n}\n\nfunction createSetup(): MenuSetup {\n  const floating = useFloating(\n    () => options ?? {},\n    () => disabled,\n    () => openDelay,\n    () => closeDelay,\n    () => anchorEl ?? get(activator) ?? undefined,\n    menu,\n  );\n\n  const width = shallowRef<number>(0);\n  const readWidth = (): void => set(width, contentWidth(get(activator)));\n  useResizeObserver(activator, ([entry]) => {\n    if (entry)\n      set(width, entry.contentRect.width);\n  });\n  // Only the menu's own setup waits for its mount; a later one may run inside another component's hook\n  if (instance?.isMounted)\n    readWidth();\n  else\n    onMounted(readWidth);\n\n  // Immediate, so a model that is already `true` at setup opens the menu\n  watch(modelValue, (value) => {\n    if (get(floating.open) === value)\n      return;\n\n    if (value) {\n      floating.onOpen();\n      set(click, true);\n    }\n    else {\n      onLeave();\n    }\n  }, { immediate: true });\n\n  watch(floating.open, (isOpen) => {\n    set(modelValue, isOpen);\n    if (isOpen) {\n      focusMenu();\n    }\n  });\n\n  onClickOutside(menu, () => {\n    if (get(floating.open) && !persistent)\n      onLeave();\n  }, { ignore: [activator] });\n\n  return reactive({ floating, width });\n}\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  const floating = activeFloating();\n  if (!floating?.open)\n    return;\n  floating.onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n *\n * Escape is swallowed only while the menu is open and not persistent\n * (`onLeave` stops the event itself); a closed or persistent menu must let it\n * through, or a consumer that closes its own editor on Escape never sees the\n * key. The root element listens for it.\n *\n * An Escape that arrives while an IME is composing belongs to the IME, which\n * cancels the candidate with it, so the menu leaves it alone the same way: a\n * search field inside the menu would otherwise lose the whole menu mid-word.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent || event.isComposing)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  const floating = setUp();\n  if (!floating)\n    return;\n\n  if (floating.open && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    floating.onOpen();\n    set(click, true);\n  }\n}\n\n// The setup's own watcher opens it; a disabled menu stays closed and unset, as an eager one stays closed\nif (!lazy || (get(modelValue) && !disabled)) {\n  setUp();\n}\nelse {\n  stopSetUpOnModel = watch(modelValue, (value) => {\n    if (value && !disabled)\n      setUp();\n  });\n}\n</script>\n\n<template>\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <slot name=\"label\" />\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) })\"\n      :data-menu-disabled=\"disabled\"\n      v-on=\"lazy && !disabled ? firstUseListeners : {}\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled && menuSetup\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"menuId\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) })\"\n        :role=\"role\"\n        :aria-label=\"menuLabel\"\n        :data-placement=\"menuSetup.floating.currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"menuSetup?.floating.updatePosition()\"\n          @after-leave=\"menuSetup?.floating.leavePending ? menuSetup.floating.onLeaveComplete() : undefined\"\n          @before-leave=\"menuSetup?.floating.onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ width: menuSetup.width }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :details=\"details\"\n      :class=\"ui.details({ class: cn(classNames?.details) })\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/menu/RuiMenu.vue.d.ts

@@ -57,6 +57,15 @@ export interface MenuProps {
      * the other roles take it from their activator or options.
      */
     menuLabel?: string;
+    /**
+     * Defers the popover's setup (its positioning, the activator's size
+     * observer and the click-outside listeners) to first use: a click or a
+     * context menu on the activator, a hover with `openOnHover`, or the model
+     * turning `true`. Until then the menu renders its root, the wrapper and the
+     * activator, the same elements it keeps afterwards, so a table with a menu
+     * on every row pays for the menus that are opened. Read at mount.
+     */
+    lazy?: boolean;
 }
 type __VLS_Props = MenuProps;
 type __VLS_Slots = {

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,12 @@
 import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { onClickOutside, useElementSize } from "../../../vendor/@vueuse/core/dist/index.js";
-import { cn, tv } from "../../../utils/tv.js";
+import { onClickOutside, useResizeObserver } from "../../../vendor/@vueuse/core/dist/index.js";
+import { cn } from "../../../utils/tv.js";
 import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
-import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import { containsMessage } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { useFloating } from "../../../composables/floating.js";
-import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useId, useModel, useTemplateRef, watch, withCtx, withKeys } from "vue";
+import { menuStyles } from "./menu-styles.js";
+import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, effectScope, getCurrentInstance, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, openBlock, reactive, ref, renderSlot, shallowRef, toHandlers, unref, useId, useModel, useTemplateRef, watch, withCtx, withKeys } from "vue";
 //#region src/components/overlays/menu/RuiMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-menu-disabled"];
 var _hoisted_2 = [
@@ -65,7 +66,11 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		},
 		anchorEl: {},
 		role: { default: "menu" },
-		menuLabel: {}
+		menuLabel: {},
+		lazy: {
+			type: Boolean,
+			default: false
+		}
 	}, {
 		"modelValue": {
 			type: Boolean,
@@ -77,35 +82,22 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
 		const click = ref(false);
+		const activator = useTemplateRef("activator");
+		const menu = useTemplateRef("menu");
 		const menuContent = useTemplateRef("menuContent");
 		const menuId = useId();
-		const { reference: activator, popover: menu, open, visible, currentPlacement, leavePending, onLeavePending, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay, () => __props.anchorEl);
-		const { width } = useElementSize(activator);
-		const { hasError, hasSuccess } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
-		const menuStyles = tv({
-			slots: {
-				wrapper: "relative inline-flex max-w-full",
-				popover: "w-max z-rui-menu",
-				content: "rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1",
-				details: ""
-			},
-			variants: {
-				fullWidth: { true: { wrapper: "w-full" } },
-				dense: {
-					true: { details: "px-2" },
-					false: { details: "px-4" }
-				}
-			},
-			defaultVariants: {
-				fullWidth: false,
-				dense: false
-			}
-		});
+		const instance = getCurrentInstance();
+		const setupScope = effectScope();
+		const menuSetup = shallowRef();
+		let stopSetUpOnModel;
+		const hasError = computed(() => containsMessage(__props.errorMessages));
+		const hasSuccess = computed(() => containsMessage(__props.successMessages));
 		const ui = computed(() => menuStyles({
 			fullWidth: __props.fullWidth,
 			dense: __props.dense
 		}));
-		const ariaHasPopup = computed(() => __props.role === "menu" ? "true" : __props.role);
+		const open = computed(() => get(menuSetup)?.floating.open ?? false);
+		const visible = computed(() => get(menuSetup)?.floating.visible ?? false);
 		/**
 		* The activator attributes.
 		*
@@ -119,21 +111,91 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			const clickVal = get(click);
 			return {
 				onMouseover: __props.disabled ? void 0 : () => {
-					if (__props.openOnHover) onOpen();
+					if (__props.openOnHover) setUp()?.onOpen();
 				},
 				onMouseleave: __props.disabled ? void 0 : () => {
-					if (__props.openOnHover && !clickVal) onClose();
+					if (__props.openOnHover && !clickVal) activeFloating()?.onClose();
 				}
 			};
 		});
 		const menuAttrs = computed(() => ({
 			...get(baseMenuAttrs),
 			"onClick": __props.disabled ? void 0 : checkClick,
-			"aria-haspopup": get(ariaHasPopup),
+			"aria-haspopup": __props.role === "menu" ? "true" : __props.role,
 			"aria-expanded": get(open),
 			"aria-controls": get(visible) ? menuId : void 0
 		}));
 		/**
+		* Sets a lazy menu up on its first use, on the wrapper so that it covers an
+		* activator that opens the menu through the model rather than through
+		* `attrs`. Hover and focus are left out: a cursor resting over a scrolling
+		* table or Tab moving down it would set up every row it passes. They stay
+		* after setup, where `setUp` only hands back what it already made.
+		*/
+		const firstUseListeners = {
+			click: setUp,
+			contextmenu: setUp
+		};
+		/**
+		* Sets the popover up once and hands back its floating state. It runs at
+		* mount, or for a `lazy` menu on first use, which can be after mount and
+		* inside another component's lifecycle hook, so what it starts must not
+		* attach itself to the current instance.
+		*/
+		function setUp() {
+			if (setupScope.active && !get(menuSetup)) {
+				set(menuSetup, setupScope.run(createSetup));
+				stopSetUpOnModel?.();
+			}
+			return activeFloating();
+		}
+		/**
+		* The floating state while the menu is alive. An event can still reach the
+		* activator after unmount, and must not start timers on a stopped menu.
+		*/
+		function activeFloating() {
+			return setupScope.active ? get(menuSetup)?.floating : void 0;
+		}
+		/** An element's content-box width, the box its resize observer reports. */
+		function contentWidth(element) {
+			if (!element) return 0;
+			const style = getComputedStyle(element);
+			return [
+				style.paddingLeft,
+				style.paddingRight,
+				style.borderLeftWidth,
+				style.borderRightWidth
+			].reduce((width, edge) => width - (Number.parseFloat(edge) || 0), element.offsetWidth);
+		}
+		function createSetup() {
+			const floating = useFloating(() => __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay, () => __props.anchorEl ?? get(activator) ?? void 0, menu);
+			const width = shallowRef(0);
+			const readWidth = () => set(width, contentWidth(get(activator)));
+			useResizeObserver(activator, ([entry]) => {
+				if (entry) set(width, entry.contentRect.width);
+			});
+			if (instance?.isMounted) readWidth();
+			else onMounted(readWidth);
+			watch(modelValue, (value) => {
+				if (get(floating.open) === value) return;
+				if (value) {
+					floating.onOpen();
+					set(click, true);
+				} else onLeave();
+			}, { immediate: true });
+			watch(floating.open, (isOpen) => {
+				set(modelValue, isOpen);
+				if (isOpen) focusMenu();
+			});
+			onClickOutside(menu, () => {
+				if (get(floating.open) && !__props.persistent) onLeave();
+			}, { ignore: [activator] });
+			return reactive({
+				floating,
+				width
+			});
+		}
+		/**
 		* Moves focus into the open menu without scrolling the page. A menu taller than the space below its
 		* activator would otherwise make the browser scroll the whole document to reveal the focused
 		* container, sliding the page out from under the activator.
@@ -155,8 +217,9 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			if (focusableEl) focusableEl.focus({ preventScroll: true });
 		}
 		function onLeave(event) {
-			if (!get(open)) return;
-			onClose();
+			const floating = activeFloating();
+			if (!floating?.open) return;
+			floating.onClose();
 			set(click, false);
 			event?.stopPropagation();
 			if (__props.disableAutoFocus) return;
@@ -187,46 +250,38 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			onLeave(event);
 		}
 		function checkClick() {
-			if (get(open) && get(click)) {
+			const floating = setUp();
+			if (!floating) return;
+			if (floating.open && get(click)) {
 				if (!__props.persistOnActivatorClick) onLeave();
 			} else {
-				onOpen();
+				floating.onOpen();
 				set(click, true);
 			}
 		}
-		watch(modelValue, (value) => {
-			if (get(open) === value) return;
-			if (value) {
-				onOpen();
-				set(click, true);
-			} else onLeave();
-		});
-		watch(open, (open) => {
-			set(modelValue, open);
-			if (open) focusMenu();
+		if (!__props.lazy || get(modelValue) && !__props.disabled) setUp();
+		else stopSetUpOnModel = watch(modelValue, (value) => {
+			if (value && !__props.disabled) setUp();
 		});
-		onClickOutside(menu, () => {
-			if (get(open) && !__props.persistent) onLeave();
-		}, { ignore: [activator] });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(__props.classNames?.root),
 				onKeydown: _cache[5] || (_cache[5] = withKeys(($event) => onEscape($event), ["esc"]))
 			}, [
 				renderSlot(_ctx.$slots, "label"),
-				createElementVNode("div", {
+				createElementVNode("div", mergeProps({
 					ref_key: "activator",
 					ref: activator,
-					class: normalizeClass(unref(ui).wrapper({ class: unref(cn)(__props.classNames?.wrapper) })),
+					class: unref(ui).wrapper({ class: unref(cn)(__props.classNames?.wrapper) }),
 					"data-menu-disabled": __props.disabled
-				}, [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({
+				}, toHandlers(__props.lazy && !__props.disabled ? firstUseListeners : {}, true)), [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({
 					attrs: unref(menuAttrs),
 					open: unref(open),
 					disabled: __props.disabled,
 					hasError: unref(hasError),
 					hasSuccess: unref(hasSuccess)
-				})))], 10, _hoisted_1),
-				!__props.disabled ? (openBlock(), createBlock(Teleport, {
+				})))], 16, _hoisted_1),
+				!__props.disabled && unref(menuSetup) ? (openBlock(), createBlock(Teleport, {
 					key: 0,
 					to: "body"
 				}, [unref(visible) ? (openBlock(), createElementBlock("div", {
@@ -237,7 +292,7 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					class: normalizeClass(unref(ui).popover({ class: unref(cn)(__props.classNames?.menu) })),
 					role: __props.role,
 					"aria-label": __props.menuLabel,
-					"data-placement": unref(currentPlacement),
+					"data-placement": unref(menuSetup).floating.currentPlacement,
 					onClick: _cache[3] || (_cache[3] = ($event) => __props.closeOnContentClick ? onLeave() : void 0),
 					onKeydown: _cache[4] || (_cache[4] = withKeys(($event) => onEscape($event), ["esc"]))
 				}, [createVNode(TransitionGroup, {
@@ -247,9 +302,9 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"leave-active-class": "transition ease-in duration-150",
 					"leave-from-class": "opacity-100 translate-y-0",
 					"leave-to-class": "opacity-0 translate-y-1",
-					onBeforeEnter: _cache[0] || (_cache[0] = ($event) => unref(updatePosition)()),
-					onAfterLeave: _cache[1] || (_cache[1] = ($event) => unref(leavePending) ? unref(onLeaveComplete)() : void 0),
-					onBeforeLeave: _cache[2] || (_cache[2] = ($event) => unref(onLeavePending)())
+					onBeforeEnter: _cache[0] || (_cache[0] = ($event) => unref(menuSetup)?.floating.updatePosition()),
+					onAfterLeave: _cache[1] || (_cache[1] = ($event) => unref(menuSetup)?.floating.leavePending ? unref(menuSetup).floating.onLeaveComplete() : void 0),
+					onBeforeLeave: _cache[2] || (_cache[2] = ($event) => unref(menuSetup)?.floating.onLeavePending())
 				}, {
 					default: withCtx(() => [unref(open) ? (openBlock(), createElementBlock("div", mergeProps({
 						ref_key: "menuContent",
@@ -259,7 +314,7 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						class: unref(ui).content({ class: unref(cn)(__props.classNames?.content) }),
 						tabindex: "-1"
 					}, unref(baseMenuAttrs)), [createVNode(unref(ButtonGroupBoundary), null, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ width: unref(width) })))]),
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ width: unref(menuSetup).width })))]),
 						_: 3
 					})], 16)) : createCommentVNode("", true)]),
 					_: 3

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenu.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_withKeys","_renderSlot","_createElementVNode","_unref","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_createVNode","_TransitionGroup","_withCtx","_mergeProps","_createCommentVNode","RuiFormTextDetail"],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type FormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\n/**\n * What the activator slot binds onto its trigger. The ARIA keys belong on an\n * element that can carry them (a button, link or combobox), never on a plain\n * `div`; an activator that sets its own ARIA takes `activatorHandlers(attrs)`.\n */\ninterface MenuAttrs extends BaseMenuAttrs {\n  'onClick'?: () => void;\n  'aria-haspopup': RuiMenuRole | 'true';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n  /** Overrides applied to the hint and messages under the activator. */\n  details?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  classNames?: RuiMenuClassNames;\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  /** With `showDetails`: `reserve` keeps the line while empty (default), `auto` takes no space until there is a message. */\n  details?: Exclude<FormDetails, 'hidden'>;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n  /**\n   * Accessible name of the teleported popover. A `dialog` popover needs one;\n   * the other roles take it from their activator or options.\n   */\n  menuLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  classNames,\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  details = 'reserve',\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n  menuLabel,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    // An inline type literal, so callers can pass it on as `Record<string, unknown>`\n    attrs: {\n      'onMouseover'?: () => void;\n      'onMouseleave'?: () => void;\n      'onClick'?: () => void;\n      'aria-haspopup': RuiMenuRole | 'true';\n      'aria-expanded': boolean;\n      'aria-controls'?: string;\n    };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n  /** Rendered above the activator, outside the element the menu positions against. */\n  label?: () => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\nconst menuId = useId();\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n  () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-rui-menu',\n    // a hairline edge keeps the popup apart from a surface of nearly the same shade in dark mode\n    content: 'rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1',\n    details: '',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\n// `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\nconst ariaHasPopup = computed<RuiMenuRole | 'true'>(() => role === 'menu' ? 'true' : role);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  'onClick': disabled ? undefined : checkClick,\n  'aria-haspopup': get(ariaHasPopup),\n  'aria-expanded': get(open),\n  // Only while the popover is in the DOM, so the reference never points at a missing element\n  'aria-controls': get(visible) ? menuId : undefined,\n}));\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n *\n * Escape is swallowed only while the menu is open and not persistent\n * (`onLeave` stops the event itself); a closed or persistent menu must let it\n * through, or a consumer that closes its own editor on Escape never sees the\n * key. The root element listens for it.\n *\n * An Escape that arrives while an IME is composing belongs to the IME, which\n * cancels the candidate with it, so the menu leaves it alone the same way: a\n * search field inside the menu would otherwise lose the whole menu mid-word.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent || event.isComposing)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <slot name=\"label\" />\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) })\"\n      :data-menu-disabled=\"disabled\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"menuId\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) })\"\n        :role=\"role\"\n        :aria-label=\"menuLabel\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ width }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :details=\"details\"\n      :class=\"ui.details({ class: cn(classNames?.details) })\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiMenu.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_withKeys","_renderSlot","_createElementVNode","_mergeProps","_unref","_toHandlers","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_createVNode","_TransitionGroup","_withCtx","_createCommentVNode","RuiFormTextDetail"],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Reactive, Ref, WatchHandle } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating, type UseFloatingReturn } from '@/composables/floating';\nimport { containsMessage, type FormDetails } from '@/utils/form-text-detail';\nimport { cn } from '@/utils/tv';\nimport { menuStyles } from './menu-styles';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\n/**\n * What the activator slot binds onto its trigger. The ARIA keys belong on an\n * element that can carry them (a button, link or combobox), never on a plain\n * `div`; an activator that sets its own ARIA takes `activatorHandlers(attrs)`.\n */\ninterface MenuAttrs extends BaseMenuAttrs {\n  'onClick'?: () => void;\n  'aria-haspopup': RuiMenuRole | 'true';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n  /** Overrides applied to the hint and messages under the activator. */\n  details?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  classNames?: RuiMenuClassNames;\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  /** With `showDetails`: `reserve` keeps the line while empty (default), `auto` takes no space until there is a message. */\n  details?: Exclude<FormDetails, 'hidden'>;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n  /**\n   * Accessible name of the teleported popover. A `dialog` popover needs one;\n   * the other roles take it from their activator or options.\n   */\n  menuLabel?: string;\n  /**\n   * Defers the popover's setup (its positioning, the activator's size\n   * observer and the click-outside listeners) to first use: a click or a\n   * context menu on the activator, a hover with `openOnHover`, or the model\n   * turning `true`. Until then the menu renders its root, the wrapper and the\n   * activator, the same elements it keeps afterwards, so a table with a menu\n   * on every row pays for the menus that are opened. Read at mount.\n   */\n  lazy?: boolean;\n}\n\n/** What the menu sets up at mount, or on first use when `lazy`, with its refs unwrapped. */\ntype MenuSetup = Reactive<{\n  floating: UseFloatingReturn;\n  width: Readonly<Ref<number>>;\n}>;\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  classNames,\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  details = 'reserve',\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n  menuLabel,\n  lazy = false,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    // An inline type literal, so callers can pass it on as `Record<string, unknown>`\n    attrs: {\n      'onMouseover'?: () => void;\n      'onMouseleave'?: () => void;\n      'onClick'?: () => void;\n      'aria-haspopup': RuiMenuRole | 'true';\n      'aria-expanded': boolean;\n      'aria-controls'?: string;\n    };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n  /** Rendered above the activator, outside the element the menu positions against. */\n  label?: () => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst activator = useTemplateRef<HTMLElement>('activator');\nconst menu = useTemplateRef<HTMLElement>('menu');\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\nconst menuId = useId();\nconst instance = getCurrentInstance();\n// Owned by this component, so whatever the setup starts stops on unmount even when it ran after mount\nconst setupScope = effectScope();\nconst menuSetup = shallowRef<MenuSetup>();\nlet stopSetUpOnModel: WatchHandle | undefined;\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n// Only the two flags, not the formatted lists useFormTextDetail builds, since a table may hold hundreds of menus\nconst hasError = computed<boolean>(() => containsMessage(errorMessages));\nconst hasSuccess = computed<boolean>(() => containsMessage(successMessages));\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\nconst open = computed<boolean>(() => get(menuSetup)?.floating.open ?? false);\nconst visible = computed<boolean>(() => get(menuSetup)?.floating.visible ?? false);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            setUp()?.onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            activeFloating()?.onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  'onClick': disabled ? undefined : checkClick,\n  // `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\n  'aria-haspopup': role === 'menu' ? 'true' : role,\n  'aria-expanded': get(open),\n  // Only while the popover is in the DOM, so the reference never points at a missing element\n  'aria-controls': get(visible) ? menuId : undefined,\n}));\n\n/**\n * Sets a lazy menu up on its first use, on the wrapper so that it covers an\n * activator that opens the menu through the model rather than through\n * `attrs`. Hover and focus are left out: a cursor resting over a scrolling\n * table or Tab moving down it would set up every row it passes. They stay\n * after setup, where `setUp` only hands back what it already made.\n */\nconst firstUseListeners = { click: setUp, contextmenu: setUp };\n\n/**\n * Sets the popover up once and hands back its floating state. It runs at\n * mount, or for a `lazy` menu on first use, which can be after mount and\n * inside another component's lifecycle hook, so what it starts must not\n * attach itself to the current instance.\n */\nfunction setUp(): MenuSetup['floating'] | undefined {\n  if (setupScope.active && !get(menuSetup)) {\n    set(menuSetup, setupScope.run(createSetup));\n    stopSetUpOnModel?.();\n  }\n  return activeFloating();\n}\n\n/**\n * The floating state while the menu is alive. An event can still reach the\n * activator after unmount, and must not start timers on a stopped menu.\n */\nfunction activeFloating(): MenuSetup['floating'] | undefined {\n  return setupScope.active ? get(menuSetup)?.floating : undefined;\n}\n\n/** An element's content-box width, the box its resize observer reports. */\nfunction contentWidth(element: HTMLElement | null): number {\n  if (!element)\n    return 0;\n\n  const style = getComputedStyle(element);\n  const edges = [style.paddingLeft, style.paddingRight, style.borderLeftWidth, style.borderRightWidth];\n  return edges.reduce((width, edge) => width - (Number.parseFloat(edge) || 0), element.offsetWidth);\n}\n\nfunction createSetup(): MenuSetup {\n  const floating = useFloating(\n    () => options ?? {},\n    () => disabled,\n    () => openDelay,\n    () => closeDelay,\n    () => anchorEl ?? get(activator) ?? undefined,\n    menu,\n  );\n\n  const width = shallowRef<number>(0);\n  const readWidth = (): void => set(width, contentWidth(get(activator)));\n  useResizeObserver(activator, ([entry]) => {\n    if (entry)\n      set(width, entry.contentRect.width);\n  });\n  // Only the menu's own setup waits for its mount; a later one may run inside another component's hook\n  if (instance?.isMounted)\n    readWidth();\n  else\n    onMounted(readWidth);\n\n  // Immediate, so a model that is already `true` at setup opens the menu\n  watch(modelValue, (value) => {\n    if (get(floating.open) === value)\n      return;\n\n    if (value) {\n      floating.onOpen();\n      set(click, true);\n    }\n    else {\n      onLeave();\n    }\n  }, { immediate: true });\n\n  watch(floating.open, (isOpen) => {\n    set(modelValue, isOpen);\n    if (isOpen) {\n      focusMenu();\n    }\n  });\n\n  onClickOutside(menu, () => {\n    if (get(floating.open) && !persistent)\n      onLeave();\n  }, { ignore: [activator] });\n\n  return reactive({ floating, width });\n}\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  const floating = activeFloating();\n  if (!floating?.open)\n    return;\n  floating.onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n *\n * Escape is swallowed only while the menu is open and not persistent\n * (`onLeave` stops the event itself); a closed or persistent menu must let it\n * through, or a consumer that closes its own editor on Escape never sees the\n * key. The root element listens for it.\n *\n * An Escape that arrives while an IME is composing belongs to the IME, which\n * cancels the candidate with it, so the menu leaves it alone the same way: a\n * search field inside the menu would otherwise lose the whole menu mid-word.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent || event.isComposing)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  const floating = setUp();\n  if (!floating)\n    return;\n\n  if (floating.open && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    floating.onOpen();\n    set(click, true);\n  }\n}\n\n// The setup's own watcher opens it; a disabled menu stays closed and unset, as an eager one stays closed\nif (!lazy || (get(modelValue) && !disabled)) {\n  setUp();\n}\nelse {\n  stopSetUpOnModel = watch(modelValue, (value) => {\n    if (value && !disabled)\n      setUp();\n  });\n}\n</script>\n\n<template>\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <slot name=\"label\" />\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) })\"\n      :data-menu-disabled=\"disabled\"\n      v-on=\"lazy && !disabled ? firstUseListeners : {}\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled && menuSetup\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"menuId\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) })\"\n        :role=\"role\"\n        :aria-label=\"menuLabel\"\n        :data-placement=\"menuSetup.floating.currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"menuSetup?.floating.updatePosition()\"\n          @after-leave=\"menuSetup?.floating.leavePending ? menuSetup.floating.onLeaveComplete() : undefined\"\n          @before-leave=\"menuSetup?.floating.onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ width: menuSetup.width }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :details=\"details\"\n      :class=\"ui.details({ class: cn(classNames?.details) })\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/menu/menu-styles.d.ts

@@ -0,0 +1,58 @@
+export declare const menuStyles: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        true: {
+            wrapper: string;
+        };
+    };
+    dense: {
+        true: {
+            details: string;
+        };
+        false: {
+            details: string;
+        };
+    };
+}, {
+    wrapper: string;
+    popover: string;
+    content: string;
+    details: string;
+}, undefined, {
+    fullWidth: {
+        true: {
+            wrapper: string;
+        };
+    };
+    dense: {
+        true: {
+            details: string;
+        };
+        false: {
+            details: string;
+        };
+    };
+}, {
+    wrapper: string;
+    popover: string;
+    content: string;
+    details: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    fullWidth: {
+        true: {
+            wrapper: string;
+        };
+    };
+    dense: {
+        true: {
+            details: string;
+        };
+        false: {
+            details: string;
+        };
+    };
+}, {
+    wrapper: string;
+    popover: string;
+    content: string;
+    details: string;
+}>>;

package/dist/components/overlays/menu/menu-styles.js

@@ -0,0 +1,25 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/overlays/menu/menu-styles.ts
+var menuStyles = tv({
+	slots: {
+		wrapper: "relative inline-flex max-w-full",
+		popover: "w-max z-rui-menu",
+		content: "rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1",
+		details: ""
+	},
+	variants: {
+		fullWidth: { true: { wrapper: "w-full" } },
+		dense: {
+			true: { details: "px-2" },
+			false: { details: "px-4" }
+		}
+	},
+	defaultVariants: {
+		fullWidth: false,
+		dense: false
+	}
+});
+//#endregion
+export { menuStyles };
+
+//# sourceMappingURL=menu-styles.js.map

package/dist/components/overlays/menu/menu-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-styles.js","names":[],"sources":["../../../../src/components/overlays/menu/menu-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-rui-menu',\n    // a hairline edge keeps the popup apart from a surface of nearly the same shade in dark mode\n    content: 'rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1',\n    details: '',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n"],"mappings":";;AAEA,IAAa,aAAa,GAAG;CAC3B,OAAO;EACL,SAAS;EACT,SAAS;EAET,SAAS;EACT,SAAS;CACX;CACA,UAAU;EACR,WAAW,EACT,MAAM,EAAE,SAAS,SAAS,EAC5B;EACA,OAAO;GACL,MAAM,EAAE,SAAS,OAAO;GACxB,OAAO,EAAE,SAAS,OAAO;EAC3B;CACF;CACA,iBAAiB;EAAE,WAAW;EAAO,OAAO;CAAM;AACpD,CAAC"}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,translate,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: 'w-14!' },\n    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n/**\n * Where the drawer starts its slide in: it mounts open, so the closed position has to be put on it for\n * its first frame. Important, because the open position is already on the element.\n */\nconst enterFromClass = computed<string>(() => (position === 'left' ? '-translate-x-full!' : 'translate-x-full!'));\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <!-- leaves with no transition: it has already slid out, and its own would hold the removal for a transitionend that never comes -->\n      <Transition\n        :enter-from-class=\"enterFromClass\"\n        leave-active-class=\"duration-0!\"\n      >\n        <aside\n          v-if=\"alive\"\n          ref=\"content\"\n          data-id=\"drawer-content\"\n          :style=\"style\"\n          :data-visible=\"modelValue || undefined\"\n          :data-position=\"position\"\n          :data-mini=\"miniVariant || undefined\"\n          :class=\"rootClass($attrs.class)\"\n          :aria-label=\"ariaLabel\"\n          v-bind=\"getRootAttrs($attrs, [])\"\n        >\n          <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n        </aside>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiNavigationDrawer.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\nimport { navigationDrawerStyles } from './navigation-drawer-styles';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\n/**\n * Where the drawer starts its slide in: it mounts open, so the closed position has to be put on it for\n * its first frame. Important, because the open position is already on the element.\n */\nconst enterFromClass = computed<string>(() => (position === 'left' ? '-translate-x-full!' : 'translate-x-full!'));\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `navigationDrawerStyles()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return navigationDrawerStyles({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <!-- leaves with no transition: it has already slid out, and its own would hold the removal for a transitionend that never comes -->\n      <Transition\n        :enter-from-class=\"enterFromClass\"\n        leave-active-class=\"duration-0!\"\n      >\n        <aside\n          v-if=\"alive\"\n          ref=\"content\"\n          data-id=\"drawer-content\"\n          :style=\"style\"\n          :data-visible=\"modelValue || undefined\"\n          :data-position=\"position\"\n          :data-mini=\"miniVariant || undefined\"\n          :class=\"rootClass($attrs.class)\"\n          :aria-label=\"ariaLabel\"\n          v-bind=\"getRootAttrs($attrs, [])\"\n        >\n          <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n        </aside>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}