@airtable/blocks 0.0.0-experimental-3e47d4d04-20250909 → 0.0.0-experimental-e625869e5-20251002

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

@@ -41,9 +41,7 @@ export let BlockRunContextType = /*#__PURE__*/function (BlockRunContextType) {
 
 /**
  * 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/base/ui/block_wrapper.js

@@ -1,108 +1,143 @@
 /** @hidden */ /** */
 import * as React from 'react';
-import { invariant } from '../../shared/error_utils';
-import withHooks from '../../shared/ui/with_hooks';
-import useWatchable from '../../shared/ui/use_watchable';
 import { SdkContext } from '../../shared/ui/sdk_context';
-import { baymax } from './baymax_utils';
-import Modal from './modal';
-import Loader from './loader';
-import { globalAlert } from './ui';
-class BlockWrapper extends React.Component {
-  /** @internal */
-  _minSizeBeforeRender = null;
-  /** @hidden */
-  constructor(props) {
-    super(props);
+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 () => {};
+    }
 
-    // We watch globalAlert in constructor, instead of using createDataContainer,
-    // because createDataContainer starts watching after the component is mounted.
-    // If we used createDataContainer and some child component in its constructor or
-    // componentDidMount called globalAlert.showReloadPrompt, this component
-    // would not update.
-    // TODO(kasra): maybe change createDataContainer to handle this case
-    // without having to special case it.
-    globalAlert.watch('__alertInfo', () => this.forceUpdate());
-  }
-  /** @hidden */
-  UNSAFE_componentWillMount() {
-    this._snapshotMinSizeBeforeRender();
-  }
-  /** @hidden */
-  componentDidMount() {
-    this._checkMinSizeConstraintUnchangedAfterRender();
-  }
-  /** @hidden */
-  UNSAFE_componentWillUpdate() {
-    this._snapshotMinSizeBeforeRender();
-  }
-  /** @hidden */
-  componentDidUpdate() {
-    this._checkMinSizeConstraintUnchangedAfterRender();
-  }
-  // usually createDataContainer handles re-rendering when watchable values
-  // change. As minSize can be changed by child components though, it can
-  // change before createDataContainer 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
-  /** @internal */
-  _snapshotMinSizeBeforeRender() {
-    this._minSizeBeforeRender = this.props.sdk.viewport.minSize;
-  }
-  /** @internal */
-  _checkMinSizeConstraintUnchangedAfterRender() {
-    const prevMinSize = this._minSizeBeforeRender;
-    invariant(prevMinSize, 'prevMinSize must be set');
-    const currentMinSize = this.props.sdk.viewport.minSize;
-    if (currentMinSize.width !== prevMinSize.width || currentMinSize.height !== prevMinSize.height) {
-      this.forceUpdate();
+    // 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);
     }
-  }
-  /** @hidden */
-  render() {
-    const {
-      viewport
-    } = this.props.sdk;
-    const globalAlertInfo = globalAlert.__alertInfo;
-    if (globalAlertInfo) {
-      return /*#__PURE__*/React.createElement(SdkContext.Provider, {
-        value: this.props.sdk
-      }, /*#__PURE__*/React.createElement(Modal, {
-        className: baymax('absolute all-0 flex items-center justify-center p2'),
-        style: {
-          animation: 'none',
-          maxWidth: undefined,
-          maxHeight: undefined,
-          borderRadius: 0,
-          boxShadow: 'none'
-        }
-      }, globalAlertInfo.content));
+
+    // 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: this.props.sdk
-    }, /*#__PURE__*/React.createElement(React.Suspense, {
-      fallback: /*#__PURE__*/React.createElement("div", {
-        className: baymax('absolute all-0 flex items-center justify-center')
-      }, /*#__PURE__*/React.createElement(Loader, null))
+      value: sdk
     }, /*#__PURE__*/React.createElement("div", {
-      className: viewport.isSmallerThanMinSize ? baymax('absolute all-0 overflow-hidden') : ''
-    }, this.props.children)), viewport.isSmallerThanMinSize && /*#__PURE__*/React.createElement("div", {
-      className: baymax('absolute all-0 flex items-center justify-center p2 white'),
-      style: {
-        zIndex: 2147483647 // largest 32-bit signed integer (maximum z-index)
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      className: baymax('center line-height-4 quiet strong')
-    }, /*#__PURE__*/React.createElement("span", null, "Please make this extension bigger or "), /*#__PURE__*/React.createElement("span", {
-      className: baymax('pointer understroke link-unquiet'),
-      onClick: () => viewport.enterFullscreenIfPossible()
-    }, "fullscreen"))));
+      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
+  }));
 }
