@lobehub/ui 4.33.4 → 4.34.1

package/es/DropdownMenu/atoms.mjs.map

@@ -1 +1 @@
-{"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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"}
+{"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 { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { usePortalContainer } from '@/hooks/usePortalContainer';\nimport { styles } from '@/Menu/sharedStyle';\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\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 DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemLabelGroup = ({\n  className,\n  ...rest\n}: DropdownMenuItemLabelGroupProps) => {\n  return <div {...rest} className={cx(styles.labelGroup, className)} />;\n};\n\nDropdownMenuItemLabelGroup.displayName = 'DropdownMenuItemLabelGroup';\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 DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemDesc = ({ className, ...rest }: DropdownMenuItemDescProps) => {\n  return <span {...rest} className={cx(styles.desc, className)} />;\n};\n\nDropdownMenuItemDesc.displayName = 'DropdownMenuItemDesc';\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      closeOnClick={closeOnClick}\n      disabled={disabled}\n      className={(state) =>\n        cx(\n          styles.item,\n          danger && styles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\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        size=\"small\"\n        style={{ marginInlineStart: 16 }}\n        onChange={handleCheckedChange}\n        onClick={(_, e) => e.stopPropagation()}\n      />\n    </Menu.Item>\n  );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":"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"}

package/es/DropdownMenu/index.d.mts

@@ -1,6 +1,6 @@
 import { IconSpaceMode } from "../Menu/renderUtils.mjs";
 import { renderDropdownMenuItems } from "./renderItems.mjs";
 import { DropdownItem, DropdownMenuCheckboxItem, DropdownMenuPlacement, DropdownMenuProps, DropdownMenuSwitchItem as DropdownMenuSwitchItem$1 } from "./type.mjs";
-import { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuTrigger, DropdownMenuTriggerProps } from "./atoms.mjs";
+import { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuTrigger, DropdownMenuTriggerProps } from "./atoms.mjs";
 import { DropdownMenu } from "./DropdownMenu.mjs";
-export { DROPDOWN_MENU_CONTAINER_ATTR, type DropdownItem, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, type IconSpaceMode, DropdownMenu as default, renderDropdownMenuItems };
+export { DROPDOWN_MENU_CONTAINER_ATTR, type DropdownItem, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemDesc, type DropdownMenuItemDescProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, type DropdownMenuItemLabelGroupProps, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, type IconSpaceMode, DropdownMenu as default, renderDropdownMenuItems };

package/es/DropdownMenu/index.mjs

@@ -1,5 +1,5 @@
-import { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger } from "./atoms.mjs";
+import { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger } from "./atoms.mjs";
 import { renderDropdownMenuItems } from "./renderItems.mjs";
 import DropdownMenu_default from "./DropdownMenu.mjs";
 
-export { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, DropdownMenu_default as default, renderDropdownMenuItems };
+export { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, DropdownMenu_default as default, renderDropdownMenuItems };

package/es/DropdownMenu/renderItems.d.mts

@@ -1,4 +1,4 @@
-import { IconSpaceMode, RenderOptions } from "../Menu/renderUtils.mjs";
+import { IconAlign, IconSpaceMode, RenderOptions } from "../Menu/renderUtils.mjs";
 import "../Menu/index.mjs";
 import { DropdownItem } from "./type.mjs";
 import { ReactNode } from "react";

package/es/DropdownMenu/renderItems.mjs

@@ -1,4 +1,5 @@
-import { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem } from "./atoms.mjs";
+import { styles } from "../Menu/sharedStyle.mjs";
+import { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem } from "./atoms.mjs";
 import { getItemKey, getItemLabel, hasAnyIcon, hasCheckboxAndIcon, renderIcon } from "../Menu/renderUtils.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRight } from "lucide-react";
@@ -6,20 +7,28 @@ import { Check, ChevronRight } from "lucide-react";
 //#region src/DropdownMenu/renderItems.tsx
 const renderItemContent = (item, options, iconNode) => {
 	const label = getItemLabel(item);
+	const desc = "desc" in item ? item.desc : void 0;
 	const extra = "extra" in item ? item.extra : void 0;
 	const indicatorOnRight = options?.indicatorOnRight;
+	const alignStart = Boolean(desc) && options?.iconAlign === "start";
 	const hasCustomIcon = iconNode !== void 0 && !indicatorOnRight;
 	const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);
-	return /* @__PURE__ */ jsxs(DropdownMenuItemContent, { children: [
-		(hasCustomIcon ? Boolean(options?.reserveIconSpace || iconNode) : Boolean(hasIcon || options?.reserveIconSpace)) ? /* @__PURE__ */ jsx(DropdownMenuItemIcon, {
-			"aria-hidden": !hasIcon,
-			children: hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null
-		}) : null,
-		/* @__PURE__ */ jsx(DropdownMenuItemLabel, { children: label }),
-		extra ? /* @__PURE__ */ jsx(DropdownMenuItemExtra, { children: extra }) : null,
-		indicatorOnRight && iconNode ? iconNode : null,
-		options?.submenu ? /* @__PURE__ */ jsx(DropdownMenuSubmenuArrow, { children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 }) }) : null
-	] });
+	const shouldRenderIcon = hasCustomIcon ? Boolean(options?.reserveIconSpace || iconNode) : Boolean(hasIcon || options?.reserveIconSpace);
+	const labelNode = desc ? /* @__PURE__ */ jsxs(DropdownMenuItemLabelGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuItemLabel, { children: label }), /* @__PURE__ */ jsx(DropdownMenuItemDesc, { children: desc })] }) : /* @__PURE__ */ jsx(DropdownMenuItemLabel, { children: label });
+	return /* @__PURE__ */ jsxs(DropdownMenuItemContent, {
+		className: alignStart ? styles.itemContentAlignStart : void 0,
+		children: [
+			shouldRenderIcon ? /* @__PURE__ */ jsx(DropdownMenuItemIcon, {
+				"aria-hidden": !hasIcon,
+				className: alignStart ? styles.iconAlignStart : void 0,
+				children: hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null
+			}) : null,
+			labelNode,
+			extra ? /* @__PURE__ */ jsx(DropdownMenuItemExtra, { children: extra }) : null,
+			indicatorOnRight && iconNode ? iconNode : null,
+			options?.submenu ? /* @__PURE__ */ jsx(DropdownMenuSubmenuArrow, { children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 }) }) : null
+		]
+	});
 };
 const invokeItemClick = (item, keyPath, event) => {
 	if (!item.onClick) return;
@@ -33,6 +42,7 @@ const invokeItemClick = (item, keyPath, event) => {
 	item.onClick(info);
 };
 const renderDropdownMenuItems = (items, keyPath = [], options) => {
+	const iconAlign = options?.iconAlign;
 	const iconSpaceMode = options?.iconSpaceMode ?? "global";
 	const reserveIconSpace = options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === "global");
 	const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);
@@ -55,6 +65,7 @@ const renderDropdownMenuItems = (items, keyPath = [], options) => {
 				label: labelText$1,
 				onCheckedChange: (checked) => checkboxItem.onCheckedChange?.(checked),
 				children: renderItemContent(checkboxItem, {
+					iconAlign,
 					indicatorOnRight,
 					reserveIconSpace
 				}, indicator)
@@ -73,7 +84,10 @@ const renderDropdownMenuItems = (items, keyPath = [], options) => {
 				disabled: switchItem.disabled,
 				label: labelText$1,
 				onCheckedChange: (checked) => switchItem.onCheckedChange?.(checked),
-				children: renderItemContent(switchItem, { reserveIconSpace })
+				children: renderItemContent(switchItem, {
+					iconAlign,
+					reserveIconSpace
+				})
 			}, itemKey);
 		}
 		if (item.type === "divider") return /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, itemKey);
@@ -82,6 +96,7 @@ const renderDropdownMenuItems = (items, keyPath = [], options) => {
 			const groupReserveIconSpace = iconSpaceMode === "group" ? group.children ? hasAnyIcon(group.children) : false : reserveIconSpace;
 			const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;
 			return /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [group.label ? /* @__PURE__ */ jsx(DropdownMenuGroupLabel, { children: group.label }) : null, group.children ? renderDropdownMenuItems(group.children, nextKeyPath, {
+				iconAlign,
 				iconSpaceMode,
 				indicatorOnRight: groupIndicatorOnRight,
 				reserveIconSpace: groupReserveIconSpace
@@ -96,6 +111,7 @@ const renderDropdownMenuItems = (items, keyPath = [], options) => {
 				disabled: submenu.disabled,
 				label: labelText$1,
 				children: renderItemContent(submenu, {
+					iconAlign,
 					reserveIconSpace,
 					submenu: true
 				})
@@ -103,7 +119,10 @@ const renderDropdownMenuItems = (items, keyPath = [], options) => {
 				alignOffset: -4,
 				"data-submenu": "",
 				sideOffset: -1,
-				children: /* @__PURE__ */ jsx(DropdownMenuPopup, { children: submenu.children ? renderDropdownMenuItems(submenu.children, nextKeyPath, { iconSpaceMode }) : null })
+				children: /* @__PURE__ */ jsx(DropdownMenuPopup, { children: submenu.children ? renderDropdownMenuItems(submenu.children, nextKeyPath, {
+					iconAlign,
+					iconSpaceMode
+				}) : null })
 			}) })] }, itemKey);
 		}
 		const menuItem = item;
