cozy-ui-plus 1.1.0

package/dist/ContactsList/helpers.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildLastNameFirst = buildLastNameFirst;
+exports.sortLastNameFirst = exports.sortHeaders = exports.sortContacts = exports.makeGroupLabelsAndCounts = exports.categorizeContacts = void 0;
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+function buildLastNameFirst(contact) {
+  var givenName = contact.name && contact.name.givenName ? contact.name.givenName.toUpperCase() : '';
+  var familyName = contact.name && contact.name.familyName ? contact.name.familyName.toUpperCase() : '';
+
+  if (!givenName && !familyName && contact.fullname) {
+    return contact.fullname.toUpperCase().trim();
+  } else {
+    return "".concat(familyName, " ").concat(givenName).trim();
+  }
+}
+
+var sortLastNameFirst = function sortLastNameFirst(contact, comparedContact) {
+  var nameA = buildLastNameFirst(contact);
+  var nameB = buildLastNameFirst(comparedContact);
+  return nameA.localeCompare(nameB);
+};
+
+exports.sortLastNameFirst = sortLastNameFirst;
+
+var sortContacts = function sortContacts(contacts) {
+  return contacts.sort(sortLastNameFirst);
+};
+/**
+ * Build header for a contact (first letter of last name)
+ * @param {object} contact
+ * @param {function} t translation function
+ * @returns {string} header
+ */
+
+
+exports.sortContacts = sortContacts;
+
+var makeHeader = function makeHeader(contact, t) {
+  if (contact.me) return t('me');
+  var name = buildLastNameFirst(contact);
+  return name[0] || t('empty');
+};
+/**
+ * Build header for a contact (first letter of indexes.byFamilyNameGivenNameEmailCozyUrl)
+ * @param {object} contact
+ * @param {function} t translation function
+ * @returns {string} header
+ */
+
+
+var makeHeaderForIndexedContacts = function makeHeaderForIndexedContacts(contact, t) {
+  var _contact$cozyMetadata;
+
+  if (contact.me) return t('me');
+  if ((_contact$cozyMetadata = contact.cozyMetadata) !== null && _contact$cozyMetadata !== void 0 && _contact$cozyMetadata.favorite) return t('favorite');
+  var index = (0, _get.default)(contact, 'indexes.byFamilyNameGivenNameEmailCozyUrl', '');
+  var hasIndex = index !== null && index.length > 0;
+
+  if (hasIndex) {
+    var firstLetterWithoutAccent = index[0].normalize('NFD').replace(/(?:[\^`\xA8\xAF\xB4\xB7\xB8\u02B0-\u034E\u0350-\u0357\u035D-\u0362\u0374\u0375\u037A\u0384\u0385\u0483-\u0487\u0559\u0591-\u05A1\u05A3-\u05BD\u05BF\u05C1\u05C2\u05C4\u064B-\u0652\u0657\u0658\u06DF\u06E0\u06E5\u06E6\u06EA-\u06EC\u0730-\u074A\u07A6-\u07B0\u07EB-\u07F5\u0818\u0819\u0898-\u089F\u08C9-\u08D2\u08E3-\u08FE\u093C\u094D\u0951-\u0954\u0971\u09BC\u09CD\u0A3C\u0A4D\u0ABC\u0ACD\u0AFD-\u0AFF\u0B3C\u0B4D\u0B55\u0BCD\u0C3C\u0C4D\u0CBC\u0CCD\u0D3B\u0D3C\u0D4D\u0DCA\u0E47-\u0E4C\u0E4E\u0EBA\u0EC8-\u0ECC\u0F18\u0F19\u0F35\u0F37\u0F39\u0F3E\u0F3F\u0F82-\u0F84\u0F86\u0F87\u0FC6\u1037\u1039\u103A\u1063\u1064\u1069-\u106D\u1087-\u108D\u108F\u109A\u109B\u135D-\u135F\u1714\u1715\u17C9-\u17D3\u17DD\u1939-\u193B\u1A75-\u1A7C\u1A7F\u1AB0-\u1ABE\u1AC1-\u1ACB\u1B34\u1B44\u1B6B-\u1B73\u1BAA\u1BAB\u1C36\u1C37\u1C78-\u1C7D\u1CD0-\u1CE8\u1CED\u1CF4\u1CF7-\u1CF9\u1D2C-\u1D6A\u1DC4-\u1DCF\u1DF5-\u1DFF\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD\u1FFE\u2CEF-\u2CF1\u2E2F\u302A-\u302F\u3099-\u309C\u30FC\uA66F\uA67C\uA67D\uA67F\uA69C\uA69D\uA6F0\uA6F1\uA700-\uA721\uA788-\uA78A\uA7F8\uA7F9\uA8C4\uA8E0-\uA8F1\uA92B-\uA92E\uA953\uA9B3\uA9C0\uA9E5\uAA7B-\uAA7D\uAABF-\uAAC2\uAAF6\uAB5B-\uAB5F\uAB69-\uAB6B\uABEC\uABED\uFB1E\uFE20-\uFE2F\uFF3E\uFF40\uFF70\uFF9E\uFF9F\uFFE3]|\uD800\uDEE0|\uD801[\uDF80-\uDF85\uDF87-\uDFB0\uDFB2-\uDFBA]|\uD802[\uDEE5\uDEE6]|\uD803[\uDD22-\uDD27\uDF46-\uDF50\uDF82-\uDF85]|\uD804[\uDC46\uDC70\uDCB9\uDCBA\uDD33\uDD34\uDD73\uDDC0\uDDCA-\uDDCC\uDE35\uDE36\uDEE9\uDEEA\uDF3C\uDF4D\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC42\uDC46\uDCC2\uDCC3\uDDBF\uDDC0\uDE3F\uDEB6\uDEB7\uDF2B]|\uD806[\uDC39\uDC3A\uDD3D\uDD3E\uDD43\uDDE0\uDE34\uDE47\uDE99]|\uD807[\uDC3F\uDD42\uDD44\uDD45\uDD97]|\uD81A[\uDEF0-\uDEF4\uDF30-\uDF36]|\uD81B[\uDF8F-\uDF9F\uDFF0\uDFF1]|\uD82B[\uDFF0-\uDFF3\uDFF5-\uDFFB\uDFFD\uDFFE]|\uD833[\uDF00-\uDF2D\uDF30-\uDF46]|\uD834[\uDD67-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD]|\uD838[\uDD30-\uDD36\uDEAE\uDEEC-\uDEEF]|\uD83A[\uDCD0-\uDCD6\uDD44-\uDD46\uDD48-\uDD4A])/g, '');
+    return firstLetterWithoutAccent;
+  }
+
+  return t('empty');
+};
+/**
+ * @typedef {Object.<string, Object>} CategorizedContactsResult
+ */
+
+/**
+ * Categorize contacts by first letter of last name
+ * Expl.: all contacts with A as first letter will be in A category
+ * @param {object[]} contacts io.cozy.contacts documents
+ * @param {function} t translation function
+ * @returns {CategorizedContactsResult} Categorized contacts
+ */
+
+
+var categorizeContacts = function categorizeContacts(contacts, t) {
+  return contacts.reduce(function (acc, contact) {
+    var header = makeHeader(contact, t);
+    acc[header] = acc[header] || [];
+    acc[header].push(contact);
+    return acc;
+  }, {});
+};
+/**
+ * Sort headers (first letter of last name) alphabetically and put 'me' and 'empty' first
+ * @param {CategorizedContactsResult} categorized categorized contacts
+ * @param {function} t translation function
+ * @returns {string[]}
+ */
+
+
+exports.categorizeContacts = categorizeContacts;
+
+var sortHeaders = function sortHeaders(categorized, t) {
+  var headers = Object.keys(categorized);
+  var notEmptyAndMyselfHeaders = headers.filter(function (header) {
+    return header !== t('empty') && header !== t('me');
+  });
+  var notEmptyAndMyselfSorted = notEmptyAndMyselfHeaders.slice().sort();
+
+  if (headers.length === notEmptyAndMyselfHeaders.length) {
+    return notEmptyAndMyselfSorted;
+  }
+
+  var headersSorted = [];
+
+  if (headers.includes(t('me'))) {
+    headersSorted.push(t('me'));
+  }
+
+  if (headers.includes(t('empty'))) {
+    headersSorted.push(t('empty'));
+  }
+
+  return headersSorted.concat(notEmptyAndMyselfSorted);
+};
+/**
+ * Counts how many contacts are categorized by first letter and store it in `groupCounts`
+ * Expl.: if there is 3 contacts in A and 2 in B, it will return [3,2]
+ * Also store first letters and store them in `groupLabels`
+ * @param {array} contacts - Array of io.cozy.contact documents
+ * @returns {object}
+ */
+
+
+exports.sortHeaders = sortHeaders;
+
+var makeGroupLabelsAndCounts = function makeGroupLabelsAndCounts(contacts, t) {
+  return contacts.reduce(function (acc, contact) {
+    var header = makeHeaderForIndexedContacts(contact, t);
+
+    if (!acc.groupLabels.includes(header)) {
+      acc.groupLabels.push(header);
+    }
+
+    var idx = acc.groupLabels.indexOf(header);
+    var val = acc.groupCounts[idx] || 0;
+    acc.groupCounts[idx] = val + 1;
+    return acc;
+  }, {
+    groupLabels: [],
+    groupCounts: []
+  });
+};
+
+exports.makeGroupLabelsAndCounts = makeGroupLabelsAndCounts;

package/dist/ContactsList/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ContactsList = _interopRequireDefault(require("./ContactsList"));
+
+var _default = _ContactsList.default;
+exports.default = _default;

package/dist/ContactsList/locales/withContactsListLocales.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.locales = exports.default = void 0;
+
+var _withOnlyLocales = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/I18n/withOnlyLocales"));
+
+var en = {
+  empty: "EMPTY",
+  me: "me",
+  favorite: "favorites"
+};
+var fr = {
+  empty: "VIDE",
+  me: "moi",
+  favorite: "favoris"
+};
+var ru = {
+  empty: "\u041F\u0423\u0421\u0422\u041E",
+  me: "\u044F",
+  favorite: "\u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0435"
+};
+var vi = {
+  empty: "TR\u1ED0NG",
+  me: "t\xF4i",
+  favorite: "y\xEAu th\xEDch"
+};
+var locales = {
+  en: en,
+  fr: fr,
+  ru: ru,
+  vi: vi
+};
+exports.locales = locales;
+
+var _default = (0, _withOnlyLocales.default)(locales);
+
+exports.default = _default;

package/dist/ContactsListModal/AddContact/AddContactActions.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
+var _withContactsListLocales = require("../withContactsListLocales");
+
+var AddContactActions = function AddContactActions(_ref) {
+  var t = _ref.t,
+      onCancel = _ref.onCancel,
+      onSave = _ref.onSave;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    variant: "secondary",
+    label: t('cancel'),
+    onClick: onCancel
+  }), /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    label: t('save'),
+    onClick: onSave
+  }));
+};
+
+var _default = (0, _withContactsListLocales.withContactsListLocales)(AddContactActions);
+
+exports.default = _default;

package/dist/ContactsListModal/AddContact/AddContactContent.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _People = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/People"));
+
+var _TextField = _interopRequireDefault(require("cozy-ui/transpiled/react/TextField"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _Media = require("cozy-ui/transpiled/react/deprecated/Media");
+
+var _withContactsListLocales = require("../withContactsListLocales");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var styles = {
+  "icon": "styles__icon___bzlGb"
+};
+
+var AddContactContent = function AddContactContent(_ref) {
+  var t = _ref.t,
+      setContactValues = _ref.setContactValues;
+
+  var handleChange = function handleChange(ev) {
+    var _ev$target = ev.target,
+        name = _ev$target.name,
+        value = _ev$target.value;
+    setContactValues(function (v) {
+      return _objectSpread(_objectSpread({}, v), {}, (0, _defineProperty2.default)({}, name, value));
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "h5"
+  }, t('coordinates')), /*#__PURE__*/_react.default.createElement(_Media.Media, null, /*#__PURE__*/_react.default.createElement(_Media.Img, {
+    className: styles.icon
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _People.default
+  })), /*#__PURE__*/_react.default.createElement(_Media.Bd, {
+    className: "u-mr-1"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    className: "u-mt-1",
+    variant: "outlined",
+    fullWidth: true,
+    id: "givenName",
+    name: "givenName",
+    label: t('givenName'),
+    onChange: handleChange
+  }))), /*#__PURE__*/_react.default.createElement(_Media.Media, null, /*#__PURE__*/_react.default.createElement(_Media.Bd, {
+    className: "u-ml-3 u-mr-1"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    className: "u-mt-1",
+    variant: "outlined",
+    fullWidth: true,
+    id: "familyName",
+    name: "familyName",
+    label: t('familyName'),
+    onChange: handleChange
+  }))));
+};
+
+AddContactContent.propTypes = {
+  t: _propTypes.default.func,
+  setContactValues: _propTypes.default.func
+};
+
+var _default = (0, _withContactsListLocales.withContactsListLocales)(AddContactContent);
+
+exports.default = _default;

package/dist/ContactsListModal/AddContact/AddContactDialog.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _CozyDialogs = require("cozy-ui/transpiled/react/CozyDialogs");
+
+var _AddContactActions = _interopRequireDefault(require("./AddContactActions"));
+
+var _AddContactContent = _interopRequireDefault(require("./AddContactContent"));
+
+var _AddContactTitle = _interopRequireDefault(require("./AddContactTitle"));
+
+var _helpers = require("./helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var AddContactDialog = function AddContactDialog(_ref) {
+  var onListClose = _ref.onListClose,
+      onCreate = _ref.onCreate,
+      onClose = _ref.onClose;
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      contactValues = _useState2[0],
+      setContactValues = _useState2[1];
+
+  var client = (0, _cozyClient.useClient)();
+  return /*#__PURE__*/_react.default.createElement(_CozyDialogs.FixedDialog, {
+    open: true,
+    onClose: onClose,
+    title: /*#__PURE__*/_react.default.createElement(_AddContactTitle.default, null),
+    content: /*#__PURE__*/_react.default.createElement(_AddContactContent.default, {
+      setContactValues: setContactValues
+    }),
+    actions: /*#__PURE__*/_react.default.createElement(_AddContactActions.default, {
+      onCancel: onClose,
+      onSave: function onSave() {
+        return (0, _helpers.handleSubmit)({
+          client: client,
+          contactValues: contactValues,
+          onCreate: onCreate,
+          onListClose: onListClose
+        });
+      }
+    })
+  });
+};
+
+var _default = AddContactDialog;
+exports.default = _default;

package/dist/ContactsListModal/AddContact/AddContactTitle.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _withContactsListLocales = require("../withContactsListLocales");
+
+var AddContactTitle = function AddContactTitle(_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, t('newContact'));
+};
+
+var _default = (0, _withContactsListLocales.withContactsListLocales)(AddContactTitle);
+
+exports.default = _default;

package/dist/ContactsListModal/AddContact/helpers.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleSubmit = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var handleSubmit = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var client, contactValues, onCreate, onListClose, givenName, familyName, _yield$client$save, contact;
+
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            client = _ref.client, contactValues = _ref.contactValues, onCreate = _ref.onCreate, onListClose = _ref.onListClose;
+            givenName = contactValues.givenName, familyName = contactValues.familyName;
+
+            if (!(!givenName && !familyName)) {
+              _context.next = 4;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 4:
+            _context.next = 6;
+            return client.save({
+              _type: 'io.cozy.contacts',
+              name: {
+                familyName: familyName,
+                givenName: givenName
+              }
+            });
+
+          case 6:
+            _yield$client$save = _context.sent;
+            contact = _yield$client$save.data;
+            onCreate(contact);
+            onListClose();
+
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function handleSubmit(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+exports.handleSubmit = handleSubmit;

package/dist/ContactsListModal/ContactsListContent.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _contact = require("cozy-client/dist/models/contact");
+
+var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var _EmptyMessage = _interopRequireDefault(require("./EmptyMessage"));
+
+var _withContactsListLocales = require("./withContactsListLocales");
+
+var _ContactsList = _interopRequireDefault(require("../ContactsList"));
+
+var mkFilter = function mkFilter(filterStr) {
+  return function (contacts) {
+    if (!filterStr) {
+      return contacts;
+    }
+
+    var f = filterStr.toLowerCase(); // TODO better filtering methods can be extracted from drive. See https://github.com/cozy/cozy-ui/pull/1273#discussion_r351845385
+
+    return contacts.filter(function (contact) {
+      var displayName = (0, _contact.getDisplayName)(contact);
+
+      if (!displayName) {
+        return false;
+      }
+
+      return displayName.toLowerCase().includes(f);
+    });
+  };
+};
+
+var ContactsListContent = function ContactsListContent(_ref) {
+  var filter = _ref.filter,
+      contacts = _ref.contacts,
+      emptyMessage = _ref.emptyMessage,
+      onItemClick = _ref.onItemClick,
+      dismissAction = _ref.dismissAction;
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      t = _useI18n.t;
+
+  var loading = (contacts.fetchStatus === 'loading' || contacts.fetchStatus === 'pending') && !contacts.lastFetch;
+  var filterContacts = mkFilter(filter);
+  var filteredContacts = filterContacts(contacts.data);
+  var selfEmptyMessage = emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t('emptyContact');
+
+  var handleItemClick = function handleItemClick(contact) {
+    if (!onItemClick) {
+      return;
+    }
+
+    onItemClick(contact);
+    dismissAction();
+  };
+
+  if (loading) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-mv-2 u-ta-center"
+    }, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+      size: "xxlarge"
+    }));
+  }
+
+  if (filteredContacts.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_EmptyMessage.default, null, selfEmptyMessage);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_ContactsList.default, {
+    contacts: filteredContacts,
+    onItemClick: handleItemClick
+  });
+};
+
+var _default = (0, _withContactsListLocales.withContactsListLocales)(ContactsListContent);
+
+exports.default = _default;