@mattermost/compass-ui 0.1.0-alpha.15 → 0.1.0-alpha.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/dist/components/admin-console-footer/AdminConsoleFooter.cjs +2 -0
  2. package/dist/components/admin-console-footer/AdminConsoleFooter.cjs.map +1 -0
  3. package/dist/components/admin-console-footer/AdminConsoleFooter.css +1 -0
  4. package/dist/components/admin-console-footer/AdminConsoleFooter.d.ts +27 -0
  5. package/dist/components/admin-console-footer/AdminConsoleFooter.d.ts.map +1 -0
  6. package/dist/components/admin-console-footer/AdminConsoleFooter.js +84 -0
  7. package/dist/components/admin-console-footer/AdminConsoleFooter.js.map +1 -0
  8. package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.cjs +2 -0
  9. package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.cjs.map +1 -0
  10. package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.js +13 -0
  11. package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.js.map +1 -0
  12. package/dist/components/admin-console-footer/index.cjs +2 -0
  13. package/dist/components/admin-console-footer/index.cjs.map +1 -0
  14. package/dist/components/admin-console-footer/index.d.ts +3 -0
  15. package/dist/components/admin-console-footer/index.d.ts.map +1 -0
  16. package/dist/components/admin-console-footer/index.js +5 -0
  17. package/dist/components/admin-console-footer/index.js.map +1 -0
  18. package/dist/components/admin-panel/AdminPanel.cjs +1 -1
  19. package/dist/components/admin-panel/AdminPanel.cjs.map +1 -1
  20. package/dist/components/admin-panel/AdminPanel.d.ts +41 -9
  21. package/dist/components/admin-panel/AdminPanel.d.ts.map +1 -1
  22. package/dist/components/admin-panel/AdminPanel.js +91 -81
  23. package/dist/components/admin-panel/AdminPanel.js.map +1 -1
  24. package/dist/components/admin-panel-footer/AdminPanelFooter.cjs +1 -1
  25. package/dist/components/admin-panel-footer/AdminPanelFooter.cjs.map +1 -1
  26. package/dist/components/admin-panel-footer/AdminPanelFooter.css +1 -1
  27. package/dist/components/admin-panel-footer/AdminPanelFooter.d.ts +18 -21
  28. package/dist/components/admin-panel-footer/AdminPanelFooter.d.ts.map +1 -1
  29. package/dist/components/admin-panel-footer/AdminPanelFooter.js +24 -61
  30. package/dist/components/admin-panel-footer/AdminPanelFooter.js.map +1 -1
  31. package/dist/components/admin-panel-footer/AdminPanelFooter.module.scss.cjs +1 -1
  32. package/dist/components/admin-panel-footer/AdminPanelFooter.module.scss.js +7 -9
  33. package/dist/components/admin-panel-footer/AdminPanelFooter.module.scss.js.map +1 -1
  34. package/dist/components/admin-panel-footer/index.d.ts +1 -1
  35. package/dist/components/admin-panel-footer/index.d.ts.map +1 -1
  36. package/dist/components/admin-panel-header/AdminPanelHeader.cjs.map +1 -1
  37. package/dist/components/admin-panel-header/AdminPanelHeader.d.ts +3 -2
  38. package/dist/components/admin-panel-header/AdminPanelHeader.d.ts.map +1 -1
  39. package/dist/components/admin-panel-header/AdminPanelHeader.js.map +1 -1
  40. package/dist/components/channel-sidebar-item/ChannelSidebarItem.css +1 -1
  41. package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.cjs +1 -1
  42. package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js +22 -22
  43. package/dist/components/checkbox/Checkbox.css +1 -1
  44. package/dist/components/checkbox/Checkbox.module.scss.cjs +1 -1
  45. package/dist/components/checkbox/Checkbox.module.scss.js +10 -10
  46. package/dist/components/chip/Chip.css +1 -1
  47. package/dist/components/chip/Chip.module.scss.cjs +1 -1
  48. package/dist/components/chip/Chip.module.scss.js +12 -12
  49. package/dist/components/combobox/Combobox.cjs +1 -1
  50. package/dist/components/combobox/Combobox.cjs.map +1 -1
  51. package/dist/components/combobox/Combobox.css +1 -1
  52. package/dist/components/combobox/Combobox.d.ts +14 -0
  53. package/dist/components/combobox/Combobox.d.ts.map +1 -1
  54. package/dist/components/combobox/Combobox.js +240 -224
  55. package/dist/components/combobox/Combobox.js.map +1 -1
  56. package/dist/components/combobox/Combobox.module.scss.cjs +1 -1
  57. package/dist/components/combobox/Combobox.module.scss.js +21 -21
  58. package/dist/components/menu-item/MenuItem.cjs.map +1 -1
  59. package/dist/components/menu-item/MenuItem.css +1 -1
  60. package/dist/components/menu-item/MenuItem.d.ts +20 -0
  61. package/dist/components/menu-item/MenuItem.d.ts.map +1 -1
  62. package/dist/components/menu-item/MenuItem.js.map +1 -1
  63. package/dist/components/menu-item/MenuItem.module.scss.cjs +1 -1
  64. package/dist/components/menu-item/MenuItem.module.scss.js +16 -16
  65. package/dist/components/menu-item/index.d.ts +1 -1
  66. package/dist/components/menu-item/index.d.ts.map +1 -1
  67. package/dist/components/radio/Radio.css +1 -1
  68. package/dist/components/radio/Radio.module.scss.cjs +1 -1
  69. package/dist/components/radio/Radio.module.scss.js +12 -12
  70. package/dist/components/section-notice/SectionNotice.cjs +1 -1
  71. package/dist/components/section-notice/SectionNotice.cjs.map +1 -1
  72. package/dist/components/section-notice/SectionNotice.css +1 -1
  73. package/dist/components/section-notice/SectionNotice.js +17 -17
  74. package/dist/components/section-notice/SectionNotice.js.map +1 -1
  75. package/dist/components/section-notice/SectionNotice.module.scss.cjs +1 -1
  76. package/dist/components/section-notice/SectionNotice.module.scss.js +12 -12
  77. package/dist/components/select/Select.cjs +1 -1
  78. package/dist/components/select/Select.cjs.map +1 -1
  79. package/dist/components/select/Select.css +1 -1
  80. package/dist/components/select/Select.d.ts +16 -0
  81. package/dist/components/select/Select.d.ts.map +1 -1
  82. package/dist/components/select/Select.js +177 -157
  83. package/dist/components/select/Select.js.map +1 -1
  84. package/dist/components/select/Select.module.scss.cjs +1 -1
  85. package/dist/components/select/Select.module.scss.js +20 -20
  86. package/dist/components/switch/Switch.css +1 -1
  87. package/dist/components/switch/Switch.module.scss.cjs +1 -1
  88. package/dist/components/switch/Switch.module.scss.js +9 -9
  89. package/dist/index.cjs +1 -1
  90. package/dist/index.d.ts +1 -0
  91. package/dist/index.d.ts.map +1 -1
  92. package/dist/index.js +168 -166
  93. package/dist/index.js.map +1 -1
  94. package/dist/utils/menuItemProps.cjs +2 -0
  95. package/dist/utils/menuItemProps.cjs.map +1 -0
  96. package/dist/utils/menuItemProps.d.ts +5 -0
  97. package/dist/utils/menuItemProps.d.ts.map +1 -0
  98. package/dist/utils/menuItemProps.js +12 -0
  99. package/dist/utils/menuItemProps.js.map +1 -0
  100. package/package.json +4 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.js","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n} from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport PlusIcon from '@mattermost/compass-icons/components/plus';\nimport Chip from '@/components/chip/Chip';\nimport ChipGroup from '@/components/chip/ChipGroup';\nimport type { ChipSize } from '@/components/chip/Chip';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport Spinner from '@/components/spinner/Spinner';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Combobox.module.scss';\n\nexport type ComboboxSize = 'small' | 'medium' | 'large';\n\nexport type ComboboxOption = {\n value: string;\n /** Kept as `string`: the default filter, create-row matching, and the single-select input text all read it. */\n label: string;\n disabled?: boolean;\n /** Leading content for the list row (icon or avatar node). */\n leadingVisual?: ReactNode;\n /** Avatar for chips / list when a photo is preferred over `leadingVisual`. */\n leadingAvatar?: { src: string; alt: string };\n /** Accepts translated nodes. */\n secondaryLabel?: ReactNode;\n};\n\nexport interface ComboboxProps {\n options: ComboboxOption[];\n /** When true, selected values render as removable chips. Default: false. */\n multiple?: boolean;\n value?: string | string[] | null;\n defaultValue?: string | string[] | null;\n onChange?: (value: string | string[] | null) => void;\n inputValue?: string;\n defaultInputValue?: string;\n onInputChange?: (value: string) => void;\n label?: ReactNode;\n placeholder?: string;\n leadingIcon?: ReactNode;\n size?: ComboboxSize;\n invalid?: boolean;\n disabled?: boolean;\n /**\n * Client-side filter. `true` (default) matches labels case-insensitively.\n * `false` shows all options (caller filters via `inputValue` / `onInputChange`).\n */\n filter?: boolean | ((option: ComboboxOption, query: string) => boolean);\n /** Shown when there are no rows to pick from. Default: \"No results\". */\n emptyMessage?: ReactNode;\n /**\n * When true, the menu shows a loading row (with Spinner) in place of the\n * empty message. Set while async results are in flight.\n */\n loading?: boolean;\n /** Loading row text. Default: \"Loading…\". */\n loadingMessage?: ReactNode;\n /**\n * Option objects for the current value(s), used for chips and the\n * single-select label when a value is missing from `options` (e.g. an async\n * search that no longer returns it, or values preselected on load). Values\n * found in `options` resolve from there first.\n */\n selectedOptions?: ComboboxOption[];\n /**\n * When true, typed text that matches no option offers a create row. Created\n * values not found in `options` or `selectedOptions` display their raw value\n * as the label.\n */\n creatable?: boolean;\n /**\n * Called with the trimmed input when the create row is chosen. When set, the\n * host owns adding the value (`onChange` is not called). When omitted, the\n * input is committed as the value through `onChange`.\n */\n onCreateOption?: (inputValue: string) => void;\n /** Create row label. Default: `Create \"{inputValue}\"`. */\n formatCreateLabel?: (inputValue: string) => ReactNode;\n /**\n * Single mode: when a value is set, shows a clear button inside the control\n * that calls `onChange(null)`. Ignored with `multiple` (chips have their own\n * remove control). Default: false.\n */\n clearable?: boolean;\n /** Accessible name for the clear button. Default: \"Clear\". */\n clearLabel?: string;\n /** Extra attributes for the clear button (e.g. `data-testid`). */\n clearButtonProps?: BuiltInButtonProps;\n /**\n * Accessible name for the chip group in `multiple` mode. Default:\n * `{label} selections` when `label` is a string, otherwise \"Selected\".\n */\n selectionsLabel?: string;\n /**\n * Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n */\n listboxLabel?: string;\n className?: string;\n id?: string;\n 'aria-label'?: string;\n /** Portal mount node for the menu; defaults to `document.body`. */\n portalContainer?: HTMLElement | null;\n /** Stacking order for the portaled menu. */\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nconst CHIP_SIZE_BY_COMBOBOX: Record<ComboboxSize, ChipSize> = {\n small: 'small',\n medium: 'medium',\n large: 'large',\n};\n\nconst CLEAR_ICON_SIZE: Record<ComboboxSize, IconSize> = {\n small: '12',\n medium: '16',\n large: '16',\n};\n\nfunction defaultSelectionsLabel(label: ReactNode): string {\n return typeof label === 'string' ? `${label} selections` : 'Selected';\n}\n\ntype ComboboxRow =\n | { kind: 'option'; option: ComboboxOption }\n | { kind: 'create'; inputValue: string };\n\nfunction defaultFormatCreateLabel(inputValue: string): ReactNode {\n return `Create \"${inputValue}\"`;\n}\n\nfunction isRowDisabled(row: ComboboxRow): boolean {\n return row.kind === 'option' && row.option.disabled === true;\n}\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n if (!query) return true;\n return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction toSingleValue(\n value: string | string[] | null | undefined,\n): string | null {\n if (value == null) return null;\n if (Array.isArray(value)) return value[0] ?? null;\n return value === '' ? null : value;\n}\n\nfunction toMultiValue(value: string | string[] | null | undefined): string[] {\n if (value == null) return [];\n if (Array.isArray(value)) return value;\n return value === '' ? [] : [value];\n}\n\nfunction optionLeadingVisual(option: ComboboxOption): ReactNode | undefined {\n if (option.leadingVisual != null) return option.leadingVisual;\n if (option.leadingAvatar != null) {\n return (\n <UserAvatar\n src={option.leadingAvatar.src}\n alt={option.leadingAvatar.alt}\n size=\"24\"\n />\n );\n }\n return undefined;\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, { value: 'engineering', label: 'Engineering' }, {\n * value: 'releases', label: 'Releases' }, ];\n */\nconst Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n {\n options,\n multiple = false,\n value: valueProp,\n defaultValue,\n onChange,\n inputValue: inputValueProp,\n defaultInputValue = '',\n onInputChange,\n label,\n placeholder,\n leadingIcon,\n size = 'medium',\n invalid = false,\n disabled = false,\n filter = true,\n emptyMessage = 'No results',\n loading = false,\n loadingMessage = 'Loading…',\n selectedOptions,\n creatable = false,\n onCreateOption,\n formatCreateLabel = defaultFormatCreateLabel,\n clearable = false,\n clearLabel = 'Clear',\n clearButtonProps,\n selectionsLabel,\n listboxLabel = 'Options',\n className = '',\n id: idProp,\n 'aria-label': ariaLabel,\n portalContainer = null,\n zIndex,\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const setInputRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isValueControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState<\n string | string[] | null\n >(() => {\n if (defaultValue !== undefined) return defaultValue;\n return multiple ? [] : null;\n });\n\n const rawValue = isValueControlled ? valueProp! : uncontrolledValue;\n const singleValue = multiple ? null : toSingleValue(rawValue);\n const multiValue = useMemo(\n () => (multiple ? toMultiValue(rawValue) : []),\n [multiple, rawValue],\n );\n\n const isInputControlled = inputValueProp !== undefined;\n const [uncontrolledInput, setUncontrolledInput] = useState(defaultInputValue);\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const [queryOverride, setQueryOverride] = useState<string | null>(null);\n\n const resolveOption = useCallback(\n (optionValue: string): ComboboxOption | undefined =>\n options.find((o) => o.value === optionValue) ??\n selectedOptions?.find((o) => o.value === optionValue) ??\n (creatable ? { value: optionValue, label: optionValue } : undefined),\n [options, selectedOptions, creatable],\n );\n\n const selectedOption = useMemo(\n () => (singleValue == null ? undefined : resolveOption(singleValue)),\n [resolveOption, singleValue],\n );\n\n // Single-select: show the selected label until the user starts typing a filter.\n // `queryOverride !== null` means the field is in filter-edit mode.\n const displayInput = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return selectedOption?.label ?? uncontrolledInput;\n })();\n\n const filterQuery = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return '';\n })();\n\n const setInputDisplay = useCallback(\n (next: string) => {\n if (!isInputControlled) {\n setUncontrolledInput(next);\n if (!multiple) setQueryOverride(next);\n }\n onInputChange?.(next);\n },\n [isInputControlled, multiple, onInputChange],\n );\n\n const commitValue = useCallback(\n (next: string | string[] | null) => {\n if (!isValueControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isValueControlled, onChange],\n );\n\n const filteredOptions = useMemo(() => {\n if (filter === false) return options;\n const fn = typeof filter === 'function' ? filter : defaultFilter;\n return options.filter((o) => fn(o, filterQuery));\n }, [options, filter, filterQuery]);\n\n const createInput = creatable ? filterQuery.trim() : '';\n const showCreateRow = useMemo(() => {\n if (createInput === '') return false;\n const needle = createInput.toLowerCase();\n const matches = (text: string) => text.toLowerCase() === needle;\n const knownOptions = [...options, ...(selectedOptions ?? [])];\n if (knownOptions.some((o) => matches(o.label) || matches(o.value))) {\n return false;\n }\n const current = multiple\n ? multiValue\n : singleValue != null\n ? [singleValue]\n : [];\n return !current.some(matches);\n }, [\n createInput,\n options,\n selectedOptions,\n multiple,\n multiValue,\n singleValue,\n ]);\n\n const rows = useMemo<ComboboxRow[]>(\n () => [\n ...filteredOptions.map((option) => ({ kind: 'option' as const, option })),\n ...(showCreateRow\n ? [{ kind: 'create' as const, inputValue: createInput }]\n : []),\n ],\n [filteredOptions, showCreateRow, createInput],\n );\n\n const rowId = useCallback(\n (row: ComboboxRow) =>\n row.kind === 'option'\n ? `${listboxId}-option-${row.option.value}`\n : `${listboxId}-create`,\n [listboxId],\n );\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n if (!multiple && !isInputControlled) {\n setQueryOverride(null);\n setUncontrolledInput('');\n }\n }, [multiple, isInputControlled]);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (rows.length === 0) return -1;\n if (prev >= 0 && prev < rows.length) return prev;\n const selectedIdx = rows.findIndex(\n (row) =>\n row.kind === 'option' &&\n (multiple\n ? multiValue.includes(row.option.value)\n : row.option.value === singleValue),\n );\n return selectedIdx >= 0 ? selectedIdx : 0;\n });\n }, [isOpen, rows, multiple, multiValue, singleValue]);\n\n const isSelected = useCallback(\n (optionValue: string) =>\n multiple ? multiValue.includes(optionValue) : singleValue === optionValue,\n [multiple, multiValue, singleValue],\n );\n\n const selectOption = useCallback(\n (option: ComboboxOption) => {\n if (option.disabled) return;\n\n if (multiple) {\n const next = multiValue.includes(option.value)\n ? multiValue.filter((v) => v !== option.value)\n : [...multiValue, option.value];\n commitValue(next);\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n\n commitValue(option.value);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(option.label);\n }\n close();\n },\n [\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const createValue = useCallback(\n (inputValue: string) => {\n if (onCreateOption) {\n onCreateOption(inputValue);\n } else if (multiple) {\n commitValue([...multiValue, inputValue]);\n } else {\n commitValue(inputValue);\n }\n\n if (multiple) {\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(inputValue);\n }\n close();\n },\n [\n onCreateOption,\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const selectRow = useCallback(\n (row: ComboboxRow) => {\n if (row.kind === 'create') createValue(row.inputValue);\n else selectOption(row.option);\n },\n [createValue, selectOption],\n );\n\n const clearValue = useCallback(() => {\n commitValue(null);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.('');\n }\n inputRef.current?.focus();\n }, [commitValue, isInputControlled, onInputChange]);\n\n const removeValue = useCallback(\n (optionValue: string) => {\n if (!multiple) return;\n commitValue(multiValue.filter((v) => v !== optionValue));\n },\n [multiple, multiValue, commitValue],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n const enabled = rows\n .map((row, i) => ({ row, i }))\n .filter(({ row }) => !isRowDisabled(row));\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [rows],\n );\n\n useEffect(() => {\n if (!isOpen || activeIndex < 0) return;\n const row = rows[activeIndex];\n if (!row) return;\n document.getElementById(rowId(row))?.scrollIntoView?.({ block: 'nearest' });\n }, [isOpen, activeIndex, rows, rowId]);\n\n const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const next = e.target.value;\n setInputDisplay(next);\n if (!isOpen) open();\n setActiveIndex(0);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n open();\n // Select-all so the next keystroke replaces the selected label (filter mode).\n if (!multiple && !isInputControlled && selectedOption) {\n requestAnimationFrame(() => {\n inputRef.current?.select();\n });\n }\n };\n\n const handleBlur = (e: FocusEvent<HTMLElement>) => {\n // Delay so option mousedown can run first\n const related = e.relatedTarget as Node | null;\n if (related && rootRef.current?.contains(related)) return;\n setIsFocused(false);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n setActiveIndex(\n Math.max(\n 0,\n rows.findIndex((row) => !isRowDisabled(row)),\n ),\n );\n }\n break;\n case 'End':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n for (let i = rows.length - 1; i >= 0; i--) {\n if (!isRowDisabled(rows[i])) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n if (isOpen && activeIndex >= 0 && rows[activeIndex]) {\n e.preventDefault();\n selectRow(rows[activeIndex]);\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n close();\n }\n break;\n case 'Backspace':\n if (multiple && displayInput === '' && multiValue.length > 0) {\n e.preventDefault();\n removeValue(multiValue[multiValue.length - 1]);\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const handleWrapperMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n // Don't steal focus from chips, their remove buttons, or the clear button\n if ((e.target as HTMLElement).closest('[data-chip], [data-combobox-clear]'))\n return;\n if (e.target !== inputRef.current) {\n e.preventDefault();\n inputRef.current?.focus();\n }\n if (!isOpen) open();\n };\n\n const hasSelection = multiple\n ? multiValue.length > 0\n : singleValue != null && singleValue !== '';\n const hasInputText = displayInput.length > 0;\n const showClearButton = clearable && !multiple && hasSelection && !disabled;\n const labelFloated = isFocused || isOpen || hasSelection || hasInputText;\n\n const activeRow = activeIndex >= 0 ? rows[activeIndex] : undefined;\n const activeDescendant = activeRow != null ? rowId(activeRow) : undefined;\n\n // Without `selectedOptions`, values in `options` keep their list order (the\n // original behavior); with it, chips follow value order so they don't jump\n // around as async results change.\n const chipOptions = useMemo<ComboboxOption[]>(() => {\n if (!multiple) return [];\n if (selectedOptions == null) {\n const fromOptions = options.filter((o) => multiValue.includes(o.value));\n if (!creatable) return fromOptions;\n const listed = new Set(fromOptions.map((o) => o.value));\n return [\n ...fromOptions,\n ...multiValue\n .filter((v) => !listed.has(v))\n .map((v) => ({ value: v, label: v })),\n ];\n }\n return multiValue\n .map(resolveOption)\n .filter((o): o is ComboboxOption => o != null);\n }, [\n multiple,\n selectedOptions,\n options,\n multiValue,\n creatable,\n resolveOption,\n ]);\n\n const sizeClass = styles[`combobox--size-${toKebab(size)}`];\n const hasChips = multiple && chipOptions.length > 0;\n const rootClass = [\n styles.combobox,\n sizeClass,\n invalid ? styles['combobox--invalid'] : '',\n label != null && labelFloated ? styles['combobox--label-floated'] : '',\n leadingIcon != null ? styles['combobox--has-leading-icon'] : '',\n hasChips ? styles['combobox--has-chips'] : '',\n isOpen ? styles['combobox--open'] : '',\n disabled ? styles['combobox--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div className={styles.combobox__wrapper} ref={anchorRef}>\n {label != null && (\n <label className={styles.combobox__label} htmlFor={id}>\n {label}\n </label>\n )}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- pointer convenience; the input owns keyboard interaction */}\n <div\n className={styles.combobox__inner}\n onMouseDown={handleWrapperMouseDown}\n >\n {leadingIcon != null && (\n <span className={styles['combobox__leading-icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\n </span>\n )}\n <div className={styles.combobox__value}>\n {multiple && chipOptions.length > 0 && (\n <ChipGroup\n aria-label={selectionsLabel ?? defaultSelectionsLabel(label)}\n disabled={disabled}\n >\n {chipOptions.map((option) => (\n <Chip\n key={option.value}\n size={CHIP_SIZE_BY_COMBOBOX[size]}\n leadingAvatar={option.leadingAvatar}\n leadingIcon={\n option.leadingAvatar == null\n ? option.leadingVisual\n : undefined\n }\n onRemove={\n disabled\n ? undefined\n : (ev) => {\n ev.stopPropagation();\n removeValue(option.value);\n }\n }\n >\n {option.label}\n </Chip>\n ))}\n </ChipGroup>\n )}\n <input\n ref={setInputRef}\n id={id}\n className={styles.combobox__control}\n type=\"text\"\n role=\"combobox\"\n autoComplete=\"off\"\n spellCheck={false}\n disabled={disabled}\n placeholder={\n multiple && chipOptions.length > 0 ? undefined : placeholder\n }\n value={displayInput}\n aria-label={ariaLabel}\n aria-invalid={invalid ? true : undefined}\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeDescendant}\n aria-busy={loading || undefined}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n />\n </div>\n {showClearButton && (\n <button\n {...clearButtonProps}\n type=\"button\"\n className={mergeClassNames(\n styles.combobox__clear,\n clearButtonProps?.className,\n )}\n aria-label={clearLabel}\n data-combobox-clear=\"\"\n onClick={clearValue}\n onBlur={(e) => {\n clearButtonProps?.onBlur?.(e);\n handleBlur(e);\n }}\n >\n <Icon size={CLEAR_ICON_SIZE[size]} glyph={<CloseCircleIcon />} />\n </button>\n )}\n <span className={styles['combobox__trailing-icon']} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </div>\n </div>\n\n {popupMounted &&\n renderPortal(\n <div\n ref={portalRef}\n className={[\n styles.combobox__popup,\n placement === 'above' ? styles['combobox__popup--above'] : '',\n popupVisible ? styles['combobox__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n >\n <PopoverMenu className={styles.combobox__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n {rows.length > 0 && (\n <ul\n id={listboxId}\n className={styles.combobox__list}\n role=\"listbox\"\n aria-multiselectable={multiple || undefined}\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {rows.map((row, index) => {\n const active = index === activeIndex;\n const preventBlur = (ev: MouseEvent) => {\n // Prevent input blur before click handler\n ev.preventDefault();\n };\n if (row.kind === 'create') {\n return (\n <li\n key={rowId(row)}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n id={rowId(row)}\n role=\"option\"\n label={formatCreateLabel(row.inputValue)}\n leadingVisual={<Icon glyph={<PlusIcon />} />}\n active={active}\n aria-selected={false}\n onMouseDown={preventBlur}\n onMouseEnter={() => setActiveIndex(index)}\n onClick={() => createValue(row.inputValue)}\n />\n </li>\n );\n }\n const { option } = row;\n const selected = isSelected(option.value);\n const leading = optionLeadingVisual(option);\n return (\n <li\n key={option.value}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n id={rowId(row)}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={leading != null}\n leadingVisual={leading}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={preventBlur}\n onMouseEnter={() => setActiveIndex(index)}\n onClick={() => selectOption(option)}\n />\n </li>\n );\n })}\n </ul>\n )}\n {loading ? (\n <div className={styles.combobox__loading} role=\"status\">\n <Spinner size=\"16\" aria-hidden />\n <span>{loadingMessage}</span>\n </div>\n ) : (\n rows.length === 0 && (\n <p className={styles.combobox__empty}>{emptyMessage}</p>\n )\n )}\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Combobox;\n"],"names":["POPUP_MAX_HEIGHT","CHIP_SIZE_BY_COMBOBOX","CLEAR_ICON_SIZE","defaultSelectionsLabel","label","defaultFormatCreateLabel","inputValue","isRowDisabled","row","defaultFilter","option","query","toSingleValue","value","toMultiValue","optionLeadingVisual","jsx","UserAvatar","Combobox","forwardRef","options","multiple","valueProp","defaultValue","onChange","inputValueProp","defaultInputValue","onInputChange","placeholder","leadingIcon","size","invalid","disabled","filter","emptyMessage","loading","loadingMessage","selectedOptions","creatable","onCreateOption","formatCreateLabel","clearable","clearLabel","clearButtonProps","selectionsLabel","listboxLabel","className","idProp","ariaLabel","portalContainer","zIndex","ref","generatedId","useId","id","listboxId","rootRef","useRef","anchorRef","inputRef","setInputRef","useCallback","node","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","rawValue","singleValue","multiValue","useMemo","isInputControlled","uncontrolledInput","setUncontrolledInput","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","queryOverride","setQueryOverride","resolveOption","optionValue","o","selectedOption","displayInput","filterQuery","setInputDisplay","next","commitValue","filteredOptions","fn","createInput","showCreateRow","needle","matches","text","rows","rowId","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","isSelected","selectOption","v","_a","createValue","selectRow","clearValue","removeValue","moveActive","delta","enabled","i","currentPos","nextPos","_b","handleInputChange","handleFocus","handleBlur","related","handleKeyDown","handleWrapperMouseDown","hasSelection","hasInputText","showClearButton","labelFloated","activeRow","activeDescendant","chipOptions","fromOptions","listed","sizeClass","styles","toKebab","hasChips","rootClass","jsxs","IconSlotContext","ChipGroup","Chip","ev","mergeClassNames","Icon","CloseCircleIcon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","index","active","preventBlur","MenuItem","PlusIcon","selected","leading","Spinner"],"mappings":"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"}
