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

package/dist/esm/base/ui/base_provider.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { SdkContext } from '../../shared/ui/sdk_context';
+
+/**
+ * Props for the {@link BaseProvider} component.
+ *
+ * @docsPath UI/components/BaseProvider
+ */
+
+/**
+ * A React Provider which allows Components to be rendered outside of an App's
+ * React tree.
+ *
+ * @example
+ * ```js
+ * import React from 'react';
+ * import ReactDOM from 'react-dom';
+ * import {BaseProvider} from '@airtable/blocks/base/ui';
+ *
+ * function getHtmlStringForRecordCard(base, record) {
+ *     return ReactDOM.renderToStaticMarkup(
+ *         <BaseProvider value={base}>
+ *             <RecordCard record={record} />
+ *         </BaseProvider>
+ *     );
+ * }
+ * ```
+ * @docsPath UI/components/BaseProvider
+ * @component
+ */
+function BaseProvider(props) {
+  const {
+    value,
+    children
+  } = props;
+  const sdk = value.__sdk;
+  return /*#__PURE__*/React.createElement(SdkContext.Provider, {
+    value: sdk
+  }, children);
+}
+export default BaseProvider;

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

@@ -0,0 +1,143 @@
+/** @hidden */ /** */
+import * as React from 'react';
+import { SdkContext } from '../../shared/ui/sdk_context';
+import Loader from '../../shared/ui/loader';
+import { globalAlert, useWatchable } from './ui';
+import { getCssContentToAddToHead, BUTTON_LINK_CLASS_NAME, 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 wrapperStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  overflow: 'hidden'
+};
+const fullscreenMessageStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '1rem',
+  backgroundColor: '#ffffff',
+  zIndex: 2147483647 // largest 32-bit signed integer (maximum z-index)
+};
+const animateSpinnerStyle = {
+  animationIterationCount: 'infinite',
+  animationName: SPIN_SCALE_ANIMATION_NAME,
+  animationDuration: '1800ms',
+  animationTimingFunction: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'
+};
+export default function BlockWrapper(props) {
+  const {
+    sdk,
+    children
+  } = props;
+  const [globalAlertInfoIfExists, setGlobalAlertInfoIfExists] = React.useState(null);
+  React.useEffect(() => {
+    // Once we have a global alert info, we don't need to watch for changes. The
+    // global alert will display until the page is reloaded.
+    if (globalAlertInfoIfExists) {
+      return () => {};
+    }
+
+    // Although we call globalAlert.watch('__alertInfo', ..) below, this will only
+    // start watching after the component is mounted. If some child component called
+    // globalAlert.showReloadPrompt in its constructor or useEffect (recall that child
+    // useEffects run before parent useEffects), then __alertInfo would be set before
+    // we start watching it here. Therefore explicitly check if __alertInfo is set.
+    if (globalAlert.__alertInfo) {
+      setGlobalAlertInfoIfExists(globalAlert.__alertInfo);
+    }
+
+    // Watch for changes to the global alert info.
+    const onAlertInfoChange = a => setGlobalAlertInfoIfExists(a.__alertInfo);
+    globalAlert.watch('__alertInfo', onAlertInfoChange);
+    return () => {
+      globalAlert.unwatch('__alertInfo', onAlertInfoChange);
+    };
+  }, [globalAlertInfoIfExists]);
+  const viewport = sdk.viewport;
+  useWatchable(viewport, ['size', 'minSize']);
+  // Although we watch for changes to minSize above, if a child component
+  // sets minSize in its constructor or useEffect, it can change before useWatchable
+  // has a chance to set up watches.
+  // To get around this, we take a snapshot of the minSize before render and call
+  // .forceUpdate() if its changed after render.
+  const minSizeBeforeFirstRender = React.useRef(viewport.minSize);
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  React.useEffect(() => {
+    if (minSizeBeforeFirstRender.current) {
+      const prevMinSize = minSizeBeforeFirstRender.current;
+      minSizeBeforeFirstRender.current = null;
+      const currentMinSize = viewport.minSize;
+      if (currentMinSize.width !== prevMinSize.width || currentMinSize.height !== prevMinSize.height) {
+        forceUpdate();
+      }
+    }
+  }, [viewport]);
+  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);
+      }
+    };
+  }, []);
+  if (globalAlertInfoIfExists) {
+    return /*#__PURE__*/React.createElement(SdkContext.Provider, {
+      value: sdk
+    }, /*#__PURE__*/React.createElement("div", {
+      style: fullscreenMessageStyle
+    }, globalAlertInfoIfExists.content));
+  }
+  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
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    style: viewport.isSmallerThanMinSize ? wrapperStyle : undefined
+  }, children)), viewport.isSmallerThanMinSize && /*#__PURE__*/React.createElement(MakeBiggerOrFullscreenMessage, {
+    viewport: viewport
+  }));
+}
+function MakeBiggerOrFullscreenMessage(_ref) {
+  let {
+    viewport
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    style: fullscreenMessageStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      textAlign: 'center',
+      lineHeight: 1.5,
+      opacity: 0.75,
+      fontWeight: 500
+    }
+  }, /*#__PURE__*/React.createElement("span", null, "Please make this extension bigger or "), /*#__PURE__*/React.createElement("span", {
+    className: BUTTON_LINK_CLASS_NAME,
+    onClick: () => viewport.enterFullscreenIfPossible()
+  }, "fullscreen")));
+}

