@airtable/blocks 0.0.0-experimental-20e3506bd-20250428

package/dist/cjs/interface/models/record_store.js

@@ -0,0 +1,83 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.iterator.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.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.RecordStore = void 0;
+require("core-js/modules/es.string.starts-with.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 _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+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 _record_store_core = _interopRequireWildcard(require("../../shared/models/record_store_core"));
+var _private_utils = require("../../shared/private_utils");
+var _record = require("./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 _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; }
+var WatchableRecordStoreKeys = Object.freeze(_objectSpread(_objectSpread({}, _record_store_core.WatchableRecordStoreKeysCore), {}, {
+  recordOrder: 'recordOrder'
+}));
+
+/**
+ * The string case is to accommodate prefix keys
+ *
+ * @internal
+ */
+/**
+ * One RecordStore exists per table, and contains all the record data associated with that table.
+ * Table itself is for schema information only, so isn't the appropriate place for this data.
+ *
+ * @internal
+ */
+var RecordStore = exports.RecordStore = /*#__PURE__*/function (_RecordStoreCore) {
+  function RecordStore() {
+    (0, _classCallCheck2.default)(this, RecordStore);
+    return _callSuper(this, RecordStore, arguments);
+  }
+  (0, _inherits2.default)(RecordStore, _RecordStoreCore);
+  return (0, _createClass2.default)(RecordStore, [{
+    key: "_constructRecord",
+    value: function _constructRecord(recordId, parentTable) {
+      return new _record.Record(this._sdk, this, parentTable, recordId);
+    }
+
+    /**
+     * The record Ids in this table.
+     */
+  }, {
+    key: "recordIds",
+    get: function get() {
+      return this._data.recordOrder;
+    }
+  }, {
+    key: "triggerOnChangeForDirtyPaths",
+    value: function triggerOnChangeForDirtyPaths(dirtyPaths) {
+      (0, _get2.default)((0, _getPrototypeOf2.default)(RecordStore.prototype), "triggerOnChangeForDirtyPaths", this).call(this, dirtyPaths);
+      if (dirtyPaths.recordOrder) {
+        this._onChange(WatchableRecordStoreKeys.recordOrder);
+      }
+    }
+  }], [{
+    key: "_isWatchableKey",
+    value: function _isWatchableKey(key) {
+      return (0, _private_utils.isEnumValue)(WatchableRecordStoreKeys, key) || key.startsWith(_record_store_core.WatchableCellValuesInFieldKeyPrefix);
+    }
+  }]);
+}(_record_store_core.default);
+(0, _defineProperty2.default)(RecordStore, "_className", 'RecordStore');

package/dist/cjs/interface/models/session.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Session = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+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 _session_core = require("../../shared/models/session_core");
+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; })(); }
+/**
+ * Model class representing the current user's session.
+ *
+ * @example
+ * ```js
+ * import {useSession} from '@airtable/blocks/interface/ui';
+ *
+ * function Username() {
+ *     const session = useSession();
+ *
+ *     if (session.currentUser !== null) {
+ *         return <span>The current user's name is {session.currentUser.name}</span>;
+ *     } else {
+ *         return <span>This extension is being viewed in a public share</span>;
+ *     }
+ * }
+ * ```
+ * @docsPath models/Session
+ */
+var Session = exports.Session = /*#__PURE__*/function (_SessionCore) {
+  function Session() {
+    (0, _classCallCheck2.default)(this, Session);
+    return _callSuper(this, Session, arguments);
+  }
+  (0, _inherits2.default)(Session, _SessionCore);
+  return (0, _createClass2.default)(Session);
+}(_session_core.SessionCore);

package/dist/cjs/interface/models/table.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+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 _table_core = require("../../shared/models/table_core");
+var _field = require("./field");
+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; })(); }
+/**
+ * Model class representing a table. Every {@link Base} has one or more tables.
+ *
+ * @example
+ * ```js
+ * import {useBase} from '@airtable/blocks/interface/ui';
+ *
+ * function App() {
+ *     const base = useBase();
+ *     const table = base.getTables()[0];
+ *     if (table) {
+ *         console.log('The name of this table is', table.name);
+ *     }
+ * }
+ * ```
+ * @docsPath models/Table
+ */
+var Table = exports.Table = /*#__PURE__*/function (_TableCore) {
+  function Table() {
+    (0, _classCallCheck2.default)(this, Table);
+    return _callSuper(this, Table, arguments);
+  }
+  (0, _inherits2.default)(Table, _TableCore);
+  return (0, _createClass2.default)(Table, [{
+    key: "_constructField",
+    value: /** @internal */
+    function _constructField(fieldId) {
+      return new _field.Field(this.parentBase.__sdk, this, fieldId);
+    }
+  }]);
+}(_table_core.TableCore);

