{"version":3,"file":"select-item.cjs","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ReactNode, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../menu/utils';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectItemProps extends SelectPrimitive.Item.Props {\n  leadingIcon?: ReactNode;\n}\n\nexport function SelectItem({\n  className,\n  children,\n  value: providedValue,\n  leadingIcon,\n  disabled,\n  ...props\n}: SelectItemProps) {\n  const value = String(providedValue);\n  const {\n    registerItem,\n    unregisterItem,\n    autocomplete,\n    searchValue,\n    value: selectValue,\n    shouldFilter,\n    hasItems,\n    multiple\n  } = useSelectContext();\n\n  const isSelected = multiple\n    ? selectValue?.includes(value)\n    : value === selectValue;\n  const isMatched = getMatch(value, children, searchValue);\n  const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;\n\n  const element =\n    typeof children === 'string' ? (\n      <>\n        {leadingIcon && (\n          <div className={styles.itemIcon} data-slot='select-item-icon'>\n            {leadingIcon}\n          </div>\n        )}\n        <Text data-slot='select-item-text'>{children}</Text>\n      </>\n    ) : (\n      children\n    );\n\n  useLayoutEffect(() => {\n    registerItem({ leadingIcon, children, value });\n    return () => {\n      unregisterItem(value);\n    };\n  }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n  if (shouldFilter && !hasItems && !isMatched && !isSelected) {\n    return null;\n  }\n\n  const ItemPrimitive = autocomplete\n    ? ComboboxPrimitive.Item\n    : SelectPrimitive.Item;\n\n  return (\n    <ItemPrimitive\n      value={value}\n      className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n      data-hidden={isHidden || undefined}\n      data-slot='select-item'\n      disabled={disabled || isHidden}\n      {...props}\n      render={(renderProps, state) => (\n        <div {...renderProps}>\n          {multiple && <Checkbox checked={state.selected} />}\n          {element}\n        </div>\n      )}\n    />\n  );\n}\nSelectItem.displayName = 'Select.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA0BE;;;AAaE;AACA;;;AAIF;;;AAgBE;;AAEA;AACF;;AAGE;;;;AAKA;AAEF;AAgBF;AACA;;"}