@airtable/blocks 0.0.0-experimental-20e3506bd-20250428

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

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function get() {
+    return _box.default;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _button.default;
+  }
+});
+Object.defineProperty(exports, "ChoiceToken", {
+  enumerable: true,
+  get: function get() {
+    return _choice_token.default;
+  }
+});
+Object.defineProperty(exports, "CollaboratorToken", {
+  enumerable: true,
+  get: function get() {
+    return _collaborator_token.default;
+  }
+});
+Object.defineProperty(exports, "ColorPalette", {
+  enumerable: true,
+  get: function get() {
+    return _color_palette.default;
+  }
+});
+Object.defineProperty(exports, "ConfirmationDialog", {
+  enumerable: true,
+  get: function get() {
+    return _confirmation_dialog.default;
+  }
+});
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function get() {
+    return _dialog.default;
+  }
+});
+Object.defineProperty(exports, "FormField", {
+  enumerable: true,
+  get: function get() {
+    return _form_field.default;
+  }
+});
+Object.defineProperty(exports, "Heading", {
+  enumerable: true,
+  get: function get() {
+    return _heading.default;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function get() {
+    return _icon.default;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _input.default;
+  }
+});
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function get() {
+    return _label.default;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function get() {
+    return _link.default;
+  }
+});
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function get() {
+    return _loader.default;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _modal.default;
+  }
+});
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function get() {
+    return _popover.default;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _select.default;
+  }
+});
+Object.defineProperty(exports, "SelectButtons", {
+  enumerable: true,
+  get: function get() {
+    return _select_buttons.default;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function get() {
+    return _switch.default;
+  }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    return _text.default;
+  }
+});
+Object.defineProperty(exports, "TextButton", {
+  enumerable: true,
+  get: function get() {
+    return _text_button.default;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function get() {
+    return _tooltip.default;
+  }
+});
+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;
+  }
+});
+var _box = _interopRequireDefault(require("./box"));
+var _button = _interopRequireDefault(require("./button"));
+var _choice_token = _interopRequireDefault(require("./choice_token"));
+var _collaborator_token = _interopRequireDefault(require("./collaborator_token"));
+var _color_palette = _interopRequireDefault(require("./color_palette"));
+var _confirmation_dialog = _interopRequireDefault(require("./confirmation_dialog"));
+var _dialog = _interopRequireDefault(require("./dialog"));
+var _form_field = _interopRequireDefault(require("./form_field"));
+var _heading = _interopRequireDefault(require("./heading"));
+var _icon = _interopRequireDefault(require("./icon"));
+var _input = _interopRequireDefault(require("./input"));
+var _label = _interopRequireDefault(require("./label"));
+var _link = _interopRequireDefault(require("./link"));
+var _loader = _interopRequireDefault(require("./loader"));
+var _modal = _interopRequireDefault(require("./modal"));
+var _popover = _interopRequireDefault(require("./popover"));
+var _remote_utils = require("../../shared/ui/remote_utils");
+var _select = _interopRequireDefault(require("./select"));
+var _select_buttons = _interopRequireDefault(require("./select_buttons"));
+var _switch = _interopRequireDefault(require("./switch"));
+var _text = _interopRequireDefault(require("./text"));
+var _text_button = _interopRequireDefault(require("./text_button"));
+var _tooltip = _interopRequireDefault(require("./tooltip"));

