From 822e37abfe8c577caa96979ea968a716333bc876 Mon Sep 17 00:00:00 2001
From: Andrea Vanini <andrea.vanini@uidu.org>
Date: Thu, 5 Dec 2019 17:51:36 +0100
Subject: [PATCH] CHANGESET: twelve-pets-lay. Added contact field - different
 from member field - WIP #56

---
 .changeset/twelve-pets-lay.md                 |   9 +
 .../src/components/Filterer/form.tsx          |  40 +-
 .../src/components/Filterer/types.ts          |   1 +
 .../src/components/Grouper/form.tsx           |   2 +-
 packages/data/data-fields/package.json        |   1 +
 .../src/components/contact/index.tsx          |  23 +
 .../src/components/country/index.tsx          |   4 +
 .../data-fields/src/components/date/index.tsx |   4 +
 .../data/data-fields/src/components/index.ts  |   4 +
 .../src/components/member/index.tsx           |   4 +
 .../src/components/paymentMethod/index.tsx    |   4 +
 .../src/filters/DateFilterForm.tsx            |  46 ++
 .../src/filters/SelectFilterForm.tsx          |   6 +-
 .../data/data-fields/src/filters/index.ts     |   3 +-
 .../data/data-fields/src/filters/utils.ts     |   4 +-
 packages/data/data-manager/examples/Basic.tsx |   3 +-
 .../src/components/DataManager.tsx            |  21 +
 packages/data/table/examples-utils/index.tsx  |   2 +-
 packages/data/table/src/components/Table.tsx  |   1 +
 .../src/components/columns/contact/editor.tsx |  53 ++
 .../src/components/columns/contact/index.ts   |  18 +
 .../components/columns/contact/renderer.ts    |  18 +
 .../src/components/columns/country/index.ts   |   7 +-
 .../components/columns/country/renderer.ts    |   4 +-
 .../table/src/components/columns/index.ts     |   1 +
 .../src/components/columns/member/index.ts    |   1 +
 .../components/columns/paymentMethod/index.ts |   1 +
 .../columns/paymentMethod/renderer.ts         |   2 +-
 .../src/components/columns/primary/index.ts   |   1 -
 .../components/columns/singleSelect/index.ts  |   1 +
 packages/data/table/src/utils/index.tsx       |   5 +-
 packages/forms/select/src/CountrySelect.tsx   |  10 +-
 .../select/src/components/SingleValue.tsx     |   2 +-
 packages/forms/select/src/data/countries.ts   | 498 +++++++++---------
 34 files changed, 525 insertions(+), 279 deletions(-)
 create mode 100644 .changeset/twelve-pets-lay.md
 create mode 100644 packages/data/data-fields/src/components/contact/index.tsx
 create mode 100644 packages/data/table/src/components/columns/contact/editor.tsx
 create mode 100644 packages/data/table/src/components/columns/contact/index.ts
 create mode 100644 packages/data/table/src/components/columns/contact/renderer.ts

diff --git a/.changeset/twelve-pets-lay.md b/.changeset/twelve-pets-lay.md
new file mode 100644
index 0000000000..68867a4b6d
--- /dev/null
+++ b/.changeset/twelve-pets-lay.md
@@ -0,0 +1,9 @@
+---
+'@uidu/data-controls': patch
+'@uidu/data-fields': patch
+'@uidu/data-manager': patch
+'@uidu/table': patch
+'@uidu/select': patch
+---
+
+Added contact field - different from member field - WIP #56
diff --git a/packages/data/data-controls/src/components/Filterer/form.tsx b/packages/data/data-controls/src/components/Filterer/form.tsx
index 9f9fd96459..eae93728d6 100644
--- a/packages/data/data-controls/src/components/Filterer/form.tsx
+++ b/packages/data/data-controls/src/components/Filterer/form.tsx
@@ -2,6 +2,7 @@ import { byName } from '@uidu/data-fields';
 import Form from '@uidu/form';
 import Select from '@uidu/select';
 import React, { PureComponent } from 'react';
+import { X } from 'react-feather';
 import { FormattedMessage } from 'react-intl';
 import PickField from '../../utils/PickField';
 import { FiltererProps } from './types';
@@ -27,13 +28,17 @@ export default class FiltererForm extends PureComponent<FiltererProps> {
 
   handleSubmit = async model => {
     const { onChange } = this.props;
+    console.log(model);
     onChange(model.filters || []);
   };
 
   render() {
-    const { filters, columnDefs, addFilter } = this.props;
+    const { filters, columnDefs, addFilter, removeFilter } = this.props;
+
+    console.log(columnDefs);
 
     const filterableColumnDefs = columnDefs.filter(c => !c.hide && !!c.filter);
+    console.log(filterableColumnDefs);
 
     return (
       <Form
@@ -49,12 +54,33 @@ export default class FiltererForm extends PureComponent<FiltererProps> {
             return (
               <div className="list-group-item px-3 px-xl-4" key={filter.colId}>
                 <div className="form-group mb-2">
-                  <label htmlFor="" className="d-flex align-items-center">
-                    <FormattedMessage
-                      id="guidu.data_controls.filterer.where"
-                      defaultMessage="Where"
-                    />
-                  </label>
+                  <div className="form-group mb-0">
+                    <label htmlFor="" className="d-flex align-items-center">
+                      <FormattedMessage
+                        id="guidu.data_controls.filterer.where"
+                        defaultMessage={`{index, plural,
+                      =0 {Where}
+                      other {Then where}
+                    }`}
+                        values={{
+                          index,
+                        }}
+                      />
+                      <button
+                        type="button"
+                        className="btn btn-sm p-0 ml-auto d-flex align-items-center"
+                        onClick={e => {
+                          e.preventDefault();
+                          removeFilter(filter);
+                          // setTimeout(() => {
+                          //   (this.form.current as any).submit();
+                          // }, 300);
+                        }}
+                      >
+                        <X size={13} />
+                      </button>
+                    </label>
+                  </div>
                   <Select
                     layout="elementOnly"
                     value={filter.colId}
diff --git a/packages/data/data-controls/src/components/Filterer/types.ts b/packages/data/data-controls/src/components/Filterer/types.ts
index 7f6b8ba6a4..6626c4b1c8 100644
--- a/packages/data/data-controls/src/components/Filterer/types.ts
+++ b/packages/data/data-controls/src/components/Filterer/types.ts
@@ -6,6 +6,7 @@ export type FilterModel = ISimpleFilterModel;
 export type FiltererProps = {
   onChange: (filters: Array<any>) => void;
   addFilter: (filter: any) => void;
+  removeFilter: (filter: any) => void;
   filterModel: FilterModel;
   filters?: Array<any>;
   columnDefs: Column[];
diff --git a/packages/data/data-controls/src/components/Grouper/form.tsx b/packages/data/data-controls/src/components/Grouper/form.tsx
index 7c7b69e049..b1579f7e37 100644
--- a/packages/data/data-controls/src/components/Grouper/form.tsx
+++ b/packages/data/data-controls/src/components/Grouper/form.tsx
@@ -119,7 +119,7 @@ export default class Grouper extends Component<any> {
                 (this.form.current as any).submit();
               }, 300);
             }}
-            isDefaultOpen={false}
+            isDefaultOpen={groupers.length === 0}
             columnDefs={groupableColumnDefs.filter(
               f => groupers.map(s => s.colId).indexOf(f.colId) < 0,
             )}
diff --git a/packages/data/data-fields/package.json b/packages/data/data-fields/package.json
index f581d1fbd6..1b669bc171 100644
--- a/packages/data/data-fields/package.json
+++ b/packages/data/data-fields/package.json
@@ -15,6 +15,7 @@
     "@loadable/component": "^5.10.1",
     "@uidu/downshift": "^0.1.4",
     "@uidu/field-color-picker": "^0.1.3",
+    "@uidu/field-date": "^0.1.10",
     "@uidu/field-number": "^0.1.21",
     "@uidu/field-text": "^0.1.23",
     "@uidu/field-toggle": "^0.1.22",
diff --git a/packages/data/data-fields/src/components/contact/index.tsx b/packages/data/data-fields/src/components/contact/index.tsx
new file mode 100644
index 0000000000..09110dfcee
--- /dev/null
+++ b/packages/data/data-fields/src/components/contact/index.tsx
@@ -0,0 +1,23 @@
+import { faUsers } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Field } from '../../types';
+
+const FilterForm = loadable(() => import('../../filters/TextFilterForm'));
+
+const Contact: Field = {
+  kind: 'contact',
+  name: <FormattedMessage id="field.contact.name" defaultMessage="Contact" />,
+  icon: <FontAwesomeIcon icon={faUsers} />,
+  description: (
+    <FormattedMessage
+      id="field.contact.description"
+      defaultMessage="A contact field represents a person or an organization - a contact"
+    />
+  ),
+  filterForm: FilterForm,
+};
+
+export default Contact;
diff --git a/packages/data/data-fields/src/components/country/index.tsx b/packages/data/data-fields/src/components/country/index.tsx
index e3db030fd4..80adb6f31f 100644
--- a/packages/data/data-fields/src/components/country/index.tsx
+++ b/packages/data/data-fields/src/components/country/index.tsx
@@ -1,9 +1,12 @@
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Field } from '../../types';
 
+const FilterForm = loadable(() => import('../../filters/SelectFilterForm'));
+
 const Country: Field = {
   kind: 'country',
   name: <FormattedMessage id="field.country.name" defaultMessage="Country" />,
@@ -14,6 +17,7 @@ const Country: Field = {
       defaultMessage="Add a Country select list to your record"
     />
   ),
+  filterForm: FilterForm,
 };
 
 export default Country;
diff --git a/packages/data/data-fields/src/components/date/index.tsx b/packages/data/data-fields/src/components/date/index.tsx
index 758a649d3d..f6605bfb94 100644
--- a/packages/data/data-fields/src/components/date/index.tsx
+++ b/packages/data/data-fields/src/components/date/index.tsx
@@ -1,9 +1,12 @@
 import { faCalendarDay } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Field } from '../../types';
 
