UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

72 lines (69 loc) 2.65 kB
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 };