@airtable/blocks 0.0.0-experimental-20e3506bd-20250428 → 0.0.0-experimental-f1c9010b3-20250609

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

@@ -46,7 +46,6 @@ var hasBeenInitialized = false;
  * initializeBlock({interface: () => <App />});
  * ```
  * @docsPath UI/utils/initializeBlock
- * @internal
  */
 function initializeBlock(entryPoints) {
   var body = typeof document !== 'undefined' ? document.body : null;
@@ -79,10 +78,23 @@ function initializeBlock(entryPoints) {
     throw (0, _error_utils.spawnError)("The first argument to initializeBlock didn't return a valid React element");
   }
   var container = document.createElement('div');
+  container.style.height = '100%';
+  container.style.width = '100%';
   body.appendChild(container);
-  _reactDom.default.render( /*#__PURE__*/React.createElement(_block_wrapper.BlockWrapper, {
-    sdk: sdk
-  }, entryElement), container);
+
+  // Try to use createRoot API (React 18+)
+  try {
+    var _require = require('react-dom/client'),
+      createRoot = _require.createRoot;
+    createRoot(container).render( /*#__PURE__*/React.createElement(_block_wrapper.BlockWrapper, {
+      sdk: sdk
+    }, entryElement));
+  } catch (e) {
+    // Fallback to legacy render for React 16/17
+    _reactDom.default.render( /*#__PURE__*/React.createElement(_block_wrapper.BlockWrapper, {
+      sdk: sdk
+    }, entryElement), container);
+  }
 }
 var sdk;
 

package/dist/cjs/interface/ui/ui.js

@@ -28,28 +28,46 @@ Object.defineProperty(exports, "initializeBlock", {
     return _initialize_block.initializeBlock;
   }
 });
+Object.defineProperty(exports, "loadCSSFromString", {
+  enumerable: true,
+  get: function get() {
+    return _remote_utils.loadCSSFromString;
+  }
+});
+Object.defineProperty(exports, "loadCSSFromURLAsync", {
+  enumerable: true,
+  get: function get() {
+    return _remote_utils.loadCSSFromURLAsync;
+  }
+});
+Object.defineProperty(exports, "loadScriptFromURLAsync", {
+  enumerable: true,
+  get: function get() {
+    return _remote_utils.loadScriptFromURLAsync;
+  }
+});
 Object.defineProperty(exports, "useBase", {
   enumerable: true,
   get: function get() {
     return _use_base.useBase;
   }
 });
-Object.defineProperty(exports, "useCustomProperties", {
+Object.defineProperty(exports, "useColorScheme", {
   enumerable: true,
   get: function get() {
-    return _use_custom_properties.useCustomProperties;
+    return _use_color_scheme.useColorScheme;
   }
 });
-Object.defineProperty(exports, "useGlobalConfig", {
+Object.defineProperty(exports, "useCustomProperties", {
   enumerable: true,
   get: function get() {
-    return _use_global_config.default;
+    return _use_custom_properties.useCustomProperties;
   }
 });
-Object.defineProperty(exports, "useLoadable", {
+Object.defineProperty(exports, "useGlobalConfig", {
   enumerable: true,
   get: function get() {
-    return _use_loadable.default;
+    return _use_global_config.default;
   }
 });
 Object.defineProperty(exports, "useRecords", {
@@ -92,14 +110,15 @@ require("..");
 var _expand_record = require("./expand_record");
 var _initialize_block = require("./initialize_block");
 var _use_base = require("./use_base");
+var _use_color_scheme = require("../../shared/ui/use_color_scheme");
 var _use_custom_properties = require("./use_custom_properties");
 var _use_records = require("./use_records");
 var _use_run_info = require("./use_run_info");
 var _use_session = require("./use_session");
 var _use_global_config = _interopRequireDefault(require("../../shared/ui/use_global_config"));
-var _use_loadable = _interopRequireDefault(require("../../shared/ui/use_loadable"));
 var _use_synced = _interopRequireDefault(require("../../shared/ui/use_synced"));
 var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
 var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
 var _colors = _interopRequireDefault(require("../../shared/colors"));
-var _color_utils = _interopRequireDefault(require("../../shared/color_utils"));
+var _color_utils = _interopRequireDefault(require("../../shared/color_utils"));
+var _remote_utils = require("../../shared/ui/remote_utils");

package/dist/cjs/interface/ui/use_custom_properties.js

@@ -27,14 +27,61 @@ var _error_utils = require("../../shared/error_utils");
 // passes a Table model instance, and then we transform that to be a fieldId custom
 // property with a tableId before we pass it to hyperbase.
 /**
- * TODO document
- * @hidden
+ * An object that represents a custom property that a block can set.
+ *
+ * ```
+ * type BlockPageElementCustomProperty = {key: string; label: string} & (
+ *   | {type: 'boolean'; defaultValue: boolean}
+ *   | {type: 'string'; defaultValue?: string}
+ *   | {
+ *       type: 'enum';
+ *       possibleValues: Array<{value: string; label: string}>;
+ *       defaultValue?: string;
+ *     }
+ *   | {
+ *       type: 'field';
+ *       table: Table;
+ *       possibleValues?: Array<Field>; // If not provided, all visible fields in the table will be shown in the dropdown.
+ *       defaultValue?: Field;
+ *     }
+ * );
+ * ```
  */
 
 /**
- * TODO document. Make sure to describe that getCustomProperties
- * should be wrapped in useCallback.
- * @hidden
+ * A hook for integrating configuration settings for your block with the Interface Designer properties
+ * panel. Under the hood, this uses {@link GlobalConfig} to store the custom property values.
+ *
+ * Returns an object with:
+ * - `customPropertyValueByKey`: an object mapping custom property keys to their current value.
+ * - `errorState`: an object with an `error` property if there was an error setting the custom properties
+ *
+ * @param getCustomProperties A function that returns an array of {@link BlockPageElementCustomProperty}.
+ * This function should have a stable identity, so it should either be defined at the top level of the
+ * file or wrapped in useCallback. It will receive an instance of {@link Base} as an argument.
+ *
+ * @example
+ * ```js
+ * import {useCustomProperties} from '@airtable/blocks/interface/ui';
+ *
+ * function getCustomProperties(base: Base) {
+ *     const table = base.tables[0];
+ *     const numberFields = table.fields.filter(field => field.type === FieldType.NUMBER);
+ *     return [
+ *         {key: 'title', label: 'Title', type: 'string', defaultValue: 'Chart'},
+ *         {key: 'xAxis', label: 'X-axis', type: 'field', table, possibleValues: numberFields},
+ *         {key: 'yAxis', label: 'Y-axis', type: 'field', table, possibleValues: numberFields},
+ *         {key: 'color', label: 'Color', type: 'enum', possibleValues: ['red', 'blue', 'green'], defaultValue: 'red'},
+ *         {key: 'showLegend', label: 'Show Legend', type: 'boolean', defaultValue: true},
+ *     ];
+ * }
+ *
+ * function MyApp() {
+ *     const {customPropertyValueByKey, errorState} = useCustomProperties(getCustomProperties);
+ * }
+ * ```
+ * @docsPath UI/hooks/useCustomProperties
+ * @hook
  */
 function useCustomProperties(getCustomProperties) {
   var sdk = (0, _sdk_context.useSdk)();

package/dist/cjs/shared/colors.js

@@ -16,9 +16,9 @@ exports.rgbTuplesByColor = exports.default = void 0;
  *
  * @example
  * ```js