package/dist/cjs/base/ui/use_base.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _use_base = _interopRequireDefault(require("../../shared/ui/use_base"));
+/** @module @airtable/blocks/ui: useBase */ /** */
+
+/**
+ * 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
+ * change to your base like tables being added or removed, fields getting renamed, etc. It excludes
+ * any change to the actual records in the base.
+ *
+ * `useBase` should meet most of your needs for working with base schema. If you need more granular
+ * control of when your component updates or want to do anything other than re-render, the lower
+ * level {@link useWatchable} hook might help.
+ *
+ * Returns the current base.
+ *
+ * @example
+ * ```js
+ * import {useBase} from '@airtable/blocks/ui';
+ *
+ * // renders a list of tables and automatically updates
+ * function TableList() {
+ *      const base = useBase();
+ *
+ *      const tables = base.tables.map(table => {
+ *          return <li key={table.id}>{table.name}</li>;
+ *      });
+ *
+ *      return <ul>{tables}</ul>;
+ * }
+ * ```
+ * @docsPath UI/hooks/useBase
+ * @hook
+ */
+function useBase() {
+  return (0, _use_base.default)();
+}
+var _default = exports.default = useBase;

package/dist/cjs/base/ui/use_cursor.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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");
+/** @module @airtable/blocks/ui: useCursor */ /** */
+
+/**
+ * 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.
+ * It excludes any change to the selected Records or selected Fields.
+ *
+ * `useCursor` should meet most of your needs for working with base cursors. If you need more granular
+ * control of when your component updates or want to do anything other than re-render, the lower
+ * level {@link useWatchable} hook might help.
+ *
+ * Returns the current cursor.
+ *
+ * @example
+ * ```js
+ * import {useBase, useCursor} from '@airtable/blocks/ui';
+ *
+ * // renders a list of tables and automatically updates
+ * function TableList() {
+ *      const base = useBase();
+ *      const cursor = useCursor();
+ *
+ *      const table = base.getTableById(cursor.activeTableId);
+ *
+ *      return <p>The table named "{table.name}" is active!</p>;
+ * }
+ * ```
+ * @docsPath UI/hooks/useCursor
+ * @hook
+ */
+var useCursor = () => {
+  var _useSdk = (0, _sdk_context.useSdk)(),
+    cursor = _useSdk.cursor;
+  (0, _use_watchable.default)(cursor, ['activeTableId', 'activeViewId']);
+  return cursor;
+};
+var _default = exports.default = useCursor;

package/dist/cjs/base/ui/use_form_field.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormFieldContext = void 0;
+exports.default = useFormField;
+var _react = require("react");
+/** @internal */
+
+var FormFieldContext = exports.FormFieldContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * Returns the ID for a control (eg input, select, etc.) inside of a `FormField`.
+ *
+ * @internal
+ */
+function useFormField() {
+  return (0, _react.useContext)(FormFieldContext);
+}

