@atlaskit/select/dist/es2019/country-select.js

Select allows users to make a single selection or multiple selections from a list of options.

/* country-select.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./country-select.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { groupedCountries } from './data/countries';
import Select from './select';
// custom option renderer
const labelStyles = null;
const flagStyles = null;
const Opt = ({
  children,
  icon
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1e0c1txw _4cvr1h6o _vwz4cjiy"])
}, /*#__PURE__*/React.createElement("span", {
  "aria-hidden": "true",
  className: ax(["_1wyb1cby _12l2u2gc"])
}, icon), children);

// return the country name; used for searching
const getOptionLabel = ({
  abbr,
  code,
  name
}) => `${name} (${abbr.toUpperCase()}) +${code}`;

// set the country's abbreviation for the option value, (also searchable)
const getOptionValue = opt => opt.abbr;

// the text node of the control
const controlLabel = opt => /*#__PURE__*/React.createElement(Opt, {
  icon: opt.icon
}, opt.abbr.toUpperCase());
// the text node for an option
const optionLabel = ({
  abbr,
  code,
  icon,
  name
}) => /*#__PURE__*/React.createElement(Opt, {
  icon: icon
}, getOptionLabel({
  abbr,
  code,
  name
}));

// switch formatters based on render context (menu | value)
const formatOptionLabel = (opt, {
  context
}) => context === 'value' ? controlLabel(opt) : optionLabel(opt);

// put it all together
export const CountrySelect = props => {
  const {
    options
  } = props;
  const countryOptions = options || groupedCountries;
  return /*#__PURE__*/React.createElement(Select, _extends({
    isClearable: false,
    formatOptionLabel: formatOptionLabel,
    getOptionLabel: getOptionLabel,
    getOptionValue: getOptionValue,
    isMulti: false,
    options: countryOptions
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  }, props));
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc