@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 14.9 kB
Source Map (JSON)
{"version":3,"file":"atoms.mjs","names":["DropdownMenuRoot: typeof Menu.Root","Menu"],"sources":["../../src/DropdownMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Switch } from 'antd';\nimport { cx } from 'antd-style';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport { cloneElement, isValidElement, useCallback, useState } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { styles } from '@/Menu/sharedStyle';\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { usePortalContainer } from '@/hooks/usePortalContainer';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { placementMap } from '@/utils/placement';\n\nimport type { DropdownMenuPlacement } from './type';\n\nexport const DROPDOWN_MENU_CONTAINER_ATTR = 'data-lobe-ui-dropdown-menu-container';\n\nexport const DropdownMenuRoot: typeof Menu.Root = (props) => <Menu.Root modal={false} {...props} />;\nexport const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;\nexport const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\nexport type DropdownMenuTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof Menu.Trigger>,\n 'children' | 'render'\n> & {\n children: React.ReactNode;\n};\n\nexport const DropdownMenuTrigger = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: DropdownMenuTriggerProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const renderer = (props: any) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n return cloneElement(children as any, {\n ...mergedProps,\n className: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n };\n\n if (isValidElement(children)) {\n return <Menu.Trigger {...rest} nativeButton={resolvedNativeButton} render={renderer as any} />;\n }\n\n return (\n <Menu.Trigger\n {...rest}\n className={clsx(CLASSNAMES.DropdownMenuTrigger, className)}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Menu.Trigger>\n );\n};\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nexport type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {\n /**\n * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n */\n container?: HTMLElement | null;\n};\n\nexport const DropdownMenuPortal = ({ container, ...rest }: DropdownMenuPortalProps) => {\n const defaultContainer = usePortalContainer(DROPDOWN_MENU_CONTAINER_ATTR);\n return <Menu.Portal container={container ?? defaultContainer} {...rest} />;\n};\n\nDropdownMenuPortal.displayName = 'DropdownMenuPortal';\n\nexport type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {\n hoverTrigger?: boolean;\n placement?: DropdownMenuPlacement;\n};\n\nexport const DropdownMenuPositioner = ({\n className,\n placement,\n hoverTrigger,\n align,\n side,\n sideOffset,\n children,\n ...rest\n}: DropdownMenuPositionerProps) => {\n const placementConfig = placement ? placementMap[placement] : undefined;\n const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\n return (\n <Menu.Positioner\n {...rest}\n align={align ?? placementConfig?.align}\n className={mergeStateClassName(styles.positioner, className as any) as any}\n data-hover-trigger={hoverTrigger || undefined}\n data-placement={placement}\n ref={setPositionerNode}\n side={side ?? placementConfig?.side}\n sideOffset={sideOffset ?? (placementConfig ? 6 : undefined)}\n >\n <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n </Menu.Positioner>\n );\n};\n\nDropdownMenuPositioner.displayName = 'DropdownMenuPositioner';\n\nexport type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;\n\nexport const DropdownMenuPopup = ({ className, ...rest }: DropdownMenuPopupProps) => {\n return (\n <Menu.Popup {...rest} className={mergeStateClassName(styles.popup, className as any) as any} />\n );\n};\n\nDropdownMenuPopup.displayName = 'DropdownMenuPopup';\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & { danger?: boolean };\n\nexport const DropdownMenuItem = ({ className, danger, ...rest }: DropdownMenuItemProps) => {\n return (\n <Menu.Item\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {\n danger?: boolean;\n};\n\nexport const DropdownMenuCheckboxItemPrimitive = ({\n className,\n danger,\n ...rest\n}: DropdownMenuCheckboxItemProps) => {\n return (\n <Menu.CheckboxItem\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\n\nDropdownMenuCheckboxItemPrimitive.displayName = 'DropdownMenuCheckboxItemPrimitive';\n\nexport type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...rest }: DropdownMenuSeparatorProps) => {\n return (\n <Menu.Separator\n {...rest}\n className={(state) =>\n cx(styles.separator, typeof className === 'function' ? className(state) : className)\n }\n />\n );\n};\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport const DropdownMenuGroup = Menu.Group;\n\nexport type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;\n\nexport const DropdownMenuGroupLabel = ({ className, ...rest }: DropdownMenuGroupLabelProps) => {\n return (\n <Menu.GroupLabel\n {...rest}\n className={(state) =>\n cx(styles.groupLabel, typeof className === 'function' ? className(state) : className)\n }\n />\n );\n};\n\nDropdownMenuGroupLabel.displayName = 'DropdownMenuGroupLabel';\n\nexport type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {\n danger?: boolean;\n};\n\nexport const DropdownMenuSubmenuTrigger = ({\n className,\n danger,\n ...rest\n}: DropdownMenuSubmenuTriggerProps) => {\n return (\n <Menu.SubmenuTrigger\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\n\nDropdownMenuSubmenuTrigger.displayName = 'DropdownMenuSubmenuTrigger';\n\nexport type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemContent = ({ className, ...rest }: DropdownMenuItemContentProps) => {\n return <div {...rest} className={cx(styles.itemContent, className)} />;\n};\n\nDropdownMenuItemContent.displayName = 'DropdownMenuItemContent';\n\nexport type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemIcon = ({ className, ...rest }: DropdownMenuItemIconProps) => {\n return <span {...rest} className={cx(styles.icon, className)} />;\n};\n\nDropdownMenuItemIcon.displayName = 'DropdownMenuItemIcon';\n\nexport type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemLabel = ({ className, ...rest }: DropdownMenuItemLabelProps) => {\n return <span {...rest} className={cx(styles.label, className)} />;\n};\n\nDropdownMenuItemLabel.displayName = 'DropdownMenuItemLabel';\n\nexport type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemExtra = ({ className, ...rest }: DropdownMenuItemExtraProps) => {\n return <span {...rest} className={cx(styles.extra, className)} />;\n};\n\nDropdownMenuItemExtra.displayName = 'DropdownMenuItemExtra';\n\nexport type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuSubmenuArrow = ({ className, ...rest }: DropdownMenuSubmenuArrowProps) => {\n return <span {...rest} className={cx(styles.submenuArrow, className)} />;\n};\n\nDropdownMenuSubmenuArrow.displayName = 'DropdownMenuSubmenuArrow';\n\nexport type DropdownMenuSwitchItemProps = Omit<\n React.ComponentProps<typeof Menu.Item>,\n 'onClick'\n> & {\n checked?: boolean;\n closeOnClick?: boolean;\n danger?: boolean;\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n};\n\nexport const DropdownMenuSwitchItem = ({\n checked: checkedProp,\n className,\n closeOnClick = false,\n danger,\n defaultChecked,\n disabled,\n onCheckedChange,\n children,\n ...rest\n}: DropdownMenuSwitchItemProps) => {\n const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n const isControlled = checkedProp !== undefined;\n const checked = isControlled ? checkedProp : internalChecked;\n\n const handleCheckedChange = useCallback(\n (newChecked: boolean) => {\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n onCheckedChange?.(newChecked);\n },\n [isControlled, onCheckedChange],\n );\n\n return (\n <Menu.Item\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n closeOnClick={closeOnClick}\n disabled={disabled}\n onClick={(e) => {\n e.preventDefault();\n if (!disabled) {\n handleCheckedChange(!checked);\n }\n }}\n >\n {children}\n <Switch\n checked={checked}\n disabled={disabled}\n onChange={handleCheckedChange}\n onClick={(_, e) => e.stopPropagation()}\n size=\"small\"\n style={{ marginInlineStart: 16 }}\n />\n </Menu.Item>\n );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":"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"}