@airtable/blocks 0.0.0-experimental-f52bc4e5e-20250709 → 0.0.0-experimental-3649c7162-20250904

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

@@ -1,29 +1,17 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.symbol.description.js");
-require("core-js/modules/es.array.from.js");
-require("core-js/modules/es.array.slice.js");
-require("core-js/modules/es.regexp.exec.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useLoadable;
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.promise.js");
-require("core-js/modules/es.regexp.to-string.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 var _react = require("react");
 var _useSubscription = require("use-subscription");
 var _private_utils = require("../../shared/private_utils");
 var _error_utils = require("../../shared/error_utils");
 var _use_array_identity = _interopRequireDefault(require("../../shared/ui/use_array_identity"));
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } /** @module @airtable/blocks/ui: useLoadable */ /** */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @module @airtable/blocks/ui: useLoadable */ /** */
+
 // rather than asking for an AbstractModelWithAsyncData, we define a much more specific interface
 // that enforces 'isDataLoaded' as a watchable key.
 /**
@@ -31,7 +19,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * Usually a {@link Cursor}, {@link RecordQueryResult}, or a {@link ViewMetadataQueryResult}.
  */
 
-var SUSPENSE_CLEAN_UP_MS = 60000;
+const SUSPENSE_CLEAN_UP_MS = 60000;
 
 /**
  * Options object for the {@link useLoadable} hook.
@@ -113,34 +101,25 @@ var SUSPENSE_CLEAN_UP_MS = 60000;
  * @hook
  */
 function useLoadable(models) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+  let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     shouldSuspend: true
   };