package/dist/esm/base/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 default function CellRenderer(props) {
+  return /*#__PURE__*/React.createElement(CellRendererSharedImpl, props);
+}

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

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /** @module @airtable/blocks/ui: expandRecord */ /** */
 
 /**
@@ -36,4 +30,4 @@ function expandRecord(record, opts) {
   }
   record.parentTable.parentBase.__sdk.__airtableInterface.expandRecord(record.parentTable.id, record.id, recordIds);
 }
-var _default = exports.default = expandRecord;
+export default expandRecord;

package/dist/{cjs → esm}/base/ui/expand_record_list.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _error_utils = require("../../shared/error_utils");
 /** @module @airtable/blocks/ui: expandRecordList */ /** */
+import { invariant } from '../../shared/error_utils';
 
 /**
  * Options object for expanding a record list.
@@ -34,13 +28,13 @@ function expandRecordList(records, opts) {
   }
   const tableId = records[0].parentTable.id;
   const recordIds = records.map(record => {
-    (0, _error_utils.invariant)(record.parentTable.id === tableId, 'all records must belong to the same table');
+    invariant(record.parentTable.id === tableId, 'all records must belong to the same table');
     return record.id;
   });
   const fieldIds = opts && opts.fields ? opts.fields.map(field => {
-    (0, _error_utils.invariant)(field.parentTable.id === tableId, 'all fields must belong to the same table');
+    invariant(field.parentTable.id === tableId, 'all fields must belong to the same table');
     return field.id;
   }) : null;
   records[0].parentTable.parentBase.__sdk.__airtableInterface.expandRecordList(tableId, recordIds, fieldIds);
 }
-var _default = exports.default = expandRecordList;
+export default expandRecordList;

package/dist/{cjs → esm}/base/ui/expand_record_picker_async.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _error_utils = require("../../shared/error_utils");
 /** @module @airtable/blocks/ui: expandRecordPickerAsync */ /** */
