@equinor/eds-core-react/dist/esm/components/Autocomplete/Option.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { Checkbox } from '../Checkbox/Checkbox.js';

const StyledListItem = styled.li.withConfig({
  displayName: "Option__StyledListItem",
  componentId: "sc-1ly11zu-0"
})(({
  theme,
  $highlighted,
  $active,
  $isdisabled
}) => {
  const backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
  return css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;z-index:3;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), $isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
});
const Label = styled.span.withConfig({
  displayName: "Option__Label",
  componentId: "sc-1ly11zu-1"
})(({
  theme,
  $multiline
}) => {
  return css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;@supports (-moz-appearance:none){overflow:", ";}"], spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden', $multiline ? 'initial' : 'clip');
});
function AutocompleteOptionInner(props, ref) {
  const {
    value,
    optionComponent,
    multiple,
    isSelected,
    indeterminate,
    isDisabled,
    multiline,
    highlighted,
    onClick,
    'aria-selected': ariaSelected,
    ...other
  } = props;
  return /*#__PURE__*/jsxs(StyledListItem, {
    ref: ref,
    $isdisabled: isDisabled ? 'true' : 'false',
    $highlighted: highlighted,
    "aria-hidden": isDisabled,
    $active: !multiple && isSelected ? 'true' : 'false',
    onClick: e => {
      !isDisabled && onClick(e);
    },
    "aria-selected": multiple ? isSelected : ariaSelected,
    ...other,
    children: [multiple && /*#__PURE__*/jsx(Checkbox, {
      disabled: isDisabled,
      checked: isSelected,
      indeterminate: indeterminate,
      value: value,
      onChange: () => {
        return null;
      }
    }), optionComponent ? /*#__PURE__*/jsx(Fragment, {
      children: optionComponent
    }) : /*#__PURE__*/jsx(Label, {
      $multiline: multiline,
      children: value
    })]
  });
}
const AutocompleteOption = /*#__PURE__*/forwardRef(AutocompleteOptionInner);

export { AutocompleteOption };