package/dist/cjs/base/ui/use_record_action_data.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useRecordActionData;
+var _perform_record_action = require("../perform_record_action");
+var _use_loadable = _interopRequireDefault(require("../../shared/ui/use_loadable"));
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+/** @module @airtable/blocks/ui: useRecordActionData */ /** */
+
+/**
+ * A hook to watch "open extension" / "perform record action" events (from button field). Returns
+ * the data corresponding to the latest action, or `null` if no actions have occurred yet. If there
+ * was a pending event for the extension (for example, because a button that opens this extension was
+ * clicked while the extensions dashboard was closed) it will be returned as the initial value.
+ *
+ * Like {@link useLoadable}, this hook puts the extension in suspense while subscribing to events and
+ * fetching the initial data.
+ *
+ * Also see {@link registerRecordActionDataCallback}, which subscribes to the same events in an
+ * asynchronous (callback based) way. An advantage of using this hook over the callback is that you
+ * immediately can handle any pending events when your extension opens - with a callback, your extension
+ * will finish it's initial render before handling the event.
+ *
+ * Like {@link registerRecordActionDataCallback}, your extension won't receive events until this hook is
+ * used for the first time. Because of that, we recommend only using this hook once, in the top
+ * level component of your extension. Similarly, using both `registerRecordActionDataCallback` and
+ * `useRecordActionData` is not supported.
+ *
+ * You can test your extension in development by sending "perform record action" events to your extension
+ * in the "Advanced" panel of the extension developer tools.
+ *
+ * After releasing your extension, you can use it with a button field by choosing the "Open custom
+ * extension" action and selecting your extension.
+ *
+ * @example
+ * ```js
+ * import React from 'react';
+ * import {useRecordActionData} from '@airtable/blocks/ui';
+ *
+ * function LatestRecordAction() {
+ *     const recordActionData = useRecordActionData();
+ *
+ *     if (recordActionData === null) {
+ *         return <span>No events yet</span>;
+ *     }
+ *
+ *     return (
+ *         <ul>
+ *             <li>Record id: {recordActionData.recordId}</li>
+ *             <li>View id: {recordActionData.viewId}</li>
+ *             <li>Table id: {recordActionData.tableId}</li>
+ *         </ul>
+ *     );
+ * }
+ * ```
+ *
+ * @docsPath UI/hooks/useRecordActionData
+ * @hook
+ */
+
+function useRecordActionData() {
+  var _useSdk = (0, _sdk_context.useSdk)(),
+    performRecordAction = _useSdk.performRecordAction;
+
+  // Puts the block in suspense until the liveapp handler has been registered.
+  (0, _use_loadable.default)(performRecordAction);
+
+  // Note: if we were to pass a callback to useWatchable, it would drop the callback for the
+  // initial recordActionData (if it exists) when the component is mounted.
+  // We'd have to trigger it manually by comparing recordActionData to it's previous value in an
+  // effect, but would need to be careful to not erroneously trigger it when the component
+  // unmounts and remounts.
+  // So, using a callback with useRecordActionData isn't supported right now for simplicity.
+  (0, _use_watchable.default)(performRecordAction, _perform_record_action.WatchablePerformRecordActionKeys.recordActionData);
+  return performRecordAction.recordActionData;
+}

package/dist/cjs/base/ui/use_records.js

