{"version":3,"file":"sidebar-item.cjs","sources":["../../../components/sidebar/sidebar-item.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps, useRender } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentProps,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport { Menu } from '../menu';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\nimport { SidebarLeadingVisual } from './sidebar-leading-visual';\nimport { useInsideSidebarMore } from './sidebar-more-context';\nimport { SidebarPopupContext, useSidebarSafe } from './sidebar-root';\n\nexport interface SidebarItemProps extends ComponentProps<'a'> {\n  leadingIcon?: ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n  render?: ReactElement;\n  /** @deprecated Every key here has an equivalent `[data-slot]` — see the Slots table in the Sidebar docs. */\n  classNames?: {\n    /** @deprecated Use `[data-slot=\"sidebar-item\"]` instead. */\n    root?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-leading-icon\"]` instead. */\n    leadingIcon?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-item-text\"]` instead. */\n    text?: string;\n  };\n}\n\nexport function SidebarItem({\n  classNames,\n  leadingIcon,\n  children,\n  active,\n  disabled,\n  render = <a />,\n  ...props\n}: SidebarItemProps) {\n  const { isCollapsed, position, hideItemTooltips } = useSidebarSafe();\n  const onPopupOpenChange = useContext(SidebarPopupContext);\n  const insideSidebarMore = useInsideSidebarMore();\n  const textRef = useRef<HTMLSpanElement>(null);\n  const [tooltipOpen, setTooltipOpen] = useState(false);\n  // Open away from the sidebar's edge, like the More menu and handle tooltip.\n  const tooltipSide = position === 'left' ? 'right' : 'left';\n\n  // Report to the sidebar so an open tooltip holds a hover peek. An effect\n  // (not the onOpenChange handler) so unmounting mid-tooltip still\n  // decrements the sidebar's open-popup count.\n  useEffect(() => {\n    if (!tooltipOpen) return;\n    onPopupOpenChange(true);\n    return () => onPopupOpenChange(false);\n  }, [tooltipOpen, onPopupOpenChange]);\n\n  const shouldShowFallback =\n    leadingIcon == null &&\n    (isCollapsed || insideSidebarMore) &&\n    typeof children === 'string' &&\n    children.length > 0;\n\n  const itemChildren = (\n    <>\n      <SidebarLeadingVisual\n        leadingIcon={!shouldShowFallback ? leadingIcon : undefined}\n        fallbackText={shouldShowFallback ? children : undefined}\n        className={classNames?.leadingIcon}\n        render={insideSidebarMore ? <span /> : undefined}\n      />\n      {/* In the sidebar, kept mounted so it can collapse with the sidebar\n          (max-width → 0) instead of popping out; CSS hides it when closed. */}\n      <span\n        ref={textRef}\n        className={cx(\n          insideSidebarMore\n            ? styles['more-menu-item-text']\n            : styles['nav-text'],\n          classNames?.text\n        )}\n        data-slot='sidebar-item-text'\n      >\n        {children}\n      </span>\n    </>\n  );\n\n  const content = useRender({\n    defaultTagName: 'a',\n    render,\n    props: mergeProps<'a'>(\n      {\n        className: cx(\n          insideSidebarMore ? styles['more-menu-item'] : styles['nav-item'],\n          classNames?.root\n        ),\n        'data-slot': 'sidebar-item',\n        'data-active': active ? 'true' : undefined,\n        'data-disabled': disabled ? 'true' : undefined,\n        'aria-current': active ? 'page' : undefined,\n        'aria-disabled': disabled || undefined,\n        ...(!insideSidebarMore ? { role: 'listitem' } : {}),\n        ...(isCollapsed && typeof children === 'string' && !insideSidebarMore\n          ? { 'aria-label': children }\n          : {}),\n        children: itemChildren\n      } as useRender.ComponentProps<'a'>,\n      props\n    )\n  });\n\n  if (insideSidebarMore) {\n    return <Menu.Item disabled={disabled} render={content} />;\n  }\n\n  // One prop opts out of every tooltip the library adds to items — the\n  // collapsed label tooltip and the expanded clipped-label tooltip.\n  if (hideItemTooltips) return content;\n\n  // One always-controlled Tooltip for both states (switching a mounted\n  // Tooltip between controlled and uncontrolled triggers a React warning):\n  // collapsed items always show it; expanded items only when the label is\n  // actually clipped at its max-width.\n  return (\n    <Tooltip\n      open={tooltipOpen}\n      onOpenChange={open => {\n        const el = textRef.current;\n        setTooltipOpen(\n          open &&\n            (isCollapsed || (el != null && el.scrollWidth > el.clientWidth))\n        );\n      }}\n    >\n      <Tooltip.Trigger render={content} />\n      <Tooltip.Content side={tooltipSide} sideOffset={16}>\n        {children}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n}\n\nSidebarItem.displayName = 'Sidebar.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAoCM;;AAUJ;AACA;AACA;;;AAGA;;;;;AAME;;;AAEA;AACF;AAEA;;;AAIE;AAEF;AAcU;AACA;;AAWR;;;;AAQI;;;;;AAKA;;AAEE;;AAEF;AACgC;AAGrC;;AAGC;;;;AAKF;AAAsB;;;;;AAMtB;AAIM;AACA;AAEI;AAEN;AAQN;AAEA;;"}