+const FilterForm = loadable(() => import('../../filters/DateFilterForm'));
+
 const Date: Field = {
   kind: 'date',
   name: <FormattedMessage id="field.date.name" defaultMessage="Date" />,
@@ -14,6 +17,7 @@ const Date: Field = {
       defaultMessage="Enter a date (e.g. 11/12/2013) or pick one from a calendar."
     />
   ),
+  filterForm: FilterForm,
 };
 
 export default Date;
diff --git a/packages/data/data-fields/src/components/index.ts b/packages/data/data-fields/src/components/index.ts
index 777ff3fd17..963119171f 100644
--- a/packages/data/data-fields/src/components/index.ts
+++ b/packages/data/data-fields/src/components/index.ts
@@ -3,6 +3,7 @@ import addressField from './address';
 import attachmentsField from './attachments';
 import avatarField from './avatar';
 import checkboxField from './checkbox';
+import contactField from './contact';
 import countryField from './country';
 import coverField from './cover';
 import currencyField from './currency';
@@ -28,6 +29,7 @@ export { default as addressField } from './address';
 export { default as attachmentsField } from './attachments';
 export { default as avatarField } from './avatar';
 export { default as checkboxField } from './checkbox';
+export { default as contactField } from './contact';
 export { default as countryField } from './country';
 export { default as coverField } from './cover';
 export { default as currencyField } from './currency';
@@ -54,6 +56,7 @@ export const byName = {
   attachments: attachmentsField,
   avatar: avatarField,
   checkbox: checkboxField,
+  contact: contactField,
   country: countryField,
   cover: coverField,
   currency: currencyField,
@@ -81,6 +84,7 @@ export default [
   attachmentsField,
   avatarField,
   checkboxField,
+  contactField,
   countryField,
   coverField,
   currencyField,
diff --git a/packages/data/data-fields/src/components/member/index.tsx b/packages/data/data-fields/src/components/member/index.tsx
index 1797e055b8..5da4101027 100644
--- a/packages/data/data-fields/src/components/member/index.tsx
+++ b/packages/data/data-fields/src/components/member/index.tsx
@@ -1,9 +1,12 @@
 import { faUsers } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Field } from '../../types';
 
+const FilterForm = loadable(() => import('../../filters/SelectFilterForm'));
+
 const Member: Field = {
   kind: 'member',
   name: <FormattedMessage id="field.member.name" defaultMessage="Member" />,
@@ -14,6 +17,7 @@ const Member: Field = {
       defaultMessage="A collaborator field lets you add collaborators to your records. Collaborators can optionally be notified when they're added."
     />
   ),
+  // filterForm: FilterForm,
 };
 
 export default Member;
diff --git a/packages/data/data-fields/src/components/paymentMethod/index.tsx b/packages/data/data-fields/src/components/paymentMethod/index.tsx
index 2a95e05c88..08d3b78a0c 100644
--- a/packages/data/data-fields/src/components/paymentMethod/index.tsx
+++ b/packages/data/data-fields/src/components/paymentMethod/index.tsx
@@ -1,9 +1,12 @@
 import { faCashRegister } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Field } from '../../types';
 