@@ -116,7 +135,10 @@ const renderDropdownMenuItems = (items, keyPath = [], options) => {
 			disabled: menuItem.disabled,
 			label: labelText,
 			onClick: (event) => invokeItemClick(menuItem, nextKeyPath, event),
-			children: renderItemContent(menuItem, { reserveIconSpace })
+			children: renderItemContent(menuItem, {
+				iconAlign,
+				reserveIconSpace
+			})
 		}, itemKey);
 	});
 };

package/es/DropdownMenu/renderItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderItems.mjs","names":["info: MenuInfo","label","labelText","isDanger"],"sources":["../../src/DropdownMenu/renderItems.tsx"],"sourcesContent":["import { Check, ChevronRight } from 'lucide-react';\nimport type { MenuInfo } from 'rc-menu/es/interface';\nimport type {\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n} from 'react';\n\nimport {\n  type MenuDividerType,\n  type MenuItemGroupType,\n  type MenuItemType,\n  type RenderItemContentOptions,\n  type RenderOptions,\n  type SubMenuType,\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  renderIcon,\n} from '@/Menu';\n\nimport {\n  DropdownMenuCheckboxItemIndicator,\n  DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuItem,\n  DropdownMenuItemContent,\n  DropdownMenuItemExtra,\n  DropdownMenuItemIcon,\n  DropdownMenuItemLabel,\n  DropdownMenuPopup,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuSeparator,\n  DropdownMenuSubmenuArrow,\n  DropdownMenuSubmenuRoot,\n  DropdownMenuSubmenuTrigger,\n  DropdownMenuSwitchItem,\n} from './atoms';\nimport type {\n  DropdownItem,\n  DropdownMenuCheckboxItem as DropdownMenuCheckboxItemType,\n  DropdownMenuSwitchItem as DropdownMenuSwitchItemType,\n} from './type';\n\nexport type { IconSpaceMode } from '@/Menu';\n\nconst renderItemContent = (\n  item: MenuItemType | SubMenuType | DropdownMenuCheckboxItemType | DropdownMenuSwitchItemType,\n  options?: RenderItemContentOptions,\n  iconNode?: ReactNode,\n) => {\n  const label = getItemLabel(item);\n  const extra = 'extra' in item ? item.extra : undefined;\n  const indicatorOnRight = options?.indicatorOnRight;\n  const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n  const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n  const shouldRenderIcon = hasCustomIcon\n    ? Boolean(options?.reserveIconSpace || iconNode)\n    : Boolean(hasIcon || options?.reserveIconSpace);\n\n  return (\n    <DropdownMenuItemContent>\n      {shouldRenderIcon ? (\n        <DropdownMenuItemIcon aria-hidden={!hasIcon}>\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null}\n        </DropdownMenuItemIcon>\n      ) : null}\n      <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n      {extra ? <DropdownMenuItemExtra>{extra}</DropdownMenuItemExtra> : null}\n      {indicatorOnRight && iconNode ? iconNode : null}\n      {options?.submenu ? (\n        <DropdownMenuSubmenuArrow>\n          <ChevronRight size={16} />\n        </DropdownMenuSubmenuArrow>\n      ) : null}\n    </DropdownMenuItemContent>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderDropdownMenuItems = (\n  items: DropdownItem[],\n  keyPath: string[] = [],\n  options?: RenderOptions,\n): ReactNode[] => {\n  const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n  const reserveIconSpace =\n    options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n  const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as DropdownMenuCheckboxItemType).type === 'checkbox') {\n      const checkboxItem = item as DropdownMenuCheckboxItemType;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <DropdownMenuCheckboxItemIndicator>{renderIcon(Check)}</DropdownMenuCheckboxItemIndicator>\n      );\n\n      return (\n        <DropdownMenuCheckboxItemPrimitive\n          checked={checkboxItem.checked}\n          closeOnClick={checkboxItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={checkboxItem.defaultChecked}\n          disabled={checkboxItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(checkboxItem, { indicatorOnRight, reserveIconSpace }, indicator)}\n        </DropdownMenuCheckboxItemPrimitive>\n      );\n    }\n\n    if ((item as DropdownMenuSwitchItemType).type === 'switch') {\n      const switchItem = item as DropdownMenuSwitchItemType;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <DropdownMenuSwitchItem\n          checked={switchItem.checked}\n          closeOnClick={switchItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={switchItem.defaultChecked}\n          disabled={switchItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => switchItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(switchItem, { reserveIconSpace })}\n        </DropdownMenuSwitchItem>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <DropdownMenuSeparator key={itemKey} />;\n    }\n\n    if ((item as MenuItemGroupType).type === 'group') {\n      const group = item as MenuItemGroupType;\n      const groupReserveIconSpace =\n        iconSpaceMode === 'group'\n          ? group.children\n            ? hasAnyIcon(group.children)\n            : false\n          : reserveIconSpace;\n      const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n      return (\n        <DropdownMenuGroup key={itemKey}>\n          {group.label ? <DropdownMenuGroupLabel>{group.label}</DropdownMenuGroupLabel> : null}\n          {group.children\n            ? renderDropdownMenuItems(group.children, nextKeyPath, {\n                iconSpaceMode,\n                indicatorOnRight: groupIndicatorOnRight,\n                reserveIconSpace: groupReserveIconSpace,\n              })\n            : null}\n        </DropdownMenuGroup>\n      );\n    }\n\n    if ((item as SubMenuType).type === 'submenu' || 'children' in item) {\n      const submenu = item as SubMenuType;\n      const label = getItemLabel(submenu);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n\n      return (\n        <DropdownMenuSubmenuRoot key={itemKey}>\n          <DropdownMenuSubmenuTrigger\n            danger={isDanger}\n            disabled={submenu.disabled}\n            label={labelText}\n          >\n            {renderItemContent(submenu, {\n              reserveIconSpace,\n              submenu: true,\n            })}\n          </DropdownMenuSubmenuTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuPositioner alignOffset={-4} data-submenu=\"\" sideOffset={-1}>\n              <DropdownMenuPopup>\n                {submenu.children\n                  ? renderDropdownMenuItems(submenu.children, nextKeyPath, { iconSpaceMode })\n                  : null}\n              </DropdownMenuPopup>\n            </DropdownMenuPositioner>\n          </DropdownMenuPortal>\n        </DropdownMenuSubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <DropdownMenuItem\n        closeOnClick={menuItem.closeOnClick}\n        danger={isDanger}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { reserveIconSpace })}\n      </DropdownMenuItem>\n    );\n  });\n};\n"],"mappings":"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"}
+{"version":3,"file":"renderItems.mjs","names":["info: MenuInfo","label","labelText","isDanger"],"sources":["../../src/DropdownMenu/renderItems.tsx"],"sourcesContent":["import { Check, ChevronRight } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\n\nimport {\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  type MenuDividerType,\n  type MenuItemGroupType,\n  type MenuItemType,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n  type SubMenuType,\n} from '@/Menu';\nimport { styles } from '@/Menu/sharedStyle';\n\nimport {\n  DropdownMenuCheckboxItemIndicator,\n  DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuItem,\n  DropdownMenuItemContent,\n  DropdownMenuItemDesc,\n  DropdownMenuItemExtra,\n  DropdownMenuItemIcon,\n  DropdownMenuItemLabel,\n  DropdownMenuItemLabelGroup,\n  DropdownMenuPopup,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuSeparator,\n  DropdownMenuSubmenuArrow,\n  DropdownMenuSubmenuRoot,\n  DropdownMenuSubmenuTrigger,\n  DropdownMenuSwitchItem,\n} from './atoms';\nimport {\n  type DropdownItem,\n  type DropdownMenuCheckboxItem as DropdownMenuCheckboxItemType,\n  type DropdownMenuSwitchItem as DropdownMenuSwitchItemType,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst renderItemContent = (\n  item: MenuItemType | SubMenuType | DropdownMenuCheckboxItemType | DropdownMenuSwitchItemType,\n  options?: RenderItemContentOptions,\n  iconNode?: ReactNode,\n) => {\n  const label = getItemLabel(item);\n  const desc = 'desc' in item ? item.desc : undefined;\n  const extra = 'extra' in item ? item.extra : undefined;\n  const indicatorOnRight = options?.indicatorOnRight;\n  const alignStart = Boolean(desc) && options?.iconAlign === 'start';\n\n  const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n  const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n  const shouldRenderIcon = hasCustomIcon\n    ? Boolean(options?.reserveIconSpace || iconNode)\n    : Boolean(hasIcon || options?.reserveIconSpace);\n\n  const labelNode = desc ? (\n    <DropdownMenuItemLabelGroup>\n      <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n      <DropdownMenuItemDesc>{desc}</DropdownMenuItemDesc>\n    </DropdownMenuItemLabelGroup>\n  ) : (\n    <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n  );\n\n  return (\n    <DropdownMenuItemContent className={alignStart ? styles.itemContentAlignStart : undefined}>\n      {shouldRenderIcon ? (\n        <DropdownMenuItemIcon\n          aria-hidden={!hasIcon}\n          className={alignStart ? styles.iconAlignStart : undefined}\n        >\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null}\n        </DropdownMenuItemIcon>\n      ) : null}\n      {labelNode}\n      {extra ? <DropdownMenuItemExtra>{extra}</DropdownMenuItemExtra> : null}\n      {indicatorOnRight && iconNode ? iconNode : null}\n      {options?.submenu ? (\n        <DropdownMenuSubmenuArrow>\n          <ChevronRight size={16} />\n        </DropdownMenuSubmenuArrow>\n      ) : null}\n    </DropdownMenuItemContent>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderDropdownMenuItems = (\n  items: DropdownItem[],\n  keyPath: string[] = [],\n  options?: RenderOptions,\n): ReactNode[] => {\n  const iconAlign = options?.iconAlign;\n  const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n  const reserveIconSpace =\n    options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n  const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as DropdownMenuCheckboxItemType).type === 'checkbox') {\n      const checkboxItem = item as DropdownMenuCheckboxItemType;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <DropdownMenuCheckboxItemIndicator>{renderIcon(Check)}</DropdownMenuCheckboxItemIndicator>\n      );\n\n      return (\n        <DropdownMenuCheckboxItemPrimitive\n          checked={checkboxItem.checked}\n          closeOnClick={checkboxItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={checkboxItem.defaultChecked}\n          disabled={checkboxItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(\n            checkboxItem,\n            { iconAlign, indicatorOnRight, reserveIconSpace },\n            indicator,\n          )}\n        </DropdownMenuCheckboxItemPrimitive>\n      );\n    }\n\n    if ((item as DropdownMenuSwitchItemType).type === 'switch') {\n      const switchItem = item as DropdownMenuSwitchItemType;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <DropdownMenuSwitchItem\n          checked={switchItem.checked}\n          closeOnClick={switchItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={switchItem.defaultChecked}\n          disabled={switchItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => switchItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n        </DropdownMenuSwitchItem>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <DropdownMenuSeparator key={itemKey} />;\n    }\n\n    if ((item as MenuItemGroupType).type === 'group') {\n      const group = item as MenuItemGroupType;\n      const groupReserveIconSpace =\n        iconSpaceMode === 'group'\n          ? group.children\n            ? hasAnyIcon(group.children)\n            : false\n          : reserveIconSpace;\n      const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n      return (\n        <DropdownMenuGroup key={itemKey}>\n          {group.label ? <DropdownMenuGroupLabel>{group.label}</DropdownMenuGroupLabel> : null}\n          {group.children\n            ? renderDropdownMenuItems(group.children, nextKeyPath, {\n                iconAlign,\n                iconSpaceMode,\n                indicatorOnRight: groupIndicatorOnRight,\n                reserveIconSpace: groupReserveIconSpace,\n              })\n            : null}\n        </DropdownMenuGroup>\n      );\n    }\n\n    if ((item as SubMenuType).type === 'submenu' || 'children' in item) {\n      const submenu = item as SubMenuType;\n      const label = getItemLabel(submenu);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n\n      return (\n        <DropdownMenuSubmenuRoot key={itemKey}>\n          <DropdownMenuSubmenuTrigger\n            danger={isDanger}\n            disabled={submenu.disabled}\n            label={labelText}\n          >\n            {renderItemContent(submenu, {\n              iconAlign,\n              reserveIconSpace,\n              submenu: true,\n            })}\n          </DropdownMenuSubmenuTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuPositioner alignOffset={-4} data-submenu=\"\" sideOffset={-1}>\n              <DropdownMenuPopup>\n                {submenu.children\n                  ? renderDropdownMenuItems(submenu.children, nextKeyPath, {\n                      iconAlign,\n                      iconSpaceMode,\n                    })\n                  : null}\n              </DropdownMenuPopup>\n            </DropdownMenuPositioner>\n          </DropdownMenuPortal>\n        </DropdownMenuSubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <DropdownMenuItem\n        closeOnClick={menuItem.closeOnClick}\n        danger={isDanger}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n      </DropdownMenuItem>\n    );\n  });\n};\n"],"mappings":"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"}

package/es/DropdownMenu/type.d.mts

@@ -4,7 +4,7 @@ import { Placement } from "../utils/placement.mjs";
 import { MenuCheckboxItemType } from "../Menu/checkboxItem.mjs";
 import { MenuSwitchItemType } from "../Menu/switchItem.mjs";
 import { BaseMenuItemType } from "../Menu/baseItem.mjs";
-import { IconSpaceMode } from "../Menu/renderUtils.mjs";
+import { IconAlign, IconSpaceMode } from "../Menu/renderUtils.mjs";
 import "../Menu/index.mjs";
 import "./renderItems.mjs";
 import { ReactNode } from "react";
@@ -17,6 +17,13 @@ type DropdownMenuSwitchItem = MenuSwitchItemType;
 type DropdownItem = BaseMenuItemType;
 interface DropdownMenuProps<Payload = unknown> extends Omit<MenuRootProps<Payload>, 'children'> {
   children: ReactNode;
+  /**
+   * 图标与 label+desc 的垂直对齐方式
+   * - 'center': 图标垂直居中（默认）
+   * - 'start': 图标与第一行文本顶部对齐，仅在 item 有 desc 时生效
+   * @default 'center'
+   */
+  iconAlign?: IconAlign;
   /**
    * 图标空间保留模式
    * - 'global': 当任何一个选项有图标时，所有 item 都保留图标位

package/es/EditableText/ControlInput.mjs

@@ -22,58 +22,58 @@ const ControlInput = memo(({ value, onChange, onValueChanging, onChangeEnd, onCo
 	};
 	return /* @__PURE__ */ jsx(Input_default, {
 		autoFocus: true,
-		onChange: (e) => {
-			setInput(e.target.value);
-			onValueChanging?.(e.target.value);
-		},
-		onCompositionEnd: (e) => {
-			isChineseInput.current = false;
-			onCompositionEnd?.(e);
-		},
-		onCompositionStart: (e) => {
-			isChineseInput.current = true;
-			onCompositionStart?.(e);
-		},
-		onFocus,
-		onPressEnter: (e) => {
-			if (!e.shiftKey && !isChineseInput.current) {
-				e.preventDefault();
-				handleUpload();
-				onPressEnter?.(e);
-			}
-		},
 		ref,
+		value: input,
 		style: {
 			width: "100%",
 			...style
 		},
 		suffix: value === input ? /* @__PURE__ */ jsx("span", {}) : /* @__PURE__ */ jsxs(FlexBasic_default, {
-			gap: 2,
 			horizontal: true,
+			gap: 2,
 			style: {
 				marginRight: -4,
 				zIndex: 1
 			},
 			children: [/* @__PURE__ */ jsx(ActionIcon_default, {
 				icon: RotateCcw,
+				size: "small",
+				title: texts?.reset || "Reset",
 				onClick: (e) => {
 					e.preventDefault();
 					setInput(value || "");
-				},
-				size: "small",
-				title: texts?.reset || "Reset"
+				}
 			}), /* @__PURE__ */ jsx(ActionIcon_default, {
 				icon: submitIcon || Save,
+				size: "small",
+				title: texts?.submit || "Submit",
+				variant: "filled",
 				onClick: (e) => {
 					e.preventDefault();
 					handleUpload();
-				},
-				size: "small",
-				title: texts?.submit || "Submit",
-				variant: "filled"
+				}
 			})]
 		}),
-		value: input,
+		onFocus,
+		onChange: (e) => {
+			setInput(e.target.value);
+			onValueChanging?.(e.target.value);
+		},
+		onCompositionEnd: (e) => {
+			isChineseInput.current = false;
+			onCompositionEnd?.(e);
+		},
+		onCompositionStart: (e) => {
+			isChineseInput.current = true;
+			onCompositionStart?.(e);
+		},
+		onPressEnter: (e) => {
+			if (!e.shiftKey && !isChineseInput.current) {
+				e.preventDefault();
+				handleUpload();
+				onPressEnter?.(e);
+			}
+		},
 		...rest
 	});
 });

