@primer/react/lib-esm/Select/Select.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import styled from 'styled-components';
import { clsx } from 'clsx';
import { TextInputWrapper } from '../internal/components/TextInputWrapper.js';
import { toggleStyledComponent } from '../internal/utils/toggleStyledComponent.js';
import '../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
import '../FeatureFlags/DefaultFeatureFlags.js';
import classes from './Select.module.css.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga';
const arrowRightOffset = '4px';
const StyledSelect = toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'select', styled.select.withConfig({
  displayName: "Select__StyledSelect",
  componentId: "sc-124jcjr-0"
})(["appearance:none;border-radius:inherit;border:0;color:currentColor;font-size:inherit;outline:none;width:100%;background-color:inherit;margin-top:1px;margin-left:1px;margin-bottom:1px;&:disabled{background-color:transparent;}@media screen and (forced-colors:active){&:disabled{background-color:-moz-combobox;}}"]));
const ArrowIndicatorSVG = ({
  className
}) => {
  return /*#__PURE__*/React.createElement("svg", {
    "aria-hidden": "true",
    width: "16",
    height: "16",
    fill: "currentColor",
    xmlns: "http://www.w3.org/2000/svg",
    className: className
  }, /*#__PURE__*/React.createElement("path", {
    d: "m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427ZM4.074 7.47 7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426Z"
  }));
};
ArrowIndicatorSVG.displayName = "ArrowIndicatorSVG";
const StyledArrowIndicatorSVG = styled(ArrowIndicatorSVG).withConfig({
  displayName: "Select__StyledArrowIndicatorSVG",
  componentId: "sc-124jcjr-1"
})(["pointer-events:none;position:absolute;right:", ";top:50%;transform:translateY(-50%);"], arrowRightOffset);
const ArrowIndicator = ({
  className
}) => {
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React.createElement(ArrowIndicatorSVG, {
      className: clsx(classes.ArrowIndicator, className)
    });
  }
  return /*#__PURE__*/React.createElement(StyledArrowIndicatorSVG, null);
};
ArrowIndicator.displayName = "ArrowIndicator";
const Select = /*#__PURE__*/React.forwardRef(({
  block,
  children,
  contrast,
  disabled,
  placeholder,
  size,
  required,
  validationStatus,
  ...rest
}, ref) => {
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React.createElement(TextInputWrapper, {
      block: block,
      contrast: contrast,
      disabled: disabled,
      size: size,
      validationStatus: validationStatus,
      className: classes.TextInputWrapper,
      sx: rest.sx
    }, /*#__PURE__*/React.createElement(StyledSelect, _extends({
      ref: ref,
      required: required,
      disabled: disabled,
      "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
      "data-hasplaceholder": Boolean(placeholder),
      defaultValue: placeholder !== null && placeholder !== undefined ? placeholder : undefined,
      className: clsx(classes.Select, disabled && classes.Disabled)
    }, rest), placeholder && /*#__PURE__*/React.createElement("option", {
      value: "",
      disabled: required,
      hidden: required
    }, placeholder), children), /*#__PURE__*/React.createElement(ArrowIndicator, {
      className: classes.ArrowIndicator
    }));
  }
  return /*#__PURE__*/React.createElement(TextInputWrapper, {
    sx: {
      overflow: 'hidden',
      position: 'relative',
      '@media screen and (forced-colors: active)': {
        svg: {
          fill: disabled ? 'GrayText' : 'FieldText'
        }
      }
    },
    block: block,
    contrast: contrast,
    disabled: disabled,
    size: size,
    validationStatus: validationStatus
  }, /*#__PURE__*/React.createElement(StyledSelect, _extends({
    ref: ref,
    required: required,
    disabled: disabled,
    "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
    "data-hasplaceholder": Boolean(placeholder),
    defaultValue: placeholder !== null && placeholder !== undefined ? placeholder : undefined
  }, rest), placeholder && /*#__PURE__*/React.createElement("option", {
    value: "",
    disabled: required,
    hidden: required
  }, placeholder), children), /*#__PURE__*/React.createElement(ArrowIndicator, null));
});
const Option = props => /*#__PURE__*/React.createElement("option", props);
Option.displayName = "Option";
const OptGroup = props => /*#__PURE__*/React.createElement("optgroup", props);
OptGroup.displayName = "OptGroup";
var Select$1 = Object.assign(Select, {
  Option,
  OptGroup
});

export { Select$1 as default };