@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-3e47d4d04-20250909

package/dist/esm/interface/index.js

@@ -0,0 +1,16 @@
+import { __injectSdkIntoWarning } from '../shared/warning';
+import getAirtableInterface from '../injected/airtable_interface';
+import { InterfaceBlockSdk } from './sdk';
+import { __injectSdkIntoInitializeBlock } from './ui/initialize_block';
+
+/** @internal */
+export function __reset() {
+  const __sdk = new InterfaceBlockSdk(getAirtableInterface());
+
+  // The following injections are necessary to allow the referenced modules
+  // to be imported directly by consumer code while also avoiding cycles in
+  // the module dependency graph.
+  __injectSdkIntoInitializeBlock(__sdk);
+  __injectSdkIntoWarning(__sdk);
+}
+__reset();

package/dist/{cjs → esm}/interface/models/base.js

@@ -1,12 +1,7 @@
-"use strict";
+import { BaseCore } from '../../shared/models/base_core';
+import { Table } from './table';
+import { RecordStore } from './record_store';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Base = void 0;
-var _base_core = require("../../shared/models/base_core");
-var _table = require("./table");
-var _record_store = require("./record_store");
 /**
  * Model class representing a base.
  *
@@ -15,21 +10,20 @@ var _record_store = require("./record_store");
  *
  * @docsPath models/Base
  */
-class Base extends _base_core.BaseCore {
+export class Base extends BaseCore {
   /** @internal */
   _constructTable(tableId) {
     const recordStore = this.__getRecordStore(tableId);
-    return new _table.Table(this, recordStore, tableId, this._sdk);
+    return new Table(this, recordStore, tableId, this._sdk);
   }
 
   /** @internal */
   _constructRecordStore(sdk, tableId) {
-    return new _record_store.RecordStore(sdk, tableId);
+    return new RecordStore(sdk, tableId);
   }
 
   /** @internal */
   _iterateTableIds() {
     return Object.keys(this._data.tablesById);
   }
-}
-exports.Base = Base;
+}

package/dist/{cjs → esm}/interface/models/field.js

@@ -1,10 +1,5 @@
-"use strict";
+import { FieldCore } from '../../shared/models/field_core';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Field = void 0;
-var _field_core = require("../../shared/models/field_core");
 /**
  * Model class representing a field in a table.
  *
@@ -21,8 +16,7 @@ var _field_core = require("../../shared/models/field_core");
  * ```
  * @docsPath models/Field
  */
-class Field extends _field_core.FieldCore {
+export class Field extends FieldCore {
   /** @internal */
   static _className = 'Field';
-}
-exports.Field = Field;
+}

package/dist/esm/interface/models/models.js

@@ -0,0 +1,9 @@
+// istanbul ignore file
+/** @ignore */ /** */
+import '../assert_run_context';
+export { FieldType } from '../../shared/types/field_core';
+export { Base } from './base';
+export { Table } from './table';
+export { Field } from './field';
+export { Record } from './record';
+export { Session } from './session';

package/dist/{cjs → esm}/interface/models/mutations.js

@@ -1,13 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Mutations = void 0;
-var _mutations_core = require("../../shared/models/mutations_core");
-var _mutations = require("../types/mutations");
+import { MutationsCore } from '../../shared/models/mutations_core';
+import { MutationTypes } from '../types/mutations';
 /** @hidden */
