@equinor/eds-core-react/dist/esm/components/Select/NativeSelect.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import { nativeselect } from './NativeSelect.tokens.js';
import { typographyTemplate, spacingsTemplate, outlineTemplate, useToken } from '@equinor/eds-utils';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useEds } from '../EdsProvider/eds.context.js';
import { Label } from '../Label/Label.js';

const Container = styled.div.withConfig({
  displayName: "NativeSelect__Container",
  componentId: "sc-82vb16-0"
})(["min-width:100px;width:100%;"]);
const StyledSelect = styled.select.withConfig({
  displayName: "NativeSelect__StyledSelect",
  componentId: "sc-82vb16-1"
})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:", " linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), ({
  theme
}) => css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, props => props.multiple ? `` : `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"),`, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
const NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect({
  label,
  children,
  className,
  style,
  selectRef,
  id,
  meta,
  disabled = false,
  multiple = false,
  ...other
}, ref) {
  const {
    density
  } = useEds();
  const token = useToken({
    density
  }, nativeselect);
  const containerProps = {
    ref,
    className,
    style
  };
  const selectProps = {
    ref: selectRef,
    id,
    disabled,
    multiple,
    ...other
  };
  const labelProps = {
    htmlFor: id,
    label,
    meta,
    disabled
  };
  const showLabel = label || meta;
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token,
    children: /*#__PURE__*/jsxs(Container, {
      ...containerProps,
      children: [showLabel && /*#__PURE__*/jsx(Label, {
        ...labelProps
      }), /*#__PURE__*/jsx(StyledSelect, {
        ...selectProps,
        children: children
      })]
    })
  });
});

export { NativeSelect };