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

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

@@ -1,54 +1,26 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.symbol.description.js");
-require("core-js/modules/es.array.filter.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.object.to-string.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.recordCardListStylePropTypes = exports.default = exports.RecordCardList = void 0;
-require("core-js/modules/es.number.constructor.js");
-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.RecordCardList = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactWindow = require("react-window");
 var _core = require("@styled-system/core");
 var _error_utils = require("../../shared/error_utils");
 var _record = _interopRequireDefault(require("../models/record"));
-var _field = _interopRequireDefault(require("../models/field"));
-var _view = _interopRequireDefault(require("../models/view"));
 var _box = _interopRequireDefault(require("./box"));
 var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
 var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
 var _system = require("./system");
 var _record_card = _interopRequireDefault(require("./record_card"));
-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 _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; }
-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; } /** @module @airtable/blocks/ui: RecordCardList */ /** */
-var RECORD_CARD_ROW_HEIGHT = 80;
-var RECORD_CARD_SPACING = 10;
+/** @module @airtable/blocks/ui: RecordCardList */ /** */
+
+const RECORD_CARD_ROW_HEIGHT = 80;
+const RECORD_CARD_SPACING = 10;
 
 /** @internal */
 
@@ -62,36 +34,30 @@ var RECORD_CARD_SPACING = 10;
  * @internal
  */
 function RecordCardItemRenderer(props) {
-  var _props$data = props.data,
-    records = _props$data.records,
-    fields = _props$data.fields,
-    view = _props$data.view,
-    width = _props$data.width,
-    attachmentCoverField = _props$data.attachmentCoverField,
-    onClick = _props$data.onClick,
-    onMouseEnter = _props$data.onMouseEnter,
-    onMouseLeave = _props$data.onMouseLeave;
-  var itemIndex = props.index,
-    style = props.style,
-    className = props.className;
-  var record = records[itemIndex];
+  const {
+    records,
+    fields,
+    view,
+    width,
+    attachmentCoverField,
+    onClick,
+    onMouseEnter,
+    onMouseLeave
+  } = props.data;
+  const {
+    index: itemIndex,
+    style,
+    className
+  } = props;
+  const record = records[itemIndex];
   // Ensure that expandRecordOptions.records only contains Records, not RecordDefs. RecordCardList
   // can be given either Records or RecordDefs, but the `opts` argument in `expandRecord` only
   // accepts an array of Records.
-  var filteredRecords = [];
-  var _iterator = _createForOfIteratorHelper(records),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var currentRecord = _step.value;
-      if (currentRecord instanceof _record.default) {
-        filteredRecords.push(currentRecord);
-      }
+  const filteredRecords = [];
+  for (const currentRecord of records) {
+    if (currentRecord instanceof _record.default) {
+      filteredRecords.push(currentRecord);
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
   }
   if (filteredRecords.length !== records.length && filteredRecords.length !== 0) {
     throw (0, _error_utils.spawnError)("RecordCardList's props.records should not contain a mix of Record and RecordDef");
@@ -99,7 +65,7 @@ function RecordCardItemRenderer(props) {
 
   // RecordCard handles null and undefined differently for `onClick`. Treat other
   // falsey values (e.g. "", false) like null.
-  var _onClick;
+  let _onClick;
   if (onClick) {
     _onClick = () => onClick(record, itemIndex);
   } else if (onClick === undefined) {
@@ -124,29 +90,13 @@ function RecordCardItemRenderer(props) {
     // Adjustments to top and left made to properly position the cards in the list. FixedSizeList doesn't
     // differentiate between content & gutter for each "item" it renders. See https://github.com/bvaughn/react-window#can-i-add-gutter-or-padding-between-items
     ,
-    style: _objectSpread(_objectSpread({}, style), {}, {
+    style: {
+      ...style,
       left: Number(style.left) + RECORD_CARD_SPACING,
       top: Number(style.top) + RECORD_CARD_SPACING
-    })
+    }
   });
 }
-RecordCardItemRenderer.propTypes = {
-  data: _propTypes.default.shape({
-    records: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(_record.default), _propTypes.default.object])).isRequired,
-    fields: _propTypes.default.arrayOf(_propTypes.default.instanceOf(_field.default)),
-    view: _propTypes.default.instanceOf(_view.default),
-    attachmentCoverField: _propTypes.default.instanceOf(_field.default),
-    onClick: _propTypes.default.func,
-    onMouseEnter: _propTypes.default.func,
-    onMouseLeave: _propTypes.default.func,
-    width: _propTypes.default.number.isRequired,
-    className: _propTypes.default.string,
-    style: _propTypes.default.object
-  }),
-  index: _propTypes.default.number.isRequired,
-  style: _propTypes.default.object,
-  className: _propTypes.default.string
-};
 
 /**
  * Utility function to measure scrollbar size.
@@ -155,16 +105,16 @@ RecordCardItemRenderer.propTypes = {
  * @internal
  */
 function getScrollbarWidth() {
-  var scrollDiv = document.createElement('div');
+  const scrollDiv = document.createElement('div');
   scrollDiv.style.position = 'absolute';
   scrollDiv.style.top = '-9999px';
   scrollDiv.style.width = '50px';
   scrollDiv.style.height = '50px';
   scrollDiv.style.overflow = 'scroll';
-  var body = document.body;
+  const body = document.body;
   (0, _error_utils.invariant)(body, 'no document body to measure scrollbar');
   body.appendChild(scrollDiv);
-  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
   body.removeChild(scrollDiv);
   return scrollbarWidth;
 }