-export default withHooks(BlockWrapper, _ref => {
+function MakeBiggerOrFullscreenMessage(_ref) {
   let {
-    sdk
+    viewport
   } = _ref;
-  useWatchable(sdk.viewport, ['size', 'minSize']);
-  return {};
-});
+  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

@@ -1,34 +1,8 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/** @module @airtable/blocks/ui: CellRenderer */ /** */
-import { cx } from 'emotion';
 import * as React from 'react';
-import { compose } from '@styled-system/core';
-import { spawnError } from '../../shared/error_utils';
-import { FieldType } from '../../shared/types/field_core';
-import withHooks from '../../shared/ui/with_hooks';
-import useWatchable from '../../shared/ui/use_watchable';
-import { useSdk } from '../../shared/ui/sdk_context';
-import { display, maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
-import useStyledSystem from './use_styled_system';
-import { splitStyleProps } from './with_styled_system';
+import { CellRenderer as CellRendererSharedImpl } from '../../shared/ui/cell_renderer';
 
 /**
- * Style props for the {@link CellRenderer} component. Also accepts:
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link MaxWidthProps}
- * * {@link MinWidthProps}
- * * {@link PositionSetProps}
- * * {@link WidthProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(display, flexItemSet, margin, maxWidth, minWidth, positionSet, width);
-
-/**
- * Props for the {@link CellRenderer} component. Also accepts:
- * * {@link CellRendererStyleProps}
+ * Props for the {@link CellRenderer} component.
  *
  * @docsPath UI/components/CellRenderer
  * @noInheritDoc
@@ -37,154 +11,9 @@ const styleParser = compose(display, flexItemSet, margin, maxWidth, minWidth, po
 /**
  * Displays the contents of a cell given a field and record.
  *
- * [[ Story id="cellrenderer--example" title="Cell renderer example" ]]
- *
  * @component
  * @docsPath UI/components/CellRenderer
  */
-export class CellRenderer extends React.Component {
-  /** @hidden */
-  static defaultProps = {
-    shouldWrap: true
-  };
-
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this._validateProps(props);
-  }
-  /** @hidden */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this._validateProps(nextProps);
-  }
-  /** @internal */
-  _validateProps(props) {
-    if (props.record && !props.record.isDeleted && !props.field.isDeleted && props.record.parentTable.id !== props.field.parentTable.id) {
-      throw spawnError('CellRenderer: record %s and field %s do not have the same parent table', props.record.parentTable.id, props.field.parentTable.id);
-    }
-  }
-  /** @hidden */
-  render() {
-    const {
-      record,
-      cellValue,
-      field,
-      shouldWrap,
-      onMouseEnter,
-      onMouseLeave,
-      onClick,
-      className,
-      style,
-      cellClassName,
-      cellStyle,
-      renderInvalidCellValue,
-      sdk
-    } = this.props;
-    if (field.isDeleted) {
-      return null;
-    }
-    const airtableInterface = sdk.__airtableInterface;
-    const appInterface = sdk.__appInterface;
-    let cellValueToRender;
-    if (record) {
-      if (cellValue !== undefined) {
-        // eslint-disable-next-line
-        console.warn('CellRenderer was given both record and cellValue, choosing to render record value');
-      }
-      if (record.isDeleted) {
-        return null;
-      }
-      cellValueToRender = record.getCellValue(field.id);
-    } else {
-      // NOTE: this will not work if you want to render a cell value for
-      // foreign record, single/multi select, or single/multi collaborator
-      // fields and the cell value is not *currently* valid for that field.
-      // i.e. if you want to render a foreign record for a record that
-      // does not yet exist, this will throw.
-      // TODO: handle "preview" cell values that are not yet valid in the given field
-      // but that *could* be.
-      // To validate public cell values, we only have validateCellValueForUpdate
-      // However, this is not implemented for computed fields (since you can't update them)
-      // so we just skip the check.
-      // TODO(emma): actually check this somehow.
-      if (!field.isComputed) {
-        const validationResult = airtableInterface.fieldTypeProvider.validateCellValueForUpdate(appInterface, cellValue, null, field._data);
-        if (!validationResult.isValid) {
-          if (renderInvalidCellValue) {
-            return /*#__PURE__*/React.createElement("div", {
-              onMouseEnter: onMouseEnter,
-              onMouseLeave: onMouseLeave,
-              onClick: onClick,
-              className: className,
-              style: style
-            }, renderInvalidCellValue(cellValue, field));
-          } else {
-            throw spawnError('Cannot render invalid cell value %s: %s', cellValue, validationResult.reason);
-          }
-        }
-      }
-      cellValueToRender = cellValue;
-    }
-
-    // in record.getCellValue, we reformat the cell value to the new public format. in order to
-    // make it work with the cell renderer, we need to format it back the other way.
-    // Note: we can't use _getRawCellValue here since we also need to handle formatting
-    // these in the case where the user passed cellValue instead of a record.
-    if (cellValueToRender && field.type === FieldType.MULTIPLE_LOOKUP_VALUES && !airtableInterface.sdkInitData.isUsingNewLookupCellValueFormat) {
-      const originalCellValue = cellValueToRender;
-      const linkedRecordIdsSet = new Set();
-      const valuesByLinkedRecordId = {};
-      for (const {
-        linkedRecordId,
-        value
-      } of originalCellValue) {
-        linkedRecordIdsSet.add(linkedRecordId);
-        if (!valuesByLinkedRecordId[linkedRecordId]) {
-          valuesByLinkedRecordId[linkedRecordId] = [];
-        }
-        valuesByLinkedRecordId[linkedRecordId].push(value);
-      }
-      cellValueToRender = {
-        linkedRecordIds: Array.from(linkedRecordIdsSet),
-        valuesByLinkedRecordId
-      };
-    }
-    const {
-      cellValueHtml,
-      attributes
-    } = airtableInterface.fieldTypeProvider.getCellRendererData(appInterface, cellValueToRender, field._data, !!shouldWrap);
-    return /*#__PURE__*/React.createElement("div", {
-      // TODO (stephen): remove tooltip anchor props
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onClick: onClick,
-      className: cx('baymax', className),
-      style: style
-    }, /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
-      className: cx('cell read', cellClassName),
-      style: cellStyle,
-      dangerouslySetInnerHTML: {
-        __html: cellValueHtml
-      }
-    })));
-  }
-}
-export default withHooks(CellRenderer, props => {
-  const {
-    styleProps,
-    nonStyleProps
-  } = splitStyleProps(props, styleParser.propNames, {
-    display: 'block'
-  });
-  const {
-    className
-  } = nonStyleProps;
-  const classNameForStyleProps = useStyledSystem(styleProps, styleParser);
-  const sdk = useSdk();
-  useWatchable(props.record, [`cellValueInField:${props.field.id}`]);
-  useWatchable(props.field, ['type', 'options']);
-  return {
-    className: cx(classNameForStyleProps, className),
-    sdk
-  };
-});
+export default function CellRenderer(props) {
+  return /*#__PURE__*/React.createElement(CellRendererSharedImpl, props);
+}

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { isEnumValue } from '../../shared/private_utils';
 import Watchable from '../../shared/watchable';
 import { useSdk } from '../../shared/ui/sdk_context';