-class Mutations extends _mutations_core.MutationsCore {
+export class Mutations extends MutationsCore {
   /** @internal */
   _isRecordStoreReadyForMutations() {
     return true;
@@ -28,7 +22,7 @@ class Mutations extends _mutations_core.MutationsCore {
   /** @internal */
   _getOptimisticModelChangesForMutation(mutation) {
     switch (mutation.type) {
-      case _mutations.MutationTypes.CREATE_MULTIPLE_RECORDS:
+      case MutationTypes.CREATE_MULTIPLE_RECORDS:
         {
           // Ideally, we'd add the recordIds to the `recordOrder` of the Table (see
           // how we optimistically remove from this in the DELETE_MULTIPLE_RECORDS
@@ -40,7 +34,7 @@ class Mutations extends _mutations_core.MutationsCore {
           // applied and liveapp sends an update to the recordOrder.
           return super._getOptimisticModelChangesForMutation(mutation);
         }
-      case _mutations.MutationTypes.DELETE_MULTIPLE_RECORDS:
+      case MutationTypes.DELETE_MULTIPLE_RECORDS:
         {
           const {
             tableId,
@@ -59,5 +53,4 @@ class Mutations extends _mutations_core.MutationsCore {
         }
     }
   }
-}
-exports.Mutations = Mutations;
+}

package/dist/{cjs → esm}/interface/models/record.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Record = void 0;
-var _error_utils = require("../../shared/error_utils");
-var _record_core = require("../../shared/models/record_core");
-var _field_core = require("../../shared/types/field_core");
+import { spawnError } from '../../shared/error_utils';
+import { RecordCore, WatchableRecordKeysCore } from '../../shared/models/record_core';
+import { FieldType } from '../../shared/types/field_core';
 const WatchableRecordKeys = Object.freeze({
-  ..._record_core.WatchableRecordKeysCore
+  ...WatchableRecordKeysCore
 });
 /**
  * Any key within record that can be watched:
@@ -23,7 +17,7 @@ const WatchableRecordKeys = Object.freeze({
  *
  * @docsPath models/Record
  */
-class Record extends _record_core.RecordCore {
+export class Record extends RecordCore {
   /** @internal */
   static _className = 'Record';
 
@@ -39,13 +33,12 @@ class Record extends _record_core.RecordCore {
   fetchForeignRecordsAsync(field, filterString) {
     const parentTable = this.parentTable;
     if (field.parentTable !== parentTable) {
-      throw (0, _error_utils.spawnError)('Field %s is not in the same table as the record', field.name);
+      throw spawnError('Field %s is not in the same table as the record', field.name);
     }
-    if (field.type !== _field_core.FieldType.MULTIPLE_RECORD_LINKS) {
-      throw (0, _error_utils.spawnError)('Field %s is not a multiple record links field', field.name);
+    if (field.type !== FieldType.MULTIPLE_RECORD_LINKS) {
+      throw spawnError('Field %s is not a multiple record links field', field.name);
     }
     const airtableInterface = this.parentTable.parentBase.__sdk.__airtableInterface;
     return airtableInterface.fetchForeignRecordsAsync(parentTable.id, this.id, field.id, filterString);
   }
-}
-exports.Record = Record;
+}

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

@@ -0,0 +1,42 @@
+import RecordStoreCore, { WatchableCellValuesInFieldKeyPrefix, WatchableRecordStoreKeysCore } from '../../shared/models/record_store_core';
+import { isEnumValue } from '../../shared/private_utils';
+import { Record } from './record';
+const WatchableRecordStoreKeys = Object.freeze({
+  ...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
+ */
+export class RecordStore extends RecordStoreCore {
+  static _className = 'RecordStore';
+  static _isWatchableKey(key) {
+    return isEnumValue(WatchableRecordStoreKeys, key) || key.startsWith(WatchableCellValuesInFieldKeyPrefix);
+  }
+  _constructRecord(recordId, parentTable) {
+    return new Record(this._sdk, this, parentTable, recordId);
+  }
+
+  /**
+   * The record Ids in this table.
+   */
+  get recordIds() {
+    return this._data.recordOrder;
+  }
+  triggerOnChangeForDirtyPaths(dirtyPaths) {
+    super.triggerOnChangeForDirtyPaths(dirtyPaths);
+    if (dirtyPaths.recordOrder) {
+      this._onChange(WatchableRecordStoreKeys.recordOrder);
+    }
+  }
+}

package/dist/{cjs → esm}/interface/models/session.js

@@ -1,10 +1,5 @@
-"use strict";
+import { SessionCore } from '../../shared/models/session_core';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Session = void 0;
-var _session_core = require("../../shared/models/session_core");
 /**
  * Model class representing the current user's session.
  *
@@ -24,5 +19,4 @@ var _session_core = require("../../shared/models/session_core");
  * ```
  * @docsPath models/Session
  */
-class Session extends _session_core.SessionCore {}
-exports.Session = Session;
+export class Session extends SessionCore {}

package/dist/{cjs → esm}/interface/models/table.js

@@ -1,12 +1,7 @@
-"use strict";
+import { TableCore } from '../../shared/models/table_core';
+import { FieldType } from '../../shared/types/field_core';
+import { Field } from './field';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Table = void 0;
-var _table_core = require("../../shared/models/table_core");
-var _field_core = require("../../shared/types/field_core");
-var _field = require("./field");
 /**
  * Model class representing a table. Every {@link Base} has one or more tables.
  *
@@ -24,10 +19,10 @@ var _field = require("./field");
  * ```
  * @docsPath models/Table
  */
-class Table extends _table_core.TableCore {
+export class Table extends TableCore {
   /** @internal */
   _constructField(fieldId) {
-    return new _field.Field(this.parentBase.__sdk, this, fieldId);
+    return new Field(this.parentBase.__sdk, this, fieldId);
   }
 
   /**
@@ -73,7 +68,7 @@ class Table extends _table_core.TableCore {
 
   /** @internal */
   _adjustCellValueForFieldIfNecessary(field, cellValue, onGenerateIdForNewForeignRecord) {
-    if (field.type !== _field_core.FieldType.MULTIPLE_RECORD_LINKS || !Array.isArray(cellValue)) {
+    if (field.type !== FieldType.MULTIPLE_RECORD_LINKS || !Array.isArray(cellValue)) {
       return cellValue;
     }
     return cellValue.map(item => {
@@ -93,5 +88,4 @@ class Table extends _table_core.TableCore {
       return item;
     });
   }
-}
-exports.Table = Table;
+}

package/dist/{cjs → esm}/interface/sdk.js

@@ -1,30 +1,24 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InterfaceBlockSdk = void 0;
-var _sdk_core = require("../shared/sdk_core");
-var _session = require("./models/session");
-var _mutations = require("./models/mutations");
-var _base = require("./models/base");
+import { BlockSdkCore } from '../shared/sdk_core';
+import { Session } from './models/session';
+import { Mutations } from './models/mutations';
+import { Base } from './models/base';
 /** @hidden */
-class InterfaceBlockSdk extends _sdk_core.BlockSdkCore {
+export class InterfaceBlockSdk extends BlockSdkCore {
   constructor(airtableInterface) {
     super(airtableInterface);
     this._registerHandlers();
   }
   /** @internal */
   _constructSession() {
-    return new _session.Session(this);
+    return new Session(this);
   }
   /** @internal */
   _constructBase() {
-    return new _base.Base(this);
+    return new Base(this);
   }
   /** @internal */
   _constructMutations() {
-    return new _mutations.Mutations(this, this.session, this.base, changes => this.__applyModelChanges(changes), updates => this.__applyGlobalConfigUpdates(updates));
+    return new Mutations(this, this.session, this.base, changes => this.__applyModelChanges(changes), updates => this.__applyGlobalConfigUpdates(updates));
   }
   /** @internal */
   _registerHandlers() {
@@ -74,5 +68,4 @@ class InterfaceBlockSdk extends _sdk_core.BlockSdkCore {
   setCustomPropertiesAsync(properties) {
     return this.__airtableInterface.setCustomPropertiesAsync(properties);
   }
-}
-exports.InterfaceBlockSdk = InterfaceBlockSdk;
+}

package/dist/{cjs → esm}/interface/types/airtable_interface.js

@@ -1,32 +1,34 @@
-"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 */
-let BlockRunContextType = exports.BlockRunContextType = /*#__PURE__*/function (BlockRunContextType) {
+export let BlockRunContextType = /*#__PURE__*/function (BlockRunContextType) {
   BlockRunContextType["PAGE_ELEMENT_IN_QUERY_CONTAINER"] = "pageElementInQueryContainer";
   return BlockRunContextType;
 }({});
+
 /** @hidden */
+
 /** @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 */
-let BlockInstallationPageElementCustomPropertyTypeForAirtableInterface = exports.BlockInstallationPageElementCustomPropertyTypeForAirtableInterface = /*#__PURE__*/function (BlockInstallationPageElementCustomPropertyTypeForAirtableInterface) {
+export let 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:
+}({});
+
+// 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

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/interface/types/field.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import { MutationTypesCore } from '../../shared/types/mutations_core';
+
+/** @hidden */
+export const MutationTypes = Object.freeze({
+  ...MutationTypesCore
+});
+
+/** @hidden */
+
+/** @hidden */
+
+/** @hidden */

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,58 @@
+/** @hidden */ /** */
+import * as React from 'react';
+import { css, keyframes } from 'emotion';
+import Loader from '../../shared/ui/loader';
+import { SdkContext } from '../../shared/ui/sdk_context';
+const suspenseFallbackClassName = css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    -ms-grid-row-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+`;
+const spinScale = keyframes`
+    0% {
+        transform: rotate(0) scale(1);
+    }
+    50% {
+        transform: rotate(360deg) scale(0.9);
+    }
+    100% {
+        transform: rotate(720deg) scale(1);
+    }
+`;
+const animateSpinnerClassName = css`
+    animation-iteration-count: infinite;
+    animation-name: ${spinScale};
+    animation-duration: 1800ms;
+    animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+`;
+export class BlockWrapper extends React.Component {
+  /** @internal */
+  _minSizeBeforeRender = null;
+  /** @hidden */
+  render() {
+    return /*#__PURE__*/React.createElement(SdkContext.Provider, {
+      value: this.props.sdk
+    }, /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement("div", {
+        className: suspenseFallbackClassName
+      }, /*#__PURE__*/React.createElement(Loader, {
+        className: animateSpinnerClassName
+      }))
+    }, this.props.children));
+  }
+}

package/dist/{cjs → esm}/interface/ui/expand_record.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.expandRecord = expandRecord;
 /** @module @airtable/blocks/interface/ui: expandRecord */ /** */
 
 /**
@@ -19,7 +13,7 @@ exports.expandRecord = expandRecord;
  * ```
  * @docsPath UI/utils/expandRecord
  */
-function expandRecord(record) {
+export 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.

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

@@ -0,0 +1,83 @@
+/** @module @airtable/blocks/ui: initializeBlock */ /** */
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { spawnError } from '../../shared/error_utils';
+import getAirtableInterface from '../../injected/airtable_interface';
+import { BlockRunContextType } from '../types/airtable_interface';
+import { BlockWrapper } from './block_wrapper';
+let 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
+ */
+export function initializeBlock(entryPoints) {
+  const body = typeof document !== 'undefined' ? document.body : null;
+  if (!body) {
+    throw spawnError('initializeBlock should only be called from browser environments');
+  }
+  if (hasBeenInitialized) {
+    throw spawnError('initializeBlock should only be called once');
+  }
+  hasBeenInitialized = true;
+  const airtableInterface = getAirtableInterface();
+  let entryElement;
+  const runContext = airtableInterface.sdkInitData.runContext;
+  switch (runContext.type) {
+    case BlockRunContextType.PAGE_ELEMENT_IN_QUERY_CONTAINER:
+      {
+        if (entryPoints.interface === undefined) {
+          throw spawnError('If running an extension within the interface, it must have a interface initialization function');
+        }
+        if (typeof entryPoints.interface !== 'function') {
+          throw spawnError('initializeBlock must contain a interface function that returns a React element');
+        }
+        entryElement = entryPoints.interface();
+        break;
+      }
+    default:
+      throw spawnError('Invalid context to run ');
+  }
+  if (! /*#__PURE__*/React.isValidElement(entryElement)) {
+    throw spawnError("The first argument to initializeBlock didn't return a valid React element");
+  }
+  const container = document.createElement('div');
+  container.style.height = '100%';
+  container.style.width = '100%';
+  body.appendChild(container);
+  createRoot(container).render( /*#__PURE__*/React.createElement(BlockWrapper, {
+    sdk: sdk
+  }, entryElement));
+}
+let sdk;
+
+// The application-level Sdk instance must be injected dynamically to avoid
+// circular dependencies at the time of module resolution.
+export function __injectSdkIntoInitializeBlock(_sdk) {
+  sdk = _sdk;
+}
+
+// Exclusively for tests
+export function __resetHasBeenInitialized() {
+  hasBeenInitialized = false;
+}

package/dist/esm/interface/ui/ui.js

@@ -0,0 +1,20 @@
+import '../assert_run_context';
+
+// Import the top-level entry point so that an Sdk instance is created from the
+// globally-available AirtableInterface instance.
+import '..';
+export { expandRecord } from './expand_record';
+export { initializeBlock } from './initialize_block';
+export { useBase } from './use_base';
+export { useColorScheme } from '../../shared/ui/use_color_scheme';
+export { useCustomProperties } from './use_custom_properties';
+export { useRecords } from './use_records';
+export { useRunInfo } from './use_run_info';
+export { useSession } from './use_session';
+export { default as useGlobalConfig } from '../../shared/ui/use_global_config';
+export { default as useSynced } from '../../shared/ui/use_synced';
+export { default as useWatchable } from '../../shared/ui/use_watchable';
+export { default as withHooks } from '../../shared/ui/with_hooks';
+export { default as colors } from '../../shared/colors';
+export { default as colorUtils } from '../../shared/color_utils';
+export { loadCSSFromString, loadCSSFromURLAsync, loadScriptFromURLAsync } from '../../shared/ui/remote_utils';

package/dist/{cjs → esm}/interface/ui/use_base.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useBase = useBase;
-var _use_base = _interopRequireDefault(require("../../shared/ui/use_base"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/interface/ui: useBase */ /** */
 
+import useBaseInternal from '../../shared/ui/use_base';
 /**
  * A hook for connecting a React component to your base's schema. This returns a {@link Base}
  * instance and will re-render your component whenever the base's schema changes. That means any
@@ -38,6 +31,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @docsPath UI/hooks/useBase
  * @hook
  */
-function useBase() {
-  return (0, _use_base.default)();
+export function useBase() {
+  return useBaseInternal();
 }