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

The React implementation of the Equinor Design System

import { add_box } from '@equinor/eds-icons';
import { tokens } from '@equinor/eds-tokens';
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { Icon } from '../Icon/index.js';
import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
import { input } from '../Input/Input.tokens.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const StyledAddItemIcon = styled(Icon).withConfig({
  displayName: "AddNewOption__StyledAddItemIcon",
  componentId: "sc-8xtrxx-0"
})(({
  multiple
}) => {
  return css(["padding:", ";color:", ";"], multiple ? '0.75rem' : '0 0.75rem 0 0', tokens.colors.interactive.primary__resting.hex);
});
const StyledPlaceholder = styled.span.withConfig({
  displayName: "AddNewOption__StyledPlaceholder",
  componentId: "sc-8xtrxx-1"
})(["color:", ";"], input.entities.placeholder.typography.color);
function AddNewOptionInner(props, ref) {
  const {
    value,
    multiline,
    multiple,
    highlighted,
    onClick,
    ...other
  } = props;
  return /*#__PURE__*/jsxs(StyledListItem, {
    ref: ref,
    $highlighted: highlighted,
    onClick: e => {
      onClick(e);
    },
    ...other,
    "aria-label": `Add new option: ${value}`,
    "aria-live": "polite",
    "aria-selected": false,
    children: [/*#__PURE__*/jsx(StyledAddItemIcon, {
      multiple: multiple,
      data: add_box
    }), /*#__PURE__*/jsx(AutocompleteOptionLabel, {
      $multiline: multiline,
      children: value ? value : /*#__PURE__*/jsx(StyledPlaceholder, {
        children: "Type to add new options"
      })
    })]
  });
}
const AddNewOption = /*#__PURE__*/forwardRef(AddNewOptionInner);

export { AddNewOption };