package/dist/cjs/interface/sdk.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InterfaceBlockSdk = void 0;
+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 _sdk_core = require("../shared/sdk_core");
+var _session = require("./models/session");
+var _mutations = require("./models/mutations");
+var _base = require("./models/base");
+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; })(); }
+// /** Add hidden annotation if uncommenting */
+// type UpdateBatcher = (applyUpdates: () => void) => void;
+// /** Add internal annotation if uncommenting */
+// function defaultUpdateBatcher(applyUpdates: () => void) {
+//     applyUpdates();
+// }
+/** @hidden */
+var InterfaceBlockSdk = exports.InterfaceBlockSdk = /*#__PURE__*/function (_BlockSdkCore) {
+  function InterfaceBlockSdk(airtableInterface) {
+    var _this;
+    (0, _classCallCheck2.default)(this, InterfaceBlockSdk);
+    _this = _callSuper(this, InterfaceBlockSdk, [airtableInterface]);
+    _this._registerHandlers();
+    return _this;
+  }
+  /** @internal */
+  (0, _inherits2.default)(InterfaceBlockSdk, _BlockSdkCore);
+  return (0, _createClass2.default)(InterfaceBlockSdk, [{
+    key: "_constructSession",
+    value: function _constructSession() {
+      return new _session.Session(this);
+    }
+    /** @internal */
+  }, {
+    key: "_constructBase",
+    value: function _constructBase() {
+      return new _base.Base(this);
+    }
+    /** @internal */
+  }, {
+    key: "_constructMutations",
+    value: function _constructMutations() {
+      return new _mutations.Mutations(this, this.session, this.base, changes => this.__applyModelChanges(changes), updates => this.__applyGlobalConfigUpdates(updates));
+    }
+    /** @internal */
+  }, {
+    key: "_registerHandlers",
+    value: function _registerHandlers() {
+      // base
+      this.__airtableInterface.subscribeToModelUpdates(_ref => {
+        var changes = _ref.changes;
+        this.__applyModelChanges(changes);
+      });
+
+      // global config
+      this.__airtableInterface.subscribeToGlobalConfigUpdates(_ref2 => {
+        var updates = _ref2.updates;
+        this.__applyGlobalConfigUpdates(updates);
+      });
+    }
+    /** @internal */
+  }, {
+    key: "__applyModelChanges",
+    value: function __applyModelChanges(changes) {
+      // this._runWithUpdateBatching(() => {
+      var changedBasePaths = this.base.__applyChangesWithoutTriggeringEvents(changes);
+      var changedSessionKeys = this.session.__applyChangesWithoutTriggeringEvents(changes);
+      this.base.__triggerOnChangeForChangedPaths(changedBasePaths);
+      this.session.__triggerOnChangeForChangedKeys(changedSessionKeys);
+      // });
+    }
+    /** @internal */
+  }, {
+    key: "__applyGlobalConfigUpdates",
+    value: function __applyGlobalConfigUpdates(updates) {
+      // this._runWithUpdateBatching(() => {
+      this.globalConfig.__setMultipleKvPaths(updates);
+      // });
+    }
+
+    // /** @internal */
+    // __setBatchedUpdatesFn(newUpdateBatcher: UpdateBatcher) {
+    //     this._runWithUpdateBatching = newUpdateBatcher;
+    // }
+
+    /**
+     * @internal
+     */
+  }, {
+    key: "__appInterface",
+    get: function get() {
+      return this.base._baseData.appInterface;
+    }
+
+    /** @hidden */
+  }, {
+    key: "getBlockRunContext",
+    value: function getBlockRunContext() {
+      return this.__airtableInterface.sdkInitData.runContext;
+    }
+
+    /**
+     * @internal
+     */
+  }, {
+    key: "setCustomPropertiesAsync",
+    value: function setCustomPropertiesAsync(properties) {
+      return this.__airtableInterface.setCustomPropertiesAsync(properties);
+    }
+  }]);
+}(_sdk_core.BlockSdkCore);