+import { invariant } from '../../shared/error_utils';
 
 /**
  * Options object for expanding a record picker.
@@ -49,11 +43,11 @@ async function expandRecordPickerAsync(records, opts) {
   const tableId = records[0].parentTable.id;
   const sdk = records[0].parentTable.parentBase.__sdk;
   const recordIds = records.map(record => {
-    (0, _error_utils.invariant)(record.parentTable.id === tableId, 'all records must belong to the same table');
+    invariant(record.parentTable.id === tableId, 'all records must belong to the same table');
     return record.id;
   });
   const fieldIds = opts && opts.fields ? opts.fields.map(field => {
-    (0, _error_utils.invariant)(field.parentTable.id === tableId, 'all fields must belong to the same table');
+    invariant(field.parentTable.id === tableId, 'all fields must belong to the same table');
     return field.id;
   }) : null;
   const shouldAllowCreatingRecord = !!opts && !!opts.shouldAllowCreatingRecord;
@@ -68,4 +62,4 @@ async function expandRecordPickerAsync(records, opts) {
   }
   return sdk.base.__getRecordStore(table.id).getRecordByIdIfExists(chosenRecordId);
 }
-var _default = exports.default = expandRecordPickerAsync;
+export default expandRecordPickerAsync;

package/dist/esm/base/ui/global_alert.js

@@ -0,0 +1,65 @@
+/** @hidden */ /** */
+import * as React from 'react';
+import { isEnumValue } from '../../shared/private_utils';
+import Watchable from '../../shared/watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import { BUTTON_LINK_CLASS_NAME } from './global_css_helpers';
+const WatchableGlobalAlertKeys = Object.freeze({
+  __alertInfo: '__alertInfo'
+});
+/** @hidden */
+
+/** @hidden */
+
+const GlobalAlertInfo = () => {
+  const sdk = useSdk();
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      textAlign: 'center',
+      lineHeight: 1.5,
+      fontWeight: 500
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: BUTTON_LINK_CLASS_NAME,
+    onClick: () => {
+      sdk.reload();
+    }
+  }, "Please reload"));
+};
+
+/**
+ * @hidden
+ * @example
+ * ```js
+ * import {globalAlert} from '@airtable/blocks/base/ui';
+ * globalAlert.showReloadPrompt();
+ * ```
+ */
+class GlobalAlert extends Watchable {
+  /** @internal */
+  static _className = 'GlobalAlert';
+  /** @internal */
+  static _isWatchableKey(key) {
+    return isEnumValue(WatchableGlobalAlertKeys, key);
+  }
+  /** @internal */
+
+  /** @hidden */
+  constructor() {
+    super();
+    this._alertInfo = null;
+    Object.seal(this);
+  }
+  /** @internal */
+  get __alertInfo() {
+    return this._alertInfo;
+  }
+  /** */
+  showReloadPrompt() {
+    this._alertInfo = {
+      content: /*#__PURE__*/React.createElement(GlobalAlertInfo, null)
+    };
+    this._onChange(WatchableGlobalAlertKeys.__alertInfo);
+  }
+}
+export default GlobalAlert;

package/dist/esm/base/ui/global_css_helpers.js

@@ -0,0 +1,28 @@
+export const SPIN_SCALE_ANIMATION_NAME = `spinScale_${Math.random().toString(36).substring(2, 11)}`;
+export const BUTTON_LINK_CLASS_NAME = `buttonLink_${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);
+        }
+    }
+`;
+const buttonLinkStyle = `
+    .${BUTTON_LINK_CLASS_NAME} {
+        cursor: pointer;
+        padding-bottom: 0.14rem;
+        border-bottom: 2px solid hsla(0, 0%, 0%, 0.1);
+    }
+    .${BUTTON_LINK_CLASS_NAME}:hover {
+        opacity: 1;
+    }
+`;
+export const getCssContentToAddToHead = () => {
+  return `${spinScaleKeyframesStyle}\n${buttonLinkStyle}`;
+};

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