@@ -183,17 +133,20 @@ function getScrollbarWidth() {
  *
  * @internal
  */
-var innerRecordCardListWindow = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var style = props.style,
-    children = props.children;
+const innerRecordCardListWindow = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    style,
+    children
+  } = props;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref
     // Height adjustment required to account for the spacing between the last item and the bottom of the list container.
     // See https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
     ,
-    style: _objectSpread(_objectSpread({}, style), {}, {
+    style: {
+      ...style,
       height: Number(style.height) + RECORD_CARD_SPACING
-    })
+    }
   }, children);
 });
 
@@ -220,10 +173,10 @@ var innerRecordCardListWindow = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @noInheritDoc
  */
 
-var styleParser = (0, _core.compose)(_system.dimensionsSet, _system.flexItemSet, _system.positionSet, _system.margin);
-var recordCardListStylePropTypes = exports.recordCardListStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.dimensionsSetPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
+const styleParser = (0, _core.compose)(_system.dimensionsSet, _system.flexItemSet, _system.positionSet, _system.margin);
 
 /** @hidden */
+
 /**
  * Scrollable list of record cards.
  *
@@ -232,146 +185,119 @@ var recordCardListStylePropTypes = exports.recordCardListStylePropTypes = _objec
  * @docsPath UI/components/RecordCardList
  * @component
  */