package/dist/cjs/interface/types/airtable_interface.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockRunContextType = exports.BlockInstallationPageElementCustomPropertyTypeForAirtableInterface = void 0;
+// BlockRunContextType, BlockInstallationPageBlockRunContext, BlockRunContext
+// must be kept in sync with block_run_context.tsx in hyperbase repo
+/** @hidden */
+var BlockRunContextType = exports.BlockRunContextType = /*#__PURE__*/function (BlockRunContextType) {
+  BlockRunContextType["PAGE_ELEMENT_IN_QUERY_CONTAINER"] = "pageElementInQueryContainer";
+  return BlockRunContextType;
+}({});
+/** @hidden */
+/** @hidden */
+/** @hidden */
+// Keep in sync with enum in hyperbase repo:
+// https://github.com/Hyperbase/hyperbase/blob/2c0e2ef2cbc6bce7ab33fd913ef3572a83c3892d/client_server_shared/pages/types/block_installation_page_elements/block_installation_page_element_custom_properties_types.tsx
+/** @hidden */
+var BlockInstallationPageElementCustomPropertyTypeForAirtableInterface = exports.BlockInstallationPageElementCustomPropertyTypeForAirtableInterface = /*#__PURE__*/function (BlockInstallationPageElementCustomPropertyTypeForAirtableInterface) {
+  BlockInstallationPageElementCustomPropertyTypeForAirtableInterface["BOOLEAN"] = "boolean";
+  BlockInstallationPageElementCustomPropertyTypeForAirtableInterface["STRING"] = "string";
+  BlockInstallationPageElementCustomPropertyTypeForAirtableInterface["ENUM"] = "enum";
+  BlockInstallationPageElementCustomPropertyTypeForAirtableInterface["FIELD_ID"] = "fieldId";
+  return BlockInstallationPageElementCustomPropertyTypeForAirtableInterface;
+}({}); // Keep in sync with type in hyperbase repo:
+// https://github.com/Hyperbase/hyperbase/blob/2c0e2ef2cbc6bce7ab33fd913ef3572a83c3892d/client_server_shared/pages/types/block_installation_page_elements/block_installation_page_element_custom_properties_types.tsx
+/** @hidden */
+/**
+ * AirtableInterface is designed as the communication interface between the
+ * Block SDK and Airtable. The mechanism through which we communicate with Airtable
+ * depends on the context in which the block is running (i.e. frontend or backend),
+ * but the interface should remain consistent.
+ *
+ * @hidden
+ */

package/dist/cjs/interface/types/base.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/interface/types/mutations.js

@@ -0,0 +1,24 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.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/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MutationTypes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mutations_core = require("../../shared/types/mutations_core");
+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; }
+/** @hidden */
+var MutationTypes = exports.MutationTypes = Object.freeze(_objectSpread({}, _mutations_core.MutationTypesCore));
+
+/** @hidden */
+
+/** @hidden */
+
+/** @hidden */

package/dist/cjs/interface/types/record.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/interface/types/table.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/interface/ui/block_wrapper.js