1
+ {"version":3,"file":"Combobox.js","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n} from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport PlusIcon from '@mattermost/compass-icons/components/plus';\nimport Chip from '@/components/chip/Chip';\nimport ChipGroup from '@/components/chip/ChipGroup';\nimport type { ChipSize } from '@/components/chip/Chip';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport type {\n MenuItemOwnedProps,\n MenuItemPassthroughProps,\n} from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport Spinner from '@/components/spinner/Spinner';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeMenuItemProps } from '@/utils/menuItemProps';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Combobox.module.scss';\n\nexport type ComboboxSize = 'small' | 'medium' | 'large';\n\n// Combobox rows use `onClick`, so `onPointerUp` is left for callers.\ntype ComboboxMenuItemProps = MenuItemPassthroughProps<\n Exclude<MenuItemOwnedProps, 'onPointerUp'>\n>;\n\nexport type ComboboxOption = {\n value: string;\n /** Kept as `string`: the default filter, create-row matching, and the single-select input text all read it. */\n label: string;\n disabled?: boolean;\n /** Leading content for the list row (icon or avatar node). */\n leadingVisual?: ReactNode;\n /** Avatar for chips / list when a photo is preferred over `leadingVisual`. */\n leadingAvatar?: { src: string; alt: string };\n /** Accepts translated nodes. */\n secondaryLabel?: ReactNode;\n /**\n * Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,\n * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the\n * Combobox; the props Combobox owns (ARIA, selection, handlers) can't be set.\n */\n menuItemProps?: ComboboxMenuItemProps;\n};\n\nexport interface ComboboxProps {\n options: ComboboxOption[];\n /**\n * `MenuItem` props applied to every option row, e.g.\n * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own\n * `menuItemProps` wins. Not applied to the create row.\n */\n menuItemProps?: ComboboxMenuItemProps;\n /** When true, selected values render as removable chips. Default: false. */\n multiple?: boolean;\n value?: string | string[] | null;\n defaultValue?: string | string[] | null;\n onChange?: (value: string | string[] | null) => void;\n inputValue?: string;\n defaultInputValue?: string;\n onInputChange?: (value: string) => void;\n label?: ReactNode;\n placeholder?: string;\n leadingIcon?: ReactNode;\n size?: ComboboxSize;\n invalid?: boolean;\n disabled?: boolean;\n /**\n * Client-side filter. `true` (default) matches labels case-insensitively.\n * `false` shows all options (caller filters via `inputValue` / `onInputChange`).\n */\n filter?: boolean | ((option: ComboboxOption, query: string) => boolean);\n /** Shown when there are no rows to pick from. Default: \"No results\". */\n emptyMessage?: ReactNode;\n /**\n * When true, the menu shows a loading row (with Spinner) in place of the\n * empty message. Set while async results are in flight.\n */\n loading?: boolean;\n /** Loading row text. Default: \"Loading…\". */\n loadingMessage?: ReactNode;\n /**\n * Option objects for the current value(s), used for chips and the\n * single-select label when a value is missing from `options` (e.g. an async\n * search that no longer returns it, or values preselected on load). Values\n * found in `options` resolve from there first.\n */\n selectedOptions?: ComboboxOption[];\n /**\n * When true, typed text that matches no option offers a create row. Created\n * values not found in `options` or `selectedOptions` display their raw value\n * as the label.\n */\n creatable?: boolean;\n /**\n * Called with the trimmed input when the create row is chosen. When set, the\n * host owns adding the value (`onChange` is not called). When omitted, the\n * input is committed as the value through `onChange`.\n */\n onCreateOption?: (inputValue: string) => void;\n /** Create row label. Default: `Create \"{inputValue}\"`. */\n formatCreateLabel?: (inputValue: string) => ReactNode;\n /**\n * Single mode: when a value is set, shows a clear button inside the control\n * that calls `onChange(null)`. Ignored with `multiple` (chips have their own\n * remove control). Default: false.\n */\n clearable?: boolean;\n /** Accessible name for the clear button. Default: \"Clear\". */\n clearLabel?: string;\n /** Extra attributes for the clear button (e.g. `data-testid`). */\n clearButtonProps?: BuiltInButtonProps;\n /**\n * Accessible name for the chip group in `multiple` mode. Default:\n * `{label} selections` when `label` is a string, otherwise \"Selected\".\n */\n selectionsLabel?: string;\n /**\n * Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n */\n listboxLabel?: string;\n className?: string;\n id?: string;\n 'aria-label'?: string;\n /** Portal mount node for the menu; defaults to `document.body`. */\n portalContainer?: HTMLElement | null;\n /** Stacking order for the portaled menu. */\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nconst CHIP_SIZE_BY_COMBOBOX: Record<ComboboxSize, ChipSize> = {\n small: 'small',\n medium: 'medium',\n large: 'large',\n};\n\nconst CLEAR_ICON_SIZE: Record<ComboboxSize, IconSize> = {\n small: '12',\n medium: '16',\n large: '16',\n};\n\nfunction defaultSelectionsLabel(label: ReactNode): string {\n return typeof label === 'string' ? `${label} selections` : 'Selected';\n}\n\ntype ComboboxRow =\n | { kind: 'option'; option: ComboboxOption }\n | { kind: 'create'; inputValue: string };\n\nfunction defaultFormatCreateLabel(inputValue: string): ReactNode {\n return `Create \"${inputValue}\"`;\n}\n\nfunction isRowDisabled(row: ComboboxRow): boolean {\n return row.kind === 'option' && row.option.disabled === true;\n}\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n if (!query) return true;\n return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction toSingleValue(\n value: string | string[] | null | undefined,\n): string | null {\n if (value == null) return null;\n if (Array.isArray(value)) return value[0] ?? null;\n return value === '' ? null : value;\n}\n\nfunction toMultiValue(value: string | string[] | null | undefined): string[] {\n if (value == null) return [];\n if (Array.isArray(value)) return value;\n return value === '' ? [] : [value];\n}\n\nfunction optionLeadingVisual(option: ComboboxOption): ReactNode | undefined {\n if (option.leadingVisual != null) return option.leadingVisual;\n if (option.leadingAvatar != null) {\n return (\n <UserAvatar\n src={option.leadingAvatar.src}\n alt={option.leadingAvatar.alt}\n size=\"24\"\n />\n );\n }\n return undefined;\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, { value: 'engineering', label: 'Engineering' }, {\n * value: 'releases', label: 'Releases' }, ];\n */\nconst Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n {\n options,\n menuItemProps,\n multiple = false,\n value: valueProp,\n defaultValue,\n onChange,\n inputValue: inputValueProp,\n defaultInputValue = '',\n onInputChange,\n label,\n placeholder,\n leadingIcon,\n size = 'medium',\n invalid = false,\n disabled = false,\n filter = true,\n emptyMessage = 'No results',\n loading = false,\n loadingMessage = 'Loading…',\n selectedOptions,\n creatable = false,\n onCreateOption,\n formatCreateLabel = defaultFormatCreateLabel,\n clearable = false,\n clearLabel = 'Clear',\n clearButtonProps,\n selectionsLabel,\n listboxLabel = 'Options',\n className = '',\n id: idProp,\n 'aria-label': ariaLabel,\n portalContainer = null,\n zIndex,\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const setInputRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isValueControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState<\n string | string[] | null\n >(() => {\n if (defaultValue !== undefined) return defaultValue;\n return multiple ? [] : null;\n });\n\n const rawValue = isValueControlled ? valueProp! : uncontrolledValue;\n const singleValue = multiple ? null : toSingleValue(rawValue);\n const multiValue = useMemo(\n () => (multiple ? toMultiValue(rawValue) : []),\n [multiple, rawValue],\n );\n\n const isInputControlled = inputValueProp !== undefined;\n const [uncontrolledInput, setUncontrolledInput] = useState(defaultInputValue);\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n // Hover moves the highlight without scrolling; only keyboard changes scroll the row into view.\n const activatedByPointer = useRef(false);\n const hoverRow = useCallback(\n (index: number) => {\n if (index === activeIndex) return;\n activatedByPointer.current = true;\n setActiveIndex(index);\n },\n [activeIndex],\n );\n const [queryOverride, setQueryOverride] = useState<string | null>(null);\n\n const resolveOption = useCallback(\n (optionValue: string): ComboboxOption | undefined =>\n options.find((o) => o.value === optionValue) ??\n selectedOptions?.find((o) => o.value === optionValue) ??\n (creatable ? { value: optionValue, label: optionValue } : undefined),\n [options, selectedOptions, creatable],\n );\n\n const selectedOption = useMemo(\n () => (singleValue == null ? undefined : resolveOption(singleValue)),\n [resolveOption, singleValue],\n );\n\n // Single-select: show the selected label until the user starts typing a filter.\n // `queryOverride !== null` means the field is in filter-edit mode.\n const displayInput = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return selectedOption?.label ?? uncontrolledInput;\n })();\n\n const filterQuery = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return '';\n })();\n\n const setInputDisplay = useCallback(\n (next: string) => {\n if (!isInputControlled) {\n setUncontrolledInput(next);\n if (!multiple) setQueryOverride(next);\n }\n onInputChange?.(next);\n },\n [isInputControlled, multiple, onInputChange],\n );\n\n const commitValue = useCallback(\n (next: string | string[] | null) => {\n if (!isValueControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isValueControlled, onChange],\n );\n\n const filteredOptions = useMemo(() => {\n if (filter === false) return options;\n const fn = typeof filter === 'function' ? filter : defaultFilter;\n return options.filter((o) => fn(o, filterQuery));\n }, [options, filter, filterQuery]);\n\n const createInput = creatable ? filterQuery.trim() : '';\n const showCreateRow = useMemo(() => {\n if (createInput === '') return false;\n const needle = createInput.toLowerCase();\n const matches = (text: string) => text.toLowerCase() === needle;\n const knownOptions = [...options, ...(selectedOptions ?? [])];\n if (knownOptions.some((o) => matches(o.label) || matches(o.value))) {\n return false;\n }\n const current = multiple\n ? multiValue\n : singleValue != null\n ? [singleValue]\n : [];\n return !current.some(matches);\n }, [\n createInput,\n options,\n selectedOptions,\n multiple,\n multiValue,\n singleValue,\n ]);\n\n const rows = useMemo<ComboboxRow[]>(\n () => [\n ...filteredOptions.map((option) => ({ kind: 'option' as const, option })),\n ...(showCreateRow\n ? [{ kind: 'create' as const, inputValue: createInput }]\n : []),\n ],\n [filteredOptions, showCreateRow, createInput],\n );\n\n const rowId = useCallback(\n (row: ComboboxRow) =>\n row.kind === 'option'\n ? `${listboxId}-option-${row.option.value}`\n : `${listboxId}-create`,\n [listboxId],\n );\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n if (!multiple && !isInputControlled) {\n setQueryOverride(null);\n setUncontrolledInput('');\n }\n }, [multiple, isInputControlled]);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (rows.length === 0) return -1;\n if (prev >= 0 && prev < rows.length) return prev;\n const selectedIdx = rows.findIndex(\n (row) =>\n row.kind === 'option' &&\n (multiple\n ? multiValue.includes(row.option.value)\n : row.option.value === singleValue),\n );\n return selectedIdx >= 0 ? selectedIdx : 0;\n });\n }, [isOpen, rows, multiple, multiValue, singleValue]);\n\n const isSelected = useCallback(\n (optionValue: string) =>\n multiple ? multiValue.includes(optionValue) : singleValue === optionValue,\n [multiple, multiValue, singleValue],\n );\n\n const selectOption = useCallback(\n (option: ComboboxOption) => {\n if (option.disabled) return;\n\n if (multiple) {\n const next = multiValue.includes(option.value)\n ? multiValue.filter((v) => v !== option.value)\n : [...multiValue, option.value];\n commitValue(next);\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n\n commitValue(option.value);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(option.label);\n }\n close();\n },\n [\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const createValue = useCallback(\n (inputValue: string) => {\n if (onCreateOption) {\n onCreateOption(inputValue);\n } else if (multiple) {\n commitValue([...multiValue, inputValue]);\n } else {\n commitValue(inputValue);\n }\n\n if (multiple) {\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(inputValue);\n }\n close();\n },\n [\n onCreateOption,\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const selectRow = useCallback(\n (row: ComboboxRow) => {\n if (row.kind === 'create') createValue(row.inputValue);\n else selectOption(row.option);\n },\n [createValue, selectOption],\n );\n\n const clearValue = useCallback(() => {\n commitValue(null);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.('');\n }\n inputRef.current?.focus();\n }, [commitValue, isInputControlled, onInputChange]);\n\n const removeValue = useCallback(\n (optionValue: string) => {\n if (!multiple) return;\n commitValue(multiValue.filter((v) => v !== optionValue));\n },\n [multiple, multiValue, commitValue],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n activatedByPointer.current = false;\n const enabled = rows\n .map((row, i) => ({ row, i }))\n .filter(({ row }) => !isRowDisabled(row));\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [rows],\n );\n\n useEffect(() => {\n if (!isOpen || activeIndex < 0) return;\n if (activatedByPointer.current) {\n activatedByPointer.current = false;\n return;\n }\n const row = rows[activeIndex];\n if (!row) return;\n document.getElementById(rowId(row))?.scrollIntoView?.({ block: 'nearest' });\n }, [isOpen, activeIndex, rows, rowId]);\n\n const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const next = e.target.value;\n setInputDisplay(next);\n if (!isOpen) open();\n setActiveIndex(0);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n open();\n // Select-all so the next keystroke replaces the selected label (filter mode).\n if (!multiple && !isInputControlled && selectedOption) {\n requestAnimationFrame(() => {\n inputRef.current?.select();\n });\n }\n };\n\n const handleBlur = (e: FocusEvent<HTMLElement>) => {\n // Delay so option mousedown can run first\n const related = e.relatedTarget as Node | null;\n if (related && rootRef.current?.contains(related)) return;\n setIsFocused(false);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n setActiveIndex(\n Math.max(\n 0,\n rows.findIndex((row) => !isRowDisabled(row)),\n ),\n );\n }\n break;\n case 'End':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n for (let i = rows.length - 1; i >= 0; i--) {\n if (!isRowDisabled(rows[i])) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n if (isOpen && activeIndex >= 0 && rows[activeIndex]) {\n e.preventDefault();\n selectRow(rows[activeIndex]);\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n close();\n }\n break;\n case 'Backspace':\n if (multiple && displayInput === '' && multiValue.length > 0) {\n e.preventDefault();\n removeValue(multiValue[multiValue.length - 1]);\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const handleWrapperMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n // Don't steal focus from chips, their remove buttons, or the clear button\n if ((e.target as HTMLElement).closest('[data-chip], [data-combobox-clear]'))\n return;\n if (e.target !== inputRef.current) {\n e.preventDefault();\n inputRef.current?.focus();\n }\n if (!isOpen) open();\n };\n\n const hasSelection = multiple\n ? multiValue.length > 0\n : singleValue != null && singleValue !== '';\n const hasInputText = displayInput.length > 0;\n const showClearButton = clearable && !multiple && hasSelection && !disabled;\n const labelFloated = isFocused || isOpen || hasSelection || hasInputText;\n\n const activeRow = activeIndex >= 0 ? rows[activeIndex] : undefined;\n const activeDescendant = activeRow != null ? rowId(activeRow) : undefined;\n\n // Without `selectedOptions`, values in `options` keep their list order (the\n // original behavior); with it, chips follow value order so they don't jump\n // around as async results change.\n const chipOptions = useMemo<ComboboxOption[]>(() => {\n if (!multiple) return [];\n if (selectedOptions == null) {\n const fromOptions = options.filter((o) => multiValue.includes(o.value));\n if (!creatable) return fromOptions;\n const listed = new Set(fromOptions.map((o) => o.value));\n return [\n ...fromOptions,\n ...multiValue\n .filter((v) => !listed.has(v))\n .map((v) => ({ value: v, label: v })),\n ];\n }\n return multiValue\n .map(resolveOption)\n .filter((o): o is ComboboxOption => o != null);\n }, [\n multiple,\n selectedOptions,\n options,\n multiValue,\n creatable,\n resolveOption,\n ]);\n\n const sizeClass = styles[`combobox--size-${toKebab(size)}`];\n const hasChips = multiple && chipOptions.length > 0;\n const rootClass = [\n styles.combobox,\n sizeClass,\n invalid ? styles['combobox--invalid'] : '',\n label != null && labelFloated ? styles['combobox--label-floated'] : '',\n leadingIcon != null ? styles['combobox--has-leading-icon'] : '',\n hasChips ? styles['combobox--has-chips'] : '',\n isOpen ? styles['combobox--open'] : '',\n disabled ? styles['combobox--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div className={styles.combobox__wrapper} ref={anchorRef}>\n {label != null && (\n <label className={styles.combobox__label} htmlFor={id}>\n {label}\n </label>\n )}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- pointer convenience; the input owns keyboard interaction */}\n <div\n className={styles.combobox__inner}\n onMouseDown={handleWrapperMouseDown}\n >\n {leadingIcon != null && (\n <span className={styles['combobox__leading-icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\n </span>\n )}\n <div className={styles.combobox__value}>\n {multiple && chipOptions.length > 0 && (\n <ChipGroup\n aria-label={selectionsLabel ?? defaultSelectionsLabel(label)}\n disabled={disabled}\n >\n {chipOptions.map((option) => (\n <Chip\n key={option.value}\n size={CHIP_SIZE_BY_COMBOBOX[size]}\n leadingAvatar={option.leadingAvatar}\n leadingIcon={\n option.leadingAvatar == null\n ? option.leadingVisual\n : undefined\n }\n onRemove={\n disabled\n ? undefined\n : (ev) => {\n ev.stopPropagation();\n removeValue(option.value);\n }\n }\n >\n {option.label}\n </Chip>\n ))}\n </ChipGroup>\n )}\n <input\n ref={setInputRef}\n id={id}\n className={styles.combobox__control}\n type=\"text\"\n role=\"combobox\"\n autoComplete=\"off\"\n spellCheck={false}\n disabled={disabled}\n placeholder={\n multiple && chipOptions.length > 0 ? undefined : placeholder\n }\n value={displayInput}\n aria-label={ariaLabel}\n aria-invalid={invalid ? true : undefined}\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeDescendant}\n aria-busy={loading || undefined}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n />\n </div>\n {showClearButton && (\n <button\n {...clearButtonProps}\n type=\"button\"\n className={mergeClassNames(\n styles.combobox__clear,\n clearButtonProps?.className,\n )}\n aria-label={clearLabel}\n data-combobox-clear=\"\"\n onClick={clearValue}\n onBlur={(e) => {\n clearButtonProps?.onBlur?.(e);\n handleBlur(e);\n }}\n >\n <Icon size={CLEAR_ICON_SIZE[size]} glyph={<CloseCircleIcon />} />\n </button>\n )}\n <span className={styles['combobox__trailing-icon']} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </div>\n </div>\n\n {popupMounted &&\n renderPortal(\n <div\n ref={portalRef}\n className={[\n styles.combobox__popup,\n placement === 'above' ? styles['combobox__popup--above'] : '',\n popupVisible ? styles['combobox__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n >\n <PopoverMenu className={styles.combobox__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n {rows.length > 0 && (\n <ul\n id={listboxId}\n className={styles.combobox__list}\n role=\"listbox\"\n aria-multiselectable={multiple || undefined}\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {rows.map((row, index) => {\n const active = index === activeIndex;\n const preventBlur = (ev: MouseEvent) => {\n // Prevent input blur before click handler\n ev.preventDefault();\n };\n if (row.kind === 'create') {\n return (\n <li\n key={rowId(row)}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n id={rowId(row)}\n role=\"option\"\n label={formatCreateLabel(row.inputValue)}\n leadingVisual={<Icon glyph={<PlusIcon />} />}\n active={active}\n aria-selected={false}\n onMouseDown={preventBlur}\n onMouseEnter={() => hoverRow(index)}\n onClick={() => createValue(row.inputValue)}\n />\n </li>\n );\n }\n const { option } = row;\n const selected = isSelected(option.value);\n const leading = optionLeadingVisual(option);\n return (\n <li\n key={option.value}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n {...mergeMenuItemProps(\n menuItemProps,\n option.menuItemProps,\n )}\n id={rowId(row)}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={leading != null}\n leadingVisual={leading}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={preventBlur}\n onMouseEnter={() => hoverRow(index)}\n onClick={() => selectOption(option)}\n />\n </li>\n );\n })}\n </ul>\n )}\n {loading ? (\n <div className={styles.combobox__loading} role=\"status\">\n <Spinner size=\"16\" aria-hidden />\n <span>{loadingMessage}</span>\n </div>\n ) : (\n rows.length === 0 && (\n <p className={styles.combobox__empty}>{emptyMessage}</p>\n )\n )}\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Combobox;\n"],"names":["POPUP_MAX_HEIGHT","CHIP_SIZE_BY_COMBOBOX","CLEAR_ICON_SIZE","defaultSelectionsLabel","label","defaultFormatCreateLabel","inputValue","isRowDisabled","row","defaultFilter","option","query","toSingleValue","value","toMultiValue","optionLeadingVisual","jsx","UserAvatar","Combobox","forwardRef","options","menuItemProps","multiple","valueProp","defaultValue","onChange","inputValueProp","defaultInputValue","onInputChange","placeholder","leadingIcon","size","invalid","disabled","filter","emptyMessage","loading","loadingMessage","selectedOptions","creatable","onCreateOption","formatCreateLabel","clearable","clearLabel","clearButtonProps","selectionsLabel","listboxLabel","className","idProp","ariaLabel","portalContainer","zIndex","ref","generatedId","useId","id","listboxId","rootRef","useRef","anchorRef","inputRef","setInputRef","useCallback","node","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","rawValue","singleValue","multiValue","useMemo","isInputControlled","uncontrolledInput","setUncontrolledInput","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","activatedByPointer","hoverRow","index","queryOverride","setQueryOverride","resolveOption","optionValue","o","selectedOption","displayInput","filterQuery","setInputDisplay","next","commitValue","filteredOptions","fn","createInput","showCreateRow","needle","matches","text","rows","rowId","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","isSelected","selectOption","v","_a","createValue","selectRow","clearValue","removeValue","moveActive","delta","enabled","i","currentPos","nextPos","_b","handleInputChange","handleFocus","handleBlur","related","handleKeyDown","handleWrapperMouseDown","hasSelection","hasInputText","showClearButton","labelFloated","activeRow","activeDescendant","chipOptions","fromOptions","listed","sizeClass","styles","toKebab","hasChips","rootClass","jsxs","IconSlotContext","ChipGroup","Chip","ev","mergeClassNames","Icon","CloseCircleIcon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","active","preventBlur","MenuItem","PlusIcon","selected","leading","mergeMenuItemProps","Spinner"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Combobox.css');const o="_combobox_ionfr_2",_="_combobox__wrapper_ionfr_8",b="_combobox__label_ionfr_26",c="_combobox__inner_ionfr_56",m="_combobox__value_ionfr_72",n="_combobox__control_ionfr_82",i="_combobox__clear_ionfr_120",x="_combobox__popup_ionfr_143",e="_combobox__menu_ionfr_159",l="_combobox__empty_ionfr_164",r="_combobox__loading_ionfr_172",a="_combobox__list_ionfr_182",p="_combobox__option_ionfr_187",t={combobox:o,combobox__wrapper:_,"combobox--disabled":"_combobox--disabled_ionfr_16",combobox__label:b,"combobox--label-floated":"_combobox--label-floated_ionfr_47",combobox__inner:c,"combobox__leading-icon":"_combobox__leading-icon_ionfr_64",combobox__value:m,combobox__control:n,"combobox__trailing-icon":"_combobox__trailing-icon_ionfr_107","combobox--open":"_combobox--open_ionfr_117",combobox__clear:i,combobox__popup:x,"combobox__popup--above":"_combobox__popup--above_ionfr_150","combobox__popup--visible":"_combobox__popup--visible_ionfr_153",combobox__menu:e,combobox__empty:l,combobox__loading:r,combobox__list:a,combobox__option:p,"combobox--size-small":"_combobox--size-small_ionfr_191","combobox--has-chips":"_combobox--has-chips_ionfr_198","combobox--size-medium":"_combobox--size-medium_ionfr_215","combobox--size-large":"_combobox--size-large_ionfr_243","combobox--invalid":"_combobox--invalid_ionfr_272","combobox--has-leading-icon":"_combobox--has-leading-icon_ionfr_284"};exports.combobox=o;exports.combobox__clear=i;exports.combobox__control=n;exports.combobox__empty=l;exports.combobox__inner=c;exports.combobox__label=b;exports.combobox__list=a;exports.combobox__loading=r;exports.combobox__menu=e;exports.combobox__option=p;exports.combobox__popup=x;exports.combobox__value=m;exports.combobox__wrapper=_;exports.default=t;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Combobox.css');const o="_combobox_10ikn_2",_="_combobox__wrapper_10ikn_8",b="_combobox__label_10ikn_26",c="_combobox__inner_10ikn_56",m="_combobox__value_10ikn_72",n="_combobox__control_10ikn_82",i="_combobox__clear_10ikn_120",x="_combobox__popup_10ikn_143",e="_combobox__menu_10ikn_159",l="_combobox__empty_10ikn_164",a="_combobox__loading_10ikn_172",p="_combobox__list_10ikn_182",t="_combobox__option_10ikn_187",s={combobox:o,combobox__wrapper:_,"combobox--disabled":"_combobox--disabled_10ikn_16",combobox__label:b,"combobox--label-floated":"_combobox--label-floated_10ikn_47",combobox__inner:c,"combobox__leading-icon":"_combobox__leading-icon_10ikn_64",combobox__value:m,combobox__control:n,"combobox__trailing-icon":"_combobox__trailing-icon_10ikn_107","combobox--open":"_combobox--open_10ikn_117",combobox__clear:i,combobox__popup:x,"combobox__popup--above":"_combobox__popup--above_10ikn_150","combobox__popup--visible":"_combobox__popup--visible_10ikn_153",combobox__menu:e,combobox__empty:l,combobox__loading:a,combobox__list:p,combobox__option:t,"combobox--size-small":"_combobox--size-small_10ikn_191","combobox--has-chips":"_combobox--has-chips_10ikn_198","combobox--size-medium":"_combobox--size-medium_10ikn_215","combobox--size-large":"_combobox--size-large_10ikn_243","combobox--invalid":"_combobox--invalid_10ikn_272","combobox--has-leading-icon":"_combobox--has-leading-icon_10ikn_284"};exports.combobox=o;exports.combobox__clear=i;exports.combobox__control=n;exports.combobox__empty=l;exports.combobox__inner=c;exports.combobox__label=b;exports.combobox__list=p;exports.combobox__loading=a;exports.combobox__menu=e;exports.combobox__option=t;exports.combobox__popup=x;exports.combobox__value=m;exports.combobox__wrapper=_;exports.default=s;
2
2
  //# sourceMappingURL=Combobox.module.scss.cjs.map
