@airtable/blocks 1.18.1 → 1.19.0

package/dist/cjs/ui/record_card.js

@@ -1,104 +1,68 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.symbol.description");
-
-require("core-js/modules/es.array.filter");
-
-require("core-js/modules/es.array.find");
-
-require("core-js/modules/es.array.iterator");
-
-require("core-js/modules/es.array.map");
-
-require("core-js/modules/es.object.get-own-property-descriptors");
-
-require("core-js/modules/es.object.to-string");
-
-require("core-js/modules/web.dom-collections.for-each");
-
-require("core-js/modules/web.dom-collections.iterator");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.RecordCard = exports.recordCardStylePropTypes = void 0;
-
+exports.recordCardStylePropTypes = exports.default = exports.RecordCard = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _emotion = require("emotion");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _core = require("@styled-system/core");
-
 var _private_utils = require("../private_utils");
-
 var _error_utils = require("../error_utils");
-
-var _field3 = require("../types/field");
-
-var _field4 = _interopRequireDefault(require("../models/field"));
-
+var _field = require("../types/field");
+var _field2 = _interopRequireDefault(require("../models/field"));
 var _record = _interopRequireDefault(require("../models/record"));
-
 var _view = _interopRequireDefault(require("../models/view"));
-
 var _color_utils = _interopRequireDefault(require("../color_utils"));
-
 var _baymax_utils = require("./baymax_utils");
-
 var _expand_record = _interopRequireDefault(require("./expand_record"));
-
 var _box = _interopRequireDefault(require("./box"));
-
 var _cell_renderer = _interopRequireDefault(require("./cell_renderer"));
-
 var _use_watchable = _interopRequireDefault(require("./use_watchable"));
-
 var _with_hooks = _interopRequireDefault(require("./with_hooks"));
-
 var _use_view_metadata = _interopRequireDefault(require("./use_view_metadata"));
-
 var _key_codes = require("./key_codes");
-
 var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-
 var _system = require("./system");
-
 var _with_styled_system = require("./with_styled_system");
-
 var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
-
 var _sdk_context = require("./sdk_context");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @module @airtable/blocks/ui: RecordCard */ /** */
 // Mirrored from client_server_shared_config_settings
 var FALLBACK_RECORD_NAME_FOR_DISPLAY = 'Unnamed record';
+
 /**
  * Style props for the {@link RecordCard} component. Accepts:
  * * {@link FlexItemSetProps}
@@ -109,21 +73,19 @@ var FALLBACK_RECORD_NAME_FOR_DISPLAY = 'Unnamed record';
  */
 
 var styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin);