- * import {Box, colors} from '@airtable/blocks/ui';
+ * import {colors, colorUtils} from '@airtable/blocks/[placeholder-path]/ui';
  *
- * <Box backgroundColor={colors.BLUE} />
+ * <div style={{backgroundColor: colorUtils.getHexForColor(colors.BLUE)}}>Hello world</div>
  * ```
  *
  * @docsPath UI/utils/colors

package/dist/cjs/shared/global_config.js

@@ -58,10 +58,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * The maximum allowed size for a given GlobalConfig instance is 150kB.
  * The maximum number of keys for a given GlobalConfig instance is 1000.
  *
- * @example
- * ```js
- * import {globalConfig} from '@airtable/blocks';
- * ```
  * @docsPath models/GlobalConfig
  */
 var GlobalConfig = /*#__PURE__*/function (_Watchable) {
@@ -136,10 +132,13 @@ var GlobalConfig = /*#__PURE__*/function (_Watchable) {
      * @param key A string for the top-level key, or an array of strings describing the path to the value.
      * @example
      * ```js
-     * import {globalConfig} from '@airtable/blocks';
+     * import {useGlobalConfig} from '@airtable/blocks/[placeholder-path]/ui';
      *
-     * const topLevelValue = globalConfig.get('topLevelKey');
-     * const nestedValue = globalConfig.get(['topLevelKey', 'nested', 'deeply']);
+     * function MyApp() {
+     *     const globalConfig = useGlobalConfig();
+     *     const topLevelValue = globalConfig.get('topLevelKey');
+     *     const nestedValue = globalConfig.get(['topLevelKey', 'nested', 'deeply']);
+     * }
      * ```
      */
   }, {
@@ -238,23 +237,26 @@ var GlobalConfig = /*#__PURE__*/function (_Watchable) {
      * @param value The value to set at the specified path. Use `undefined` to delete the value at the given path.
      * @example
      * ```js