-var RecordCardList = exports.RecordCardList = /*#__PURE__*/function (_React$Component) {
+class RecordCardList extends React.Component {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
   /** @hidden */
-  function RecordCardList(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, RecordCardList);
-    _this = _callSuper(this, RecordCardList, [props]);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_container", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_cardList", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_cardListInnerWindow", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_detectElementResize", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_scrollbarWidth", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_updateCardListSizeIfNeeded", () => {
-      (0, _error_utils.invariant)(_this._container.current, 'No container to update card list size');
-      var _this$_container$curr = _this._container.current.getBoundingClientRect(),
-        cardListWidth = _this$_container$curr.width,
-        cardListHeight = _this$_container$curr.height;
-      (0, _error_utils.invariant)(_this._cardListInnerWindow.current, 'No card list inner window to measure scroll height');
-      var isScrollbarVisible = _this._cardListInnerWindow.current.scrollHeight > cardListHeight;
-      if (_this.state.cardListWidth !== cardListWidth || _this.state.cardListHeight !== cardListHeight || _this.state.isScrollbarVisible !== isScrollbarVisible) {
-        _this.setState({
-          cardListWidth,
-          cardListHeight,
-          isScrollbarVisible
-        });
-      }
-    });
-    _this._container = /*#__PURE__*/React.createRef();
-    _this._cardList = /*#__PURE__*/React.createRef();
-    _this._cardListInnerWindow = /*#__PURE__*/React.createRef();
-    _this._detectElementResize = (0, _create_detect_element_resize.default)();
-    _this._scrollbarWidth = getScrollbarWidth();
-    _this.state = {
+  constructor(props) {
+    super(props);
+    this._container = /*#__PURE__*/React.createRef();
+    this._cardList = /*#__PURE__*/React.createRef();
+    this._cardListInnerWindow = /*#__PURE__*/React.createRef();
+    this._detectElementResize = (0, _create_detect_element_resize.default)();
+    this._scrollbarWidth = getScrollbarWidth();
+    this.state = {
       cardListWidth: 0,
       cardListHeight: 0,
       isScrollbarVisible: false
     };
-    return _this;
   }
   /** @hidden */
-  (0, _inherits2.default)(RecordCardList, _React$Component);
-  return (0, _createClass2.default)(RecordCardList, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      (0, _error_utils.invariant)(this._container.current, 'No container to detect resize on');
-      this._detectElementResize.addResizeListener(this._container.current, this._updateCardListSizeIfNeeded);
-      this._updateCardListSizeIfNeeded();
-    }
-    /** @hidden */
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this._container.current) {
-        this._detectElementResize.removeResizeListener(this._container.current, this._updateCardListSizeIfNeeded);
-      }
-    }
-    /** @hidden */
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      // If the number of records change, we may need to adjust card widths if a scrollbar
-      // now exists (or no longer exists)
-      if (this.props.records.length !== prevProps.records.length) {
-        this._updateCardListSizeIfNeeded();
-      }
+  componentDidMount() {
+    (0, _error_utils.invariant)(this._container.current, 'No container to detect resize on');
+    this._detectElementResize.addResizeListener(this._container.current, this._updateCardListSizeIfNeeded);
+    this._updateCardListSizeIfNeeded();
+  }
+  /** @hidden */
+  componentWillUnmount() {
+    if (this._container.current) {
+      this._detectElementResize.removeResizeListener(this._container.current, this._updateCardListSizeIfNeeded);
     }
-    // Functionality for `getScrollTopForRecordAtIndex` and `scrollTop` getter/setter was
-    // removed when migrating from DynamicDraw => react-window, which were not being used
-    // by any consuming component at the time of migration.
-    /** @hidden */
-  }, {
-    key: "scrollToRecordAtIndex",
-    value: function scrollToRecordAtIndex(recordIndex) {
-      (0, _error_utils.invariant)(this._cardList.current, 'No card list to scroll');
-      this._cardList.current.scrollToItem(recordIndex);
+  }
+  /** @hidden */
+  componentDidUpdate(prevProps) {
+    // If the number of records change, we may need to adjust card widths if a scrollbar
+    // now exists (or no longer exists)
+    if (this.props.records.length !== prevProps.records.length) {
+      this._updateCardListSizeIfNeeded();
     }
-  }, {
-    key: "render",
-    value: /** @hidden */
-    function render() {
-      var _this$props$onRecordM, _this$props$onRecordM2;
-      var _this$props = this.props,
-        records = _this$props.records,
-        fields = _this$props.fields,
-        view = _this$props.view,
-        attachmentCoverField = _this$props.attachmentCoverField,
-        className = _this$props.className,
-        style = _this$props.style;
-      var itemData = {
-        records,
-        fields,
-        view,
-        width: this.state.cardListWidth - 2 * RECORD_CARD_SPACING - (this.state.isScrollbarVisible ? this._scrollbarWidth : 0),
-        attachmentCoverField,
-        onClick: this.props.onRecordClick,
-        onMouseEnter: (_this$props$onRecordM = this.props.onRecordMouseEnter) !== null && _this$props$onRecordM !== void 0 ? _this$props$onRecordM : null,
-        onMouseLeave: (_this$props$onRecordM2 = this.props.onRecordMouseLeave) !== null && _this$props$onRecordM2 !== void 0 ? _this$props$onRecordM2 : null,
-        style: {},
-        className: ''
-      };
-      return /*#__PURE__*/React.createElement(_box.default, {
-        ref: this._container,
-        className: className,
-        overflow: "hidden",
-        height: "100%",
-        style: style
-      }, /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
-        outerRef: this._cardList,
-        width: this.state.cardListWidth,
-        height: this.state.cardListHeight,
-        innerElementType: innerRecordCardListWindow,
-        innerRef: this._cardListInnerWindow,
-        itemData: itemData,
-        itemCount: this.props.records.length,
-        itemKey: (index, data) => data.records[index].id,
-        itemSize: RECORD_CARD_ROW_HEIGHT + RECORD_CARD_SPACING,
-        onScroll: this.props.onScroll
-      },
-      // TODO(alex): figure out why this needs a cast to any - something to do with prop-types?
-      RecordCardItemRenderer));
+  }
+  // Functionality for `getScrollTopForRecordAtIndex` and `scrollTop` getter/setter was
+  // removed when migrating from DynamicDraw => react-window, which were not being used
+  // by any consuming component at the time of migration.
+  /** @hidden */
+  scrollToRecordAtIndex(recordIndex) {
+    (0, _error_utils.invariant)(this._cardList.current, 'No card list to scroll');
+    this._cardList.current.scrollToItem(recordIndex);
+  }
+  /** @internal */
+  _updateCardListSizeIfNeeded = () => {
+    (0, _error_utils.invariant)(this._container.current, 'No container to update card list size');
+    const {
+      width: cardListWidth,
+      height: cardListHeight
+    } = this._container.current.getBoundingClientRect();
+    (0, _error_utils.invariant)(this._cardListInnerWindow.current, 'No card list inner window to measure scroll height');
+    const isScrollbarVisible = this._cardListInnerWindow.current.scrollHeight > cardListHeight;
+    if (this.state.cardListWidth !== cardListWidth || this.state.cardListHeight !== cardListHeight || this.state.isScrollbarVisible !== isScrollbarVisible) {
+      this.setState({
+        cardListWidth,
+        cardListHeight,
+        isScrollbarVisible
+      });
     }
-  }]);
-}(React.Component);
-/** @hidden */
-(0, _defineProperty2.default)(RecordCardList, "propTypes", {
-  records: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(_record.default), _propTypes.default.object])).isRequired,
-  onScroll: _propTypes.default.func,
-  onRecordClick: _propTypes.default.func,
-  onRecordMouseEnter: _propTypes.default.func,
-  onRecordMouseLeave: _propTypes.default.func,
-  // Passed through to RecordCard.
-  fields: _propTypes.default.arrayOf(_propTypes.default.instanceOf(_field.default).isRequired),
-  view: _propTypes.default.instanceOf(_view.default),
-  attachmentCoverField: _propTypes.default.instanceOf(_field.default),
-  className: _propTypes.default.string,
-  style: _propTypes.default.object
-});
-var _default = exports.default = (0, _with_styled_system.default)(RecordCardList, styleParser, recordCardListStylePropTypes);
+  };
+  /** @hidden */
+  render() {
+    const {
+      records,
+      fields,
+      view,
+      attachmentCoverField,
+      className,
+      style
+    } = this.props;
+    const itemData = {
+      records,
+      fields,
+      view,
+      width: this.state.cardListWidth - 2 * RECORD_CARD_SPACING - (this.state.isScrollbarVisible ? this._scrollbarWidth : 0),
+      attachmentCoverField,
+      onClick: this.props.onRecordClick,
+      onMouseEnter: this.props.onRecordMouseEnter ?? null,
+      onMouseLeave: this.props.onRecordMouseLeave ?? null,
+      style: {},
+      className: ''
+    };
+    return /*#__PURE__*/React.createElement(_box.default, {
+      ref: this._container,
+      className: className,
+      overflow: "hidden",
+      height: "100%",
+      style: style
+    }, /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
+      outerRef: this._cardList,
+      width: this.state.cardListWidth,
+      height: this.state.cardListHeight,
+      innerElementType: innerRecordCardListWindow,
+      innerRef: this._cardListInnerWindow,
+      itemData: itemData,
+      itemCount: this.props.records.length,
+      itemKey: (index, data) => data.records[index].id,
+      itemSize: RECORD_CARD_ROW_HEIGHT + RECORD_CARD_SPACING,
+      onScroll: this.props.onScroll
+    },
+    // TODO(alex): figure out why this needs a cast to any - something to do with prop-types?
+    RecordCardItemRenderer));
+  }
+}
+exports.RecordCardList = RecordCardList;
+var _default = exports.default = (0, _with_styled_system.default)(RecordCardList, styleParser);