package/es/EditableText/ControlInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ControlInput.mjs","names":["Input","Flexbox","ActionIcon"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport type { InputRef } from 'antd';\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Input, { type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<InputRef>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onFocus={onFocus}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        ref={ref}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              gap={2}\n              horizontal\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n              />\n            </Flexbox>\n          )\n        }\n        value={input}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAiB,KAAK;CAClC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,GAAG;CAEvD,MAAM,iBAAiB,OAAO,MAAM;AAEpC,iBAAgB;AACd,MAAI,UAAU,OAAW,UAAS,MAAM;IACvC,CAAC,MAAM,CAAC;CAEX,MAAM,qBAAqB;AACzB,aAAW,MAAM;AACjB,OAAK,SAAS,MAAM;AACpB,gBAAc,MAAM;;AAGtB,QACE,oBAACA;EACC;EACA,WAAW,MAAM;AACf,YAAS,EAAE,OAAO,MAAM;AACxB,qBAAkB,EAAE,OAAO,MAAM;;EAEnC,mBAAmB,MAAM;AACvB,kBAAe,UAAU;AACzB,sBAAmB,EAAE;;EAEvB,qBAAqB,MAAM;AACzB,kBAAe,UAAU;AACzB,wBAAqB,EAAE;;EAEhB;EACT,eAAe,MAAM;AACnB,OAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;AAC1C,MAAE,gBAAgB;AAClB,kBAAc;AACd,mBAAe,EAAE;;;EAGhB;EACL,OAAO;GACL,OAAO;GACP,GAAG;GACJ;EACD,QACE,UAAU,QACR,oBAAC,WAAO,GAER,qBAACC;GACC,KAAK;GACL;GACA,OAAO;IACL,aAAa;IACb,QAAQ;IACT;cAED,oBAACC;IACC,MAAM;IACN,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,cAAS,SAAS,GAAG;;IAEvB,MAAK;IACL,OAAO,OAAO,SAAS;KACvB,EACF,oBAACA;IACC,MAAM,cAAc;IACpB,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,mBAAc;;IAEhB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;KACT;IACM;EAGd,OAAO;EACP,GAAI;GACJ;EAGP;AAED,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"ControlInput.mjs","names":["Input","Flexbox","ActionIcon"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport type { InputRef } from 'antd';\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Input, { type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<InputRef>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              horizontal\n              gap={2}\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n              />\n            </Flexbox>\n          )\n        }\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAiB,KAAK;CAClC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,GAAG;CAEvD,MAAM,iBAAiB,OAAO,MAAM;AAEpC,iBAAgB;AACd,MAAI,UAAU,OAAW,UAAS,MAAM;IACvC,CAAC,MAAM,CAAC;CAEX,MAAM,qBAAqB;AACzB,aAAW,MAAM;AACjB,OAAK,SAAS,MAAM;AACpB,gBAAc,MAAM;;AAGtB,QACE,oBAACA;EACC;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;GACJ;EACD,QACE,UAAU,QACR,oBAAC,WAAO,GAER,qBAACC;GACC;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;IACT;cAED,oBAACC;IACC,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,cAAS,SAAS,GAAG;;KAEvB,EACF,oBAACA;IACC,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,mBAAc;;KAEhB;IACM;EAGL;EACT,WAAW,MAAM;AACf,YAAS,EAAE,OAAO,MAAM;AACxB,qBAAkB,EAAE,OAAO,MAAM;;EAEnC,mBAAmB,MAAM;AACvB,kBAAe,UAAU;AACzB,sBAAmB,EAAE;;EAEvB,qBAAqB,MAAM;AACzB,kBAAe,UAAU;AACzB,wBAAqB,EAAE;;EAEzB,eAAe,MAAM;AACnB,OAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;AAC1C,MAAE,gBAAgB;AAClB,kBAAc;AACd,mBAAe,EAAE;;;EAGrB,GAAI;GACJ;EAGP;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/EditableText/EditableText.d.mts

