@airtable/blocks 0.0.0-experimental-f52bc4e5e-20250709 → 0.0.0-experimental-75d011284-20250904

package/dist/cjs/base/ui/record_card.js

@@ -1,42 +1,16 @@
 "use strict";
 
-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");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = exports.RecordCard = void 0;
 var _emotion = require("emotion");
 var React = _interopRequireWildcard(require("react"));
 var _core = require("@styled-system/core");
 var _private_utils = require("../../shared/private_utils");
 var _error_utils = require("../../shared/error_utils");
 var _field_core = require("../../shared/types/field_core");
-var _field = _interopRequireDefault(require("../models/field"));
 var _record = _interopRequireDefault(require("../models/record"));
-var _view = _interopRequireDefault(require("../models/view"));
 var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
 var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
 var _sdk_context = require("../../shared/ui/sdk_context");
@@ -47,21 +21,15 @@ 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 _use_view_metadata = _interopRequireDefault(require("./use_view_metadata"));
 var _cell_renderer = _interopRequireDefault(require("./cell_renderer"));
 var _expand_record = _interopRequireDefault(require("./expand_record"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 */ /** */
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** @module @airtable/blocks/ui: RecordCard */ /** */
 // Mirrored from client_server_shared_config_settings
-var FALLBACK_RECORD_NAME_FOR_DISPLAY = 'Unnamed record';
+const FALLBACK_RECORD_NAME_FOR_DISPLAY = 'Unnamed record';
 
 /**
  * Style props for the {@link RecordCard} component. Accepts:
@@ -72,18 +40,19 @@ var FALLBACK_RECORD_NAME_FOR_DISPLAY = 'Unnamed record';
  * @noInheritDoc
  */
 
-var styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin);
-var recordCardStylePropTypes = exports.recordCardStylePropTypes = _objectSpread(_objectSpread(_objectSpread({}, _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
-var CARD_PADDING = 12;
+const styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin);
+const CARD_PADDING = 12;
 
 /** @hidden */
 
-var CellValueAndFieldLabel = _ref => {
-  var record = _ref.record,
-    cellValue = _ref.cellValue,
-    field = _ref.field,
-    width = _ref.width,
-    renderInvalidCellValue = _ref.renderInvalidCellValue;
+const CellValueAndFieldLabel = _ref => {
+  let {
+    record,
+    cellValue,
+    field,
+    width,
+    renderInvalidCellValue
+  } = _ref;
   (0, _use_watchable.default)(field, ['name', 'type', 'options']);
   return /*#__PURE__*/React.createElement(_box.default, {
     style: {
@@ -112,17 +81,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
-  // cannot currently handle all cell types.
-  // 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(_field.default).isRequired,
-  width: _propTypes.default.number.isRequired,
-  renderInvalidCellValue: _propTypes.default.func
-};
 
 /**
  * Props for the {@link RecordCard} component. Also accepts:
@@ -133,23 +91,23 @@ CellValueAndFieldLabel.propTypes = {
  */
 
 // TODO(jb): move this stuff into the field model when we decide on an api for it.
-var FormulaicFieldTypes = {
+const FormulaicFieldTypes = {
   [_field_core.FieldType.FORMULA]: true,
   [_field_core.FieldType.ROLLUP]: true,
   [_field_core.FieldType.MULTIPLE_LOOKUP_VALUES]: true
 };
-var isFieldFormulaic = field => {
+const isFieldFormulaic = field => {
   return (0, _private_utils.has)(FormulaicFieldTypes, field.type);
 };
-var getFieldResultType = field => {
+const getFieldResultType = field => {
   if (field.type === _field_core.FieldType.COUNT) {
     return _field_core.FieldType.NUMBER;
   }
   if (isFieldFormulaic(field)) {
     (0, _error_utils.invariant)(field.options, 'options');
-    var result = field.options.result;
+    const result = field.options.result;
     if (typeof result === 'object' && result) {
-      var resultType = result.type;
+      const resultType = result.type;
       (0, _error_utils.invariant)(typeof resultType === 'string', 'resultType must be string');
       return resultType;
     } else {
@@ -167,17 +125,22 @@ var getFieldResultType = field => {
  * 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) => {
+const 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;
-  var height = Math.min(containerSize, thumbHeight);
-  var width = Math.round(thumbWidth * height / thumbHeight);
-  var marginTop = Math.round((containerSize - height) / 2);
-  var marginLeft = Math.round((containerSize - width) / 2);
+  const {
+    thumbnails: {
+      large: {
+        width: thumbWidth,
+        height: thumbHeight
+      }
+    }
+  } = attachment;
+  const height = Math.min(containerSize, thumbHeight);
+  const width = Math.round(thumbWidth * height / thumbHeight);
+  const marginTop = Math.round((containerSize - height) / 2);
+  const marginLeft = Math.round((containerSize - width) / 2);
   return {
     height,
     width,
@@ -194,443 +157,391 @@ var calculateAttachmentDimensionsAndMargin = (attachment, containerSize) => {
  * @docsPath UI/components/RecordCard
  * @component
  */
-var RecordCard = exports.RecordCard = /*#__PURE__*/function (_React$Component) {
+class RecordCard extends React.Component {
   /** @hidden */
-  function RecordCard(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, RecordCard);
-    _this = _callSuper(this, RecordCard, [props]);
-    _this._onClick = _this._onClick.bind(_this);
-    _this._validateProps(props);
-    return _this;
+  static defaultProps = {
+    width: 568,
+    height: 80,
+    className: '',
+    style: {}
+  };
+
+  /** @hidden */
+  constructor(props) {
+    super(props);
+    this._onClick = this._onClick.bind(this);
+    this._validateProps(props);
   }
   /** @hidden */
-  (0, _inherits2.default)(RecordCard, _React$Component);
-  return (0, _createClass2.default)(RecordCard, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this._validateProps(nextProps);
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this._validateProps(nextProps);
+  }
+  /** @internal */
+  _validateProps(props) {
+    const {
+      record,
+      view,
+      fields,
+      attachmentCoverField
+    } = props;
+    if (record && record instanceof _record.default && record.isDeleted) {
+      throw (0, _error_utils.spawnError)('Record %s is deleted', record.id);
     }
-    /** @internal */
-  }, {
-    key: "_validateProps",
-    value: function _validateProps(props) {
-      var record = props.record,
-        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 _iterator = _createForOfIteratorHelper(fields),
-          _step;
-        try {
-          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) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
+    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 && 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);
+    }
+    if (record && record instanceof _record.default && fields) {
+      for (const field of fields) {
+        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);
         }
       }
     }
-    /** @internal */
-  }, {
-    key: "_onClick",
-    value: function _onClick(e) {
-      if (this.props.onClick) {
-        this.props.onClick(e);
+    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);
       }
-      // 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.
+    }
+  }
+  /** @internal */
+  _onClick(e) {
+    if (this.props.onClick) {
+      this.props.onClick(e);
+    }
+    // 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;
-        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);
-          }
+      const {
+        record
+      } = this.props;
+      const 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();
+          const 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) {
-        // The attachment field in this case is either coming from the view
-        // if there is a view, or from the table's arbitrary field ordering
-        // if there is no view.
-        // TODO: use the real cover field if the view is gallery or kanban instead of
-        // the first attachment field
-        var firstAttachmentFieldInView = fieldsToUse.find(field => {
-          return this._isAttachment(field);
-        });
-        if (firstAttachmentFieldInView === undefined) {
-          return null;
-        }
-        return firstAttachmentFieldInView;
-      } else {
+  }
+  /** @internal */
+  _getAttachmentCover(fieldsToUse) {
+    const attachmentField = this._getAttachmentField(fieldsToUse);
+    return attachmentField ? this._getFirstAttachmentInField(attachmentField) : null;
+  }
+  /** @internal */
+  _getAttachmentField(fieldsToUse) {
+    const {
+      attachmentCoverField
+    } = this.props;
+    if (attachmentCoverField && !attachmentCoverField.isDeleted && this._isAttachment(attachmentCoverField)) {
+      return attachmentCoverField;
+    } else if (attachmentCoverField === undefined) {
+      // The attachment field in this case is either coming from the view
+      // if there is a view, or from the table's arbitrary field ordering
+      // if there is no view.
+      // TODO: use the real cover field if the view is gallery or kanban instead of
+      // the first attachment field
+      const 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) === _field_core.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];
+  }
+  /** @internal */
+  _isAttachment(field) {
+    return getFieldResultType(field) === _field_core.FieldType.MULTIPLE_ATTACHMENTS;
+  }
+  /** @internal */
+  _getCellValue(field) {
+    const {
+      record
+    } = this.props;
+    if (record && record instanceof _record.default) {
+      return record.getCellValue(field.id);
+    } else {
+      const 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);
-          if (!validationResult.isValid) {
-            throw (0, _error_utils.spawnError)(validationResult.reason);
-          }
+      // 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) {
+        const airtableInterface = this.props.sdk.__airtableInterface;
+        const appInterface = this.props.sdk.__appInterface;
+        const 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 === _field_core.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 */
+  _getFirstAttachmentInField(attachmentField) {
+    let attachmentsInField;
+    if (attachmentField.type === _field_core.FieldType.MULTIPLE_LOOKUP_VALUES) {
+      const cellValue = this._getCellValue(attachmentField);
+      attachmentsInField = cellValue ? cellValue.map(cv => cv.value) : [];
+    } else {
+      attachmentsInField = this._getCellValue(attachmentField);
     }
-    /** @internal */
-  }, {
-    key: "_getFields",
-    value: function _getFields() {
-      var _this$props = this.props,
-        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) {
-        fieldsToUse = viewMetadata.visibleFields;
-      } else if (record && record instanceof _record.default && !record.isDeleted) {
-        var parentTable = record.parentTable;
-        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);
+    return attachmentsInField && attachmentsInField.length > 0 ? attachmentsInField[0] : null;
+  }
+  /** @internal */
+  _getFields() {
+    const {
+      viewMetadata,
+      fields,
+      record
+    } = this.props;
+    let fieldsToUse;
+    if (fields) {
+      fieldsToUse = fields.filter(field => !field.isDeleted);
+    } else if (viewMetadata && !viewMetadata.isDeleted) {
+      fieldsToUse = viewMetadata.visibleFields;
+    } else if (record && record instanceof _record.default && !record.isDeleted) {
+      const parentTable = record.parentTable;
+      fieldsToUse = parentTable.fields;
+    } else {
+      console.warn('RecordCard: no fields, view, or record, so rendering an empty card'); // eslint-disable-line no-console
+      fieldsToUse = [];
     }
-    /** @internal */
-  }, {
-    key: "_getPossibleFieldsForCard",
-    value: function _getPossibleFieldsForCard() {
-      var fields = this._getFields();
+    return (0, _private_utils.uniqBy)(fieldsToUse, field => field.id);
+  }
+  /** @internal */
+  _getPossibleFieldsForCard() {
+    const fields = this._getFields();
 
-      // remove primary field if it exists
-      return fields.filter(field => {
-        return !field.isPrimaryField;
-      });
-    }
-    /** @internal */
-  }, {
-    key: "_getWidthAndFieldIdArray",
-    value: function _getWidthAndFieldIdArray(cellContainerWidth, fieldsToUse) {
-      var widthAndFieldIdArray = [];
-      var runningWidth = 0;
-      var airtableInterface = this.props.sdk.__airtableInterface;
-      var appInterface = this.props.sdk.__appInterface;
-      var _iterator2 = _createForOfIteratorHelper(fieldsToUse),
-        _step2;
-      try {
-        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: field.id
-            });
-            runningWidth += desiredWidth;
-          } else {
-            var minCellWidth = uiConfig.minimumCellWidthForRecordCard;
-            if (runningWidth + minCellWidth < cellContainerWidth) {
-              widthAndFieldIdArray.push({
-                width: minCellWidth,
-                fieldId: field.id
-              });
-              runningWidth += minCellWidth;
-            } else {
-              break;
-            }
-          }
+    // remove primary field if it exists
+    return fields.filter(field => {
+      return !field.isPrimaryField;
+    });
+  }
+  /** @internal */
+  _getWidthAndFieldIdArray(cellContainerWidth, fieldsToUse) {
+    const widthAndFieldIdArray = [];
+    let runningWidth = 0;
+    const airtableInterface = this.props.sdk.__airtableInterface;
+    const appInterface = this.props.sdk.__appInterface;
+    for (const field of fieldsToUse) {
+      const uiConfig = airtableInterface.fieldTypeProvider.getUiConfig(appInterface, field._data);
+      const desiredWidth = uiConfig.desiredCellWidthForRecordCard;
+      if (runningWidth + desiredWidth < cellContainerWidth) {
+        widthAndFieldIdArray.push({
+          width: desiredWidth,
+          fieldId: field.id
+        });
+        runningWidth += desiredWidth;
+      } else {
+        const minCellWidth = uiConfig.minimumCellWidthForRecordCard;
+        if (runningWidth + minCellWidth < cellContainerWidth) {
+          widthAndFieldIdArray.push({
+            width: minCellWidth,
+            fieldId: field.id
+          });
+          runningWidth += minCellWidth;
+        } else {
+          break;
         }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _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 {
-        return null;
-      }
+    if (runningWidth < cellContainerWidth && widthAndFieldIdArray.length > 0) {
+      const lastWidthAndFieldId = widthAndFieldIdArray[widthAndFieldIdArray.length - 1];
+      lastWidthAndFieldId.width += cellContainerWidth - runningWidth;
     }
-    /** @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;
-      (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 /*#__PURE__*/React.createElement(CellValueAndFieldLabel, (0, _extends2.default)({
-          key: field.id,
-          field: field,
-          width: widthAndFieldId.width,
-          renderInvalidCellValue: renderInvalidCellValue
-        }, record instanceof _record.default ? {
-          record
-        } : {
-          cellValue: record[field.id]
-        }));
-      });
+    return widthAndFieldIdArray;
+  }
+  /** @internal */
+  _getRecord() {
+    const {
+      record
+    } = this.props;
+    if (record && record instanceof _record.default) {
+      return record;
+    } else {
+      return null;
     }
-    /** @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;
-      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);
+  }
+  /** @internal */
+  _renderCellsAndFieldLabels(attachmentSize, fieldsToUse) {
+    const {
+      record,
+      width,
+      renderInvalidCellValue
+    } = this.props;
+    (0, _error_utils.invariant)(typeof width === 'number', 'width in defaultProps');
+    const cellContainerWidth = width - CARD_PADDING - attachmentSize;
+    const widthAndFieldIdArray = this._getWidthAndFieldIdArray(cellContainerWidth, fieldsToUse);
+    const fieldsById = (0, _private_utils.keyBy)(fieldsToUse, o => o.id);
+    return widthAndFieldIdArray.map(widthAndFieldId => {
+      const field = fieldsById[widthAndFieldId.fieldId];
+      return /*#__PURE__*/React.createElement(CellValueAndFieldLabel, _extends({
+        key: field.id,
+        field: field,
+        width: widthAndFieldId.width,
+        renderInvalidCellValue: renderInvalidCellValue
+      }, record instanceof _record.default ? {
+        record
+      } : {
+        cellValue: record[field.id]
+      }));
+    });
+  }
+  /** @hidden */
+  render() {
+    const {
+      record,
+      view,
+      width,
+      height,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      className,
+      style
+    } = this.props;
+    if (record && record instanceof _record.default && record.isDeleted) {
+      return null;
+    }
+    const allFields = this._getFields();
+    const fieldsToUse = this._getPossibleFieldsForCard();
+    const attachmentObjIfAvailable = this._getAttachmentCover(fieldsToUse);
+    const hasAttachment = !!attachmentObjIfAvailable;
+    const hasOnClick = !!onClick || !!this._getRecord();
+    const 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
-      (0, _error_utils.invariant)(typeof height === 'number', 'height in defaultProps');
-      var attachmentSize = hasAttachment ? height : 0;
-      var primaryValue;
-      var isUnnamed;
-      var recordName;
-      var recordUrl;
-      var recordColor;
-      if (record instanceof _record.default) {
-        recordUrl = record.url;
-        recordName = record.name;
-        if (view) {
-          recordColor = record.getColorInView(view);
-        }
-      } else {
-        var primaryField = allFields.length > 0 ? allFields[0].parentTable.primaryField : null;
-        var primaryCellValue = primaryField ? record[primaryField.id] : null;
-        recordName = primaryCellValue === null || primaryCellValue === undefined ? null : String(primaryCellValue);
+    // use height as size in order to get square attachment
+    (0, _error_utils.invariant)(typeof height === 'number', 'height in defaultProps');
+    const attachmentSize = hasAttachment ? height : 0;
+    let primaryValue;
+    let isUnnamed;
+    let recordName;
+    let recordUrl;
+    let recordColor;
+    if (record instanceof _record.default) {
+      recordUrl = record.url;
+      recordName = record.name;
+      if (view) {
+        recordColor = record.getColorInView(view);
       }
-      if ((0, _private_utils.isNullOrUndefinedOrEmpty)(recordName)) {
-        primaryValue = FALLBACK_RECORD_NAME_FOR_DISPLAY;
-        isUnnamed = true;
-      } else {
-        primaryValue = recordName;
-        isUnnamed = false;
-      }
-      var attachmentDimensionsAndPosition = calculateAttachmentDimensionsAndMargin(attachmentObjIfAvailable, attachmentSize);
-      return /*#__PURE__*/React.createElement("a", {
-        href: onClick === undefined && recordUrl ? recordUrl : undefined,
-        className: containerClasses,
-        style: _objectSpread(_objectSpread({}, style), {}, {
-          width,
-          height
-        }),
-        onClick: this._onClick,
-        onMouseEnter: onMouseEnter || undefined,
-        onMouseLeave: onMouseLeave || undefined
-      }, /*#__PURE__*/React.createElement(_box.default, {
-        right: "".concat(attachmentSize, "px"),
-        backgroundColor: "transparent",
-        padding: "".concat(CARD_PADDING, "px"),
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        left: 0,
-        textColor: "dark"
-      }, /*#__PURE__*/React.createElement(_box.default, {
-        className: (0, _emotion.cx)({
-          unnamed: isUnnamed
-        }),
-        fontWeight: 500,
-        position: "relative",
-        marginTop: 0,
-        display: "flex",
-        alignItems: "center",
-        lineHeight: 1.5,
-        height: "18px",
-        fontSize: "14px"
-      }, recordColor && /*#__PURE__*/React.createElement(_box.default, {
-        width: "6px",
-        height: "20px",
-        flex: "none",
-        marginRight: 1,
-        borderRadius: "circle",
-        backgroundColor: _color_utils.default.getHexForColor(recordColor)
-      }), /*#__PURE__*/React.createElement(_box.default, {
-        className: (0, _baymax_utils.baymax)('truncate'),
-        flex: "auto"
-      }, primaryValue)), /*#__PURE__*/React.createElement(_box.default, {
-        textColor: "#555555",
-        position: "absolute",
-        marginTop: "3px"
-      }, this._renderCellsAndFieldLabels(attachmentSize, fieldsToUse))), attachmentObjIfAvailable && attachmentObjIfAvailable.thumbnails && attachmentObjIfAvailable.thumbnails.large && /*#__PURE__*/React.createElement(_box.default, {
-        className: (0, _baymax_utils.baymax)('noevents'),
-        style: {
-          borderTopRightRadius: 2,
-          borderBottomRightRadius: 2
-        },
-        height: "".concat(attachmentSize, "px"),
-        width: "".concat(attachmentSize, "px"),
-        position: "absolute",
-        right: "0",
-        overflow: "hidden"
-      }, /*#__PURE__*/React.createElement("img", {
-        draggable: false,
-        height: attachmentDimensionsAndPosition.height,
-        width: attachmentDimensionsAndPosition.width,
-        style: {
-          marginTop: attachmentDimensionsAndPosition.marginTop,
-          marginLeft: attachmentDimensionsAndPosition.marginLeft
-        },
-        src: attachmentObjIfAvailable.thumbnails.large.url
-      })));
+    } else {
+      const primaryField = allFields.length > 0 ? allFields[0].parentTable.primaryField : null;
+      const primaryCellValue = primaryField ? record[primaryField.id] : null;
+      recordName = primaryCellValue === null || primaryCellValue === undefined ? null : String(primaryCellValue);
     }
-  }]);
-}(React.Component);
-/** @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(_field.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(_field.default),
-  width: _propTypes.default.number,
-  height: _propTypes.default.number,
-  // 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));
-/** @hidden */
-(0, _defineProperty2.default)(RecordCard, "defaultProps", {
-  width: 568,
-  height: 80,
-  className: '',
-  style: {}
-});
+    if ((0, _private_utils.isNullOrUndefinedOrEmpty)(recordName)) {
+      primaryValue = FALLBACK_RECORD_NAME_FOR_DISPLAY;
+      isUnnamed = true;
+    } else {
+      primaryValue = recordName;
+      isUnnamed = false;
+    }
+    const attachmentDimensionsAndPosition = calculateAttachmentDimensionsAndMargin(attachmentObjIfAvailable, attachmentSize);
+    return /*#__PURE__*/React.createElement("a", {
+      href: onClick === undefined && recordUrl ? recordUrl : undefined,
+      className: containerClasses,
+      style: {
+        ...style,
+        width,
+        height
+      },
+      onClick: this._onClick,
+      onMouseEnter: onMouseEnter || undefined,
+      onMouseLeave: onMouseLeave || undefined
+    }, /*#__PURE__*/React.createElement(_box.default, {
+      right: `${attachmentSize}px`,
+      backgroundColor: "transparent",
+      padding: `${CARD_PADDING}px`,
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      textColor: "dark"
+    }, /*#__PURE__*/React.createElement(_box.default, {
+      className: (0, _emotion.cx)({
+        unnamed: isUnnamed
+      }),
+      fontWeight: 500,
+      position: "relative",
+      marginTop: 0,
+      display: "flex",
+      alignItems: "center",
+      lineHeight: 1.5,
+      height: "18px",
+      fontSize: "14px"
+    }, recordColor && /*#__PURE__*/React.createElement(_box.default, {
+      width: "6px",
+      height: "20px",
+      flex: "none",
+      marginRight: 1,
+      borderRadius: "circle",
+      backgroundColor: _color_utils.default.getHexForColor(recordColor)
+    }), /*#__PURE__*/React.createElement(_box.default, {
+      className: (0, _baymax_utils.baymax)('truncate'),
+      flex: "auto"
+    }, primaryValue)), /*#__PURE__*/React.createElement(_box.default, {
+      textColor: "#555555",
+      position: "absolute",
+      marginTop: "3px"
+    }, this._renderCellsAndFieldLabels(attachmentSize, fieldsToUse))), attachmentObjIfAvailable && attachmentObjIfAvailable.thumbnails && attachmentObjIfAvailable.thumbnails.large && /*#__PURE__*/React.createElement(_box.default, {
+      className: (0, _baymax_utils.baymax)('noevents'),
+      style: {
+        borderTopRightRadius: 2,
+        borderBottomRightRadius: 2
+      },
+      height: `${attachmentSize}px`,
+      width: `${attachmentSize}px`,
+      position: "absolute",
+      right: "0",
+      overflow: "hidden"
+    }, /*#__PURE__*/React.createElement("img", {
+      draggable: false,
+      height: attachmentDimensionsAndPosition.height,
+      width: attachmentDimensionsAndPosition.width,
+      style: {
+        marginTop: attachmentDimensionsAndPosition.marginTop,
+        marginLeft: attachmentDimensionsAndPosition.marginLeft
+      },
+      src: attachmentObjIfAvailable.thumbnails.large.url
+    })));
+  }
+}
+exports.RecordCard = RecordCard;
 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;
-  var record = nonStyleProps.record,
-    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;
+  const {
+    styleProps,
+    nonStyleProps
+  } = (0, _with_styled_system.splitStyleProps)(props, styleParser.propNames);
+  const {
+    record,
+    fields,
+    view,
+    className
+  } = nonStyleProps;
+  const classNameForStyledProps = (0, _use_styled_system.default)(styleProps, styleParser);
+  const recordModel = record && record instanceof _record.default ? record : null;
+  let parentTable = null;
   if (recordModel) {
     parentTable = recordModel.parentTable;
   } else if (fields && fields.length > 0) {
@@ -638,13 +549,13 @@ var _default = exports.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]);
+  (0, _use_watchable.default)(recordModel, ['name', view ? `colorInView:${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
-  var viewMetadata = (0, _use_view_metadata.default)(view);
-  var sdk = (0, _sdk_context.useSdk)();
+  const viewMetadata = (0, _use_view_metadata.default)(view);
+  const sdk = (0, _sdk_context.useSdk)();
   return {
     viewMetadata,
     className: (0, _emotion.cx)(classNameForStyledProps, className),