-import { baymax } from './baymax_utils';
+import { BUTTON_LINK_CLASS_NAME } from './global_css_helpers';
 const WatchableGlobalAlertKeys = Object.freeze({
   __alertInfo: '__alertInfo'
 });
@@ -14,9 +14,13 @@ const WatchableGlobalAlertKeys = Object.freeze({
 const GlobalAlertInfo = () => {
   const sdk = useSdk();
   return /*#__PURE__*/React.createElement("span", {
-    className: baymax('center line-height-4 quiet strong')
+    style: {
+      textAlign: 'center',
+      lineHeight: 1.5,
+      fontWeight: 500
+    }
   }, /*#__PURE__*/React.createElement("span", {
-    className: baymax('pointer understroke link-unquiet'),
+    className: BUTTON_LINK_CLASS_NAME,
     onClick: () => {
       sdk.reload();
     }

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

@@ -8,32 +8,12 @@ import GlobalAlert from './global_alert';
 // instead importing `unstable_standalone_ui`.
 import '..';
 export { default as BaseProvider } from './base_provider';
-export { default as colors } from '../../shared/colors';
-export { default as colorUtils } from '../../shared/color_utils';
-export { default as Synced } from './synced';
-export { default as TablePicker } from './table_picker';
-export { default as TablePickerSynced } from './table_picker_synced';
-export { default as FieldPicker } from './field_picker';
-export { default as FieldPickerSynced } from './field_picker_synced';
-export { default as ViewPicker } from './view_picker';
-export { default as ViewPickerSynced } from './view_picker_synced';
-export { default as InputSynced } from './input_synced';
+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 FieldIcon } from './field_icon';
-export { default as ColorPaletteSynced } from './color_palette_synced';
-export { default as ProgressBar } from './progress_bar';
-export { default as RecordCard } from './record_card';
-export { default as RecordCardList } from './record_card_list';
-export { default as SelectSynced } from './select_synced';
-export { default as SelectButtonsSynced } from './select_buttons_synced';
-export { default as SwitchSynced } from './switch_synced';
-export { default as ViewportConstraint } from './viewport_constraint';
-export { initializeBlock } from './initialize_block';
-export { default as withHooks } from '../../shared/ui/with_hooks';
 export { default as useLoadable } from './use_loadable';
 export { useColorScheme } from '../../shared/ui/use_color_scheme';
 export { useRecordIds, useRecords, useRecordById, useRecordQueryResult } from './use_records';

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

@@ -1,27 +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';
+// // 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';
+// 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/esm/base/ui/use_loadable.js

@@ -1,6 +1,5 @@
 /** @module @airtable/blocks/ui: useLoadable */ /** */
-import { useMemo, useEffect } from 'react';
-import { useSubscription } from 'use-subscription';
+import { useMemo, useEffect, useSyncExternalStore } from 'react';
 import { compact, has } from '../../shared/private_utils';
 import { spawnError } from '../../shared/error_utils';
 import useArrayIdentity from '../../shared/ui/use_array_identity';
@@ -149,7 +148,7 @@ export default function useLoadable(models) {
       };
     }
   }), [compactModels]);
-  useSubscription(modelIsLoadedSubscription);
+  useSyncExternalStore(modelIsLoadedSubscription.subscribe, modelIsLoadedSubscription.getCurrentValue);
 
   // the main part of this hook comes down to managing the query result data loading in sync with
   // the component lifecycle. That means loading the data when the component mounts, and

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

@@ -22,6 +22,7 @@ export let BlockInstallationPageElementCustomPropertyTypeForAirtableInterface =
   BlockInstallationPageElementCustomPropertyTypeForAirtableInterface["STRING"] = "string";
   BlockInstallationPageElementCustomPropertyTypeForAirtableInterface["ENUM"] = "enum";
   BlockInstallationPageElementCustomPropertyTypeForAirtableInterface["FIELD_ID"] = "fieldId";
+  BlockInstallationPageElementCustomPropertyTypeForAirtableInterface["TABLE_ID"] = "tableId";
   return BlockInstallationPageElementCustomPropertyTypeForAirtableInterface;
 }({});
 
@@ -31,9 +32,7 @@ export let BlockInstallationPageElementCustomPropertyTypeForAirtableInterface =
 
 /**
  * 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
  */