@@ -1,30 +1,30 @@
1
- import './Combobox.css';const o = "_combobox_ionfr_2", _ = "_combobox__wrapper_ionfr_8", b = "_combobox__label_ionfr_26", c = "_combobox__inner_ionfr_56", m = "_combobox__value_ionfr_72", n = "_combobox__control_ionfr_82", i = "_combobox__clear_ionfr_120", x = "_combobox__popup_ionfr_143", e = "_combobox__menu_ionfr_159", l = "_combobox__empty_ionfr_164", r = "_combobox__loading_ionfr_172", a = "_combobox__list_ionfr_182", p = "_combobox__option_ionfr_187", s = {
1
+ import './Combobox.css';const o = "_combobox_10ikn_2", _ = "_combobox__wrapper_10ikn_8", b = "_combobox__label_10ikn_26", c = "_combobox__inner_10ikn_56", m = "_combobox__value_10ikn_72", n = "_combobox__control_10ikn_82", i = "_combobox__clear_10ikn_120", x = "_combobox__popup_10ikn_143", e = "_combobox__menu_10ikn_159", l = "_combobox__empty_10ikn_164", a = "_combobox__loading_10ikn_172", p = "_combobox__list_10ikn_182", s = "_combobox__option_10ikn_187", t = {
2
2
  combobox: o,
3
3
  combobox__wrapper: _,
4
- "combobox--disabled": "_combobox--disabled_ionfr_16",
4
+ "combobox--disabled": "_combobox--disabled_10ikn_16",
5
5
  combobox__label: b,
6
- "combobox--label-floated": "_combobox--label-floated_ionfr_47",
6
+ "combobox--label-floated": "_combobox--label-floated_10ikn_47",
7
7
  combobox__inner: c,
8
- "combobox__leading-icon": "_combobox__leading-icon_ionfr_64",
8
+ "combobox__leading-icon": "_combobox__leading-icon_10ikn_64",
9
9
  combobox__value: m,
10
10
  combobox__control: n,
11
- "combobox__trailing-icon": "_combobox__trailing-icon_ionfr_107",
12
- "combobox--open": "_combobox--open_ionfr_117",
11
+ "combobox__trailing-icon": "_combobox__trailing-icon_10ikn_107",
12
+ "combobox--open": "_combobox--open_10ikn_117",
13
13
  combobox__clear: i,
14
14
  combobox__popup: x,
15
- "combobox__popup--above": "_combobox__popup--above_ionfr_150",
16
- "combobox__popup--visible": "_combobox__popup--visible_ionfr_153",
15
+ "combobox__popup--above": "_combobox__popup--above_10ikn_150",
16
+ "combobox__popup--visible": "_combobox__popup--visible_10ikn_153",
17
17
  combobox__menu: e,
18
18
  combobox__empty: l,
19
- combobox__loading: r,
20
- combobox__list: a,
21
- combobox__option: p,
22
- "combobox--size-small": "_combobox--size-small_ionfr_191",
23
- "combobox--has-chips": "_combobox--has-chips_ionfr_198",
24
- "combobox--size-medium": "_combobox--size-medium_ionfr_215",
25
- "combobox--size-large": "_combobox--size-large_ionfr_243",
26
- "combobox--invalid": "_combobox--invalid_ionfr_272",
27
- "combobox--has-leading-icon": "_combobox--has-leading-icon_ionfr_284"
19
+ combobox__loading: a,
20
+ combobox__list: p,
21
+ combobox__option: s,
22
+ "combobox--size-small": "_combobox--size-small_10ikn_191",
23
+ "combobox--has-chips": "_combobox--has-chips_10ikn_198",
24
+ "combobox--size-medium": "_combobox--size-medium_10ikn_215",
25
+ "combobox--size-large": "_combobox--size-large_10ikn_243",
26
+ "combobox--invalid": "_combobox--invalid_10ikn_272",
27
+ "combobox--has-leading-icon": "_combobox--has-leading-icon_10ikn_284"
28
28
  };
29
29
  export {
30
30
  o as combobox,
@@ -33,13 +33,13 @@ export {
33
33
  l as combobox__empty,
34
34
  c as combobox__inner,
35
35
  b as combobox__label,
36
- a as combobox__list,
37
- r as combobox__loading,
36
+ p as combobox__list,
37
+ a as combobox__loading,
38
38
  e as combobox__menu,
39
- p as combobox__option,
39
+ s as combobox__option,
40
40
  x as combobox__popup,
41
41
  m as combobox__value,
42
42
  _ as combobox__wrapper,
43
- s as default
43
+ t as default
44
44
  };
45
45
  //# sourceMappingURL=Combobox.module.scss.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n label: ReactNode;\n /** Optional secondary label. */\n secondaryLabel?: ReactNode;\n /** Where the secondary label appears. Default: 'below'. */\n secondaryLabelPosition?: 'inline' | 'below';\n /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n leadingVisual?: ReactNode;\n /** Show the leading visual slot. Default: true. */\n leadingElement?: boolean;\n /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n trailingVisual?: ReactNode;\n /** Show the trailing visual slot. Default: false. */\n trailingElement?: boolean;\n /** Emoji character for custom status, shown inline after the label. */\n customStatusEmoji?: string;\n /** Show \"NEW\" label tag. */\n tag?: boolean;\n /** Text of the `tag`. Default: \"NEW\". */\n tagLabel?: ReactNode;\n /** Inline mention count badge. */\n mentionCount?: number;\n /** Destructive (danger) styling. */\n destructive?: boolean;\n /** Highlight row (e.g. submenu parent while child menu is open). */\n active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n {\n label,\n secondaryLabel,\n secondaryLabelPosition = 'below',\n leadingVisual,\n leadingElement = true,\n trailingVisual,\n trailingElement = false,\n customStatusEmoji,\n tag = false,\n tagLabel = 'NEW',\n mentionCount,\n destructive = false,\n active = false,\n className = '',\n disabled,\n type = 'button',\n ...rest\n },\n ref,\n) {\n const rootClass = [\n styles['menu-item'],\n destructive ? styles['menu-item--destructive'] : '',\n active ? styles['menu-item--active'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n className={rootClass}\n type={type}\n disabled={disabled}\n {...rest}\n >\n <div className={styles['menu-item__content']}>\n {leadingElement && (\n <div className={styles['menu-item__left']}>\n <span className={styles['menu-item__leading-visual']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingVisual ?? (\n <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n )}\n </IconSlotContext.Provider>\n </span>\n </div>\n )}\n <div className={styles['menu-item__middle']}>\n <div className={styles['menu-item__top-row']}>\n <span className={styles['menu-item__label']}>{label}</span>\n {secondaryLabel && secondaryLabelPosition === 'inline' && (\n <span className={styles['menu-item__secondary-label-inline']}>\n {secondaryLabel}\n </span>\n )}\n {customStatusEmoji && (\n <span className={styles['menu-item__custom-status']} aria-hidden>\n {customStatusEmoji}\n </span>\n )}\n {tag && <Tag label={tagLabel} />}\n {mentionCount != null && mentionCount > 0 && (\n <MentionBadge\n count={mentionCount}\n location=\"menu-item\"\n size=\"small\"\n />\n )}\n </div>\n {secondaryLabel && secondaryLabelPosition === 'below' && (\n <div className={styles['menu-item__bottom-row']}>\n <span className={styles['menu-item__secondary-label-below']}>\n {secondaryLabel}\n </span>\n </div>\n )}\n </div>\n {trailingElement && (\n <div className={styles['menu-item__right']}>\n <span\n className={[\n styles['menu-item__trailing-visual'],\n !trailingVisual\n ? styles['menu-item__trailing-visual--check']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <IconSlotContext.Provider value={{ size: '16' }}>\n {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n </IconSlotContext.Provider>\n </span>\n </div>\n )}\n </div>\n </button>\n );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbA0CMA,EAAWC,EAAAA,WAA6C,SAC5D,CACE,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,SAAAC,EAAW,MACX,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBR,EAAcQ,EAAAA,QAAO,wBAAwB,EAAI,GACjDP,EAASO,EAAAA,QAAO,mBAAmB,EAAI,GACvCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,SAAAD,EACC,GAAGE,EAEJ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,oBAAoB,EACxC,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC/D,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,YACCF,EAAAA,IAACG,UAAA,CAAK,MAAOH,MAACI,IAAyB,EAAI,KAAK,KAAK,CAAA,CAEzD,EACF,EACF,EAEFH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAnB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CkB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAlB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAZ,CAAA,CACH,EAEDC,GAAOY,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAOhB,CAAA,CAAU,EAC7BC,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCT,GAAkBC,IAA2B,SAC5CkB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCd,EAEG,GADAc,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAjB,GAAkBe,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED7B,EAAS,YAAc"}
1
+ {"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n label: ReactNode;\n /** Optional secondary label. */\n secondaryLabel?: ReactNode;\n /** Where the secondary label appears. Default: 'below'. */\n secondaryLabelPosition?: 'inline' | 'below';\n /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n leadingVisual?: ReactNode;\n /** Show the leading visual slot. Default: true. */\n leadingElement?: boolean;\n /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n trailingVisual?: ReactNode;\n /** Show the trailing visual slot. Default: false. */\n trailingElement?: boolean;\n /** Emoji character for custom status, shown inline after the label. */\n customStatusEmoji?: string;\n /** Show \"NEW\" label tag. */\n tag?: boolean;\n /** Text of the `tag`. Default: \"NEW\". */\n tagLabel?: ReactNode;\n /** Inline mention count badge. */\n mentionCount?: number;\n /** Destructive (danger) styling. */\n destructive?: boolean;\n /** Highlight row (e.g. submenu parent while child menu is open). */\n active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n | 'id'\n | 'role'\n | 'aria-selected'\n | 'autoFocus'\n | 'label'\n | 'secondaryLabel'\n | 'leadingVisual'\n | 'leadingElement'\n | 'trailingElement'\n | 'disabled'\n | 'active'\n | 'children'\n | 'onClick'\n | 'onMouseDown'\n | 'onMouseEnter'\n | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n {\n label,\n secondaryLabel,\n secondaryLabelPosition = 'below',\n leadingVisual,\n leadingElement = true,\n trailingVisual,\n trailingElement = false,\n customStatusEmoji,\n tag = false,\n tagLabel = 'NEW',\n mentionCount,\n destructive = false,\n active = false,\n className = '',\n disabled,\n type = 'button',\n ...rest\n },\n ref,\n) {\n const rootClass = [\n styles['menu-item'],\n destructive ? styles['menu-item--destructive'] : '',\n active ? styles['menu-item--active'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n className={rootClass}\n type={type}\n disabled={disabled}\n {...rest}\n >\n <div className={styles['menu-item__content']}>\n {leadingElement && (\n <div className={styles['menu-item__left']}>\n <span className={styles['menu-item__leading-visual']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingVisual ?? (\n <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n )}\n </IconSlotContext.Provider>\n </span>\n </div>\n )}\n <div className={styles['menu-item__middle']}>\n <div className={styles['menu-item__top-row']}>\n <span className={styles['menu-item__label']}>{label}</span>\n {secondaryLabel && secondaryLabelPosition === 'inline' && (\n <span className={styles['menu-item__secondary-label-inline']}>\n {secondaryLabel}\n </span>\n )}\n {customStatusEmoji && (\n <span className={styles['menu-item__custom-status']} aria-hidden>\n {customStatusEmoji}\n </span>\n )}\n {tag && <Tag label={tagLabel} />}\n {mentionCount != null && mentionCount > 0 && (\n <MentionBadge\n count={mentionCount}\n location=\"menu-item\"\n size=\"small\"\n />\n )}\n </div>\n {secondaryLabel && secondaryLabelPosition === 'below' && (\n <div className={styles['menu-item__bottom-row']}>\n <span className={styles['menu-item__secondary-label-below']}>\n {secondaryLabel}\n </span>\n </div>\n )}\n </div>\n {trailingElement && (\n <div className={styles['menu-item__right']}>\n <span\n className={[\n styles['menu-item__trailing-visual'],\n !trailingVisual\n ? styles['menu-item__trailing-visual--check']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <IconSlotContext.Provider value={{ size: '16' }}>\n {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n </IconSlotContext.Provider>\n </span>\n </div>\n )}\n </div>\n </button>\n );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbAkFMA,EAAWC,EAAAA,WAA6C,SAC5D,CACE,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,SAAAC,EAAW,MACX,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBR,EAAcQ,EAAAA,QAAO,wBAAwB,EAAI,GACjDP,EAASO,EAAAA,QAAO,mBAAmB,EAAI,GACvCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,SAAAD,EACC,GAAGE,EAEJ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,oBAAoB,EACxC,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC/D,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,YACCF,EAAAA,IAACG,UAAA,CAAK,MAAOH,MAACI,IAAyB,EAAI,KAAK,KAAK,CAAA,CAEzD,EACF,EACF,EAEFH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAnB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CkB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAlB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAZ,CAAA,CACH,EAEDC,GAAOY,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAOhB,CAAA,CAAU,EAC7BC,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCT,GAAkBC,IAA2B,SAC5CkB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCd,EAEG,GADAc,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAjB,GAAkBe,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED7B,EAAS,YAAc"}
@@ -1 +1 @@
1
- ._menu-item_1nhr4_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_1nhr4_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nhr4_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_1nhr4_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nhr4_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nhr4_27:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--active_1nhr4_27:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_1nhr4_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_1nhr4_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nhr4_2:disabled{cursor:not-allowed}._menu-item_1nhr4_2:disabled ._menu-item__content_1nhr4_44{opacity:.4}._menu-item__content_1nhr4_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_1nhr4_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_1nhr4_30,._menu-item__trailing-visual_1nhr4_31{display:flex;align-items:center;padding:var(--spacing-xxxs);flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__trailing-visual--check_1nhr4_65{color:var(--button-bg)}._menu-item__middle_1nhr4_68{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_1nhr4_79{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_1nhr4_87{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;flex-shrink:0}._menu-item__secondary-label-inline_1nhr4_94{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_1nhr4_102{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_1nhr4_109{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_1nhr4_120{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_1nhr4_129{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}._menu-item--destructive_1nhr4_135,._menu-item--destructive_1nhr4_135 ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135 ._menu-item__trailing-visual_1nhr4_31{color:var(--error-text, var(--color-danger))}._menu-item--destructive_1nhr4_135:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nhr4_135:hover:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:hover:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:inherit}._menu-item--destructive_1nhr4_135:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nhr4_135:active:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:active:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:inherit}._menu-item--destructive_1nhr4_135:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_1nhr4_135:focus-visible ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:focus-visible ._menu-item__trailing-visual_1nhr4_31{color:inherit}
1
+ ._menu-item_1ilsv_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_1ilsv_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1ilsv_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_1ilsv_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1ilsv_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1ilsv_27:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--active_1ilsv_27:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_1ilsv_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_1ilsv_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1ilsv_2:disabled{cursor:not-allowed}._menu-item_1ilsv_2:disabled ._menu-item__content_1ilsv_44{opacity:.4}._menu-item__content_1ilsv_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_1ilsv_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_1ilsv_30,._menu-item__trailing-visual_1ilsv_31{display:flex;align-items:center;padding:var(--spacing-xxxs);flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__trailing-visual--check_1ilsv_65{color:var(--button-bg)}._menu-item__middle_1ilsv_68{align-self:stretch;flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_1ilsv_80{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_1ilsv_88{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}._menu-item__secondary-label-inline_1ilsv_97{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_1ilsv_105{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_1ilsv_112{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_1ilsv_123{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_1ilsv_132{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}._menu-item--destructive_1ilsv_139,._menu-item--destructive_1ilsv_139 ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139 ._menu-item__trailing-visual_1ilsv_31{color:var(--error-text, var(--color-danger))}._menu-item--destructive_1ilsv_139:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1ilsv_139:hover:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:hover:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:inherit}._menu-item--destructive_1ilsv_139:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1ilsv_139:active:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:active:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:inherit}._menu-item--destructive_1ilsv_139:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_1ilsv_139:focus-visible ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:focus-visible ._menu-item__trailing-visual_1ilsv_31{color:inherit}
@@ -1,4 +1,5 @@
1
1
  import { ButtonHTMLAttributes, ReactNode } from 'react';
2
+ import { DataAttributes } from '../../utils/props';
2
3
  export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
3
4
  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
4
5
  label: ReactNode;
@@ -27,6 +28,25 @@ export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
27
28
  /** Highlight row (e.g. submenu parent while child menu is open). */
28
29
  active?: boolean;
29
30
  }
31
+ /**
32
+ * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and
33
+ * selection state, keyboard / pointer handling, and the values it reads from the
34
+ * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They
35
+ * can't be overridden through `menuItemProps`. This is the full set; each host
36
+ * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses
37
+ * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:
38
+ * the host keeps focus on its input / trigger, and a row that grabs focus on
39
+ * mount would take it away.
40
+ */
41
+ export type MenuItemOwnedProps = 'id' | 'role' | 'aria-selected' | 'autoFocus' | 'label' | 'secondaryLabel' | 'leadingVisual' | 'leadingElement' | 'trailingElement' | 'disabled' | 'active' | 'children' | 'onClick' | 'onMouseDown' | 'onMouseEnter' | 'onPointerUp';
42
+ /**
43
+ * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,
44
+ * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so
45
+ * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.
46
+ * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);
47
+ * a host narrows it so the handlers it doesn't supply can still be passed.
48
+ */
49
+ export type MenuItemPassthroughProps<Owned extends keyof MenuItemProps = MenuItemOwnedProps> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;
30
50
  /**
31
51
  * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,
32
52
  * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9E,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,6LAA6L;IAC7L,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,QAAA,MAAM,QAAQ,6GAsGZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpD,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,6LAA6L;IAC7L,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAC1B,IAAI,GACJ,MAAM,GACN,eAAe,GACf,WAAW,GACX,OAAO,GACP,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,UAAU,GACV,QAAQ,GACR,UAAU,GACV,SAAS,GACT,aAAa,GACb,cAAc,GACd,aAAa,CAAC;AAElB;;;;;;GAMG;AACH,MAAM,MAAM,wBAAwB,CAClC,KAAK,SAAS,MAAM,aAAa,GAAG,kBAAkB,IACpD,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,GAAG,cAAc,CAAC;AAEzD;;;GAGG;AACH,QAAA,MAAM,QAAQ,6GAsGZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n label: ReactNode;\n /** Optional secondary label. */\n secondaryLabel?: ReactNode;\n /** Where the secondary label appears. Default: 'below'. */\n secondaryLabelPosition?: 'inline' | 'below';\n /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n leadingVisual?: ReactNode;\n /** Show the leading visual slot. Default: true. */\n leadingElement?: boolean;\n /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n trailingVisual?: ReactNode;\n /** Show the trailing visual slot. Default: false. */\n trailingElement?: boolean;\n /** Emoji character for custom status, shown inline after the label. */\n customStatusEmoji?: string;\n /** Show \"NEW\" label tag. */\n tag?: boolean;\n /** Text of the `tag`. Default: \"NEW\". */\n tagLabel?: ReactNode;\n /** Inline mention count badge. */\n mentionCount?: number;\n /** Destructive (danger) styling. */\n destructive?: boolean;\n /** Highlight row (e.g. submenu parent while child menu is open). */\n active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n {\n label,\n secondaryLabel,\n secondaryLabelPosition = 'below',\n leadingVisual,\n leadingElement = true,\n trailingVisual,\n trailingElement = false,\n customStatusEmoji,\n tag = false,\n tagLabel = 'NEW',\n mentionCount,\n destructive = false,\n active = false,\n className = '',\n disabled,\n type = 'button',\n ...rest\n },\n ref,\n) {\n const rootClass = [\n styles['menu-item'],\n destructive ? styles['menu-item--destructive'] : '',\n active ? styles['menu-item--active'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n className={rootClass}\n type={type}\n disabled={disabled}\n {...rest}\n >\n <div className={styles['menu-item__content']}>\n {leadingElement && (\n <div className={styles['menu-item__left']}>\n <span className={styles['menu-item__leading-visual']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingVisual ?? (\n <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n )}\n </IconSlotContext.Provider>\n </span>\n </div>\n )}\n <div className={styles['menu-item__middle']}>\n <div className={styles['menu-item__top-row']}>\n <span className={styles['menu-item__label']}>{label}</span>\n {secondaryLabel && secondaryLabelPosition === 'inline' && (\n <span className={styles['menu-item__secondary-label-inline']}>\n {secondaryLabel}\n </span>\n )}\n {customStatusEmoji && (\n <span className={styles['menu-item__custom-status']} aria-hidden>\n {customStatusEmoji}\n </span>\n )}\n {tag && <Tag label={tagLabel} />}\n {mentionCount != null && mentionCount > 0 && (\n <MentionBadge\n count={mentionCount}\n location=\"menu-item\"\n size=\"small\"\n />\n )}\n </div>\n {secondaryLabel && secondaryLabelPosition === 'below' && (\n <div className={styles['menu-item__bottom-row']}>\n <span className={styles['menu-item__secondary-label-below']}>\n {secondaryLabel}\n </span>\n </div>\n )}\n </div>\n {trailingElement && (\n <div className={styles['menu-item__right']}>\n <span\n className={[\n styles['menu-item__trailing-visual'],\n !trailingVisual\n ? styles['menu-item__trailing-visual--check']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <IconSlotContext.Provider value={{ size: '16' }}>\n {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n </IconSlotContext.Provider>\n </span>\n </div>\n )}\n </div>\n </button>\n );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"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"}
1
+ {"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n label: ReactNode;\n /** Optional secondary label. */\n secondaryLabel?: ReactNode;\n /** Where the secondary label appears. Default: 'below'. */\n secondaryLabelPosition?: 'inline' | 'below';\n /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n leadingVisual?: ReactNode;\n /** Show the leading visual slot. Default: true. */\n leadingElement?: boolean;\n /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n trailingVisual?: ReactNode;\n /** Show the trailing visual slot. Default: false. */\n trailingElement?: boolean;\n /** Emoji character for custom status, shown inline after the label. */\n customStatusEmoji?: string;\n /** Show \"NEW\" label tag. */\n tag?: boolean;\n /** Text of the `tag`. Default: \"NEW\". */\n tagLabel?: ReactNode;\n /** Inline mention count badge. */\n mentionCount?: number;\n /** Destructive (danger) styling. */\n destructive?: boolean;\n /** Highlight row (e.g. submenu parent while child menu is open). */\n active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n | 'id'\n | 'role'\n | 'aria-selected'\n | 'autoFocus'\n | 'label'\n | 'secondaryLabel'\n | 'leadingVisual'\n | 'leadingElement'\n | 'trailingElement'\n | 'disabled'\n | 'active'\n | 'children'\n | 'onClick'\n | 'onMouseDown'\n | 'onMouseEnter'\n | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n {\n label,\n secondaryLabel,\n secondaryLabelPosition = 'below',\n leadingVisual,\n leadingElement = true,\n trailingVisual,\n trailingElement = false,\n customStatusEmoji,\n tag = false,\n tagLabel = 'NEW',\n mentionCount,\n destructive = false,\n active = false,\n className = '',\n disabled,\n type = 'button',\n ...rest\n },\n ref,\n) {\n const rootClass = [\n styles['menu-item'],\n destructive ? styles['menu-item--destructive'] : '',\n active ? styles['menu-item--active'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n className={rootClass}\n type={type}\n disabled={disabled}\n {...rest}\n >\n <div className={styles['menu-item__content']}>\n {leadingElement && (\n <div className={styles['menu-item__left']}>\n <span className={styles['menu-item__leading-visual']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingVisual ?? (\n <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n )}\n </IconSlotContext.Provider>\n </span>\n </div>\n )}\n <div className={styles['menu-item__middle']}>\n <div className={styles['menu-item__top-row']}>\n <span className={styles['menu-item__label']}>{label}</span>\n {secondaryLabel && secondaryLabelPosition === 'inline' && (\n <span className={styles['menu-item__secondary-label-inline']}>\n {secondaryLabel}\n </span>\n )}\n {customStatusEmoji && (\n <span className={styles['menu-item__custom-status']} aria-hidden>\n {customStatusEmoji}\n </span>\n )}\n {tag && <Tag label={tagLabel} />}\n {mentionCount != null && mentionCount > 0 && (\n <MentionBadge\n count={mentionCount}\n location=\"menu-item\"\n size=\"small\"\n />\n )}\n </div>\n {secondaryLabel && secondaryLabelPosition === 'below' && (\n <div className={styles['menu-item__bottom-row']}>\n <span className={styles['menu-item__secondary-label-below']}>\n {secondaryLabel}\n </span>\n </div>\n )}\n </div>\n {trailingElement && (\n <div className={styles['menu-item__right']}>\n <span\n className={[\n styles['menu-item__trailing-visual'],\n !trailingVisual\n ? styles['menu-item__trailing-visual--check']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <IconSlotContext.Provider value={{ size: '16' }}>\n {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n </IconSlotContext.Provider>\n </span>\n </div>\n )}\n </div>\n </button>\n );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.css');const e={"menu-item":"_menu-item_1nhr4_2","menu-item--active":"_menu-item--active_1nhr4_27","menu-item__leading-visual":"_menu-item__leading-visual_1nhr4_30","menu-item__trailing-visual":"_menu-item__trailing-visual_1nhr4_31","menu-item__content":"_menu-item__content_1nhr4_44","menu-item__left":"_menu-item__left_1nhr4_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_1nhr4_65","menu-item__middle":"_menu-item__middle_1nhr4_68","menu-item__top-row":"_menu-item__top-row_1nhr4_79","menu-item__label":"_menu-item__label_1nhr4_87","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_1nhr4_94","menu-item__bottom-row":"_menu-item__bottom-row_1nhr4_102","menu-item__secondary-label-below":"_menu-item__secondary-label-below_1nhr4_109","menu-item__custom-status":"_menu-item__custom-status_1nhr4_120","menu-item__right":"_menu-item__right_1nhr4_129","menu-item--destructive":"_menu-item--destructive_1nhr4_135"};exports.default=e;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.css');const e={"menu-item":"_menu-item_1ilsv_2","menu-item--active":"_menu-item--active_1ilsv_27","menu-item__leading-visual":"_menu-item__leading-visual_1ilsv_30","menu-item__trailing-visual":"_menu-item__trailing-visual_1ilsv_31","menu-item__content":"_menu-item__content_1ilsv_44","menu-item__left":"_menu-item__left_1ilsv_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_1ilsv_65","menu-item__middle":"_menu-item__middle_1ilsv_68","menu-item__top-row":"_menu-item__top-row_1ilsv_80","menu-item__label":"_menu-item__label_1ilsv_88","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_1ilsv_97","menu-item__bottom-row":"_menu-item__bottom-row_1ilsv_105","menu-item__secondary-label-below":"_menu-item__secondary-label-below_1ilsv_112","menu-item__custom-status":"_menu-item__custom-status_1ilsv_123","menu-item__right":"_menu-item__right_1ilsv_132","menu-item--destructive":"_menu-item--destructive_1ilsv_139"};exports.default=e;
2
2
  //# sourceMappingURL=MenuItem.module.scss.cjs.map
@@ -1,20 +1,20 @@
1
1
  import './MenuItem.css';const _ = {
2
- "menu-item": "_menu-item_1nhr4_2",
3
- "menu-item--active": "_menu-item--active_1nhr4_27",
4
- "menu-item__leading-visual": "_menu-item__leading-visual_1nhr4_30",
5
- "menu-item__trailing-visual": "_menu-item__trailing-visual_1nhr4_31",
6
- "menu-item__content": "_menu-item__content_1nhr4_44",
7
- "menu-item__left": "_menu-item__left_1nhr4_53",
8
- "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_1nhr4_65",
9
- "menu-item__middle": "_menu-item__middle_1nhr4_68",
10
- "menu-item__top-row": "_menu-item__top-row_1nhr4_79",
11
- "menu-item__label": "_menu-item__label_1nhr4_87",
12
- "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_1nhr4_94",
13
- "menu-item__bottom-row": "_menu-item__bottom-row_1nhr4_102",
14
- "menu-item__secondary-label-below": "_menu-item__secondary-label-below_1nhr4_109",
15
- "menu-item__custom-status": "_menu-item__custom-status_1nhr4_120",
16
- "menu-item__right": "_menu-item__right_1nhr4_129",
17
- "menu-item--destructive": "_menu-item--destructive_1nhr4_135"
2
+ "menu-item": "_menu-item_1ilsv_2",
3
+ "menu-item--active": "_menu-item--active_1ilsv_27",
4
+ "menu-item__leading-visual": "_menu-item__leading-visual_1ilsv_30",
5
+ "menu-item__trailing-visual": "_menu-item__trailing-visual_1ilsv_31",
6
+ "menu-item__content": "_menu-item__content_1ilsv_44",
7
+ "menu-item__left": "_menu-item__left_1ilsv_53",
8
+ "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_1ilsv_65",
9
+ "menu-item__middle": "_menu-item__middle_1ilsv_68",
10
+ "menu-item__top-row": "_menu-item__top-row_1ilsv_80",
11
+ "menu-item__label": "_menu-item__label_1ilsv_88",
12
+ "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_1ilsv_97",
13
+ "menu-item__bottom-row": "_menu-item__bottom-row_1ilsv_105",
14
+ "menu-item__secondary-label-below": "_menu-item__secondary-label-below_1ilsv_112",
15
+ "menu-item__custom-status": "_menu-item__custom-status_1ilsv_123",
16
+ "menu-item__right": "_menu-item__right_1ilsv_132",
17
+ "menu-item--destructive": "_menu-item--destructive_1ilsv_139"
18
18
  };
19
19
  export {
20
20
  _ as default
@@ -1,3 +1,3 @@
1
1
  export { default as MenuItem } from './MenuItem';
2
- export type { MenuItemProps } from './MenuItem';
2
+ export type { MenuItemProps, MenuItemOwnedProps, MenuItemPassthroughProps, } from './MenuItem';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,YAAY,CAAC"}