@@ -1,8 +1,8 @@
 import { EditableTextProps } from "./type.mjs";
-import * as react4 from "react";
+import * as react77 from "react";
 
 //#region src/EditableText/EditableText.d.ts
-declare const EditableText: react4.NamedExoticComponent<EditableTextProps>;
+declare const EditableText: react77.NamedExoticComponent<EditableTextProps>;
 //#endregion
 export { EditableText };
 //# sourceMappingURL=EditableText.d.mts.map

package/es/EditableText/EditableText.mjs

@@ -33,37 +33,37 @@ const EditableText = memo(({ value, showEditIcon = true, onChange, editing, onEd
 	}, [size]);
 	const input = /* @__PURE__ */ jsx(ControlInput_default, {
 		className: cx(className, classNames?.input),
-		onBlur,
-		onChange,
-		onChangeEnd: (v) => {
-			onChangeEnd?.(v);
-			setEdited(false);
-		},
-		onFocus,
-		onValueChanging,
 		size,
+		value,
+		variant,
 		style: {
 			height,
 			...style,
 			...styles?.input
 		},
-		value,
-		variant,
+		onBlur,
+		onChange,
+		onFocus,
+		onValueChanging,
+		onChangeEnd: (v) => {
+			onChangeEnd?.(v);
+			setEdited(false);
+		},
 		...inputProps
 	});
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: value }), showEditIcon && /* @__PURE__ */ jsx(ActionIcon_default, {
 		icon: Edit3,
+		size: "small",
+		title: "Edit",
 		onClick: () => {
 			setEdited(!edited);
-		},
-		size: "small",
-		title: "Edit"
+		}
 	})] });
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		horizontal: true,
 		align: "center",
 		className: cx(className, classNames?.container),
 		gap,