@@ -0,0 +1,61 @@
+"use strict";
+
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.weak-map.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockWrapper = void 0;
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var React = _interopRequireWildcard(require("react"));
+var _emotion = require("emotion");
+var _loader = _interopRequireDefault(require("../../shared/ui/loader"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _templateObject, _templateObject2, _templateObject3;
+/** @hidden */
+/** */
+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 _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; })(); }
+var suspenseFallbackClassName = (0, _emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n    -webkit-align-items: center;\n    -ms-flex-align: center;\n    -ms-grid-row-align: center;\n    align-items: center;\n    -webkit-box-pack: center;\n    -webkit-justify-content: center;\n    -ms-flex-pack: center;\n    justify-content: center;\n"])));
+var spinScale = (0, _emotion.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    0% {\n        transform: rotate(0) scale(1);\n    }\n    50% {\n        transform: rotate(360deg) scale(0.9);\n    }\n    100% {\n        transform: rotate(720deg) scale(1);\n    }\n"])));
+var animateSpinnerClassName = (0, _emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-duration: 1800ms;\n    animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n"])), spinScale);
+var BlockWrapper = exports.BlockWrapper = /*#__PURE__*/function (_React$Component) {
+  function BlockWrapper() {
+    var _this;
+    (0, _classCallCheck2.default)(this, BlockWrapper);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, BlockWrapper, [...args]);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_minSizeBeforeRender", null);
+    return _this;
+  }
+  (0, _inherits2.default)(BlockWrapper, _React$Component);
+  return (0, _createClass2.default)(BlockWrapper, [{
+    key: "render",
+    value: /** @hidden */
+    function render() {
+      return /*#__PURE__*/React.createElement(_sdk_context.SdkContext.Provider, {
+        value: this.props.sdk
+      }, /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: /*#__PURE__*/React.createElement("div", {
+          className: suspenseFallbackClassName
+        }, /*#__PURE__*/React.createElement(_loader.default, {
+          className: animateSpinnerClassName
+        }))
+      }, this.props.children));
+    }
+  }]);
+}(React.Component);

package/dist/cjs/interface/ui/expand_record.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expandRecord = expandRecord;
+/** @module @airtable/blocks/interface/ui: expandRecord */ /** */
+
+/**
+ * Expands the given record in the Airtable UI.
+ *
+ * @param record The record to expand.
+ *
+ * @example
+ * ```js
+ * import {expandRecord} from '@airtable/blocks/interface/ui';
+ * expandRecord(record);
+ * ```
+ * @docsPath UI/utils/expandRecord
+ */
+function expandRecord(record) {
+  // TODO(kasra): this will cause the liveapp page to force a refresh if the
+  // tableId and recordId are both valid, but the recordId does not
+  // exist in the table.
+  record.parentTable.parentBase.__sdk.__airtableInterface.expandRecord(record.parentTable.id, record.id);
+}

package/dist/cjs/interface/ui/initialize_block.js

@@ -0,0 +1,98 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.__injectSdkIntoInitializeBlock = __injectSdkIntoInitializeBlock;
+exports.__resetHasBeenInitialized = __resetHasBeenInitialized;
+exports.initializeBlock = initializeBlock;
+var React = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _error_utils = require("../../shared/error_utils");
+var _airtable_interface = _interopRequireDefault(require("../../injected/airtable_interface"));
+var _airtable_interface2 = require("../types/airtable_interface");
+var _block_wrapper = require("./block_wrapper");
+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; }
+/** @module @airtable/blocks/ui: initializeBlock */ /** */
+
+var hasBeenInitialized = false;
+
+/** */
+
+/** @hidden */
+
+/**
+ * `initializeBlock` takes the top-level React component in your tree and renders it. It is conceptually similar to `ReactDOM.render`, but takes care of some Extensions-specific things.
+ *
+ * @param entryPoints An object with an `interface` property which is a function that returns your React Node.
+ *
+ * @example
+ * ```js
+ * import {initializeBlock} from '@airtable/blocks/interface/ui';
+ * import React from 'react';
+ *
+ * function App() {
+ *     return (
+ *         <div>Hello world 🚀</div>
+ *     );
+ * }
+ *
+ * initializeBlock({interface: () => <App />});
+ * ```
+ * @docsPath UI/utils/initializeBlock
+ * @internal
+ */
+function initializeBlock(entryPoints) {
+  var body = typeof document !== 'undefined' ? document.body : null;
+  if (!body) {
+    throw (0, _error_utils.spawnError)('initializeBlock should only be called from browser environments');
+  }
+  if (hasBeenInitialized) {
+    throw (0, _error_utils.spawnError)('initializeBlock should only be called once');
+  }
+  hasBeenInitialized = true;
+  var airtableInterface = (0, _airtable_interface.default)();
+  var entryElement;
+  var runContext = airtableInterface.sdkInitData.runContext;
+  switch (runContext.type) {
+    case _airtable_interface2.BlockRunContextType.PAGE_ELEMENT_IN_QUERY_CONTAINER:
+      {
+        if (entryPoints.interface === undefined) {
+          throw (0, _error_utils.spawnError)('If running an extension within the interface, it must have a interface initialization function');
+        }
+        if (typeof entryPoints.interface !== 'function') {
+          throw (0, _error_utils.spawnError)('initializeBlock must contain a interface function that returns a React element');
+        }
+        entryElement = entryPoints.interface();
+        break;
+      }
+    default:
+      throw (0, _error_utils.spawnError)('Invalid context to run ');
+  }
+  if (! /*#__PURE__*/React.isValidElement(entryElement)) {
+    throw (0, _error_utils.spawnError)("The first argument to initializeBlock didn't return a valid React element");
+  }
+  var container = document.createElement('div');
+  body.appendChild(container);
+  _reactDom.default.render( /*#__PURE__*/React.createElement(_block_wrapper.BlockWrapper, {
+    sdk: sdk
+  }, entryElement), container);
+}
+var sdk;
+
+// The application-level Sdk instance must be injected dynamically to avoid
+// circular dependencies at the time of module resolution.
+function __injectSdkIntoInitializeBlock(_sdk) {
+  sdk = _sdk;
+}
+
+// Exclusively for tests
+function __resetHasBeenInitialized() {
+  hasBeenInitialized = false;
+}