@@ -0,0 +1,265 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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_loadable = _interopRequireDefault(require("../../shared/ui/use_loadable"));
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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: useRecords */ /** */
+
+/** */
+
+/** */
+
+/**
+ * Common code to all useRecordQueryResults, returns a RecordQueryResult and loads it - but does
+ * not watch any properties on it.
+ *
+ * @param tableOrViewOrQueryResult
+ * @param functionNameForErrors
+ * @param opts
+ * @internal
+ */
+function useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, functionNameForErrors, opts) {
+  var queryResult;
+  if (tableOrViewOrQueryResult instanceof _table.default || tableOrViewOrQueryResult instanceof _view.default) {
+    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);
+    }
+    queryResult = tableOrViewOrQueryResult;
+  }
+  (0, _use_loadable.default)(queryResult);
+  return queryResult;
+}
+
+/** */
+
+/** */
+
+/** */
+
+/**
+ * A hook for working with a set of record IDs from a table, view or query result. Automatically
+ * handles loading data and updating your component when the underlying data changes.
+ *
+ * This hook doesn't re-render when the data _inside_ the records changes - only when records are
+ * added, removed, or re-ordered. Use this over {@link useRecords} when you want to avoid watching
+ * cell data for all records. Use with {@link useRecordById} to only watch cell data for certain
+ * records.
+ *
+ * Under the hood, this hook creates a {@link TableOrViewQueryResult} if passed a table or view.
+ * Pass a query result if you want direct access to it (e.g. for `queryResult.getRecordById`).
+ *
+ * Returns an array of record IDs, or null if no model was passed in.
+ *
+ * @param tableOrViewOrQueryResult The {@link Table}, {@link View} or {@link RecordQueryResult} you want the record ids from.
+ * @param opts? If passing a Table or View, optional {@link RecordIdsQueryResultOpts} to control the results.
+ * @example
+ * ```js
+ *  import {useRecordIds, useBase} from '@airtable/blocks/ui';
+ *
+ *  function RecordCount() {
+ *      const base = useBase();
+ *      const table = base.tables[0];
+ *
+ *      // grab all the record ids from that table
+ *      const recordIds = useRecordIds(table);
+ *
+ *      // return the count
+ *      return <span>record count in {table.name}: {recordIds.length}</span>;
+ *  }
+ * ```
+ * @docsPath UI/hooks/useRecordIds
+ * @hook
+ */
+function useRecordIds(tableOrViewOrQueryResult, opts) {
+  var generatedOpts = tableOrViewOrQueryResult instanceof _table.default || tableOrViewOrQueryResult instanceof _view.default ? {
+    // Don't load/watch any cell value data, since it's not accessible anyway
+    fields: [],
+    // Similarly, don't load/watch record color mode data
+    recordColorMode: RecordColoring.modes.none(),
+    sorts: opts ? opts.sorts : undefined
+  } : opts;
+  var queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordIds', generatedOpts);
+  (0, _use_watchable.default)(queryResult, ['recordIds']);
+  return queryResult ? queryResult.recordIds : null;
+}
+
+/** */
+
+/** */
+
+/** */
+
+/**
+ * A hook for working with all of the records (including their colors and cell values) in a
+ * particular table, view or query result. Automatically handles loading data and updating
+ * your component when the underlying data changes.
+ *
+ * This hook re-renders when data concerning the records changes (specifically, when cell values
+ * change, the record color changes, and when records are added or removed) - that's
+ * useful, but can cause re-renders quite often, meaning {@link useRecordIds} or
+ * {@link useRecordById} could be more appropriate depending on your use case.
+ *
+ * Under the hood, this hook creates a {@link TableOrViewQueryResult} if passed a table or view.
+ * Pass a query result if you want direct access to it (e.g. for `queryResult.getRecordById`).
+ *
+ * Returns a list of records, or null if no model was passed in.
+ *
+ * @param tableOrViewOrQueryResult The {@link Table}, {@link View} or {@link RecordQueryResult} you want the records from.
+ * @param opts? If passing a Table or View, optional {@link RecordQueryResultOpts} to control the results.
+ * @example
+ * ```js
+ *  import {useRecords, useBase} from '@airtable/blocks/ui';
+ *
+ *  function GetRecords() {
+ *      const base = useBase();
+ *      const table = base.tables[0];
+ *      const view = table.views[0];
+ *      let records;
+ *
+ *      // Returns all records in the table
+ *      records = useRecords(table);
+ *
+ *      // Equivalent to the above - useful if you want to reuse the queryResult elsewhere
+ *      const queryResult = table.selectRecords();
+ *      records = useRecords(queryResult);
+ *
+ *      // Returns all records for a view
+ *      records = useRecords(view)
+ *
+ *      // Returns all records in a table, only loading data for the specified fields
+ *      records = useRecords(table, {fields: ['My field']});
+ *
+ *      // Returns all records in a table, sorting the records by values in the specified fields
+ *      records = useRecords(table, {sorts: [
+ *         // sort by 'My field' in ascending order...
+ *         {field: 'My field'},
+ *         // then by 'My other field' in descending order
+ *         {field: 'My other field', direction: 'desc'},
+ *      ]});
+ *  }
+ * ```
+ *
+ * @example
+ * ```js
+ *  import {useRecords, useBase} from '@airtable/blocks/ui';
+ *
+ *  function RecordList() {
+ *      const base = useBase();
+ *      const table = base.tables[0];
+ *
+ *      // grab all the records from that table
+ *      const records = useRecords(table);
+ *
+ *      // render a list of records:
+ *      return (
+ *          <ul>
+ *              {records.map(record => {
+ *                  return <li key={record.id}>{record.name}</li>
+ *              })}
+ *          </ul>
+ *      );
+ *  }
+ * ```
+ * @docsPath UI/hooks/useRecords
+ * @hook
+ */
+function useRecords(tableOrViewOrQueryResult, opts) {
+  var 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']);
+  return queryResult ? queryResult.records : null;
+}
+
+/** */
+
+/** */
+
+/**
+ * A hook for working with a single record. Automatically handles loading data and updating your
+ * component when the record's cell values or color changes.
+ *
+ * Often used with {@link useRecordIds} to render a list of records where each list item only
+ * updates when the specific record it concerns changes.
+ *
+ * Under the hood, this hook creates a {@link TableOrViewQueryResult} if passed a table or view.
+ * Pass a query result if you want direct access to it (e.g. for `queryResult.getRecordById`).
+ *
+ * Returns the specified record, or null if no model was passed in, or no record with that ID exists
+ * in the model.
+ *
+ * @param tableOrViewOrQueryResult The {@link Table}, {@link View} or {@link RecordQueryResult} you want a record from.
+ * @param recordId The ID of the record you want.
+ * @param opts? If passing a Table or View, optional {@link SingleRecordQueryResultOpts} to control the results.
+ * @example
+ * ```js
+ *  import {useRecordById, useRecordIds, useBase} from '@airtable/blocks/ui';
+ *
+ *  // this component concerns a single record - it only updates when that specific record updates
+ *  function RecordListItem({table, recordId}) {
+ *      const record = useRecordById(table, recordId);
+ *      return <li>{record.name}</li>;
+ *  }
+ *
+ *  // this component renders a list of records, but doesn't update when their cell values change -
+ *  // that's left up to RecordListItem
+ *  function RecordList() {
+ *      const base = useBase();
+ *      const table = base.tables[0];
+ *
+ *      // grab all the record ids from the table
+ *      const recordIds = useRecordIds(table);
+ *
+ *      // render a list of records:
+ *      return (
+ *          <ul>
+ *              {recordIds.map(recordId => {
+ *                  return <RecordListItem key={recordId} recordId={recordId} table={table} />
+ *              })}
+ *          </ul>
+ *      );
+ *  }
+ * ```
+ * @docsPath UI/hooks/useRecordById
+ * @hook
+ */
+function useRecordById(tableOrViewOrQueryResult, recordId, opts) {
+  var queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordById', opts);
+  (0, _use_watchable.default)(queryResult, ['records', 'recordColors']);
+  var record = queryResult ? queryResult.getRecordByIdIfExists(recordId) : null;
+  (0, _use_watchable.default)(record, ['cellValues']);
+  return record;
+}
+
+/**
+ * Docs: TODO(SeanKeenan)
+ *
+ * @docsPath UI/hooks/useRecordQueryResult
+ * @hidden
+ * @hook
+ */
+function useRecordQueryResult(tableOrViewOrQueryResult, opts) {
+  var queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordQueryResult', opts);
+  (0, _use_watchable.default)(queryResult, ['records', 'cellValues', 'recordColors', 'groups']);
+  return queryResult;
+}

package/dist/cjs/base/ui/use_session.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _use_session = _interopRequireDefault(require("../../shared/ui/use_session"));
+/** @module @airtable/blocks/ui: useSession */ /** */
+
+/**
+ * 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
+ * permissions change or when the current user's name changes).
+ *
+ * `useSession` should meet most of your needs for working with {@link Session}. If you need more granular
+ * control of when your component updates or want to do anything other than re-render, the lower
+ * level {@link useWatchable} hook might help.
+ *
+ * @example
+ * ```js
+ * import {CollaboratorToken, useSession} from '@airtable/blocks/ui';
+ *
+ * // Says hello to the current user and updates in realtime if the current user's
+ * // name or profile pic changes.
+ * function CurrentUserGreeter() {
+ *     const session = useSession();
+ *     return (
+ *         <React.Fragment>
+ *             Hello,
+ *             <CollaboratorToken collaborator={session.currentUser} />!
+ *         </React.Fragment>
+ *     );
+ * }
+ * ```
+ * @docsPath UI/hooks/useSession
+ * @hook
+ */
+function useSession() {
+  return (0, _use_session.default)();
+}
+var _default = exports.default = useSession;