-  var shouldSuspend = opts && (0, _private_utils.has)(opts, 'shouldSuspend') ? opts.shouldSuspend : true;
-  var constModels = (0, _use_array_identity.default)(Array.isArray(models) ? models : [models]);
-  var compactModels = (0, _react.useMemo)(() => {
-    var compacted = (0, _private_utils.compact)(constModels);
-    var _iterator = _createForOfIteratorHelper(compacted),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var model = _step.value;
-        if (typeof model.loadDataAsync !== 'function') {
-          throw (0, _error_utils.spawnError)('useLoadable called with %s, which is not a loadable', typeof model === 'object' ? model.toString() : typeof model);
-        }
+  const shouldSuspend = opts && (0, _private_utils.has)(opts, 'shouldSuspend') ? opts.shouldSuspend : true;
+  const constModels = (0, _use_array_identity.default)(Array.isArray(models) ? models : [models]);
+  const compactModels = (0, _react.useMemo)(() => {
+    const compacted = (0, _private_utils.compact)(constModels);
+    for (const model of compacted) {
+      if (typeof model.loadDataAsync !== 'function') {
+        throw (0, _error_utils.spawnError)('useLoadable called with %s, which is not a loadable', typeof model === 'object' ? model.toString() : typeof model);
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
     }
     return compacted;
   }, [constModels]);
 
   // .every returns `true` in the case of an empty array
-  var areAllModelsLoaded = compactModels.every(model => model.isDataLoaded);
+  const areAllModelsLoaded = compactModels.every(model => model.isDataLoaded);
   if (shouldSuspend && !areAllModelsLoaded) {
-    var suspensePromise = Promise.all(compactModels.map(model => model.loadDataAsync())).then(() => {
+    const suspensePromise = Promise.all(compactModels.map(model => model.loadDataAsync())).then(() => {
       // if data isn't loaded and we're in suspense mode, we need to start the data loading and
       // throw the load promise. when we throw though, the render tree gets thrown away and none
       // of out hooks will be retained - so we can't attach this QueryResult to a component
@@ -149,17 +128,8 @@ function useLoadable(models) {
       // passed, we unload it, allowing the data to be released as long as it's not used anywhere
       // else in the extension.
       setTimeout(() => {
-        var _iterator2 = _createForOfIteratorHelper(compactModels),
-          _step2;
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            var model = _step2.value;
-            model.unloadData();
-          }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
+        for (const model of compactModels) {
+          model.unloadData();
         }
       }, SUSPENSE_CLEAN_UP_MS);
     }).catch(error => {
@@ -173,33 +143,15 @@ function useLoadable(models) {
   // re-render when loaded state changes. technically, we could use `useWatchable` here, but as
   // our LoadableModel isn't a Watchable, we can't. There's no way to preserve flow errors when
   // watching something that doesn't have a 'isDataLoaded' watch key and use `Watchable`.
-  var modelIsLoadedSubscription = (0, _react.useMemo)(() => ({
+  const modelIsLoadedSubscription = (0, _react.useMemo)(() => ({
     getCurrentValue: () => compactModels.map(model => model.isDataLoaded).join(','),
     subscribe: onChange => {
-      var _iterator3 = _createForOfIteratorHelper(compactModels),
-        _step3;
-      try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var model = _step3.value;
-          model.watch('isDataLoaded', onChange);
-        }
-      } catch (err) {
-        _iterator3.e(err);
-      } finally {
-        _iterator3.f();
+      for (const model of compactModels) {
+        model.watch('isDataLoaded', onChange);
       }
       return () => {
-        var _iterator4 = _createForOfIteratorHelper(compactModels),
-          _step4;
-        try {
-          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-            var model = _step4.value;
-            model.unwatch('isDataLoaded', onChange);
-          }
-        } catch (err) {
-          _iterator4.e(err);
-        } finally {
-          _iterator4.f();
+        for (const model of compactModels) {
+          model.unwatch('isDataLoaded', onChange);
         }
       };
     }
@@ -210,30 +162,12 @@ function useLoadable(models) {
   // the component lifecycle. That means loading the data when the component mounts, and
   // unloading it when the component unmounts.
   (0, _react.useEffect)(() => {
-    var _iterator5 = _createForOfIteratorHelper(compactModels),
-      _step5;
-    try {
-      for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-        var model = _step5.value;
-        model.loadDataAsync();
-      }
-    } catch (err) {
-      _iterator5.e(err);
-    } finally {
-      _iterator5.f();
+    for (const model of compactModels) {
+      model.loadDataAsync();
     }
     return () => {
-      var _iterator6 = _createForOfIteratorHelper(compactModels),
-        _step6;
-      try {
-        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-          var model = _step6.value;
-          model.unloadData();
-        }
-      } catch (err) {
-        _iterator6.e(err);
-      } finally {
-        _iterator6.f();
+      for (const model of compactModels) {
+        model.unloadData();
       }
     };
   }, [compactModels]);

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,6 +8,7 @@ var _perform_record_action = require("../perform_record_action");
 var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
 var _sdk_context = require("../../shared/ui/sdk_context");
 var _use_loadable = _interopRequireDefault(require("./use_loadable"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useRecordActionData */ /** */
 
 /**
@@ -63,8 +63,9 @@ var _use_loadable = _interopRequireDefault(require("./use_loadable"));
  */
 
 function useRecordActionData() {
-  var _useSdk = (0, _sdk_context.useSdk)(),
-    performRecordAction = _useSdk.performRecordAction;
+  const {
+    performRecordAction
+  } = (0, _sdk_context.useSdk)();
 
   // Puts the block in suspense until the liveapp handler has been registered.
   (0, _use_loadable.default)(performRecordAction);

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

@@ -1,10 +1,5 @@
 "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
 });
@@ -19,8 +14,9 @@ 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 _getRequireWildcardCache(e) { return e ? t : r; })(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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useRecords */ /** */
 
 /** */
@@ -37,7 +33,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @internal
  */
 function useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, functionNameForErrors, opts) {
-  var queryResult;
+  let queryResult;
   if (tableOrViewOrQueryResult instanceof _table.default || tableOrViewOrQueryResult instanceof _view.default) {
     queryResult = tableOrViewOrQueryResult.selectRecords(opts);
   } else {
@@ -91,14 +87,14 @@ function useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, functionNameFo
  * @hook
  */
 function useRecordIds(tableOrViewOrQueryResult, opts) {
-  var generatedOpts = tableOrViewOrQueryResult instanceof _table.default || tableOrViewOrQueryResult instanceof _view.default ? {
+  const 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);
+  const queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordIds', generatedOpts);
   (0, _use_watchable.default)(queryResult, ['recordIds']);
   return queryResult ? queryResult.recordIds : null;
 }
@@ -184,7 +180,7 @@ function useRecordIds(tableOrViewOrQueryResult, opts) {
  * @hook
  */
 function useRecords(tableOrViewOrQueryResult, opts) {
-  var queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecords', 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']);
@@ -244,9 +240,9 @@ function useRecords(tableOrViewOrQueryResult, opts) {
  * @hook
  */
 function useRecordById(tableOrViewOrQueryResult, recordId, opts) {
-  var queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordById', opts);
+  const queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordById', opts);
   (0, _use_watchable.default)(queryResult, ['records', 'recordColors']);
-  var record = queryResult ? queryResult.getRecordByIdIfExists(recordId) : null;
+  const record = queryResult ? queryResult.getRecordByIdIfExists(recordId) : null;
   (0, _use_watchable.default)(record, ['cellValues']);
   return record;
 }
@@ -259,7 +255,7 @@ function useRecordById(tableOrViewOrQueryResult, recordId, opts) {
  * @hook
  */
 function useRecordQueryResult(tableOrViewOrQueryResult, opts) {
-  var queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordQueryResult', opts);
+  const queryResult = useUnwatchedRecordQueryResult_(tableOrViewOrQueryResult, 'useRecordQueryResult', opts);
   (0, _use_watchable.default)(queryResult, ['records', 'cellValues', 'recordColors', 'groups']);
   return queryResult;
 }

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

@@ -1,11 +1,11 @@
 "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"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useSession */ /** */
 
 /**

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,6 +7,7 @@ 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 */ /** */
 
 /**
@@ -38,8 +38,9 @@ var _sdk_context = require("../../shared/ui/sdk_context");
  * @hook
  */
 function useSettingsButton(onClickCallback) {
-  var _useSdk = (0, _sdk_context.useSdk)(),
-    settingsButton = _useSdk.settingsButton;
+  const {
+    settingsButton
+  } = (0, _sdk_context.useSdk)();
   (0, _react.useEffect)(() => {
     settingsButton.show();
 

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useStyledSystem;
+var _emotion = require("emotion");
+var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
+var _index = require("./system/index");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @internal */
+function useStyledSystem(styleProps) {
+  let styleParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _index.allStylesParser;
+  const theme = (0, _use_theme.default)();
+
+  // 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 = (0, _emotion.css)(styles);
+  return classNameForStyleProps;
+}

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

@@ -1,14 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useTextColorForBackgroundColor;
 var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @internal */
 function useTextColorForBackgroundColor(backgroundColor) {
-  var _useTheme = (0, _use_theme.default)(),
-    textColorsByBackgroundColor = _useTheme.textColorsByBackgroundColor;
+  const {
+    textColorsByBackgroundColor
+  } = (0, _use_theme.default)();
   return textColorsByBackgroundColor[backgroundColor];
 }

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,6 +7,7 @@ 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 */ /** */
 
 /** */
@@ -41,9 +41,9 @@ var _use_loadable = _interopRequireDefault(require("./use_loadable"));
  * @hook
  */
 function useViewMetadata(viewOrViewMetadataQueryResult) {
-  var queryResult = viewOrViewMetadataQueryResult instanceof _view.default ? viewOrViewMetadataQueryResult.selectMetadata() : viewOrViewMetadataQueryResult;
-  (0, _use_loadable.default)(queryResult !== null && queryResult !== void 0 ? queryResult : null);
+  const queryResult = viewOrViewMetadataQueryResult instanceof _view.default ? viewOrViewMetadataQueryResult.selectMetadata() : viewOrViewMetadataQueryResult;
+  (0, _use_loadable.default)(queryResult ?? null);
   (0, _use_watchable.default)(queryResult, ['allFields', 'visibleFields', 'groupLevels']);
-  return queryResult !== null && queryResult !== void 0 ? queryResult : null;
+  return queryResult ?? null;
 }
 var _default = exports.default = useViewMetadata;

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

@@ -1,12 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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 */ /** */
 
 /**
@@ -41,7 +41,7 @@ var _sdk_context = require("../../shared/ui/sdk_context");
  * @hook
  */
 function useViewport() {
-  var viewport = (0, _sdk_context.useSdk)().viewport;
+  const viewport = (0, _sdk_context.useSdk)().viewport;
   (0, _use_watchable.default)(viewport, ['isFullscreen', 'size', 'minSize', 'maxFullscreenSize']);
   return viewport;
 }

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

@@ -0,0 +1,89 @@
+"use strict";
+
+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.
+ */
+
+/**
+ * Props for the {@link ViewPicker} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/ViewPicker
+ */
+
+/**
+ * Dropdown menu component for selecting views.
+ *
+ * [[ Story id="modelpickers--viewpicker-example" title="View picker example" ]]
+ *
+ * @component
+ * @docsPath UI/components/ViewPicker
+ */
+const ViewPicker = (props, ref) => {
+  const {
+    table,
+    view: selectedView,
+    shouldAllowPickingNone,
+    // Exclude ViewType.FORM
+    allowedTypes = [_view.ViewType.GRID, _view.ViewType.CALENDAR, _view.ViewType.GALLERY, _view.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']);
+  if (!table || table.isDeleted) {
+    return null;
+  }
+  function _onChange(viewId) {
+    if (onChange) {
+      const view = table && !table.isDeleted && viewId ? table.getViewByIdIfExists(viewId) : null;
+      onChange(view);
+    }
+  }
+  let placeholderToUse;
+  if (placeholder === undefined) {
+    // Let's set a good default value for the placeholder, depending
+    // on the shouldAllowPickingNone flag.
+    placeholderToUse = shouldAllowPickingNone ? 'None' : 'Pick a view...';
+  } else {
+    placeholderToUse = placeholder;
+  }
+  const allowedTypesSet = {};
+  if (allowedTypes) {
+    for (const allowedType of allowedTypes) {
+      allowedTypesSet[allowedType] = true;
+    }
+  }
+  const shouldAllowPickingViewFn = view => allowedTypesSet[view.type];
+  return /*#__PURE__*/React.createElement(_model_picker_select.default, _extends({}, restOfProps, {
+    ref: ref,
+    models: table.views
+    // `shouldAllowPickingModelFn` is typed as `AnyModel`. Cast to any since we only expect `Field`.
+    ,
+    shouldAllowPickingModelFn: shouldAllowPickingViewFn,
+    selectedModelId: selectedView && !selectedView.isDeleted ? selectedView.id : null,
+    modelKeysToWatch: ['name'],
+    shouldAllowPickingNone: shouldAllowPickingNone,
+    placeholder: placeholderToUse,
+    onChange: _onChange
+  }));
+};
+const ForwardedRefViewPicker = /*#__PURE__*/React.forwardRef(ViewPicker);
+ForwardedRefViewPicker.displayName = 'ViewPicker';
+var _default = exports.default = ForwardedRefViewPicker;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _use_synced = _interopRequireDefault(require("../../shared/ui/use_synced"));
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _view_picker = _interopRequireDefault(require("./view_picker"));
+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 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] = (0, _use_synced.default)(globalConfigKey);
+  const sdk = (0, _sdk_context.useSdk)();
+  (0, _use_watchable.default)(sdk.base, ['tables']);
+  (0, _use_watchable.default)(table, ['views']);
+  function _getViewFromGlobalConfigValue() {
+    if (!table || table.isDeleted) {
+      return null;
+    }
+    return typeof viewId === 'string' && table ? table.getViewByIdIfExists(viewId) : null;
+  }
+  return /*#__PURE__*/React.createElement(_view_picker.default, _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';
+var _default = exports.default = ForwardedRefViewPickerSynced;