@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-e625869e5-20251002

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,37 +1,38 @@
-"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";
+  BlockInstallationPageElementCustomPropertyTypeForAirtableInterface["TABLE_ID"] = "tableId";
   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
- * depends on the context in which the block is running (i.e. frontend or backend),
- * but the interface should remain consistent.
+ * Block SDK and Airtable.
  *
  * @hidden
  */

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,49 @@
+/** @hidden */ /** */
+import * as React from 'react';
+import Loader from '../../shared/ui/loader';
+import { SdkContext } from '../../shared/ui/sdk_context';
+import { getCssContentToAddToHead, SPIN_SCALE_ANIMATION_NAME } from './global_css_helpers';
+const suspenseFallbackStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+const animateSpinnerStyle = {
+  animationIterationCount: 'infinite',
+  animationName: SPIN_SCALE_ANIMATION_NAME,
+  animationDuration: '1800ms',
+  animationTimingFunction: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'
+};
+export const BlockWrapper = _ref => {
+  let {
+    sdk,
+    children
+  } = _ref;
+  React.useLayoutEffect(() => {
+    // Create a style element and inject the global CSS into document head
+    const styleElement = document.createElement('style');
+    styleElement.textContent = getCssContentToAddToHead();
+    document.head.appendChild(styleElement);
+
+    // Cleanup: remove the style element when component unmounts
+    return () => {
+      if (document.head.contains(styleElement)) {
+        document.head.removeChild(styleElement);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(SdkContext.Provider, {
+    value: sdk
+  }, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", {
+      style: suspenseFallbackStyle
+    }, /*#__PURE__*/React.createElement(Loader, {
+      style: animateSpinnerStyle
+    }))
+  }, children));
+};

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CellRenderer as CellRendererSharedImpl } from '../../shared/ui/cell_renderer';
+
+/**
+ * Props for the {@link CellRenderer} component.
+ *
+ * @docsPath UI/components/CellRenderer
+ * @noInheritDoc
+ */
+
+/**
+ * Displays the contents of a cell given a field and record.
+ *
+ * @component
+ * @docsPath UI/components/CellRenderer
+ */
+export function CellRenderer(props) {
+  return /*#__PURE__*/React.createElement(CellRendererSharedImpl, props);
+}

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/global_css_helpers.js

@@ -0,0 +1,17 @@
+export const SPIN_SCALE_ANIMATION_NAME = `spinScale_${Math.random().toString(36).substring(2, 11)}`;
+const spinScaleKeyframesStyle = `
+    @keyframes ${SPIN_SCALE_ANIMATION_NAME} {
+        0% {
+            transform: rotate(0) scale(1);
+        }
+        50% {
+            transform: rotate(360deg) scale(0.9);
+        }
+        100% {
+            transform: rotate(720deg) scale(1);
+        }
+    }
+`;
+export const getCssContentToAddToHead = () => {
+  return `${spinScaleKeyframesStyle}`;
+};

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 { CellRenderer } from './cell_renderer';
+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 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();
 }