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

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

@@ -1,23 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useRecordById = useRecordById;
-exports.useRecordIds = useRecordIds;
-exports.useRecordQueryResult = useRecordQueryResult;
-exports.useRecords = useRecords;
-var _error_utils = require("../../shared/error_utils");
-var _table = _interopRequireDefault(require("../models/table"));
-var _record_query_result = _interopRequireDefault(require("../models/record_query_result"));
-var RecordColoring = _interopRequireWildcard(require("../models/record_coloring"));
-var _view = _interopRequireDefault(require("../models/view"));
-var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
-var _use_loadable = _interopRequireDefault(require("./use_loadable"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useRecords */ /** */
+import { spawnError } from '../../shared/error_utils';
+import Table from '../models/table';
+import RecordQueryResult from '../models/record_query_result';
+import * as RecordColoring from '../models/record_coloring';
+import View from '../models/view';
+import useWatchable from '../../shared/ui/use_watchable';
+import useLoadable from './use_loadable';
 
 /** */
 
@@ -34,15 +22,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, functionNameForErrors, opts) {
   let queryResult;
-  if (tableOrViewOrQueryResult instanceof _table.default || tableOrViewOrQueryResult instanceof _view.default) {
+  if (tableOrViewOrQueryResult instanceof Table || tableOrViewOrQueryResult instanceof View) {
     queryResult = tableOrViewOrQueryResult.selectRecords(opts);
   } else {
-    if (tableOrViewOrQueryResult instanceof _record_query_result.default && opts !== undefined) {
-      throw (0, _error_utils.spawnError)('%s does not support passing both a queryResult and opts.', functionNameForErrors);
+    if (tableOrViewOrQueryResult instanceof RecordQueryResult && opts !== undefined) {
+      throw spawnError('%s does not support passing both a queryResult and opts.', functionNameForErrors);
     }
     queryResult = tableOrViewOrQueryResult;
   }
-  (0, _use_loadable.default)(queryResult);
+  useLoadable(queryResult);
   return queryResult;
 }
 
@@ -86,8 +74,8 @@ function useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, functionNameFo
  * @docsPath UI/hooks/useRecordIds
  * @hook
  */
-function useRecordIds(tableOrViewOrQueryResult, opts) {
-  const generatedOpts = tableOrViewOrQueryResult instanceof _table.default || tableOrViewOrQueryResult instanceof _view.default ? {
+export function useRecordIds(tableOrViewOrQueryResult, opts) {
+  const generatedOpts = tableOrViewOrQueryResult instanceof Table || tableOrViewOrQueryResult instanceof View ? {
     // Don't load/watch any cell value data, since it's not accessible anyway
     fields: [],
     // Similarly, don't load/watch record color mode data
@@ -95,7 +83,7 @@ function useRecordIds(tableOrViewOrQueryResult, opts) {
     sorts: opts ? opts.sorts : undefined
   } : opts;
   const queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordIds', generatedOpts);
-  (0, _use_watchable.default)(queryResult, ['recordIds']);
+  useWatchable(queryResult, ['recordIds']);
   return queryResult ? queryResult.recordIds : null;
 }
 
@@ -179,11 +167,11 @@ function useRecordIds(tableOrViewOrQueryResult, opts) {
  * @docsPath UI/hooks/useRecords
  * @hook
  */
-function useRecords(tableOrViewOrQueryResult, opts) {
+export function useRecords(tableOrViewOrQueryResult, opts) {
   const queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecords', opts);
 
   // Note this differs from useRecordQueryResult in that it does not watch groups
-  (0, _use_watchable.default)(queryResult, ['records', 'cellValues', 'recordColors']);
+  useWatchable(queryResult, ['records', 'cellValues', 'recordColors']);
   return queryResult ? queryResult.records : null;
 }
 
@@ -239,11 +227,11 @@ function useRecords(tableOrViewOrQueryResult, opts) {
  * @docsPath UI/hooks/useRecordById
  * @hook
  */
-function useRecordById(tableOrViewOrQueryResult, recordId, opts) {
+export function useRecordById(tableOrViewOrQueryResult, recordId, opts) {
   const queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordById', opts);
-  (0, _use_watchable.default)(queryResult, ['records', 'recordColors']);
+  useWatchable(queryResult, ['records', 'recordColors']);
   const record = queryResult ? queryResult.getRecordByIdIfExists(recordId) : null;
-  (0, _use_watchable.default)(record, ['cellValues']);
+  useWatchable(record, ['cellValues']);
   return record;
 }
 
@@ -254,8 +242,8 @@ function useRecordById(tableOrViewOrQueryResult, recordId, opts) {
  * @hidden
  * @hook
  */
-function useRecordQueryResult(tableOrViewOrQueryResult, opts) {
+export function useRecordQueryResult(tableOrViewOrQueryResult, opts) {
   const queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordQueryResult', opts);
-  (0, _use_watchable.default)(queryResult, ['records', 'cellValues', 'recordColors', 'groups']);
+  useWatchable(queryResult, ['records', 'cellValues', 'recordColors', 'groups']);
   return queryResult;
 }

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

@@ -1,13 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _use_session = _interopRequireDefault(require("../../shared/ui/use_session"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useSession */ /** */
 
+import useSessionInternal from '../../shared/ui/use_session';
+
 /**
  * A hook for connecting a React component to the current session. This returns a {@link Session}
  * instance and will re-render your component whenever the session changes (e.g. when the current user's
@@ -37,6 +31,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @hook
  */
 function useSession() {
-  return (0, _use_session.default)();
+  return useSessionInternal();
 }
-var _default = exports.default = useSession;
+export default useSession;

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

@@ -1,15 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useSettingsButton;
-var _react = require("react");
-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: useSettingsButton */ /** */
-
+import { useEffect } from 'react';
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
 /**
  * A hook for using the settings button that lives outside the extension's viewport. It will show
  * the settings button (hidden by default) and call the provided callback whenever the settings
@@ -37,11 +29,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @docsPath UI/hooks/useSettingsButton
  * @hook
  */
-function useSettingsButton(onClickCallback) {
+export default function useSettingsButton(onClickCallback) {
   const {
     settingsButton
-  } = (0, _sdk_context.useSdk)();
-  (0, _react.useEffect)(() => {
+  } = useSdk();
+  useEffect(() => {
     settingsButton.show();
 
     // Hide the button when the component using this hook is unmounted.
@@ -50,5 +42,5 @@ function useSettingsButton(onClickCallback) {
     };
   }, [settingsButton]); // Only set the button to be visible once.
 
-  (0, _use_watchable.default)(settingsButton, ['click'], onClickCallback);
+  useWatchable(settingsButton, ['click'], onClickCallback);
 }

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

@@ -0,0 +1,19 @@
+import { css } from 'emotion';
+import useTheme from './theme/use_theme';
+import { allStylesParser } from './system/index';
+
+/** @internal */
+export default function useStyledSystem(styleProps) {
+  let styleParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : allStylesParser;
+  const theme = useTheme();
+
+  // Add the theme to the style props because that's how the parser expects it.
+  const styles = styleParser({
+    ...styleProps,
+    theme
+  });
+
+  // At this point `styles` is still an object, we need to turn it into a class name.
+  const classNameForStyleProps = css(styles);
+  return classNameForStyleProps;
+}

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

@@ -0,0 +1,9 @@
+import useTheme from './theme/use_theme';
+
+/** @internal */
+export default function useTextColorForBackgroundColor(backgroundColor) {
+  const {
+    textColorsByBackgroundColor
+  } = useTheme();
+  return textColorsByBackgroundColor[backgroundColor];
+}

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

@@ -1,15 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _view = _interopRequireDefault(require("../models/view"));
-var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
-var _use_loadable = _interopRequireDefault(require("./use_loadable"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useViewMetadata */ /** */
 
+import View from '../models/view';
+import useWatchable from '../../shared/ui/use_watchable';
+import useLoadable from './use_loadable';
+
 /** */
 
 /** */
@@ -41,9 +35,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @hook
  */
 function useViewMetadata(viewOrViewMetadataQueryResult) {
-  const queryResult = viewOrViewMetadataQueryResult instanceof _view.default ? viewOrViewMetadataQueryResult.selectMetadata() : viewOrViewMetadataQueryResult;
-  (0, _use_loadable.default)(queryResult ?? null);
-  (0, _use_watchable.default)(queryResult, ['allFields', 'visibleFields', 'groupLevels']);
+  const queryResult = viewOrViewMetadataQueryResult instanceof View ? viewOrViewMetadataQueryResult.selectMetadata() : viewOrViewMetadataQueryResult;
+  useLoadable(queryResult ?? null);
+  useWatchable(queryResult, ['allFields', 'visibleFields', 'groupLevels']);
   return queryResult ?? null;
 }
-var _default = exports.default = useViewMetadata;
+export default useViewMetadata;

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

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useViewport;
-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: useViewport */ /** */
 
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
 /**
  * Returns the current {@link Viewport} object and updates whenever the viewport size, constraints,
  * or fullscreen status changes.
@@ -40,8 +33,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @docsPath UI/hooks/useViewport
  * @hook
  */
-function useViewport() {
-  const viewport = (0, _sdk_context.useSdk)().viewport;
-  (0, _use_watchable.default)(viewport, ['isFullscreen', 'size', 'minSize', 'maxFullscreenSize']);
+export default function useViewport() {
+  const viewport = useSdk().viewport;
+  useWatchable(viewport, ['isFullscreen', 'size', 'minSize', 'maxFullscreenSize']);
   return viewport;
 }

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

@@ -1,18 +1,11 @@
-"use strict";
+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: ViewPicker */ /** */
+import * as React from 'react';
+import { ViewType } from '../types/view';
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import ModelPickerSelect from './model_picker_select';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _view = require("../types/view");
-var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
-var _sdk_context = require("../../shared/ui/sdk_context");
-var _model_picker_select = _interopRequireDefault(require("./model_picker_select"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 _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: ViewPicker */ /** */
 /**
  * Props shared between the {@link ViewPicker} and {@link ViewPickerSynced} components.
  */
@@ -38,15 +31,15 @@ const ViewPicker = (props, ref) => {
     view: selectedView,
     shouldAllowPickingNone,
     // Exclude ViewType.FORM
-    allowedTypes = [_view.ViewType.GRID, _view.ViewType.CALENDAR, _view.ViewType.GALLERY, _view.ViewType.KANBAN],
+    allowedTypes = [ViewType.GRID, ViewType.CALENDAR, ViewType.GALLERY, ViewType.KANBAN],
     placeholder,
     // Destructure `onChange` to prevent it from being passed to `Select`.
     onChange,
     ...restOfProps
   } = props;
-  const sdk = (0, _sdk_context.useSdk)();
-  (0, _use_watchable.default)(sdk.base, ['tables']);
-  (0, _use_watchable.default)(table, ['views']);
+  const sdk = useSdk();
+  useWatchable(sdk.base, ['tables']);
+  useWatchable(table, ['views']);
   if (!table || table.isDeleted) {
     return null;
   }
@@ -71,7 +64,7 @@ const ViewPicker = (props, ref) => {
     }
   }
   const shouldAllowPickingViewFn = view => allowedTypesSet[view.type];
-  return /*#__PURE__*/React.createElement(_model_picker_select.default, _extends({}, restOfProps, {
+  return /*#__PURE__*/React.createElement(ModelPickerSelect, _extends({}, restOfProps, {
     ref: ref,
     models: table.views
     // `shouldAllowPickingModelFn` is typed as `AnyModel`. Cast to any since we only expect `Field`.
@@ -86,4 +79,4 @@ const ViewPicker = (props, ref) => {
 };
 const ForwardedRefViewPicker = /*#__PURE__*/React.forwardRef(ViewPicker);
 ForwardedRefViewPicker.displayName = 'ViewPicker';
-var _default = exports.default = ForwardedRefViewPicker;
+export default ForwardedRefViewPicker;

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

@@ -0,0 +1,59 @@
+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: ViewPicker */ /** */
+import * as React from 'react';
+import useSynced from '../../shared/ui/use_synced';
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import ViewPicker from './view_picker';
+
+/**
+ * Props for the {@link ViewPickerSynced} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/ViewPickerSynced
+ * @groupPath UI/components/ViewPicker
+ */
+
+/**
+ * A wrapper around the {@link ViewPicker} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="modelpickers--viewpickersynced-example" title="Synced view picker example" ]]
+ *
+ * @docsPath UI/components/ViewPickerSynced
+ * @groupPath UI/components/ViewPicker
+ * @component
+ */
+const ViewPickerSynced = (props, ref) => {
+  const {
+    globalConfigKey,
+    table,
+    onChange,
+    disabled,
+    ...restOfProps
+  } = props;
+  const [viewId, setViewId, canSetViewId] = useSynced(globalConfigKey);
+  const sdk = useSdk();
+  useWatchable(sdk.base, ['tables']);
+  useWatchable(table, ['views']);
+  function _getViewFromGlobalConfigValue() {
+    if (!table || table.isDeleted) {
+      return null;
+    }
+    return typeof viewId === 'string' && table ? table.getViewByIdIfExists(viewId) : null;
+  }
+  return /*#__PURE__*/React.createElement(ViewPicker, _extends({}, restOfProps, {
+    ref: ref,
+    table: table,
+    view: _getViewFromGlobalConfigValue(),
+    onChange: view => {
+      setViewId(view ? view.id : null);
+      if (onChange) {
+        onChange(view);
+      }
+    },
+    disabled: disabled || !canSetViewId
+  }));
+};
+const ForwardedRefViewPickerSynced = /*#__PURE__*/React.forwardRef(ViewPickerSynced);
+ForwardedRefViewPickerSynced.displayName = 'ViewPickerSynced';
+export default ForwardedRefViewPickerSynced;

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

@@ -1,19 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
-var _sdk_context = require("../../shared/ui/sdk_context");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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: ViewportConstraint
  * @docsPath UI/components/ViewportConstraint
  */ /** */
+import * as React from 'react';
+import withHooks from '../../shared/ui/with_hooks';
+import { useSdk } from '../../shared/ui/sdk_context';
 
 /** An object specifying a width and/or height for the block's viewport. */
 
@@ -122,8 +113,8 @@ class ViewportConstraint extends React.Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children);
   }
 }
-var _default = exports.default = (0, _with_hooks.default)(ViewportConstraint, props => {
+export default withHooks(ViewportConstraint, props => {
   return {
-    sdk: (0, _sdk_context.useSdk)()
+    sdk: useSdk()
   };
 });

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

@@ -1,19 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = withStyledSystem;
-exports.splitStyleProps = splitStyleProps;
-var React = _interopRequireWildcard(require("react"));
-var _emotion = require("emotion");
-var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
-var _private_utils = require("../../shared/private_utils");
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 _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); }
+import * as React from 'react';
+import { cx } from 'emotion';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { cast, keys } from '../../shared/private_utils';
+import useStyledSystem from './use_styled_system';
+
 /**
  * @internal
  * A higher-order component for working with the `useStyledSystem` hook in class-based components.
@@ -76,22 +67,22 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  * );
  * ```
  */
-function withStyledSystem(Component, styleParser, defaultStyleProps) {
+export default function withStyledSystem(Component, styleParser, defaultStyleProps) {
   const WithStyledSystem = /*#__PURE__*/React.forwardRef((props, ref) => {
     const {
       styleProps,
       nonStyleProps
     } = splitStyleProps(props, styleParser.propNames, defaultStyleProps);
-    const classNameForStyleProps = (0, _use_styled_system.default)((0, _private_utils.cast)(styleProps), styleParser);
+    const classNameForStyleProps = useStyledSystem(cast(styleProps), styleParser);
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: ref
     }, nonStyleProps, {
-      className: (0, _emotion.cx)(classNameForStyleProps, nonStyleProps.className)
+      className: cx(classNameForStyleProps, nonStyleProps.className)
     }));
   });
   const componentName = Component.displayName || Component.name || 'Component';
   WithStyledSystem.displayName = `WithStyledSystem(${componentName})`;
-  (0, _hoistNonReactStatics.default)(WithStyledSystem, Component);
+  hoistNonReactStatics(WithStyledSystem, Component);
   return WithStyledSystem;
 }
 
@@ -107,7 +98,7 @@ function withStyledSystem(Component, styleParser, defaultStyleProps) {
  * @param stylePropNames The list of allowed style prop names.
  * @param defaultStyleProps Default values for style props.
  */
-function splitStyleProps(props) {
+export function splitStyleProps(props) {
   let stylePropNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   let defaultStyleProps = arguments.length > 2 ? arguments[2] : undefined;
   const stylePropNamesSet = new Set(stylePropNames);
@@ -115,7 +106,7 @@ function splitStyleProps(props) {
     ...defaultStyleProps
   };
   const nonStyleProps = {};
-  for (const propName of (0, _private_utils.keys)(props)) {
+  for (const propName of keys(props)) {
     if (stylePropNamesSet.has(propName)) {
       styleProps[propName] = props[propName];
     } else {

package/dist/esm/base/undo_redo.js

@@ -0,0 +1,31 @@
+import { values } from '../shared/private_utils';
+import { spawnError } from '../shared/error_utils';
+import { UndoRedoModes } from './types/undo_redo';
+/** @hidden */
+class UndoRedo {
+  /** @hidden */
+  modes = UndoRedoModes;
+
+  /** @internal */
+
+  /** @internal */
+  _mode = UndoRedoModes.NONE;
+
+  /** @hidden */
+  constructor(airtableInterface) {
+    this._airtableInterface = airtableInterface;
+  }
+  /** @hidden */
+  get mode() {
+    return this._mode;
+  }
+  /** @hidden */
+  set mode(mode) {
+    if (!values(UndoRedoModes).includes(mode)) {
+      throw spawnError('Unexpected UndoRedo mode');
+    }
+    this._mode = mode;
+    this._airtableInterface.setUndoRedoMode(mode);
+  }
+}
+export default UndoRedo;

package/dist/esm/base/unstable_testing_utils.js

@@ -0,0 +1,6 @@
+export { MutationTypes } from './types/mutations';
+export { BlockRunContextType } from './types/airtable_interface';
+export { FieldType } from '../shared/types/field_core';
+export { ViewType } from './types/view';
+export { default as Sdk } from './sdk';
+export { AbstractMockAirtableInterface } from '../testing/base/abstract_mock_airtable_interface';

package/dist/{cjs → esm}/base/viewport.js

@@ -1,15 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _watchable = _interopRequireDefault(require("../shared/watchable"));
-var _private_utils = require("../shared/private_utils");
-var _error_utils = require("../shared/error_utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks: viewport */ /** */
-
+import Watchable from '../shared/watchable';
+import { isEnumValue, debounce } from '../shared/private_utils';
+import { invariant } from '../shared/error_utils';
 const WatchableViewportKeys = Object.freeze({
   isFullscreen: 'isFullscreen',
   size: 'size',
@@ -51,12 +43,12 @@ const compareWithNulls = (a, b, compare) => {
  * ```
  * @docsPath models/Viewport
  */
-class Viewport extends _watchable.default {
+class Viewport extends Watchable {
   /** @internal */
   static _className = 'Viewport';
   /** @internal */
   static _isWatchableKey(key) {
-    return (0, _private_utils.isEnumValue)(WatchableViewportKeys, key);
+    return isEnumValue(WatchableViewportKeys, key);
   }
 
   /** @internal */
@@ -87,7 +79,7 @@ class Viewport extends _watchable.default {
     // add an event listener for window resize and remove it when nobody is
     // listening anymore.
     this._sizeWatchCount = 0;
-    this._onSizeChangeDebounced = (0, _private_utils.debounce)(this._onSizeChange.bind(this), 200);
+    this._onSizeChangeDebounced = debounce(this._onSizeChange.bind(this), 200);
 
     // whenever maxFullscreenSize changes, we want to sync it back to the
     // containing frame
@@ -160,7 +152,7 @@ class Viewport extends _watchable.default {
     this._maxFullscreenSizes.add(size);
     this._onChange(WatchableViewportKeys.maxFullscreenSize);
     return () => {
-      (0, _error_utils.invariant)(this._maxFullscreenSizes.has(size), 'UnsetFn can only be called once');
+      invariant(this._maxFullscreenSizes.has(size), 'UnsetFn can only be called once');
       this._cachedMaxFullscreenSize = null;
       this._maxFullscreenSizes.delete(size);
       this._onChange(WatchableViewportKeys.maxFullscreenSize);
@@ -219,7 +211,7 @@ class Viewport extends _watchable.default {
       this.enterFullscreenIfPossible();
     }
     return () => {
-      (0, _error_utils.invariant)(this._minSizes.has(size), 'UnsetFn can only be called once');
+      invariant(this._minSizes.has(size), 'UnsetFn can only be called once');
       this._cachedMinSize = null;
       this._cachedMaxFullscreenSize = null;
       this._minSizes.delete(size);
@@ -350,4 +342,4 @@ class Viewport extends _watchable.default {
     this._onChange(WatchableViewportKeys.size);
   }
 }
-var _default = exports.default = Viewport;
+export default Viewport;

package/dist/{cjs → esm}/injected/airtable_interface.js

@@ -1,20 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getAirtableInterface;
-var _error_utils = require("../shared/error_utils");
+import { spawnError } from '../shared/error_utils';
 const AIRTABLE_INTERFACE_VERSION = 0;
 let airtableInterface = null;
 const missingAirtableInterfaceErrorMessage = ['Error: Extension environment misconfigured', '\n\n', 'Airtable Extensions can only run in the presence of an Airtable Base. If you ', 'are trying to run your Extension with a Base hosted on airtable.com, then be ', 'sure you are using the Airtable CLI to serve your code and accessing it ', 'through a Custom Extension installed inside a Base on airtable.com.', '\n\n', 'If you are trying to run automated tests for your Extension, then make sure ', 'you have loaded the `@airtable/testing-library` module *before* the ', '`@airtable/blocks` module.'].join('');
 
 /** @hidden */
-function getAirtableInterface() {
+export default function getAirtableInterface() {
   const getAirtableInterfaceAtVersion = window.__getAirtableInterfaceAtVersion;
   if (!airtableInterface) {
     if (!getAirtableInterfaceAtVersion) {
-      throw (0, _error_utils.spawnError)(missingAirtableInterfaceErrorMessage);
+      throw spawnError(missingAirtableInterfaceErrorMessage);
     }
     airtableInterface = getAirtableInterfaceAtVersion(AIRTABLE_INTERFACE_VERSION);
   }

package/dist/esm/interface/assert_run_context.js

@@ -0,0 +1,9 @@
+import getAirtableInterface from '../injected/airtable_interface';
+import { spawnError } from '../shared/error_utils';
+import { BlockRunContextType } from './types/airtable_interface';
+if (window.__getAirtableInterfaceAtVersion) {
+  const runContextType = getAirtableInterface().sdkInitData.runContext.type;
+  if (runContextType !== BlockRunContextType.PAGE_ELEMENT_IN_QUERY_CONTAINER) {
+    throw spawnError('Unexpected import when running block in base');
+  }
+}