@@ -0,0 +1,110 @@
+/** @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 */
+
+/** @hidden */
+
+/** @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 getEntryElement A function that returns your React Node.
+ *
+ * @example
+ * ```js
+ * import {initializeBlock} from '@airtable/blocks/base/ui';
+ * import React from 'react';
+ *
+ * function App() {
+ *     return (
+ *         <div>Hello world 🚀</div>
+ *     );
+ * }
+ *
+ * initializeBlock(() => <App />);
+ * ```
+ * @docsPath UI/utils/initializeBlock
+ */
+export function initializeBlock(getEntryElement) {
+  const entryPoints = typeof getEntryElement === 'function' ? {
+    dashboard: getEntryElement
+  } : getEntryElement;
+  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;
+  // runContext can be undefined if running from an old version client version (before 01/2021)
+  // TODO (SeanKeenan): Remove nullish coelescing once old clients are no longer a concern
+  const runContext = airtableInterface.sdkInitData.runContext ?? {
+    type: BlockRunContextType.DASHBOARD_APP
+  };
+  switch (runContext.type) {
+    case BlockRunContextType.DASHBOARD_APP:
+      {
+        if (entryPoints.dashboard === undefined) {
+          throw spawnError('If running an extension within the dashboard, it must have a dashboard initialization function');
+        }
+        if (typeof entryPoints.dashboard !== 'function') {
+          throw spawnError('initializeBlock must contain a dashboard function that returns a React element');
+        }
+        entryElement = entryPoints.dashboard();
+        break;
+      }
+    case BlockRunContextType.VIEW:
+      {
+        if (entryPoints.view === undefined) {
+          throw spawnError('If running an extension within a view, it must have a view initialization function');
+        }
+        if (typeof entryPoints.view !== 'function') {
+          throw spawnError('initializeBlock must contain a view function that returns a React element');
+        }
+        const table = sdk.base.getTableById(runContext.tableId);
+        const view = table.getViewById(runContext.viewId);
+        entryElement = entryPoints.view({
+          table,
+          view
+        });
+        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/base/ui/ui.js

@@ -0,0 +1,32 @@
+/** @ignore */
+import '../assert_run_context';
+import GlobalAlert from './global_alert';
+// Import the top-level entry point so that an Sdk instance is created from the
+// globally-available AirtableInterface instance. This is a requirement of
+// third-party App code. Consumers who cannot provide an implementation of
+// AirtableInterface may access a subset of the UI Components available here by
+// instead importing `unstable_standalone_ui`.
+import '..';
+export { default as BaseProvider } from './base_provider';
+export { initializeBlock } from './initialize_block';
+export { default as CellRenderer } from './cell_renderer';
+export { default as expandRecord } from './expand_record';
+export { default as expandRecordList } from './expand_record_list';
+export { default as expandRecordPickerAsync } from './expand_record_picker_async';
+export { default as GlobalAlert } from './global_alert';
+export { default as useLoadable } from './use_loadable';
+export { useColorScheme } from '../../shared/ui/use_color_scheme';
+export { useRecordIds, useRecords, useRecordById, useRecordQueryResult } from './use_records';
+export { default as useBase } from './use_base';
+export { default as useCursor } from './use_cursor';
+export { default as useSession } from './use_session';
+export { default as useSettingsButton } from './use_settings_button';
+export { default as useSynced } from '../../shared/ui/use_synced';
+export { default as useWatchable } from '../../shared/ui/use_watchable';
+export { default as useViewport } from './use_viewport';
+export { default as useGlobalConfig } from '../../shared/ui/use_global_config';
+export { default as useViewMetadata } from './use_view_metadata';
+export { default as useRecordActionData } from './use_record_action_data';
+export { registerRecordActionDataCallback } from '../perform_record_action';
+export * from './unstable_standalone_ui';
+export const globalAlert = new GlobalAlert();

package/dist/esm/base/ui/unstable_standalone_ui.js

@@ -0,0 +1,29 @@
+// // This module is maintained as an entry point for consumers who cannot provide
+// // an implementation of AirtableInterface. Unlike the larger `ui` module, this
+// // module can be imported without an AirtableInterface implementation (and the
+// // UI Components can function in such an environment).
+// export {default as Box} from './box';
+// export {default as Button} from './button';
+// export {default as ChoiceToken} from './choice_token';
+// export {default as CollaboratorToken} from './collaborator_token';
+// export {default as ColorPalette} from './color_palette';
+// export {default as ConfirmationDialog} from './confirmation_dialog';
+// export {default as Dialog} from './dialog';
+// export {default as FormField} from './form_field';
+// export {default as Heading} from './heading';
+// export {default as Icon} from './icon';
+// export {default as Input} from './input';
+// export {default as Label} from './label';
+// export {default as Link} from './link';
+// export {default as Loader} from './loader';
+// export {default as Modal} from './modal';
+// export {default as Popover} from './popover';
+export { default as colors } from '../../shared/colors';
+export { default as colorUtils } from '../../shared/color_utils';
+export { loadCSSFromString, loadCSSFromURLAsync, loadScriptFromURLAsync } from '../../shared/ui/remote_utils';
+// export {default as Select} from './select';
+// export {default as SelectButtons} from './select_buttons';
+// export {default as Switch} from './switch';
+// export {default as Text} from './text';
+// export {default as TextButton} from './text_button';
+// export {default as Tooltip} from './tooltip';

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

@@ -1,13 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _use_base = _interopRequireDefault(require("../../shared/ui/use_base"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/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
@@ -39,6 +33,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @hook
  */
 function useBase() {
-  return (0, _use_base.default)();
+  return useBaseInternal();
 }
-var _default = exports.default = useBase;
+export default useBase;

package/dist/{cjs → esm}/base/ui/use_cursor.js

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
-var _sdk_context = require("../../shared/ui/sdk_context");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useCursor */ /** */
 
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
 /**
  * A hook for connecting a React component to your base's cursor. This returns a {@link Cursor}
  * instance and will re-render your component whenever the active Table or active View changes.
@@ -40,8 +33,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const useCursor = () => {
   const {
     cursor
-  } = (0, _sdk_context.useSdk)();
-  (0, _use_watchable.default)(cursor, ['activeTableId', 'activeViewId']);
+  } = useSdk();
+  useWatchable(cursor, ['activeTableId', 'activeViewId']);
   return cursor;
 };
-var _default = exports.default = useCursor;
+export default useCursor;