-
-var recordCardStylePropTypes = _objectSpread({}, _system.flexItemSetPropTypes, {}, _system.positionSetPropTypes, {}, _system.marginPropTypes);
-
-exports.recordCardStylePropTypes = recordCardStylePropTypes;
+var recordCardStylePropTypes = exports.recordCardStylePropTypes = _objectSpread(_objectSpread(_objectSpread({}, _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
 var CARD_PADDING = 12;
+
 /** @hidden */
 
-var CellValueAndFieldLabel = (_ref) => {
+var CellValueAndFieldLabel = _ref => {
   var record = _ref.record,
-      cellValue = _ref.cellValue,
-      field = _ref.field,
-      width = _ref.width,
-      renderInvalidCellValue = _ref.renderInvalidCellValue;
+    cellValue = _ref.cellValue,
+    field = _ref.field,
+    width = _ref.width,
+    renderInvalidCellValue = _ref.renderInvalidCellValue;
   (0, _use_watchable.default)(field, ['name', 'type', 'options']);
-  return React.createElement(_box.default, {
+  return /*#__PURE__*/React.createElement(_box.default, {
     style: {
       verticalAlign: 'top'
     },
@@ -132,12 +94,12 @@ var CellValueAndFieldLabel = (_ref) => {
     margin: 0,
     paddingRight: 2,
     width: width
-  }, React.createElement(_box.default, {
+  }, /*#__PURE__*/React.createElement(_box.default, {
     className: (0, _baymax_utils.baymax)('caps truncate'),
     fontSize: "11px",
     lineHeight: "13px",
     textColor: "#898989"
-  }, field.name), React.createElement(_cell_renderer.default, {
+  }, field.name), /*#__PURE__*/React.createElement(_cell_renderer.default, {
     record: record,
     cellValue: cellValue,
     field: field,
@@ -150,7 +112,6 @@ var CellValueAndFieldLabel = (_ref) => {
     renderInvalidCellValue: renderInvalidCellValue
   }));
 };
-
 CellValueAndFieldLabel.propTypes = {
   record: _propTypes.default.instanceOf(_record.default),
   // NOTE: this currently will not work for linked record fields, since CellRenderer
@@ -158,10 +119,11 @@ CellValueAndFieldLabel.propTypes = {
   // TODO(jb): make the constraints for rendering cell values less strict than the
   // constraints we put on updating cell values.
   cellValue: _propTypes.default.any,
-  field: _propTypes.default.instanceOf(_field4.default).isRequired,
+  field: _propTypes.default.instanceOf(_field2.default).isRequired,
   width: _propTypes.default.number.isRequired,
   renderInvalidCellValue: _propTypes.default.func
 };
+
 /**
  * Props for the {@link RecordCard} component. Also accepts:
  * * {@link RecordCardStyleProps}
@@ -172,52 +134,46 @@ CellValueAndFieldLabel.propTypes = {
 
 // TODO(jb): move this stuff into the field model when we decide on an api for it.
 var FormulaicFieldTypes = {
-  [_field3.FieldType.FORMULA]: true,
-  [_field3.FieldType.ROLLUP]: true,
-  [_field3.FieldType.MULTIPLE_LOOKUP_VALUES]: true
+  [_field.FieldType.FORMULA]: true,
+  [_field.FieldType.ROLLUP]: true,
+  [_field.FieldType.MULTIPLE_LOOKUP_VALUES]: true
 };
-
 var isFieldFormulaic = field => {
   return (0, _private_utils.has)(FormulaicFieldTypes, field.type);
 };
-
 var getFieldResultType = field => {
-  if (field.type === _field3.FieldType.COUNT) {
-    return _field3.FieldType.NUMBER;
+  if (field.type === _field.FieldType.COUNT) {
+    return _field.FieldType.NUMBER;
   }
-
   if (isFieldFormulaic(field)) {
     (0, _error_utils.invariant)(field.options, 'options');
     var result = field.options.result;
-
     if (typeof result === 'object' && result) {
       var resultType = result.type;
       (0, _error_utils.invariant)(typeof resultType === 'string', 'resultType must be string');
       return resultType;
     } else {
       // Formula is misconfigured.
-      return _field3.FieldType.SINGLE_LINE_TEXT;
+      return _field.FieldType.SINGLE_LINE_TEXT;
     }
   } else {
     return field.type;
   }
 };
+
 /**
  * @internal
  * Given a container size (ie, height of the record card), calculate the height and width of an
  * attachment thumbnail image to fit inside the square attachment preview. Left and top margin
  * are used to center non-square images.
  */
-
-
 var calculateAttachmentDimensionsAndMargin = (attachment, containerSize) => {
   if (!attachment || !attachment.thumbnails || !attachment.thumbnails.large) {
     return {};
   }
-
   var _attachment$thumbnail = attachment.thumbnails.large,
-      thumbWidth = _attachment$thumbnail.width,
-      thumbHeight = _attachment$thumbnail.height;
+    thumbWidth = _attachment$thumbnail.width,
+    thumbHeight = _attachment$thumbnail.height;
   var height = Math.min(containerSize, thumbHeight);
   var width = Math.round(thumbWidth * height / thumbHeight);
   var marginTop = Math.round((containerSize - height) / 2);
@@ -229,6 +185,7 @@ var calculateAttachmentDimensionsAndMargin = (attachment, containerSize) => {
     marginLeft
   };
 };
+
 /**
  * A card component that displays an Airtable record.
  *
@@ -237,90 +194,58 @@ var calculateAttachmentDimensionsAndMargin = (attachment, containerSize) => {
  * @docsPath UI/components/RecordCard
  * @component
  */
-
-
-var RecordCard =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(RecordCard, _React$Component);
-
-  /** @hidden */
-
-  /** @hidden */
-
+var RecordCard = exports.RecordCard = /*#__PURE__*/function (_React$Component) {
   /** @hidden */
   function RecordCard(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, RecordCard);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(RecordCard).call(this, props));
-    _this._onClick = _this._onClick.bind((0, _assertThisInitialized2.default)(_this));
-
+    _this = _callSuper(this, RecordCard, [props]);
+    _this._onClick = _this._onClick.bind(_this);
     _this._validateProps(props);
-
     return _this;
   }
   /** @hidden */
-
-
-  (0, _createClass2.default)(RecordCard, [{
+  (0, _inherits2.default)(RecordCard, _React$Component);
+  return (0, _createClass2.default)(RecordCard, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       this._validateProps(nextProps);
     }
     /** @internal */
-
   }, {
     key: "_validateProps",
     value: function _validateProps(props) {
       var record = props.record,
-          view = props.view,
-          fields = props.fields,
-          attachmentCoverField = props.attachmentCoverField;
-
+        view = props.view,
+        fields = props.fields,
+        attachmentCoverField = props.attachmentCoverField;
       if (record && record instanceof _record.default && record.isDeleted) {
         throw (0, _error_utils.spawnError)('Record %s is deleted', record.id);
       }
-
       if (!record) {
         throw (0, _error_utils.spawnError)('Must provide record');
       }
-
       if (record && record instanceof _record.default && attachmentCoverField) {
         if (attachmentCoverField.parentTable.id !== record.parentTable.id) {
           throw (0, _error_utils.spawnError)('Attachment cover field %s must have the same parent table as record (record ID %s, table ID %s)', attachmentCoverField.id, record.id, record.parentTable.id);
         }
       }
-
       if (record && record instanceof _record.default && fields) {
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
+        var _iterator = _createForOfIteratorHelper(fields),
+          _step;
         try {
-          for (var _iterator = fields[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var _field = _step.value;
-
-            if (!_field.isDeleted && _field.parentTable.id !== record.parentTable.id) {
-              throw (0, _error_utils.spawnError)('Field %s must have the same parent table as record (record ID %s, table ID %s)', _field.id, record.id, record.parentTable.id);
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var field = _step.value;
+            if (!field.isDeleted && field.parentTable.id !== record.parentTable.id) {
+              throw (0, _error_utils.spawnError)('Field %s must have the same parent table as record (record ID %s, table ID %s)', field.id, record.id, record.parentTable.id);
             }
           }
         } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
+          _iterator.e(err);
         } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return != null) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
+          _iterator.f();
         }
       }
-
       if (record && record instanceof _record.default && view && !view.isDeleted) {
         if (view.parentTable.id !== record.parentTable.id) {
           throw (0, _error_utils.spawnError)('View %s must have the same parent table as record (record ID %s, table ID %s)', view.id, record.id, record.parentTable.id);
@@ -328,50 +253,45 @@ function (_React$Component) {
       }
     }
     /** @internal */
-
   }, {
     key: "_onClick",
     value: function _onClick(e) {
       if (this.props.onClick) {
         this.props.onClick(e);
-      } // Explicitly check if `hasOnClick` is false, which is only set by the Tooltip wrapper.
+      }
+      // Explicitly check if `hasOnClick` is false, which is only set by the Tooltip wrapper.
       // When wrapped in Tooltip, `onClick` will always exist because Tooltip supplies it. We use
       // `hasOnClick`, to account for whether the user defined their own `onClick`. We only want
       // to run this default expandRecord behavior if the user did not supply their own `onClick`.
-
-
       if (this.props.onClick === undefined || this.props.hasOnClick === false // TODO (stephen): remove tooltip anchor props
       ) {
-          // NOTE: `null` disables the default click behavior.
-          var record = this.props.record;
-          var recordModel = record && record instanceof _record.default ? record : null;
+        // NOTE: `null` disables the default click behavior.
 
-          if (recordModel) {
-            if ((0, _key_codes.isCommandModifierKeyEvent)(e) || e.shiftKey) {// No-op, let the <a> tag handle opening in new tab or window.
-            } else {
-              e.preventDefault();
-              var opts = this.props.expandRecordOptions || {};
-              (0, _expand_record.default)(recordModel, opts);
-            }
+        var record = this.props.record;
+        var recordModel = record && record instanceof _record.default ? record : null;
+        if (recordModel) {
+          if ((0, _key_codes.isCommandModifierKeyEvent)(e) || e.shiftKey) {
+            // No-op, let the <a> tag handle opening in new tab or window.
+          } else {
+            e.preventDefault();
+            var opts = this.props.expandRecordOptions || {};
+            (0, _expand_record.default)(recordModel, opts);
           }
         }
+      }
     }
     /** @internal */
-
   }, {
     key: "_getAttachmentCover",
     value: function _getAttachmentCover(fieldsToUse) {
       var attachmentField = this._getAttachmentField(fieldsToUse);
-
       return attachmentField ? this._getFirstAttachmentInField(attachmentField) : null;
     }
     /** @internal */
-
   }, {
     key: "_getAttachmentField",
     value: function _getAttachmentField(fieldsToUse) {
       var attachmentCoverField = this.props.attachmentCoverField;
-
       if (attachmentCoverField && !attachmentCoverField.isDeleted && this._isAttachment(attachmentCoverField)) {
         return attachmentCoverField;
       } else if (attachmentCoverField === undefined) {
@@ -383,79 +303,67 @@ function (_React$Component) {
         var firstAttachmentFieldInView = fieldsToUse.find(field => {
           return this._isAttachment(field);
         });
-
         if (firstAttachmentFieldInView === undefined) {
           return null;
         }
-
         return firstAttachmentFieldInView;
       } else {
         return null;
       }
     }
     /** @internal */
-
   }, {
     key: "_isAttachment",
     value: function _isAttachment(field) {
-      return getFieldResultType(field) === _field3.FieldType.MULTIPLE_ATTACHMENTS;
+      return getFieldResultType(field) === _field.FieldType.MULTIPLE_ATTACHMENTS;
     }
     /** @internal */
-
   }, {
     key: "_getCellValue",
     value: function _getCellValue(field) {
       var record = this.props.record;
-
       if (record && record instanceof _record.default) {
         return record.getCellValue(field.id);
       } else {
-        var _cellValue = record[field.id]; // To validate public cell values, we only have validateCellValueForUpdate
+        var cellValue = record[field.id];
+
+        // To validate public cell values, we only have validateCellValueForUpdate
         // However, this is not implemented for computed fields (since you can't update them)
         // so we just skip the check.
         // TODO(emma): actually check this somehow.
-
         if (!field.isComputed) {
           var airtableInterface = this.props.sdk.__airtableInterface;
           var appInterface = this.props.sdk.__appInterface;
-          var validationResult = airtableInterface.fieldTypeProvider.validateCellValueForUpdate(appInterface, _cellValue, null, field._data);
-
+          var validationResult = airtableInterface.fieldTypeProvider.validateCellValueForUpdate(appInterface, cellValue, null, field._data);
           if (!validationResult.isValid) {
             throw (0, _error_utils.spawnError)(validationResult.reason);
           }
         }
-
-        return _cellValue;
+        return cellValue;
       }
     }
     /** @internal */
-
   }, {
     key: "_getFirstAttachmentInField",
     value: function _getFirstAttachmentInField(attachmentField) {
       var attachmentsInField;
-
-      if (attachmentField.type === _field3.FieldType.MULTIPLE_LOOKUP_VALUES) {
-        var _cellValue2 = this._getCellValue(attachmentField);
-
-        attachmentsInField = _cellValue2 ? _cellValue2.map(cv => cv.value) : [];
+      if (attachmentField.type === _field.FieldType.MULTIPLE_LOOKUP_VALUES) {
+        var cellValue = this._getCellValue(attachmentField);
+        attachmentsInField = cellValue ? cellValue.map(cv => cv.value) : [];
       } else {
         attachmentsInField = this._getCellValue(attachmentField);
       }
-
       return attachmentsInField && attachmentsInField.length > 0 ? attachmentsInField[0] : null;
     }
     /** @internal */
-
   }, {
     key: "_getFields",
     value: function _getFields() {
       var _this$props = this.props,
-          viewMetadata = _this$props.viewMetadata,
-          fields = _this$props.fields,
-          record = _this$props.record;
+        viewMetadata = _this$props.viewMetadata,
+        fields = _this$props.fields,
+        record = _this$props.record;
       var fieldsToUse;
-
       if (fields) {
         fieldsToUse = fields.filter(field => !field.isDeleted);
       } else if (viewMetadata && !viewMetadata.isDeleted) {
@@ -465,26 +373,22 @@ function (_React$Component) {
         fieldsToUse = parentTable.fields;
       } else {
         console.warn('RecordCard: no fields, view, or record, so rendering an empty card'); // eslint-disable-line no-console
-
         fieldsToUse = [];
       }
-
       return (0, _private_utils.uniqBy)(fieldsToUse, field => field.id);
     }
     /** @internal */
-
   }, {
     key: "_getPossibleFieldsForCard",
     value: function _getPossibleFieldsForCard() {
-      var fields = this._getFields(); // remove primary field if it exists
-
+      var fields = this._getFields();
 
+      // remove primary field if it exists
       return fields.filter(field => {
         return !field.isPrimaryField;
       });
     }
     /** @internal */
-
   }, {
     key: "_getWidthAndFieldIdArray",
     value: function _getWidthAndFieldIdArray(cellContainerWidth, fieldsToUse) {
@@ -492,29 +396,25 @@ function (_React$Component) {
       var runningWidth = 0;
       var airtableInterface = this.props.sdk.__airtableInterface;
       var appInterface = this.props.sdk.__appInterface;
-      var _iteratorNormalCompletion2 = true;
-      var _didIteratorError2 = false;
-      var _iteratorError2 = undefined;
-
+      var _iterator2 = _createForOfIteratorHelper(fieldsToUse),
+        _step2;
       try {
-        for (var _iterator2 = fieldsToUse[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-          var _field2 = _step2.value;
-          var uiConfig = airtableInterface.fieldTypeProvider.getUiConfig(appInterface, _field2._data);
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var field = _step2.value;
+          var uiConfig = airtableInterface.fieldTypeProvider.getUiConfig(appInterface, field._data);
           var desiredWidth = uiConfig.desiredCellWidthForRecordCard;
-
           if (runningWidth + desiredWidth < cellContainerWidth) {
             widthAndFieldIdArray.push({
               width: desiredWidth,
-              fieldId: _field2.id
+              fieldId: field.id
             });
             runningWidth += desiredWidth;
           } else {
             var minCellWidth = uiConfig.minimumCellWidthForRecordCard;
-
             if (runningWidth + minCellWidth < cellContainerWidth) {
               widthAndFieldIdArray.push({
                 width: minCellWidth,
-                fieldId: _field2.id
+                fieldId: field.id
               });
               runningWidth += minCellWidth;
             } else {
@@ -523,34 +423,21 @@ function (_React$Component) {
           }
         }
       } catch (err) {
-        _didIteratorError2 = true;
-        _iteratorError2 = err;
+        _iterator2.e(err);
       } finally {
-        try {
-          if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
-            _iterator2.return();
-          }
-        } finally {
-          if (_didIteratorError2) {
-            throw _iteratorError2;
-          }
-        }
+        _iterator2.f();
       }
-
       if (runningWidth < cellContainerWidth && widthAndFieldIdArray.length > 0) {
         var lastWidthAndFieldId = widthAndFieldIdArray[widthAndFieldIdArray.length - 1];
         lastWidthAndFieldId.width += cellContainerWidth - runningWidth;
       }
-
       return widthAndFieldIdArray;
     }
     /** @internal */
-
   }, {
     key: "_getRecord",
     value: function _getRecord() {
       var record = this.props.record;
-
       if (record && record instanceof _record.default) {
         return record;
       } else {
@@ -558,23 +445,20 @@ function (_React$Component) {
       }
     }
     /** @internal */
-
   }, {
     key: "_renderCellsAndFieldLabels",
     value: function _renderCellsAndFieldLabels(attachmentSize, fieldsToUse) {
       var _this$props2 = this.props,
-          record = _this$props2.record,
-          width = _this$props2.width,
-          renderInvalidCellValue = _this$props2.renderInvalidCellValue;
+        record = _this$props2.record,
+        width = _this$props2.width,
+        renderInvalidCellValue = _this$props2.renderInvalidCellValue;
       (0, _error_utils.invariant)(typeof width === 'number', 'width in defaultProps');
       var cellContainerWidth = width - CARD_PADDING - attachmentSize;
-
       var widthAndFieldIdArray = this._getWidthAndFieldIdArray(cellContainerWidth, fieldsToUse);
-
       var fieldsById = (0, _private_utils.keyBy)(fieldsToUse, o => o.id);
       return widthAndFieldIdArray.map(widthAndFieldId => {
         var field = fieldsById[widthAndFieldId.fieldId];
-        return React.createElement(CellValueAndFieldLabel, (0, _extends2.default)({
+        return /*#__PURE__*/React.createElement(CellValueAndFieldLabel, (0, _extends2.default)({
           key: field.id,
           field: field,
           width: widthAndFieldId.width,
@@ -587,38 +471,33 @@ function (_React$Component) {
       });
     }
     /** @hidden */
-
   }, {
     key: "render",
     value: function render() {
       var _this$props3 = this.props,
-          record = _this$props3.record,
-          view = _this$props3.view,
-          width = _this$props3.width,
-          height = _this$props3.height,
-          onClick = _this$props3.onClick,
-          onMouseEnter = _this$props3.onMouseEnter,
-          onMouseLeave = _this$props3.onMouseLeave,
-          className = _this$props3.className,
-          style = _this$props3.style;
-
+        record = _this$props3.record,
+        view = _this$props3.view,
+        width = _this$props3.width,
+        height = _this$props3.height,
+        onClick = _this$props3.onClick,
+        onMouseEnter = _this$props3.onMouseEnter,
+        onMouseLeave = _this$props3.onMouseLeave,
+        className = _this$props3.className,
+        style = _this$props3.style;
       if (record && record instanceof _record.default && record.isDeleted) {
         return null;
       }
-
       var allFields = this._getFields();
-
       var fieldsToUse = this._getPossibleFieldsForCard();
-
       var attachmentObjIfAvailable = this._getAttachmentCover(fieldsToUse);
-
       var hasAttachment = !!attachmentObjIfAvailable;
       var hasOnClick = !!onClick || !!this._getRecord();
       var containerClasses = (0, _emotion.cx)((0, _baymax_utils.baymax)('white rounded relative block overflow-hidden'), {
         [(0, _baymax_utils.baymax)('pointer cardBoxShadow')]: hasOnClick,
         [(0, _baymax_utils.baymax)('stroked1')]: !hasOnClick
-      }, className); // use height as size in order to get square attachment
+      }, className);
 
+      // use height as size in order to get square attachment
       (0, _error_utils.invariant)(typeof height === 'number', 'height in defaultProps');
       var attachmentSize = hasAttachment ? height : 0;
       var primaryValue;
@@ -626,11 +505,9 @@ function (_React$Component) {
       var recordName;
       var recordUrl;
       var recordColor;
-
       if (record instanceof _record.default) {
         recordUrl = record.url;
         recordName = record.name;
-
         if (view) {
           recordColor = record.getColorInView(view);
         }
@@ -639,7 +516,6 @@ function (_React$Component) {
         var primaryCellValue = primaryField ? record[primaryField.id] : null;
         recordName = primaryCellValue === null || primaryCellValue === undefined ? null : String(primaryCellValue);
       }
-
       if ((0, _private_utils.isNullOrUndefinedOrEmpty)(recordName)) {
         primaryValue = FALLBACK_RECORD_NAME_FOR_DISPLAY;
         isUnnamed = true;
@@ -647,19 +523,18 @@ function (_React$Component) {
         primaryValue = recordName;
         isUnnamed = false;
       }
-
       var attachmentDimensionsAndPosition = calculateAttachmentDimensionsAndMargin(attachmentObjIfAvailable, attachmentSize);
-      return React.createElement("a", {
+      return /*#__PURE__*/React.createElement("a", {
         href: onClick === undefined && recordUrl ? recordUrl : undefined,
         className: containerClasses,
-        style: _objectSpread({}, style, {
+        style: _objectSpread(_objectSpread({}, style), {}, {
           width,
           height
         }),
         onClick: this._onClick,
         onMouseEnter: onMouseEnter || undefined,
         onMouseLeave: onMouseLeave || undefined
-      }, React.createElement(_box.default, {
+      }, /*#__PURE__*/React.createElement(_box.default, {
         right: "".concat(attachmentSize, "px"),
         backgroundColor: "transparent",
         padding: "".concat(CARD_PADDING, "px"),
@@ -668,7 +543,7 @@ function (_React$Component) {
         bottom: 0,
         left: 0,
         textColor: "dark"
-      }, React.createElement(_box.default, {
+      }, /*#__PURE__*/React.createElement(_box.default, {
         className: (0, _emotion.cx)({
           unnamed: isUnnamed
         }),
@@ -680,21 +555,21 @@ function (_React$Component) {
         lineHeight: 1.5,
         height: "18px",
         fontSize: "14px"
-      }, recordColor && React.createElement(_box.default, {
+      }, recordColor && /*#__PURE__*/React.createElement(_box.default, {
         width: "6px",
         height: "20px",
         flex: "none",
         marginRight: 1,
         borderRadius: "circle",
         backgroundColor: _color_utils.default.getHexForColor(recordColor)
-      }), React.createElement(_box.default, {
+      }), /*#__PURE__*/React.createElement(_box.default, {
         className: (0, _baymax_utils.baymax)('truncate'),
         flex: "auto"
-      }, primaryValue)), React.createElement(_box.default, {
+      }, primaryValue)), /*#__PURE__*/React.createElement(_box.default, {
         textColor: "#555555",
         position: "absolute",
         marginTop: "3px"
-      }, this._renderCellsAndFieldLabels(attachmentSize, fieldsToUse))), attachmentObjIfAvailable && attachmentObjIfAvailable.thumbnails && attachmentObjIfAvailable.thumbnails.large && React.createElement(_box.default, {
+      }, this._renderCellsAndFieldLabels(attachmentSize, fieldsToUse))), attachmentObjIfAvailable && attachmentObjIfAvailable.thumbnails && attachmentObjIfAvailable.thumbnails.large && /*#__PURE__*/React.createElement(_box.default, {
         className: (0, _baymax_utils.baymax)('noevents'),
         style: {
           borderTopRightRadius: 2,
@@ -705,7 +580,7 @@ function (_React$Component) {
         position: "absolute",
         right: "0",
         overflow: "hidden"
-      }, React.createElement("img", {
+      }, /*#__PURE__*/React.createElement("img", {
         draggable: false,
         height: attachmentDimensionsAndPosition.height,
         width: attachmentDimensionsAndPosition.width,
@@ -717,53 +592,45 @@ function (_React$Component) {
       })));
     }
   }]);
-  return RecordCard;
 }(React.Component);
-
-exports.RecordCard = RecordCard;
-(0, _defineProperty2.default)(RecordCard, "propTypes", _objectSpread({
+/** @hidden */
+(0, _defineProperty2.default)(RecordCard, "propTypes", _objectSpread(_objectSpread({
   // Record can either be a record model or a record def (cellValuesByFieldId)
   record: _propTypes.default.oneOfType([_propTypes.default.instanceOf(_record.default), _propTypes.default.object]),
   // Should provide one of fields and view
-  fields: _propTypes.default.arrayOf(_propTypes.default.instanceOf(_field4.default).isRequired),
+  fields: _propTypes.default.arrayOf(_propTypes.default.instanceOf(_field2.default).isRequired),
   view: _propTypes.default.instanceOf(_view.default),
   // This component will always respect attachmentCoverField if one is passed in.
   // Pass a null value to explicitly indicate that an attachment should not be
   // shown. If attachmentCoverField is undefined, it will fall back to using the
   // first attachment in the view provided (if a view is provided).
-  attachmentCoverField: _propTypes.default.instanceOf(_field4.default),
+  attachmentCoverField: _propTypes.default.instanceOf(_field2.default),
   width: _propTypes.default.number,
   height: _propTypes.default.number,
-  onClick: _propTypes.default.func,
-  hasOnClick: _propTypes.default.bool,
-  onMouseEnter: _propTypes.default.func,
-  onMouseLeave: _propTypes.default.func,
   // TODO: add all other mouse events: https://facebook.github.io/react/docs/events.html#mouse-events
   className: _propTypes.default.string,
   style: _propTypes.default.object,
   expandRecordOptions: _propTypes.default.object,
   renderInvalidCellValue: _propTypes.default.func
-}, _tooltip_anchor_props.tooltipAnchorPropTypes, {}, recordCardStylePropTypes));
+}, _tooltip_anchor_props.tooltipAnchorPropTypes), recordCardStylePropTypes));
+/** @hidden */
 (0, _defineProperty2.default)(RecordCard, "defaultProps", {
   width: 568,
   height: 80,
   className: '',
   style: {}
 });
-
-var _default = (0, _with_hooks.default)(RecordCard, props => {
+var _default = exports.default = (0, _with_hooks.default)(RecordCard, props => {
   var _splitStyleProps = (0, _with_styled_system.splitStyleProps)(props, styleParser.propNames),
-      styleProps = _splitStyleProps.styleProps,
-      nonStyleProps = _splitStyleProps.nonStyleProps;
-
+    styleProps = _splitStyleProps.styleProps,
+    nonStyleProps = _splitStyleProps.nonStyleProps;
   var record = nonStyleProps.record,
-      fields = nonStyleProps.fields,
-      view = nonStyleProps.view,
-      className = nonStyleProps.className;
+    fields = nonStyleProps.fields,
+    view = nonStyleProps.view,
+    className = nonStyleProps.className;
   var classNameForStyledProps = (0, _use_styled_system.default)(styleProps, styleParser);
   var recordModel = record && record instanceof _record.default ? record : null;
   var parentTable = null;
-
   if (recordModel) {
     parentTable = recordModel.parentTable;
   } else if (fields && fields.length > 0) {
@@ -771,11 +638,11 @@ var _default = (0, _with_hooks.default)(RecordCard, props => {
   } else if (view) {
     parentTable = view.parentTable;
   }
+  (0, _use_watchable.default)(recordModel, ['name', view ? "colorInView:".concat(view.id) : null]);
+  // It's safe to watch the record's parentTable since a record's parent table never changes.
+  (0, _use_watchable.default)(parentTable, ['fields']);
 
-  (0, _use_watchable.default)(recordModel, ['name', view ? "colorInView:".concat(view.id) : null]); // It's safe to watch the record's parentTable since a record's parent table never changes.
-
-  (0, _use_watchable.default)(parentTable, ['fields']); // if a view is supplied, we need to load the field order to use it for rendering the card
-
+  // if a view is supplied, we need to load the field order to use it for rendering the card
   var viewMetadata = (0, _use_view_metadata.default)(view);
   var sdk = (0, _sdk_context.useSdk)();
   return {
@@ -783,6 +650,4 @@ var _default = (0, _with_hooks.default)(RecordCard, props => {
     className: (0, _emotion.cx)(classNameForStyledProps, className),
     sdk
   };
-});
-
-exports.default = _default;
+});