@grafana/ui/dist/cjs/components/Combobox/ComboboxList.cjs.map

Grafana Components Library

{"version":3,"file":"ComboboxList.cjs","sources":["../../../../src/components/Combobox/ComboboxList.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport type { UseComboboxPropGetters } from 'downshift';\nimport { useCallback } from 'react';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Checkbox } from '../Forms/Checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { ScrollContainer } from '../ScrollContainer/ScrollContainer';\n\nimport { AsyncError, LoadingOptions, NotFoundError } from './MessageRows';\nimport { getComboboxStyles, MENU_OPTION_HEIGHT, MENU_OPTION_HEIGHT_DESCRIPTION } from './getComboboxStyles';\nimport { ALL_OPTION_VALUE, type ComboboxOption } from './types';\nimport { isNewGroup } from './utils';\n\nconst VIRTUAL_OVERSCAN_ITEMS = 4;\n\ninterface ComboboxListProps<T extends string | number> {\n  options: Array<ComboboxOption<T>>;\n  highlightedIndex: number | null;\n  selectedItems?: Array<ComboboxOption<T>>;\n  scrollRef: React.RefObject<HTMLDivElement | null>;\n  getItemProps: UseComboboxPropGetters<ComboboxOption<T>>['getItemProps'];\n  enableAllOption?: boolean;\n  isMultiSelect?: boolean;\n  noOptionsMessage?: string;\n  error?: boolean;\n  loading?: boolean;\n}\n\nexport const ComboboxList = <T extends string | number>({\n  options,\n  highlightedIndex,\n  selectedItems = [],\n  scrollRef,\n  getItemProps,\n  enableAllOption,\n  isMultiSelect = false,\n  error = false,\n  loading = false,\n  noOptionsMessage,\n}: ComboboxListProps<T>) => {\n  const styles = useStyles2(getComboboxStyles);\n\n  const estimateSize = useCallback(\n    (index: number) => {\n      const firstGroupItem = isNewGroup(options[index], index > 0 ? options[index - 1] : undefined);\n      const hasDescription = 'description' in options[index];\n      const hasGroup = 'group' in options[index];\n\n      let itemHeight = MENU_OPTION_HEIGHT;\n      if (hasDescription) {\n        itemHeight = MENU_OPTION_HEIGHT_DESCRIPTION;\n      }\n      if (firstGroupItem && hasGroup) {\n        itemHeight += MENU_OPTION_HEIGHT;\n      }\n      return itemHeight;\n    },\n    [options]\n  );\n\n  const rowVirtualizer = useVirtualizer({\n    count: options.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize,\n    getItemKey: (index: number) => options[index]?.value ?? index,\n    overscan: VIRTUAL_OVERSCAN_ITEMS,\n  });\n\n  const isOptionSelected = useCallback(\n    (item: ComboboxOption<T>) => selectedItems.some((opt) => opt.value === item.value),\n    [selectedItems]\n  );\n\n  const allItemsSelected = enableAllOption && options.length > 1 && selectedItems.length === options.length - 1;\n\n  return (\n    <ScrollContainer showScrollIndicators maxHeight=\"inherit\" ref={scrollRef} padding={0.5}>\n      <div style={{ height: rowVirtualizer.getTotalSize() }} className={styles.menuUlContainer}>\n        {rowVirtualizer.getVirtualItems().map((virtualRow, index, allVirtualRows) => {\n          const item = options[virtualRow.index];\n          const startingNewGroup = isNewGroup(item, options[virtualRow.index - 1]);\n\n          // Find the item that renders the group header. It can be this same item if this is rendering it.\n          const groupHeaderIndex = allVirtualRows.find((row) => {\n            const rowItem = options[row.index];\n            return rowItem.group === item.group;\n          });\n          const groupHeaderItem = groupHeaderIndex && options[groupHeaderIndex.index];\n\n          const itemId = `combobox-option-${item.value}`;\n          // If we're rendering the group header, this is the ID for it. Otherwise its used on\n          // the option for aria-describedby.\n          const groupHeaderId = groupHeaderItem ? `combobox-option-group-${groupHeaderItem.value}` : undefined;\n\n          return (\n            // Wrapping div should have no styling other than virtual list positioning.\n            // It's children (header and option) should appear as flat list items.\n            <div\n              key={item.value}\n              className={styles.listItem}\n              style={{\n                height: virtualRow.size,\n                transform: `translateY(${virtualRow.start}px)`,\n              }}\n            >\n              {/* Group header */}\n              {startingNewGroup && (\n                <div\n                  role=\"presentation\"\n                  data-testid=\"combobox-option-group\"\n                  id={groupHeaderId}\n                  className={cx(\n                    styles.optionGroupHeader,\n                    item.group && styles.optionGroupLabel,\n                    virtualRow.index === 0 && styles.optionFirstGroupHeader\n                  )}\n                >\n                  {item.group}\n                </div>\n              )}\n\n              {/* Option */}\n              <div\n                className={cx(\n                  styles.option,\n                  !isMultiSelect && isOptionSelected(item) && styles.optionSelected,\n                  highlightedIndex === virtualRow.index && !item.infoOption && styles.optionFocused,\n                  item.infoOption && styles.optionInfo\n                )}\n                {...getItemProps({\n                  item: item,\n                  index: virtualRow.index,\n                  id: itemId,\n                  'aria-describedby': groupHeaderId,\n                })}\n              >\n                {isMultiSelect && (\n                  <div className={styles.optionAccessory}>\n                    {!item.infoOption && (\n                      <Checkbox\n                        key={itemId}\n                        value={allItemsSelected || isOptionSelected(item)}\n                        indeterminate={item.value === ALL_OPTION_VALUE && selectedItems.length > 0 && !allItemsSelected}\n                        aria-labelledby={itemId}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                        }}\n                        data-testid={`${itemId}-checkbox`}\n                      />\n                    )}\n                  </div>\n                )}\n\n                <div className={styles.optionBody}>\n                  <Stack direction=\"row\" alignItems=\"center\">\n                    {item.icon && <Icon name={item.icon} />}\n                    <div className={styles.optionLabel}>{item.label ?? item.value}</div>\n                  </Stack>\n\n                  {item.description && <div className={styles.optionDescription}>{item.description}</div>}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      <div aria-live=\"polite\">\n        {error && <AsyncError />}\n        {!loading && options.length === 0 && !error && <NotFoundError message={noOptionsMessage} />}\n        {loading && options.length === 0 && <LoadingOptions />}\n      </div>\n    </ScrollContainer>\n  );\n};\n"],"names":["useStyles2","getComboboxStyles","useCallback","isNewGroup","MENU_OPTION_HEIGHT","MENU_OPTION_HEIGHT_DESCRIPTION","useVirtualizer","jsxs","ScrollContainer","jsx","cx","Checkbox","ALL_OPTION_VALUE","Stack","Icon","AsyncError","NotFoundError","LoadingOptions"],"mappings":"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"}