@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
72 lines (69 loc) • 2.65 kB
JavaScript
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 };