-     * import {globalConfig} from '@airtable/blocks';
-     *
-     * function updateFavoriteColorIfPossible(color) {
-     *     if (globalConfig.hasPermissionToSetPaths('favoriteColor', color)) {
-     *         globalConfig.setAsync('favoriteColor', color);
+     * import {useGlobalConfig} from '@airtable/blocks/[placeholder-path]/ui';
+     *
+     * function MyApp() {
+     *     const globalConfig = useGlobalConfig();
+     *     const updateFavoriteColorIfPossible = (color) => {
+     *         if (globalConfig.hasPermissionToSet('favoriteColor', color)) {
+     *             globalConfig.setAsync('favoriteColor', color);
+     *         }
+     *         // The update is now applied within your extension (eg will be
+     *         // reflected in globalConfig) but are still being saved to
+     *         // Airtable servers (e.g. may not be updated for other users yet)
      *     }
-     *     // The update is now applied within your extension (eg will be
-     *     // reflected in globalConfig) but are still being saved to
-     *     // Airtable servers (e.g. may not be updated for other users yet)
-     * }
      *
-     * async function updateFavoriteColorIfPossibleAsync(color) {
-     *     if (globalConfig.hasPermissionToSet('favoriteColor', color)) {
-     *         await globalConfig.setAsync('favoriteColor', color);
+     *     const updateFavoriteColorIfPossibleAsync = async (color) => {
+     *         if (globalConfig.hasPermissionToSet('favoriteColor', color)) {
+     *             await globalConfig.setAsync('favoriteColor', color);
+     *         }
+     *         // globalConfig updates have been saved to Airtable servers.
+     *         alert('favoriteColor has been updated');
      *     }
-     *     // globalConfig updates have been saved to Airtable servers.
-     *     alert('favoriteColor has been updated');
      * }
      * ```
      */
@@ -370,28 +372,31 @@ var GlobalConfig = /*#__PURE__*/function (_Watchable) {
      * @param updates The paths and values to set.
      * @example
      * ```js
-     * import {globalConfig} from '@airtable/blocks';
-     *
-     * const updates = [
-     *     {path: ['topLevelKey1', 'nestedKey1'], value: 'foo'},
-     *     {path: ['topLevelKey2', 'nestedKey2'], value: 'bar'},
-     * ];
-     *
-     * function applyUpdatesIfPossible() {
-     *     if (globalConfig.hasPermissionToSetPaths(updates)) {
-     *         globalConfig.setPathsAsync(updates);
+     * import {useGlobalConfig} from '@airtable/blocks/[placeholder-path]/ui';
+     *
+     * function MyApp() {
+     *     const globalConfig = useGlobalConfig();
+     *     const updates = [
+     *         {path: ['topLevelKey1', 'nestedKey1'], value: 'foo'},
+     *         {path: ['topLevelKey2', 'nestedKey2'], value: 'bar'},
+     *     ];
+     *
+     *     const applyUpdatesIfPossible = () => {
+     *         if (globalConfig.hasPermissionToSetPaths(updates)) {
+     *             globalConfig.setPathsAsync(updates);
+     *         }
+     *         // The updates are now applied within your extension (eg will be reflected in
+     *         // globalConfig) but are still being saved to Airtable servers (e.g. they
+     *         // may not be updated for other users yet)
      *     }
-     *     // The updates are now applied within your extension (eg will be reflected in
-     *     // globalConfig) but are still being saved to Airtable servers (e.g. they
-     *     // may not be updated for other users yet)
-     * }
      *
-     * async function applyUpdatesIfPossibleAsync() {
-     *     if (globalConfig.hasPermissionToSetPaths(updates)) {
-     *         await globalConfig.setPathsAsync(updates);
+     *     const applyUpdatesIfPossibleAsync = async () => {
+     *         if (globalConfig.hasPermissionToSetPaths(updates)) {
+     *             await globalConfig.setPathsAsync(updates);
+     *         }
+     *         // globalConfig updates have been saved to Airtable servers.
+     *         alert('globalConfig has been updated');
      *     }
-     *     // globalConfig updates have been saved to Airtable servers.
-     *     alert('globalConfig has been updated');
      * }
      * ```
      */

package/dist/cjs/shared/models/base_core.js

@@ -111,8 +111,12 @@ var BaseCore = exports.BaseCore = /*#__PURE__*/function (_AbstractModel) {
      *
      * @example
      * ```js
-     * import {base} from '@airtable/blocks';
-     * console.log('The name of your base is', base.name);
+     * import {useBase} from '@airtable/blocks/[placeholder-path]/ui';
+     *
+     * function MyApp() {
+     *     const base = useBase();
+     *     console.log('The name of your base is', base.name);
+     * }
      * ```
      */
   }, {
@@ -126,8 +130,12 @@ var BaseCore = exports.BaseCore = /*#__PURE__*/function (_AbstractModel) {
      *
      * @example
      * ```js
-     * import {base} from '@airtable/blocks';
-     * console.log('The workspace id of your base is', base.workspaceId);
+     * import {useBase} from '@airtable/blocks/[placeholder-path]/ui';
+     *
+     * function MyApp() {
+     *     const base = useBase();
+     *     console.log('The workspace id of your base is', base.workspaceId);
+     * }
      * ```
      */
   }, {
@@ -141,9 +149,16 @@ var BaseCore = exports.BaseCore = /*#__PURE__*/function (_AbstractModel) {
      *
      * @example
      * ```js
-     * import {base} from '@airtable/blocks';
-     * import {Box} from '@airtable/blocks/ui';
-     * const exampleBox = <Box backgroundColor={base.color}> This box's background is the same color as the base background</Box>
+     * import {colorUtils, useBase} from '@airtable/blocks/[placeholder-path]/ui';
+     *
+     * function MyApp() {
+     *     const base = useBase();
+     *     return (
+     *         <div style={{backgroundColor: colorUtils.getHexForColor(base.color)}}>
+     *             This div's background is the same color as the base background
+     *         </div>
+     *     );
+     * }
      * ```
      */
   }, {
@@ -157,8 +172,12 @@ var BaseCore = exports.BaseCore = /*#__PURE__*/function (_AbstractModel) {
      *
      * @example
      * ```js
-     * import {base} from '@airtable/blocks';
-     * console.log(`You have ${base.tables.length} tables`);
+     * import {useBase} from '@airtable/blocks/[placeholder-path]/ui';
+     *
+     * function MyApp() {
+     *     const base = useBase();
+     *     console.log(`You have ${base.tables.length} tables`);
+     * }
      * ```
      */
   }, {
@@ -197,8 +216,12 @@ var BaseCore = exports.BaseCore = /*#__PURE__*/function (_AbstractModel) {
      *
      * @example
      * ```js
-     * import {base} from '@airtable/blocks';
-     * console.log(base.activeCollaborators[0].email);
+     * import {useBase} from '@airtable/blocks/[placeholder-path]/ui';
+     *
+     * function MyApp() {
+     *     const base = useBase();
+     *     console.log(base.activeCollaborators[0].email);
+     * }
      * ```
      */
     function get() {

package/dist/cjs/shared/models/field_core.js

@@ -127,7 +127,7 @@ var FieldCore = exports.FieldCore = /*#__PURE__*/function (_AbstractModel) {
      * @see {@link FieldType}
      * @example
      * ```js
-     * import {FieldType} from '@airtable/blocks/models';
+     * import {FieldType} from '@airtable/blocks/[placeholder-path]/models';
      *
      * if (myField.type === FieldType.CURRENCY) {
      *     console.log(myField.options.symbol);

package/dist/cjs/shared/models/record_core.js

@@ -79,7 +79,7 @@ var RecordCore = exports.RecordCore = /*#__PURE__*/function (_AbstractModel) {
      * @internal (since we may not be able to return parent model instances in the immutable models world)
      * @example
      * ```js
-     * import {useRecords} from '@airtable/blocks/ui';
+     * import {useRecords} from '@airtable/blocks/base/ui';
      * const records = useRecords(myTable);
      * console.log(records[0].parentTable.id === myTable.id);
      * // => true

package/dist/cjs/shared/models/session_core.js

@@ -86,7 +86,7 @@ var SessionCore = exports.SessionCore = /*#__PURE__*/function (_AbstractModel) {
      *
      * @example
      * ```js
-     * import {useSession} from '@airtable/blocks/ui';
+     * import {useSession} from '@airtable/blocks/[placeholder-path]/ui';
      *
      * function CurrentUser() {
      *     const session = useSession();

package/dist/cjs/shared/models/table_core.js

@@ -81,7 +81,7 @@ var TableCore = exports.TableCore = /*#__PURE__*/function (_AbstractModel) {
      * @internal (since we may not be able to return parent model instances in the immutable models world)
      * @example
      * ```js
-     * import {base} from '@airtable/blocks';
+     * import {base} from '@airtable/blocks/base';
      * const table = base.getTableByName('Table 1');
      * console.log(table.parentBase.id === base.id);
      * // => true

package/dist/cjs/shared/sdk_core.js

@@ -13,7 +13,7 @@ var _global_config = _interopRequireDefault(require("./global_config"));
  * @hidden
  * @example
  * ```js
- * import {runInfo} from '@airtable/blocks';
+ * import {runInfo} from '@airtable/blocks/base';
  * if (runInfo.isFirstRun) {
  *     // The current user just installed this block.
  *     // Take the opportunity to show any onboarding and set
@@ -39,7 +39,7 @@ var BlockSdkCore = exports.BlockSdkCore = /*#__PURE__*/function () {
      *
      * @example
      * ```js
-     * import {installationId} from '@airtable/blocks';
+     * import {installationId} from '@airtable/blocks/base';
      * console.log(installationId);
      * // => 'blifDutUr92OKwnUn'
      * ```
@@ -69,7 +69,7 @@ var BlockSdkCore = exports.BlockSdkCore = /*#__PURE__*/function () {
 
     // Bind the public methods on this class so users can import
     // just the method, e.g.
-    // import {reload} from '@airtable/blocks';
+    // import {reload} from '@airtable/blocks/base';
     this.reload = this.reload.bind(this);
   }
 
@@ -83,8 +83,8 @@ var BlockSdkCore = exports.BlockSdkCore = /*#__PURE__*/function () {
      * @example
      * ```js
      * import React from 'react';
-     * import {reload} from '@airtable/blocks';
-     * import {Button, initializeBlock} from '@airtable/blocks/ui';
+     * import {reload} from '@airtable/blocks/base';
+     * import {Button, initializeBlock} from '@airtable/blocks/base/ui';
      * function MyBlock() {
      *     return <Button onClick={() => reload()}>Reload</Button>;
      * }
@@ -112,4 +112,4 @@ var BlockSdkCore = exports.BlockSdkCore = /*#__PURE__*/function () {
  * @hidden
  */
 // @ts-ignore
-(0, _defineProperty2.default)(BlockSdkCore, "VERSION", "1.18.2");
+(0, _defineProperty2.default)(BlockSdkCore, "VERSION", "1.19.0");

package/dist/cjs/shared/types/field.js

@@ -12,7 +12,7 @@ exports.FieldType = void 0;
  *
  * @example
  * ```js
- * import {FieldType} from '@airtable/blocks/models';
+ * import {FieldType} from '@airtable/blocks/[placeholder-path]/models';
  * const numberFields = myTable.fields.filter(field => (
  *     field.type === FieldType.NUMBER
  * ));

package/dist/cjs/shared/ui/remote_utils.js

@@ -17,7 +17,7 @@ var _error_utils = require("../error_utils");
  * @param css The CSS string.
  * @example
  * ```js
- * import {loadCSSFromString} from '@airtable/blocks/ui';
+ * import {loadCSSFromString} from '@airtable/blocks/[placeholder-path]/ui';
  * loadCSSFromString('body { background: red; }');
  * ```
  * @docsPath UI/utils/loadCSSFromString
@@ -38,7 +38,7 @@ function loadCSSFromString(css) {
  * @param url The URL of the stylesheet.
  * @example
  * ```js
- * import {loadCSSFromURLAsync} from '@airtable/blocks/ui';
+ * import {loadCSSFromURLAsync} from '@airtable/blocks/[placeholder-path]/ui';
  * loadCSSFromURLAsync('https://example.com/style.css');
  * ```
  * @docsPath UI/utils/loadCSSFromURLAsync
@@ -69,7 +69,7 @@ function loadCSSFromURLAsync(url) {
  * @param url The URL of the script.
  * @example
  * ```js
- * import {loadScriptFromURLAsync} from '@airtable/blocks/ui';
+ * import {loadScriptFromURLAsync} from '@airtable/blocks/[placeholder-path]/ui';
  * loadScriptFromURLAsync('https://example.com/script.js');
  * ```
  * @docsPath UI/utils/loadScriptFromURLAsync

package/dist/cjs/shared/ui/use_color_scheme.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorScheme = useColorScheme;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+/** @module @airtable/blocks/ui: useColorScheme */ /** */
+
+/**
+ * A hook for checking whether Airtable is in light mode or dark mode.
+ *
+ * @returns An object with a `colorScheme` property, which can be `'light'` or `'dark'`.
+ *
+ * @example
+ * ```js
+ * import {useColorScheme} from '@airtable/blocks/[placeholder-path]/ui';
+ *
+ * function MyApp() {
+ *     const {colorScheme} = useColorScheme();
+ *     return (
+ *         <div style={colorScheme === 'dark' ?
+ *             {color: 'white', backgroundColor: 'black'} :
+ *             {color: 'black', backgroundColor: 'white'}
+ *         }>
+ *             Tada!
+ *         </div>
+ *     );
+ * }
+ * ```
+ * @docsPath UI/hooks/useColorScheme
+ * @hook
+ */
+// Returns an object so we can add more properties if we need to, eg a setter to change the
+// color scheme from within extensions, whether the preference is directly set or inherited from
+// the browser, etc.
+function useColorScheme() {
+  var _useState = (0, _react.useState)(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    colorScheme = _useState2[0],
+    setColorScheme = _useState2[1];
+  (0, _react.useEffect)(() => {
+    var darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    // Fires when e.matches changes. If there are more color schemes than light and dark,
+    // we'll need multiple listeners (and corresponding media queries)
+    var darkModeListener = e => {
+      setColorScheme(e.matches ? 'dark' : 'light');
+    };
+    darkModeQuery.addEventListener('change', darkModeListener);
+    return () => {
+      // Clear listeners when the component unmounts
+      darkModeQuery.removeEventListener('change', darkModeListener);
+    };
+  }, []);
+  return {
+    colorScheme
+  };
+}

package/dist/cjs/shared/ui/use_global_config.js

@@ -15,9 +15,10 @@ var _sdk_context = require("./sdk_context");
  *
  * @example
  * ```js
- * import {Button, useGlobalConfig} from '@airtable/blocks/ui';
+ * import {useGlobalConfig, useRunInfo} from '@airtable/blocks/[placeholder-path]/ui';
  *
  * function SyncedCounter() {
+ *     const runInfo = useRunInfo();
  *     const globalConfig = useGlobalConfig();
  *     const count = globalConfig.get('count');
  *
@@ -25,13 +26,17 @@ var _sdk_context = require("./sdk_context");
  *     const decrement = () => globalConfig.setAsync('count', count - 1);
  *     const isEnabled = globalConfig.hasPermissionToSet('count');
  *
- *     return (
- *         <React.Fragment>
- *             <Button icon="minus" onClick={decrement} disabled={!isEnabled} ariaLabel="decrease"/>
- *             {count}
- *             <Button icon="plus" onClick={increment} disabled={!isEnabled} ariaLabel="increase"/>
- *         </React.Fragment>
- *     );
+ *     if (runInfo.isPageElementInEditMode) {
+ *         return (
+ *             <div>
+ *                 <button onClick={decrement} disabled={!isEnabled} ariaLabel="decrease">-</button>
+ *                 {count}
+ *                 <button onClick={increment} disabled={!isEnabled} ariaLabel="increase">+</button>
+ *             </div>
+ *         );
+ *     } else {
+ *         return <div>{count}</div>;
+ *     }
  * }
  * ```
  * @docsPath UI/hooks/useGlobalConfig

package/dist/cjs/shared/ui/use_synced.js

@@ -14,7 +14,7 @@ var _sdk_context = require("./sdk_context");
  * @param globalConfigKey
  * @example
  * ```js
- * import {useBase, useSynced} from '@airtable/blocks/ui';
+ * import {useBase, useSynced} from '@airtable/blocks/[placeholder-path]/ui';
  *
  * function CustomInputSynced() {
  *    const [value, setValue, canSetValue] = useSynced('myGlobalConfigKey');

package/dist/cjs/shared/ui/use_watchable.js

@@ -45,39 +45,20 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  *
  * @example
  * ```js
- * import {useWatchable} from '@airtable/blocks/ui';
+ * import {useWatchable} from '@airtable/blocks/[placeholder-path]/ui';
  *
  * function TableName({table}) {
  *     useWatchable(table, 'name');
  *     return <span>The table name is {table.name}</span>;
  * }
  *
- * function ViewNameAndType({view}) {
- *     useWatchable(view, ['name', 'type']);
- *     return <span>The view name is {view.name} and the type is {view.type}</span>;
- * }
- *
- * function RecordValuesAndColorInViewIfExists({record, field, view}) {
- *     useWatchable(record, ['cellValues', view ? `colorInView:${view.id}` : null]);
+ * function RecordValues({record, field}) {
+ *     useWatchable(record, ['cellValues']);
  *     return <span>
  *         The record has cell value {record.getCellValue(field)} in {field.name}.
- *         {view ? `The record has color ${record.getColorInView(view)} in ${view.name}.` : null}
  *     </span>
  * }
  * ```
- *
- * @example
- * ```js
- * import {useWatchable} from '@airtable/blocks/ui';
- *
- * function ActiveView({cursor}) {
- *     useWatchable(cursor, 'activeViewId', () => {
- *          alert('active view changed!!!')
- *     });
- *
- *     return <span>Active view id: {cursor.activeViewId}</span>;
- * }
- * ```
  * @docsPath UI/hooks/useWatchable
  * @hook
  */