package/dist/cjs/interface/ui/ui.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "colorUtils", {
+  enumerable: true,
+  get: function get() {
+    return _color_utils.default;
+  }
+});
+Object.defineProperty(exports, "colors", {
+  enumerable: true,
+  get: function get() {
+    return _colors.default;
+  }
+});
+Object.defineProperty(exports, "expandRecord", {
+  enumerable: true,
+  get: function get() {
+    return _expand_record.expandRecord;
+  }
+});
+Object.defineProperty(exports, "initializeBlock", {
+  enumerable: true,
+  get: function get() {
+    return _initialize_block.initializeBlock;
+  }
+});
+Object.defineProperty(exports, "useBase", {
+  enumerable: true,
+  get: function get() {
+    return _use_base.useBase;
+  }
+});
+Object.defineProperty(exports, "useCustomProperties", {
+  enumerable: true,
+  get: function get() {
+    return _use_custom_properties.useCustomProperties;
+  }
+});
+Object.defineProperty(exports, "useGlobalConfig", {
+  enumerable: true,
+  get: function get() {
+    return _use_global_config.default;
+  }
+});
+Object.defineProperty(exports, "useLoadable", {
+  enumerable: true,
+  get: function get() {
+    return _use_loadable.default;
+  }
+});
+Object.defineProperty(exports, "useRecords", {
+  enumerable: true,
+  get: function get() {
+    return _use_records.useRecords;
+  }
+});
+Object.defineProperty(exports, "useRunInfo", {
+  enumerable: true,
+  get: function get() {
+    return _use_run_info.useRunInfo;
+  }
+});
+Object.defineProperty(exports, "useSession", {
+  enumerable: true,
+  get: function get() {
+    return _use_session.useSession;
+  }
+});
+Object.defineProperty(exports, "useSynced", {
+  enumerable: true,
+  get: function get() {
+    return _use_synced.default;
+  }
+});
+Object.defineProperty(exports, "useWatchable", {
+  enumerable: true,
+  get: function get() {
+    return _use_watchable.default;
+  }
+});
+Object.defineProperty(exports, "withHooks", {
+  enumerable: true,
+  get: function get() {
+    return _with_hooks.default;
+  }
+});
+require("..");
+var _expand_record = require("./expand_record");
+var _initialize_block = require("./initialize_block");
+var _use_base = require("./use_base");
+var _use_custom_properties = require("./use_custom_properties");
+var _use_records = require("./use_records");
+var _use_run_info = require("./use_run_info");
+var _use_session = require("./use_session");
+var _use_global_config = _interopRequireDefault(require("../../shared/ui/use_global_config"));
+var _use_loadable = _interopRequireDefault(require("../../shared/ui/use_loadable"));
+var _use_synced = _interopRequireDefault(require("../../shared/ui/use_synced"));
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
+var _colors = _interopRequireDefault(require("../../shared/colors"));
+var _color_utils = _interopRequireDefault(require("../../shared/color_utils"));