+const FilterForm = loadable(() => import('../../filters/SelectFilterForm'));
+
 const PaymentMethod: Field = {
   kind: 'paymentMethod',
   name: (
@@ -19,6 +22,7 @@ const PaymentMethod: Field = {
       defaultMessage="Linked record fields contain blue tokens that represent links to other records."
     />
   ),
+  filterForm: FilterForm,
 };
 
 export default PaymentMethod;
diff --git a/packages/data/data-fields/src/filters/DateFilterForm.tsx b/packages/data/data-fields/src/filters/DateFilterForm.tsx
index e69de29bb2..6acf145804 100644
--- a/packages/data/data-fields/src/filters/DateFilterForm.tsx
+++ b/packages/data/data-fields/src/filters/DateFilterForm.tsx
@@ -0,0 +1,46 @@
+import FieldDate from '@uidu/field-date';
+import Select from '@uidu/select';
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import { filtersByType } from './utils';
+
+function DateFilterForm({
+  onChange,
+  filter = {} as any,
+  index = 0,
+  intl,
+  ...rest
+}) {
+  const filters = filtersByType(intl, 'date');
+  return (
+    <>
+      <div className="form-row">
+        <div className="col-4">
+          <Select
+            isClearable={false}
+            layout="elementOnly"
+            value={filter.type || filters[0].id}
+            name={`filters[${index}][type]`}
+            options={filters}
+          />
+        </div>
+        <div className="col-8">
+          <FieldDate
+            layout="elementOnly"
+            name={`filters[${index}][filter]`}
+            value={filter.filter}
+            onChange={(name, value) => {
+              console.log(value);
+              if (value !== '') {
+                onChange(name, value);
+              }
+            }}
+            autoFocus
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default injectIntl(DateFilterForm);
diff --git a/packages/data/data-fields/src/filters/SelectFilterForm.tsx b/packages/data/data-fields/src/filters/SelectFilterForm.tsx
index 60541e5323..7fcc1520ab 100644
--- a/packages/data/data-fields/src/filters/SelectFilterForm.tsx
+++ b/packages/data/data-fields/src/filters/SelectFilterForm.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { injectIntl } from 'react-intl';
 import { filtersByType } from './utils';
 
-function CurrencyFilterForm({
+function SelectFilterForm({
   onChange,
   filter = {} as any,
   index = 0,
@@ -13,7 +13,7 @@ function CurrencyFilterForm({
   },
   ...rest
 }) {
-  const filters = filtersByType(intl, 'number');
+  const filters = filtersByType(intl, 'singleSelect');
   return (
     <>
       <div className="form-row">
@@ -45,4 +45,4 @@ function CurrencyFilterForm({
   );
 }
 
-export default injectIntl(CurrencyFilterForm);
+export default injectIntl(SelectFilterForm);
diff --git a/packages/data/data-fields/src/filters/index.ts b/packages/data/data-fields/src/filters/index.ts
index 3cbd5fdc6d..ee58e5558a 100644
--- a/packages/data/data-fields/src/filters/index.ts
+++ b/packages/data/data-fields/src/filters/index.ts
@@ -1,3 +1,4 @@
-// export { default as DateFilterForm } from './DateFilterForm';
+export { default as DateFilterForm } from './DateFilterForm';
 export { default as NumberFilterForm } from './NumberFilterForm';
+export { default as SelectFilterForm } from './SelectFilterForm';
 export { default as TextFilterForm } from './TextFilterForm';
diff --git a/packages/data/data-fields/src/filters/utils.ts b/packages/data/data-fields/src/filters/utils.ts
index b3e654b94c..4266fb1f69 100644
--- a/packages/data/data-fields/src/filters/utils.ts
+++ b/packages/data/data-fields/src/filters/utils.ts
@@ -1,6 +1,6 @@
 // https://www.ag-grid.com/javascript-grid-filter-provided-simple/
 
-export type FilterType = 'text' | 'number' | 'date';
+export type FilterType = 'text' | 'number' | 'date' | 'singleSelect';
 
 const allFilters = ({ intl }) => [
   { kinds: ['text', 'number', 'date'], name: '=', id: 'equals' },
@@ -22,6 +22,8 @@ const allFilters = ({ intl }) => [
   { kinds: ['number'], name: '>=', id: 'greaterThanOrEqual' },
   { kinds: ['number', 'date'], name: 'In Range', id: 'inRange' },
   { kinds: ['text', 'number', 'date'], name: 'Empty', id: 'empty' },
+  { kinds: ['singleSelect'], name: 'Is', id: 'equals' },
+  { kinds: ['singleSelect'], name: 'Is not', id: 'notEqual' },
 ];
 
 export const pickFilters = (intl, list: String[]) =>
diff --git a/packages/data/data-manager/examples/Basic.tsx b/packages/data/data-manager/examples/Basic.tsx
index e34f3dd9ec..6e41bf48dd 100644
--- a/packages/data/data-manager/examples/Basic.tsx
+++ b/packages/data/data-manager/examples/Basic.tsx
@@ -54,8 +54,9 @@ const dataViews = [
       'gender',
       'phone',
       'addField',
+      'createdAt',
     ],
-    groupers: [{ colId: 'country' }],
+    // groupers: [{ colId: 'country' }],
     sorters: [{ colId: 'amount', sort: 'desc' }],
   },
   {
diff --git a/packages/data/data-manager/src/components/DataManager.tsx b/packages/data/data-manager/src/components/DataManager.tsx
index 47b0b6f413..a98e468ad9 100644
--- a/packages/data/data-manager/src/components/DataManager.tsx
+++ b/packages/data/data-manager/src/components/DataManager.tsx
@@ -282,6 +282,26 @@ export default class DataManager extends PureComponent<DataManagerProps, any> {
     }));
   };
 
+  removeFilter = filter => {
+    this.setState(
+      prevState => ({
+        filterModel: Object.keys(prevState.filterModel).reduce(
+          (object, key) => {
+            if (key !== filter.colId) {
+              object[key] = prevState.filterModel[key];
+            }
+            return object;
+          },
+          {},
+        ),
+      }),
+      () => {
+        this.gridApi.setFilterModel(this.state.filterModel);
+        this.gridApi.onFilterChanged();
+      },
+    );
+  };
+
   setFilterModel = filters => {
     this.setState(
       prevState => ({
@@ -655,6 +675,7 @@ export default class DataManager extends PureComponent<DataManagerProps, any> {
               )}
               onChange={this.setFilterModel}
               addFilter={this.addFilter}
+              removeFilter={this.removeFilter}
               filterModel={filterModel}
               {...availableControls.filterer.props}
             />
diff --git a/packages/data/table/examples-utils/index.tsx b/packages/data/table/examples-utils/index.tsx
index 1c52c90ec3..4f2dc8895e 100644
--- a/packages/data/table/examples-utils/index.tsx
+++ b/packages/data/table/examples-utils/index.tsx
@@ -19,7 +19,7 @@ export const availableColumns = [
     field: 'avatar',
   },
   {
-    dataField: 'member',
+    dataField: 'contact',
     dataFieldParams: {
       avatar: data => (data ? data.avatar : null),
     },
diff --git a/packages/data/table/src/components/Table.tsx b/packages/data/table/src/components/Table.tsx
index 093ad043cf..4d73050f87 100644
--- a/packages/data/table/src/components/Table.tsx
+++ b/packages/data/table/src/components/Table.tsx
@@ -239,6 +239,7 @@ const Table = ({
           address: {},
           attachments: {},
           checkbox: {},
+          contact: {},
           country: {},
           cover: {},
           currency: {},
diff --git a/packages/data/table/src/components/columns/contact/editor.tsx b/packages/data/table/src/components/columns/contact/editor.tsx
new file mode 100644
index 0000000000..80a4dd3173
--- /dev/null
+++ b/packages/data/table/src/components/columns/contact/editor.tsx
@@ -0,0 +1,53 @@
+import Item, { ItemGroup } from '@uidu/item';
+import React, { Component } from 'react';
+
+export default class Members extends Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: props.value,
+    };
+  }
+
+  getValue() {
+    return this.state.selected;
+  }
+
+  isPopup() {
+    return true;
+  }
+
+  onChange = (e, selected) => {
+    e.preventDefault();
+    this.setState(
+      {
+        selected,
+      },
+      () => this.props.api.stopEditing(),
+    );
+  };
+
+  render() {
+    const {
+      value,
+      colDef: { cellEditorParams: params },
+      column: { actualWidth },
+    } = this.props;
+    const { options } = params;
+
+    return (
+      <div
+        tabIndex={1} // important - without this the keypresses wont be caught
+        style={{ width: actualWidth }}
+      >
+        <ItemGroup>
+          {options.map(option => (
+            <Item onClick={e => this.onChange(e, option.name)}>
+              {option.name}
+            </Item>
+          ))}
+        </ItemGroup>
+      </div>
+    );
+  }
+}
diff --git a/packages/data/table/src/components/columns/contact/index.ts b/packages/data/table/src/components/columns/contact/index.ts
new file mode 100644
index 0000000000..69de9904c6
--- /dev/null
+++ b/packages/data/table/src/components/columns/contact/index.ts
@@ -0,0 +1,18 @@
+import { contactField } from '@uidu/data-fields';
+import Editor from './editor';
+import Renderer from './renderer';
+
+export default field => ({
+  type: contactField.kind,
+  cellRenderer: Renderer,
+  cellRendererParams: field,
+  cellEditorFramework: Editor,
+  cellEditorParams: {
+    options: field.options,
+  },
+  filter: 'agTextColumnFilter',
+  headerComponentParams: {
+    menuIcon: contactField.icon,
+  },
+  // filterValueGetter: params => params.data[field.colId],
+});
diff --git a/packages/data/table/src/components/columns/contact/renderer.ts b/packages/data/table/src/components/columns/contact/renderer.ts
new file mode 100644
index 0000000000..f4d2458e81
--- /dev/null
+++ b/packages/data/table/src/components/columns/contact/renderer.ts
@@ -0,0 +1,18 @@
+export default params => {
+  if (params.node && params.node.group) {
+    return params.value;
+  }
+
+  const { value, avatar, data } = params;
+  // create the cell
+  return `
+    <div style="min-width: 0">
+      <span class="d-flex align-items-center">
+        <img class="rounded-circle mr-2" style="width: 24px" src=${avatar(
+          data,
+        )} />
+        <span class="text-truncate">${value}</span>
+      </span>
+    </div>
+  `;
+};
diff --git a/packages/data/table/src/components/columns/country/index.ts b/packages/data/table/src/components/columns/country/index.ts
index 57c2c2b22b..2d884c581a 100644
--- a/packages/data/table/src/components/columns/country/index.ts
+++ b/packages/data/table/src/components/columns/country/index.ts
@@ -5,13 +5,14 @@ import Renderer from './renderer';
 export default field => ({
   type: countryField.kind,
   filter: 'agTextColumnFilter',
-
   headerComponentParams: {
     menuIcon: countryField.icon,
   },
   cellRenderer: Renderer,
-  cellRendererParams: { countries: allCountries },
+  cellRendererParams: { options: allCountries },
+  // keyCreator: params => params.value.name,
+  filterValueGetter: params => params.data[field.colId],
   // keyCreator: params => params.value,
   // valueGetter: ({ data }) =>
-  //   allCountries.filter(option => option.abbr === data[field.colId])[0],
+  //   allCountries.filter(option => option.id === data[field.colId])[0],
 });
diff --git a/packages/data/table/src/components/columns/country/renderer.ts b/packages/data/table/src/components/columns/country/renderer.ts
index 6a5de619bd..6d3e655e50 100644
--- a/packages/data/table/src/components/columns/country/renderer.ts
+++ b/packages/data/table/src/components/columns/country/renderer.ts
@@ -7,9 +7,7 @@ export default params => {
     return null;
   }
 
-  const value = params.countries.filter(
-    option => option.abbr === params.value,
-  )[0];
+  const value = params.options.filter(option => option.id === params.value)[0];
 
   if (!value) {
     return params.value;
diff --git a/packages/data/table/src/components/columns/index.ts b/packages/data/table/src/components/columns/index.ts
index 1109ffc409..dd64d1a257 100644
--- a/packages/data/table/src/components/columns/index.ts
+++ b/packages/data/table/src/components/columns/index.ts
@@ -3,6 +3,7 @@ export { default as addressColumn } from './address';
 export { default as attachmentsColumn } from './attachments';
 export { default as avatarColumn } from './avatar';
 export { default as checkboxColumn } from './checkbox';
+export { default as contactColumn } from './contact';
 export { default as countryColumn } from './country';
 export { default as coverColumn } from './cover';
 export { default as currencyColumn } from './currency';
diff --git a/packages/data/table/src/components/columns/member/index.ts b/packages/data/table/src/components/columns/member/index.ts
index 39f53e7784..9dc6efc398 100644
--- a/packages/data/table/src/components/columns/member/index.ts
+++ b/packages/data/table/src/components/columns/member/index.ts
@@ -14,4 +14,5 @@ export default field => ({
   headerComponentParams: {
     menuIcon: memberField.icon,
   },
+  // filterValueGetter: params => params.data[field.colId],
 });
diff --git a/packages/data/table/src/components/columns/paymentMethod/index.ts b/packages/data/table/src/components/columns/paymentMethod/index.ts
index c3aa91e74e..0d2c59b94d 100644
--- a/packages/data/table/src/components/columns/paymentMethod/index.ts
+++ b/packages/data/table/src/components/columns/paymentMethod/index.ts
@@ -8,6 +8,7 @@ export default field => ({
     menuIcon: paymentMethodField.icon,
   },
   keyCreator: params => params.value.name,
+  filterValueGetter: params => params.data[field.colId],
   cellRenderer: Renderer,
   cellRendererParams: {
     options: field.options,
diff --git a/packages/data/table/src/components/columns/paymentMethod/renderer.ts b/packages/data/table/src/components/columns/paymentMethod/renderer.ts
index 2a238b48a9..0ed6c6de4a 100644
--- a/packages/data/table/src/components/columns/paymentMethod/renderer.ts
+++ b/packages/data/table/src/components/columns/paymentMethod/renderer.ts
@@ -1,7 +1,7 @@
 export default params => {
   // create the cell
   if (params.node && params.node.group) {
-    return null;
+    return params.value;
   }
 
   if (params.value) {
diff --git a/packages/data/table/src/components/columns/primary/index.ts b/packages/data/table/src/components/columns/primary/index.ts
index 7460ce8766..0dfb48730f 100644
--- a/packages/data/table/src/components/columns/primary/index.ts
+++ b/packages/data/table/src/components/columns/primary/index.ts
@@ -1,5 +1,4 @@
 export default () => ({
-  type: 'primary',
   suppressMovable: true,
   lockVisible: true,
 });
diff --git a/packages/data/table/src/components/columns/singleSelect/index.ts b/packages/data/table/src/components/columns/singleSelect/index.ts
index 97bc062d98..4ff48c1f11 100644
--- a/packages/data/table/src/components/columns/singleSelect/index.ts
+++ b/packages/data/table/src/components/columns/singleSelect/index.ts
@@ -20,6 +20,7 @@ export default field => ({
     menuIcon: singleSelectField.icon,
   },
   keyCreator: params => params.value.name,
+  filterValueGetter: params => params.data[field.colId],
   valueGetter: ({ data }) =>
     data
       ? field.options.filter(option => option.id === data[field.colId])[0]
diff --git a/packages/data/table/src/utils/index.tsx b/packages/data/table/src/utils/index.tsx
index 9284424d25..f4be8b9c68 100644
--- a/packages/data/table/src/utils/index.tsx
+++ b/packages/data/table/src/utils/index.tsx
@@ -7,6 +7,7 @@ import {
   attachmentsColumn,
   avatarColumn,
   checkboxColumn,
+  contactColumn,
   countryColumn,
   coverColumn,
   currencyColumn,
@@ -44,6 +45,8 @@ const getColumnType = (dataField: Field['kind'], dataFieldParams: any = {}) => {
       return avatarColumn();
     case 'checkbox':
       return checkboxColumn();
+    case 'contact':
+      return contactColumn(dataFieldParams);
     case 'country':
       return countryColumn(dataFieldParams);
     case 'cover':
@@ -150,7 +153,7 @@ export const valueRenderer = (data, column) => {
 };
 
 export const getPrimary = columnDefs =>
-  columnDefs.filter(column => column.type === 'primary')[0];
+  columnDefs.filter(column => !!column.lockVisible && column.type !== 'uid')[0];
 
 export const getCover = columnDefs =>
   columnDefs.filter(column => column.type === 'cover')[0];
diff --git a/packages/forms/select/src/CountrySelect.tsx b/packages/forms/select/src/CountrySelect.tsx
index 9b8544e6ca..453ed93df6 100644
--- a/packages/forms/select/src/CountrySelect.tsx
+++ b/packages/forms/select/src/CountrySelect.tsx
@@ -3,7 +3,7 @@ import { groupedCountries } from './data/countries';
 import Select from './Select';
 
 // flow stuff
-type OptionType = { abbr: string; code: number; icon: string; name: string };
+type OptionType = { id: string; code: number; icon: string; name: string };
 
 // custom option renderer
 const labelCSS = () => ({
@@ -28,16 +28,16 @@ const Opt = ({ children, icon }: any) => (
 const getOptionLabel = (opt: OptionType) => opt.name;
 
 // set the country's abbreviation for the option value, (also searchable)
-const getOptionValue = (opt: OptionType) => opt.abbr;
+const getOptionValue = (opt: OptionType) => opt.id;
 
 // the text node of the control
 const controlLabel = (opt: OptionType) => (
-  <Opt icon={opt.icon}>{opt.abbr.toUpperCase()}</Opt>
+  <Opt icon={opt.icon}>{opt.id.toUpperCase()}</Opt>
 );
 // the text node for an option
-const optionLabel = ({ abbr, code, icon, name }: OptionType) => (
+const optionLabel = ({ id, code, icon, name }: OptionType) => (
   <Opt icon={icon}>
-    {name} ({abbr.toUpperCase()}) +{code}
+    {name} ({id.toUpperCase()}) +{code}
   </Opt>
 );
 
diff --git a/packages/forms/select/src/components/SingleValue.tsx b/packages/forms/select/src/components/SingleValue.tsx
index 1185ccad4c..41f7728252 100644
--- a/packages/forms/select/src/components/SingleValue.tsx
+++ b/packages/forms/select/src/components/SingleValue.tsx
@@ -18,7 +18,7 @@ const SingleValue = ({ innerProps, data, getStyles, ...otherProps }) => {
         </div>
       )}
       <div style={{ minWidth: 0 }}>
-        <p className="mb-0">{data.name}</p>
+        <p className="mb-0 text-truncate">{data.name}</p>
       </div>
     </div>
   );
diff --git a/packages/forms/select/src/data/countries.ts b/packages/forms/select/src/data/countries.ts
index bf7cb10d36..65db308c98 100644
--- a/packages/forms/select/src/data/countries.ts
+++ b/packages/forms/select/src/data/countries.ts
@@ -1,5 +1,5 @@
 type Country = {
-  abbr: string;
+  id: string;
   code: string;
   before: string;
   name: string;
@@ -7,335 +7,335 @@ type Country = {
 };
 
 export const allCountries: Array<Country> = [
-  { before: '🇦🇫', name: 'Afghanistan', abbr: 'AF', code: '93' },
-  { before: '🇦🇽', name: 'Alland Islands', abbr: 'AX', code: '358' },
-  { before: '🇦🇱', name: 'Albania', abbr: 'AL', code: '355' },
-  { before: '🇩🇿', name: 'Algeria', abbr: 'DZ', code: '213' },
-  { before: '🇦🇸', name: 'American Samoa', abbr: 'AS', code: '1-684' },
-  { before: '🇦🇩', name: 'Andorra', abbr: 'AD', code: '376' },
-  { before: '🇦🇴', name: 'Angola', abbr: 'AO', code: '244' },
-  { before: '🇦🇮', name: 'Anguilla', abbr: 'AI', code: '1-264' },
-  { before: '🇦🇶', name: 'Antarctica', abbr: 'AQ', code: '672' },
-  { before: '🇦🇬', name: 'Antigua and Barbuda', abbr: 'AG', code: '1-268' },
-  { before: '🇦🇷', name: 'Argentina', abbr: 'AR', code: '54' },
-  { before: '🇦🇲', name: 'Armenia', abbr: 'AM', code: '374' },
-  { before: '🇦🇼', name: 'Aruba', abbr: 'AW', code: '297' },
-  { before: '🇦🇺', name: 'Australia', abbr: 'AU', code: '61', suggested: true },
-  { before: '🇦🇹', name: 'Austria', abbr: 'AT', code: '43' },
-  { before: '🇦🇿', name: 'Azerbaijan', abbr: 'AZ', code: '994' },
-  { before: '🇧🇸', name: 'Bahamas', abbr: 'BS', code: '1-242' },
-  { before: '🇧🇭', name: 'Bahrain', abbr: 'BH', code: '973' },
-  { before: '🇧🇩', name: 'Bangladesh', abbr: 'BD', code: '880' },
-  { before: '🇧🇧', name: 'Barbados', abbr: 'BB', code: '1-246' },
-  { before: '🇧🇾', name: 'Belarus', abbr: 'BY', code: '375' },
-  { before: '🇧🇪', name: 'Belgium', abbr: 'BE', code: '32' },
-  { before: '🇧🇿', name: 'Belize', abbr: 'BZ', code: '501' },
-  { before: '🇧🇯', name: 'Benin', abbr: 'BJ', code: '229' },
-  { before: '🇧🇲', name: 'Bermuda', abbr: 'BM', code: '1-441' },
-  { before: '🇧🇹', name: 'Bhutan', abbr: 'BT', code: '975' },
-  { before: '🇧🇴', name: 'Bolivia', abbr: 'BO', code: '591' },
-  { before: '🇧🇦', name: 'Bosnia and Herzegovina', abbr: 'BA', code: '387' },
-  { before: '🇧🇼', name: 'Botswana', abbr: 'BW', code: '267' },
-  { before: '🇧🇻', name: 'Bouvet Island', abbr: 'BV', code: '47' },
-  { before: '🇧🇷', name: 'Brazil', abbr: 'BR', code: '55' },
+  { before: '🇦🇫', name: 'Afghanistan', id: 'AF', code: '93' },
+  { before: '🇦🇽', name: 'Alland Islands', id: 'AX', code: '358' },
+  { before: '🇦🇱', name: 'Albania', id: 'AL', code: '355' },
+  { before: '🇩🇿', name: 'Algeria', id: 'DZ', code: '213' },
+  { before: '🇦🇸', name: 'American Samoa', id: 'AS', code: '1-684' },
+  { before: '🇦🇩', name: 'Andorra', id: 'AD', code: '376' },
+  { before: '🇦🇴', name: 'Angola', id: 'AO', code: '244' },
+  { before: '🇦🇮', name: 'Anguilla', id: 'AI', code: '1-264' },
+  { before: '🇦🇶', name: 'Antarctica', id: 'AQ', code: '672' },
+  { before: '🇦🇬', name: 'Antigua and Barbuda', id: 'AG', code: '1-268' },
+  { before: '🇦🇷', name: 'Argentina', id: 'AR', code: '54' },
+  { before: '🇦🇲', name: 'Armenia', id: 'AM', code: '374' },
+  { before: '🇦🇼', name: 'Aruba', id: 'AW', code: '297' },
+  { before: '🇦🇺', name: 'Australia', id: 'AU', code: '61', suggested: true },
+  { before: '🇦🇹', name: 'Austria', id: 'AT', code: '43' },
+  { before: '🇦🇿', name: 'Azerbaijan', id: 'AZ', code: '994' },
+  { before: '🇧🇸', name: 'Bahamas', id: 'BS', code: '1-242' },
+  { before: '🇧🇭', name: 'Bahrain', id: 'BH', code: '973' },
+  { before: '🇧🇩', name: 'Bangladesh', id: 'BD', code: '880' },
+  { before: '🇧🇧', name: 'Barbados', id: 'BB', code: '1-246' },
+  { before: '🇧🇾', name: 'Belarus', id: 'BY', code: '375' },
+  { before: '🇧🇪', name: 'Belgium', id: 'BE', code: '32' },
+  { before: '🇧🇿', name: 'Belize', id: 'BZ', code: '501' },
+  { before: '🇧🇯', name: 'Benin', id: 'BJ', code: '229' },
+  { before: '🇧🇲', name: 'Bermuda', id: 'BM', code: '1-441' },
+  { before: '🇧🇹', name: 'Bhutan', id: 'BT', code: '975' },
+  { before: '🇧🇴', name: 'Bolivia', id: 'BO', code: '591' },
+  { before: '🇧🇦', name: 'Bosnia and Herzegovina', id: 'BA', code: '387' },
+  { before: '🇧🇼', name: 'Botswana', id: 'BW', code: '267' },
+  { before: '🇧🇻', name: 'Bouvet Island', id: 'BV', code: '47' },
+  { before: '🇧🇷', name: 'Brazil', id: 'BR', code: '55' },
   {
     before: '🇮🇴',
     name: 'British Indian Ocean Territory',
-    abbr: 'IO',
+    id: 'IO',
     code: '246',
   },
-  { before: '🇻🇬', name: 'British Virgin Islands', abbr: 'VG', code: '1-284' },
-  { before: '🇧🇳', name: 'Brunei Darussalam', abbr: 'BN', code: '673' },
-  { before: '🇧🇬', name: 'Bulgaria', abbr: 'BG', code: '359' },
-  { before: '🇧🇫', name: 'Burkina Faso', abbr: 'BF', code: '226' },
-  { before: '🇧🇮', name: 'Burundi', abbr: 'BI', code: '257' },
-  { before: '🇰🇭', name: 'Cambodia', abbr: 'KH', code: '855' },
-  { before: '🇨🇲', name: 'Cameroon', abbr: 'CM', code: '237' },
-  { before: '🇨🇦', name: 'Canada', abbr: 'CA', code: '1', suggested: true },
-  { before: '🇨🇻', name: 'Cape Verde', abbr: 'CV', code: '238' },
-  { before: '🇰🇾', name: 'Cayman Islands', abbr: 'KY', code: '1-345' },
-  { before: '🇨🇫', name: 'Central African Republic', abbr: 'CF', code: '236' },
-  { before: '🇹🇩', name: 'Chad', abbr: 'TD', code: '235' },
-  { before: '🇨🇱', name: 'Chile', abbr: 'CL', code: '56' },
-  { before: '🇨🇳', name: 'China', abbr: 'CN', code: '86' },
-  { before: '🇨🇽', name: 'Christmas Island', abbr: 'CX', code: '61' },
-  { before: '🇨🇨', name: 'Cocos (Keeling) Islands', abbr: 'CC', code: '61' },
-  { before: '🇨🇴', name: 'Colombia', abbr: 'CO', code: '57' },
-  { before: '🇰🇲', name: 'Comoros', abbr: 'KM', code: '269' },
+  { before: '🇻🇬', name: 'British Virgin Islands', id: 'VG', code: '1-284' },
+  { before: '🇧🇳', name: 'Brunei Darussalam', id: 'BN', code: '673' },
+  { before: '🇧🇬', name: 'Bulgaria', id: 'BG', code: '359' },
+  { before: '🇧🇫', name: 'Burkina Faso', id: 'BF', code: '226' },
+  { before: '🇧🇮', name: 'Burundi', id: 'BI', code: '257' },
+  { before: '🇰🇭', name: 'Cambodia', id: 'KH', code: '855' },
+  { before: '🇨🇲', name: 'Cameroon', id: 'CM', code: '237' },
+  { before: '🇨🇦', name: 'Canada', id: 'CA', code: '1', suggested: true },
+  { before: '🇨🇻', name: 'Cape Verde', id: 'CV', code: '238' },
+  { before: '🇰🇾', name: 'Cayman Islands', id: 'KY', code: '1-345' },
+  { before: '🇨🇫', name: 'Central African Republic', id: 'CF', code: '236' },
+  { before: '🇹🇩', name: 'Chad', id: 'TD', code: '235' },
+  { before: '🇨🇱', name: 'Chile', id: 'CL', code: '56' },
+  { before: '🇨🇳', name: 'China', id: 'CN', code: '86' },
+  { before: '🇨🇽', name: 'Christmas Island', id: 'CX', code: '61' },
+  { before: '🇨🇨', name: 'Cocos (Keeling) Islands', id: 'CC', code: '61' },
+  { before: '🇨🇴', name: 'Colombia', id: 'CO', code: '57' },
+  { before: '🇰🇲', name: 'Comoros', id: 'KM', code: '269' },
   {
     before: '🇨🇩',
     name: 'Congo, Democratic Republic of the',
-    abbr: 'CG',
+    id: 'CG',
     code: '243',
   },
   {
     before: '🇨🇬',
     name: 'Congo, Republic of the',
-    abbr: 'CD',
+    id: 'CD',
     code: '242',
   },
-  { before: '🇨🇰', name: 'Cook Islands', abbr: 'CK', code: '682' },
-  { before: '🇨🇷', name: 'Costa Rica', abbr: 'CR', code: '506' },
-  { before: '🇨🇮', name: "Cote d'Ivoire", abbr: 'CI', code: '225' },
-  { before: '🇭🇷', name: 'Croatia', abbr: 'HR', code: '385' },
-  { before: '🇨🇺', name: 'Cuba', abbr: 'CU', code: '53' },
-  { before: '🇨🇼', name: 'Curacao', abbr: 'CW', code: '599' },
-  { before: '🇨🇾', name: 'Cyprus', abbr: 'CY', code: '357' },
-  { before: '🇨🇿', name: 'Czech Republic', abbr: 'CZ', code: '420' },
-  { before: '🇩🇰', name: 'Denmark', abbr: 'DK', code: '45' },
-  { before: '🇩🇯', name: 'Djibouti', abbr: 'DJ', code: '253' },
-  { before: '🇩🇲', name: 'Dominica', abbr: 'DM', code: '1-767' },
-  { before: '🇩🇴', name: 'Dominican Republic', abbr: 'DO', code: '1-809' },
-  { before: '🇪🇨', name: 'Ecuador', abbr: 'EC', code: '593' },
-  { before: '🇪🇬', name: 'Egypt', abbr: 'EG', code: '20' },
-  { before: '🇸🇻', name: 'El Salvador', abbr: 'SV', code: '503' },
-  { before: '🇬🇶', name: 'Equatorial Guinea', abbr: 'GQ', code: '240' },
-  { before: '🇪🇷', name: 'Eritrea', abbr: 'ER', code: '291' },
-  { before: '🇪🇪', name: 'Estonia', abbr: 'EE', code: '372' },
-  { before: '🇪🇹', name: 'Ethiopia', abbr: 'ET', code: '251' },
+  { before: '🇨🇰', name: 'Cook Islands', id: 'CK', code: '682' },
+  { before: '🇨🇷', name: 'Costa Rica', id: 'CR', code: '506' },
+  { before: '🇨🇮', name: "Cote d'Ivoire", id: 'CI', code: '225' },
+  { before: '🇭🇷', name: 'Croatia', id: 'HR', code: '385' },
+  { before: '🇨🇺', name: 'Cuba', id: 'CU', code: '53' },
+  { before: '🇨🇼', name: 'Curacao', id: 'CW', code: '599' },
+  { before: '🇨🇾', name: 'Cyprus', id: 'CY', code: '357' },
+  { before: '🇨🇿', name: 'Czech Republic', id: 'CZ', code: '420' },
+  { before: '🇩🇰', name: 'Denmark', id: 'DK', code: '45' },
+  { before: '🇩🇯', name: 'Djibouti', id: 'DJ', code: '253' },
+  { before: '🇩🇲', name: 'Dominica', id: 'DM', code: '1-767' },
+  { before: '🇩🇴', name: 'Dominican Republic', id: 'DO', code: '1-809' },
+  { before: '🇪🇨', name: 'Ecuador', id: 'EC', code: '593' },
+  { before: '🇪🇬', name: 'Egypt', id: 'EG', code: '20' },
+  { before: '🇸🇻', name: 'El Salvador', id: 'SV', code: '503' },
+  { before: '🇬🇶', name: 'Equatorial Guinea', id: 'GQ', code: '240' },
+  { before: '🇪🇷', name: 'Eritrea', id: 'ER', code: '291' },
+  { before: '🇪🇪', name: 'Estonia', id: 'EE', code: '372' },
+  { before: '🇪🇹', name: 'Ethiopia', id: 'ET', code: '251' },
   {
     before: '🇫🇰',
     name: 'Falkland Islands (Malvinas)',
-    abbr: 'FK',
+    id: 'FK',
     code: '500',
   },
-  { before: '🇫🇴', name: 'Faroe Islands', abbr: 'FO', code: '298' },
-  { before: '🇫🇯', name: 'Fiji', abbr: 'FJ', code: '679' },
-  { before: '🇫🇮', name: 'Finland', abbr: 'FI', code: '358' },
-  { before: '🇫🇷', name: 'France', abbr: 'FR', code: '33', suggested: true },
-  { before: '🇬🇫', name: 'French Guiana', abbr: 'GF', code: '594' },
-  { before: '🇵🇫', name: 'French Polynesia', abbr: 'PF', code: '689' },
+  { before: '🇫🇴', name: 'Faroe Islands', id: 'FO', code: '298' },
+  { before: '🇫🇯', name: 'Fiji', id: 'FJ', code: '679' },
+  { before: '🇫🇮', name: 'Finland', id: 'FI', code: '358' },
+  { before: '🇫🇷', name: 'France', id: 'FR', code: '33', suggested: true },
+  { before: '🇬🇫', name: 'French Guiana', id: 'GF', code: '594' },
+  { before: '🇵🇫', name: 'French Polynesia', id: 'PF', code: '689' },
   {
     before: '🇹🇫',
     name: 'French Southern Territories',
-    abbr: 'TF',
+    id: 'TF',
     code: '262',
   },
-  { before: '🇬🇦', name: 'Gabon', abbr: 'GA', code: '241' },
-  { before: '🇬🇲', name: 'Gambia', abbr: 'GM', code: '220' },
-  { before: '🇬🇪', name: 'Georgia', abbr: 'GE', code: '995' },
-  { before: '🇩🇪', name: 'Germany', abbr: 'DE', code: '49', suggested: true },
-  { before: '🇬🇭', name: 'Ghana', abbr: 'GH', code: '233' },
-  { before: '🇬🇮', name: 'Gibraltar', abbr: 'GI', code: '350' },
-  { before: '🇬🇷', name: 'Greece', abbr: 'GR', code: '30' },
-  { before: '🇬🇱', name: 'Greenland', abbr: 'GL', code: '299' },
-  { before: '🇬🇩', name: 'Grenada', abbr: 'GD', code: '1-473' },
-  { before: '🇬🇵', name: 'Guadeloupe', abbr: 'GP', code: '590' },
-  { before: '🇬🇺', name: 'Guam', abbr: 'GU', code: '1-671' },
-  { before: '🇬🇹', name: 'Guatemala', abbr: 'GT', code: '502' },
-  { before: '🇬🇬', name: 'Guernsey', abbr: 'GG', code: '44' },
-  { before: '🇬🇼', name: 'Guinea-Bissau', abbr: 'GW', code: '245' },
-  { before: '🇬🇳', name: 'Guinea', abbr: 'GN', code: '224' },
-  { before: '🇬🇾', name: 'Guyana', abbr: 'GY', code: '592' },
-  { before: '🇭🇹', name: 'Haiti', abbr: 'HT', code: '509' },
+  { before: '🇬🇦', name: 'Gabon', id: 'GA', code: '241' },
+  { before: '🇬🇲', name: 'Gambia', id: 'GM', code: '220' },
+  { before: '🇬🇪', name: 'Georgia', id: 'GE', code: '995' },
+  { before: '🇩🇪', name: 'Germany', id: 'DE', code: '49', suggested: true },
+  { before: '🇬🇭', name: 'Ghana', id: 'GH', code: '233' },
+  { before: '🇬🇮', name: 'Gibraltar', id: 'GI', code: '350' },
+  { before: '🇬🇷', name: 'Greece', id: 'GR', code: '30' },
+  { before: '🇬🇱', name: 'Greenland', id: 'GL', code: '299' },
+  { before: '🇬🇩', name: 'Grenada', id: 'GD', code: '1-473' },
+  { before: '🇬🇵', name: 'Guadeloupe', id: 'GP', code: '590' },
+  { before: '🇬🇺', name: 'Guam', id: 'GU', code: '1-671' },
+  { before: '🇬🇹', name: 'Guatemala', id: 'GT', code: '502' },
+  { before: '🇬🇬', name: 'Guernsey', id: 'GG', code: '44' },
+  { before: '🇬🇼', name: 'Guinea-Bissau', id: 'GW', code: '245' },
+  { before: '🇬🇳', name: 'Guinea', id: 'GN', code: '224' },
+  { before: '🇬🇾', name: 'Guyana', id: 'GY', code: '592' },
+  { before: '🇭🇹', name: 'Haiti', id: 'HT', code: '509' },
   {
     before: '🇭🇲',
     name: 'Heard Island and McDonald Islands',
-    abbr: 'HM',
+    id: 'HM',
     code: '672',
   },
   {
     before: '🇻🇦',
     name: 'Holy See (Vatican City State)',
-    abbr: 'VA',
+    id: 'VA',
     code: '379',
   },
-  { before: '🇭🇳', name: 'Honduras', abbr: 'HN', code: '504' },
-  { before: '🇭🇰', name: 'Hong Kong', abbr: 'HK', code: '852' },
-  { before: '🇭🇺', name: 'Hungary', abbr: 'HU', code: '36' },
-  { before: '🇮🇸', name: 'Iceland', abbr: 'IS', code: '354' },
-  { before: '🇮🇳', name: 'India', abbr: 'IN', code: '91' },
-  { before: '🇮🇩', name: 'Indonesia', abbr: 'ID', code: '62' },
-  { before: '🇮🇷', name: 'Iran, Islamic Republic of', abbr: 'IR', code: '98' },
-  { before: '🇮🇶', name: 'Iraq', abbr: 'IQ', code: '964' },
-  { before: '🇮🇪', name: 'Ireland', abbr: 'IE', code: '353' },
-  { before: '🇮🇲', name: 'Isle of Man', abbr: 'IM', code: '44' },
-  { before: '🇮🇱', name: 'Israel', abbr: 'IL', code: '972' },
-  { before: '🇮🇹', name: 'Italy', abbr: 'IT', code: '39' },
-  { before: '🇯🇲', name: 'Jamaica', abbr: 'JM', code: '1-876' },
-  { before: '🇯🇵', name: 'Japan', abbr: 'JP', code: '81', suggested: true },
-  { before: '🇯🇪', name: 'Jersey', abbr: 'JE', code: '44' },
-  { before: '🇯🇴', name: 'Jordan', abbr: 'JO', code: '962' },
-  { before: '🇰🇿', name: 'Kazakhstan', abbr: 'KZ', code: '7' },
-  { before: '🇰🇪', name: 'Kenya', abbr: 'KE', code: '254' },
-  { before: '🇰🇮', name: 'Kiribati', abbr: 'KI', code: '686' },
+  { before: '🇭🇳', name: 'Honduras', id: 'HN', code: '504' },
+  { before: '🇭🇰', name: 'Hong Kong', id: 'HK', code: '852' },
+  { before: '🇭🇺', name: 'Hungary', id: 'HU', code: '36' },
+  { before: '🇮🇸', name: 'Iceland', id: 'IS', code: '354' },
+  { before: '🇮🇳', name: 'India', id: 'IN', code: '91' },
+  { before: '🇮🇩', name: 'Indonesia', id: 'ID', code: '62' },
+  { before: '🇮🇷', name: 'Iran, Islamic Republic of', id: 'IR', code: '98' },
+  { before: '🇮🇶', name: 'Iraq', id: 'IQ', code: '964' },
+  { before: '🇮🇪', name: 'Ireland', id: 'IE', code: '353' },
+  { before: '🇮🇲', name: 'Isle of Man', id: 'IM', code: '44' },
+  { before: '🇮🇱', name: 'Israel', id: 'IL', code: '972' },
+  { before: '🇮🇹', name: 'Italy', id: 'IT', code: '39' },
+  { before: '🇯🇲', name: 'Jamaica', id: 'JM', code: '1-876' },
+  { before: '🇯🇵', name: 'Japan', id: 'JP', code: '81', suggested: true },
+  { before: '🇯🇪', name: 'Jersey', id: 'JE', code: '44' },
+  { before: '🇯🇴', name: 'Jordan', id: 'JO', code: '962' },
+  { before: '🇰🇿', name: 'Kazakhstan', id: 'KZ', code: '7' },
+  { before: '🇰🇪', name: 'Kenya', id: 'KE', code: '254' },
+  { before: '🇰🇮', name: 'Kiribati', id: 'KI', code: '686' },
   {
     before: '🇰🇵',
     name: "Korea, Democratic People's Republic of",
-    abbr: 'KP',
+    id: 'KP',
     code: '850',
   },
-  { before: '🇰🇷', name: 'Korea, Republic of', abbr: 'KR', code: '82' },
-  { before: '🇽🇰', name: 'Kosovo', abbr: 'XK', code: '383' },
-  { before: '🇰🇼', name: 'Kuwait', abbr: 'KW', code: '965' },
-  { before: '🇰🇬', name: 'Kyrgyzstan', abbr: 'KG', code: '996' },
+  { before: '🇰🇷', name: 'Korea, Republic of', id: 'KR', code: '82' },
+  { before: '🇽🇰', name: 'Kosovo', id: 'XK', code: '383' },
+  { before: '🇰🇼', name: 'Kuwait', id: 'KW', code: '965' },
+  { before: '🇰🇬', name: 'Kyrgyzstan', id: 'KG', code: '996' },
   {
     before: '🇱🇦',
     name: "Lao People's Democratic Republic",
-    abbr: 'LA',
+    id: 'LA',
     code: '856',
   },
-  { before: '🇱🇻', name: 'Latvia', abbr: 'LV', code: '371' },
-  { before: '🇱🇧', name: 'Lebanon', abbr: 'LB', code: '961' },
-  { before: '🇱🇸', name: 'Lesotho', abbr: 'LS', code: '266' },
-  { before: '🇱🇷', name: 'Liberia', abbr: 'LR', code: '231' },
-  { before: '🇱🇾', name: 'Libya', abbr: 'LY', code: '218' },
-  { before: '🇱🇮', name: 'Liechtenstein', abbr: 'LI', code: '423' },
-  { before: '🇱🇹', name: 'Lithuania', abbr: 'LT', code: '370' },
-  { before: '🇱🇺', name: 'Luxembourg', abbr: 'LU', code: '352' },
-  { before: '🇲🇴', name: 'Macao', abbr: 'MO', code: '853' },
+  { before: '🇱🇻', name: 'Latvia', id: 'LV', code: '371' },
+  { before: '🇱🇧', name: 'Lebanon', id: 'LB', code: '961' },
+  { before: '🇱🇸', name: 'Lesotho', id: 'LS', code: '266' },
+  { before: '🇱🇷', name: 'Liberia', id: 'LR', code: '231' },
+  { before: '🇱🇾', name: 'Libya', id: 'LY', code: '218' },
+  { before: '🇱🇮', name: 'Liechtenstein', id: 'LI', code: '423' },
+  { before: '🇱🇹', name: 'Lithuania', id: 'LT', code: '370' },
+  { before: '🇱🇺', name: 'Luxembourg', id: 'LU', code: '352' },
+  { before: '🇲🇴', name: 'Macao', id: 'MO', code: '853' },
   {
     before: '🇲🇰',
     name: 'Macedonia, the Former Yugoslav Republic of',
-    abbr: 'MK',
+    id: 'MK',
     code: '389',
   },
-  { before: '🇲🇬', name: 'Madagascar', abbr: 'MG', code: '261' },
-  { before: '🇲🇼', name: 'Malawi', abbr: 'MW', code: '265' },
-  { before: '🇲🇾', name: 'Malaysia', abbr: 'MY', code: '60' },
-  { before: '🇲🇻', name: 'Maldives', abbr: 'MV', code: '960' },
-  { before: '🇲🇱', name: 'Mali', abbr: 'ML', code: '223' },
-  { before: '🇲🇹', name: 'Malta', abbr: 'MT', code: '356' },
-  { before: '🇲🇭', name: 'Marshall Islands', abbr: 'MH', code: '692' },
-  { before: '🇲🇶', name: 'Martinique', abbr: 'MQ', code: '596' },
-  { before: '🇲🇷', name: 'Mauritania', abbr: 'MR', code: '222' },
-  { before: '🇲🇺', name: 'Mauritius', abbr: 'MU', code: '230' },
-  { before: '🇾🇹', name: 'Mayotte', abbr: 'YT', code: '262' },
-  { before: '🇲🇽', name: 'Mexico', abbr: 'MX', code: '52' },
+  { before: '🇲🇬', name: 'Madagascar', id: 'MG', code: '261' },
+  { before: '🇲🇼', name: 'Malawi', id: 'MW', code: '265' },
+  { before: '🇲🇾', name: 'Malaysia', id: 'MY', code: '60' },
+  { before: '🇲🇻', name: 'Maldives', id: 'MV', code: '960' },
+  { before: '🇲🇱', name: 'Mali', id: 'ML', code: '223' },
+  { before: '🇲🇹', name: 'Malta', id: 'MT', code: '356' },
+  { before: '🇲🇭', name: 'Marshall Islands', id: 'MH', code: '692' },
+  { before: '🇲🇶', name: 'Martinique', id: 'MQ', code: '596' },
+  { before: '🇲🇷', name: 'Mauritania', id: 'MR', code: '222' },
+  { before: '🇲🇺', name: 'Mauritius', id: 'MU', code: '230' },
+  { before: '🇾🇹', name: 'Mayotte', id: 'YT', code: '262' },
+  { before: '🇲🇽', name: 'Mexico', id: 'MX', code: '52' },
   {
     before: '🇫🇲',
     name: 'Micronesia, Federated States of',
-    abbr: 'FM',
+    id: 'FM',
     code: '691',
   },
-  { before: '🇲🇩', name: 'Moldova, Republic of', abbr: 'MD', code: '373' },
-  { before: '🇲🇨', name: 'Monaco', abbr: 'MC', code: '377' },
-  { before: '🇲🇳', name: 'Mongolia', abbr: 'MN', code: '976' },
-  { before: '🇲🇪', name: 'Montenegro', abbr: 'ME', code: '382' },
-  { before: '🇲🇸', name: 'Montserrat', abbr: 'MS', code: '1-664' },
-  { before: '🇲🇦', name: 'Morocco', abbr: 'MA', code: '212' },
-  { before: '🇲🇿', name: 'Mozambique', abbr: 'MZ', code: '258' },
-  { before: '🇲🇲', name: 'Myanmar', abbr: 'MM', code: '95' },
-  { before: '🇳🇦', name: 'Namibia', abbr: 'NA', code: '264' },
-  { before: '🇳🇷', name: 'Nauru', abbr: 'NR', code: '674' },
-  { before: '🇳🇵', name: 'Nepal', abbr: 'NP', code: '977' },
-  { before: '🇳🇱', name: 'Netherlands', abbr: 'NL', code: '31' },
-  { before: '🇳🇨', name: 'New Caledonia', abbr: 'NC', code: '687' },
-  { before: '🇳🇿', name: 'New Zealand', abbr: 'NZ', code: '64' },
-  { before: '🇳🇮', name: 'Nicaragua', abbr: 'NI', code: '505' },
-  { before: '🇳🇪', name: 'Niger', abbr: 'NE', code: '227' },
-  { before: '🇳🇬', name: 'Nigeria', abbr: 'NG', code: '234' },
-  { before: '🇳🇺', name: 'Niue', abbr: 'NU', code: '683' },
-  { before: '🇳🇫', name: 'Norfolk Island', abbr: 'NF', code: '672' },
-  { before: '🇲🇵', name: 'Northern Mariana Islands', abbr: 'MP', code: '1-670' },
-  { before: '🇳🇴', name: 'Norway', abbr: 'NO', code: '47' },
-  { before: '🇴🇲', name: 'Oman', abbr: 'OM', code: '968' },
-  { before: '🇵🇰', name: 'Pakistan', abbr: 'PK', code: '92' },
-  { before: '🇵🇼', name: 'Palau', abbr: 'PW', code: '680' },
-  { before: '🇵🇸', name: 'Palestine, State of', abbr: 'PS', code: '970' },
-  { before: '🇵🇦', name: 'Panama', abbr: 'PA', code: '507' },
-  { before: '🇵🇬', name: 'Papua New Guinea', abbr: 'PG', code: '675' },
-  { before: '🇵🇾', name: 'Paraguay', abbr: 'PY', code: '595' },
-  { before: '🇵🇪', name: 'Peru', abbr: 'PE', code: '51' },
-  { before: '🇵🇭', name: 'Philippines', abbr: 'PH', code: '63' },
-  { before: '🇵🇳', name: 'Pitcairn', abbr: 'PN', code: '870' },
-  { before: '🇵🇱', name: 'Poland', abbr: 'PL', code: '48' },
-  { before: '🇵🇹', name: 'Portugal', abbr: 'PT', code: '351' },
-  { before: '🇵🇷', name: 'Puerto Rico', abbr: 'PR', code: '1' },
-  { before: '🇶🇦', name: 'Qatar', abbr: 'QA', code: '974' },
-  { before: '🇷🇪', name: 'Reunion', abbr: 'RE', code: '262' },
-  { before: '🇷🇴', name: 'Romania', abbr: 'RO', code: '40' },
-  { before: '🇷🇺', name: 'Russian Federation', abbr: 'RU', code: '7' },
-  { before: '🇷🇼', name: 'Rwanda', abbr: 'RW', code: '250' },
-  { before: '🇧🇱', name: 'Saint Barthelemy', abbr: 'BL', code: '590' },
-  { before: '🇸🇭', name: 'Saint Helena', abbr: 'SH', code: '290' },
-  { before: '🇰🇳', name: 'Saint Kitts and Nevis', abbr: 'KN', code: '1-869' },
-  { before: '🇱🇨', name: 'Saint Lucia', abbr: 'LC', code: '1-758' },
-  { before: '🇲🇫', name: 'Saint Martin (French part)', abbr: 'MF', code: '590' },
-  { before: '🇵🇲', name: 'Saint Pierre and Miquelon', abbr: 'PM', code: '508' },
+  { before: '🇲🇩', name: 'Moldova, Republic of', id: 'MD', code: '373' },
+  { before: '🇲🇨', name: 'Monaco', id: 'MC', code: '377' },
+  { before: '🇲🇳', name: 'Mongolia', id: 'MN', code: '976' },
+  { before: '🇲🇪', name: 'Montenegro', id: 'ME', code: '382' },
+  { before: '🇲🇸', name: 'Montserrat', id: 'MS', code: '1-664' },
+  { before: '🇲🇦', name: 'Morocco', id: 'MA', code: '212' },
+  { before: '🇲🇿', name: 'Mozambique', id: 'MZ', code: '258' },
+  { before: '🇲🇲', name: 'Myanmar', id: 'MM', code: '95' },
+  { before: '🇳🇦', name: 'Namibia', id: 'NA', code: '264' },
+  { before: '🇳🇷', name: 'Nauru', id: 'NR', code: '674' },
+  { before: '🇳🇵', name: 'Nepal', id: 'NP', code: '977' },
+  { before: '🇳🇱', name: 'Netherlands', id: 'NL', code: '31' },
+  { before: '🇳🇨', name: 'New Caledonia', id: 'NC', code: '687' },
+  { before: '🇳🇿', name: 'New Zealand', id: 'NZ', code: '64' },
+  { before: '🇳🇮', name: 'Nicaragua', id: 'NI', code: '505' },
+  { before: '🇳🇪', name: 'Niger', id: 'NE', code: '227' },
+  { before: '🇳🇬', name: 'Nigeria', id: 'NG', code: '234' },
+  { before: '🇳🇺', name: 'Niue', id: 'NU', code: '683' },
+  { before: '🇳🇫', name: 'Norfolk Island', id: 'NF', code: '672' },
+  { before: '🇲🇵', name: 'Northern Mariana Islands', id: 'MP', code: '1-670' },
+  { before: '🇳🇴', name: 'Norway', id: 'NO', code: '47' },
+  { before: '🇴🇲', name: 'Oman', id: 'OM', code: '968' },
+  { before: '🇵🇰', name: 'Pakistan', id: 'PK', code: '92' },
+  { before: '🇵🇼', name: 'Palau', id: 'PW', code: '680' },
+  { before: '🇵🇸', name: 'Palestine, State of', id: 'PS', code: '970' },
+  { before: '🇵🇦', name: 'Panama', id: 'PA', code: '507' },
+  { before: '🇵🇬', name: 'Papua New Guinea', id: 'PG', code: '675' },
+  { before: '🇵🇾', name: 'Paraguay', id: 'PY', code: '595' },
+  { before: '🇵🇪', name: 'Peru', id: 'PE', code: '51' },
+  { before: '🇵🇭', name: 'Philippines', id: 'PH', code: '63' },
+  { before: '🇵🇳', name: 'Pitcairn', id: 'PN', code: '870' },
+  { before: '🇵🇱', name: 'Poland', id: 'PL', code: '48' },
+  { before: '🇵🇹', name: 'Portugal', id: 'PT', code: '351' },
+  { before: '🇵🇷', name: 'Puerto Rico', id: 'PR', code: '1' },
+  { before: '🇶🇦', name: 'Qatar', id: 'QA', code: '974' },
+  { before: '🇷🇪', name: 'Reunion', id: 'RE', code: '262' },
+  { before: '🇷🇴', name: 'Romania', id: 'RO', code: '40' },
+  { before: '🇷🇺', name: 'Russian Federation', id: 'RU', code: '7' },
+  { before: '🇷🇼', name: 'Rwanda', id: 'RW', code: '250' },
+  { before: '🇧🇱', name: 'Saint Barthelemy', id: 'BL', code: '590' },
+  { before: '🇸🇭', name: 'Saint Helena', id: 'SH', code: '290' },
+  { before: '🇰🇳', name: 'Saint Kitts and Nevis', id: 'KN', code: '1-869' },
+  { before: '🇱🇨', name: 'Saint Lucia', id: 'LC', code: '1-758' },
+  { before: '🇲🇫', name: 'Saint Martin (French part)', id: 'MF', code: '590' },
+  { before: '🇵🇲', name: 'Saint Pierre and Miquelon', id: 'PM', code: '508' },
   {
     before: '🇻🇨',
     name: 'Saint Vincent and the Grenadines',
-    abbr: 'VC',
+    id: 'VC',
     code: '1-784',
   },
-  { before: '🇼🇸', name: 'Samoa', abbr: 'WS', code: '685' },
-  { before: '🇸🇲', name: 'San Marino', abbr: 'SM', code: '378' },
-  { before: '🇸🇹', name: 'Sao Tome and Principe', abbr: 'ST', code: '239' },
-  { before: '🇸🇦', name: 'Saudi Arabia', abbr: 'SA', code: '966' },
-  { before: '🇸🇳', name: 'Senegal', abbr: 'SN', code: '221' },
-  { before: '🇷🇸', name: 'Serbia', abbr: 'RS', code: '381' },
-  { before: '🇸🇨', name: 'Seychelles', abbr: 'SC', code: '248' },
-  { before: '🇸🇱', name: 'Sierra Leone', abbr: 'SL', code: '232' },
-  { before: '🇸🇬', name: 'Singapore', abbr: 'SG', code: '65' },
+  { before: '🇼🇸', name: 'Samoa', id: 'WS', code: '685' },
+  { before: '🇸🇲', name: 'San Marino', id: 'SM', code: '378' },
+  { before: '🇸🇹', name: 'Sao Tome and Principe', id: 'ST', code: '239' },
+  { before: '🇸🇦', name: 'Saudi Arabia', id: 'SA', code: '966' },
+  { before: '🇸🇳', name: 'Senegal', id: 'SN', code: '221' },
+  { before: '🇷🇸', name: 'Serbia', id: 'RS', code: '381' },
+  { before: '🇸🇨', name: 'Seychelles', id: 'SC', code: '248' },
+  { before: '🇸🇱', name: 'Sierra Leone', id: 'SL', code: '232' },
+  { before: '🇸🇬', name: 'Singapore', id: 'SG', code: '65' },
   {
     before: '🇸🇽',
     name: 'Sint Maarten (Dutch part)',
-    abbr: 'SX',
+    id: 'SX',
     code: '1-721',
   },
-  { before: '🇸🇰', name: 'Slovakia', abbr: 'SK', code: '421' },
-  { before: '🇸🇮', name: 'Slovenia', abbr: 'SI', code: '386' },
-  { before: '🇸🇧', name: 'Solomon Islands', abbr: 'SB', code: '677' },
-  { before: '🇸🇴', name: 'Somalia', abbr: 'SO', code: '252' },
-  { before: '🇿🇦', name: 'South Africa', abbr: 'ZA', code: '27' },
+  { before: '🇸🇰', name: 'Slovakia', id: 'SK', code: '421' },
+  { before: '🇸🇮', name: 'Slovenia', id: 'SI', code: '386' },
+  { before: '🇸🇧', name: 'Solomon Islands', id: 'SB', code: '677' },
+  { before: '🇸🇴', name: 'Somalia', id: 'SO', code: '252' },
+  { before: '🇿🇦', name: 'South Africa', id: 'ZA', code: '27' },
   {
     before: '🇬🇸',
     name: 'South Georgia and the South Sandwich Islands',
-    abbr: 'GS',
+    id: 'GS',
     code: '500',
   },
-  { before: '🇸🇸', name: 'South Sudan', abbr: 'SS', code: '211' },
-  { before: '🇪🇸', name: 'Spain', abbr: 'ES', code: '34' },
-  { before: '🇱🇰', name: 'Sri Lanka', abbr: 'LK', code: '94' },
-  { before: '🇸🇩', name: 'Sudan', abbr: 'SD', code: '249' },
-  { before: '🇸🇷', name: 'Suriname', abbr: 'SR', code: '597' },
-  { before: '🇸🇯', name: 'Svalbard and Jan Mayen', abbr: 'SJ', code: '47' },
-  { before: '🇸🇿', name: 'Swaziland', abbr: 'SZ', code: '268' },
-  { before: '🇸🇪', name: 'Sweden', abbr: 'SE', code: '46' },
-  { before: '🇨🇭', name: 'Switzerland', abbr: 'CH', code: '41' },
-  { before: '🇸🇾', name: 'Syrian Arab Republic', abbr: 'SY', code: '963' },
-  { before: '🇹🇼', name: 'Taiwan, Province of China', abbr: 'TW', code: '886' },
-  { before: '🇹🇯', name: 'Tajikistan', abbr: 'TJ', code: '992' },
-  { before: '🇹🇭', name: 'Thailand', abbr: 'TH', code: '66' },
-  { before: '🇹🇱', name: 'Timor-Leste', abbr: 'TL', code: '670' },
-  { before: '🇹🇬', name: 'Togo', abbr: 'TG', code: '228' },
-  { before: '🇹🇰', name: 'Tokelau', abbr: 'TK', code: '690' },
-  { before: '🇹🇴', name: 'Tonga', abbr: 'TO', code: '676' },
-  { before: '🇹🇹', name: 'Trinidad and Tobago', abbr: 'TT', code: '1-868' },
-  { before: '🇹🇳', name: 'Tunisia', abbr: 'TN', code: '216' },
-  { before: '🇹🇷', name: 'Turkey', abbr: 'TR', code: '90' },
-  { before: '🇹🇲', name: 'Turkmenistan', abbr: 'TM', code: '993' },
-  { before: '🇹🇨', name: 'Turks and Caicos Islands', abbr: 'TC', code: '1-649' },
-  { before: '🇹🇻', name: 'Tuvalu', abbr: 'TV', code: '688' },
-  { before: '🇺🇬', name: 'Uganda', abbr: 'UG', code: '256' },
-  { before: '🇺🇦', name: 'Ukraine', abbr: 'UA', code: '380' },
-  { before: '🇦🇪', name: 'United Arab Emirates', abbr: 'AE', code: '971' },
-  { before: '🇬🇧', name: 'United Kingdom', abbr: 'GB', code: '44' },
+  { before: '🇸🇸', name: 'South Sudan', id: 'SS', code: '211' },
+  { before: '🇪🇸', name: 'Spain', id: 'ES', code: '34' },
+  { before: '🇱🇰', name: 'Sri Lanka', id: 'LK', code: '94' },
+  { before: '🇸🇩', name: 'Sudan', id: 'SD', code: '249' },
+  { before: '🇸🇷', name: 'Suriname', id: 'SR', code: '597' },
+  { before: '🇸🇯', name: 'Svalbard and Jan Mayen', id: 'SJ', code: '47' },
+  { before: '🇸🇿', name: 'Swaziland', id: 'SZ', code: '268' },
+  { before: '🇸🇪', name: 'Sweden', id: 'SE', code: '46' },
+  { before: '🇨🇭', name: 'Switzerland', id: 'CH', code: '41' },
+  { before: '🇸🇾', name: 'Syrian Arab Republic', id: 'SY', code: '963' },
+  { before: '🇹🇼', name: 'Taiwan, Province of China', id: 'TW', code: '886' },
+  { before: '🇹🇯', name: 'Tajikistan', id: 'TJ', code: '992' },
+  { before: '🇹🇭', name: 'Thailand', id: 'TH', code: '66' },
+  { before: '🇹🇱', name: 'Timor-Leste', id: 'TL', code: '670' },
+  { before: '🇹🇬', name: 'Togo', id: 'TG', code: '228' },
+  { before: '🇹🇰', name: 'Tokelau', id: 'TK', code: '690' },
+  { before: '🇹🇴', name: 'Tonga', id: 'TO', code: '676' },
+  { before: '🇹🇹', name: 'Trinidad and Tobago', id: 'TT', code: '1-868' },
+  { before: '🇹🇳', name: 'Tunisia', id: 'TN', code: '216' },
+  { before: '🇹🇷', name: 'Turkey', id: 'TR', code: '90' },
+  { before: '🇹🇲', name: 'Turkmenistan', id: 'TM', code: '993' },
+  { before: '🇹🇨', name: 'Turks and Caicos Islands', id: 'TC', code: '1-649' },
+  { before: '🇹🇻', name: 'Tuvalu', id: 'TV', code: '688' },
+  { before: '🇺🇬', name: 'Uganda', id: 'UG', code: '256' },
+  { before: '🇺🇦', name: 'Ukraine', id: 'UA', code: '380' },
+  { before: '🇦🇪', name: 'United Arab Emirates', id: 'AE', code: '971' },
+  { before: '🇬🇧', name: 'United Kingdom', id: 'GB', code: '44' },
   {
     before: '🇹🇿',
     name: 'United Republic of Tanzania',
-    abbr: 'TZ',
+    id: 'TZ',
     code: '255',
   },
   {
     before: '🇺🇲',
     name: 'United States',
-    abbr: 'US',
+    id: 'US',
     code: '1',
     suggested: true,
   },
-  { before: '🇺🇾', name: 'Uruguay', abbr: 'UY', code: '598' },
-  { before: '🇻🇮', name: 'US Virgin Islands', abbr: 'VI', code: '1-340' },
-  { before: '🇺🇿', name: 'Uzbekistan', abbr: 'UZ', code: '998' },
-  { before: '🇻🇺', name: 'Vanuatu', abbr: 'VU', code: '678' },
-  { before: '🇻🇪', name: 'Venezuela', abbr: 'VE', code: '58' },
-  { before: '🇻🇳', name: 'Vietnam', abbr: 'VN', code: '84' },
-  { before: '🇼🇫', name: 'Wallis and Futuna', abbr: 'WF', code: '681' },
-  { before: '🇪🇭', name: 'Western Sahara', abbr: 'EH', code: '212' },
-  { before: '🇾🇪', name: 'Yemen', abbr: 'YE', code: '967' },
-  { before: '🇿🇲', name: 'Zambia', abbr: 'ZM', code: '260' },
-  { before: '🇿🇼', name: 'Zimbabwe', abbr: 'ZW', code: '263' },
+  { before: '🇺🇾', name: 'Uruguay', id: 'UY', code: '598' },
+  { before: '🇻🇮', name: 'US Virgin Islands', id: 'VI', code: '1-340' },
+  { before: '🇺🇿', name: 'Uzbekistan', id: 'UZ', code: '998' },
+  { before: '🇻🇺', name: 'Vanuatu', id: 'VU', code: '678' },
+  { before: '🇻🇪', name: 'Venezuela', id: 'VE', code: '58' },
+  { before: '🇻🇳', name: 'Vietnam', id: 'VN', code: '84' },
+  { before: '🇼🇫', name: 'Wallis and Futuna', id: 'WF', code: '681' },
+  { before: '🇪🇭', name: 'Western Sahara', id: 'EH', code: '212' },
+  { before: '🇾🇪', name: 'Yemen', id: 'YE', code: '967' },
+  { before: '🇿🇲', name: 'Zambia', id: 'ZM', code: '260' },
+  { before: '🇿🇼', name: 'Zimbabwe', id: 'ZW', code: '263' },
 ];
 
 // separate countries into groups