-		horizontal: true,
 		style: {
 			height,
 			width: "100%",

package/es/EditableText/EditableText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.mjs","names":["useControlledState","ControlInput","ActionIcon","Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        onBlur={onBlur}\n        onChange={onChange}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        size={size}\n        style={{\n          height,\n          ...style,\n          ...styles?.input,\n        }}\n        value={value as string}\n        variant={variant}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n            size=\"small\"\n            title={'Edit'}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        horizontal\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;AAEF,YACE,aACM;AACJ,YAAU,MAAM;IAElB;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;EACjB,CACF;CAED,MAAM,SAAS,cAAc;AAC3B,MAAI,CAAC,KAAM,QAAO;AAClB,UAAQ,MAAR;GACE,KAAK,QACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,QACH,QAAO;;IAGV,CAAC,KAAK,CAAC;CAEV,MAAM,QACJ,oBAACC;EACC,WAAW,GAAG,WAAW,YAAY,MAAM;EACnC;EACE;EACV,cAAc,MAAM;AAClB,iBAAc,EAAE;AAChB,aAAU,MAAM;;EAET;EACQ;EACX;EACN,OAAO;GACL;GACA,GAAG;GACH,GAAG,QAAQ;GACZ;EACM;EACE;EACT,GAAI;GACJ;CAGJ,MAAM,UACJ,8CACE,oBAAC,oBAAM,QAAa,EACnB,gBACC,oBAACC;EACC,MAAM;EACN,eAAe;AACb,aAAU,CAAC,OAAO;;EAEpB,MAAK;EACL,OAAO;GACP,IAEH;AAGL,QACE,oBAACC;EACC,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,UAAU;EAC1C;EACL;EACA,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;GACZ;EACD,GAAI;YAEH,SAAS,QAAQ;GACV;EAGf;AAED,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"EditableText.mjs","names":["useControlledState","ControlInput","ActionIcon","Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;AAEF,YACE,aACM;AACJ,YAAU,MAAM;IAElB;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;EACjB,CACF;CAED,MAAM,SAAS,cAAc;AAC3B,MAAI,CAAC,KAAM,QAAO;AAClB,UAAQ,MAAR;GACE,KAAK,QACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,QACH,QAAO;;IAGV,CAAC,KAAK,CAAC;CAEV,MAAM,QACJ,oBAACC;EACC,WAAW,GAAG,WAAW,YAAY,MAAM;EACrC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAG;GACH,GAAG,QAAQ;GACZ;EACO;EACE;EACD;EACQ;EACjB,cAAc,MAAM;AAClB,iBAAc,EAAE;AAChB,aAAU,MAAM;;EAElB,GAAI;GACJ;CAGJ,MAAM,UACJ,8CACE,oBAAC,oBAAM,QAAa,EACnB,gBACC,oBAACC;EACC,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;AACb,aAAU,CAAC,OAAO;;GAEpB,IAEH;AAGL,QACE,oBAACC;EACC;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,UAAU;EAC1C;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;GACZ;EACD,GAAI;YAEH,SAAS,QAAQ;GACV;EAGf;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/EditorSlashMenu/EditorSlashMenu.mjs

@@ -57,11 +57,11 @@ const EditorSlashMenu = memo(({ items, anchor, open, defaultOpen, onOpenChange,
 		defaultValue,
 		itemToStringValue,
 		items: resolvedItems,
+		open,
+		value,
 		onOpenChange: handleOpenChange,
 		onOpenChangeComplete,
 		onValueChange: handleValueChange,
-		open,
-		value,
 		children: [withHiddenInput ? /* @__PURE__ */ jsx(EditorSlashMenuHiddenInput, { ...hiddenInputProps }) : null, /* @__PURE__ */ jsx(EditorSlashMenuPortal, {
 			...portalProps,
 			children: /* @__PURE__ */ jsx(EditorSlashMenuPositioner, {

package/es/EditorSlashMenu/EditorSlashMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorSlashMenu.mjs","names":["item"],"sources":["../../src/EditorSlashMenu/EditorSlashMenu.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  AutocompleteRootChangeEventDetails,\n  AutocompleteRootProps,\n} from '@base-ui/react/autocomplete';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { MenuItemRenderer } from './MenuItemRenderer';\nimport {\n  EditorSlashMenuEmpty,\n  EditorSlashMenuGroup,\n  EditorSlashMenuGroupLabel,\n  EditorSlashMenuHiddenInput,\n  EditorSlashMenuList,\n  EditorSlashMenuPopup,\n  EditorSlashMenuPortal,\n  EditorSlashMenuPositioner,\n  EditorSlashMenuRoot,\n} from './atoms';\nimport type { EditorSlashMenuItems, EditorSlashMenuOption as ItemType } from './type';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useNormalizedItems } from './useNormalizedItems';\nimport { isGroup } from './utils';\n\ntype Props = {\n  /** Anchor for positioning (caret virtual element, dom element, ref, etc.) */\n  anchor?: React.ComponentProps<typeof EditorSlashMenuPositioner>['anchor'];\n  defaultOpen?: boolean;\n\n  /** Initial query string (uncontrolled) */\n  defaultValue?: string;\n  /** Optional custom empty state */\n  empty?: React.ReactNode;\n  hiddenInputProps?: React.ComponentProps<typeof EditorSlashMenuHiddenInput>;\n  items: EditorSlashMenuItems;\n\n  listProps?: React.ComponentProps<typeof EditorSlashMenuList>;\n  onOpenChange?: (open: boolean, details: AutocompleteRootChangeEventDetails) => void;\n  onOpenChangeComplete?: (open: boolean) => void;\n  /** Called when a command is selected. */\n  onSelect?: (item: ItemType, details: AutocompleteRootChangeEventDetails) => void;\n\n  /** Called when query changes. By default, changes caused by item selection are ignored. */\n  onValueChange?: (value: string, details: AutocompleteRootChangeEventDetails) => void;\n\n  open?: boolean;\n  popupProps?: React.ComponentProps<typeof EditorSlashMenuPopup>;\n  portalProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPortal>, 'container'> & {\n    container?: HTMLElement | null;\n  };\n  positionerProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPositioner>, 'anchor'>;\n\n  /** Optional custom group label renderer */\n  renderGroupLabel?: (label: string) => React.ReactNode;\n  /** Optional custom item renderer */\n  renderItem?: (item: ItemType) => React.ReactNode;\n  /** Reserve icon space even when icon is missing */\n  reserveIconSpace?: boolean;\n  /** Pass-through props */\n  rootProps?: Omit<\n    AutocompleteRootProps<ItemType>,\n    | 'items'\n    | 'value'\n    | 'defaultValue'\n    | 'onValueChange'\n    | 'open'\n    | 'defaultOpen'\n    | 'onOpenChange'\n    | 'onOpenChangeComplete'\n    | 'itemToStringValue'\n  >;\n  /** Whether selecting an item should propagate its filled value via `onValueChange`. */\n  updateValueOnSelect?: boolean;\n\n  /** Current query string (controlled) */\n  value?: string;\n  /**\n   * Render a visually-hidden input element for keyboard navigation / screen readers.\n   * Default is `false` because slash menus usually live inside an editor input.\n   */\n  withHiddenInput?: boolean;\n};\n\nconst EditorSlashMenu = memo<Props>(\n  ({\n    items,\n    anchor,\n\n    open,\n    defaultOpen,\n    onOpenChange,\n    onOpenChangeComplete,\n\n    value,\n    defaultValue,\n    onValueChange,\n    updateValueOnSelect = false,\n\n    onSelect,\n\n    empty = 'No results',\n    renderGroupLabel,\n    renderItem,\n    reserveIconSpace = true,\n\n    rootProps,\n    portalProps,\n    positionerProps,\n    popupProps,\n    listProps,\n\n    withHiddenInput = false,\n    hiddenInputProps,\n  }) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n\n    useEffect(() => {\n      if (open === undefined) return;\n      setUncontrolledOpen(open);\n    }, [open]);\n\n    const resolvedOpen = open ?? uncontrolledOpen;\n\n    const { resolvedItems, hasAnyIcon } = useNormalizedItems(items);\n    const { listRef } = useKeyboardNavigation({ isOpen: resolvedOpen });\n\n    const itemToStringValue = useCallback((item: ItemType) => {\n      const kws = item.keywords?.length ? ` ${item.keywords.join(' ')}` : '';\n      return `${item.label}${kws}`;\n    }, []);\n\n    const handleValueChange = useCallback(\n      (nextValue: string, details: AutocompleteRootChangeEventDetails) => {\n        if (!updateValueOnSelect && details.reason === 'item-press') return;\n        onValueChange?.(nextValue, details);\n      },\n      [onValueChange, updateValueOnSelect],\n    );\n\n    const handleSelect = useCallback(\n      (item: ItemType, details: AutocompleteRootChangeEventDetails) => {\n        onSelect?.(item, details);\n      },\n      [onSelect],\n    );\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, details: AutocompleteRootChangeEventDetails) => {\n        setUncontrolledOpen(nextOpen);\n        onOpenChange?.(nextOpen, details);\n      },\n      [onOpenChange],\n    );\n\n    // Stable ref callback that doesn't depend on listProps object\n    const setListRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        listRef.current = node;\n        const externalRef = (listProps as any)?.ref;\n        if (!externalRef) return;\n        if (typeof externalRef === 'function') {\n          externalRef(node);\n        } else {\n          (externalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n      },\n      [listRef, listProps],\n    );\n\n    // Memoize render props to prevent recreating on every render\n    const menuItemProps = useMemo(\n      () => ({\n        hasAnyIcon,\n        onSelect: handleSelect,\n        renderItem,\n        reserveIconSpace,\n      }),\n      [hasAnyIcon, handleSelect, renderItem, reserveIconSpace],\n    );\n\n    return (\n      <EditorSlashMenuRoot<ItemType>\n        {...(rootProps as any)}\n        defaultOpen={defaultOpen}\n        defaultValue={defaultValue}\n        itemToStringValue={itemToStringValue as any}\n        items={resolvedItems as any}\n        onOpenChange={handleOpenChange}\n        onOpenChangeComplete={onOpenChangeComplete}\n        onValueChange={handleValueChange}\n        open={open}\n        value={value}\n      >\n        {withHiddenInput ? <EditorSlashMenuHiddenInput {...(hiddenInputProps as any)} /> : null}\n\n        <EditorSlashMenuPortal {...(portalProps as any)}>\n          <EditorSlashMenuPositioner {...(positionerProps as any)} anchor={anchor}>\n            <EditorSlashMenuPopup {...(popupProps as any)}>\n              <EditorSlashMenuList {...(listProps as any)} ref={setListRef as any}>\n                {(entry: any) => {\n                  if (isGroup(entry)) {\n                    return (\n                      <EditorSlashMenuGroup\n                        key={entry.label ?? entry.items.map((i: any) => i.value).join('|')}\n                      >\n                        {entry.label\n                          ? (renderGroupLabel?.(entry.label) ?? (\n                              <EditorSlashMenuGroupLabel>{entry.label}</EditorSlashMenuGroupLabel>\n                            ))\n                          : null}\n                        {entry.items.map((item: ItemType) => (\n                          <MenuItemRenderer {...menuItemProps} item={item} key={item.value} />\n                        ))}\n                      </EditorSlashMenuGroup>\n                    );\n                  }\n\n                  const item = entry as ItemType;\n                  return <MenuItemRenderer {...menuItemProps} item={item} key={item.value} />;\n                }}\n              </EditorSlashMenuList>\n\n              <EditorSlashMenuEmpty>{empty}</EditorSlashMenuEmpty>\n            </EditorSlashMenuPopup>\n          </EditorSlashMenuPositioner>\n        </EditorSlashMenuPortal>\n      </EditorSlashMenuRoot>\n    );\n  },\n);\n\nEditorSlashMenu.displayName = 'EditorSlashMenu';\n\nexport default EditorSlashMenu;\n"],"mappings":";;;;;;;;;;;AAqFA,MAAM,kBAAkB,MACrB,EACC,OACA,QAEA,MACA,aACA,cACA,sBAEA,OACA,cACA,eACA,sBAAsB,OAEtB,UAEA,QAAQ,cACR,kBACA,YACA,mBAAmB,MAEnB,WACA,aACA,iBACA,YACA,WAEA,kBAAkB,OAClB,uBACI;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,eAAe,MAAM;AAE9E,iBAAgB;AACd,MAAI,SAAS,OAAW;AACxB,sBAAoB,KAAK;IACxB,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,QAAQ;CAE7B,MAAM,EAAE,eAAe,eAAe,mBAAmB,MAAM;CAC/D,MAAM,EAAE,YAAY,sBAAsB,EAAE,QAAQ,cAAc,CAAC;CAEnE,MAAM,oBAAoB,aAAa,SAAmB;EACxD,MAAM,MAAM,KAAK,UAAU,SAAS,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK;AACpE,SAAO,GAAG,KAAK,QAAQ;IACtB,EAAE,CAAC;CAEN,MAAM,oBAAoB,aACvB,WAAmB,YAAgD;AAClE,MAAI,CAAC,uBAAuB,QAAQ,WAAW,aAAc;AAC7D,kBAAgB,WAAW,QAAQ;IAErC,CAAC,eAAe,oBAAoB,CACrC;CAED,MAAM,eAAe,aAClB,MAAgB,YAAgD;AAC/D,aAAW,MAAM,QAAQ;IAE3B,CAAC,SAAS,CACX;CAED,MAAM,mBAAmB,aACtB,UAAmB,YAAgD;AAClE,sBAAoB,SAAS;AAC7B,iBAAe,UAAU,QAAQ;IAEnC,CAAC,aAAa,CACf;CAGD,MAAM,aAAa,aAChB,SAAgC;AAC/B,UAAQ,UAAU;EAClB,MAAM,cAAe,WAAmB;AACxC,MAAI,CAAC,YAAa;AAClB,MAAI,OAAO,gBAAgB,WACzB,aAAY,KAAK;MAEjB,CAAC,YAA8D,UAAU;IAG7E,CAAC,SAAS,UAAU,CACrB;CAGD,MAAM,gBAAgB,eACb;EACL;EACA,UAAU;EACV;EACA;EACD,GACD;EAAC;EAAY;EAAc;EAAY;EAAiB,CACzD;AAED,QACE,qBAAC;EACC,GAAK;EACQ;EACC;EACK;EACnB,OAAO;EACP,cAAc;EACQ;EACtB,eAAe;EACT;EACC;aAEN,kBAAkB,oBAAC,8BAA2B,GAAK,mBAA4B,GAAG,MAEnF,oBAAC;GAAsB,GAAK;aAC1B,oBAAC;IAA0B,GAAK;IAAiC;cAC/D,qBAAC;KAAqB,GAAK;gBACzB,oBAAC;MAAoB,GAAK;MAAmB,KAAK;iBAC9C,UAAe;AACf,WAAI,QAAQ,MAAM,CAChB,QACE,qBAAC,mCAGE,MAAM,QACF,mBAAmB,MAAM,MAAM,IAC9B,oBAAC,uCAA2B,MAAM,QAAkC,GAEtE,MACH,MAAM,MAAM,KAAK,WAChB,8BAAC;QAAiB,GAAI;QAAe,MAAMA;QAAM,KAAKA,OAAK;SAAS,CACpE,KATG,MAAM,SAAS,MAAM,MAAM,KAAK,MAAW,EAAE,MAAM,CAAC,KAAK,IAAI,CAU7C;OAI3B,MAAM,OAAO;AACb,cAAO,8BAAC;QAAiB,GAAI;QAAqB;QAAM,KAAK,KAAK;SAAS;;OAEzD,EAEtB,oBAAC,kCAAsB,QAA6B;MAC/B;KACG;IACN;GACJ;EAG3B;AAED,gBAAgB,cAAc;AAE9B,8BAAe"}
+{"version":3,"file":"EditorSlashMenu.mjs","names":["item"],"sources":["../../src/EditorSlashMenu/EditorSlashMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AutocompleteRootChangeEventDetails,\n  type AutocompleteRootProps,\n} from '@base-ui/react/autocomplete';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport {\n  EditorSlashMenuEmpty,\n  EditorSlashMenuGroup,\n  EditorSlashMenuGroupLabel,\n  EditorSlashMenuHiddenInput,\n  EditorSlashMenuList,\n  EditorSlashMenuPopup,\n  EditorSlashMenuPortal,\n  EditorSlashMenuPositioner,\n  EditorSlashMenuRoot,\n} from './atoms';\nimport { MenuItemRenderer } from './MenuItemRenderer';\nimport { type EditorSlashMenuItems, type EditorSlashMenuOption as ItemType } from './type';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useNormalizedItems } from './useNormalizedItems';\nimport { isGroup } from './utils';\n\ntype Props = {\n  /** Anchor for positioning (caret virtual element, dom element, ref, etc.) */\n  anchor?: React.ComponentProps<typeof EditorSlashMenuPositioner>['anchor'];\n  defaultOpen?: boolean;\n\n  /** Initial query string (uncontrolled) */\n  defaultValue?: string;\n  /** Optional custom empty state */\n  empty?: React.ReactNode;\n  hiddenInputProps?: React.ComponentProps<typeof EditorSlashMenuHiddenInput>;\n  items: EditorSlashMenuItems;\n\n  listProps?: React.ComponentProps<typeof EditorSlashMenuList>;\n  onOpenChange?: (open: boolean, details: AutocompleteRootChangeEventDetails) => void;\n  onOpenChangeComplete?: (open: boolean) => void;\n  /** Called when a command is selected. */\n  onSelect?: (item: ItemType, details: AutocompleteRootChangeEventDetails) => void;\n\n  /** Called when query changes. By default, changes caused by item selection are ignored. */\n  onValueChange?: (value: string, details: AutocompleteRootChangeEventDetails) => void;\n\n  open?: boolean;\n  popupProps?: React.ComponentProps<typeof EditorSlashMenuPopup>;\n  portalProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPortal>, 'container'> & {\n    container?: HTMLElement | null;\n  };\n  positionerProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPositioner>, 'anchor'>;\n\n  /** Optional custom group label renderer */\n  renderGroupLabel?: (label: string) => React.ReactNode;\n  /** Optional custom item renderer */\n  renderItem?: (item: ItemType) => React.ReactNode;\n  /** Reserve icon space even when icon is missing */\n  reserveIconSpace?: boolean;\n  /** Pass-through props */\n  rootProps?: Omit<\n    AutocompleteRootProps<ItemType>,\n    | 'items'\n    | 'value'\n    | 'defaultValue'\n    | 'onValueChange'\n    | 'open'\n    | 'defaultOpen'\n    | 'onOpenChange'\n    | 'onOpenChangeComplete'\n    | 'itemToStringValue'\n  >;\n  /** Whether selecting an item should propagate its filled value via `onValueChange`. */\n  updateValueOnSelect?: boolean;\n\n  /** Current query string (controlled) */\n  value?: string;\n  /**\n   * Render a visually-hidden input element for keyboard navigation / screen readers.\n   * Default is `false` because slash menus usually live inside an editor input.\n   */\n  withHiddenInput?: boolean;\n};\n\nconst EditorSlashMenu = memo<Props>(\n  ({\n    items,\n    anchor,\n\n    open,\n    defaultOpen,\n    onOpenChange,\n    onOpenChangeComplete,\n\n    value,\n    defaultValue,\n    onValueChange,\n    updateValueOnSelect = false,\n\n    onSelect,\n\n    empty = 'No results',\n    renderGroupLabel,\n    renderItem,\n    reserveIconSpace = true,\n\n    rootProps,\n    portalProps,\n    positionerProps,\n    popupProps,\n    listProps,\n\n    withHiddenInput = false,\n    hiddenInputProps,\n  }) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n\n    useEffect(() => {\n      if (open === undefined) return;\n      setUncontrolledOpen(open);\n    }, [open]);\n\n    const resolvedOpen = open ?? uncontrolledOpen;\n\n    const { resolvedItems, hasAnyIcon } = useNormalizedItems(items);\n    const { listRef } = useKeyboardNavigation({ isOpen: resolvedOpen });\n\n    const itemToStringValue = useCallback((item: ItemType) => {\n      const kws = item.keywords?.length ? ` ${item.keywords.join(' ')}` : '';\n      return `${item.label}${kws}`;\n    }, []);\n\n    const handleValueChange = useCallback(\n      (nextValue: string, details: AutocompleteRootChangeEventDetails) => {\n        if (!updateValueOnSelect && details.reason === 'item-press') return;\n        onValueChange?.(nextValue, details);\n      },\n      [onValueChange, updateValueOnSelect],\n    );\n\n    const handleSelect = useCallback(\n      (item: ItemType, details: AutocompleteRootChangeEventDetails) => {\n        onSelect?.(item, details);\n      },\n      [onSelect],\n    );\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, details: AutocompleteRootChangeEventDetails) => {\n        setUncontrolledOpen(nextOpen);\n        onOpenChange?.(nextOpen, details);\n      },\n      [onOpenChange],\n    );\n\n    // Stable ref callback that doesn't depend on listProps object\n    const setListRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        listRef.current = node;\n        const externalRef = (listProps as any)?.ref;\n        if (!externalRef) return;\n        if (typeof externalRef === 'function') {\n          externalRef(node);\n        } else {\n          (externalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n      },\n      [listRef, listProps],\n    );\n\n    // Memoize render props to prevent recreating on every render\n    const menuItemProps = useMemo(\n      () => ({\n        hasAnyIcon,\n        onSelect: handleSelect,\n        renderItem,\n        reserveIconSpace,\n      }),\n      [hasAnyIcon, handleSelect, renderItem, reserveIconSpace],\n    );\n\n    return (\n      <EditorSlashMenuRoot<ItemType>\n        {...(rootProps as any)}\n        defaultOpen={defaultOpen}\n        defaultValue={defaultValue}\n        itemToStringValue={itemToStringValue as any}\n        items={resolvedItems as any}\n        open={open}\n        value={value}\n        onOpenChange={handleOpenChange}\n        onOpenChangeComplete={onOpenChangeComplete}\n        onValueChange={handleValueChange}\n      >\n        {withHiddenInput ? <EditorSlashMenuHiddenInput {...(hiddenInputProps as any)} /> : null}\n\n        <EditorSlashMenuPortal {...(portalProps as any)}>\n          <EditorSlashMenuPositioner {...(positionerProps as any)} anchor={anchor}>\n            <EditorSlashMenuPopup {...(popupProps as any)}>\n              <EditorSlashMenuList {...(listProps as any)} ref={setListRef as any}>\n                {(entry: any) => {\n                  if (isGroup(entry)) {\n                    return (\n                      <EditorSlashMenuGroup\n                        key={entry.label ?? entry.items.map((i: any) => i.value).join('|')}\n                      >\n                        {entry.label\n                          ? (renderGroupLabel?.(entry.label) ?? (\n                              <EditorSlashMenuGroupLabel>{entry.label}</EditorSlashMenuGroupLabel>\n                            ))\n                          : null}\n                        {entry.items.map((item: ItemType) => (\n                          <MenuItemRenderer {...menuItemProps} item={item} key={item.value} />\n                        ))}\n                      </EditorSlashMenuGroup>\n                    );\n                  }\n\n                  const item = entry as ItemType;\n                  return <MenuItemRenderer {...menuItemProps} item={item} key={item.value} />;\n                }}\n              </EditorSlashMenuList>\n\n              <EditorSlashMenuEmpty>{empty}</EditorSlashMenuEmpty>\n            </EditorSlashMenuPopup>\n          </EditorSlashMenuPositioner>\n        </EditorSlashMenuPortal>\n      </EditorSlashMenuRoot>\n    );\n  },\n);\n\nEditorSlashMenu.displayName = 'EditorSlashMenu';\n\nexport default EditorSlashMenu;\n"],"mappings":";;;;;;;;;;;AAqFA,MAAM,kBAAkB,MACrB,EACC,OACA,QAEA,MACA,aACA,cACA,sBAEA,OACA,cACA,eACA,sBAAsB,OAEtB,UAEA,QAAQ,cACR,kBACA,YACA,mBAAmB,MAEnB,WACA,aACA,iBACA,YACA,WAEA,kBAAkB,OAClB,uBACI;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,eAAe,MAAM;AAE9E,iBAAgB;AACd,MAAI,SAAS,OAAW;AACxB,sBAAoB,KAAK;IACxB,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,QAAQ;CAE7B,MAAM,EAAE,eAAe,eAAe,mBAAmB,MAAM;CAC/D,MAAM,EAAE,YAAY,sBAAsB,EAAE,QAAQ,cAAc,CAAC;CAEnE,MAAM,oBAAoB,aAAa,SAAmB;EACxD,MAAM,MAAM,KAAK,UAAU,SAAS,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK;AACpE,SAAO,GAAG,KAAK,QAAQ;IACtB,EAAE,CAAC;CAEN,MAAM,oBAAoB,aACvB,WAAmB,YAAgD;AAClE,MAAI,CAAC,uBAAuB,QAAQ,WAAW,aAAc;AAC7D,kBAAgB,WAAW,QAAQ;IAErC,CAAC,eAAe,oBAAoB,CACrC;CAED,MAAM,eAAe,aAClB,MAAgB,YAAgD;AAC/D,aAAW,MAAM,QAAQ;IAE3B,CAAC,SAAS,CACX;CAED,MAAM,mBAAmB,aACtB,UAAmB,YAAgD;AAClE,sBAAoB,SAAS;AAC7B,iBAAe,UAAU,QAAQ;IAEnC,CAAC,aAAa,CACf;CAGD,MAAM,aAAa,aAChB,SAAgC;AAC/B,UAAQ,UAAU;EAClB,MAAM,cAAe,WAAmB;AACxC,MAAI,CAAC,YAAa;AAClB,MAAI,OAAO,gBAAgB,WACzB,aAAY,KAAK;MAEjB,CAAC,YAA8D,UAAU;IAG7E,CAAC,SAAS,UAAU,CACrB;CAGD,MAAM,gBAAgB,eACb;EACL;EACA,UAAU;EACV;EACA;EACD,GACD;EAAC;EAAY;EAAc;EAAY;EAAiB,CACzD;AAED,QACE,qBAAC;EACC,GAAK;EACQ;EACC;EACK;EACnB,OAAO;EACD;EACC;EACP,cAAc;EACQ;EACtB,eAAe;aAEd,kBAAkB,oBAAC,8BAA2B,GAAK,mBAA4B,GAAG,MAEnF,oBAAC;GAAsB,GAAK;aAC1B,oBAAC;IAA0B,GAAK;IAAiC;cAC/D,qBAAC;KAAqB,GAAK;gBACzB,oBAAC;MAAoB,GAAK;MAAmB,KAAK;iBAC9C,UAAe;AACf,WAAI,QAAQ,MAAM,CAChB,QACE,qBAAC,mCAGE,MAAM,QACF,mBAAmB,MAAM,MAAM,IAC9B,oBAAC,uCAA2B,MAAM,QAAkC,GAEtE,MACH,MAAM,MAAM,KAAK,WAChB,8BAAC;QAAiB,GAAI;QAAe,MAAMA;QAAM,KAAKA,OAAK;SAAS,CACpE,KATG,MAAM,SAAS,MAAM,MAAM,KAAK,MAAW,EAAE,MAAM,CAAC,KAAK,IAAI,CAU7C;OAI3B,MAAM,OAAO;AACb,cAAO,8BAAC;QAAiB,GAAI;QAAqB;QAAM,KAAK,KAAK;SAAS;;OAEzD,EAEtB,oBAAC,kCAAsB,QAA6B;MAC/B;KACG;IACN;GACJ;EAG3B;AAED,gBAAgB,cAAc;AAE9B,8BAAe"}

package/es/EditorSlashMenu/MenuItemRenderer.mjs

@@ -21,6 +21,7 @@ const MenuItemRenderer = memo(({ hasAnyIcon, item, onSelect, renderItem, reserve
 	return /* @__PURE__ */ jsx(EditorSlashMenuItem, {
 		danger: item.danger,
 		disabled: item.disabled,
+		value: item,
 		onClick: (e) => {
 			if (item.disabled) {
 				e.preventDefault();
@@ -31,7 +32,6 @@ const MenuItemRenderer = memo(({ hasAnyIcon, item, onSelect, renderItem, reserve
 				reason: "item-press"
 			});
 		},
-		value: item,
 		children: content
 	}, item.value);
 });

package/es/EditorSlashMenu/MenuItemRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemRenderer.mjs","names":[],"sources":["../../src/EditorSlashMenu/MenuItemRenderer.tsx"],"sourcesContent":["import type { AutocompleteRootChangeEventDetails } from '@base-ui/react/autocomplete';\nimport { memo } from 'react';\n\nimport {\n  EditorSlashMenuItem,\n  EditorSlashMenuItemContent,\n  EditorSlashMenuItemExtra,\n  EditorSlashMenuItemIcon,\n  EditorSlashMenuItemLabel,\n} from './atoms';\nimport type { EditorSlashMenuOption } from './type';\n\ninterface MenuItemRendererProps {\n  hasAnyIcon: boolean;\n  item: EditorSlashMenuOption;\n  onSelect: (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void;\n  renderItem?: (item: EditorSlashMenuOption) => React.ReactNode;\n  reserveIconSpace: boolean;\n}\n\nconst DefaultItemContent = memo<{\n  hasAnyIcon: boolean;\n  item: EditorSlashMenuOption;\n  reserveIconSpace: boolean;\n}>(({ item, hasAnyIcon, reserveIconSpace }) => (\n  <EditorSlashMenuItemContent>\n    <EditorSlashMenuItemIcon aria-hidden={!hasAnyIcon && !reserveIconSpace}>\n      {item.icon ?? (reserveIconSpace && hasAnyIcon ? <span /> : null)}\n    </EditorSlashMenuItemIcon>\n    <EditorSlashMenuItemLabel>{item.label}</EditorSlashMenuItemLabel>\n    {item.extra ? <EditorSlashMenuItemExtra>{item.extra}</EditorSlashMenuItemExtra> : null}\n  </EditorSlashMenuItemContent>\n));\n\nDefaultItemContent.displayName = 'DefaultItemContent';\n\nexport const MenuItemRenderer = memo<MenuItemRendererProps>(\n  ({ hasAnyIcon, item, onSelect, renderItem, reserveIconSpace }) => {\n    const content = renderItem?.(item) ?? (\n      <DefaultItemContent hasAnyIcon={hasAnyIcon} item={item} reserveIconSpace={reserveIconSpace} />\n    );\n\n    return (\n      <EditorSlashMenuItem\n        danger={item.danger}\n        disabled={item.disabled}\n        key={item.value}\n        onClick={(e) => {\n          if (item.disabled) {\n            e.preventDefault();\n            return;\n          }\n          onSelect(item, { event: e as any, reason: 'item-press' } as any);\n        }}\n        value={item as any}\n      >\n        {content}\n      </EditorSlashMenuItem>\n    );\n  },\n);\n\nMenuItemRenderer.displayName = 'MenuItemRenderer';\n"],"mappings":";;;;;AAoBA,MAAM,qBAAqB,MAIvB,EAAE,MAAM,YAAY,uBACtB,qBAAC;CACC,oBAAC;EAAwB,eAAa,CAAC,cAAc,CAAC;YACnD,KAAK,SAAS,oBAAoB,aAAa,oBAAC,WAAO,GAAG;GACnC;CAC1B,oBAAC,sCAA0B,KAAK,QAAiC;CAChE,KAAK,QAAQ,oBAAC,sCAA0B,KAAK,QAAiC,GAAG;IACvD,CAC7B;AAEF,mBAAmB,cAAc;AAEjC,MAAa,mBAAmB,MAC7B,EAAE,YAAY,MAAM,UAAU,YAAY,uBAAuB;CAChE,MAAM,UAAU,aAAa,KAAK,IAChC,oBAAC;EAA+B;EAAkB;EAAwB;GAAoB;AAGhG,QACE,oBAAC;EACC,QAAQ,KAAK;EACb,UAAU,KAAK;EAEf,UAAU,MAAM;AACd,OAAI,KAAK,UAAU;AACjB,MAAE,gBAAgB;AAClB;;AAEF,YAAS,MAAM;IAAE,OAAO;IAAU,QAAQ;IAAc,CAAQ;;EAElE,OAAO;YAEN;IAVI,KAAK,MAWU;EAG3B;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"MenuItemRenderer.mjs","names":[],"sources":["../../src/EditorSlashMenu/MenuItemRenderer.tsx"],"sourcesContent":["import type { AutocompleteRootChangeEventDetails } from '@base-ui/react/autocomplete';\nimport { memo } from 'react';\n\nimport {\n  EditorSlashMenuItem,\n  EditorSlashMenuItemContent,\n  EditorSlashMenuItemExtra,\n  EditorSlashMenuItemIcon,\n  EditorSlashMenuItemLabel,\n} from './atoms';\nimport type { EditorSlashMenuOption } from './type';\n\ninterface MenuItemRendererProps {\n  hasAnyIcon: boolean;\n  item: EditorSlashMenuOption;\n  onSelect: (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void;\n  renderItem?: (item: EditorSlashMenuOption) => React.ReactNode;\n  reserveIconSpace: boolean;\n}\n\nconst DefaultItemContent = memo<{\n  hasAnyIcon: boolean;\n  item: EditorSlashMenuOption;\n  reserveIconSpace: boolean;\n}>(({ item, hasAnyIcon, reserveIconSpace }) => (\n  <EditorSlashMenuItemContent>\n    <EditorSlashMenuItemIcon aria-hidden={!hasAnyIcon && !reserveIconSpace}>\n      {item.icon ?? (reserveIconSpace && hasAnyIcon ? <span /> : null)}\n    </EditorSlashMenuItemIcon>\n    <EditorSlashMenuItemLabel>{item.label}</EditorSlashMenuItemLabel>\n    {item.extra ? <EditorSlashMenuItemExtra>{item.extra}</EditorSlashMenuItemExtra> : null}\n  </EditorSlashMenuItemContent>\n));\n\nDefaultItemContent.displayName = 'DefaultItemContent';\n\nexport const MenuItemRenderer = memo<MenuItemRendererProps>(\n  ({ hasAnyIcon, item, onSelect, renderItem, reserveIconSpace }) => {\n    const content = renderItem?.(item) ?? (\n      <DefaultItemContent hasAnyIcon={hasAnyIcon} item={item} reserveIconSpace={reserveIconSpace} />\n    );\n\n    return (\n      <EditorSlashMenuItem\n        danger={item.danger}\n        disabled={item.disabled}\n        key={item.value}\n        value={item as any}\n        onClick={(e) => {\n          if (item.disabled) {\n            e.preventDefault();\n            return;\n          }\n          onSelect(item, { event: e as any, reason: 'item-press' } as any);\n        }}\n      >\n        {content}\n      </EditorSlashMenuItem>\n    );\n  },\n);\n\nMenuItemRenderer.displayName = 'MenuItemRenderer';\n"],"mappings":";;;;;AAoBA,MAAM,qBAAqB,MAIvB,EAAE,MAAM,YAAY,uBACtB,qBAAC;CACC,oBAAC;EAAwB,eAAa,CAAC,cAAc,CAAC;YACnD,KAAK,SAAS,oBAAoB,aAAa,oBAAC,WAAO,GAAG;GACnC;CAC1B,oBAAC,sCAA0B,KAAK,QAAiC;CAChE,KAAK,QAAQ,oBAAC,sCAA0B,KAAK,QAAiC,GAAG;IACvD,CAC7B;AAEF,mBAAmB,cAAc;AAEjC,MAAa,mBAAmB,MAC7B,EAAE,YAAY,MAAM,UAAU,YAAY,uBAAuB;CAChE,MAAM,UAAU,aAAa,KAAK,IAChC,oBAAC;EAA+B;EAAkB;EAAwB;GAAoB;AAGhG,QACE,oBAAC;EACC,QAAQ,KAAK;EACb,UAAU,KAAK;EAEf,OAAO;EACP,UAAU,MAAM;AACd,OAAI,KAAK,UAAU;AACjB,MAAE,gBAAgB;AAClB;;AAEF,YAAS,MAAM;IAAE,OAAO;IAAU,QAAQ;IAAc,CAAQ;;YAGjE;IAVI,KAAK,MAWU;EAG3B;AAED,iBAAiB,cAAc"}