@lobehub/ui/es/ContextMenu/ContextMenuTrigger.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"ContextMenuTrigger.mjs","names":[],"sources":["../../src/ContextMenu/ContextMenuTrigger.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport clsx from 'clsx';\nimport React, {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n  memo,\n  useCallback,\n  useId,\n  useSyncExternalStore,\n} from 'react';\n\nimport { CLASSNAMES } from '@/styles/classNames';\n\nimport { getServerSnapshot, getSnapshot, showContextMenu, subscribe } from './store';\nimport type { ContextMenuItem } from './type';\n\nexport type ContextMenuTriggerProps = {\n  children: ReactNode;\n  /**\n   * Menu items to display. Supports lazy rendering via function.\n   * When provided, context menu will be automatically shown on right-click.\n   */\n  items?: ContextMenuItem[] | (() => ContextMenuItem[]);\n  /**\n   * Custom context menu handler. If `items` is provided, this is optional.\n   */\n  onContextMenu?: (event: MouseEvent<HTMLElement>) => void;\n} & Omit<HTMLAttributes<HTMLElement>, 'onContextMenu' | 'children'>;\n\nconst styles = {\n  trigger: {\n    display: 'contents',\n  },\n};\n\nexport const ContextMenuTrigger = memo<ContextMenuTriggerProps>(\n  ({ children, items, onContextMenu, ...rest }) => {\n    const triggerId = useId();\n    const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n    const open = state.open && state.triggerId === triggerId;\n\n    const handleContextMenu = useCallback(\n      (event: MouseEvent<HTMLElement>) => {\n        if (items) {\n          event.preventDefault();\n          const resolvedItems = typeof items === 'function' ? items() : items;\n          showContextMenu(resolvedItems);\n        }\n        onContextMenu?.(event);\n      },\n      [items, onContextMenu],\n    );\n\n    const triggerProps = {\n      ...rest,\n      'aria-expanded': open || undefined,\n      'className': clsx(CLASSNAMES.ContextTrigger, rest.className),\n      'data-contextmenu-trigger': triggerId,\n      'data-popup-open': open ? '' : undefined,\n      'data-state': open ? 'open' : undefined,\n      'onContextMenu': handleContextMenu,\n    };\n\n    if (isValidElement(children) && React.Children.only(children)) {\n      return cloneElement(children, mergeProps(children.props as any, triggerProps));\n    }\n\n    return (\n      <span style={styles.trigger} {...triggerProps}>\n        {children}\n      </span>\n    );\n  },\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\n"],"mappings":";;;;;;;;;;AAkCA,MAAM,SAAS,EACb,SAAS,EACP,SAAS,YACV,EACF;AAED,MAAa,qBAAqB,MAC/B,EAAE,UAAU,OAAO,eAAe,GAAG,WAAW;CAC/C,MAAM,YAAY,OAAO;CACzB,MAAM,QAAQ,qBAAqB,WAAW,aAAa,kBAAkB;CAC7E,MAAM,OAAO,MAAM,QAAQ,MAAM,cAAc;CAE/C,MAAM,oBAAoB,aACvB,UAAmC;AAClC,MAAI,OAAO;AACT,SAAM,gBAAgB;AAEtB,mBADsB,OAAO,UAAU,aAAa,OAAO,GAAG,MAChC;;AAEhC,kBAAgB,MAAM;IAExB,CAAC,OAAO,cAAc,CACvB;CAED,MAAM,eAAe;EACnB,GAAG;EACH,iBAAiB,QAAQ;EACzB,aAAa,KAAK,WAAW,gBAAgB,KAAK,UAAU;EAC5D,4BAA4B;EAC5B,mBAAmB,OAAO,KAAK;EAC/B,cAAc,OAAO,SAAS;EAC9B,iBAAiB;EAClB;AAED,KAAI,eAAe,SAAS,IAAI,MAAM,SAAS,KAAK,SAAS,CAC3D,QAAO,aAAa,UAAU,WAAW,SAAS,OAAc,aAAa,CAAC;AAGhF,QACE,oBAAC;EAAK,OAAO,OAAO;EAAS,GAAI;EAC9B;GACI;EAGZ;AAED,mBAAmB,cAAc"}