{"version":3,"file":"sidebar-more.cjs","sources":["../../../components/sidebar/sidebar-more.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ReactNode, useContext, useEffect, useState } from 'react';\nimport { EllipsisIcon } from '~/icons';\nimport { Menu } from '../menu';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\nimport { SidebarLeadingVisual } from './sidebar-leading-visual';\nimport { SidebarMoreContext } from './sidebar-more-context';\nimport { SidebarPopupContext, useSidebarSafe } from './sidebar-root';\n\nexport interface SidebarMoreProps {\n  children?: ReactNode;\n  label?: string;\n  leadingIcon?: ReactNode;\n  classNames?: {\n    /** @deprecated Use `[data-slot=\"sidebar-more-trigger\"]` instead. */\n    root?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-leading-icon\"]` instead. */\n    leadingIcon?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-more-text\"]` instead. */\n    text?: string;\n    /**\n     * Not deprecated: `Menu.Content` portals to `document.body`, so a\n     * `[data-slot=\"menu-content\"]` selector can't be scoped to just this\n     * instance's dropdown — this prop remains the only way to target it.\n     */\n    menuContent?: string;\n  };\n}\n\nexport function SidebarMore({\n  children,\n  label = 'More',\n  leadingIcon,\n  classNames\n}: SidebarMoreProps) {\n  const { isCollapsed, position, hideItemTooltips } = useSidebarSafe();\n  const onPopupOpenChange = useContext(SidebarPopupContext);\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  // The menu portals outside the sidebar; report its open state so moving\n  // the pointer into it doesn't collapse a hover peek. An effect (not the\n  // onOpenChange handler) so unmounting mid-menu still decrements the\n  // sidebar's open-popup count.\n  useEffect(() => {\n    if (!menuOpen) return;\n    onPopupOpenChange(true);\n    return () => onPopupOpenChange(false);\n  }, [menuOpen, onPopupOpenChange]);\n\n  if (!children) return null;\n\n  const triggerIcon = leadingIcon ?? <EllipsisIcon width={16} height={16} />;\n\n  const triggerContent = (\n    <button\n      type='button'\n      className={cx(\n        styles['nav-item'],\n        styles['more-trigger'],\n        classNames?.root\n      )}\n      role='listitem'\n      aria-label={isCollapsed ? label : undefined}\n      data-slot='sidebar-more-trigger'\n    >\n      <SidebarLeadingVisual\n        leadingIcon={triggerIcon}\n        className={classNames?.leadingIcon}\n      />\n      {/* Kept mounted so it can collapse with the sidebar (max-width → 0)\n          instead of popping out; CSS hides it when closed. */}\n      <span\n        className={cx(styles['nav-text'], classNames?.text)}\n        data-slot='sidebar-more-text'\n      >\n        {label}\n      </span>\n    </button>\n  );\n\n  return (\n    <Menu onOpenChange={setMenuOpen}>\n      {isCollapsed && !hideItemTooltips ? (\n        <Tooltip>\n          <Tooltip.Trigger render={<Menu.Trigger render={triggerContent} />} />\n          <Tooltip.Content\n            side={position === 'left' ? 'right' : 'left'}\n            sideOffset={16}\n          >\n            {label}\n          </Tooltip.Content>\n        </Tooltip>\n      ) : (\n        <Menu.Trigger render={triggerContent} />\n      )}\n      <Menu.Content\n        className={classNames?.menuContent}\n        side={position === 'left' ? 'right' : 'left'}\n      >\n        <SidebarMoreContext value={true}>{children}</SidebarMoreContext>\n      </Menu.Content>\n    </Menu>\n  );\n}\n\nSidebarMore.displayName = 'Sidebar.More';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgCgB;;AAOd;;;;;;;AAQE;;;AAEA;AACF;AAEA;AAAe;AAEf;AAEA;;AAkDF;AAEA;;"}